Уроки Photoshop: Дизайн Web страницы

Источник: art tower
Viva

Урок покажет вам как создать дизайн страницы для вашего web портфолио. Получится в результате вот такой макет:

Прикрепленное изображение

Создайте новый файл (File>New) размером 800x700 px и 72 dpi. Примените Paint Bucket tool (G) и заполните фон цветом #131313.

Прикрепленное изображение

Используя Ellipse Tool (U), попробуйте нарисовать похожий элемент, который будет служить заголовком сайта, и залейте его белым цветом. Для того, чтобы подправить его форму, используйте Direct Selection Tool (A).

Прикрепленное изображение

Примените стили слоя Blending Options>Outer Glow

Прикрепленное изображение

Прикрепленное изображение

Таким же образом. как и предыдущий, создайте новый слой с эллипсом, так же принадлежащим заголовку. Скорректировать его форму можно при помощи Convert Point Tool.

Прикрепленное изображение

Примените стили слоя Blending Options>Inner Glow

Прикрепленное изображение

Blending Options>Gradient Overlay

Прикрепленное изображение

Параметры градиента:

Прикрепленное изображение

Получится:

Прикрепленное изображение

Скопируйте только что сделанный слой и примените к копии Free Transform для того, чтобы немного сузить и растянуть эллипс так, как показано ниже. Смените стили слоя.

Прикрепленное изображение

Прикрепленное изображение

Прикрепленное изображение

Прикрепленное изображение

Чтобы работать далее, нам понадобится создать текстуру.
Создайте новый файл размером 20x20 px и 72 dpi, затем применив Rectangle Tool (U), нарисуйте три прямоугольника, и разверните их при помощи Free Transform, чтобы создать что-то похожее на текстуру белого цвета smile.gif .

Прикрепленное изображение


Прикрепленное изображение

Сохраните полученное изображение, как текстуру.

Прикрепленное изображение

Вернемся к нашему исходному файлу с сайтом. Создайте новый слой и используйте Rectangle Tool (U) чтобы создать широкую полосу, выглядящую как часть фона сайта.

Прикрепленное изображение

Примените стили слоя.
Blending Options>Gradient Overlay

Прикрепленное изображение

Прикрепленное изображение

Blending Options>Pattern Overlay

Прикрепленное изображение

Прикрепленное изображение

Скопируйте предыдущий слой и опять выберите Free Transform чтобы сдвинуть его вправо и приподнять чуть-чуть вверх, как это показано на рисунке ниже.

Прикрепленное изображение

Прикрепленное изображение

Используя Rounded Rectangle Tool (U), создайте еще один слой, на котором будет располагаться панель с кнопками меню нашего сайта. Цвет - #010101.

Прикрепленное изображение

Прикрепленное изображение

Как всегда - стили слоя:)
Blending Options>Outer Glow

Прикрепленное изображение

Прикрепленное изображение

Скопируйте только что созданный слой, и при помощи Free Transform немного его уменьшите и примените к нему следующие параметры:
Blending Options>Gradient Overlay

Прикрепленное изображение

Прикрепленное изображение

Прикрепленное изображение

Прикрепленное изображение

Используя Ellipse Tool (U), нарисуем яркий блик справа у нашей панели с кнопками.

Прикрепленное изображение

Поставьте в свойствах слоя Fill 0%
Стили слоя:
Blending Options>Gradient Overlay

Прикрепленное изображение

Прикрепленное изображение

Прикрепленное изображение

Зажмите Alt и кликните между слоем с бликом и слоем самой кнопочной панели с тем, чтобы блик применился только к пределам панели.

Прикрепленное изображение
Прикрепленное изображение

Сделайте копию слоя с бликом, и переместите его на левую часть панели с кнопками меню.

Прикрепленное изображение

При помощи Rectangle Tool (U) создайте еще один прямоугольник в нижней части изображения и залейте его цветом - #1A1A1A.

Прикрепленное изображение

Стили слоя:
Blending Options>Outer Glow

Прикрепленное изображение

Blending Options>Bevel and Emboss

Прикрепленное изображение

Прикрепленное изображение

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

Прикрепленное изображение
Прикрепленное изображение

И опять стили слоя.
Blending Options>Drop Shadow

Прикрепленное изображение

Blending Options>Gradient Overlay


Прикрепленное изображение
Прикрепленное изображение

Прикрепленное изображение

Создайте копию слоя, немного уменьшите его при помощи Free Transform как это показано ниже, и примените к нему стилия слоя, показанные ниже.

Прикрепленное изображение

Fill 0% проставьте в свойствах слоя.
Blending Options>Stroke

 
Прикрепленное изображение

Прикрепленное изображение

