|
Написал Administrator
|
|
Приветствую вас на новом уроке. Сегодня я научу вас делать отличную кнопочку для навигации сайта. Она будет выглядеть так. И так начнем:
Создайте новое изображение в PhotoshopРазмер: 500х500 Цвет фона: #333333 Выбирите Rectangle Tool и нарисуйте небольшой прямоугольник.
Добавьте следующий стиль, для нашего слоя Получаем такой результат
Теперь выберите еще раз инструмент Rectangle Tool и нарисуйте немного меньший прямоугольник. Теперь выберите Rounded Rectangle Tool, установити радиус 4 px и нарисуйте еще одну форму. Я нарисовал ее красным цветом, для того чтобы вам было более понятно что я делаю. В последующем мы удалим этот слой. Далее делаем следующее: Идем Layer > rasterize > Shape После Select > Load selection
Теперь удалите красный слой, простым притягиванием его в корзину. После того как вы удалите слой, получится следующее изображение. Сделайте инверсию выделения. Это можно сделать нажатием на сочетание клавиш CTRL+SHIFT+IТеперь выберите второй слой, с белым прямоугольником и идем вот сюда Layer > rasterize > Shape Нажмите клавишу Delete. Теперь снимаем выделение CTRL+D
Стиль этого слоя делаем как показано на картинках.
Получаем такой результат. 
Выбираем инструмент Line tool, установите ширину 1 px и проведите сплошную линию. Цвет выбираете такой, который вам больше нравится. 
Теперь делаем второю линию, тем же самым инструментом, но на этот раз установите ширину 2 Px Для этих двух линий добавляем следующий стиль слоя.
Должно получится что то вроде этого Теперь добавляем текст к нашей кнопке
С помощью инструмента Rounded rectangle tool, добавляем последнюю деталь.
Сейчас нужно выделить все слои с голубым цветом, и нажать клавиши CTRL+E (Это объединит все наши слои в один) Теперь обрезаем остатки, как показано на рисунке и все. Кнопка готово.
Вот наш конечный результат. |
