Создание стикера для веб-дизайна

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

Урок: Простой и красивый стикер

В этом уроке я расскажу, как сделать наклейку, которую можно будет использовать в дальнейшем на любом сайте, как элемент веб-дизайна, в любом блоге и ещё много где. 

Вот что должно получиться в итоге:

Digmast.ru

 

1. Фон 

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

Создаём новый документ размером 800 x 600 px, вполне удобным для такой работы. Залейте фоновый слой темным цветом. В нашем случае я использовал темно-коричневый (#2e1f13)

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

Digmast.ru

 

Хорошо! 
Если текстура не устраивает и вы хотите, чтобы она выглядела получше, можно продублировать слой (возможно несколько раз) и менять режимы наложения, пока не добьётесь нужного результата.

Digmast.ru

 

2. Основа значка 

Теперь давайте начнём рисовать наш значок. 

Во-первых, выберите инструмент Овальная область (Elliptical Marquee Tool) и сделайте выделение, зажав клавишу Shift. Создайте новый слой и заполните выделение нужным цветом.

Digmast.ru

 

Хорошо, теперь у Вас есть основа, то, над чем можно работать. 
Далее нам нужно срезать небольшой угол и повернуть его. Чтобы сделать это, сначала выберите инструмент Прямолинейное Лассо (Polygonal Lasso Tool), затем выделите угол значка так, как показано на примере:

Digmast.ru

 

Щелкните правой кнопкой мыши на выделении и выберите пункт Вырезать на новый слой (Layer via Cut) также можно нажать клавиши Ctrl+Shift+J
Переверните только что появившийся слой через меню Редактирование - Трансформирование - Поворот на 180° (Edit - Transform - Ratate 180°), после чего Вам скорее всего понадобится передвинуть слой так, чтобы края точно совпадали. 

Затем залейте этот слой белым цветом.

Digmast.ru

 

Теперь у нас есть эффект, более-менее похожий на отрывающуюся наклейку. Надеюсь, до этого места я объяснял достаточно понятно! ;) 

3. Эффекты (Стили Слоя) 

Как придать значку глубины и объема? Сделать это можно с помощью градиентов, применив к каждому слою свой. Для этого щелкните правой кнопкой мыши на одном слое и выберите пункт Параметры Наложения... (Blending Options..). 
К слою наружной стороны наклейки примените такие параметры градиента:

Digmast.ru

 

А к слою внутренней (отклеивающейся) стороны примените эти:

Digmast.ru

 

Примечание: Вам, вероятно, придется немного переместить градиент, подогнав его под свой значок.

Digmast.ru

 

Уже лучше! 

4. Добавляем текст 

Теперь давайте добавим какой-нибудь текст. 

Выберите инструмент Горизонтальный Текст (Horizontal Text) и напишите какой-нибудь текст.

Digmast.ru

 

Примечание: шрифт, используемый выше, называется Delicious, и это - свободный шрифт, который Вы можете скачать здесь. 

Отлично! 
Теперь поместите текст поверх слоёв со значком и поверните как Вам удобно, при помощи Свободного трансформирования (Ctrl+T).

Digmast.ru

 

Хорошо! Выглядит превосходно! 

Наконец, чтобы заставить текст выглядеть реалистичнее, Вы должны добавить стиль слоя - Тень:

Digmast.ru

И в завершение.. 

Чтобы завершить урок, Вы можете слить все свои слои вместе - тогда размер всего документа уменьшится до 25% от оригинального.

Digmast.ru

Автор материала: Неизвестен
Источник: Неизвестен
Перевод: Неизвестен
Просмотров: 1764