Luo hehkuva neon-tekstin vaikutus

Sep 12, 2025
Miten tehdään

Usein se on yksinkertaisimmat vaikutukset, jotka näyttävät kaikkein silmiinpistävistä, ja neon-teksti on yksi tällainen hanke. On myös paljon helpompaa luoda neon-vaikutus, joka näyttää realistiselta kuin luulisi. Vaikka tämä koko opetusohjelma käyttää vain yhtä taustakuvaa, aivosi temppuja näkemään tämän todellisena, toimivat neonimerkki - se on voima Photoshop CC Kernatyylit. Lisätietoja Hämmästyttävät asiat, joita voit tehdä Photoshopin kerroksilla täällä .

Se, että tämä koko projekti on rakennettu tyhjästä - fontista hehkujen väreihin, lopulliseen animaatioon - tarkoittaa, että luovuudelle on paljon mahdollisuuksia. Voit valita tarkalleen, mitä haluat kaikki tämän vaikutuksen osan näyttää.

Neon on edelleen suosittu. Näytetään tyydyttyneitä sävyjä pimeää vasten, mykistetty tausta on erinomainen tapa esittää a aloitussivu , a Logon suunnittelu tai otsikko, ja se on helppo animoida työsi ja tallentaa sen GIF: ksi, jossa on alhainen tiedostokoko (pidä tiedostot turvassa pilvivarasto ). Sukellaan siihen, miten voit luoda sen.

Fontin luominen näytetään uudella verkkosivustolla? Sinä tarvitset Verkkosivuston rakentaja ja erinomainen sivujen ylläpito .

01. Aloita fontin luominen

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

Käytä Photoshopin kynätyökalua piirtääksesi ensimmäisen kirjaimen

Luo uusi asiakirja 550x550px Photoshopissa ja tuoda ruudukko lyömällä cmd / ctrl + ' . Luo uusi kerros ja kynätyökalu, piirrä ensimmäinen kirjain. Jätä aukkoja hahmolla, sillä se tulee olemaan neon-tyyppinen kirjasin. Kun olet onnellinen, osuma aivohalvaus polkujen välilehdessä vetämään kirjeeseen.

02. Työskentele aakkoset

dollar and pounds signs in Photoshop

Älä unohda erikoismerkkejä

Luo niin monta merkkiä kuin haluat, kynä uudella kerroksella joka kerta. Jos haluat, lisää joitakin erikoismerkkejä, kuten valuuttasymbolit, välimerkit ja korostetut kirjaimet. Noudata samaa perustyylyä, jonka aloitti, joten fontti on yhtenäinen.

03. Siirry FontCreatoriin

fontcreator trial

On ilmainen kokeilu fontcreator käytettävissä, jos tarvitset sitä

Jos sinulla on Korkea logiikka fontti , tämä on osa, jossa voit kääntää hahmosi fonttiin. Jos et ole käytettävissä ilmainen kokeiluversio. Liittämällä jokainen merkki fonteiksi, voimme luoda käyttökelpoisen kirjasimen Photoshopille.

Työskentele tiesi FontCreatorin kautta kaksoisnapsauttamalla kumpaakin merkkiä ja liittämällä kynän piirretty työ. Varmista, että jokainen kirjain on samassa lähtötasossa.

04. Kern teksti

check your kerning

Aina kaksinkertainen tarkistaa ything

Kerning on kunkin kirjaimen välinen tila (lisätietoja, katso meidän typografinen sanasto ) ja auto-ytimen vaihtoehto fonturilla luonnollisesti tilat pois kirjaimistasi niin, että fontti näyttää siistinä. Kokeile tätä vaihtoehtoa ja varmista, että jokainen kirjain näyttää hyvältä yhdessä.

Kun se on valmis, vie fontti ja asenna se tietokoneeseen. Tämä lisää sen automaattisesti Photoshop CC: lle.

05. Aseta Photoshop-asiakirja

photoshop document palette

Käytä ehdotettua palettiamme tai luo oma

Luo uusi asiakirja Photoshopissa. Uudessa kerroksessa luo väripaletti käyttämällä suurta harjaa. Menimme # 501D26, # AF273D, # F74663, # FFDAE1, # 35E985 ja # B2DCC4.

Etsi sitten sopiva taustakuva ja vedä se Photoshopiin. Luo uusi kerros, täytä se syvä punainen väri ja kaksoiskappale. Aseta yksi kerros moninkertaistaa ja yksi väri. Luo kirkkaus / kontrastikerros ja aseta -75 kirkkaudessa. Kopioi tämän ja peittää keskuksen vignetteille.

06. Syötä teksti

default text in Photoshop

Kirjoita joitakin tekstiä ja raskaa

Tartu tyypin työkaluun ja valitse fontti (jos et ole luonut fonttia aiemmin, aseta jokaiselle kirjaimelle erikseen). Kirjoita teksti ennen Ctrl + hiiren kakkospainikkeella kerros ja valitsemalla rasterointityyppi.

07. Luo hehku

add a bevel in Photoshop

Anna tekstisi hieman syvyydestä, jossa on kaunis viisto

CTRL + Napsauta hiiren kakkospainikkeella kerros ja siirry sekoitusvaihtoehtoihin & gt; Ulkoinen hehku. Siellä syötetään 50%: n läpinäkyvyys, 5%: n leviäminen ja koko 63px. Nyt voit nähdä neon-tekstin alkavan paljon realistisemmalta. Valitse kirkas väri.

Klikkaa Bevel ja kohokuvio, vielä kerroksessa tyylit-vaihtoehdolla. Valitse syvyys: 250%, koko: 5px, pehmennys: 2px. Lisää korostus- ja varjotilat lisäämällä hieman syvyyttä tekstille ja toista näillä vaihtoehdolla, kunnes löydät oikean sekoittimen.

08. Toista varjoilla

drop shadow in Photoshop

Älä sekoita ulkoa hehkua pudotusvarjossa

Sisälle varjosta valitsee sama kirkas väri, jonka olet valinnut ulkoreholle. Kaikki sinun täytyy muokata tässä on koko riippuen siitä, kuinka suuri teksti on. Muuttaa tätä ja jätä kaikki muut arvot 0: een.

Kun neon-teksti istuu hieman seinästä hieman, tarvitsemme hienovaraisen pudotuksen, mutta ei liikaa, koska emme halua vaarantaa ulomman hehkun. Käytä alhaalla läpinäkyvyyttä ja anna tätä muuta etäisyyttä ja kokoa.

09. Syttyy se

string added to text in Photoshop

Varmista, että merkkijono seuraa kaikkia merkkejä

Siirry tekstikerrokseen, ctrl / Napsauta hiiren kakkospainikkeella ja valitse Kopioi kerrostyylit. Napsauta eläinkerroksessa, ctrl / Napsauta hiiren kakkospainikkeella ja valitse Liitä Layer-tyylit. Kaksoisnapsauta FX-kuvaketta ja käännä vaaleanpunaiset värit vihreälle hieman kontrastia tekstiin.

Tartu kynätyökaluun ja luo merkkijono neon-tekstin kautta ja eläimet, jotka olet luonut. Varmista, että se seuraa kaikkien merkkien kautta ja sitten aivohalvaus # 808080: lla, jossa on 2px-harja, joka on valittu 1% etäisyydellä.

10. Lisää pudotusvarjo

add a drop shadow in Photoshop

Anna merkkijono viiste ja hieman pudotusvarjo

Siirry juuri tehdylle merkkijonolle. Päätä viistolle antamaan sille hienovarainen muoto ja anna sille hienovaraisen pudotuksen varjo. Muuttujat riippuvat luomasi merkkijonon koosta ja muodoista, joten kokeile vain, mitä toimii.

11. Luo "OFF" -versio

flickering effect in Photoshop

Tee nyt hehkuva kopio, jotta voit luoda vilkkuvan vaikutuksen

Luotaan tekstin kerros, joka ei hehkuu, joten voimme animoida välkkyä joillakin kirjaimilla. Kopioi tekstikerroksen ja piilota sitten ulompi hehku tyyli. Aseta sisäinen varjo # 808080: een ja muuta sitten tämän kerroksen keveyttä -50: een käyttämällä sävy / kylläisyyttä ( cmd / ctrl + U ).

Hehkuva tekstikerroksessa napata Marquee-työkalu ja valitse muutamia kirjaimia, jotka haluat katkaista lyhyesti animaatiossa. Tee tämän kerroksen päällekkäisyyksiä näillä kirjaimilla peitetään, kunnes sinulla on riittävät kerrokset animaation luomiseksi.

12. Animoi suunnittelu

export animation as a gif in Photoshop

Vienti animoituna GIF ja olet hyvä mennä

Siirry Photoshopin yläreunaan ja valitse M. Workspace-vaihtoehto. Animaatio-aikajana tulee näkyviin alareunassa; Tässä voit määrittää, mitkä kerrokset näytetään tai piilotetaan kuitenkin pitkään haluat niiden olevan.

Luo uusia kehyksiä pohjaan eri kirjaimilla joko hehkuva tai hehkuva riippuen siitä, onko kerros näkyvissä vai ei. Aseta kunkin kerroksen animaation aika kunkin kehyksen pienellä nuolella. Tallenna GIF: n avulla Tallenna Web.

Tämä artikkeli julkaistiin alun perin Web Designerissa, Creative Web Design Magazine - tarjosi asiantuntija-opetusohjelmia, huippuluokan trendejä ja ilmaisia resursseja. Tilaa Web-suunnittelija tähän .

Aiheeseen liittyvät artikkelit:

  • 40 Täytyy nähdä esimerkkejä kineettisestä typografiasta
  • Miten luoda animoitu kirjoitusteho
  • Luo oma 3D-kirjasin

Miten tehdään - Suosituimmat artikkelit

Kuinka venyttää kankaalle ja perustaa öljymaaleja

Miten tehdään Sep 12, 2025

(Kuva luotto: Getty Images) Tervetuloa oppaanamme, miten venyttää kankaalle ja perustaa öljymaaleja. Venyttämäll..

Käytä Frameer X: tä interaktiivisten prototyyppien rakentamiseksi

Miten tehdään Sep 12, 2025

(Image Credit: Framer) Suunnittelijana on aina kysymys siitä, mitä prototyyppityökaluja sinun pitäisi käyttää ..

Luo animoitu CSS-taide

Miten tehdään Sep 12, 2025

(Kuva luotto: Tiffany Choong) CSS-kuvien luominen on hauska tapa harjoittaa taitojasi ja luoda siisti taideteos. Se o..

Master-versionohjaus syrjäisille joukkueille

Miten tehdään Sep 12, 2025

Työskentely etänä on tullut paljon yleisempi web-kehityksessä viime vuosina. Ennen version valvontaa, joka toimii etänä sam..

Kuinka rakentaa monimutkaisia ​​asetteluja käyttämällä CSS

Miten tehdään Sep 12, 2025

Layout for Web on aina ollut rajoitettu, ei todellakaan ole koskaan ollut mitään todella sitoutunut tekemään sisältöä help..

Kuinka luoda RedShift-välityspalvelimen elokuvateatteri 4d

Miten tehdään Sep 12, 2025

Cinema 4D On suuri monissa asioissa, mutta se voi hidastua, kun se on paljon esineitä paikalla, mikä on todellinen ..

Muunna kuva VR-sarjaan

Miten tehdään Sep 12, 2025

Tyypillisesti kun joku mainitsee lisäsi todellisuutta tai virtuaalista todellisuutta, he ajattelevat videopelejä. On tärkeää..

Harley Quinn

Miten tehdään Sep 12, 2025

Minulle digitaalisen valituksen Maalaustekniikat ovat yksinkertaisia. Toisin kuin perinteiset tiedotusvälineet, v..

Luokat