Как сделать наклейку в фотошопе переливающуюся
В этом уроке мы создадим светящийся текст на фоне космического пространства. Вы научитесь создавать космические световые эффекты, пользоваться стилями и режимами наложения слоёв.
Что мы будем делать:
Мы начнём с создания световых эффектов. Вы увидите, как их можно собрать, используя градиенты и инструмент выделения для обрезки. Правильное расположение нескольких цветных полосок с мягкими краям создаст красивое свечение. Затем мы займёмся текстом и его стилизацией. После этого мы добавим несколько размытых светящихся линий, чтобы немного улучшить внешний вид текста. Давайте приступим!
Конечный результат:
Шаг 1
Создайте новую папку на компьютере под именем «ROCK – Create a Space Flare Glowing Text». Внутри папки создайте ещё одну – «images».
Шаг 2
В эту папку загрузите изображение космоса.
Шаг 3
Откройте Фотошоп. Создайте новый документ с параметрами, указанными на скриншоте. Назовите его «ROCK – Create a Space Flare Glowing».
Шаг 4
Сохраните документ в папке «ROCK – Create a Space Flare Glowing Text» через меню Файл > Сохранить как (File > Save As).
Шаг 5
Через меню Файл > Поместить (File > Place) вставьте изображение космоса.
Панель слоёв должна выглядеть так:
Шаг 6
Создайте новый слой (Ctrl + Shift + N).
Назовите слой «Background Gradient».
Шаг 7
Протяните градиент из левого нижнего угла к правому верхнему.
Установите режим наложения градиентного слоя на Мягкий свет (Soft Light) и уменьшите непрозрачность до 80%.
Шаг 8
Создайте новый слой под именем «H1». Выберите инструмент Прямоугольная область (Rectangular Marquee Tool) (M) и создайте прямоугольное выделение размером 300х30 пикселей. Выберите инструмент Градиент (Gradient Tool) (G) и измените цвета, как показано на скриншоте. Залейте выделение слева на право. Снимите выделение сочетанием клавиш (Ctrl + D).
Шаг 9
К слою «H1» примените фильтр Размытие по Гауссу (Фильтр > Размытие > Размытие по Гауссу) (Filter > Blur > Gaussian Blur) со значением 5 пикселей.
Примените фильтр Размытие в движении (Фильтр > Размытие > Размытие в движении) (Filter > Blur > Motion Blur): 0 градусов, 350 пикселей.
Инструментом Прямоугольная область (Rectangular Marquee Tool) (M) выделите нижнюю половину полоски. Нажмите Delete, чтобы удалить её.
Шаг 10
Создайте новый слой и назовите его «H2». Создайте прямоугольное выделение размером 300х60 пикселей и внутри протяните градиент слева направо.
Шаг 11
Обрежьте нижнюю часть полоски, как мы делали это на шаге 9.
Шаг 12
Расположите обе полоски, как показано на скриншоте.
Шаг 13
Создайте копию слоёв «H1» и «H2» (Ctrl + J) и назовите их «H3» и «H4» соответственно. Новые слои сдвиньте вниз и влево. Слой «H4» должен перекрывать слои «H1» и «H2».
Для слоёв «H3» и «H4» установите режим наложения Жёсткий свет (Hard Light). После этого цвета станут более яркими и насыщенными.
Шаг 14
Создайте новый слой и назовите его «H5». Создайте прямоугольное выделение размером 300х4 пикселя. Залейте его белым цветом.
Шаг 15
К белой полоске примените фильтр Размытие в движении (Motion Blur):
Расположите слой «H5» в основании слоя «H2» и сдвиньте влево по горизонтали.
Установите режим Перекрытие (Overlay) для слоя «H5». Все 5 слоёв поместите в одну группу (Ctrl + G) и назовите её «Highlight».
Шаг 16
Наклоните всю группу «Highlights» на -25 градусов в режиме Свободное трансформирование (Ctrl + T).
Шаг 17
Создайте 5 копий группы и назовите их «Highlight 1» - «Highlight 5». Расположите, как показано на скриншоте.
Шаг 18
Уменьшите размер группы «Highlights 1» до 80%. Уменьшите непрозрачность до 60%.
Шаг 19
Уменьшите непрозрачность второй и четвёртой группы до 40%.
Шаг 20
Раскройте пятую группу. Уменьшите непрозрачность первых четырёх слоёв до 45%.
Шаг 21
Пятый слой переместите вправо вверх.
На данный момент у Вас должны быть такие цветные свечения:
Шаг 22
Выберите инструмент Горизонтальный текст (Horizontal Type Tool) (T) и напишите текст шрифтом «Big John» размером 230 пикселей.
Шаг 23
К текстовому слою примените следующие стили:
Примечание переводчика: будут переведены только текстовые значения параметров стилей.
Наложение градиента (Gradient Overlay): Режим – Мягкий свет, Стиль – Линейный.
Обводка (Stroke): Положение – Внутри, Режим – Нормальный, Тип обводки – Градиент, Стиль – Линейный.
Позиция и цвета контрольных точек градиента:
Установите режим наложение Перекрытие (Overlay) для текстового слоя.
Шаг 24
Создайте копию слоя «Rock» и назовите её «Rock 1». Выберите инструмент Перемещение (Move Tool) (V). Используя клавиши стрелок сдвиньте копию на 7 пикселей вниз и вправо. Откройте стили и измените градиент обводки.
Установите режим наложения Мягкий свет (Soft Light) для слоя «Rock 1».
Шаг 25
Создайте копию слоя «Rock 1» и назовите её «Rock 2». Сдвиньте этот слой на 11 пикселей влево и вверх. Измените непрозрачность обводки:
Шаг 26
Создайте новый слой под тремя текстовыми и назовите его «Block Line».
К кругу примените фильтр Размытие в движении (Motion Blur):
Установите для круга режим наложения Жёсткий свет (Hard Light).
Шаг 27
Создайте новый слой «Lines». Выберите инструмент Кисть (Brush Tool) (B) и настройте её, как показано ниже. Выберите белый цвет.
Обрисуйте текст прямыми линиями. Используйте одиночные клики и зажатую клавишу Shift.
Шаг 28
Создайте копию слоя «Lines» и назовите её «Lines Vertical». Установите для копии режим наложения Перекрытие (Overlay).
Шаг 29
К слою «Lines» примените фильтр Размытие в движении (Motion Blur): 0 градусов, 25 пикселей. Затем к слою «Lines Vertical» примените тот же фильтр, но с другими параметрами: 90 градусов, 50 пикселей.
Глиттеры — это анимационные текстуры для создания переливающихся текстов и изображений в формате GIF.
Загружается глиттер в Фотошоп как обычный GIF или видеофайл.
В Adobe Photoshop CS2 и ниже видео и GIF-анимацию загружать в Image Ready,где она автоматически разбивается на слои и кадры.
Если установлен Photoshop CS3 и выше, то надо сперва инсталлировать на компьютер Quick Time Player (бесплатная программа, валяется в интернетах повсеместно), после чего открыть Photoshop, вкладка Файл —> Импортировать —> Кадры видео в слои (Files —> Import —> Video frames to layers), откроется окно, и выбрать нужную папку.
Одно «но», Фотошоп в таких случаях просто так не видит Gif-анимашку.
Для того чтобы увидел необходимо после открытия нужной вам папки поставить в графе название файла звёздочку (*) и нажать кнопку «Загрузить» или клавишу Enter и у вас станут видны в папке все гифки.
Ну ладно, это всё лирика, приступим к рисованию. Возьмём фото:
И попробуем эти красные труселя разнообразить.
В труселедизайне я использовал этот глиттер:
Берём инструмент Перо (Pen , клавиша Р) и выделяем контур труселей.
Замыкаем (при подведении курсора к началу линии контура у курсора появляется кружочек). Рисуем второй конур в верхнем участке труселей, там, где они висят на верёвочке. Кликаем правой клавишей мыши по контуру. Особая точность выделения для днной радачи не нужна. В открывшемся контекстном меню выбираем «Образовать выделенную область». Открывается еще одно окно, выбираем радиус растушёвки 1 пкс.
Жмём Ctrl+J три раза. Получилось три клона выделенного участка фотки, а именно — труселей.
Открываем палитру слоёв и переименовываем фоновую фотку в «Фон» , а три новых слоя в «Т1», «Т2» и «Т3».
Открываем палитру слоёв, активируем первый слой.
Кликаем по вкладке Редактирование—>Определить узор.В открывшемся окне придумываем имя узору, напр. G1.
То же проделываем со слоями 2 и 3 ,дав им имена G2 и G3.
Возвращаемся к изображению с труселями.
Переходим на палитру слоёв, активируем первый слой с выделенными труселями «Т1» и кликаем на кнопку «Стиль слоя».
Выбираем строку «Наложение узора». Выбираем первый узор, режим наложение «Жёсткое смешение».
Слою Т2 и Т3 придаём узоры G2 и G3 соответственно с таким же режимом наложения.
Выключаем видимость слоёв Т2 и Т3,оставляем видимость слоёв Фон и Т1.
Открываем палитру анимации.
Первый кадр сгенерировался автоматически.
Создаём второй фрейм на палитре анимации, убираем видимость у слоя Т1 и включаем Т2.
Создаём третий фрейм анимации, убираем видимость у слоя Т2 и включаем Т3.
Ставим цикл анимации на «Непрерывно» (кнопка в левом нижнем углу палитры анимации).
Запускаем.
Совсем недавно мы добавили новый материал для печати – голографическую виниловую плёнку. Это удивительный материал, который точно никого не оставит равнодушным.
В этой статье мы хотели бы обозначить нюансы и тонкости по подготовке макетов.
Основные нюансы
- Печать в более высоком разрешении. Благодаря самому современному оборудованию разрешение печати стало ещё лучше. Исчезла зернистость у светлых оттенков. А сплошные заливки выглядят не хуже шелкографии.
- Поверхность печати матовая. Для голографических наклеек мы используем современные УФ печатные станки, с соответствующими чернилами. Это экологически чистый способ печати, который вообще не вредит окружающей среде. Краска при застывании становится матовой, что не только приятно на ощупь, но и позволяет добиться печать в более высоком разрешении.
- Не нужна ламинация. УФ краске не нужна ламинация, она не стирается и не выцветает. Мы провели несколько «краш тестов» –повредить стикеры нам не удалось.
- Яркие краски. УФ краски гораздо ярче и можно добиться более насыщенных результатов при печати.
- Печать белым цветом. При печати на голографической плёнке можно использовать дополнительный белый цвет.
Как подготовить макет?
Также как и макет для прозрачной плёнки. Всю остальную работу мы сделаем сами. В идеале файл лучше прислать в форматах: .jpg, .psd или .ai чтобы было видно голографические участки у стикера.
Внимательно отнеситесь к частям макета где не будет краски, там не должно быть даже цветных пикселей иначе это все всплывет при печати.
Но что если вы хотите все сделать сами или перед вами стоит необычная задача (например сделать у стикера белую обводку)?
Возьмём вот такой макет лепрекона:
Перед нами стоит задача сделать его пистолет голографическим. А всю остальную часть с кроющей печатью.
1. Открываем файл в графической программе (у нас это будет Adobe Photoshop) и копируем слой.
2. На слое печати удаляем участки, которые должны быть голографическими. В нашем случае очистили только пистолет.
3. На слое белой краски делаем заливку по всей поверхности изображения. и удаляем участки, которые должны быть голографическими. Также добавляем обводку по контуру стикера, что бы она получилось белой. Мы так же удалили участки у радуги и золотых элементов на макете, что бы в этих местах был «переливающийся эффект».
4. Перемещаем слой для белого цвета на задний план и сохраняем.
Результат:
ООтличительной чертой нашей студии, по сравнению с большинством типографий, было то, что мы принимаем к печати любые форматы изображений и не берем плату за их обработку и подготовку к печати. Но иногда дело доходит до абсурда: нам присылают изображения в ужасном качестве и просят вытянуть из них что-то дельное, присылают фотографии наклейки и просят скопировать её или просто присылают изображение с неподходящим цветовым профилем и удивляются неточности цветопередачи. Поэтому мы решили сделать самый подробный гайд по созданию/подготовке макета для печати.
Начнем с основ. Для создания макета можно использовать любую графическую программу. Мы же покажем все на примере Adobe Photoshop и Adobe Illustrator.
Шаг первый. Создание Файла.
Создаем новый файл в любой из программ. Он обязательно должен быть того же размера, что и стикер, который вы хотите получить. Для этого выбираем миллиметры в окошке выбора системы измерения и указываем нужный нам размер в соседних окошках, в нашем случаем мы будем делать стикер размером 80 х 80 мм.
P.S. ВАЖНО, если вы используете растровую программу, такую как Adobe Photoshop, укажите разрешение в 300 PPI (пиксели/дюйм). Ни больше, ни меньше 300 (без шуток про фермерство пожалуйста)!
Шаг второй. Настройка цветового профиля.
Это один из самых важных моментов при печати, который многие упускают и из-за чего в последствии могут возникнуть проблемы.
Так как мы используем цифровое оборудование, мы принимаем обе цветовые системы: как RGB, так и CMYK. Но это не значит, что можно использовать любой профиль и ждать великолепных результатов. Коротко о каждом:
RGB — самый простой вариант, но используйте только Adobe RGB (1998) — он задействует оптимальное количество цветов для печати (да-да, напечатать можно далеко не все цвета, которые мы видим на экране). У sRGB цвета будут тухлыми тусклыми, а у ProPhoto RGB — цвета которые невозможно напечатать.
Этот вариант идеально подойдет для тех, кому нужно просто напечатать свои иллюстрации или, например, логотип своего стартапа. Но если вашей компании нужно строгое соблюдение определенного цвета используйте только CMYK.
CMYK — в каких только профилях нам не присылают макеты, от стандартного Japan Color (который стоит в программах по умолчанию), до профилей заточенных под определенные принтеры и выдающие на других печатных машинах непредвиденные результаты.
На самом деле, тут тоже все просто, мы протестировали десятки профилей для печати и с уверенностью заявляем — Fogra 39 самое оптимальное и крутое решение для всех, оно максимально точно передает на экране то, каким изображение получится при печати (тут, конечно, есть нюансы с перекрученными настройками насыщенности и контраста у дисплея (для этого проверяйте макет на разных устройствах) и в целом понимании того, что такое печать).
Шаг третий. Изображение.
Упустим момент создания иллюстрации/логотипа/коллажа, так как эта статья не об этом. Но не забываем о простых правилах:
1. Встроить сторонние изображения в файл.
2. Разобрать или растрировать шрифты и оформление (обводки, узоры и тд).
Шаг четвертый. Линии резки.
Этот шаг в основном полезен тем, кто умеет пользоваться Adobe Illustrator (так как линии резки должны быть в кривых), но для всех остальных он тоже обязателен к ознакомлению, так как мы учтем многие нюансы и возможности резки.
Первый важный момент — линии резки должны быть на отдельном слое.
Далее определяемся с формой стикера и деталями (например нужно ли белое поле или нет) и рисуем её (как умеем) цветом, который не используется в макете (или который просто выделяется). В нашем случае для создании наклейки мы используем наш миниатюрный логотип, а цветом для резки выберем магенту.
Мы накидали несколько основных вариантов резки стикера:
- Стикер с белым полем. Классический и самый простой вариант. Отступ от края изображения должен быть не мене 1.5 мм. Иначе велика вероятность того что будет смещение и часть стикера просто зарежется.
- Стикер без белого поля. Тут нужно вынести/добавить часть изображения за пределы резки, на случай смещения ножа. Важный момент! Если у вашего стикера есть рамка и вы хотите, чтобы наклейка была вырезана по ней, то рамка должна быть не менее 2-3мм. иначе ее просто зарежет/сместит и результат будет выглядеть не очень опрятно.
- Любая другая форма наклейки, по которой нельзя понять, как вы хотите, чтобы она была вырезана. Мы взяли круг (одна из самых популярных категорий стикеров) и разместили наш логотип так, как мы хотели бы его видеть на готовой наклейке.
Шаг пятый. Сохранение файла и отправка в печать.
Мы принимаем к печати почти все основные форматы изображений: .pdf, .ai, .jpg, .jpg, .psd, .eps, .tiff
Но в данном случае используем только: .pdf, .ai и, если макет был сделан в Adobe Photoshop, .psd.
P.S. Мы не примем файлы форматов: .doc, .docx, .ppt, mp4 и др. Также мы не принимаем файлы формата .cdr (так как мы ненавидим не работаем с этой программой)
Далее, загружаем макет на наш и сайт и при необходимости пишем комментарий в соответствующем поле (никакую другую информацию в это поле писать не нужно!).
Результат.
Дожидаемся стикеров из печати и радуемся готовому результату. Ниже можно увидеть макет и готовый стикер.
5 Comments
Спасибо за публикацию, жаль только, что я ее увидела уже ПОСЛЕ отправки макета вам в печать!
И теперь я сомневаюсь, что на выходе получу то, что хочу. Ведь стикеры уже в печати, а выслала я вам обычное фото.
Хорошая, и вроде понятная статья. Сейчас буду применять на практике.
Огромное спасибо! Скажите, а можно рассчитывать, что это соблюдается в онлайн-редакторах? И если да, то во всех или в
каких-то конкретных из этих (ссылки удалены)
Можно ли кому-то из них доверять?
Мы никогда не работали с онлайн-редакторами. Но конечно можно поработать и в них. Хабру доверять точно можно.
Здравствуйте. Вопрос: в фотошопе для макета я подогнала размер и разрешение 300 пикселей на дюйм, но не разобралась с отметкой краев резки. Могу я при заказе прислать файл только с этими параметрами, если мне резка нужна только по контуру и по сути не имеет смысла указывать область? Я не могу разобраться, но при этом получить некачественный продукт тоже не хочется из-за тонкостей
В этой статье мы расскажем вам, как создать яркий эффект модного стикера, который вы уже могли видеть тут и там по всему Интернету.
Делается он очень просто, в то же время стикер отлично смотрится на веб-страницах, например, в качестве изображения ссылки на RSS - канал. Читайте дальше, чтобы узнать, как создать его всего за несколько шагов, а также как очень просто создать эффект 3D текста .
Файлы к статье
Если вы являетесь участником PSD PRO , то PSD файл и многое другое вы можете скачать здесь .
Введение
Этот эффект выглядит действительно здорово, и я уверен, что вы обратили на него внимание в RSS -каналах и блоках комментариев или в других подобных местах. Достигается он очень просто.
Я настоятельно рекомендую вам скачать PSD -файл к этой статье, он особенно пригодится в последних шагах этого пособия. Я также хотел бы посмотреть, как вы творчески подойдете к вопросу и создадите свои собственные стикеры:
ШАГ 1
Начните с создания нового документа с размерами 10 на 10 пикселей. Далее нам нужно создать сетку, перейдите в Редактирование - Установки - Сетка и установите для нее основные метки через 5 пикселей, дополнительные - через 1 пиксель. Проверьте, отображается ли сетка. Если нет, нажмите Ctrl + ' . Чтобы следующий шаг был еще проще, подключите режим Snap , Вид - Прикрепить :
ШАГ 2
Теперь просто нарисуйте вертикальную линию, затем горизонтальную так, чтобы изображение выглядело так ка на картинке ниже. Перейдите в Редактирование - Определить узор , сохраните узор и закройте этот документ:
ШАГ 3
Создайте новый документ с размерами 500 на 500 пикселей, затем создайте новый слой, нажмите D, чтобы сбросить цвета, а затем нажмите Ctrl + Backspace , чтобы заполнить этот слой белым. Щелкните правой кнопкой мыши на этом слое, выберите параметры наложения и добавьте наложение узора, используя настройки, приведенные ниже:
ШАГ 4
Выберите инструмент « Текст » и введите какой-нибудь текст. Если вы перейдете в Окно - Символы , вам будет выведен редактор символов, в котором вы сможете настроить параметры текста.
ШАГ 5
Откройте меню « Опции смешивания » для слоя с текстом и добавьте обводку с настройками, показанными на рисунке ниже, в качестве цвета используйте темно-синий:
ШАГ 6
Теперь мы хотим придать тексту 3D -вид. Есть несколько способов сделать это, но большинство из них довольно сложны, а нам в то же время не нужна большая точность. Поэтому, во-первых, создайте новый слой и выберите точку схождения, которую я обозначил просто черной точкой.
Если точка схождения находится ниже текста, это создает впечатление, что мы смотрим на текст снизу, если точка выше текста, то будет казаться, что мы смотрим на текст сверху. То же самое правило применяется для размещения точки схождения слева или справа. Элементы, как правило, выделяются лучше и выглядят большими, если мы ставим точку схождения ниже объекта, как сделал и я.
Затем я выбрал инструмент « Линия » и провел касательные от точки схождения до внешних краев текста. Если вы до этого делали какие-либо технические чертежи или графики, то это должно быть довольно просто для вас. Посмотрите на приведенное ниже изображение, если вы не понимаете, о чем я говорю:
ШАГ 7
Создайте новый слой и переместите его ниже слоя с текстом и проверьте, чтобы у него был тот же цвет переднего плана, который мы использовали раньше. Выберите инструмент « Прямолинейное лассо » и выделите область в пределах перспективных направлений, затем нажмите Alt + Backspace , чтобы заполнить ее темно-синим цветом.
Сделайте это для всех линий. Если вы все сделали правильно, у вас должен получиться тот же эффект, который показан на рисунке ниже:
ШАГ 8
Теперь нам нужно избавиться от части элементов проекции внизу. С помощью инструмента « Прямолинейное лассо » снова выделите область вокруг острия проекции, а затем нажмите « Удалить ». Вы также можете использовать маску слоя, если хотите иметь возможность позже вернуться к этому элементу и изменить что-то. Вы также можете удалить все линии перспективы:
ШАГ 9
Ниже я показал, как выглядит в этот момент моя панель слоев. Убедитесь, что текстовый слой и 3D слой находятся в группе. Теперь щелкните правой кнопкой мыши на группе слоев и выберите опцию « Преобразовать в смарт-объект ». Если такой опции в меню нет, то вернитесь назад и щелкните левой кнопкой мыши на группе слоев и нажмите Ctrl + E , чтобы объединить их в группу:
ШАГ 10
Кликните правой кнопкой мыши на объединенном слое или смарт-объекте, перейдите к параметрам наложения и задайте для тени и обводки параметры, приведенные на рисунке ниже:
ШАГ 11
Теперь нажмите Ctrl + T , чтобы войти в режим « Свободное трансформирование », а затем переместите и измените размеры слоя, как показано на рисунке ниже:
ШАГ 12
Теперь вы можете добавить некоторые дополнительные элементы; я кратко опишу, что я сделал. Я трансформировал слой узора и добавил фильтр « Свертывание », используя облака, в качестве карты. Я также поместил слой облаков выше слоя узора и установил для него режим смешивания – « Наложение ». Затем я использовал кисть-брызги с размером 3 пикселя, чтобы создать эффект чернильного пятна:
Читайте также: