Уроки Веб и приложения 16 июля 2014

Строгий дизайн для портфолио в Фотошоп

Сложность урока: Средний

Итоговый результат:

Исходники к уроку:

  1. Иконки
  2. 960 Grid System

Архив

Шаг 1. Создание структуры сайта

Для начала скачайте 960 grid system. Откройте файл "960_download\templates\photoshop\960_grid_12_col.psd". Нажмите Ctrl+Shift+C, чтобы изменить размер холста.

Используя инструмент Заливка (Paint Bucket Tool) залейте фоновый слой цветом #242b30. Теперь Вам нужно создать папки для каждой части сайта.

Шаг 2. Создание шапки сайта

Создайте новую папку и назовите её "Header". Перейдите в  Вид > Новая направляющая (View > New Guide), в появившемся окне выберите Ориентация (Orientation) - Горизонтальная (Horizontal), и в поле Позиция (Position) введите 100px.

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

Добавьте стили слоя:

Наложение градиента (Gradient Overlay):
- линейный градиент;
- угол 90;
- #171c20;
- #22292f;

Обводка (Stroke):
- #0d1012;

Шаг 3. Создание логотипа

Создайте папку "Logo", внутри папки "Header". Выберите инструмент Текст (Type Tool) и напишите своё название сайта, с теми же настройками, что и на скриншоте ниже.

Добавьте стили слоя:

Наложение градиента (Gradient Overlay):
- линейный градиент;
- угол: 90;
- #929292;
- #bcbdbd, Позиция (Location): 30%;
- #dfdfdf, Позиция (Location): 50%;
- #dfdfdf, Позиция (Location): 100%;

Теперь создайте новый слой, назовите его "Light " и поместите его под текстовым слоем. Создайте выделение, как показано на скриншоте ниже.

Установите цвет переднего плана на белый (#FFFFFF). Выберите инструмент Кисть (Brush Tool), в параметрах кисти выберите кисть с теми же параметрами, что и на скриншоте ниже.

Создайте такое же осветление, как и на скриншоте.

Установите Непрозрачность (Оpacity) на 80% и режим наложения измените на Мягкий свет (Soft Light).

Шаг 4. Создание навигации

Создайте папку "Navigation" внутри папки "Header". Выберите инструмент Текст (Type Tool) и создайте несколько пунктов меню, со следующими настройками:

Я выделил ссылку "Home", потому что это активная ссылка. Для остальных ссылок я использовал цвет #b6aefd. Для активной ссылки добавьте следующие стили:

Наложение цвета (Color Overlay):
- #232a2f;

Создайте новый слой и поместите его под слой с активной ссылкой. Возьмите инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool) и установите радиус скругления в 5px.

Добавьте следующие стили:

Наложение градиента (Gradient Overlay):
- линейный градиент;
- угол: 90;
- #929292;
- #bcbdbd, Позиция (Location): 30%;
- #dfdfdf, Позиция (Location): 50%;
- #dfdfdf, Позиция (Location): 100%;

Обводка (Stroke):
- #13181b;

Шаг 5. Создание слайд-шоу

Создайте новую направляющую (Вид > Новая направляющая (View > New Guide)). Ориентация (Orientation) - Горизонтальная (Horizontal), Позиция (Position) - 140px. Повторите действия и создайте ещё одну направляющую, позиция - 440px.

Создайте новую папку - "Slideshow". Выберите инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool), радиус - 5px, и создайте прямоугольник, как на скриншоте ниже, залейте цветом - #171c20.

Добавьте стили слоя:

Создайте выделение для слоя, перейдите в Выделение > Модификация > Сжать (Selection > Modify > Contract) и сожмите выделение на 5px. Создайте 4 новых направляющих и перетащите к краям выделения.

Выберите инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool) с радиусом в 5px. Цвет я выбрал - #36414a. На самом деле, цвет для этой формы не имеет значения, т.к. это будет подложка для изображений.

Добавьте стили слоя:

Внутреннее свечение (Inner Glow):
- #424f5a;

Обводка (Stroke):
- #111417;

Внутри папки "Slideshow" создайте папку "divider". Выберите инструмент Прямоугольное выделение ( Rectangular Marquee Tool). Создайте две 1 пиксельные вертикальные линии. Цвет первой - #111417. Цвет второй - #424f5a.

Мы разделим слайд-шоу на 2 части. В левую часть мы поместим описание к картинке, из правой части, и две кнопки. Внутри папки "Slideshow" создайте папку "left". Выберите инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool), радиус - 5px. Создайте прямоугольник внутри подложки.

Добавьте стили слоя:

Наложение градиента (Gradient Overlay):
- Стиль: линейный;
- #242b31;
- #36414a;

Создайте новый слой "header". Возьмите инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool), создайте прямоугольник и поместите его так же, как на скриншоте ниже.

