Главная >> Кнопки >> Мини-навигация для сайта

Мини-навигация для сайта

Автор: Артемий   
17.02.2007 16:35

В этом уроке мы с вами будем создавать навигацию для сайта.

Шаг 1.

Начнем наш урок с создания документа 150x200.

Шаг 2.

{mosgoogle}
Для начала, нам надо задать в качестве заднего фона темно коричневый цвет. Возьмем "Paint Bucket Tool," и изменим наш первый цвет на темно-коричнвый. Теперь кликнем один раз в любом месте нашего документа для заливки.

Шаг 3.

Создадим выделение с помощью "Marquee Selection Tool." Убедитесь, что оно равно 148x98. Создаем выделение кликая в любое место нашего документа. Затем выровняем наше выделение по центру при помощи стрелок на клавиатуре как показано выше.  Когда сделаете - смело заливайте это выделение оранжевым цветом в новом слое. Это будет наша база для всей навигации.

Шаг 4.
Сделаем другое выделение. В этот раз размер будет 12x12. На новом слое зальем это выделение темно-оранжевым или красным, как вам нравится. Убедитесь, что выделение находится по центру (можете двигатьего или мышкой или стрелками на клавиатуре).

Шаг 5.
С помощью "Horizontal Type Tool," кликните в любом месте документа. Когда текст можно будет вводить нажмите на клавиатуре :alt+0187 (номера на калькуляторе справа.) Это поможет сделать вам двойную стрелочку (»). Теперьс делайте его черным и выровняйте по центру таким же способом, как мы делали немного выше.

Шаг 6.

Создадим еще одно выделение как на картинке. Необходимо добиться того. чтобы слева, сверху и справа был отступ в один пиксель. Теперь на новом слое с помощью "Gradient Tool" , сделайте градиент от верхней границы к нижней используя градинет от белого к прозрачному. Это позволит сделать некоторое свечение как на картинке снизу.

Шаг 7.

Правый щелчок мышки по нашему базовому слою. Окей, кликнули правой кнопкой и выбрали blending options. Изменим настройки как на картинке. После того как сделаете это, надо соединить все слои воедино, для этого выделим все слои, нажмем правой кнопкой и выберем "Merge Layers."

Шаг 8.

Добавим текст в наш блок с помощью "Horizontal Type Tool." Я использовал Arial с размером в 10px и без anti-aliasing. Набрал "Home," а вы что хотите.

Шаг 9.

Копируем слои, перемещаем новые блоки с расстоянием 1 пиксель между ними, изменяем текст - и наша навигация готова!

 

Автор - http://www.upupmedia.com/

Перевод - http://graphic-tutorials.ru/

Обсуждение - на форуме.

Комментарии (1)


Показать/скрыть комментарии
...
Прикольно нарисовалиsmilies/smiley.gif) теперь остлось только все эти рушики повесить на рабочий код, можно сюда http://cleverscript.ru/index.p...emooslider это плагин навигации по страницам сайта, написан на фреймверке MooTools, все подробно описано.
Эйяфьятлайокудль , 14-05-2010

Написать комментарий

меньше | больше

busy