Теперь мы выберем еще пару инструментов и изобразим еще один элемент, принадлежащий к заголовку сайта. Сначала берем Rectangle Tool (U), чтобы создать основной слой, потом зажимаем Alt, выбираем одновременно Ellipse Tool (U) и применяем его 2 раза, чтобы убрать лишние элементы:)

Прикрепленное изображение

Стили слоя:)
Blending Options>Gradient Overlay

Прикрепленное изображение

Прикрепленное изображение

Прикрепленное изображение

Создадим еще один элемент заголовка сайта, располагающийся выше только что сделанного. Проделываем эту несложную операцию при помощи все того же Rectangle Tool (U).

Прикрепленное изображение

Стили слоя:)
Blending Options>Gradient Overlay

Прикрепленное изображение

Прикрепленное изображение

Прикрепленное изображение

Используя Line Tool (U) нарисуйте две линии по бокам только что созданного прямойгольника, цвет - #8D8D8D

Прикрепленное изображение

Выберите Pencil Tool чтобы нарисовать две вертикальные линии на панели с кнопками выше левого блика.

Прикрепленное изображение

режим наложения - Blending mode-Soft Light

Прикрепленное изображение

Скопируйте только что сделанный слой и поместите его на правый блик.
Используя Ellipse Tool (U), создайте новый слой с кругом. На этом слое будет логотип.

Прикрепленное изображение

Стили слоя:
Blending Options>Outer Glow

Прикрепленное изображение

Blending Options>Gradient Overlay

Прикрепленное изображение

Прикрепленное изображение

Прикрепленное изображение

таким же образом создайте новый слой поверх предыдущего.

Прикрепленное изображение

Ставим в свойствах слоя Fill 0%.
Стили слоя
Blending Options>Gradient Overlay

Прикрепленное изображение

Прикрепленное изображение

Прикрепленное изображение

Поверх предыдущего слоя рисуем еще один круг! Цвет - #0A0F12.

Прикрепленное изображение

И опять - стили слоя.
Blending Options>Stroke

Прикрепленное изображение

Прикрепленное изображение

Берем предыдущий инструмент и рисуем блик на зоне логотипа

Прикрепленное изображение

Стили слоя
Fill 0% .
Blending Options>Gradient Overlay

Прикрепленное изображение

Прикрепленное изображение

Прикрепленное изображение

Зажмите Alt и кликните между слоем с бликом и предыдущим слоем.

Прикрепленное изображение

Прикрепленное изображение

При помощи Ellipse Tool (U) рисуем следующий логотипный слой

Прикрепленное изображение

Стили слоя:
Fill 0%
Blending Options>Outer Glow

Прикрепленное изображение

Blending Options>Inner Glow

Прикрепленное изображение

Blending Options>Stroke

Прикрепленное изображение

Прикрепленное изображение

Следующим шагом создадим специальную секцию, располагающуюся на левой стороне панели, которую мы создавали под основное содержание сайта. Создаем при помощи Rectangle Tool (U).

Прикрепленное изображение

Стили слоя:
Fill 0%
Blending Options>Gradient Overlay

Прикрепленное изображение

Прикрепленное изображение

Прикрепленное изображение

скопируем слой, отразим его по вертикали, и расположим так, как показано на рисунке.

Прикрепленное изображение

используя три линии, сделанные из маленьких точек, обозначьте секции, придерживаясь рекомендаций ниже:

Прикрепленное изображение

(Нижняя линия)

Прикрепленное изображение

(верхняя линия с левой и правой стороны)
Примените стили слоя, одинаковые для всех линий

Прикрепленное изображение

Прикрепленное изображение

Вот что у нас получается после всех этих манипуляций..

Прикрепленное изображение

Следующим шагом напишем надписи на кнопочках на панели меню сайта.
Шрифт можно взять здесь - MicroN55

Прикрепленное изображение

Прикрепленное изображение

Кроме того, доделаем логотип сайта, следуя рекомендациям, указанным ниже.

Прикрепленное изображение

Прикрепленное изображение

Стили слоя
Blending Options>Gradient Overlay

Прикрепленное изображение

Прикрепленное изображение

Прикрепленное изображение

Поименуем секции сайта, следуя рекомендациям ниже.

Прикрепленное изображение
(about me)
 Прикрепленное изображение
(portfolio)

Прикрепленное изображение

Напишите текст в секцию (about me).

Прикрепленное изображение
(оранжевый текст)
Прикрепленное изображение
(основной текст)
Прикрепленное изображение

Вставьте скриншоты ваших проектов в секцию "portfolio". Каждый скриншот на отдельном слое. Примените для этих слоев стиль Blending Options>Stroke

Прикрепленное изображение
Прикрепленное изображение

Ну и напоследок - добавьте копирайт

Прикрепленное изображение

Прикрепленное изображение

Страница сайта http://test.interface.ru
Оригинал находится по адресу http://test.interface.ru/home.asp?artId=9620