Photoshop-Portal

Снова приветствую вас!
Сегодня мы создадим с вами интересное решение для сайта - кнопочки, как на клавиатуре.
Для начала создадим холст (Ctrl+N) и проследите, чтобы фон\background был прозрачным\transparent. Размер значения не имеет - главное, чтобы ваша кнопка уместилась на холсте.
Воспользуемся инструментом "Прямоугольник со скругленными краями\Rounded Rectangle" (U).
Поставим в настройках инструмента радиус равный 5 пикселям и заполнение нашей фигуры цветом:

Режим рисования: Заливка Инструмент: Округлый прямоугольник Скругление: 5 пикс.

И нарисуем произвольную кнопочку (я сделал более похожей на ту, что на моей клавиатуре + поставил черный основным черный цвет):

Сделаем теперь эту фигуру более похожей на клавишу. Выделим верхние углы фигуры и истребим их нажатием клавиши Del (Редактирование -> Очистить\@ -> Clear). Немного подкорректируем стиль слоя, дважды кликнув по его миниатюре в списке слоев, и перед нами откроется такое окно:

Настраиваем тиснение\@ таким образом, как показано на картинке. Во вкладке "Контур\@" параметр "Диапазон\@" поставлен 35%. Жмем Ок.

Далее добавляем текст к нашей кнопке. Чтобы текст у нас не был простым, добавим к тему какой-нибудь простенький эффект. Открываем настройки смешивания (Правый клик по слою -> Настройки смешивания\Blending Options).

Теперь выделим нижний слой (черная фигура) и дублируем его (Ctrl+J). Изменим в настройках тиснения\@ прозрачность параметра "Режим подсветки\@" до 10%.

Собственно, кнопочка готова. Прежде чем выполнять дальнейшие действия, сохраните файл (Ctrl+Shift+S) в формате PSD, после чего не сохраняйте файл, посредством нажатия Ctrl+S, а то придется делать заново - вы уже создали шаблон, который можно подвергать редактированию. Ну, и, собственно, сохраните вариации кнопки в нужном формате (о сохранении в конце статьи).
После того, как вы отложили сохраненную копию, выберете инструмент "Прямоугольня область\@" (M). И выделите на одном из слоев с черной фигурой область. Очистите эту область (Del), выделите тем же инструментом отсоединенную часть и с помощью инструмента "Перемещение\Move Tool" (V) присоедините эту часть к другой:

Удалите второй слой фигуры, скопируйте уменьшенную копию (Ctrl+J) и измените настройки тиснения и положения слоя на место:

Осталось изменить текст. Если текст оказался правее или левее, используйте инструмент "Перемещение\Move Tool" (V), чтобы выровнять его местоположение относительно кнопки.

Сохраняем изображения.
Кликнем по миниатюре любого слоя с черной фигурой с зажатым Ctrl. Произойдет выделение закрашенной области. Теперь выполним кадрирование Изображение\Image -> Кадрировать\Crop. Размер холста автоматически изменился под размер нашей кнопочки. Далее сохраняем три версии:

Вот и все.