Блог студии «Астен»

Волна создания сайтов "чтобы был" прошла и начинается волна изменения и улучшения внешнего вида сайтов.

Так как должен выглядеть современный сайт?
Какие основные отличия должны быть на сайте, чтобы заказчики понимали и платили за это?

( С картинками ... )

Появился заказ на дизайн второй версии сайта kamdetal.ru



Честно говоря, в городе Набережные Челны только ленивый не делает сайт по продаже запчастей Камаз. Однако не смотря на такую конкуренцию, все сайты похожи друг на друга.

И так задача: сделать сайт по продаже запчастей Камаз на новом, современном уровне 

По традиции в шапке должен находится Камаз, как бы нам этого не хотелось. Мы не ищем легких путей и решили, что Камаз должен быть видом  сверху, на темном фоне, а фотографировать его нужно в профессиональной фотостудии. Такого еще никто не делал.Дизайнер не привык искать помещение для фотостудии, оборудование и грамотного фотографа, а заказчику не нужны лишные траты. Поэтому просим заказчика нафоткать из окна любым цифровиком нужную модель Камаза.

Выбираем удачную фотографию Камаза, поворачиваем как надо, масштабируем под нужный размер и исправляем перспективу. Очень важно определиться с размером, т.к. тех-дизайн иллюстрации рисуются под разрешение 72 dpi с прорисовкой всех мелочей учитывая размер пикселов. Дальнейшее увеличение и даже уменьшение иллюстрации не допустимо.

 

Следующим шагом вырезаем все лишнее и помещяем Камаз на темный фон.

  

Теперь нам нужно разделить автомобиль на основные части с которыми нам придется работать в отдельности. Для этого создаем пустой слой, выделяем нужный элемент, например кабину. Создаем группу(Crtl+G) и маскируем ее нажав третью кнопку в палитре слоев All Layer Mask. Таким образом делаем группы для окон, бампера и других частей по желанию. Сохраняем файл под именем «Кабина» и забываем про раму.

Вот мы и подошли к самому сложному этапу. Необходимо глядя на модель, представить как и где нужно разместить свет для того,  чтобы подчеркнуть формы нашего Камаза с помощью бликов и отражений. Для этого этапа советую полистать wallpapers автомобилей и понаблюдать за формой отражений и цветом. 

Сильно не мучайте себя изучениями законов отражения, потому, что большинство смертных не знают как должен выглядеть тот или иной предмет. Да и нас уже рекламой приучили видеть святящиеся, истекающие конденсатом бутылки пива на темном фоне, хотя они такими становятся только на белом фоне с подсветкой. Таким образом, все что красиво и не вызывает сомнения и есть правильно.

Нарисуем условно свет падающий с двух сторон и подумаем как должны распределяться отражения на чистой и зеркальной поверхности. Представим что слева под кабиной находится большой прямоугольный отражатель который и будет отражаться на кабине.

А справа тоже источник света, но менее интенсивный. Я не фотограф, так что простите за неточности или полный бред ) 

Прорисовываем все основные изгибы, пока не думаем о мелочах и не боимся ошибаться. Всегда можно поправить и вернуться, главное не сливайте слои. Вообще нужно научиться отрисовывать тех-дизайн картинки не думая о времени, конечном результате и деньгах. Главное начать и спустя несколько часов сами увидите как вашими руками вырисовывается карамельная картинка. Для того чтобы увидеть исходных слой по которому идет отрисовка, мы размещаем его поверх остальных слоев и после выделения скрываем. 

Когда основная форма кабины Камаза прояснилась, добавляем более мелкие элементы. Тут на ваше усмотрение, что-то важно отрисовать, что-то необходимо сделать красивей, а на что-то можно не обращать внимание.

После добавления всех необходимых деталей идем гулять на улицу )) рекламная пауза так сказать.

---

И сново мы здесь, на пошаговой инструкции по тех-дизайн отрисовке автомобиля Камаз. 

Рама.

