Ещё больше уроков в нашей группе Вконтакте!





сортировать посты по: Рейтингу | Посещаемости | Комментируемые

Введите свои исправления:


Имя:
Комментарий:

Подсказка

Если Вы нашли неточность в переводе, ошибку или считаете, что содержание данного шага не совсем точное – используйте функцию «Изменить», чтобы внести свои изменения.

*Ваши изменения будут отправлены администрации на модерирование.
*Поля "Имя" и "Комментарий" не обязательны.

Конечный результат:


Портфолио


Здесь вы можете посмотреть работы в стиле “Bokeh”, которые были взяты в качестве вдохновения для данного дизайна.

Шаг 1
Создайте новый документ размером 900х800 пикселей, потом создайте новый слой (Create New Layer) и назовите его “brush layer”. Создайте чёрным круг в любом месте холста. Для этого используйте инструмент Овальная область (Elliptical Marquee Tool). Создайте правильный ровный круг (удерживайте Shift при создании). Потом инструментом Заливка (Paint Bucket Tool) залейте выделение чёрным цветом. Установите Заливку (Fill) слоя – 50% и примените стиль Обводка (Layer Style – Stroke) размером 1 пиксель (она должна быть темнее самого круга).


Гладкий web-дизайн портфолио


Шаг 2
Сделайте фоновый слой невидимым и перейдите в меню Редактирование»Определить кисть (Edit>Define Brush Preset…). Сохраните кисть под именем “bokeh brush”.


Гладкий web-дизайн портфолио


Шаг 3
Создайте новый слой “header”, инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение в верхней части холста. Потом инструментом Градиент (Gradient Tool) сделайте заливку, как показано ниже:


Гладкий web-дизайн портфолио

Гладкий web-дизайн портфолио


Шаг 4
Создайте новый слой “header bokeh 1”, выберите сохранённую кисть “bokeh brush” и настройте так в палитре кистей:

Динамика формы:


Гладкий web-дизайн портфолио


Рассеивание:


Гладкий web-дизайн портфолио


Шаг 5
Обрисуйте градиентную область белым цветом:


Гладкий web-дизайн портфолио


Установите Режим наложения – Мягкий свет (Blending Mode – Soft Light) и Непрозрачность – 10%.


Гладкий web-дизайн портфолио


Шаг 6
Создайте новый слой (Create New Layer) и назовите его “header bokeh 2”. Также обрисуйте слой белой кистью, но установите Непрозрачность – 70%. Потом создайте ещё один слой “header bokeh 3” и сделайте то же самое. Непрозрачность этого слоя – 100%.


Гладкий web-дизайн портфолио


Шаг 7
Объедините все слои с кистями и установите Непрозрачность полученного слоя – 60%.


Гладкий web-дизайн портфолио


Создайте новый слой “highlights” и сделайте в нём несколько заливок радиальным градиентом (цвет – от белого к прозрачному). Установите Режим наложения – Перекрытие (Blending Mode – Overlay). Это создаст хорошие светящиеся эффекты.


Гладкий web-дизайн портфолио


Шаг 8
Напишите текст в шапке сайта светло-синим цветом. Потом перейдите в меню Стилей слоя (Layer Style - Blending Options) и настройте так:

Отбрасывание тени (Режим – Умножение):


Гладкий web-дизайн портфолио


Внешнее свечение (Режим – Нормальный, Метод – Мягкий):


Гладкий web-дизайн портфолио


Потом для фонового слоя шапки перейдите в меню Тон/Насыщенность (Hue/Saturation) и измените насыщенность так, чтобы синий и зелёный цвета сильнее выделялись.


Гладкий web-дизайн портфолио


Шаг 9
Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте тонкое выделение (область меню) и залейте его градиентом (от тёмно-синего к тёмно-зелёному). Потом напишите текст меню:


Гладкий web-дизайн портфолио


Шаг 10
Создайте новый слой (Create New Layer) над панелью меню, но под текстом. Сделайте заливку радиальным градиентом (цвет – от белого к прозрачному) под словом “HOME”. Установите Непрозрачность этого слоя – 50% и Режим наложения – Перекрытие (Blending Mode – Overlay):


Гладкий web-дизайн портфолио


Шаг 11
Теперь в белой области ниже, напишите заголовок контента. Я использовал шрифт “Arial” размером 48 pt., кернинг: -50. Потом примените следующие стили слоя:

Отбрасывание тени (Режим – Умножение):


Гладкий web-дизайн портфолио


Внутренняя тень (Режим – Умножение):


Гладкий web-дизайн портфолио

Гладкий web-дизайн портфолио


Шаг 12
Добавьте ещё текст и вставьте картинку:


Гладкий web-дизайн портфолио


Шаг 13
Создайте новый слой “button”. Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) с радиусом 10 пикселей создайте фигуру (кнопку) под картинкой в её ширину. Потом перейдите в меню Стилей слоя (Layer Style - Blending Options) и настройте так:

Отбрасывание тени (Режим – Умножение):


Гладкий web-дизайн портфолио


Внутренняя тень (Режим – Нормальный):


Гладкий web-дизайн портфолио


Наложение градиента (Режим – Нормальный, Стиль – Линейный):


Гладкий web-дизайн портфолио

Гладкий web-дизайн портфолио


Шаг 14
Создайте полупрозрачные круги, как в шапке сайта, на кнопке, и таким же способом создайте несколько стрелок в правой части. Потом напишите текст.


Гладкий web-дизайн портфолио


Шаг 15
Потом создайте серый прямоугольник в нижней части холста (стейлер):


Гладкий web-дизайн портфолио


Шаг 16
В завершении урока добавьте логотип (название сайта) в стейлер и допишите меню и информацию о сайте.


Портфолио




Ссылка на источник урока

Добавление комментария

Ваше Имя

Ваш E-mail

Код:Включите эту картинку для отображения кода безопасности
обновить код

Введите код: