Мы будем использовать действительно светлую цветовую схему, а дизайн должен получиться в стиле настоящего минимализма.
Давайте приступим и надеемся, что по окончанию урока у вас выйдет то же самое, что и на картинке!
Кстати, через пару дней вам будет доступна статья конвертации данного шаблона из PSD в HTML, так что – будьте на связи!
Ресурсы, которые понадобятся нам в ходе разработки:
* 960 Grid System
* Иконки социальных сетей
* Иконки - ресурс с иконками видимо умер; ссылка удалена как нерабочая.
* IMac
Посмотрите на результат, который должен получиться. Вы можете кликнуть по изображению, чтобы увидеть его в полном размере:
Этап 1: Разработка структуры сайта
Перед началом работы скачайте систему 960grid для упрощения расстановки линеек.
Откройте 960_download\templates\photoshop\960_grid_12_col.psd
Также нужно удостовериться в том, что наши линейки и направляющие отображены. Это можно сделать посредством нажатия клавиш:
* CTRL + R (Отображение линеек)
* CTRL + ; (Отображение направляющих)
CTRL + SHIFT + C поможет вам изменить размер холста.
Этап 2: Разработка заголовка
Переименуйте папку layer1 в Header, а 1 слой в header_bg (поместите всё в отдельную папку, типа Header, Navigation, Footer – это поможет вам легко ориентироваться).
Создайте новую направляющую посредством меню View > New Guide и установите позицию на 150 пикселей в горизонтальной ориентации.
Выберите инструмент создания многоугольника (Rectangular Marquee Tool – M), создайте выделение, как показано на скриншоте ниже и залейте его любым цветом.
Примените следующие параметры смешивания слоя:
Наложение градации (Gradient Overlay)
#192028
#2a3642
Этап 3: Разработка логотипа
Создайте папку внутри папки header и назовите её logo, а далее помещайте в неё все слои, связанные с логотипом.
Создайте еще одну направляющую с позицией 50 пикселей от верхней части холста.
Теперь выберите инструмент создания текста (Text Tool – T) и внесите на холст название вашего сайта и слоган.
Название сайта: любой цвет
Слоган: #cacaca
Примените следующие параметры смешивания слоя:
Тень (Drop Shadow)
Наложение градации (Gradient Overlay)
#c5c5c5
#d7d7d7
#ffffff
У вас должно получиться нечто вроде этого:
Этап 4: Разработка навигации
Создайте папку и назовите её Navigation, а далее помещайте в неё все слои, связанные с навигационным меню.
Создайте еще одну направляющую с позицией 5 пикселей от верхней части холста.
* Выберите инструмент создания выделения в форме многоугольника (Rectangular Marquee Tool – U)
* Создайте выделение слева направо относительно нашей направляющей 5 пикселей
* Залейте его цветом #02abc6
Выберите инструмент создания текста (Text Tool – T):
Нам нужно создать две стадии в навигации: активное положение и положение при наведении.
Выберите ручку (Pen Tool – P). Создайте фигуру в виде стрелки, и разместите её так, как показано на скриншоте.
Теперь мы закончили разработку шапки сайта, теперь давайте перейдём к последующим пунктам.
Этап 5: Разработка области с контентом
Создайте папку и назовите её Featured_Section, а далее помещайте в неё все слои, связанные с данной областью.
Выберите инструмент создания многоугольника (Rectangular Marquee Tool – M), создайте выделение, как показано на скриншоте ниже и залейте его цветом #cccdcd.
Примените следующие параметры смешивания слоя:
Контур (Stroke)
Создайте еще один слой и назовите его middle_light. Установите уровень отображения на 50%.
Выберите инструмент создания выделения в форме многоугольника (Rectangular Marquee Tool – U) и создайте выделение, как показано на скриншоте ниже:
* Выберите заливку радиальной градацией (G)
* Цвет переднего плана укажите #e5e5e5
* Цвет фона укажите #ffffff
Протяните градацию от середины вплоть до правой стороны холста.
Выберите инструмент создания текста (Text Tool – T) и внесите сообщение сайта.
Теперь отройте файл Imac.psd. Разместите его так, как показано на скриншоте ниже.
Под слоем Imac создайте новый слой и назовите его Shadow.
Выберите инструмент создания выделения в форме эллипса (Elliptical Marquee Tool – U). Создайте выделение, как показано ниже на скриншоте и залейте его цветом #000000.
Помните, что пока вы удерживаете кнопку shift, вы можете создавать сразу несколько выделений.
Далее пройдите в меню Filter > Blur > Gaussian Blur.
Установите уровень отображения слоя на 50%.
Этап 6: Разработка кнопок «читать далее»
Создайте папку и назовите её buttons, а затем помещайте в неё все слои, связанные с кнопками.
Выберите инструмент создания прямоугольника с закругленными углами (Rounded Rectangle Tool – M), и разместите его так, как показано на скриншоте ниже.
Примените следующие параметры смешивания слоя:
Наложение градации (Gradient Overlay)
#dcdcdc
#ffffff
Контур (Stroke)
Теперь выберите инструмент создания текста (Text Tool – T) и поместите текст на кнопки.
Примените следующие параметры смешивания слоя:
Тень (Drop Shadow)
Наложение градации (Gradient Overlay)
#1d1d1d
#4e4e4e
С помощью тени и наложения градации, данный эффект сделает текст якобы встроенным.
Этап 7: Разработка характеристики
Создайте папку и назовите её testimonials, а затем помещайте в неё все слои, связанные с характеристиками.
* Выберите инструмент создания прямоугольника с закругленными углами (Rounded Rectangle Tool – U)
* Установите радиус на 10 пикселей
Примените те же опции стиля, которые мы использовали в этапе с заголовком, а затем поместите многоугольник так, как показано на скриншоте ниже.
Теперь выберите инструмент создания текста (Text Tool – T) и поместите текст характеристики.
Этап 8: Разработка кнопки «наймите меня»
Создайте папку внутри папки testimonials и назовите её hire_btn, а затем помещайте в неё все слои, связанные с кнопкой.
Выберите инструмент создания прямоугольника с закругленными углами (Rounded Rectangle Tool – U), установите радиус на 10 пикселей, а цвет на #141a20. Затем поместите многоугольник так, как показано на скриншоте ниже.
Примените следующие параметры смешивания слоя:
Тень (Drop Shadow)
CTRL+клик по слою для создания выделения.
Далее пройдите в меню Select > Modify > Contract и выставите параметр на 3 пикселя.
Создайте еще один слой и назовите его button, залейте его любым цветом.
Примените те же стили слоя и текста, как мы использовали в области с контентом.
Этап 9: Разработка основной части страницы (чем я занимаюсь, портфолио, социальные ссылки)
Создайте папку и назовите её main_area, а затем помещайте в неё все слои, связанные с основной областью веб-страницы.
Раздел «Чем я занимаюсь»
Создайте папку внутри папки main_area и назовите её What I Do.
Теперь откройте иконки, которые вы скачали, и возьмите оттуда 3 иконки, которые подойдут больше всего к разделам «Чем я занимаюсь», «Портфолио» и «Социальные ссылки».
Инструмент создания текста (Text Tool – T):
Раздел «Портфолио»
Создайте папку внутри папки main_area и назовите её my_portfolio, а затем помещайте в неё все слои, связанные с данным разделом.
Инструмент создания текста (Text Tool – T):
Примените следующие параметры смешивания слоя:
Контур (Stroke)
Раздел «Социальные ссылки»
Создайте папку внутри папки main_area и назовите её i_socialize, а затем помещайте в неё все слои, связанные с данным разделом.
Откройте социальные иконки и нужные разместите так, как показано на скриншоте.
Инструмент создания текста (Text Tool – T):
Теперь мы закончили разработку основной части веб-сайта и давайте перейдем к подвалу.
Этап 10: Разработка подвала (быстрые ссылки, последние записи в блоге, контакты)
Создайте новую папку и назовите её footer, а затем помещайте в неё все слои, связанные с подвалом.
Далее создайте новую направляющую (View > New Guide) и установите положение 965 пикселей в горизонтальном направлении.
Повторите действие, но с положением 1158 пикселей.
Выберите инструмент создания выделения в форме многоугольника (Rectangular Marquee Tool – U) и создайте выделение, как показано на скриншоте ниже. Залейте его любым цветом.
Примените следующие параметры смешивания слоя:
Наложение градации (Gradient Overlay)
#2a3642
#192028
Создайте выделение оставшегося белого пространства.
Примените следующие параметры смешивания слоя:
Внутреннее свечение (Inner Glow)
Наложение градации (Gradient Overlay)
#2a3642
#192028
Выберите параметр обратного направления (Reverse)
Контур (Stroke)
#192028
«Быстрые ссылки»
Создайте еще одну папку внутри папки footer и назовите её Quick Links.
Инструмент создания текста (Text Tool – T):
* Заголовок: #ffffff
* Ссылки: #0cb0ca
«Последние записи в блоге»
Создайте еще одну папку внутри папки footer и назовите её Latest_blog.
Инструмент создания текста (Text Tool – T):
* Заголовок: #ffffff
* Ссылки: #0cb0ca
«Контакты»
Создайте еще одну папку внутри папки footer и назовите её Contact_me.
Откройте социальные иконки и возьмите иконки электронной почты и rss.
Инструмент создания текста (Text Tool – T):
* Заголовок: #ffffff
* Абзац: #cacaca
* Ссылки: #0cb0ca
Последнее, что нам осталось – добавить копирайт.
Инструмент создания текста (Text Tool – T) и шрифт Arial 11pt
Итак, мы закончили! Надеемся, вы что-нибудь извлечете из нашей сегодняшней статьи, а также искренне надеемся, что она понравилась вам.
Спасибо за внимание!
Результат
Кстати, совсем скоро мы опубликуем обучающую статью относительно того, как конвертировать этот шаблон из формата PSD в HTML, так что следите за новостями!
