Стильная кнопка "Контакты"
Давайте попробуем создать стильную кнопочку "Контакты", которую можно установить в шапке сайта или в футере (подвал сайта). Кнопка будет иметь такой вид:
Делать такую кнопку будем в программе Фотошоп. В программе создаём документ размером 150х150 рх. Потом размер подгоним до необходимого.
Теперь поработаем со стилями слоя и окраской будущей кнопки:
Тень
Наложение градиента. Цвет подбирайте по своей необходимости:
Обводка:
В результате у нас получается вот такая заготовка:
Дальше будем рисовать конверт. Для удобства с помощью инструмента "Масштаб" увеличим изображение. Создаём новый слой Для начала выставим основной цвет Белый и инструментом "Прямоугольник" нарисуем форму конверта:
Открываем окно "Стиль слоя" и выставляем некоторые значения:
Тень:
Внешнее свечение:
Обводка:
Кнопка приняла следующий вид:
Создайте новый слой, выставьте основной цвет Черный и включите инструмент "Линия"
Установите толщину линии:
С помощью инструмента "Линия" нарисуйте образ конверта:
И осталось сделать надпись на кнопке "Контакты", используя инструмент "Горизонтальный текст":
Можно текст немного украсить, поработав в окне "Стиль слоя":
Внутренняя тень:
Наложение градиента:
Обводка:
В результате текст немного преобразится:
На теле страницы кнопка будет выглядеть так:
Теперь остаётся изменить размер кнопки до нужного. Для этого пройдите в меню "Изображение"==>"Размер изображения" и выставить нужные размеры кнопки или можно воспользоваться способом трансформирования - клавиши CTRL + T. Кнопку можно вставить в шапку сайта, в футер или на любых страницах как кликабельную картинку. Кто не знает, что такое кликабельная картинка, можете прочитать статью "Как сделать картинку кликабельной"
|