Главная > Образование и Изучение > Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп


23 февраля 2011, 12:10. Разместил: Mysterious Master
Привет всем и добро пожаловать в очередную обучающую статью, посредством которой мы научимся разрабатывать интересный шаблон веб-сайта в PSD. Сегодня мы будем работать над опрятным простеньким дизайном портфолио. Вся работа будет осуществляться в программе Photoshop. В статье также охвачены некоторые интересные техники обработки типографики, работы с цветом и отступами.

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

Давайте приступим и надеемся, что по окончанию урока у вас выйдет то же самое, что и на картинке!

Кстати, через пару дней вам будет доступна статья конвертации данного шаблона из PSD в HTML, так что – будьте на связи!

Ресурсы, которые понадобятся нам в ходе разработки:

* 960 Grid System
* Иконки социальных сетей
* Иконки - ресурс с иконками видимо умер; ссылка удалена как нерабочая.
* IMac

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

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

Этап 1: Разработка структуры сайта

Перед началом работы скачайте систему 960grid для упрощения расстановки линеек.

Откройте 960_download\templates\photoshop\960_grid_12_col.psd

Также нужно удостовериться в том, что наши линейки и направляющие отображены. Это можно сделать посредством нажатия клавиш:

* CTRL + R (Отображение линеек)
* CTRL + ; (Отображение направляющих)

CTRL + SHIFT + C поможет вам изменить размер холста.

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

Этап 2: Разработка заголовка

Переименуйте папку layer1 в Header, а 1 слой в header_bg (поместите всё в отдельную папку, типа Header, Navigation, Footer – это поможет вам легко ориентироваться).

Создайте новую направляющую посредством меню View > New Guide и установите позицию на 150 пикселей в горизонтальной ориентации.

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

Выберите инструмент создания многоугольника (Rectangular Marquee Tool – M), создайте выделение, как показано на скриншоте ниже и залейте его любым цветом.

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

Примените следующие параметры смешивания слоя:

Наложение градации (Gradient Overlay)

#192028
#2a3642

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

Этап 3: Разработка логотипа

Создайте папку внутри папки header и назовите её logo, а далее помещайте в неё все слои, связанные с логотипом.

Создайте еще одну направляющую с позицией 50 пикселей от верхней части холста.

Теперь выберите инструмент создания текста (Text Tool – T) и внесите на холст название вашего сайта и слоган.

Название сайта: любой цвет
Слоган: #cacaca

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

Примените следующие параметры смешивания слоя:

Тень (Drop Shadow)

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

Наложение градации (Gradient Overlay)

#c5c5c5
#d7d7d7
#ffffff

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

У вас должно получиться нечто вроде этого:

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

Этап 4: Разработка навигации

Создайте папку и назовите её Navigation, а далее помещайте в неё все слои, связанные с навигационным меню.

Создайте еще одну направляющую с позицией 5 пикселей от верхней части холста.

* Выберите инструмент создания выделения в форме многоугольника (Rectangular Marquee Tool – U)
* Создайте выделение слева направо относительно нашей направляющей 5 пикселей
* Залейте его цветом #02abc6

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

Выберите инструмент создания текста (Text Tool – T):

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

Нам нужно создать две стадии в навигации: активное положение и положение при наведении.

Выберите ручку (Pen Tool – P). Создайте фигуру в виде стрелки, и разместите её так, как показано на скриншоте.

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

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

Этап 5: Разработка области с контентом

Создайте папку и назовите её Featured_Section, а далее помещайте в неё все слои, связанные с данной областью.

Выберите инструмент создания многоугольника (Rectangular Marquee Tool – M), создайте выделение, как показано на скриншоте ниже и залейте его цветом #cccdcd.

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

Примените следующие параметры смешивания слоя:

Контур (Stroke)

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

Создайте еще один слой и назовите его middle_light. Установите уровень отображения на 50%.

Выберите инструмент создания выделения в форме многоугольника (Rectangular Marquee Tool – U) и создайте выделение, как показано на скриншоте ниже:

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

* Выберите заливку радиальной градацией (G)
* Цвет переднего плана укажите #e5e5e5
* Цвет фона укажите #ffffff

Протяните градацию от середины вплоть до правой стороны холста.

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп
Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

Выберите инструмент создания текста (Text Tool – T) и внесите сообщение сайта.

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп
Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

Теперь отройте файл Imac.psd. Разместите его так, как показано на скриншоте ниже.

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

Под слоем Imac создайте новый слой и назовите его Shadow.

Выберите инструмент создания выделения в форме эллипса (Elliptical Marquee Tool – U). Создайте выделение, как показано ниже на скриншоте и залейте его цветом #000000.

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

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

Далее пройдите в меню Filter > Blur > Gaussian Blur.

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

Установите уровень отображения слоя на 50%.

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

Этап 6: Разработка кнопок «читать далее»

Создайте папку и назовите её buttons, а затем помещайте в неё все слои, связанные с кнопками.

Выберите инструмент создания прямоугольника с закругленными углами (Rounded Rectangle Tool – M), и разместите его так, как показано на скриншоте ниже.

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

