Web макет с гладким дизайном

В этом уроке web дизайна в Photoshop мы узнаем, как создать макет сайта с гладким дизайном в стиле минимализма. Чтобы облегчить задачу выравнивания элементов дизайна макета, мы будем использовать в качестве шаблона систему сеток 960 Grid System.

Вот как выглядит иллюстрация того, что мы будем создавать вместе. Кликните на картинку, чтобы увеличить. 

1. Мы будем использовать систему 960 Grid System (скачайте ее здесь) в качестве структурной основы нашего макета. После загрузки откройте файл 960_grid_12_col.psd, а затем скройте группу слоев с именем 12_col_grid.

 

Создание фона

2. Прежде всего, щелкните правой кнопкой мыши на фоновом слое в панели слоев и выберите Layer From Background (Из заднего плана). Это позволит разблокировать фоновый слой, чтобы он был доступным для редактирования. Я назвал фоновый слой BG (фон).

 

3. Теперь включите Gradient Tool (Градиент),(G) и установите, в качестве основного, такой # efefef цвет, а для фона такой # cacaca. Выберите на панели настроек радиальный тип градиента и создайте на холсте градиент, как на рисунке ниже. 

 

Создание области шапки

4. Установим горизонтальную направляющую на уровне 50px сверху, обозначив, таким образом, верхнюю границу области шапки макета.

5. Теперь, выбрав Horizontal Type Tool (Горизонтальный текст), (Т), добавим заголовок и слоган. Я использовал в макете следующие настройки шрифта:

" Your Name " (Ваше Название)
• Font family (Гарнитура): Nilland font (возьмите здесь dafont.com)
• Font size (Размер): 33pt
• Font weight(Начертание): Bold
• Anti-aliasing setting (Метод сглаживания): Strong (Резкое)
• Color (цвет): #525252

"some awesome slogan"(какой-нибудь потрясающий слоган)
• Font family (Гарнитура): Arial
• Font size (Размер): 14pt
• Font weight(Начертание): Regular (Четкое)
• Anti-aliasing setting (Метод сглаживания): Strong (Резкое)
• Color (цвет): #207687

6. Расположите надписи слева вверху, включив направляющие для точного размещения.

 

Создание навигации

7. Включите Horizontal Type Tool (Горизонтальный текст), (T) и напишите следующие названия элементов навигации: home (главная), about us (о нас), services (услуги), portfolio (портфолио) и contact (контакты). Параметры шрифта указаны ниже:

• Font family (Гарнитура): Arial
• Font size (Размер): 17pt
• Font weight(Начертание): Regular (Четкое)
• Anti-aliasing setting (Метод сглаживания): Strong (Резкое)
• Color (цвет): #525252
8. С помощью направляющих расположите ссылки навигации, как на рисунке ниже: 

 

Создание формы поиска

9. Теперь пришло время создать строку поиска, которая расположена справа от ссылок навигации. Возьмите Rounded Rectangle Tool (Прямоугольник со скругленными углами),(U) с радиусом закругления 5pх и нарисуйте округлую форму шириной 155px и высотой 20px справа от ссылок меню. 

10. Открыв, двойным щелчком по слою округлой формы, диалоговое окно Layer Styles (Стиль слоя), добавьте стиль Inner Shadow (Внутренняя тень). Настройки стиля спишите с рисунка ниже.

 

11. Теперь давайте добавим в строку поиска кнопку GO. Нарисуйте новый прямоугольник с закругленными углами и с теми же значениями высоты (20px) и радиуса (5px), но шириной 30px.

12. Залейте кнопку Go вертикальным линейным градиентом (Linear Gradient layer style), выбрав для него слева такой # 2fa9c1 цвет, а справа такой # 207687.

 

