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

Откройте Вашу фотографию.

Создайте три копии фонового слоя, нажав три раза Ctrl+J. Скройте вторую и третью копии слоев для того, чтобы видеть процесс создания рисунка. Активируйте первую копию и примените фильтр Filter Artistic Cutout со следующими параметрами:

Измените режим наложения Blend Mode слоя на Luminosity .

Затем, активируйте вторую копию фонового слоя (также сделайте его видимым) и примените к нему фильтр Filter Artistic Dry Brush .

Измените режим наложения на Screen .

Теперь перейдем к последней самой верхней копии фонового слоя. К нему необходимо применить фильтр Filter Noise Median .

И измените режим наложения на Soft Light .

Вот и все! Очень просто! Очень быстро!

Окончательный результат

P. S.

Также Вы можете скачать Action, чтобы не мучится и не производить одни и те же манипуляции раз за разом. Как установить этот сценарий, Вы можете узнать здесь .

Применение корректирующего слоя Поиск цвета

Дизайн в Photoshop: Ночь на кладбище в Хэллоуин

Фотография: Пресеты для Lightroom

Шаг 1 – Создание основы

Начните с создания нового документа. Вы можете использовать любой нужный размер, для этого урока попробуйте 500х500px.

Установите цвет переднего плана ( Foreground Color ) на темно-серый ( #191919 ) и, используя инструмент Paint Bucket Tool. залейте документ цветом.

Теперь, создайте новый слой и нарисуйте черный прямоугольник с помощью инструмента Rectangle Tool. Это будет сама кнопка. Затем создайте еще один слой и переместите его под слой с кнопкой. Установите цвет переднего плана на #0090ff и также инструментом Rectangle Tool нарисуйте прямоугольник. Эта фигура должна быть немного уже, чем кнопка, но и немного выше её. Должно получиться нечто подобное:

Шаг 2 – Добавление стилей

Теперь необходимо добавить несколько стилей к слою с синим прямоугольником. Для этого кликните правой клавишей мыши на слое в палитре слоев и выберите Blending Options .

Попав в окно стилей, примените следующие параметры:

Нажмите ОК. чтобы сохранить изменения.

Также нажмите правой клавишей мышки на слой с Вашей кнопкой (черный прямоугольник) и выберите Blending Options. Примените следующие параметры:

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

Дизайн в Photoshop: Ночь на кладбище в Хэллоуин

Заработок в сети: Веб-дизайнер – не хобби, а профессия

Дизайн в Photoshop: Текстовый эффект в стиле фильма «Оз: Великий и Ужасный»

Начнем. Для начала необходимо эту кнопку нарисовать. Причем не только ее одну, но и все варианты, которые будут использоваться на сайте. А именно, вид кнопки в обычном состоянии, вид при наведении мыши и вид при клике по кнопке левой клавишей мыши.

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

Теперь создайте группу слоев, кликнув на иконку с папкой в палитре слоев, и назовите ее button (типа, кнопка).

Будем работать в этой группе, т.к. правильное структурирование слоев всегда полезно. Теперь выберите инструмент Rounded Rectangle Tool и установите в настройках радиус округления углов на 5px и фиксированный размер формы 200х45px.

Щелкните по любому месту документа, создав при этом основу для кнопки.

Затем, дважды кликните по слою с формой и перейдите к окну редактирования стилей. Или просто перейдите Layer Layer Style Blending Options. Добавьте следующие стили:

Вот, что Вы должны были получить:

Теперь добавьте текст. В этом уроке используется пресловутый Calibri размером 16pt белого цвета. И примените стиль Drop Shadow к этому слою.

Первый вариант готов. Теперь создадим вариант кнопки, который будет появляться, когда мы наводим на нее мышь. Помните, мы в начале урока создали группу слоев? Вот ее и перетащите на значок создания нового слоя, появится дубликат группы. Переименуйте его в hover (типа, навели мышь).

Работаем с этой группой слоев. Откройте ее и дважды щелкните по слою с основой для кнопки. Откроется окно редактирования стилей слоев. Добавьте стиль Color Overlay .

Щелкните по группе слоев hover. выберите инструмент Move Tool и, не используя мышь, клавишами перемещения (по-простому стрелками) переместите группу вниз, как на рисунке. Главное, чтобы изображения примыкали друг к другу.

Готово. Как и в предыдущем шаге создайте дубликат группы слоев hover и назовите ее active (типа, нажимаем). Щелкните по слою с основой кнопки, удалите стиль Color Overlay и измените стиль Gradient Overlay. как на рисунке:

Также переместите изображение этой группы слоев вниз, но уже ниже изображения группы hover .

Итак, первый этап пройден. Мы создали три варианта кнопки и готовы перейти к правильному сохранению.

Сохранение изображения

Сделайте невидимым фоновый слой, щелкнув на иконку в виде глаза напротив слоя. Находясь на группе слоев active в палитре слоев, нажмите Ctrl+Shift+Alt+E. чтобы создать новый слой, который включит в себя все видимые части изображения (в нашем случае это кнопки). Затем перейдите на этот слой. После этого, используя любой инструмент выделения, создайте область выделения вокруг изображения, как на рисунке:

Нажмите Ctrl+C. чтобы скопировать изображение и создайте новый документ:

Обратите внимание, что документ создается уже с теми размерами, которые включают в себя все видимые части скопированного изображения. После создания изображения, нажмите Ctrl+V. чтобы вставить наши кнопки. Сделайте невидимым фоновый слой и перейдите Save for Web. Сохраните файл под названием buttons.png .

Итак, мы сохранили наши кнопки. В итоге у нас получился так называемый «спрайт». Что такое спрайт? Это одно большое изображение, которое включает в себя все маленькие картинки, используемые в верстке страницы. Это изображение используется в качестве фона определенного блока с заданными размерами. Единственное отличие от обычных изображений, использующихся в качестве фона, спрайт имеет четкое позиционирование относительно координат XY. Подробнее в следующей части урока.

Верстка кнопки, используя стили CSS

Откройте Ваш html -файл. Сначала создадим ссылку:

Вот что получается:

Как мы видим, ссылка не отформатирована и т.д. Теперь добавьте стили (в связи с тем, что ссылка у нас одна, да и это только пример, то оборачивать в тег div не обязательно):

Обратите внимание на значение параметра text-indent. Такой большой отступ сделан для того, чтобы сам текст было не видно, а ссылка была. Текст оставляется для поисковых роботов, так сказать для получения SEO-эффекта )). Вот, что мы получим:

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

Мы создавали кнопку высотой 45px. После применения стиля Stroke. согласно параметрам у нас с каждой стороны кнопки прибавилось по 1px. Итого, получается, что высота кнопки стала 47px. Если учесть, что первоначальное смещение фона равно 0, то при наведении мыши на кнопку, нам необходимо сместить фон на 47px вверх, т.е. подставить в значение Y. которое отвечает за смещение по вертикали, параметра background-position -47px. Аналогично и с нажатием на кнопку, только уже смещаем не на 47px, а на 47px+47px=94px.

Вот и все! Использование спрайтов выгодно тем, что обычно размер (вес) спрайта намного, в разы, меньше суммарного размера (веса) отдельных изображений. Но тут есть и негативный момент – чтобы подготовить спрайт, требуется большее количество времени. Решать Вам.

Интересные записи

• Фотошоп для фотографа 2013 (×)
• Создаем Actions в Photoshop
• Фотошоп для начинающих
• Обработка фото
• Владелец фотоаппарата, который не умеет обрабатывать свои фотографии, похож на грибника, который
• Как в фотошопе рисовать логотипы