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

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

Создайте новый документ в режиме 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, как шаблон для создания последующих кнопок для сайта и блога. По мне так прекрасный урок фотошоп по созданию кнопочки для сайта.

Спецэффект - фото из пазлов

Трюк фотошоп найден в одном из великолепных журналов, автором которого, является главный редактор журнала "Photoshop User" Скотт Келби - президент Национальной ассоциации профессионалов Фотошоп. Трюк фотошоп сделан на основе применения элементов головоломки или пазлов, которые доступны в панели элементов фотошоп:

Создайте новый документ в режиме RGB, в верхнем меню фотошоп (файл - новый...). В панели инструментов фотошоп, цвет основного фона задайте светло серый. Активируйте инструмент "Произвольная фигура" (на клавиатуре U). На палитре настроек, щелкните на третьем значке слева, чтобы была возможность создавать растровые фигуры:

Далее необходимо найти фигуру пазл, где выбирать видно из скриншота с правой стороны.

Когда будете выбирать фигуры, доступно будет 4 варианта пазлов, для начала возьмите четвертый пазл:

Создайте новый слой, щелкнув в панели слоев фотошоп - на значке создание слоя:

Идем на новый документ, который был нами создан. Удерживая клавишу Shift, рисуем в правом верхнем углу наш первый пазл головоломки. Смотрите ниже:

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

Вторую часть головоломки нужно будет перевернуть нажав комбинацию клавиш Ctrl+T, появится выделение и мышкой можно будет вертеть пазл в любую сторону. После того, как перевернете второй пазл, мышкой переместите его под первый:

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

Снова создаем новый слой для того, чтобы в фотошоп нарисовать третий пазл, выбираем фигуру третий пазл, рисуем по аналогии удерживая Shift и совмещаем с нижним пазлом, оставляя при этом небольшой зазор:

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

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

Активируйте инструмент фотошоп "Перемещение" (на клавиатуре V) и переместите фото в документ с пазлами. В панели слоев фотошоп, мышкой опустите слой с фото в самый низ под слои с пазлами:

Наиболее важные элементы фотографии, должны быть закрыты серыми пазлами, чтобы добиться наилучшего эффекта фотошоп.

К элементам головоломки (пазлам) добавим эффект скоса и тени, чтобы смотрелись более реалистичнее. Щелкните 2 раза мышкой на слое с фотографией и установите следующие параметры тиснения и тени:

После того как параметры спецэффектов будут установлены нажмите ОК. В дальнейшем оба эти спецэффекта фотошоп, можно будет легко  применить ко всем элементам.

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

Теперь можно удалить слой с пазлом, перетащив его на значок корзины в панели слоев фотошоп, выделение пока не снимайте. Нажмите Ctrl+J, чтобы создать новый слой с пазлом, на котором будет наложена часть фотографии:

По аналогии сделайте это со всеми тремя слоями с пазлами, нажимая на них мышкой с удержанием Ctrl, тем самым выделяя, затем активируйте слой с фото, удаляйте слой с элементом и делаете копию Ctrl+J.

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

Надпись на плакате

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

Начнем урок спецэффекта с текстом, созданием нового документа в программе, для этого в верхнем меню фотошоп нажмите вкладку (файл - новый...), задайте размеры документа (ширина 600, высота 400). Цвет по умолчанию должен быть белый.

Активируйте инструмент "текст" в панели инструментов фотошоп или на клавиатуре нажмите Т. Сделайте надпись красного цвета, слово может быть любым - это уже на Ваше усмотрение. Размер текста установите 100пт, если у Вас нет по умолчанию такого размера, то забейте его ручками в верхнем меню фотошоп в окошко установки размера текста.

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

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

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

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

Остался практически завершающий этап создания спецэффекта с текстом, активируйте инструмент фотошопа "перемещение" (на клавиатуре V) и перетащите черно белое изображение прямо в документ с текстом:

Далее нужно подогнать размеры черно-белого изображения к размерам документа с текстом, для этого нажмите комбинацию клавишь Ctrl+T, появится выделенная рамка. Удерживая Shift, мышкой подгоните 2 документа под один размер, передвигая за уголок черно-белое изображение, после чего нажмите Enter.

Задайте в качестве основного цвета фотошоп - белый, производится нажатием клавиши сначала D, потом Х на клавиатуре. Необходимо вырезать все черные участки превратив их в белые - это выполняется нажатием комбинации клавишь Shift+Alt+Delete, после чего получите готовый спецэффект с текстом:

Для полного окончания эффекта, объедините фотографию с надписью нажав Ctrl+G. Если Вас не устроит положение белых пятен на тексте, всегда можно инструментом "перемещение" в фотошопе изменить положение.

Эффект отражения текста

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

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

Создаем новый документ, в верхнем меню фотошоп (файл - новый...), задайте ему размеры 400х200 пикселей.

