Главная > Образование и Изучение > Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп
Уроки Photoshop: Разработка опрятного шаблона портфолио в Фотошоп23 февраля 2011, 12:10. Разместил: Mysterious Master |
Привет всем и добро пожаловать в очередную обучающую статью, посредством которой мы научимся разрабатывать интересный шаблон веб-сайта в PSD. Сегодня мы будем работать над опрятным простеньким дизайном портфолио. Вся работа будет осуществляться в программе Photoshop. В статье также охвачены некоторые интересные техники обработки типографики, работы с цветом и отступами. Мы будем использовать действительно светлую цветовую схему, а дизайн должен получиться в стиле настоящего минимализма. Давайте приступим и надеемся, что по окончанию урока у вас выйдет то же самое, что и на картинке! Кстати, через пару дней вам будет доступна статья конвертации данного шаблона из 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, так что следите за новостями! Вернуться назад |