Всем привет!

Сегодня, пожалуй, будет самый простой урок, однако от этого его полезность к нулю не сводится. Предлагаю вам нарисовать не самую сложную кнопку для сайта (либо группы в популярной социальной сети). Уже давно прошли те времена, когда на сайтах были самые обыкновенные кнопки, без теней, без градиентов, без тиснений, в общем простые квадратные кнопки, выполненные элементарно через css.

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

Начинаем, как и всегда, с создания нового документа. Заливаем наш документ белым, создаём новый слой и выбираем инструмент “Прямоугольник со скругленными углами”. Рисуем, соответственно, прямоугольник:

Ищем панель со слоями и правой кнопкой мыши щёлкаем по нашему слою с кнопкой, выбираем “Параметры наложения”. Переходим во вкладку “Тень” и выставляем всё приблизительно так (хотя можете на свой вкус):

Переходим к следующей вкладке – “Тиснение” и выставляем всё как-то так:

Идём во вкладку “Наложение градиента” и, опять же, настраиваем параметры:

Жмакаем “ОК” и идём дальше, кнопочка почти готова. Теперь сделаем нашей кнопочке блик, а для этого создаём новый слой, выбираем инструмент “Овальная область” и делаем что-то подобное:

Берём “Заливку” и заливаем наш овал белым цветом, зажимаем клавишу ctrl и кликаем по векторной маске нашей фигуры, после чего она должна выделится. В панели инструментов заходим во вкладку “Выделение” и нажимаем “Инверсия”, затем Delet (активен при этом слой с овалом). Уменьшаем прозрачность последнего процентов до 10-15.

Снова зажимаем ctrl и снова жмём на векторную маску фигуры. Идём во вкладку “Выделение” -> “Модификация” -> “Сжать” и ставим значение 3 пикселя, убираем выделение. Теперь можно поместить на кнопку нужный текст и украсить его, например используя внутреннюю тень. В итоге получаем: