Създайте светещ неонов текстов ефект
Често най-простите ефекти изглеждат най-поразителни, а неоновият текст е един такъв проект. Също така е много по-лесно да създадете неонов ефект, който да изглежда реалистичен, отколкото си мислите. Докато целият този урок използва само едно фоново изображение, мозъкът ви се подлъгва да види това като истински, функциониращ неонов знак - това е силата на Photoshop CC стилове на слоя. Научете повече за невероятни неща, които можете да направите със слоевете на Photoshop тук .
Фактът, че целият този проект е изграден от нулата - от шрифта до цветовете на сиянието до евентуалната анимация - означава, че има много възможности за творчество. Можете да изберете точно как искате да изглежда всяка част от този ефект.
Neon продължава да бъде популярен. Показването на наситени тонове на тъмен, заглушен фон е чудесен начин да представите а целевата страница , да се дизайн на лого или заглавка и е лесно да анимирате работата си и да я запазите като GIF с нисък размер на файла. Нека да се потопим в това как да го създадем.
01. Започнете да създавате шрифта
Създайте нов документ 550x550px във Photoshop и изведете мрежата, като натиснете cmd / ctrl + ' . Създайте нов слой и с инструмента Pen нарисувайте първата си буква. Оставете пропуски в характера, тъй като това ще бъде шрифт в неонов стил. След като сте доволни, натиснете Stroke в раздела Paths, за да нарисувате писмото.
02. Работете по азбуката
Създавайте толкова символи, колкото искате, с писалката на нов слой всеки път. Ако искате, добавете някои специални знаци, като символи за валута, пунктуация и букви с ударение. Следвайте същия основен стил, с който сте започнали, така че шрифтът ви е сплотен.
03. Преместване във FontCreator
Ако имате High-Logic FontCreator , това е частта, в която можете да превърнете символите си в шрифт. Ако не го направите, е наличен безплатен пробен период. Чрез поставяне на всеки символ в FontCreator, можем да създадем използваем шрифт за Photoshop.
Работете през FontCreator, като щракнете двукратно върху всеки знак и поставите във вашата рисувана с писалка работа. Уверете се, че всяка буква е на една и съща базова линия.
04. Кернирайте текста си
Кернинг е интервалът между всяка от буквите (за повече информация разгледайте нашата типографски речник ), а опцията Auto-kerning в FontCreator естествено раздалечава буквите ви, така че шрифтът да изглежда чист. Опитайте тази опция и се уверете, че всяка буква изглежда добре заедно.
След като приключи, експортирайте шрифта си и го инсталирайте в компютъра си. Това автоматично ще го добави към Photoshop CC.
05. Настройте документ в Photoshop
Създайте нов документ в Photoshop. На нов слой създайте цветна палитра с помощта на голяма четка. Отидохме с # 501d26, # af273d, # f74663, # ffdae1, # 35e985 и # b2dcc4.
След това намерете подходящо фоново изображение и го плъзнете във Photoshop. Създайте нов слой, запълнете го с тъмночервен цвят и дублирайте. Задайте един слой на Multiply и един на Color. Създайте слой Brightness / Contrast и задайте -75 в Brightness. Дублирайте това и маскирайте центъра за винетка.
06. Въведете текста
Вземете инструмента Type и изберете вашия шрифт (ако не сте създали шрифт по-рано, просто поставете във всяка буква поотделно). Напишете текста си преди ctrl + щракване с десния бутон слоя и изберете Rasterize Type.
07. Създайте блясък
ctrl + щракване с десния бутон слоя и отидете на Blending Options> Outer Glow. Там въведете непрозрачност от 50%, спред от 5% и размер от 63px. Сега можете да видите как неоновият ви текст започва да изглежда много по-реалистично. Изберете ярък цвят.
Кликнете върху Bevel and Emboss, все още в опцията Layer Styles. Изберете Дълбочина: 250%, размер: 5px, Омекотете: 2px. Използвайте режимите Highlight и Shadow, за да добавите малко повече дълбочина към текста и играйте с тези опции, докато намерите правилния микс.
08. Поиграйте със сенки
За Inner Shadow изберете същия ярък цвят, който сте избрали за Outer Glow. Всичко, което трябва да редактирате тук, е размерът, в зависимост от това колко голям е текстът. Променете това и оставете всички останали стойности на 0.
Тъй като неоновият текст ще седи леко от стената, ще ни трябва фина сянка, но не прекалено, тъй като не искаме да компрометираме външния блясък. Използвайте ниска непрозрачност и придайте на тази още малко разстояние и размер.
09. Запалете го
Отидете до текстовия слой, ctrl / щракнете с десния бутон и изберете Copy Layer Styles. Кликнете върху слоя с животни, ctrl / щракнете с десния бутон и изберете Поставяне на стилове на слоеве. Щракнете двукратно върху иконата FX и превърнете розовите цветове в зелено за малко контраст с текста.
Вземете инструмента за писалка и създайте низ през неоновия текст и животните, които сте създали. Уверете се, че той преминава през всички символи, и след това щрихнете с # 808080, с четка 2px, избрана с 1% разстояние.
10. Добавете падаща сянка
Отидете на Blending Options за низа, който току-що сте направили. Насочете се към Bevel, за да му придадете фина форма и да му придадете и фина сянка. Променливите тук зависят от размера и формата на низа, който сте създали, така че просто експериментирайте, за да видите какво работи.
11. Създайте „изключена“ версия
Нека създадем слой текст, който не свети, за да можем да анимираме трептене върху някои от буквите. Дублирайте текстовия слой, след което скрийте стила Outer Glow. Задайте Inner Shadow на # 808080, след това променете лекотата на този слой на -50, като използвате Hue / Saturation ( cmd / ctrl + U ).
На светещия текстов слой вземете инструмента Marquee и изберете няколко букви, които искате да изключите за кратко в анимацията. Направете дублирания на този слой, като тези букви се маскират, докато имате достатъчно слоеве за създаване на анимация.
12. Анимирайте своя дизайн
Отидете в горния десен ъгъл на Photoshop и изберете Motion като опция Workspace. Хронологията на анимацията ще се появи отдолу; тук можете да определите кои слоеве да се показват или скриват, колкото и дълго да искате.
Създайте нови рамки по дъното с различни букви, светещи или не светещи, в зависимост от това дали слоят е видим или не. Задайте времето на анимацията на всеки слой, като използвате и стрелката на всеки кадър. Запазете като GIF с помощта на Save For Web.
Тази статия първоначално е публикувана в Web Designer, креативното списание за уеб дизайн - предлага експертни уроци, модерни тенденции и безплатни ресурси. Абонирайте се за Web Designer тук .
Свързани статии:
