Уроки Веб и приложения Руслан Гильзидинов 24 июня 2014

Создаем красивый дизайн шаблона сайта в Фотошоп

Сложность урока: Средний

На вас когда-либо нападало желание нарисовать свой красивый макет, но вы не знали как? Если честно, несколько лет назад у меня была та же проблема. Я серфил по интернету, натыкался на красивые макеты и надеялся, что когда-нибудь я «дорасту» до них. Сегодня я могу заявить, что «дорос», и я научу этому вас! Откройте программу и давайте приступим!

Материалы для урока:

Архив

Шаг 1

Все макеты, над которыми я работал, основаны на разметке 960 Grid System. Так что, прежде всего мы скачаем исходник разметки с официального сайта 960.gs. Вы найдете в архиве два вида исходников  - 12_col и 16_col. Как вы догадались, мозговитые вы мои, речь идет о столбцах. Если в вашем макете будет 3 колонки, выбирайте 12_col, ибо 12 делится на 3. Если 4 колонки, вы можете выбрать и 12_col и 16_col. Далее вы увидите все сами.

Шаг 2

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

Шаг 3

Теперь мы готовы начать. Открываем 16_col.psd, жмем Image > Canvas size (Изображение – Размер холста) и меняем размер на 1200х1700. Заливаем белым.

Шаг 4

Теперь создаем прямоугольник в самом верху макета, как показано на картинке. Высота – 80 пикселей. Заливаем цветом #dddddd.

Шаг 5

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

Шаг 6

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

Шаг 7

Рисуем большой прямоугольник на 500 пикселей ниже верхнего высотой в 575 пикселей, как показано выше. Заливаем его градиентом через стили слоя (настройки показаны ниже) от #d2d2d0 до #ffffff.

Шаг 8

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

Шаг 9

На новом слое создадим еще один прямоугольник и через стили слоя зальем его градиентом от #2787b7 до #258fcd. Настройки показаны ниже.

Шаг 10

Добавим темно-синюю линию, используя Drop Shadow (Тень) с режимом наложения Multiply (Затемнение). Opacity (Непрозрачность) – 65, Angle (Угол) – -90, Distance (Расстояние) – 1 px, Size (Размер) – 6 px. После этого на новом слою создадим однопиксельную белую горизонтальную линию прямо под темно-синей. Вы можете использовать эту технику в ваших будущих работах.

Шаг 11

На новом слое создаем прямоугольник высотой 50 пикселей, как показано на рисунке. Это будет блок навигации. Добавляем тень через стили:

Шаг 12

Время поработать над навигацией. С помощью инструмента Rounded Rectangle (Прямоугольник со скругленными углами) радиусом 5 пикселей рисуем прямоугольник, как показано выше, заливаем его цветом #f6a836 и применяем к нему следующие стили:

Inner Shadow (Внутренняя тень). Color (Цвет): #ffffff. Blend mode (Режим наложения): Overlay (Перекрытие). Opacity (Непрозрачность): 60%. Angle (Угол): 120. Distance (Расстояние): 7px. Size (Размер): 6px.

Inner Glow (Внутреннее свечение). Blend mode (Режим наложения): Normal (Нормальный). Color (Цвет): #ffffff. Size (Размер): 4px. Остальное – по умолчанию.
Stroke (Обводка). Size (Размер): 1px. Position (Положение): Inside (Внутри). Color (Цвет): #ce7e01.

Выделяем слой, кликнув по нему с зажатым Ctrl. Жмем SelectModifyContract (Выделение – Модификация - Сжать) и вводим значение 1 пиксель.

На новом слое с режимом Overlay (Перекрытие) рисуем блик, как в пятом шаге, только выбираем кисть поменьше. Добавляем текст. Я использовал Arial.

Шаг 13

Перейдем к блоку поиска. С помощью инструмента Rounded Rectangle (Прямоугольник со скругленными углами) радиусом 5 пикселей рисуем прямоугольник в правой части макета, как показано выше, заливаем его цветом #dddddd и применяем к нему следующие стили:

