В этом уроке web дизайна в Photoshop мы узнаем, как создать макет сайта с гладким дизайном в стиле минимализма. Чтобы облегчить задачу выравнивания элементов дизайна макета, мы будем использовать в качестве шаблона систему сеток 960 Grid System.
Вот как выглядит иллюстрация того, что мы будем создавать вместе. Кликните на картинку, чтобы увеличить.
1. Мы будем использовать систему 960 Grid System (скачайте ее
2. Прежде всего, щелкните правой кнопкой мыши на фоновом слое в панели слоев и выберите Layer From Background (Из заднего плана). Это позволит разблокировать фоновый слой, чтобы он был доступным для редактирования. Я назвал фоновый слой BG (фон).
4. Установим горизонтальную направляющую на уровне 50px сверху, обозначив, таким образом, верхнюю границу области шапки макета.
"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 (Внутренняя тень). Настройки стиля спишите с рисунка ниже.
16. Выбрав Line Tool (Линия), (U), проведите друг над другом две линии толщиной по 1px. Цвета указаны на рисунке.
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.
25. Давайте добавим в наш проект какой-нибудь контент, но прежде нужно определить границы. Для этого установите две горизонтальные направляющие, как на рисунке ниже.
27. Ориентируясь на рисунок ниже, добавьте свой текст параграфа.
30. Пришло время сделать ползунок. Скопируйте обе разделительные линии, созданные для навигации, а затем, включив Free Transform (Свободное трансформирование), измените их размер. Темную линию мы сделаем чуть темнее, выбрав для нее такой # 777575 цвет.
33. Прежде всего, нам нужно установить границы. Установите горизонтальную направляющую на линию ползунка, затем через 50px добавьте снизу еще одну.
46. Отступите 50px и установите ниже новую направляющую. Добавьте свой контент и расположите его, как на рисунке ниже, используя указанные параметры шрифта.
51.Начнем создание области футера с установки (снова) горизонтальной направляющей, расположив ее на 50px ниже предыдущей.
52. Включите Single Row Marquee (Область "горизонтальная строка"), (M), установите белый (# FFFFFF) цвет фона, кликните на холсте для создания выделения и нажмите Ctrl + Backspace, чтобы заполнить его. Назовите этот слой 1px_upper_line (верхняя линия 1 рх).
58. Установите новую горизонтальную направляющую в основании большого (коричневого) подвала, а затем, отступив 50px, добавьте ниже еще одну.
59. Напишите текст навигации подвала, как на рисунке ниже.
61. И в заключение нам нужно нарастить холст вниз, чтобы между текстом copyright и нижней границей документа оставалось 50px.