Кнопка для сайта с портретом

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

Создайте новый документ в режиме RGB, размеры можете взять на усмотрение (в примере 500Х500пк). Щелкните на образце основного цвета в палитре инструментов фотошоп и в появившемся диалоговом окне задайте красный цвет. Выполните заливку документа красным цветом - в верхнем меню фотошоп (редактировать - выполнить заливку).

Нажимайте комбинацию клавиш Shift+M, пока не быберете инструмент "овальная область" и удерживая клавишу Shift, нарисуйте выделенную область по центру:

Откройте фотографию или изображение, которое Вы хотели бы разместить на кнопке. Нажмите комбинацию Ctrl+A, чтобы выделить все фото по контуру, а затем Ctrl+С скопировав тем самым ее в буфер обмена. Вернитесь к документу с красным фоном (выделение не должно быть снято).

В верхнем меню фотошоп нажмите (редактировать - вклеить в), в результате чего фотография должна отобразиться в круглом окне документа. О размерах и положении фото пока не беспокойтесь, их можно будет изменить потом:

Нажмите Ctrl и удерживая ее, щелкните в палитре слоев фотошоп на значке маски слоя (черный квадрат с белым кругом), как показано ниже на скриншоте - этим мы добавим выделение по окружности для будующей кнопки сайта:

В палитре слоев фотошоп создайте новый слой, щелкну снизу на значке создания слоя и залейте его красным цветом (редактирование - выполнить заливку). Сделайте еще одну копию слоя нажав комбинацию клавиш Ctrl+J. В результате должно получиться еще 2 одинаковых слоя в панели слоев фотошоп:

Активным должен быть слой-3, он отмечен синим на скриншоте. В палитре слоев фотошоп, примените спецэффект тиснение к этому слою, щелкнув на значке активации эффектов. Параметры задайте следующие: глубина=300%; размер и смягчение=14; угол установите=135гр:

Нажмите ОК, вот уже станет похоже на кнопку для сайта, фотошоп может творить чудеса при определенных усилиях. В этой части урока фотошоп, к кнопке были добавлены блики и тени. Есил у Вас слетело выделение кнопки по контуру, то восстановите его, удерживая Ctrl нажмите на самом верхнем слое-3.

Применим к кнопке эффект сжатия, в верхнем меню фотошоп (выделение - модификация - сжать...), установите значение где-то 12-15 и нажмите ОК:

В результате контур выделяющий кнопку, слегка углубится внутрь от краев будующей кнопки:

В панели инструментов фотошоп, активируйте "прямоугольная область" (на клавиатуре М). После чего удерживая нажатой клавишу Alt, отсеките прямоугольником 3/4 выделенного круга. Когда отпустите кнопку мышки, должно остаться выделенно только 1/4 часть.

Перейдите к панели слоев фотошоп и щелкните на слое-2, расположенном ниже под слоем с которым Вы только что работали. Нажмите Delete, а затем комбинацию клавиш Ctrl+D, чтобы снять выделение. Фотография пока еще не будет видна, чтобы она появилась в панели слоев фотошоп - нажмите на слой-3, который выше и уберите заливку до 0:

Теперь фотография должна появиться.

При активном слое-3, придайте кнопке для сайта эффект тени по Вашему усмотрению (меню эффектов активируется в панели слоев фотошоп):

Теперь можно написать надпись на кнопке для сайта, это может быть что угодно (номер аськи или телефон, адрес электронной почты и так далее). Активируйте в панели инструментов фотошоп - инструмент "горизонтальный текст" (на клавиатуре Т) и сделайте надпись на кнопке:

Теперь упорядочим положение нашей фотографии, для этого сделайте активным слой с фото, щелкнув по нему в панели слоев фотошоп и выбрав инструмент "перемещение" (на клавиатуре V), передвигайте мышкой фотографию, пока не добьетесь желаемого эффекта.

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