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





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

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


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

Подсказка

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

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

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

Стильное чёрное меню


Загрузите эти элементы:

Деревянная текстура[/b]
[url=http://blog.twg.ca/2009/09/free-iphone-toolbar-icons/]Набор иконок



Шаг 1 – Создание нового документа
Создайте новый документ с такими параметрами:

Стильное чёрное меню


Шаг 2 – Добавление направляющих
Чтобы было удобнее при расположении меню, добавим направляющие. Перейдите в меню Просмотр»Новая направляющая (View > New Guide):

Стильное чёрное меню


Нужно создать 4 вертикальные направляющие на отметках: 250, 300, 360, 550 пикселей. И две горизонтальные на отметках: 100 и 510 пикселей.

Шаг 3 – Создание тёмного деревянного фона
Этот шаг не обязательный. Я собираюсь создать фон для меню. Откройте деревянную текстуру в Photoshop и перетащите в наш документ. Инструментом Свободное трансформирование (Free Transform) измените размер слоя, можно просто понизить высоту и ширину в настройках сверху до 32%. Потом обесцветьте слой (Desaturation).

Стильное чёрное меню


Сделаем текстуру немного темнее. Создайте новый слой (Create New Layer) над деревянной текстурой и назовите его “Black”. Залейте его чёрным цветом, используя инструмент Заливка (Paint Bucket Tool). Понизьте Непрозрачность слоя до 20%.

Стильное чёрное меню


Шаг 4 – Основание меню
Создайте новый слой над слоем “Black” и назовите его “Body”. Выберите инструмент Прямоугольник с закруглёнными углами (Rounded Rectangle Tool) с радиусом 5 пикселей и создайте фигуру чёрного цвета. Используйте направляющие, чтобы определить границы.

Стильное чёрное меню


Шаг 5 – Стилизация основания для меню
Перейдите в меню Стилей слоя “body” (Layer Style - Blending Options) и настройте так:

Внутренняя тень:

Стильное чёрное меню


Внешнее свечение:

Стильное чёрное меню


Обводка: Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет

Стильное чёрное меню


Понизьте Непрозрачность слоя до 80%.

Стильное чёрное меню


Шаг 6 – Создание кнопок меню
У нас будет 7 кнопок меню, а верхняя будет самой узкой. Создайте новую группу (Create New Group) и назовите её “Buttons”. Сделайте выделение слоя “Body” (Ctrl+Click), создайте новый слой внутри новой группы и назовите его “Top”.

Стильное чёрное меню


Инструментом Прямоугольная область (Rectangular Marquee Tool) отсеките нижнюю часть выделения. Это делается созданием выделения той области, которую хотите убрать, при этом удерживая Alt.

Стильное чёрное меню


Залейте выделение чёрным цветом.

Стильное чёрное меню


Примените стиль Наложение градиента (Layer Style - Gradient Overlay):

Стильное чёрное меню

Стильное чёрное меню


Понизьте Непрозрачность слоя до 15%.

Стильное чёрное меню


Теперь создадим остальные кнопки. Начнём с “About Me”. Создайте новый слой под слоем “Top” и назовите его “About me”. Создайте выделение, показанное ниже, как мы делали это ранее (отсечением).

Стильное чёрное меню


Залейте выделение чёрным цветом.

Стильное чёрное меню


Скопируйте стиль наложения градиента со слоя “Top” на этот слой. Понизьте Непрозрачность до 15%.

Стильное чёрное меню


Сделайте несколько копий слоя “About me” и расположите их друг под другом.

Стильное чёрное меню


Шаг 7 – Добавление текста
Сверните группу “Buttons” и создайте новую группу “Text” над ней. Установите цвет заливки – белый и выберите инструмент Горизонтальный текст (Horizontal Type Tool), шрифт – “Tahoma”, Bold, размером 6,4pt, Чёткое (Crisp). В центре верхней кнопки напишите название сайта.

Стильное чёрное меню


Перейдите в меню Стилей слоя и настройте так:

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

Стильное чёрное меню


Внутренняя тень: Режим – Перекрытие

Стильное чёрное меню


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

Стильное чёрное меню

Стильное чёрное меню


Сделайте копии слоя с текстом для всех кнопок и просто измените текст каждой из них. Выровняйте названия остальных кнопок по третьей вертикальной направляющей.

Стильное чёрное меню


Шаг 8 – Добавление иконок
Из загруженного набора выберите эти иконки:

icon_user.png
icon_smile_face.png
icon_pencil.png
icon_blog.png
icon_favorities.png
icon_post.png

Откройте их в Photoshop.

Стильное чёрное меню


Перетащите в наш документ и выровняйте по второй направляющей слева.

Стильное чёрное меню


Изображение в оригинальном размере можете посмотреть здесь.




Обсудить данный урок на форуме




PSD файл

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