Luo hehkuva neontekstiefekti

Usein yksinkertaiset vaikutukset näyttävät silmiinpistävimmiltä, ​​ja neonteksti on yksi tällainen projekti. On myös paljon helpompaa luoda neonefekti, joka näyttää realistiselta kuin luulisi. Vaikka tämä koko opetusohjelma käyttää vain yhtä taustakuvaa, aivosi temppuaa itsensä näkemään tämän todellisena, toimivana neonmerkinä - se on Photoshop CC kerroksen tyylit. Lisätietoja hämmästyttäviä asioita, joita voit tehdä Photoshopin kerroksilla täällä .

Se, että koko tämä projekti on rakennettu tyhjästä - kirjasimesta hehkun väreihin mahdolliseen animaatioon, tarkoittaa, että luovuudella on paljon mahdollisuuksia. Voit valita juuri sen, minkä haluat tämän vaikutelman jokaisen osan näyttävän.

Neon on edelleen suosittu. Tyydyttyneiden sävyjen esittäminen tummaa, mykistettyä taustaa vasten on loistava tapa esittää a aloitussivu , Logon suunnittelu tai otsikko, ja on helppo animoida työsi ja tallentaa se GIF-tiedostoksi, jolla on pieni tiedostokoko. Sukelletaan miten se luodaan.



01. Aloita kirjasimen luominen

Käytä Photoshopia

Piirrä ensimmäinen kirjain Photoshopin kynätyökalulla

Luo uusi 550x550px-asiakirja Photoshopissa ja tuo ruudukko esiin cmd / ctrl + ' . Luo uusi kerros ja piirrä kynä-työkalulla ensimmäinen kirjaimesi. Jätä merkkiin aukkoja, koska se tulee olemaan neon-tyylinen kirjasinlaji. Kun olet onnellinen, paina Stroke Polut-välilehdessä piirtääksesi kirjeen.

02. Työskentele aakkosten läpi

dollarin ja punnan merkkejä Photoshopissa

Älä unohda erikoismerkkejä

Luo niin monta merkkiä kuin haluat, kynällä aina uusi kerros. Jos haluat, lisää eräitä erikoismerkkejä, kuten valuuttasymboleita, välimerkkejä ja aksenttikirjaimia. Seuraa samaa tyyliä kuin aloitit, joten kirjasimesi on yhtenäinen.

03. Siirry FontCreatoriin

fontcreator-kokeilu

FontCreatorin ilmainen kokeiluversio on käytettävissä, jos tarvitset sitä

Jos sinulla on High-Logic FontCreator , tämä on osa, jossa voit muuttaa hahmosi fontiksi. Jos et, niin ilmainen kokeiluversio on käytettävissä. Liittämällä kukin merkki FontCreatoriin voimme luoda käyttökelpoisen kirjasimen Photoshopiin.

Työnnä läpi FontCreatorin kaksoisnapsauttamalla kutakin merkkiä ja liittämällä kynän piirustuksessa. Varmista, että jokainen kirjain on samalla perusviivalla.

04. Kern tekstiäsi

tarkista ytimesi

Tarkista aina ytimesi

Kerning on jokaisen kirjaimen välinen tila (lisätietoja tutustumalla meidän kirjaimiin) typografinen sanasto ), ja FontCreatorin Auto-kerning-vaihtoehto jättää kirjaimet luonnollisesti siten, että fontti näyttää siistiltä. Kokeile tätä vaihtoehtoa ja varmista, että jokainen kirjain näyttää hyvältä yhdessä.

Winsor- ja Newton-harjat -sarja 7

Kun se on valmis, vie kirjasimesi ja asenna se tietokoneellesi. Tämä lisää sen automaattisesti Photoshop CC: hen.

05. Määritä Photoshop-asiakirja

Photoshop-asiakirjapaletti

Käytä ehdotettua palettiamme tai luo oma

Luo uusi asiakirja Photoshopissa. Luo uudelle kerrokselle väripaletti isolla harjalla. Menimme # 501d26, # af273d, # f74663, # ffdae1, # 35e985 ja # b2dcc4.

Etsi sitten sopiva taustakuva ja vedä se Photoshopiin. Luo uusi kerros, täytä syvä punainen väri ja kopioi. Aseta yksi kerros kerrottavaksi ja yksi väri. Luo kirkkaus / kontrasti -kerros ja aseta kirkkaudeksi -75. Kopioi tämä ja peitä vinjetti keskelle.

06. Syötä teksti

oletusteksti Photoshopissa

Kirjoita tekstiä ja rasteroi se

Tartu Type-työkaluun ja valitse kirjasin (jos et luonut kirjasinta aikaisemmin, aseta vain jokaiseen kirjaimeen erikseen). Kirjoita teksti ennen ctrl + hiiren kakkospainikkeella ja valitsemalla Rasterize Type.