Inner Shadow (Внутренняя тень). Color (Цвет): #000000. Blend mode (Режим наложения): Multiply (Затемнение). Opacity (Непрозрачность): 9%. Angle (Угол): 90. Distance (Расстояние): 0px. Size (Размер): 6px.

Stroke (Обводка). Size (Размер): 1px. Position (Положение): Inside (Внутри). Color (Цвет): #dfdfdf.

Я добавил текст, вот как в итоге все должно выглядеть.

У нас стало уже достаточно много слоев, пора организовать это дело. Создаем группу “search” и скидываем туда соответствующие слои. Позже мы будем заниматься организацией всего остального.

Шаг 14

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

Добавим блик, как в пятом шаге.

Размер кисти должен быть много меньше. 45 пикселей хватит.

Шаг 15

Лого и слоган вы добавите самостоятельно. Должно получиться примерно так.

Шаг 16

Вернемся к организации слоев. Создадим группу “top_bar” и скидаем в неё все, что относится к навигации, лого, слогану, поиску и т.д.

Создадим еще одну группу – “header”. Туда мы будем складывать все, что относится к шапке.

Шаг 17

На данный момент наша шапка выглядит слишком обыкновенной, так что мы добавим некоторых эффектов освещения, как мы это делали в пятом шаге. Создадим новый слой, поменяем режим наложения на Overlay (Перекрытие).

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

Шаг 18

В этом шаге я объясню, как создать эффект отражения. Для начала возьмите два изображения (я использовал скриншоты из Safari двух моих других макетов из портфолио), уменьшите одно и поместите его за другое. Продублируйте оба слоя и с помощью Free Transform (Свободная Трансформация) отразите по вертикали сначала один, а потом другой дубликат. Теперь немного подвиньте дубликаты ниже. Далее создаем квадратное выделение от низа до середины первого отраженного дубликата и применяем SelectModifyFeather (Выделение – Модификация – Растушевка) с параметром 30 пикселей или немного больше.  Выше вы видите то, что примерно должно получиться. Несколько раз жмем клавишу Delete и получаем красивое отражение. Повторяем последние действия со вторым дубликатом

Создаем новый слой с режимом наложения Overlay (Перекрытие) и применяем технику, описанную в пятом шаге.

Вот так должна выглядеть шапка после добавления текста и кнопок. С этим, я думаю, вы справитесь сами. Не забудьте все новые слои помещать в папку “header”.

Шаг 19

Если вы уже смотрели превью того, что у нас получится, вы уже видели симпатичные вкладки. Я остановлюсь на этом подробнее, и оно того стоит. Создаем форму прямоугольника со скругленными углами высотой 70 и радиусом 10 пикселей. Теперь мы должны «выпрямить» нижние углы и сделать их прямыми. Выбираем инструмент Direct Selection (Выделение Узла) и кликаем по нашей форме. Кликаем по вертикальной точке и перетаскиваем вниз, удерживая Shift. Пока все хорошо, но пока форма все равно деформирована. Видите маленькую ручку? Кликаем по ней и тащим вверх.

Готово. Неплохо, да? Повторяем шаг с правым нижним углом.

Шаг 20

Выбираем инструмент Line (Линия) шириной 1 пиксель.

Шаг 21

Рисуем серые разделители, удерживая Shift, чтобы линии получились идеально вертикальными.

Шаг 22

Добавим иконки и текст для вкладок. Я использовал иконки Рэя Ченга с сайта WebAppers.com. Когда одна вкладка активна, другие должны быть неактивны. Нужно что-то придумать. Я обесцветил все неактивные иконки и сделал их немного прозрачными.

Шаг 23

Чтобы более выделить активную вкладку, мы сделаем позади неё белый фон. Для начала выделяем нужную вкладку.

Должно получиться так.

Маленькой мягкой кистью рисуем белый фон (полностью закрашивать белым не нужно).

Шаг 24

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

Добавим векторную маску к слою, кликнув по соответствующей иконке.

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

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

Вот как все это дело должно выглядеть в итоге.

Шаг 25

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

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

