Создать кнопку для сайта в photoshop

Добрый день уважаемые читатели! Сегодня я хочу предоставить вам возможность сами создать кнопку для сайта в фотошопе. Когда я начинала со своим партнером самостоятельно писать сайт, то мы сталкнулись с проблемой создания всяких красивостей для проекта. И первое, что мне пришлось делать это была простая кнопка, располагающаяся в статье. Так вот если вы сталкнулись с подобной ситуацией, то специально для вас  я посвящаю данный пост, где и расскажу подробно как создать кнопку для сайта.

Для начала естественно желательно запустить программу фотошоп и создать новое изображение с параметрами:
размер 700х300 рх
разрешение 72
цветовой режим — RGB COLOR
фон — прозрачный

Затем с помощью инструмента  «Овальное выделение» в центре файла сделаем овал

Далее выбираем Инструмент «Заливка» устанавливаем в качестве основного цвета в цветовой палитре необходимый цвет и заливаем выделенную область. Применив инструмент «Заливка» снимаем выделение и применим к слою «Стиль слоя». Только предварительно необходимо в «Параметрах наложения» в „Дополнительных параметрах“установить непрозрачность равную „0“.

И вот после этого можно приступить уже к применению стилей слоя. Первым делом выбирем стиль «Внутреннее свечение» И установим  для него следующие параметры:

режим — осветление
непрозрачность — 75%
направление — на краях
метод — мягкий
размер — 70
стягивание -20

Следующий стиль, который будет нам необходим это «Наложение градиента» с параметрами:

режим — нормальный
стиль — линейный
угол — 90*

И в завершении к нопке добавим стиль «Обводка». Для этого стиля необходимо будет установить следующие параметры:

размер — 1 пиксель
расположение — снаружи
цвет — конрастный основному

И вот только теперь можно нажать на Ок. Для продолжения работы создаем новый слой и он у нас активный. Удерживая нажатой на клавиатуре клавишу Ctrl щелкаем по первому слою , то есть слою с овалом.

После этого овал выделится

Теперь для добавления небольшого объема кнопке выбираем инструмент «Овальное выделение» нажимаем Alt и вычитаем из нижней части овала часть.

После вычитания у вас должно получиться следующее

К данной выделенной области следует применить «Градиентную заливку» линейного типа, от основного к к прозрачному. При этом основной цвет белый.И проводим от верхней части выделения к середине.

После применения инструмента «Градиентная заливка» у вас получится подобное изображение

Теперь снимаем выделение. Потом выбираем инструмент «Текст» и пишим слово, любое. Цвет выбираем контрастный с фоном. Затем к слою с текстом применим  два «Стиля слоя»

«Тень»
режим наложения — умножение
непрозрачность — 75%
угол  145*
смещение -7
размер -2

«Тиснение»
стиль — внутренний скос
метод — плавный
глубина -100
направление — вниз
размер -5

Нажимаем Ок. И сохраняем  кнопку  с расширением .gif

Вот и все, самая элементарная кнопка для сайта готова. Если вам что — то стало не понятно из объяснения или нет желания читать вы можете посмотреть видео запись по созданию такой кнопки
[youtube]ulWelih_O9s[/youtube]

Если вы не хотите пропустить появление новых материалов на блоге «Seo записки отчаянной«,  то предлагаю подписаться на обновления в удобной для вас форме.

Удачи!

Вам понравилась статья? Расскажите о ней друзьям!