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





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

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


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

Подсказка

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

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

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


Навигационная панель


Шаг 1
Посмотрите на картинку ниже. Это web-сайт “Volkswagen”. Мы скопируем его навигационную панель, а точнее воссоздадим. Я использовал холст размером 540х250 пикселей с разрешением 72 ppi.


Навигационная панель


Шаг 2
Сначала скопируйте оригинальную навигационную панель в наш документ, чтобы было легче делать копию. Потом создайте новый слой (Create New Layer) и назовите его “Base”. Выберите инструмент Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) и настройте, как показано ниже. Создайте фигуру, как показано ниже: закончите её слева, там, где начинается полукруг. Цвет фигуры не важен, так как будут применены стили слоя:


Навигационная панель


Шаг 3
Инструментом Эллипс (Ellipse Tool) создайте круг, как показано ниже:


Навигационная панель


Шаг 4
Инструментом Перемещение (Move Tool) поднимите созданные фигуры вверх:


Навигационная панель


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

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


Навигационная панель


Внутреннее свечение (Режим – Умножение, Метод – Мягкий):


Навигационная панель


Наложение градиента (Режим – Нормальный. Стиль – Линейный, Цвета - #000000 и #A8A8A8):


Навигационная панель


Шаг 6
Теперь создадим область для кнопок. Создайте новый слой (Create New Layer) и назовите его “Button Background”. Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) с радиусом 3 пикселя создайте прямоугольник такого же размера, как и область кнопок (как мы делали это в предыдущих шагах), и потом поднимите его наверх на наши фигуры.


Навигационная панель


Шаг 7
К этому слою примените такие стили:

Тиснение (Стиль – Внутренний скос, Метод – Плавный, Режим подсветки – Осветление, Режим тени – Умножение):


Навигационная панель


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


Навигационная панель

Навигационная панель


Шаг 8
Теперь перейдём к созданию самих кнопок. Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) с радиусом 2 пикселя создайте первую кнопку такого же размера как и оригинал. Слой будет называться “Button”.


Навигационная панель


Шаг 9
К слою “Button” примените следующие стили:

Тиснение (Стиль – Внутренний скос, Метод – Плавный, Режим подсветки – Осветление, Режим тени – Умножение):


Навигационная панель


Наложение градиента (Режим – Нормальный, Стиль – Линейный, Цвета - #000000, #74767a и #535558):


Навигационная панель

Навигационная панель


Шаг 10
Сделайте выделение слоя “Button” (Ctrl+Click) и создайте новый слой (Create New Layer) “Button Sides” и добавьте слой-маску (Layer Mask). Выберите инструмент Кисть (Brush Tool) размером 8 пикселей с жёсткостью 0%. Установите цвет заливки - #4A4B4B, кликните в верхнем левом углу кнопки, потом, удерживая Shift, в точке, где чёрный градиент переходит в серый, и потом в нижнем левом углу.


Навигационная панель


Шаг 11
Создайте новый слой “Shadow Highlight” под слоем “Button Sides”. Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) с радиусом 4 пикселя в режиме контуров создайте фигуру в центре кнопки, как показано ниже. Перейдите в режим Перспективы (Transform – Perspective) и потяните один из верхних углов в сторону угла кнопки. Когда закончите, нажмите Enter.


Навигационная панель


Шаг 12
Превратите контур в выделение (Ctrl+Enter) и создайте слой-маску (Layer Mask). Выберите инструмент Кисть (Brush Tool) с мягкими краями и белым цветом нарисуйте маленькое свечение в правом нижнем углу. Потом чёрным цветом нарисуйте тень в левом нижнем углу. Установите Заливку (Fill) слоя – 30%. Мягким ластиком можете смягчить края тени и свечения.


Навигационная панель


Шаг 13
Создайте новый слой (Create New Layer) поверх остальных и назовите его “Light Off”. Установите цвет заливки - #98999. Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) с радиусом 2 пикселя в режиме фигур создайте маленький световой индикатор кнопки:


Навигационная панель


Шаг 14
Примените к нему стиль Внутренняя тень (Layer Style - Inner Shadow):

Режим – Умножение


Навигационная панель


Шаг 15
Выберите инструмент Горизонтальный текст (Horizontal Type Tool) и настройте шрифт, как показано ниже. Я использовал “Apple Symbols”. Напишите название раздела на кнопке.