Помещаем изображение сверху. Не беспокойтесь, если оно будет торчать за рамки – мы поправим это. Выделяем верхний прямоугольник и применяем SelectModifyContrast (Выделение – Модификация – Сжать) с параметром 5 пикселей. Выделив слой с изображением, жмем по иконке Quick Mask (Быстрая Маска) внизу окна со списком слоев.

Вот так должны выглядеть слои.

Шаг 26

Не забывайте об организации слоев. Вот как это делаю я.

Поработав с текстами и заголовки, получаем что-то такое. Двигаемся далее.

И еще немного об организации.

Шаг 27

Блок с отзывами. Я подумал, что он должен быть большим, поэтому я сделал его на всю длину основного блока. Рисуем прямоугольник высотой 220 пикселей с однопиксельной серой рамочкой.

Рисуем еще один прямоугольник светлее, отступив от каждой стороны по 10 пикселей. Не забываем про рамку.

Осталось добавить текст.

Шаг 28

Время поработать над футером. Рисуем темно-серый прямоугольник высотой в 400 пикселей в самом низу макета.

Шаг 29

И снова эффект из пятого шага.

Шаг 30

Добавляем еще один прямоугольник высотой 10 пикселей над футером и добавляем две линии вверху и внизу этого прямоугольника.

Шаг 31

В самом низу оставим место для еще одной навигации. Дублируем блок навигации сверху и уменьшаем его высоту до 40 пикселей. Помещаем дубликат блока в самый низ. Если вам не хватает места в макете, жмем ImageCanvas Size (Изображение – Размер холста) и увеличиваем высоту макета.

Шаг 32

Над дубликатом навигации добавим белую линию-разделитель

Шаг 33

Добавляем контент в футер, ориентируясь по разметке.

Шаг 34

И еще раз уделите время организации слоев. Вот так у меня.

И готово!

Вот скриншоты остальных страниц:

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

Спасибо за внимание!

Автор: Marko Prljic

Источник: code.tutsplus.com

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

хотелось бросить в самом начале, много надо от себя придумывать...

Спасибо большое за урок.

"Звезда в шоке", а "Королева в восхищении" - честно, подробно, без высокомерия перед "чайниками", для меня очень актуальный урок. Спасибо! )))

Крутой урок нереально (:

Видимо ты еще не доучился

я сделал другой сайт) занесло что то

Моя первая работа шаблона сайта)

Спасибо большое за урок.Пришлось правда попотеть :)

Спасибо за урок. Понравился.

спасибо за урок!

Спасибо за урок, очень понравилось выполнять!

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

Новые работы пользователей

По заданным фильтрам работы не найдены

Попробуйте изменить критерий поиска или сбросить фильтры


Смотреть все работы

Предыдущая Следующая
Добавлена {{work.date}}
Не удалось загрузить работу. Возможно она была удалена.
GIF {{work.bite}} Мб Загрузить
Редактировать Удалить
18+
Работа имеет содержимое для 18+ лет
{{work.views}} {{work.comments}}
Жалоба

Комментарии {{work.childs.length || 0}}

Видео к работе
Популярные работы автора:
Работа получила награды:
Курсы автора:
Онлайн-курс

Жалоба

Опишите суть жалобы, при необходимости добавьте ссылки на скриншоты

Спасибо! Ваше обращение ушло на рассмотрение.

Название работы

Описание работы (необязательно)

Комментарий

Ваша миниатюра:

Название:
{{name}}
Описание:

Исходник:

{{source.name}} {{source.name}}

Тэги:
#{{tag.label}}

Есть ли у вас исходник к работе?

Исходник — это файл из исходных изображений, которые использовались для создания вашей работы. Исходник позовляет лучше понять вашу работу. Он не обязателен, но работы с исходниками получают больше лайков и имеют право на участие в еженедельных конкурсах.
jpg-файл, максимальный размер 1920x1080px

Пример исходника

Выберете тэги работы:

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

Не более десяти тэгов на одну работу

Комментарии к работе будут отключены, на их месте будет выведена реклама.

После добавления работы:


Запланировать публикацию

Отменить планирование
Запланировать

Используя данный сайт, вы даёте согласие на использование файлов cookie, данных об IP-адрес, помогающих нам сделать его удобнее для вас. Подробнее