Web-дизайн в Photoshop: Дизайн кнопки для сайта в стиле Web 2.0

|

15 Ноя 2009

|

1 комментарий

Несомненно, одним из наиболее важных элементов дизайна сайта является навигация. Зачастую она состоит из красивых кнопок. В этом уроке Вы создадите чистую кнопку с притягивающим дизайном в стиле Web 2.0.

Шаг 1 – Создание основы

Начните с создания нового документа. Вы можете использовать любой нужный размер, для этого урока попробуйте 500х500px.

Установите цвет переднего плана (Foreground Color) на темно-серый (#191919) и, используя инструмент Paint Bucket Tool, залейте документ цветом.

Теперь, создайте новый слой и нарисуйте черный прямоугольник с помощью инструмента Rectangle Tool. Это будет сама кнопка. Затем создайте еще один слой и переместите его под слой с кнопкой. Установите цвет переднего плана на #0090ff и также инструментом Rectangle Tool нарисуйте прямоугольник. Эта фигура должна быть немного уже, чем кнопка, но и немного выше её. Должно получиться нечто подобное:

Шаг 2 – Добавление стилей

Теперь необходимо добавить несколько стилей к слою с синим прямоугольником. Для этого кликните правой клавишей мыши на слое в палитре слоев и выберите Blending Options.

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

Нажмите ОК, чтобы сохранить изменения.

Также нажмите правой клавишей мышки на слой с Вашей кнопкой (черный прямоугольник) и выберите Blending Options. Примените следующие параметры:

Нажмите ОК.

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