13. Затем напишите в строке поиска текст, типа " Search (поиск) ...", выбрав Horizontal Type Tool (Горизонтальный текст), (T) с белым цветом шрифта (#ffffff).

14. Включив Custom Shape Tool (Произвольная фигура), (U), создайте белую стрелку и расположите ее в центре кнопки. Я использовал форму с названием Arrow 2 (Стрелка 2) из стандартного набора фигур Photoshop. Ищите стрелку в раскрывающемся меню "Произвольная фигура" на панели настроек.

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

 

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

Создание разделительных линий

16. Выбрав Line Tool (Линия), (U), проведите друг над другом две линии толщиной по 1px. Цвета указаны на рисунке.

 

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

Добавление ссылок суб-навигации

17. Включите Horizontal Type Tool (Горизонтальный текст), (T) и напишите текст вашей суб-навигации с такими настройками шрифта:

• Font family (Гарнитура): Arial
• Font size (Размер): 17pt
• Font weight(Начертание): Regular (Четкое)
• Anti-aliasing setting (Метод сглаживания): Strong (Резкое)
• Color (цвет): #787878

18. Убедитесь, что разделительная линия расположена строго посредине между строками главного меню и суб-навигации. Вот как это должно выглядеть:

Создание области лучших работ

19. Начнем с подготовки подложки, где будут располагаться изображения лучших работ, для чего выберем Rounded Rectangle Tool (Прямоугольник со скругленными углами), (U) и растянем форму шириной 335px, высотой 128px и с радиусом закругления 5px.

20. Добавьте этой форме стиль Stroke (Обводка), выбрав Fill Type Gradient (градиентный тип обводки) с переходом от такого # 31aeca цвета к такому # 2b9ab2.

 

 

21. Назовите этот вновь созданный слой photo_holder (фото-место).

22. Хорошо, давайте теперь добавим изображение рекомендуемой работы, перейдя в File > Place (Файл > Поместить). В открывшемся диалоговом окне выберите нужную картинку и нажмите Place button (кнопку "поместить"). 

23. Убедитесь, что слой изображения расположен в палитре слоев выше слоя photo_holder, и если это не так, передвиньте его. Щелкните правой кнопкой мыши на слое изображения и выберите Create Clipping Mask (Создать обтравочную маску).

 

24. Выбрав Free Transform (Свободное трансформирование), (Ctrl+T), подгоните параметры картинки под размеры подложки и выровняйте всю композицию, ориентируясь на рисунок выше.

Заполняем проект контентом

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

 

Добавляем заголовок и категорию

26. Для заголовка и категории примените следующие настройки шрифта.

Заголовок (в моем случае это "Handstand!"):

• Font family (Гарнитура): Arial
• Font size (Размер): 20pt
• Font weight(Начертание): Regular (Четкое)
• Anti-aliasing setting (Метод сглаживания): Strong (Резкое)
• Color (цвет): #2197b1

Категория (в моем случае это "Photoshop design"):

• Font family (Гарнитура): Arial
• Font size (Размер): 17pt
• Font weight(Начертание): Regular (Четкое)
• Anti-aliasing setting (Метод сглаживания): Strong (Резкое)
• Color (цвет): #313131

Контент параграфа

27. Ориентируясь на рисунок ниже, добавьте свой текст параграфа.

 

28. Включите на панели инструментов Move Tool (Перемещение), (V) и выделите одновременно три текстовых слоя в панели слоев, удерживая для этого нажатой клавишу Ctrl.

29. Установите для них равные интервалы, выбрав опцию Distribute top edges (Слои > Распределить > Верхние края) на панели настроек.

 

Создаем ползунок

30. Пришло время сделать ползунок. Скопируйте обе разделительные линии, созданные для навигации, а затем, включив Free Transform (Свободное трансформирование), измените их размер. Темную линию мы сделаем чуть темнее, выбрав для нее такой # 777575 цвет.

 

31. Затем, выбрав Rectangle Tool (Прямоугольник), создайте небольшую, прямоугольную форму размером 15px 15px и добавьте ей стиль слоя Gradient Overlay (Наложение градиента).

 

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

 

Создание боксов для контента

33. Прежде всего, нам нужно установить границы. Установите горизонтальную направляющую на линию ползунка, затем через 50px добавьте снизу еще одну.

 

34. Теперь возьмите Rectangle Tool (Прямоугольник со скругленными углами), (U) и создайте фигуру шириной 260px, высотой 170px и с таким # d0d0d0 цветом. Назовите этот слой bg_1.

35. Включив Move Tool (Перемещение), (V), расположите прямоугольник точно, как на рисунке ниже. 

 

36. Выбрав слой bg_1, нажмите кнопку Add layer mask (Добавить слой-маску) в нижней части панели слоев, или перейдите в Слои > Слой-маска > Показать все.

37. Возьмите инструмент Gradient Tool (G), выберите линейный тип с переходом от черного к белому и проводите линии сверху вниз до тех пор, пока результат не удовлетворит вас.

 

38. Теперь давайте создадим тень. Скопируйте слой bg_1, назовите копию shadow (тень) и поместите ее под слоем bg_1. Затем примените стиль слой Color Overlay (Наложение цвета) с темно-серым цветом (# 3e3e3e).

39. Выделив слой с тенью, перейдите в Filter > Blur > Gaussian Blur (Фильтр > Размытие > Размытие по Гауссу) и установите радиус 5.0px.

 

40. Выбрав Gradient Tool (Градиент), (G), поработайте с layer mask (маской слоя), пока не добьетесь результата, похожего на рисунок ниже. 

 

41. Добавьте в бокс какой-нибудь текст. Мой вариант вы увидите на рисунке.

 

42. Объедините свои текстовые слои в группу с именем content.

43.Теперь нам нужно выровнять все элементы бокса. Выберите на панели слоев группу content и, удерживая нажатой клавишу Ctrl, слой bg_1, чтобы выделить последний. Включите Move Tool (Перемещение), (V) и на панели настроек выберите опции Align horizontal centers (Выравнивание центров по горизонтали) и Align vertical centers (Выравнивание центров по вертикали). 

 

44. Теперь сделайте две копии этого бокса, продублировав ранее созданные, исходные слои. Выровняйте их, замените содержание и не забудьте добавить горизонтальную направляющую внизу.

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

 

Создание области основного контента

46. Отступите 50px и установите ниже новую направляющую. Добавьте свой контент и расположите его, как на рисунке ниже, используя указанные параметры шрифта.

 

 

47. Давайте один из абзацев текста сделаем немного привлекательнее. Выберите Rectangular Marquee Tool (Прямоугольная область), (M), в параметрах стиля на панели настроек укажите Fixed Size (заданный размер) и выставьте ширину 15px и высоту 30px. Установите, в качестве первого, такой # 12197b цвет и залейте выделенную область, нажав Ctrl + Backspace. 

 

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

 

49. Установите внизу новую горизонтальную направляющую и проведите вертикальную разделительную линию, ориентируясь на рисунок.

 

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

 

Создание области подвала

51.Начнем создание области футера с установки (снова) горизонтальной направляющей, расположив ее на 50px ниже предыдущей. 

52. Включите Single Row Marquee (Область "горизонтальная строка"), (M), установите белый (# FFFFFF) цвет фона, кликните на холсте для создания выделения и нажмите Ctrl + Backspace, чтобы заполнить его. Назовите этот слой 1px_upper_line (верхняя линия 1 рх).

53. Возьмите Rectangular Marquee Tool (Прямоугольник), (M) и растяните форму шириной 1020px (она охватит ширину всего холста) и высотой 160px. Это будет фон для области подвала. Залейте его любым цветом и добавьте стиль слоя Gradient Overlay (Наложение Градиента) с настройками, как на рисунке. 

 

54. Скопируйте слой 1px_upper_line и переместите дубликат к основанию подвала, присвоив слою любое имя, но свой я назвал 1px_down_line. Вот как это выглядит:

55. Добавьте свой контент, оформив его, как на следующих рисунках:

 

 

56. Вы можете скачать социальные иконки на DeviantART, они называются Aquaticus.Social. 

57. Выстройте их, как на следующем рисунке:

 

Создание маленького подвала

58. Установите новую горизонтальную направляющую в основании большого (коричневого) подвала, а затем, отступив 50px, добавьте ниже еще одну. 

59. Напишите текст навигации подвала, как на рисунке ниже.

60. Справа напишите об авторских правах (copyright) и добавьте последнюю, заключительную направляющую.

 

Корректировка размеров холста

61. И в заключение нам нужно нарастить холст вниз, чтобы между текстом copyright и нижней границей документа оставалось 50px.

 

Меню сайта

Создание и продвижение сайтов
• Web макет с гладким дизайном

Web макет с гладким дизайном