worklLesson Работа с текстом Работа с фото Эффекты Дизайн/Рисование Анимация Коллажи Практические уроки Фотошоп Online

Как сделать круглую кнопку для сайта в фотошопе

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

Итак, как нарисовать круглую кнопку для сайта в фотошопе? Начнем с кнопки для переключения слайдера. Если вы интересуетесь дизайном сайтов, думаю, вы уже заметили, что подобные кнопки встречаются довольно часто. Простые и незамысловатые, но, тем не менее, стильные.

Приступим. Создаем новый документ. 200 на 200 пикселей нам вполне хватит.

Увеличим масштаб документа до необходимых размеров. Так, чтобы было удобно.

Создаем новый слой с помощью вкладки «Слои» на верхней панели.

На панели инструментов выбираем «Инструмент овальная область». И удерживая кнопку «shift», рисуем выделенную область. Кнопка «shift» позволит нам сделать окружность.

На верхней панели выбираем вкладку «Редактирование» - «выполнить обводку».

Цвет #2be8c3. Устанавливает параметры: ширина 10 пикселей, расположение – снаружи.

Снимем выделение.

Создаем новый слой. И возвращаемся на панель инструментов. Теперь нам нужен инструмент «многоугольник». Устанавливаем следующие настройки:

Вот такой треугольник у нас получился. Теперь мы можем уменьшить его размеры и перетащить его в центр кнопки. В этом нам поможет инструмент перемещение. Кликаем по фигуре и, удерживая «shift», изменяем размеры треугольника. Затем перемещаем его в центр.

Потянув за уголок, вращаем изображение и ставим треугольник в центр окружности.

Теперь нам остается только растрировать слой. Инструмент «растрирование» ищем в окне «Слои».

Вот такая замечательная кнопка переключения у нас получилась.

При желании вы можете изменить размер треугольника, толщину окружности и выбрать любой понравившийся цвет.

Попробуем немного усложнить элемент. В окне «Слои» выбираем «Параметры наложения».

Нас интересует вкладка «Тиснение». Устанавливаем следующие параметры:

Проделываем те же манипуляции со слоем с окружностью.

Наша кнопка стала более объемной.