Рубрика: Photoshop Уроки | Урок прочитали: 609
 (голосов: 0)

Рисуем кнопку для сайта в Фотошоп


alt



Шаг 1. Создайте новый документ 102*50 пикселей. Фон залейте цветом  #838383. Выберите инструмент Rounded tool (Прямоугольник со скругленными краями). Установите следующие настройки:





Измените фоновый цвет на #111111 . Начертите прямоугольник так, чтобы он вписался в размер холста. 







Шаг 2. Щелкните дважды на слое с прямоугольником и примените следующие стили слоя:



Drop shadow (тень):





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





Bevel and Emboss (тиснение/скос)





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





Stroke (обводка)





Результат:





Шаг 3. Выберите инструмент Pencil (карандаш) с размером 2 пикселя.  Измените основной цвет на  #eee1cd. Сделайте горизонтальную линию поперек вашего прямоугольника.





Примените следующие стили слоя:



Inner shadow (внутренняя тень)





Outer glow (внешнее свечение)





Результат:





Шаг 4. Убедитесь, что слой с линией все еще активен. Выполните команду  Layer > Layer Mask> Reveal All (Слои > Слой-маска > Показать все). Выберите инструмент Gradient (Градиент) и установите следующие настройки:





Примените градиент как показано на рисунке:





Ваш результат:





Шаг 5. Выберите инструмент Pen (Перо) и создайте форму, как показано на рисунке.





Выполните команду Filter> Blur >Gauassian  blur (Фильтры > Размытие > Размытие по Гауссу) с радиусом 0.6 пикселя.



Шаг 6. Активируйте слой с прямоугольником.





Выделите содержимое этого слоя. Для чего зажмите CTRL и щелкните на символе маски.





Инвертируйте выделение (SHIFT + CTRL + I). Вернитесь на слой с фигурой, которую вы рисовали пером. Удалите выделение. Уберите выделение (CTRL + D).

Ваш результат:





Шаг 7. Дублируйте слой и расположите его симметрично.





Шаг 8. Сделайте активным слой с прямоугольником и выделите его содержимое. Создайте новый слой над слоем с прямоугольником и выполните команду Edit > Stroke (Редактировать > Выполнить обводку). Настройки показаны на рисунке.





Уберите выделение. Выполните команду “Layer> Layer Mask> Reveal All” (Слои > Слой-маска > Показать все). Выберите инструмент “Gradient” (Градиент). Создайте градиент как показано на рисунке.





Ваш результат (после уменьшения непрозрачности (Opacity) до 75%):





Шаг 9. Теперь создайте текст. Определитесь, что вы хотите написать. Цвет текста - #e7e7e7. Слово site на рисунке залито белым цветом.





Примените к слою следующие стили:



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





Stroke (обводка)





Результат:





Перевод: Гревцов Никита.

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

           

Похожие файлы и публикации:

Рисуем кнопку для сайта в Фотошоп
Шаг 2. Создайте новый слой и назовите его “camera2”. Выделите содержимое слоя “camera1” (CTRL + клик по миниатюре слоя). Выполните команду “Select > Modify > Contract” (Выделение > Модификация > Сжать). Установите сжатие в 7 пикселей. Залейте выделение цветом.
Рисуем кнопку для сайта в Фотошоп
Шаг 1. Создайте новый документ 512x512 пикселей с белым или прозрачным фоновым слоем. Залейте фоновый слой серым (9D9D9D). Создайте вертикальную и горизонтальную направляющие для удобства.
Рисуем кнопку для сайта в Фотошоп
В этом уроке Вы научитесь создавать оригинальные веб - кнопки для сайта.
Рисуем кнопку для сайта в Фотошоп
В этом уроке мы научимся рисовать губную помаду. Вот, что у нас получится.
Рисуем кнопку для сайта в Фотошоп
В этом уроке будем учиться создавать креативный дизайн для блога.
Рисуем кнопку для сайта в Фотошоп
В данном уроке мы будем учиться создавать информационный блок для сайта.
Рисуем кнопку для сайта в Фотошоп
Шаг 1. Давайте начнем, создайте новый файл. Я использовал размер 600×500  пикселей в 72 пикс/дюйм, и я залил черным цветом. Теперь создайте новый слой и назовите это ‘‘Темный текст’’. После выберите инструмент Horizontal Type Tool (Горизонтальный текст), устанавливаете шрифт Arial, размер - 150 pt, цвет - черный.
Рисуем кнопку для сайта в Фотошоп
В этом уроке мы будем рисовать прикольный текст в фотошопе.
Рисуем кнопку для сайта в Фотошоп
Сегодня мы будем рисовать вот такого жучка.
Рисуем кнопку для сайта в Фотошоп
Итоговый результат:
Рисуем кнопку для сайта в Фотошоп
Этот урок по Фотошопу покажет вам, как сделать дизайн сайта или портфолио.
Рисуем кнопку для сайта в Фотошоп
Шаг 1. Создайте новый документ размером 500px на 400px с разрешением 72 dpi в режиме RGB.
Рисуем кнопку для сайта в Фотошоп
Шаг 1. Создайте новый документ. Дважды щелкните на фоновом слое, чтобы открыть стили слоя. Выберите Gradient Overlay (наложение градиента) и используйте черный и темно-синий цвет. Выберите радиальный стиль градиента.
Рисуем кнопку для сайта в Фотошоп
В этом уроке, я покажу Вам, как создать иконку адресной книги с помощью Фотошопа. Давайте начнём!
Рисуем кнопку для сайта в Фотошоп
Если вы хотите знать, как сделать выразительные обои, тогда почитайте этот Photoshop урок.
Рисуем кнопку для сайта в Фотошоп
Программа Photoshop – фантастическая программа, с помощью которой можно обрабатывать не только фотографии, но и создать реальные объекты. В сегодняшнем уроке, мы продемонстрируем, как создать изображение реалистичного ножа похожего на фотографию в программе Photoshop, используя векторные инструменты для рисования, стили слоя, текстуры, и эффекты.
Рисуем кнопку для сайта в Фотошоп
В этом уроке мы будем создавать дизайн шаблона для автомобильного сайта в тёмных цветах.