Добавьте следующие стили слоя:
Внутреннее свечение (Inner Glow):
- #424f5a;

Наложение градиента (Gradient Overlay):
- Стиль: линейный;
- #21282d;
- #2f3840;

Обводка (Stroke):
- #111417;

Теперь добавьте свой заголовок, используя инструмент Текст (Type Tool). (Цвет - #171c20; Отступ - 20px)

Дублируйте слой с текстом и сместите на 1 пиксель вниз. Добавьте стили слоя:

Наложение градиента (Gradient Overlay):
- Стиль: линейный;
- #d4d4d4;
- #ffffff;

С помощью инструмента Текст (Type Tool) добавьте описание.

Внутри папки "Slideshow" создайте папку "Read more". Возьмите инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool). Создайте прямоугольник и поместите так же, как на скриншоте ниже. Выберите инструмент Текст (Type Tool) и напишите "Read more", цвет - #dedede.

Создайте папку "prev_next". Выберите инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool). Создайте и поместите прямоугольник так же, как и на скриншоте ниже.

Добавьте стили слоя:

Наложение градиента (Gradient Overlay)::
- Стиль: линейный градиент;
- угол: 90;
- #929292;
- #bcbdbd, Позиция (Location): 30%;
- #dfdfdf, Позиция (Location): 50%;
- #dfdfdf, Позиция (Location): 100%;

Обводка (Stroke):
- #161b1f;

Выберите инструмент Произвольная фигура (Custom Shape Tool) и выберите такую же стрелку, как и на скриншоте ниже.

Поместите её, как на скриншоте ниже:

Добавьте стили слоя:

Наложение градиента (Gradient Overlay)::
- Стиль: линейный градиент;
- угол: 90;
- #21282d;
- #2f3840, Позиция (Location): 50% и 100%;

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

Выберите инструмент Перо (Pen Tool) и создайте такую же форму, как на рисунке ниже, залейте её чёрным (#000000) цветом.

Перейдите в Фильтр > Размытие > Размытие по Гауссу (Filter > Blur > Gaussian Blur) радиус размытия установите 5px. Непрозрачность (Оpacity) установите на 80%.

Шаг 6. Создание блока "What I Do"

Выберите инструмент Текст (Type Tool), напишите свой заголовок и поместите так же, как и на скриншоте ниже.

Добавьте стили слоя:

Наложение градиента (Gradient Overlay):
- Стиль: линейный градиент;
- #d4d4d4;
- #ffffff;

Внутри папки "What I Do" создайте 4 папки: "I Capture Smiles", "I Design Websites", "Awards I Receive" и "I love to Socialize". С помощью инструмента Текст (Type Tool) напишите какой-нибудь текст для каждого блока. Для заголовков я использовал следующие настройки: Цвет - #dfdfdf; Размер - 18pt. Для описания: Цвет - #dfdfdf; Размер - 12pt. Стили для кнопки "Read more" те же, что и у кнопки в Слайд-шоу. Размер блока - 220px.

Если Вы выполнили предыдущий шаг, то у Вас должно уже получится что-то вроде этого:

Шаг 7. Создание разделителя

Внутри папки "Divider" создайте новую папку "lines". Чтобы сделать разделитель воспользуйтесь инструментом Линия (Line Tool). Цвет первой линии - #111417. Цвет второй - #364148.

Выберите инструмент Прямоугольник (Rectangle Tool), создайте и поместите прямоугольник так же, как на скриншоте ниже. Заливку (Fill) уменьшите до 0%.

Добавьте стили слоя:

Дублируйте слой и измените стиль Наложение градиента (Gradient Overlay).

Цвет градиента - #242b30;

Шаг 8. Создание блока "About Me"

Внутри папки "About Me" создайте новый слой, выберите инструмент Текст (Type Tool) и добавьте заголовок и описание. Используйте те же настройки, что и в блоке "What I Do".

Шаг 9. Создание блока "My Portfolio"

Внутри папки "My Portfolio" создайте новый слой, и с помощью инструмента Текст (Type Tool) напишите свой заголовок.

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

Добавьте стили слоя:

Обводка (Stroke):
- #161b1f;

Поместите своё изображение тем же способом, что и в слайд-шоу.

Теперь, добавьте описание, для этого возьмите инструмент Текст (Type Tool) и напишите описание так, как показано на скриншоте ниже.

Шаг 10. Создание футера

Создайте новый слой, внутри папки "Footer". Выберите инструмент Прямоугольник (Rectangle Tool), цвет - #171c20, создайте прямоугольник (Высота - 50px) и поместите так же, как на скриншоте.

Добавьте стили слоя:

Внешнее свечение (Outer Glow):
- #111417;

Обводка (Stroke):
- #364148;

Добавьте свои копирайты в левой части футера и несколько ссылок в правой.

Шаг 11. Добавление фонового свечения

Выберите папку "Background" и внутри неё создайте 2 слоя и назовите их "Slideshow_light" и "whatido_light". Выберите слой "Slideshow_light", возьмите инструмент Прямоугольная область ( Rectangular Marquee Tool) и создайте выделение, как показано на скриншоте ниже.

Чтобы создать свечение выберите инструмент Кисть (Brush Tool), размер - 700, жёсткость (hardness ) 0%. Создайте свечение, как показано на скриншоте ниже. В режиме наложения выберите Мягкий свет (Soft Light), Непрозрачность (Оpacity) 70%.

У Вас должен будет получится такой же эффект:

Выберите слой "whatido_light". Возьмите инструмент Прямоугольная область (Rectangular Marquee Tool) и создайте выделение, как на скриншоте ниже.

Режим наложения измените на Мягкий свет (Soft Light) и Непрозрачность (Оpacity) уменьшите до 70%. Создайте свечение, как на скриншоте ниже.

Вот и всё! Надеюсь, Вы узнали что-то новое в этом уроке, и, надеюсь, Вам понравился этот урок!

Итоговый результат:

Автор:  Michael John Burns

Комментарии 28

Получилось и по размерам тоже

Ответить Ссылка

Большое спасибо за полезный урок

Ответить Ссылка

Спасибо большое за урок :)