Активируйте инструмент "текст" в панели инструментов фотошопа (на клавиатуре Т). Кликните мышкой на поле нового документа и напишите любой текст, который Вам захочется, цвет текста сделайте черным. Настройки оформления текста, расположены под верхним меню фотошопа:

Когда текст будет готов, сделайте копию слоя с текстом используя комбинацию клавишь Ctrl+J. В панели слоев фотошопа, у Вас должно быть 3 слоя:

Теперь перевернем текс расположенный на скопированном слое, в верхнем меню фотошоп (редактирование - трансформирование - отразить по вертикали):

В результате текст на втором слое перевернется, теперь нам нужно опустить его ниже. Активируйте инструмент "перемещение" (клавиша V), щелкните мышкой на текст и удерживая кнопку опустите отражение ниже основного:

Для того, чтобы нижняя часть текста стала похожа на отражение на поверхности, нужно уменьшить прозрачность слоя. Идем в панель слоев фотошопа и передвигая ползунок, устанавливаем значение непрозрачности 35%.

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

Активируйте инструмент "ластик" в панели инструментов фотошоп (на клавиатуре Е), установите значение непрозрачности для ластика около 70% (в верхнем меню фотошоп), края должны быть мягкие.
Нажав и удерживая клавишу Shift проведите по нижнему краю отражения текста, тм самым слегка затирая половину отражения:

Спецэффект фотошоп выполнен, теперь картинку можно применять в дизайне сайта.

Превращаем фото в креатив

Из любой простой фотографии можно сделать креативное фото, выполнив при этом минимум движений ручками и используя старый, добрый фотошоп. Довольно часто ищут по запросам, как сделать, что-то красивое и креативное из своей фотографии. Вот и решил выложить пост, который думаю будет интересен, тому кто не хочет сильно заморачиваться на сложных уроках фотошоп, а сделать прикольную фотку в 3 действия.

Загрузите фотографию в рабочее окно фотошопа, открыв программу и выполнив (файл - открыть...). Например вот такое фото, которое расположено ниже, желательно, чтобы цвета одежды или объектов были яркими (красный, зеленый или другой броский цвет).

Теперь необходимо сделать дополнительную копию слоя фотографии, нажав комбинацию клавишь Ctrl+J, после чего в панели слоев фотошоп будет находится 2 слоя.

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

В результате получим черно-белое изображение, с которым непосредственно будем работать. Далее нам нужно стереть некоторые выбранные участки, применив инструмент "Ластик" и задав ему определенный размер в зависимости от стираемого участка на фотографии. Для того, чтобы активировать данный инструмент, нажмите клавишу "Е" на клавиатуре.

Установите размер "Ластика" и начинайте аккуратно стирать участки фото, в результате чего, будет проявляться цвет первоначального изображения.

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

Из одной фотографии - четыре

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

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

Разделим фото на 4-е части, применив вертикальную и горизонтальную направляющие. Для этого в верхнем меню программы жмем: просмотр - новая направляющая..., в выпавшей табличке ставим галочку на "горизонтальная", положение=0. В результате сверху на фото появится горизонтальная линия салатового цвета.

Горизонтальную линию необходимо будет опустить на середину, для этого используем инструмент "Перемещение" - на клавиатуре "V". По аналогии устанавливаем "вертикальную направляющую" (просмотр - новая направляющая...). Должно получиться вот так:

Начинаем разбивать фото на фрагменты, для этого расположим каждый фрагмент фотографии на отдельном новом слое. Возьмите инструмент "Прямоугольная область" - на клавиатуре "М" и выделите левый верхний участок.

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

После выполнения этих операций в панели слоев фотошоп, должно быть 5 слоев, один из которых называется "Задний план" и расположен в самом низу.

Изменим положение каждого слайда по отношению друг к другу. Для этого нажмите на слой-1, чтобы выделить его и нажмите комбинацию клавиш Ctrl+Т, появится прямоугольная выделенная область, которую нужно повернуть используя мышку. Когда повернете нажмите Enter, чтобы зафиксировать слайд. 

Примените к слайду эффект "тень" и "обводка", чтобы запустить панель эффектов - щелкните 2 раза на слое-1.  Параметры тени следующие:

Параметры обводки смотрите ниже:

Применив эффекты к слою-1, изображение обретет рамку белого цвета и отбросит тень, что отделит его от общего плана.

Перейдите на слой-2 и сделайте тоже самое, что и для слоя-1 (эффект тени и обводки), и так поочередно для каждого из слоев. После того, как все будет выполнено - у Вас еще останется помехой "Задний план", который будет виден и портить общую картину.

Избавимся от него. Нажмите на него мышкой в панели слоев, чтобы выделить, затем в верхнем меню фотошоп: редактирование - выполнить заливку, цвет установите белый.

Вот и все спецэффект будет завершен, должно получиться фото, которое показано в самом начале поста.