Как создать дизайн сайта

Как_создать_дизайн_сайта_kak_sozdat_design_sayta_34

 

Здесь мы не будем рассматривать вёрстку. Эта статья посвящена только визуальной части.

Создание набросков.

Если честно, то тут всё просто, поэтому выдумывать что-то сверхновое не придётся. Заказчик сам определил схематическое расположение тематических блоков. Может быть это и к лучшему. Ведь если структура простая, её не нужно портить.

Сам по себе сайт не богат функционалом, на данный момент, отсюда и не сложный дизайн. В общем смотрим сами.

Как_создать_дизайн_сайта_kak_sozdat_design_sayta_33

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

Поверьте, если можно сделать просто, то не стоит усложнять. И так приступаем ко второй части.

Создание дизайна сайта в фотошопе.

Это основной и самый сложный этап.

Запускаем фотошоп. Создаём новый документ.

Создание основы.

Размер документа я выставляю 1000 пикселей по ширине и 1500 по высоте. Пока что нам вполне хватит этих габаритов. Для основного цвета выбираем белый.

Как_создать_дизайн_сайта_kak_sozdat_design_sayta_1

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

Как_создать_дизайн_сайта_kak_sozdat_design_sayta_1_2

Теперь заходим «Изображение  >  Размер холста и увеличиваем ширину макета до 1300 пикселей. Высоту оставляем прежней. Цвет расширения холста выставляем серым. Эта опция находится в низу в окошке изменения размера холста.

Как_создать_дизайн_сайта_kak_sozdat_design_sayta_1_7

Вот что мы получаем на этом этапе.

Как_создать_дизайн_сайта_kak_sozdat_design_sayta_1_8

Если у вас что-то похожее, то вы на правильном пути.

Время заняться хэдером.

Создаём Хэдер.

На этот раз используем инструмент «Прямоугольное выделение».

Как_создать_дизайн_сайта_kak_sozdat_design_sayta_1_9

Создаём выделение как показано на рисунке и заливаем любым цветом (alt + BackSpace). Это не принципиально, потому-что изменять цвет мы будем при помощи панели эффектов и основной цвет всё равно будет перекрываться. Называем полученный слой head_1. Кликаем по нему дважды в панели слоёв справа. Появляется окошко с эффектами. Нам нужна градиентная заливка.

Интересное по теме  Инструмент форма в Corel Draw

Как_создать_дизайн_сайта_kak_sozdat_design_sayta_10

Теперь добавляем логотип в шапку. Этот логотип был разработан мною ранее и экспортирован в PNG формат. Размещаем его слева.

Как_создать_дизайн_сайта_kak_sozdat_design_sayta_14

Теперь выбираем инструмент «Текст» на панели инструментов слева. Щёлкаем на рабочей области и набираем элементы главного меню.

Как_создать_дизайн_сайта_kak_sozdat_design_sayta_17

Для текста я выбрал шрифт PT Sans размером 12 пунктов, как показано на рисунке. Размещаем текст под полоской head_1. Вот что должно получиться.

Создаём кнопки в стиле Flat.

Теперь снова набираю текст. На этот раз это телефон и текст для кнопок. Результат вы можете видеть на следующем рисунке.

Как_создать_дизайн_сайта_kak_sozdat_design_sayta_18

Для телефонов был взят тот же самый PT Sans, но с размерностью 20 пунктов, а для текстов «Рассчитать» и «Обратный звонок» 18пт.

Как мы видим, шапка вырисовывается всё яснее.

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

Иконки хоть и не оригинальные, но смотрятся вполне даже ничего. У меня на такой случай есть универсальные наборы на все случаи). Возможно кому-то они пригодятся, поэтому выкладываю файл с иконками здесь.

Добавляю плашки кнопок под текст с помощью инструмента «Полигональное выделение». Сначала я создаю выделенную область под словосочетанием «обратный звонок» и заливаю сплошным белым цветом. Назову этот слой «button_1».
Как_создать_дизайн_сайта_kak_sozdat_design_sayta_21

Теперь копируем «button_1» и перемещаем под слово «Рассчитать». Если белая плашка перекрывает текст то можно перенести её ниже (Ctrl + {) или если нужно поднять слой выше то Ctrl + }. При этом новая плашка должна быть меньше по ширине. Для этого выбираем полигональное выделение и отсекаем лишнюю часть с помощью кнопки «Delete». Вот что должно получиться.

Интересное по теме  Создаём логотип для сайта. Часть 1

Как_создать_дизайн_сайта_kak_sozdat_design_sayta_24

Теперь выделяем плашку под кнопкой «Рассчитать» на панели инструментов и жмём в верхнем меню Выделение > Модификация > Сжать. Ставим  1 пиксель. Жмём ОК, а затем Delete.

Как_создать_дизайн_сайта_kak_sozdat_design_sayta_26

Вот что получаем.

Как_создать_дизайн_сайта_kak_sozdat_design_sayta_28

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

Теперь пришло время разбавить хэдер небольшой иллюстрацией.

Ставим картинку в Хэдер.  

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

Но я загугливаю картинки, а затем выбрав и обрезав как нужно вставляю в макет.

Как_создать_дизайн_сайта_kak_sozdat_design_sayta_30

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

Дорабатываем главное меню.

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

Как_создать_дизайн_сайта_kak_sozdat_design_sayta_31

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

Больше деталей и оставшийся дизайн во второй части статьи «Как сделать дизайн сайта». Можете писать ваши вопросы в комментариях ниже. Конечный макет будет выглядеть так.

Как_создать_дизайн_сайта_kak_sozdat_design_sayta_35

 

 

 

– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

(Visited 1 times, 1 visits today)

Интересное по теме  Выборочная коррекция цвета в Photoshop

Комментарии:

Добавить комментарий