Создание дизайна для сайта в Adobe Photoshop - 22 Октября 2016

Главная » » Создание дизайна для сайта в Adobe Photoshop

04:03

Создание дизайна для сайта в Adobe Photoshop

Опубликовано Sofacic в сб, 10/12/2016 - 16:58.

Одним из самых сложных процессов для веб дизайнера является разработка дизайна для сайта. Предлагаю вместе проследить сам процесс создания дизайна в Adobe Photoshop на примере моей последней работы внешнего вида автомобильного портала марки Mazda.

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

В данном случае, наш будущий макет не создавался для определённой CMS, хотя при небольшой доработке и манипуляций можно создать отличный шаблон для Joomla, Drupal или 1С-Битрикс.

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

И так, набираем несколько красивых изображений автомобилей (отрисовка, то есть создание из обычной фотографии красивый блестящий автомобиль выходит за рамки данного урок а, поэтому мы это опустим). Не для кого ни секрет, что подобное «заимствование» готовых изображений является несколько «нечестным», если вы не указываете автора.

В нашем распоряжении появились изображения двух автомобилей, отрисованых в одном стиле, а так же несколько фигурок людей, из которых мы и планируем «лепить» нашу шапку для сайта. В создании подобного коллажа в Photoshop нет ничего сложного: выравниваем размеры так, что бы они выглядели как можно реалистичнее (мужчина выше автомобиля, девушки чуть ниже мужчин), убираем личные границы ластиком, что бы они не выдавали разные источники изображений и создаём тени для каждого из элементов коллажа. Стоит отметить, что в данном случае стоит обратить внимание на источник света - он находится с одной стороны и соответственно тень должна падать в другую.

Подобная картинка станет основой для создания «шапки» на нашем сайте, отображая, кстати, сам стиль автомобильной марки Mazda dominica offshore companies - удобство, красота для молодых стильных людей, что, кстати, немаловажно для дизайна - отображение концепции самого проекта в графике.

Логотип для подобного сайта напрашивался сам - логотип компании Mazda, здесь не стоит придумывать ничего больше - понятный, узнаваемый, стильный и красивый лого, не требующий больше никакого «внимания» со стороны дизайнера, кроме как правильного расположения на странице. Как ни странно, что в данном случае опять не стоит «изобретать велосипед» - до нас его уже изобрели и неоднократно прокатились: логотип необходимо размещать в левом верхнем углу, как показывает статистика, именно туда в первую очередь «смотрит» глаз при загрузке странице, что позволит сразу же узнать тематику нашего сайта. В дополнение к логотипу будет идти красивый лозунг, позволяющий сразу же «поверить» в качество автомобилей «Mazda. Удовольствие без остановки». Лично мне уже хочется купить такой автомобиль, а вам? Далеко отходить не станем и тут же разместим ссылку на каталог самих автомобилей (большинству посетителей не интересно читать НОВОСТИ или СТАТЬИ, тратить время на освоение навигации на сайте и его структуру, а время что называется «поджимает»).

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

В первую очередь пользователю предлагаем само меню, которое находится в центре дизайна, описание компании и новости, блок с которыми находится слева. Кстати, если его заменить на блок контекстной рекламы, например AdSense или РСЯ, то можно получить неплохой процент кликов, соответственно и доход.

Пользователь, которые прокрутил ещё ниже, уже заинтересован в нашем сайте, а значит, ему можно предложить что-то более конкретное - конечно же, каталог автомобилей и описание отдельной модели с ссылками на «Подробнее» или же страницу «Заказать». В данном случае, мы показываем одну из самых популярных моделей из нашей коллекции. Для пользовательского «интереса» добавляем несколько простых элементов в дизайн, которые будут реализованы верстальщиком на JavaScript: смена цвета блоков с серого на красный при наведении мыши, выделение активной строки в списке технических характеристик, а так же смена модели без перезагрузки страницы, реализованной на Ajax, при выборе из списка справа. Как видите, в данном случае, уже на стадии разработки дизайна необходимы хотя бы теоретические знания html и css вёрстки.

В лучшем случае, если в «паре» с вами работает специалист в области программирования, а это знания языка написания сценариев на стороне клиента и реализации сценариев с участием технологии Ajax vacation in dominica. а значит: знание объектной модели страницы DOM, понимание алгоритма обращения и работы протоколов, образующихся к серверу и, конечно же, написание скриптов на каком-нибудь серверном языке программирования: PHP, Perl, ASP.

Мы же разбираем только создание внешнего вида сайта, а значит, двигаемся «дальше» по странице - как дополнение к главной странице и «выделения» главного элемента (каталога автомобилей) в центр, предлагаем для пользователя СТАТЬИ. данные блоки служат как ни странно больше техническую функцию: более быстрое индексирование новых статей поисковыми системами.

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

Как ни странно, но даже понимание казалось бы «чужой» науки как SEO - поисковая оптимизация соседствует с разработкой дизайна для сайтов. В свободное место, которое больше «не требуется» для нашего бизнеса, можно расположить баннер (информационный сайт сможет окупаться, бизнес-сайт сможет информировать пользователей о новинках или акциях).

Как контраст к основной загруженной части сайта создаём «подвал» страницы: размещение счётчиков, информации о разработчике и небольшой клипарт - изображение автомобильного диска. Глаз сразу определяет, что «страница закончилась».

Как видите, весь макет от «А» до «Я» выдержан в одной цветовой гамме: белый, серый #cccccc, матовый чёрный #333333, красный #c02629 для заголовков.

После того, как мы разместили все элементы на странице, необходимо как можно тщательнее всё «доработать»: выровнять блоки с помощью линеек (в меню Photoshop CS2 это «Просмотр - Линейки»), оценить общий вид и так далее.

На этом можно сказать, что процесс разработки самого макета закончен, но, как это часто бывает, начинается самое сложное - обсуждение получившегося макета с заказчиком, правка в соответствии с требованиями или смена блоков из-за особенности CMS. Всё это так же имеет довольно важное значение, ведь подобные изменения могут просто-напросто испортить внешний вид сайта, поэтому стоит опять же дорабатывать с «оглядкой» на все вышеперечисленные пункты в создании готового макета для сайта в Adobe Photoshop.

Поделиться с друзьями: