Dimezis Designs

Суббота, 23.11.2024, 02:42
Приветствую Вас Гость

Регистрация
Вход

Уроки Фотошоп


Главная » Статьи » Веб-дизайн

Делаем стильное техно-меню на сайт
В этом уроке Вы научитесь делать стильное техно-меню для своего сайта.

Давайте начнём с создания нового документа, нужного вам размера (Автор выбрал 160х220), неважно с каким фоном. Теперь, возьмите Rectangular Shape Tool и создайте прямоугольник высотой в 40px и длиной 160 px. Цвет опять же роли не играет, так как мы используем стили слоя:

Создайте новый холст 6х5 пикселей(без фона), выберите Pencil Tool (Master Diameter is 1px) с цветом # 939393, и сделайте две точки, как  на рисунке:

Дальше делаем Edit > Define Pattern, далее введите любое имя и нажмите ОК. После этого, верёмся в первый документ, сделаем выделение вокруг нашего прямоугольника с мощью Ctrl + click на картинке слоя(с прямоугольником), создадим новый слой(назовём его Pattern), и потом Edit > Fill:

После заливки, Filter > Blur > Gaussian Blur с радиусом 0,3px и нажмите ОК. В результате выйдет что-то подобное этому:

Теперь создайте новый слой, выберите Pencil Tool (Master Diameter is 2px), цвет #696969 и нарисуйте линию внизу прямоугольника. Поменяйте цвет на #808080 и нарисуйте линию вверху нашего прямоугольника. Как на рисунке:

Выберите ваши три слоя и сгруппируйте их с помощью клавиш Ctrl + G. Скопируйте их, нажав кнопку Alt и переместив немного ниже. Сделайте 5 таких копий и расставьте их, так как показано на рисунке:

Выберите прямоугольник во второй группе и присвойте ему следующие параметры в стилях слоя.

В той же группе выберите слой "Pattern" и примените к нему следующие настройки: color overlay # ffffff и поставьте opacity(прозрачность) 25%.

Так будет выглядеть кнопка, когда на неё наводят указатель, но это не всё:

В той же группе №2 создайте новый слой, выберите Pencil Tool (Master Diameter is 1px) установите цвет # ffffff (белый) и нарисуйте что-то на подобии стрелочки, и разместите её так как показано на рисунке:

Теперь выберите пиксельный шрифт (автор использовал Alaska font) и напишите своё меню. Вот и всё

(на основе материалов с http://udf.su/)

Категория: Веб-дизайн | Добавил: Dimezis (10.06.2009)
Просмотров: 601 | Комментарии: 1 | Теги: веб-дизайн, уроки, photoshop, меню | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Меню сайта
Форма входа
Категории раздела
Cтатьи [4]
Видео-уроки Photoshop [3]
Интересное [3]
Коллажирование [4]
Текстовые эффекты [6]
Обработка фото [14]
Спецэффекты [8]
Веб-дизайн [3]
Поиск
Наш опрос
Чего нужно больше на сайте?
Всего ответов: 38
Друзья сайта
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • Инструкции для uCoz