Модный стикер

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

Делается он очень просто, в то же время стикер отлично смотрится на веб-страницах, например, в качестве изображения ссылки на RSS— канал. Читайте дальше, чтобы узнать, как создать его всего за несколько шагов, а также как очень просто создать эффект 3D текста.

Файлы к статье

Если вы являетесь участником PSD PRO, то PSD файл и многое другое вы можете скачать здесь.

Введение

Этот эффект выглядит действительно здорово, и я уверен, что вы обратили на него внимание в RSS-каналах и блоках комментариев или в других подобных местах. Достигается он очень просто.

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

Введение

ШАГ 1

Начните с создания нового документа с размерами 10 на 10 пикселей. Далее нам нужно создать сетку, перейдите в Редактирование — Установки — Сетка и установите для нее основные метки через 5 пикселей, дополнительные — через 1 пиксель. Проверьте, отображается ли сетка. Если нет, нажмите Ctrl + ‘. Чтобы следующий шаг был еще проще, подключите режим Snap, Вид — Прикрепить:

ШАГ 1

ШАГ 2

Выберите голубой цвет, подойдет что-то вроде #0b7dac, затем выберите инструмент «Линия» и убедитесь, что на главной панели инструментов эта кнопка заполнения пикселей активна, ширина установлена 1 пиксель и установлен флажок для опции «Сглаживание».

Теперь просто нарисуйте вертикальную линию, затем горизонтальную так, чтобы изображение выглядело так ка на картинке ниже. Перейдите в Редактирование — Определить узор, сохраните узор и закройте этот документ:

ШАГ 2

ШАГ 3

Создайте новый документ с размерами 500 на 500 пикселей, затем создайте новый слой, нажмите D, чтобы сбросить цвета, а затем нажмите Ctrl + Backspace, чтобы заполнить этот слой белым. Щелкните правой кнопкой мыши на этом слое, выберите параметры наложения и добавьте наложение узора, используя настройки, приведенные ниже:

ШАГ 3

ШАГ 4

Выберите инструмент «Текст» и введите какой-нибудь текст. Если вы перейдете в Окно — Символы, вам будет выведен редактор символов, в котором вы сможете настроить параметры текста.

Я использовал шрифт Impact regular italic, а также скорректировал смещение (расстояние по горизонтали между знаками) и интервал (вертикальный интервал между строками). Теперь вы можете изменить цвет текста; для «PSD» я использовал цвет #ec7299, для ‘LEARNING’ #62acd1, но не бойтесь экспериментировать:

ШАГ 4

ШАГ 5

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

ШАГ 5

ШАГ 6

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

Если точка схождения находится ниже текста, это создает впечатление, что мы смотрим на текст снизу, если точка выше текста, то будет казаться, что мы смотрим на текст сверху. То же самое правило применяется для размещения точки схождения слева или справа. Элементы, как правило, выделяются лучше и выглядят большими, если мы ставим точку схождения ниже объекта, как сделал и я.

Затем я выбрал инструмент «Линия» и провел касательные от точки схождения до внешних краев текста. Если вы до этого делали какие-либо технические чертежи или графики, то это должно быть довольно просто для вас. Посмотрите на приведенное ниже изображение, если вы не понимаете, о чем я говорю:

ШАГ 6

ШАГ 7

Создайте новый слой и переместите его ниже слоя с текстом и проверьте, чтобы у него был тот же цвет переднего плана, который мы использовали раньше. Выберите инструмент «Прямолинейное лассо» и выделите область в пределах перспективных направлений, затем нажмите Alt + Backspace, чтобы заполнить ее темно-синим цветом.

Сделайте это для всех линий. Если вы все сделали правильно, у вас должен получиться тот же эффект, который показан на рисунке ниже:

ШАГ 7

ШАГ 8

Теперь нам нужно избавиться от части элементов проекции внизу. С помощью инструмента «Прямолинейное лассо» снова выделите область вокруг острия проекции, а затем нажмите «Удалить». Вы также можете использовать маску слоя, если хотите иметь возможность позже вернуться к этому элементу и изменить что-то. Вы также можете удалить все линии перспективы:

ШАГ 8

ШАГ 9

Ниже я показал, как выглядит в этот момент моя панель слоев. Убедитесь, что текстовый слой и 3D слой находятся в группе. Теперь щелкните правой кнопкой мыши на группе слоев и выберите опцию «Преобразовать в смарт-объект». Если такой опции в меню нет, то вернитесь назад и щелкните левой кнопкой мыши на группе слоев и нажмите Ctrl + E, чтобы объединить их в группу:

ШАГ 9

ШАГ 10

Кликните правой кнопкой мыши на объединенном слое или смарт-объекте, перейдите к параметрам наложения и задайте для тени и обводки параметры, приведенные на рисунке ниже:

ШАГ 10
ШАГ 10а

ШАГ 11

Теперь нажмите Ctrl + T, чтобы войти в режим «Свободное трансформирование», а затем переместите и измените размеры слоя, как показано на рисунке ниже:

ШАГ 11

ШАГ 12

Теперь вы можете добавить некоторые дополнительные элементы; я кратко опишу, что я сделал. Я трансформировал слой узора и добавил фильтр «Свертывание», используя облака, в качестве карты. Я также поместил слой облаков выше слоя узора и установил для него режим смешивания – «Наложение». Затем я использовал кисть-брызги с размером 3 пикселя, чтобы создать эффект чернильного пятна:

ШАГ 12

Перевод статьи «Funky Stickers» был подготовлен дружной командой проекта Сайтостроение от А до Я.