Vytvořit zářící neonový textový efekt

Sep 13, 2025
jak

Často je to nejjednodušší účinky, které vypadají nejvýraznější a neonový text je jeden takový projekt. Je také mnohem snazší vytvořit neonový efekt, který vypadá realisticky, než si můžete myslet. Zatímco celý tutoriál používá pouze jeden obrázek na pozadí, vaše mozek triky, aby to viděl jako skutečný, fungující neonový nápis - to je síla Photoshop CC. Styly vrstev. Dozvědět se více o Úžasné věci, které můžete udělat s Photoshopovými vrstvami zde .

Skutečnost, že tento celý projekt je postaven od nuly - od písma k barvám záře, do případné animace - znamená, že existuje spousta rozsahu pro kreativitu. Můžete si vybrat přesně to, co chcete, každá část tohoto efektu vypadat.

Neon je i nadále populární. Zobrazení nasycených tónů proti tmavému, tlumenému pozadí je skvělý způsob, jak prezentovat přistávací stránka A. vzhled loga nebo záhlaví, a je snadné oživit svou práci a uložit ji jako gif s nízkou velikost souboru (uchovávejte soubory v bezpečí cloudové úložiště ). Pojďme se ponořit, jak to vytvořit.

Vytvoření písma, která má být zobrazena na nové webové stránce? Potřebuješ Webové stránky Builder. a vynikající web hosting .

01. Začněte vytvářet písmo

Use Photoshop's Pen tool to draw the letter 'a'

Použijte nástroj Photoshop's Pen Tool pro kreslení prvního dopisu

Vytvořte nový dokument 550x550Px ve Photoshopu a vyvolejte mřížku zasáhnutím CMD / Ctrl + ' . Vytvořte novou vrstvu a s nástrojem pera, nakreslete své první písmeno. Nechte mezery podle charakteru, protože to bude neonový písmý styl. Jakmile budete šťastný, stiskněte tahu v záložce Cesty, abyste kreslili v písmenu.

02. Práce přes abecedu

dollar and pounds signs in Photoshop

Nezapomeňte na speciální znaky

Vytvořte tolik znaků, kolik chcete, s perem na nové vrstvě pokaždé. Pokud chcete, přidejte některé speciální znaky, například symboly měny, interpunkční a akcentované písmena. Sledujte stejný základní styl, se kterými jste začali, takže vaše písmo je soudržné.

03. Přesuňte se do fontcreator

fontcreator trial

Pokud potřebujete, je k dispozici bezplatný proces fontcreator

Pokud máte High-logická fontcreator Toto je část, kde můžete své postavy otočit do písma. Pokud ne, je k dispozici bezplatný proces. Vložením každého znaku do Fontcreator můžeme vytvořit použitelný písmo pro Photoshop.

Pracujte svou cestu přes FontCreator dvojitým kliknutím na každý znak a vkládání v pera-tažené práci. Ujistěte se, že každý dopis je na stejné základní linii.

04. Kern váš text

check your kerning

Vždy dvakrát zkontrolujte svůj kerning

Kerning je prostor mezi každou z písmen (Další informace se podívejte na naše Typografický slovníček ) a auto-kerning možnost v rámci Fontcreator přirozeně prostý vaše dopisy tak, aby písmo vypadalo čisté. Vyzkoušejte tuto možnost a ujistěte se, že každý dopis vypadá dobře.

Po dokončení exportujte písmo a nainstalujte jej do počítače. To automaticky přidá do aplikace Photoshop CC.

05. Nastavte dokument Photoshop

photoshop document palette

Použijte naši navrhovanou paletu nebo si vytvořte vlastní

Vytvořit nový dokument ve Photoshopu. Na nové vrstvě vytvořte paletu barev pomocí velkého kartáče. Šli jsme s # 501d26, # AF273D, # F74663, # FFdae1, # 35E985 a # B2DCC4.

Pak najděte vhodný obrázek na pozadí a přetáhněte jej do aplikace Photoshop. Vytvořte novou vrstvu, vyplňte ji tmavě červenou barvu a duplikát. Nastavte jednu vrstvu pro násobit a jeden k barvě. Vytvořte jas / kontrastní vrstvu a nastavte na -75 v jasu. Duplikát to a maskovat centrum pro viněta.

06. Zadejte text

default text in Photoshop

Typ v nějakém textu a rastroti

Uchopte nástroj typu a vyberte písmo (pokud jste nevytvořili písmo dříve, stačí umístit v každém písmenu individuálně). Vysvětlit svůj text dříve Ctrl + Kliknutí pravým tlačítkem myši Vrstva a výběr typu rasterize.

07. Vytvořte záře

add a bevel in Photoshop

Dejte svůj text trochu hloubka s krásným zkosením

Ctrl + Klikněte pravým tlačítkem myši vrstva a přejděte na možnosti míchání & gt; Vnější záře. Vstupuje o opacity 50%, šíření 5% a velikosti 63px. Nyní můžete vidět, že váš neonový text začíná vypadat mnohem realističtější. Vyberte jasnou barvu.

Klikněte na zkosení a emboss, stále ve volbě stylů vrstev. Zvolte Hloubku: 250%, Velikost: 5px, změkčení: 2px. Pomocí režimů zvýraznění a stínu přidáte o něco více hloubky textu a přehrávejte s těmito možnostmi, dokud nenajdete správnou mix.

08. Hrát se stíny

drop shadow in Photoshop

Nenechte se zjistit svou vnější záři s poklesem stínu

Pro vnitřní stín vyberte stejnou jasnou barvu, kterou jste si vybrali pro vnější záře. Vše, co potřebujete upravit, je velikost, v závislosti na tom, jak velký text je. Změnit a nechat všechny ostatní hodnoty při 0.

Vzhledem k tomu, že neonový text bude lehce sedět ze zdi, budeme potřebovat jemný pokles stín, ale ne příliš, protože nechceme kompromis vnější záře. Použijte nízkou opacitu a dejte tuto další vzdálenost a velikost.

09. Zapálte to

string added to text in Photoshop

Ujistěte se, že řetězec následuje všechny znaky

Jděte do textové vrstvy, Ctrl. / Klepněte pravým tlačítkem myši a zvolte Kopírovat styly vrstev. Klikněte na zvířecí vrstvu, Ctrl. / Klepněte pravým tlačítkem myši a zvolte styly pasty vrstvy. Poklepejte na ikonu FX a otočte růžové barvy na zelenou na malý kontrast k textu.

Uchopte nástroj pera a vytvořte řetězec přes text Neon a zvířata, která jste vytvořili. Ujistěte se, že následuje všechny znaky, a pak tah s # 808080 s 2Px kartáčem vybraným 1% odstupem.

10. Přidejte drop-stín

add a drop shadow in Photoshop

Dejte šňůru zkosení a trochu poklesu stínu

Jděte do možností prolnutí pro řetězec, který jste právě provedli. Hlava k Bevelovi, aby mu dal jemný tvar a dá mu taky jemný pokles stín. Proměnné zde závisí na velikosti a tvaru vytvořeného řetězce, takže jen experimentovat, jak funguje.

11. Vytvořte verzi "OFF"

flickering effect in Photoshop

Nyní proveďte non-zářící kopii, abyste mohli vytvořit blikající efekt

Vytvořme vrstvu textu, který není zářící, takže můžeme oživit blikání na některých písmen. Duplikovat textovou vrstvu, pak skryjte styl vnějšího záře. Nastavte vnitřní stín na # 808080, pak změňte světlo této vrstvy na -50, pomocí odstínu / nasycení ( CMD / Ctrl. +. U. ).

Na zářící textové vrstvě uchopte nástroj Marquee a vyberte několik písmen, které chcete krátce vypnout v animaci. Proveďte duplikace této vrstvy, s těmito písmeny maskovány, dokud nebudete mít dostatečné vrstvy k vytvoření animace.

12. Animovat svůj design

export animation as a gif in Photoshop

Export jako animovaný gif a je dobré jít

Přejděte na vpravo od Photoshopu a vyberte možnost Motion jako možnost pracovního prostoru. Časová osa animace se zobrazí na dně; Zde můžete definovat, které vrstvy jsou zobrazeny nebo skryté, nicméně dlouho chcete být.

Vytvořit nové rámečky podél spodní části s různými písmeny buď zářící nebo neříkající, v závislosti na tom, zda je vrstva viditelná nebo ne. Nastavte čas animace každé vrstvy pomocí malé šipky na každém snímku. Uložit jako gif pomocí uložení pro web.

Tento článek byl původně publikován ve Web Designer, the Creative Web Design Magazine - nabízet odborné konzultace, špičkové trendy a volné zdroje. Přihlásit se zde web designer zde .

Související články:

  • 40 Must-viz příklady kinetické typografie
  • Jak vytvořit animovaný typ psaní
  • Vytvořte si vlastní 3D písmo

jak - Nejoblíbenější články

8 State-of-the-art CSS funkce (a jak je používat)

jak Sep 13, 2025

(Image Credit: Getty Images) CSS se neustále rozvíjí a hostitele vzrušujících nových funkcí bylo přidáno, a..

8 Úžasný nový grafický návrhový návod

jak Sep 13, 2025

Ať už právě začínáte v grafickém designu nebo ochuceném pro, je vždy něco nového naučit se naučit, pokud chcete zůstat před hrubou. Grafický design je taková rozsáhlá disc..

Vytvoření 3D textu v aplikaci Photoshop: Průvodce krok za krokem

jak Sep 13, 2025

V tomto tutoriálu vám ukážeme, jak vytvořit kus 3D umění představovat realistický trojrozměrný textový..

3 Tipy pro Crafting Ohromující tisk Propagační materiál

jak Sep 13, 2025

Ve stále více digitálním světě má chytře vytvořený tisk propagačního materiálu sílu, aby se vážný dopad. Možná..

Jak malovat atmosférický portrét ve Photoshopu

jak Sep 13, 2025

Malování Portrét může být obtížný úkol. I když jste zvládli Jak nakreslit obličej Můžete snadno sko..

mokré mokré v oleji

jak Sep 13, 2025

Malování 'Alla Prima' (to je, malování mokrého mokra, v jednom sezení) je ideální technikou pro všeobjímající povahu ..

Vytvořit herní prostředí v neskutečném motoru 4

jak Sep 13, 2025

Použití mého neskutečného motoru 4 Projekt Poslední zastávku jako příklad, chci vám ukázat nějaké důležité kroky,..

Jak vytvořit stylizovaný 3D znak pro hry

jak Sep 13, 2025

Tento 3D umění TUTORIAL se zaměří na vytvoření polosmicizovaného avataru v Iclone charakteru Creator. Prok..

Kategorie