21:48 Как нарисовать макет сайта в Photoshop - секреты профессионалов | |
Как нарисовать макет сайта в Photoshop — секреты профессионаловФевраль 13, 2016 Категория: Веб-дизайн Одним из самых сложных процессов для веб дизайнера является разработка дизайна для сайта. Предлагаю вместе проследить сам процесс создания дизайна в Adobe Photoshop на примере моей последней работы внешнего вида автомобильного портала марки Mazda. В первую очередь даже на стадии разработки внешнего вида сайта, необходимо чётко знать, что именно должно находится на сайте и желательно как именно должен работать будущий сайт / шаблон или хотя бы процесс вёрстки макета (в первую очередь для того, что бы не нагородить забора, который невозможно сверстать). Немного отступая от темы: именно поэтому чаще всего от фрилансера требуется создание макета и вёрстка (в крайнем случае, понимание вёрстки).
В данном случае, наш будущий макет не создавался для определённой CMS, хотя при небольшой доработке и манипуляций можно создать отличный шаблон для Joomla, Drupal или 1С-Битрикс. В первую очередь стоит определиться с цветами будущего макета, часто эти требования уже указываются заказчиками до начала работа. В ином случае, предлагаю пойти другим путём и только после создания изображений в шапке, выбрать ключевые цвета, которые будут «основными» в изображениях. И так, набираем несколько красивых изображений автомобилей (отрисовка, то есть создание из обычной фотографии красивый блестящий автомобиль выходит за рамки данного урока, поэтому мы это опустим). Не для кого ни секрет, что подобное «заимствование» готовых изображений является несколько «нечестным», если вы не указываете автора. В нашем распоряжении появились изображения двух автомобилей, отрисованых в одном стиле, а так же несколько фигурок людей, из которых мы и планируем «лепить» нашу шапку для сайта. В создании подобного коллажа в Photoshop нет ничего сложного: выравниваем размеры так, что бы они выглядели как можно реалистичнее (мужчина выше автомобиля, девушки чуть ниже мужчин), убираем личные границы ластиком, что бы они не выдавали разные источники изображений и создаём тени для каждого из элементов коллажа. Стоит отметить, что в данном случае стоит обратить внимание на источник света — он находится с одной стороны и соответственно тень должна падать в другую.
Подобная картинка станет основой для создания «шапки» на нашем сайте, отображая, кстати, сам стиль автомобильной марки Mazda — удобство, красота для молодых стильных людей, что, кстати, немаловажно для дизайна — отображение концепции самого проекта в графике. Логотип для подобного сайта напрашивался сам — логотип компании Mazda, здесь не стоит придумывать ничего больше — понятный, узнаваемый, стильный и красивый лого, не требующий больше никакого «внимания» со стороны дизайнера, кроме как правильного расположения на странице. Как ни странно, что в данном случае опять не стоит «изобретать велосипед» — до нас его уже изобрели и неоднократно прокатились: логотип необходимо размещать в левом верхнем углу, как показывает статистика, именно туда в первую очередь «смотрит» глаз при загрузке странице, что позволит сразу же узнать тематику нашего сайта. В дополнение к логотипу будет идти красивый лозунг, позволяющий сразу же «поверить» в качество автомобилей «Mazda. Удовольствие без остановки». Лично мне уже хочется купить такой автомобиль, а вам? Далеко отходить не станем и тут же разместим ссылку на каталог самих автомобилей (большинству посетителей не интересно читать НОВОСТИ или СТАТЬИ, тратить время на освоение навигации на сайте и его структуру, а время что называется «поджимает»). Теперь начинается самое интересное и ответственное — расположить необходимые нам элементы так, что бы это было по-настоящему удобно и, конечно же, красиво. Мы создаём крупный информационный автомобильный портал, поэтому в макете будет много различных элементов: раздел новостей, статей, тест — драйвы, история марки автомобиля, мультимедийный каталог марок, описание фирмы и немного места для размещения рекламы. В первую очередь пользователю предлагаем само меню, которое находится в центре дизайна, описание компании и новости, блок с которыми находится слева. Кстати, если его заменить на блок контекстной рекламы, например AdSense или РСЯ, то можно получить неплохой процент кликов, соответственно и доход.
Пользователь, которые прокрутил ещё ниже, уже заинтересован в нашем сайте, а значит, ему можно предложить что-то более конкретное — конечно же, каталог автомобилей и описание отдельной модели с ссылками на «Подробнее» или же страницу «Заказать». В данном случае, мы показываем одну из самых популярных моделей из нашей коллекции. Для пользовательского «интереса» добавляем несколько простых элементов в дизайн, которые будут реализованы верстальщиком на JavaScript: смена цвета блоков с серого на красный при наведении мыши, выделение активной строки в списке технических характеристик, а так же смена модели без перезагрузки страницы, реализованной на Ajax, при выборе из списка справа. Как видите, в данном случае, уже на стадии разработки дизайна необходимы хотя бы теоретические знания html и css вёрстки.
В лучшем случае, если в «паре» с вами работает специалист в области программирования, а это знания языка написания сценариев на стороне клиента и реализации сценариев с участием технологии Ajax, а значит: знание объектной модели страницы DOM, понимание алгоритма обращения и работы протоколов, образующихся к серверу и, конечно же, написание скриптов на каком-нибудь серверном языке программирования: PHP, Perl, ASP. Мы же разбираем только создание внешнего вида сайта, а значит, двигаемся «дальше» по странице — как дополнение к главной странице и «выделения» главного элемента (каталога автомобилей) в центр, предлагаем для пользователя СТАТЬИ. данные блоки служат как ни странно больше техническую функцию: более быстрое индексирование новых статей поисковыми системами.
Как известно, чаще всего поисковые роботы обращаются, а значит и «съедают» главную страницу сайта, поэтому ссылки на новые статьи будут им довольно интересны, что в дальнейшем послужит отличной базой для привлечения новых посетителей на сайт, а значит и потенциальных клиентов фирмы. Как ни странно, но даже понимание казалось бы «чужой» науки как SEO — поисковая оптимизация соседствует с разработкой дизайна для сайтов. В свободное место, которое больше «не требуется» для нашего бизнеса, можно расположить баннер (информационный сайт сможет окупаться, бизнес-сайт сможет информировать пользователей о новинках или акциях). Как контраст к основной загруженной части сайта создаём «подвал» страницы: размещение счётчиков, информации о разработчике и небольшой клипарт — изображение автомобильного диска. Глаз сразу определяет, что «страница закончилась».
Как видите, весь макет от «А» до «Я» выдержан в одной цветовой гамме: белый, серый #cccccc, матовый чёрный #333333, красный #c02629 для заголовков. После того, как мы разместили все элементы на странице, необходимо как можно тщательнее всё «доработать»: выровнять блоки с помощью линеек (в меню Photoshop CS2 это «Просмотр — Линейки»), оценить общий вид и так далее.
На этом можно сказать, что процесс разработки самого макета закончен, но, как это часто бывает, начинается самое сложное — обсуждение получившегося макета с заказчиком, правка в соответствии с требованиями или смена блоков из-за особенности CMS. Всё это так же имеет довольно важное значение, ведь подобные изменения могут просто-напросто испортить внешний вид сайта, поэтому стоит опять же дорабатывать с «оглядкой» на все вышеперечисленные пункты в создании готового макета для сайта в Adobe Photoshop. Профессиональный подходС этой статьи хотелось бы начать новую серию уроков по веб дизайну, которые помогут новичкам понять азы современного дизайна сайтов, а уже опытным мастерам, которые практикуют и возможно даже зарабатывают на этом, заполнить проблемы в теории и возможно даже, найти что-то для себя новое и актуальное. В этот раз хотелось бы поговорить с вами о самом процессе начала работы над макетом сайта, проще говоря, на самой идее нового дизайна. Как это часто бывает, новички начинают работу над сайтом с какого-нибудь отдельного элемента, например, с клипарта, шапки сайта, отдельной кнопки или иконки. Иногда это даже приводит к красивому и аккуратному ресурсу, но чаще всего подобное начало — это путь к анархии и беспорядку в веб дизайне будущее сайта. Не хотелось бы, что бы будущий, возможно даже, успешный проект испортился на стадии идеи. НаброскиВсегда помните, что сперва придумываем идею для будущего макета и только потом переходим к конкретным деталям, постепенно занимаясь каждым отдельным клипартом, уголком и кнопкой. Только так можно контролировать весь процесс работы и оценивать что именно получается и что можно ожидать. Это очень простое и часто нарушаемое правило. Особенно молодыми дизайнерами. Опытные дизайнеры постоянно твердят, что стоит сперва начертить будущий макет сайта на бумаге обычным карандашом или на крайний случай в Photoshop, если для вас это ближе. Сделайте быстрые черновые эскизы будущего проекта, найдите композицию, постройте приблизительную сетку страницы (отступы, основные блоки, расположение элементов), а так же какие-то наброски будущих иллюстраций. Не стоит бояться, что таким образом, кому-то может не понравиться ваша идея, если какие-то элементы будут не доделаны и смотреться сыро; веб дизайн — это не дело пяти минут и в большей степени ни одного вечера. И только после этого садитесь за компьютер, открывайте Adobe Photoshop или тот редактор, к которому вы больше всего привыкли начните творить…
Очень часто на данном этапе может получаться не очень красиво или даже ужасно, но постепенно страница начнёт приобретать нужные черты и превращаться из гадкого утёнка в прекрасного лебедя, то есть Настоящий Профессиональный Веб Дизайн Сайта.
Модульная сеткаМодульная сетка — этин из самых важных приёмов для создания успешного макета для сайта и, кроме того, отсутвие или неправильное использования которой является одной из самых распространённых ошибок у молодых и неопытных дизайнеров. Единый каркас, схема, проходящая через все страницы сайта так, что бы наметить расположение всех элементов, которые так или иначе присутсвуют на странице.
Сетки бывают простые и сложные, гибкие в использовании и не очень. Это не столь важно. Важно то, что если вы при проектировании дизайна задали определенную сетку модулей — будьте добры ей следовать. От первой до последней страницы своего проекта. А если в процессе прорисовки внутренних страниц у вас появились элементы, не ложащиеся в принятую сетку — значит вы недостаточно времени уделили её проектированию. Кстати, для тех, кто не знает, подобные линейки можно включить в AdobePhotoshop Просмотр / Линейки или CTR + R.
Подготовка макета для начала работыКак только мы поняли, что будущий дизайн может быть удачным, можно приступать к дальнейшим этапам: выбор цветов для фона сайта, для каких-то отдельных его частей (шапка, сайдбар, если это блог, основной текст, какое-то меню и так далее…). Случается, что модульная сетка нарушается, то есть какой-то конкретный элемент на странице не совсем следует всем этим границам, которые мы для него задумали. В таком случае, мы допустили одну из нескольких распространённых ошибок: либо с самого начала неправильно разработали сетку, либо наш элемент стоит «выбросить» или переработать заново. Такой простой ход в разы продуктивнее, экономит кучу времени и помогает находить более интересные решения.
Как нарисовать макет сайта в Photoshop — секреты профессионаловФевраль 13, 2016 Категория: Веб-дизайн Одним из самых сложных процессов для веб дизайнера является разработка дизайна для сайта. Предлагаю вместе проследить сам процесс создания дизайна в Adobe Photoshop на примере моей последней работы внешнего вида автомобильного портала марки Mazda. В первую очередь даже на стадии разработки внешнего вида сайта, необходимо чётко знать, что именно должно находится на сайте и желательно как именно должен работать будущий сайт / шаблон или хотя бы процесс вёрстки макета (в первую очередь для того, что бы не нагородить забора, который невозможно сверстать). Немного отступая от темы: именно поэтому чаще всего от фрилансера требуется создание макета и вёрстка (в крайнем случае, понимание вёрстки).
В данном случае, наш будущий макет не создавался для определённой CMS, хотя при небольшой доработке и манипуляций можно создать отличный шаблон для Joomla, Drupal или 1С-Битрикс. В первую очередь стоит определиться с цветами будущего макета, часто эти требования уже указываются заказчиками до начала работа. В ином случае, предлагаю пойти другим путём и только после создания изображений в шапке, выбрать ключевые цвета, которые будут «основными» в изображениях. И так, набираем несколько красивых изображений автомобилей (отрисовка, то есть создание из обычной фотографии красивый блестящий автомобиль выходит за рамки данного урока, поэтому мы это опустим). Не для кого ни секрет, что подобное «заимствование» готовых изображений является несколько «нечестным», если вы не указываете автора. В нашем распоряжении появились изображения двух автомобилей, отрисованых в одном стиле, а так же несколько фигурок людей, из которых мы и планируем «лепить» нашу шапку для сайта. В создании подобного коллажа в Photoshop нет ничего сложного: выравниваем размеры так, что бы они выглядели как можно реалистичнее (мужчина выше автомобиля, девушки чуть ниже мужчин), убираем личные границы ластиком, что бы они не выдавали разные источники изображений и создаём тени для каждого из элементов коллажа. Стоит отметить, что в данном случае стоит обратить внимание на источник света — он находится с одной стороны и соответственно тень должна падать в другую.
Подобная картинка станет основой для создания «шапки» на нашем сайте, отображая, кстати, сам стиль автомобильной марки Mazda — удобство, красота для молодых стильных людей, что, кстати, немаловажно для дизайна — отображение концепции самого проекта в графике. Логотип для подобного сайта напрашивался сам — логотип компании Mazda, здесь не стоит придумывать ничего больше — понятный, узнаваемый, стильный и красивый лого, не требующий больше никакого «внимания» со стороны дизайнера, кроме как правильного расположения на странице. Как ни странно, что в данном случае опять не стоит «изобретать велосипед» — до нас его уже изобрели и неоднократно прокатились: логотип необходимо размещать в левом верхнем углу, как показывает статистика, именно туда в первую очередь «смотрит» глаз при загрузке странице, что позволит сразу же узнать тематику нашего сайта. В дополнение к логотипу будет идти красивый лозунг, позволяющий сразу же «поверить» в качество автомобилей «Mazda. Удовольствие без остановки». Лично мне уже хочется купить такой автомобиль, а вам? Далеко отходить не станем и тут же разместим ссылку на каталог самих автомобилей (большинству посетителей не интересно читать НОВОСТИ или СТАТЬИ, тратить время на освоение навигации на сайте и его структуру, а время что называется «поджимает»). Теперь начинается самое интересное и ответственное — расположить необходимые нам элементы так, что бы это было по-настоящему удобно и, конечно же, красиво. Мы создаём крупный информационный автомобильный портал, поэтому в макете будет много различных элементов: раздел новостей, статей, тест — драйвы, история марки автомобиля, мультимедийный каталог марок, описание фирмы и немного места для размещения рекламы. В первую очередь пользователю предлагаем само меню, которое находится в центре дизайна, описание компании и новости, блок с которыми находится слева. Кстати, если его заменить на блок контекстной рекламы, например AdSense или РСЯ, то можно получить неплохой процент кликов, соответственно и доход.
Пользователь, которые прокрутил ещё ниже, уже заинтересован в нашем сайте, а значит, ему можно предложить что-то более конкретное — конечно же, каталог автомобилей и описание отдельной модели с ссылками на «Подробнее» или же страницу «Заказать». В данном случае, мы показываем одну из самых популярных моделей из нашей коллекции. Для пользовательского «интереса» добавляем несколько простых элементов в дизайн, которые будут реализованы верстальщиком на JavaScript: смена цвета блоков с серого на красный при наведении мыши, выделение активной строки в списке технических характеристик, а так же смена модели без перезагрузки страницы, реализованной на Ajax, при выборе из списка справа. Как видите, в данном случае, уже на стадии разработки дизайна необходимы хотя бы теоретические знания html и css вёрстки.
В лучшем случае, если в «паре» с вами работает специалист в области программирования, а это знания языка написания сценариев на стороне клиента и реализации сценариев с участием технологии Ajax, а значит: знание объектной модели страницы DOM, понимание алгоритма обращения и работы протоколов, образующихся к серверу и, конечно же, написание скриптов на каком-нибудь серверном языке программирования: PHP, Perl, ASP. Мы же разбираем только создание внешнего вида сайта, а значит, двигаемся «дальше» по странице — как дополнение к главной странице и «выделения» главного элемента (каталога автомобилей) в центр, предлагаем для пользователя СТАТЬИ. данные блоки служат как ни странно больше техническую функцию: более быстрое индексирование новых статей поисковыми системами.
Как известно, чаще всего поисковые роботы обращаются, а значит и «съедают» главную страницу сайта, поэтому ссылки на новые статьи будут им довольно интересны, что в дальнейшем послужит отличной базой для привлечения новых посетителей на сайт, а значит и потенциальных клиентов фирмы. Как ни странно, но даже понимание казалось бы «чужой» науки как SEO — поисковая оптимизация соседствует с разработкой дизайна для сайтов. В свободное место, которое больше «не требуется» для нашего бизнеса, можно расположить баннер (информационный сайт сможет окупаться, бизнес-сайт сможет информировать пользователей о новинках или акциях). Как контраст к основной загруженной части сайта создаём «подвал» страницы: размещение счётчиков, информации о разработчике и небольшой клипарт — изображение автомобильного диска. Глаз сразу определяет, что «страница закончилась».
Как видите, весь макет от «А» до «Я» выдержан в одной цветовой гамме: белый, серый #cccccc, матовый чёрный #333333, красный #c02629 для заголовков. После того, как мы разместили все элементы на странице, необходимо как можно тщательнее всё «доработать»: выровнять блоки с помощью линеек (в меню Photoshop CS2 это «Просмотр — Линейки»), оценить общий вид и так далее.
На этом можно сказать, что процесс разработки самого макета закончен, но, как это часто бывает, начинается самое сложное — обсуждение получившегося макета с заказчиком, правка в соответствии с требованиями или смена блоков из-за особенности CMS. Всё это так же имеет довольно важное значение, ведь подобные изменения могут просто-напросто испортить внешний вид сайта, поэтому стоит опять же дорабатывать с «оглядкой» на все вышеперечисленные пункты в создании готового макета для сайта в Adobe Photoshop. Профессиональный подходС этой статьи хотелось бы начать новую серию уроков по веб дизайну, которые помогут новичкам понять азы современного дизайна сайтов, а уже опытным мастерам, которые практикуют и возможно даже зарабатывают на этом, заполнить проблемы в теории и возможно даже, найти что-то для себя новое и актуальное. В этот раз хотелось бы поговорить с вами о самом процессе начала работы над макетом сайта, проще говоря, на самой идее нового дизайна. Как это часто бывает, новички начинают работу над сайтом с какого-нибудь отдельного элемента, например, с клипарта, шапки сайта, отдельной кнопки или иконки. Иногда это даже приводит к красивому и аккуратному ресурсу, но чаще всего подобное начало — это путь к анархии и беспорядку в веб дизайне будущее сайта. Не хотелось бы, что бы будущий, возможно даже, успешный проект испортился на стадии идеи. НаброскиВсегда помните, что сперва придумываем идею для будущего макета и только потом переходим к конкретным деталям, постепенно занимаясь каждым отдельным клипартом, уголком и кнопкой. Только так можно контролировать весь процесс работы и оценивать что именно получается и что можно ожидать. Это очень простое и часто нарушаемое правило. Особенно молодыми дизайнерами. Опытные дизайнеры постоянно твердят, что стоит сперва начертить будущий макет сайта на бумаге обычным карандашом или на крайний случай в Photoshop, если для вас это ближе. Сделайте быстрые черновые эскизы будущего проекта, найдите композицию, постройте приблизительную сетку страницы (отступы, основные блоки, расположение элементов), а так же какие-то наброски будущих иллюстраций. Не стоит бояться, что таким образом, кому-то может не понравиться ваша идея, если какие-то элементы будут не доделаны и смотреться сыро; веб дизайн — это не дело пяти минут и в большей степени ни одного вечера. И только после этого садитесь за компьютер, открывайте Adobe Photoshop или тот редактор, к которому вы больше всего привыкли начните творить…
Очень часто на данном этапе может получаться не очень красиво или даже ужасно, но постепенно страница начнёт приобретать нужные черты и превращаться из гадкого утёнка в прекрасного лебедя, то есть Настоящий Профессиональный Веб Дизайн Сайта.
Модульная сеткаМодульная сетка — этин из самых важных приёмов для создания успешного макета для сайта и, кроме того, отсутвие или неправильное использования которой является одной из самых распространённых ошибок у молодых и неопытных дизайнеров. Единый каркас, схема, проходящая через все страницы сайта так, что бы наметить расположение всех элементов, которые так или иначе присутсвуют на странице.
Сетки бывают простые и сложные, гибкие в использовании и не очень. Это не столь важно. Важно то, что если вы при проектировании дизайна задали определенную сетку модулей — будьте добры ей следовать. От первой до последней страницы своего проекта. А если в процессе прорисовки внутренних страниц у вас появились элементы, не ложащиеся в принятую сетку — значит вы недостаточно времени уделили её проектированию. Кстати, для тех, кто не знает, подобные линейки можно включить в AdobePhotoshop Просмотр / Линейки или CTR + R.
Подготовка макета для начала работыКак только мы поняли, что будущий дизайн может быть удачным, можно приступать к дальнейшим этапам: выбор цветов для фона сайта, для каких-то отдельных его частей (шапка, сайдбар, если это блог, основной текст, какое-то меню и так далее…). Случается, что модульная сетка нарушается, то есть какой-то конкретный элемент на странице не совсем следует всем этим границам, которые мы для него задумали. В таком случае, мы допустили одну из нескольких распространённых ошибок: либо с самого начала неправильно разработали сетку, либо наш элемент стоит «выбросить» или переработать заново. Такой простой ход в разы продуктивнее, экономит кучу времени и помогает находить более интересные решения.
Как нарисовать сайт, шаблон, странницу в фотошопе от Дневники.pro урокиИнтересные записи | |
|
| |
| Всего комментариев: 0 | |