Красивые меню и кнопки

В этом уроке фотошопа я собираюсь научиться вас создавать красивые панели и кнопки для вашего сайта. Этот стиль распространен сейчас на просторах Интернета.




Создание меню:

Шаг 1:

Открываем свежий документ, устанавливаем ююбой размер, я выбрал 600x300px, потому что он хорошо вписывается в экран. Заливаем фон светло-серым цветом. Я использовал цвет #e5e5e5.




Шаг 2:

Создаем новый слой и устанавливаем цвет переднего плана #3e3e3e. Теперь возьмите инструмент rectangle tool с радиусом 5px. Создаем прямоугольник с закругленными краями, ширина должна соответствовать ширине будущей панели, а высота - 100px. Высота не должна быть точно такой, мы будем её обрезать.



Шаг 3:

Берем инструмент marque tool и создаем рамку вокруг больше части прямоугольника (оставляем около 60px вверху). Нажимаем кнопку delete.



Шаг 4:

Теперь давайте применим стили слоя stroke и gradient overlay к нашей панели. Открываем настройки стилей слоя blending options и используем следующие настройки.







Шаг 5:

Отлично, теперь, когда мы создали базу, давайте добавим полоску, чтобы заставить это все засиять. Создаем новый слой и увеличиваем масштаб, пока вы не увидите отдельные пиксели. Теперь берем инструмент pencil tool, выбираем размер 1рх и берем белый карандаш. Теперь мы будем рисовать обводку в один пиксель по всему верху (1 пиксель ниже) и вокруг углов. Посмотрите на картинку, и вы поймете, что я имею в виду.





Шаг 6:

Устанавливаем режим отображения слоя с белыми полосками на overlay и уменьшаем непрозрачность, как это необходимо.



Шаг 7 (необязательныйl):

Теперь у нас закончена базовая панель. На данном этапе вы можете добавить детали, чтобы она выглядел немного по-другому. Настройки стиля слоя Drop shadow с pattern overlays как правило работают отлично! Представляю вашему вниманию несколько вариантов:

Drop Shadow:



Pattern Overlays:











Вы также можете изменить цвета. Практически любой цвет будет хорошо смотреться. Я буду использовать различные цвета для кнопок.

Панель навигации:

Отлично, если вы хотите превратить панель в панель навигации, то всё, что вам нужно, это добавить разделители по 2рх и текст.

Шаг 1:

Создаем новый слой, увеличиваем масштаб и рисуем разделитель, как я показываю на картинке ниже:



Шаг 2:

Устанавливаем режим отображения слоя overlay и снимаем непрозрачность до 15%.



Шаг 3:

Решаем, сколько ссылок навигации нам необходимо, и делим панель на такое количество секций. Моя панель очень короткая, поэтому я их добавляю всего несколько.



Шаг 4:

Добавляем текст.



Создание кнопок:

Чтобы создать кнопки вы будете использоваться такую же технику, только нижние углы тоже будут закруглены.
Вот как это будет выглядеть:



Итак, это всё! Вот как выглядит мое окончательное изображение:



Перевод урока сделан для photoshoplove.ru
Оригинал урока http://crypticgfx.com/