Когда мне пришлось за нее браться, я пожалел, что не попросил очистить автомобиль от снега. Я не специалист по запчастям Камаз и для меня было спасением, что рама черного цвета и находится на темном фоне.

Для удобства нарисуем тень под Камазом, закрепив его на поверхности. Тут я вам советую немного прибавить яркости на монитор.  

После выборочной отрисовки, я подошел к ответственной части — шасси автомобиля. Рисовать протектор в ручную естественно я не стал, да и не получилось бы так аккуратно как бы я не старался. Поэтому я нашел подходящее колесо, судя по рисунку протектора, оно от Камаза. 

Крепим его на нужное место и колдуем с настройками так, чтобы оно реально подходило по освещению к окружению.

Ну вот и все. Главное терпение, а если оно закончилось, выйдете и погуляйте. Кстати после прогулки или даже на следующий день, сам замечаешь за собой кучу косяков и вообще удивляешься почему раньше этого не видел.Пробуйте и все у вас получится. 

 

 Плишкин Дмитрий © asten.ru

 

Сделан и запущен в работу сайт для журнала по нефтяной промышленности и газу «Нефтьгазпром»

Адрес сайта
www.neftgazprom.ru

Cпецпредложение компании Астен



Если вашей фирме необходим сайт для того, чтобы о ней узнали потенциальные клиенты, а на данный момент в бюджетах не предусмотрены дополнительные затраты, то данное предложение как нельзя кстати!

За одну неделю мы изготавливаем красивый и качественный управляемый сайт, регистрируем доменное имя и публикуем в сети интернет и дарим его вам!

Подробности на сайте podarok.asten.ru

Автоматическое создание коробок для DVD и CD в Photoshop Actions

 </p>

При разработке дизайна для интернет магазина "Оскар" мгновенно родилась такая идея. А почему бы не показать продукцию в их товарном виде, то есть в таком виде, в каком привыкли видеть покупатели заходя в обычный магазин. Так как товар имеет типовую форму, а меняется лишь обложка, этот процесс обрисовки можно автоматизировать с помощью Photoshop Aсtions и мы решили попробовать.

Палитра Actions в Фотошоп была придумана для автоматизации часто повторяющихся однотипных задач. Сейчас мы рассмотрим работу этого инструмента.

Для начала я нарисовал коробку для дисков, но на этом остановился и решил усложнить задачу, нарисовав еще и диск. Оставим места с прозрачностью для подкладывания обложек под основу и нарисуем по верх блики, которые украшают товар.



Хорошо, коробка готова но впереди самое сложное. Я долго настраивался :)

Открываем нашу картинку обложки. Кстати забыл предупредить что размер изначальной картинки должен быть одинаковым у всей серии, иначе наш экшен будет бесполезен. В нашем случае это существующая база картинок сайта, которую нам и нужно было перелопатить.

Переходим к палитре Actions. В основном тебе понадобится две кнопки: запись последовательности действий (кружок), и остановить запись (квадратик).

Прежде чем сразу заняться записью ваших действий, потренируйтесь с этой обложкой. Вам придется трансформировать, перемещать, изменять наклон, вращать, изгибать, создавать новые слои и даже делать цветовую корректировку и усиливать резкость. Цель — поместить нашу обложку в коробку и разместить на диске.

И так начнем.

Нажимаем в палитре Actoins кнопку записи экшена, запись пошла. Хочу тебя успокоить, не нужно переживать о том, что неправильное движение или действие запишется и придется начинать все заново. Если что-то сделал не так, жми стоп, возвращайся на шаг назад и удаляй не верное действие нажав на ведерко в нижней-правой части палитры Actoins.

Нам нужно изменить размер обложки в соответствии с размером файла где находится коробка. Нажимаем Ctrl+Alt+I и ставим ширину (width) как на файле с обложкой. Далее жмем Ctrl+Alt+C и ставим высоту (height) как у файла с обложкой. Жмем стоп экшена.

Теперь переносим слой с коробкой в наш файл. Эти действия Actoins не записывает так как думает, что ничего не произошло и нового слоя не увидит. А этот слой с коробкой будет служить контейнером куда нам и нужно вписать обложку.