Навигационная панель


Шаг 16
Выберите все слои с кнопкой и объедините их в группу (Ctrl+G). Сделайте копию группы, передвиньте её вправо и измените текст. Нужно создать 5 кнопок.


Навигационная панель


Ша 17
Далее переходим к полю поиска. Создайте новый слой (Create New Layer) над всеми слоям и назовите его “Search Field”. Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) с радиусом 5 пикселей создайте такое же по размеру поле поиска, как в оригинале навигационной панели. Поместите его в нужное место и примените к нему стиль Внутренняя тень (Layer Style - Inner Shadow):

Режим – Умножение


Навигационная панель


Применённый стиль тени добавит глубины поисковой строке.


Навигационная панель


Шаг 18
Инструментом текста напишите “Enter your search here” цветом #005d86. Я использовал шрифт “Arial Narrow” размером 15 пикселей с трекингом 35.
Потом примените стиль Отбрасывание тени (Layer Style - Drop Shadow) и установите Заливку (Fill) слоя – 90%.


Навигационная панель


Шаг 19
Теперь создадим небольшую кнопку, находящуюся в поисковой строке. Создайте новый слой “Search Field” над слоем “Search Field”. Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) с радиусом 2 пикселя создайте маленький квадрат цветом #f4f4f4, как в оригинале. Примените к нему стиль Внутреннее свечение (Layer Style - Inner Glow):

Режим – Нормальный, Метод – Мягкий


Навигационная панель

Навигационная панель


Шаг 20
Напишите “TOP”, используя шрифт Kroeger 0855.


Навигационная панель


Шаг 21
Перейдём к созданию кнопки поиска. Создайте новый слой “Search Button” и инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) с радиусом 5 пикселей создайте фигуру цветом #1988AF, как в оригинале.


Навигационная панель


Шаг 22
Добавьте текст на кнопку, шрифт “Apple Symbols” размером 20 пикселей, трекинг (-10).


Навигационная панель


Шаг 23
Потом примените стиль Внутренняя тень:

Режим – Линейный осветлитель


Навигационная панель


Шаг 24
Теперь нужно создать свечение в стиле Web 2.0 для кнопки поиска. Создайте новый слой “Search Button Highlight” и сделайте выделение слоя с кнопкой (Ctrl+Click).


Навигационная панель


Шаг 25
Установите цвета по умолчанию (D) и инвертируйте их (X). Выберите инструмент Градиент (Gradient Tool): стиль – линейный, цвет – от заливки к прозрачному. Потом сделайте заливку сверху вниз внутри выделения:


Навигационная панель


Шаг 26
Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение на половину кнопки и нажмите Delete.


Навигационная панель


Я вставил другой логотип слева и получился такой результат:


Навигационная панель



PSD файл можете скачать тут



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

написал : _DnB_

Клево

---------------


написал : danila_masters

напишите пожалуйста более подробно шаг 10, а именно создание слой-маски

---------------


написал : positive11

Сделайте выделение слоя “Button” (Ctrl+Click) и создайте новый слой (Create New Layer) “Button Sides”. Кликните на этом новом созданном слое, чтобы перейти на него, и внизу палитры слоёв кликнитн на иконку создания маски слоя. .

---------------


написал : danila_masters

А как именно сделать маску слоя, чтобы она была точно такаяжа на рисунке(чорный фон и белый прямоугольник на нём).а так делаю слой маску, всё получается, но когда беру кисть и начинаю рисовать точки удерживая шифт, то линии нивидны.

---------------


написал : positive11

Там не нужно рисовать ничего.
это, можно сказать, финт такой в фотошопе. Когда делаете выделение слоя "Button", а потом к верхнему слою добавляете маску, то она автоматически закрашивает чёрным все области вне выделения, а выделенная область будет белой на маске.
всё автоматом должно получиться, ничего рисовать не нужно.

---------------


написал : danila_masters

у меня вот возник вопрос к шагу 17.
я делаю закруглную прямоугольную областьи у меня в фотошопе автоматом включается векторная маска, при её удалении у меня полностью заливается весь документ тем цветом, каким у меня залит прямоугольник.
помогите пожалуйста как эту прпоблему решить? может у меня фотошоп старый?

---------------


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

Ваше Имя

Ваш E-mail

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

Введите код: