Кнопка "Контакты"

Стильная кнопка "Контакты"



Давайте попробуем создать стильную кнопочку "Контакты", которую можно установить в шапке сайта или в футере (подвал сайта). Кнопка будет иметь такой вид:
Делать такую кнопку будем в программе Фотошоп. В программе создаём документ размером 150х150 рх. Потом размер подгоним до необходимого.






Теперь поработаем со стилями слоя и окраской будущей кнопки:

Тень


Наложение градиента. Цвет подбирайте по своей необходимости:


Обводка:


В результате у нас получается вот такая заготовка:




Дальше будем рисовать конверт. Для удобства с помощью инструмента "Масштаб" увеличим изображение. Создаём новый слой Для начала выставим основной цвет Белый и инструментом "Прямоугольник" нарисуем форму конверта:


Открываем окно "Стиль слоя" и выставляем некоторые значения:

Тень:


Внешнее свечение:


Обводка:


Кнопка приняла следующий вид:


Создайте новый слой, выставьте основной цвет Черный и включите инструмент "Линия"



Установите толщину линии:


С помощью инструмента "Линия" нарисуйте образ конверта:



И осталось сделать надпись на кнопке "Контакты", используя инструмент "Горизонтальный текст":



Можно текст немного украсить, поработав в окне "Стиль слоя":

Внутренняя тень:


Наложение градиента:


Обводка:


В результате текст немного преобразится:



Теперь остаётся изменить размер кнопки до нужного. Для этого пройдите в меню "Изображение"==>"Размер изображения" и выставить нужные размеры кнопки или можно воспользоваться способом трансформирования - клавиши CTRL + T. Кнопку можно вставить в шапку сайта, в футер или на любых страницах как кликабельную картинку. Кто не знает, что такое кликабельная картинка, можете прочитать статью "Как сделать картинку кликабельной"