Переходим на слой с обложкой и жмем запись эшена. Для начала скопируем обложку для натягивания на болванку нажав ctrl+J. Далее нажимаем ctrl+t и трансформируем его под форму коробки. Жмем стоп Actoins.

Думаю вы поняли принцип действия и дальше я опишу только вкратце.
Скрыл слой с обложкой коробки, чтобы не мешала редактировать картинку для диска. После изменения размеров и положения картинки для диска я выделил его окружностью инвертировал выделение и вырезал не нужные области, которые выступали за карая диска. Применил картинкам корректировку цвета кривыми и добавил немного шарпа.

Actoins обложки готов, но как же коробка? Как автоматизировать открытие файла с коробкой и перенос нужного слоя с помощью Actoins? Этого мы добиться так и не смогли и видимо такое сделать невозможно. Но придумали как поступить.



Мы используем картинку с коробкой как трафарет на сайте, сохранив ее в формате png24 с прозрачностью. Таким образом картинка с коробкой одна, а под нее будут подкладываться разные картинки обложек. Так же тут появляется свобода творчества, ведь на коробке можно нарисовать наклейку Top, Hit, распродажа, в подарок, акция поместив эти картинки в специальный раздел.

Дерзайте.



Плишкин Дмитрий © asten.ru

Фотограф из меня некудышный, но в сочетании с PhotoShop могут получиться интересные вещи.



( Полная версия )

Площадь Cвободы, Казань

Однажды, на дружеской встрече с компанией дизайнеров, один из них привел очень замечательную аллегорию про магазин. О том, что покупатель, приходя туда за хлебом, хочет именно хлеб и ни за что не приобретет сладкую булочку с изюмом, даже если продавец будет настаивать, говоря, что к его классическому пиджаку обычный хлеб ну никак не подходит. Ситуация-то выходит глупой, не так ли? Точно так же и в разработке дизайна. Я не говорю сейчас о мегакорпорациях и западных компаниях, там все иначе. Но в средней категории, пока дизайн принимает непосредственно руководитель, а не специально нанятый в штат профессиональный сотрудник, все именно так.

Дизайнеру очень сложно не поддаться сделать не так, как хочет того заказчик, а «лучше». Необходимо выдерживать некий баланс между, хоть зачастую и бредовыми, идеями заказчика и желанием внести изюминку в дизайн. Я с удовольствием отмечаю, что нашей Студии это удается очень хорошо.

Все мы ежедневно видим лица людей, их строение, цвет кожи, фигуру и т.д.
Если с отражением на хроме или стекле можно придумать и сделать похожим на правду, то с людьми ничего не выходит. Малейшее изменение в пропорциях или лице и человек становится уродом :)

Термин «технический дизайн» или «тех-дизайн» появился около двух лет назад в студии Артемия Лебедева. Это там впервые начали «вылизывать» иллюстрации для размещения на сайтах.
Через некоторое время хлынула вторая волна тех-дизайна, благодаря человеку по имени Степан Бурлаков (Freeger). Его иллюстрации обладали нереальным объемом с глубокими тенями и четкими бликами, изобилием интересных и невиданых цветовых переходов.

Это так понравилось фриланс дизайнерам, что тех-дизайн превратился в новый вид искусства благодаря которому современные сайты преобразились. Однако последователи Степана слишком увлеклись изучением его работ и перестали выдумывать свои приемы, более того стали применять их не по назначению. Сайты превратились в выпендреж между дизайнерами, где каждый хотел сделать больше красивых и бессмысленных рисунков.
В этом деле главное вернуться на Землю и понять, что сайт придуман ради информации. Прежде чем начинать оформлять сайт, поставьте себя на место заказчика и задумайтесь, какой должен быть дизайн чтобы получить прибыль от этого сайта. К примеру, какое чувство у вас возникает при просмотре этого сайта?

Автор: Дмитрий Плишкин

Или бред иллюстратора


Автор: Дмитрий Плишкин