Примените следующие параметры смешивания слоя:

Наложение градации (Gradient Overlay)

#dcdcdc
#ffffff

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

Контур (Stroke)

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

Теперь выберите инструмент создания текста (Text Tool – T) и поместите текст на кнопки.

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

Примените следующие параметры смешивания слоя:

Тень (Drop Shadow)

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

Наложение градации (Gradient Overlay)

#1d1d1d
#4e4e4e

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

С помощью тени и наложения градации, данный эффект сделает текст якобы встроенным.

Этап 7: Разработка характеристики

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

Создайте папку и назовите её testimonials, а затем помещайте в неё все слои, связанные с характеристиками.

* Выберите инструмент создания прямоугольника с закругленными углами (Rounded Rectangle Tool – U)
* Установите радиус на 10 пикселей

Примените те же опции стиля, которые мы использовали в этапе с заголовком, а затем поместите многоугольник так, как показано на скриншоте ниже.

Теперь выберите инструмент создания текста (Text Tool – T) и поместите текст характеристики.

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп
Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

Этап 8: Разработка кнопки «наймите меня»

Создайте папку внутри папки testimonials и назовите её hire_btn, а затем помещайте в неё все слои, связанные с кнопкой.

Выберите инструмент создания прямоугольника с закругленными углами (Rounded Rectangle Tool – U), установите радиус на 10 пикселей, а цвет на #141a20. Затем поместите многоугольник так, как показано на скриншоте ниже.

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

Примените следующие параметры смешивания слоя:

Тень (Drop Shadow)

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

CTRL+клик по слою для создания выделения.

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

Далее пройдите в меню Select > Modify > Contract и выставите параметр на 3 пикселя.

Создайте еще один слой и назовите его button, залейте его любым цветом.

Примените те же стили слоя и текста, как мы использовали в области с контентом.

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

Этап 9: Разработка основной части страницы (чем я занимаюсь, портфолио, социальные ссылки)

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

Создайте папку и назовите её main_area, а затем помещайте в неё все слои, связанные с основной областью веб-страницы.

Раздел «Чем я занимаюсь»

Создайте папку внутри папки main_area и назовите её What I Do.

Теперь откройте иконки, которые вы скачали, и возьмите оттуда 3 иконки, которые подойдут больше всего к разделам «Чем я занимаюсь», «Портфолио» и «Социальные ссылки».

Инструмент создания текста (Text Tool – T):

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

Раздел «Портфолио»

Создайте папку внутри папки main_area и назовите её my_portfolio, а затем помещайте в неё все слои, связанные с данным разделом.

Инструмент создания текста (Text Tool – T):

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

Примените следующие параметры смешивания слоя:

Контур (Stroke)

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

Раздел «Социальные ссылки»

Создайте папку внутри папки main_area и назовите её i_socialize, а затем помещайте в неё все слои, связанные с данным разделом.

Откройте социальные иконки и нужные разместите так, как показано на скриншоте.

Инструмент создания текста (Text Tool – T):

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

Теперь мы закончили разработку основной части веб-сайта и давайте перейдем к подвалу.

Этап 10: Разработка подвала (быстрые ссылки, последние записи в блоге, контакты)

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

Создайте новую папку и назовите её footer, а затем помещайте в неё все слои, связанные с подвалом.

Далее создайте новую направляющую (View > New Guide) и установите положение 965 пикселей в горизонтальном направлении.

Повторите действие, но с положением 1158 пикселей.

Выберите инструмент создания выделения в форме многоугольника (Rectangular Marquee Tool – U) и создайте выделение, как показано на скриншоте ниже. Залейте его любым цветом.

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

Примените следующие параметры смешивания слоя:

Наложение градации (Gradient Overlay)

#2a3642
#192028

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

Создайте выделение оставшегося белого пространства.

Примените следующие параметры смешивания слоя:

Внутреннее свечение (Inner Glow)

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

Наложение градации (Gradient Overlay)

#2a3642
#192028

Выберите параметр обратного направления (Reverse)

Контур (Stroke)

#192028

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

«Быстрые ссылки»

Создайте еще одну папку внутри папки footer и назовите её Quick Links.

Инструмент создания текста (Text Tool – T):

* Заголовок: #ffffff
* Ссылки: #0cb0ca

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

«Последние записи в блоге»

Создайте еще одну папку внутри папки footer и назовите её Latest_blog.

Инструмент создания текста (Text Tool – T):

* Заголовок: #ffffff
* Ссылки: #0cb0ca

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

«Контакты»

Создайте еще одну папку внутри папки footer и назовите её Contact_me.

Откройте социальные иконки и возьмите иконки электронной почты и rss.

Инструмент создания текста (Text Tool – T):

* Заголовок: #ffffff
* Абзац: #cacaca
* Ссылки: #0cb0ca

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

Последнее, что нам осталось – добавить копирайт.

Инструмент создания текста (Text Tool – T) и шрифт Arial 11pt

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

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

Результат

Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп

Кстати, совсем скоро мы опубликуем обучающую статью относительно того, как конвертировать этот шаблон из формата PSD в HTML, так что следите за новостями!
Вернуться назад