Ответить Ссылка

Спасибо большое за урок ^_^

Ответить Ссылка

Здравствуйте, объясните, пожалуйста, зачем мы открывает grid960.А точнее зачем нам это линии линейки. Не могу понять их значение в данной работе. Вообще это мой первый контакт с фотошопом, поэтому такие дурацские вопросы. В дальнейшим пользоваться этой заготовкой(считай как шаблон) или все же это индивидуально для данного макета???

Ответить Ссылка 0 1

Вопросы по уроку задавайте на форуме. В конце каждого урока есть ссылка "Задать вопрос на форуме"

Ответить Ссылка 0 0

Спасибо большое

Ответить Ссылка

Отличный урок. Спасибо.

Ответить Ссылка

Вот такой вот у меня получился шаблон портфолио

Ответить Ссылка

Спасибо большое за урок !)

Ответить Ссылка

Получилось отлично))) Всем спасибо большое

Ответить Ссылка

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

Ответить Ссылка

ПОЛЕЗНЫЙ!!! И очень интересный урок:) Спасибо большое:)

Ответить Ссылка

Спасибо, рисовала давно)

Ответить Ссылка

Добрый день, спасибо за очень подробный урок.

Ответить Ссылка

Спасибо за урок. Было интересно.

Ответить Ссылка

Интересно) Дальше терпения не хватило заполнять)

Ответить Ссылка

Спасибо за урок, понравился!

Ответить Ссылка

Спасибо большое за урок)

Ответить Ссылка

Спасибо за урок! Жаль что качество теряется, при уменьшении разрешения до допустимых размеров.

Ответить Ссылка
Добавить комментарий / работу

Новые работы пользователей

{{work.views}} {{work.comments}}

По заданным фильтрам работы не найдены

Попробуйте изменить критерий поиска, или сбросить фильтры


Смотреть все работы

Предыдущая Следующая
Добавлена {{work.date}}
Не удалось загрузить работу. Возможно она была удалена.
GIF {{work.bite}} Мб Загрузить
Редактировать Удалить
18+
Работа имеет содержимое для 18+ лет
{{work.views}} {{work.comments}}
Жалоба
Жалоба

Комментарии {{work.childs.length || 0}}

Популярные работы автора:
Работа получила награды:
Курсы автора:
Онлайн-курс

Жалоба

Опишите суть жалобы, при необходимости добавьте ссылки на скриншоты

Спасибо! Ваше обращение ушло на рассмотрение.

Название работы

Описание работы (необязательно)

Комментарий

Ваша миниатюра:

Название:
{{name}}
Описание:

Исходник:

{{source.name}} {{source.name}}

Тэги:
#{{tag.label}}

Есть ли у вас исходник к работе?

Исходник — это файл из исходных изображений, которые использовались для создания вашей работы. Исходник позовляет лучше понять вашу работу. Он не обязателен, но работы с исходниками получают больше лайков и имеют право на участие в еженедельных конкурсах.
jpg-файл, максимальный размер 1920x1080px

Пример исходника

Выберете тэги работы:

Тэги позволяют лучше находить вашу работу другим пользователям. Подумайте какие тэги описывают вашу работу лучше всего и проставьте их. Это даст вам больше просмотров, лайков и комментариев. 

Не более десяти тэгов на одну работу

Вашу работу разберет один из экспертов проекта «Creativo». Это позволит вам увидеть свои ошибки и сделать следующую работу лучше. Разбор будет сделан в комментариях к работе и будет виден всем пользователям.

После добавления работы:


Запланировать публикацию

{{pub_dates[pub_date]}}
Отменить планирование
Запланировать