07. Luo hehku

lisää viiste Photoshopiin

Anna tekstillesi hieman syvempää viehättävällä viistolla

ctrl + hiiren kakkospainikkeella ja siirry kohtaan Sekoitusasetukset> Ulkohehku. Syötä siellä 50%: n peittävyys, 5%: n leviäminen ja koko 63 kuvapistettä. Nyt voit nähdä neon-tekstisi alkavan näyttää paljon realistisemmalta. Valitse kirkas väri.

Napsauta viiste ja kohokuvio, edelleen Tasotyylit-vaihtoehdossa. Valitse syvyys: 250%, koko: 5 kuvapistettä, pehmennys: 2 kuvapistettä. Korosta ja Varjo-tilojen avulla voit lisätä tekstiin hieman enemmän syvyyttä ja toistaa näitä vaihtoehtoja, kunnes löydät oikean sekoituksen.

08. Pelaa ympäri varjoja

varjo Photoshopissa

Älä sekoita ulkoista hehkua varjoosi

Valitse Sisävarjoa varten sama kirkas väri, jonka valitsit Ulkohehkulle. Kaikki mitä sinun on muokattava tässä, on koko, riippuen tekstin suuruudesta. Muuta tätä ja jätä kaikki muut arvot nollaksi.

Koska neonteksti istuu hieman seinältä, tarvitsemme hienovaraisen varjon, mutta ei liikaa, koska emme halua vaarantaa ulkohehkua. Käytä matalaa opasiteettia ja anna tälle lisää etäisyyttä ja kokoa.

09. Sytytä se

merkkijono lisätty tekstiin Photoshopissa

Varmista, että merkkijono seuraa kaikkia merkkejä

Siirry tekstitasolle, ctrl / napsauta hiiren kakkospainikkeella ja valitse Kopioi tasotyylit. Napsauta eläinkerrosta, ctrl / napsauta hiiren kakkospainikkeella ja valitse Liitä tasotyylit. Kaksoisnapsauta FX-kuvaketta ja käännä vaaleanpunaiset värit vihreiksi, jotta tekstin kontrasti on pieni.

Tartu kynätyökaluun ja luo merkkijono neon-tekstin ja luomiesi eläinten läpi. Varmista, että se seuraa kaikkia merkkejä, ja vedä sitten numerolla # 808080 2px-harjalla, joka on valittu 1%: n välein.

10. Lisää varjo

lisää varjo Photoshopiin

Anna merkkijonolle viiste ja hieman varjo

Siirry juuri tekemäsi merkkijonon sekoitusasetuksiin. Suuntaa viistoon antaa sille hienovarainen muoto ja anna sille myös hieno varjo. Muuttujat riippuvat luomasi merkkijonon koosta ja muodosta, joten kokeile vain, mikä toimii.

11. Luo off-versio

välkkyvä vaikutus Photoshopissa

Tee nyt hehkuva kopio, jotta voit luoda välkkyvän vaikutuksen

Luodaan kerros tekstiä, joka ei hehku, jotta voimme animoida välkkymisen joillekin kirjaimille. Kopioi tekstikerros ja piilota sitten Outer Glow -tyyli. Aseta sisävarjoksi arvoksi # 808080 ja muuta sitten tämän kerroksen vaaleudeksi -50 Hue / Saturation ( cmd / ctrl + U ).

Tartu hehkuvaan tekstikerrokseen Marquee-työkalu ja valitse animaatiossa muutama kirjain, jonka haluat kytkeä pois päältä hetkeksi. Tee päällekkäisiä kerroksia peittämällä nämä kirjaimet, kunnes sinulla on riittävästi kerroksia animaation luomiseen.

12. Animoi suunnittelusi

vie animaatio gifinä Photoshopissa

Vie animoituna gifinä ja olet valmis lähtemään

Siirry Photoshopin oikeaan yläkulmaan ja valitse Liike työtilaksi -vaihtoehtona. Animaation aikajana näkyy alareunassa; tässä voit määrittää, missä tasoissa näytetään tai piilotetaan niin kauan kuin haluat niiden olevan.

Luo alareunaan uusia kehyksiä erilaisilla kirjaimilla, jotka joko hohtavat vai eivät, riippuen siitä, onko kerros näkyvissä vai ei. Aseta kunkin kerroksen animaation aika myös jokaisessa kehyksessä olevalla pienellä nuolella. Tallenna GIF-tiedostona Tallenna verkkoon -toiminnolla.

Tämä artikkeli julkaistiin alun perin Web Designerissa, luovassa verkkosivujen lehdessä - joka tarjoaa asiantuntijaopastuksia, huipputrendejä ja ilmaisia ​​resursseja. Tilaa Web Designer täällä .

Aiheeseen liittyvät artikkelit: