Отправляет email-рассылки с помощью сервиса Sendsay

Photoshop Zona

  Все выпуски  

Photoshop Zona Глобус кнопки для вашего сайта




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

Шаг 1. Создайте новый документ размером 500×300 и заполните его белым цветом. Затем выберите Прямоугольник со скругленными углами (Rounded Rectangle Tool)(Радиус (Radius): 30 пикселей) и нарисуйте следующую фигуру, используя цвет #d61d23.



Шаг 2. После этого примените следующие стили слоя к этому слою:

Внутренняя тень (Inner Shadow)



Наложение градиента (Gradient Overlay)



Ваша кнопка должна выглядеть так:



Шаг 3. Теперь пришло время, добавить отражение кнопке. Дублируйте текущий слой с помощью Ctrl + J, а затем создайте новый и объедините его со скопированным слоем, чтобы получить все стили слоя в один слой. После этого переверните его с помощью Редактирование-> Трансформирование-> Отразить по вертикали (Edit-> Transform-> Flip Vertical), как на картинке ниже.



Шаг 4. Чтобы сделать отражение более ярким, в нижней части изображения применим режим Быстрой маски (Quick Mask Mode) с градиентом, как показано ниже:



Шаг 5. Затем вернитесь в стандартный режим. Теперь у нас есть выделенная область. Нажмите клавишу Delete, чтобы очистить изображение в выделенной области.



Шаг 6. Снимаем выделение с помощью Ctrl + D. Переходим к следующему шагу. Теперь добавим несколько бликов на кнопку. Для этого выберите Прямоугольник со скругленными углами (Rounded Rectangle Tool) (Радиус (Radius): 80 пикселей) и создайте новую фигуру с помощью белого цвета.



Шаг 7. Растрируйте (Rasterize) этот слой с помощью Слой-> Растрировать-> Фигуру (Layer-> Rasterize-> Shape). После этого применяем режим Быстрой маски (Quick Mask Mode) еще раз и заполним градиентом:



Шаг 8. Вернемся в стандартный режим, мы получили выделенную область снова. Нажмите клавишу Delete, чтобы очистить выделенную часть изображения.



Шаг 9. Снимите выделение с помощью Ctrl + D и измените режим слоя на Перекрытие (Overlay) для текущего слоя.



Шаг 10. Мы закончили с кнопкой. Теперь, переходим к следующему шагу. Я думаю, она будет выглядеть лучше, если мы поместим некоторые элементы дизайна на нее. Для этого активируйте инструмент Эллипс (Ellipse Tool) и создайте округлую форму, как на картинке ниже, используя белый цвет:



Шаг 11. После этого примените стили слоя к этому слою:

Внутренняя тень (Inner Shadow)



Внутреннее свечение (Inner Glow)



Наложение градиента (Gradient Overlay)



Обводка (Stroke)



Вот что должно получиться.



Шаг 12. Теперь мы добавим элемент (глобус) на нашу кнопку. Если у вас нет подходящего изображения, можете использовать Это. Откроем его и немного уменьшим, затем поместим изображение как показано на картинке ниже.



Шаг 13. Хорошо, а теперь сделаем его черно-белым с помощью Изображение-> Коррекция-> Обесцветить (Image > Adjustments > Desaturate) (Ctrl + Shift + U) и измените режим слоя на Перекрытие (Overlay) для этого слоя:



Шаг 14. Выберите инструмент Резкость (Sharpen Tool) (Кисть (Brush): 100 px, Режим (Mode): Нормальный (Normal), Жесткость (Strength): 40%), чтобы улучшить резкость этого фрагмента.



Шаг 15. И последнее, что мы должны сделать, чтобы закончить с этим уроком, это добавить текст. Активируйте инструмент Горизонтальный текст (Horizontal Type Tool) и напишите то, что вам необходимо, как на картинке ниже, белым цветом, Шрифт Arial Black.



Шаг 16. После этого примените следующий стиль слоя к этому слою:

Тень (Drop Shadow)



Теперь у нас есть что-то вроде этого.



Отлично! Наша работа сделана! Наслаждайтесь своими кнопками. Также вы можете изменить их цвет.



Автор: photoshopstar

Автор/Переводчик: Артеменко Любовь

Сложность: Легкая

Ссылка на источник

Урок подготовлен для Вас командой сайта www.photoshop-zona.ru

В избранное