Efect de neon în Adobe Photoshop. Caracteristici ale culorilor neon în Web Design și crearea în Photoshop

Culori neon... atât de strălucitoare, vesele, neobișnuite... în același timp enervante și plăcute unei persoane. În mod surprinzător, pe fundalul standardelor de design web, maeștrii încă le folosesc diferite combinațiiși variații în proiectele lor. Cu toate acestea, culorile neon sunt dificil de lucrat fără a afecta designul general. Da, sunt grozave pentru logo-uri, pictograme, elemente de interfață cu utilizatorul în aplicații, pe postere, artă, dar designul web devine dificil dacă nu înțelegeți principalele probleme și caracteristici.

Astăzi vom căuta opțiuni utilizare eficientă neon (ca efect și ca culoare) în design web, luați în considerare exemple de webmasteri care au primit Awwwards și Css Design Awards și aflați cum vă poate ajuta Photoshop atunci când lucrați cu culori neon.

În general, să încercăm să devenim ninja neon!

Nuanta var

Verdele lime este un reprezentant strălucitor al culorii neon (fără efectul corespunzător), a cărei nuanță este galben-verzuie, dar nu este încă verde deschis.

Cod hexadecimal: #32cd32

Particularitatea culorii este că atunci când este combinată cu un fundal întunecat, obțineți un efect de neon real. Arată distractiv și poate atrage vizitatori pe site. Acesta este cel mai simplu mod de a adăuga neon în designul dvs. web fără a îngreuna întregul proiect. Ca exemple vreme, limegreencreative, QQ Browser (pentru Mac), newKIS, Craftedbygc, Nvidia. Toate, într-o măsură sau alta, folosesc o combinație de fundal verde strălucitor și fundal închis, dar efectul este frumos și chiar testat în timp.

curcubeu neon

În timp ce multe culori pot merge împreună și le folosim în fiecare zi, culorile neon nu reușesc să creeze un aspect general. schema de culori. Faptul este că majoritatea culorilor neon au aceleași valori de saturație și luminozitate și, prin urmare, se îmbină pe ecran și arată la fel. În consecință, există probleme cu lizibilitatea și contrastul general. Acesta este motivul pentru care webmasterii folosesc o culoare neon, dar pe un fundal de nuanță „simplu” și înconjurat de tonuri dezactivate.

Decizii îndrăznețe

Folosirea unei culori neon ca fundal în modul ecran complet este îndrăzneață. Doar fii curajos. Dar aceasta nu este o tehnică care poate fi văzută pe fiecare al doilea site, deși pentru lucrări sau variații originale, concurența și împărțirea spațiului între mai multe culori în ceea ce privește saturația este firească.

Ai grijă să păstrezi toate celelalte elemente la minim pe ecran. Nu este nevoie să pictezi și mai mult butoanele culoare strălucitoare sau creați text din arshins. Minimalismul, designul plat, tipografia simplă, fontul strict și culoarea neon vor crea mult mai mult design stilistic, strict, elegant.

Aruncă o privire mai atentă f37foundry, Funplex, Langlois, Glow Motion, NOEIN OI. Folosește culori pereche, o umplere cu o singură culoare sau un gradient de neon.

Neon și alb

Culorile neon și albul nu se amestecă niciodată, deoarece elementele neon pe un fundal alb sunt practic „izibile”. Multe culori de neon folosesc albul pentru luminozitate, astfel încât ecranul va crea ceva de genul supraexpunere și supraexpunere. Mai simplu spus: efectul de neon este efectul unei străluciri albe, iar pe un fundal alb totul se îmbină.

Branding neon

Unele companii folosesc nuanțe de neon ca culori principale ale mărcii lor. De exemplu, Nvidia- verde bogat (lai) combinat cu negru, AMD- negru, alb și roșu saturat strălucitor, Devillard- galben intens + negru, MTN DEW x NBA- verde neon în combinație cu nuanțe estompate. În acest caz, crearea unui web design este mult mai ușoară, deoarece neonul ar trebui să fie prezent, dar în cantități mici.

Nu renunta la aceasta culoare. Dimpotrivă, unde îi este convenabil să găsească perechi și să le prezinte combinația prim plan, când fundalul le va umbri și le va sublinia. Nu este necesar să umpleți întregul fundal cu neon de marcă, este suficient să creați accente pe elementele cu această culoare.

Dincolo de efecte

Neonul în sine oferă deja posibilități uimitoare pentru design și imaginație. Nu ar trebui să folosiți tot felul de efecte (animație, 3D, paralaxă etc.) împreună cu neonul. În cele din urmă, riști să conduci utilizatorii, clienții și chiar și pe tine înspre indignare și deprimare La început, totul va părea grozav, dar apoi ochii tăi se vor sătura să privească totul.

Între timp, trebuie să aducem un tribut subtilității abilității atunci când sunt folosite efecte, dar în astfel de cantități și atât de imperceptibil încât sunt aproape invizibile.

Proiect craftedbygc a creat o animație a literei G când cursorul mouse-ului o lovește. In aceasta nuanta neon sunt evidentiate si butoanele, ramele etc. Dar toate acestea sunt aproape invizibile și, prin urmare, arată frumos.

Crearea unei străluciri de neon

Efect de neon sau strălucire nu nou pe lume. Aceasta este pur și simplu culoarea strălucitoare care se vede atât de des pe panouri pe timp de noapte. Când lucrați la realismul efectului în Photoshop, se pare că nuanțele și culoarea sunt strălucitoare, ca și cum ceva trece de fapt prin ele. alb. Este important să nu înnebunești și să nu exagerezi cu strălucirea, altfel se va dovedi a fi complet lipsit de gust, când doar o strălucire minusculă poate transforma un web design.

O altă opțiune este animația, care va crea o ușoară strălucire a unui anumit element atunci când cursorul se mișcă. Acest lucru va permite utilizatorilor să își păstreze atenția asupra obiectului.

Culorile neon sunt o modalitate de a anima un site în ansamblu și chiar de a „ridica” elemente, creând astfel un efect de profunzime și stratificare. Cu această opțiune, neonul nu ar trebui să suprime culorile primare din paleta de design. Esența neonului nu este saturația ca atare, ci strălucirea. Poate fi roz pal sau galben strălucitor.

Încă câteva exemple interesante folosind neon în design web: We Craft Apps, Zaha Hadid, DERIVE, Sidewalk Labs, creativecats, adaptable, DDD2017, bigomaha, ReNa. S-au întâmplat multe, dar pe fiecare dintre ele totul este diferit și foarte frumos.

Noi folosimPhotoshop

Cel mai simplu lucru în care poate fi necesar un efect de neon este fundalul. Să presupunem că creăm un fundal întunecat, folosim text contrastant și dorim să aplicăm un model sau o textură pe fundal în loc de o umplere obișnuită. Folosind culoarea neonului puteți crea fulgerări rare și mici, limite de valuri și elemente vegetale. În același timp, le puteți face estompate sau apoi nuanțați ușor și va ieși foarte frumos. Există deja analogi cu aceasta în exemplele de mai sus. Mai mult, dacă există un fundal ilustrat pentru un sit arhitectural, o diagramă a clădirii și a zonei înconjurătoare, atunci unele obiecte pot fi iluminate folosind neon.

Sunt multe idei, dar haideți să aruncăm o privire.

Am luat o mostră de design (mulți sunt deja familiarizați cu el) și aici logo-ul și ramele pentru nasturi au un efect de neon. Cadrele sunt realizate prin analogie cu ceea ce vom arăta. Acum să adăugăm ceva interesant la fundalul antetului... Logo-ul nostru folosește două nuanțe deschise: #49A3CC și #53C3BF. Le vom folosi.

Creați un strat și umpleți-l în culoarea potrivită sau un gradient și creați un alt strat transparent gol deasupra. Fundalul este necesar pentru comoditate; nici măcar nu îl vom copia mai târziu.

Alege Pană, puneți un punct, apoi al doilea și, fără a elibera LMB, începeți să mutați cursorul. Apare curbura. Mișcați mouse-ul pentru a regla și eliberați. Mai punem un punct și, de asemenea, îl mișcăm puțin. Când terminați linia (orice doriți), selectați un instrument Adăuga punct de referință(în același PerO) și utilizați cursorul pentru a face clic ușor pe puncte și a le muta, aliniind astfel conturul.

Să trecem la instrument Perie, îl selectăm pe cel potrivit, astfel încât linia noastră să arate ca o lovitură ușoară. Cu toate acestea, puteți obține un alt efect. Dimensiunea pensulei ar trebui să fie mică, pentru că atunci strălucirea va adăuga în continuare lățimea dorită.

Am pregătit peria și trecem din nou la Pană. Creați un alt strat (gol) și, făcând clic dreapta cu Pen-ul pe contur, selectați Mângâie conturul. În caseta de dialog indicăm simularea periei și a presiunii. În caz contrar, efectul de flapping nu va funcționa. Culoarea pensulei în acest caz, deloc important. Aici avem unul galben. După aceea, faceți clic dreapta pe linie din nou și Eliminarea conturului.

Acum tot ce rămâne de adăugat la această capodopera este strălucirea Glow.

ÎN Fereastra Straturi RMB-clic pe acest al doilea strat cu linia și selectați Opțiuni de amestecare. Și începem să fantezim.

Sarcina noastră este să configuram Strălucire exterioară folosind cea mai deschisă nuanță din logo. Acesta este #53C3BF cu modul ecran și opacitate scăzută.

Apoi folosim Umbra interioara cu Ton de culoare iar a doua culoare de la sigla #49A3CC. De asemenea, puteți selecta modul Culoare ca suprapunere.

Acum, tot ce rămâne este să faceți o nuanță ușoară, altfel va deveni prea luminos, iar efectul nu este încă realist. Alege Suprapunere de culoareși luați verde închis în cazul nostru. În ceea ce privește modul de amestecare - joacă-te! Va fi distractiv!

Gata. Să copiem acest ultim strat cu o linie în proiectul nostru principal și, de exemplu, să-l întindem pe întregul fundal (dreptunghi) sau să accentuăm linia meniului și logo-ul cu el. Arată destul de bine. Și, da, este ușor. Indiferent cât de complexe ar părea culorile neon, crearea lor este foarte simplă. Puteți chiar să folosiți culorile proiectului și să faceți linia puțin mai strălucitoare, puteți reduce tonurile, puteți face linia mai subțire... Există o mulțime de variații.

În acest mod simplu, puteți evidenția orice element, parte a imaginii de fundal sau puteți crea decor. Și, bineînțeles, exersează-ți imaginația!

Concluzii

Efectele moderne de neon au puține în comun cu neonul din anii 80, deși au provenit din acesta. Acum este important să selectați neonul care va funcționa eficient design modern, minimalism, culori calme. În același timp, neonul ar trebui să evidențieze principalul lucru de pe site, să informeze vizitatorul că va găsi informații similare aici, în spatele acestui buton.

Culorile neon pot fi foarte distractive și foarte calme în același timp, chiar de neobservat. Principalul lucru este combinația cu paleta generală și tema proiectului. Doar atunci puteți obține o finalizare fericită a proiectului.

Neonul este folosit în vremurile moderne și foarte, foarte des chiar mărci celebre. Trebuie doar să-l vezi și să înțelegi: unde și cum.

În acest tutorial vom crea un efect de strălucire neon foarte frumos și realist pentru un logo în Adobe Photoshop. Există multe tutoriale care acoperă același scop, dar acesta diferă în două moduri valoroase. În primul rând, nu este nimic de prisos aici. Autorul a încercat, evident, mai multe opțiuni, a ales-o pe cea mai bună și a descris doar aceasta. În al doilea rând, sunt descrise toate stilurile de straturi care creează efectul și puteți înțelege ce strat servește la ce. Acest lucru ajută foarte mult la înțelegerea modului de lucru cu stilurile.

Rezultat

Pasul 1

Să începem prin a crea un strat simplu și a-i oferi un stil de strat gradient radial. Luminile nu trebuie să fie prea strălucitoare. În cazul nostru, acestea sunt #303e4a și #151515. Realismul efectului depinde de asta.

Pasul 2

Utilizați cea mai simplificată versiune a logo-ului dvs. În mod ideal, acestea ar trebui să fie linii netede. Apropo, realismul lucrării depinde și de grosimea lor.

Pasul 3

Acum faceți dublu clic pe stratul de logo pentru a-i oferi următoarele stiluri de strat.

Să începem cu Color Overlay. Utilizați culoarea albă. Dacă ați observat, chiar centrul tuburilor de neon este întotdeauna alb. Aceasta este partea cea mai strălucitoare, ceea ce încercăm să transmitem.

Pasul 4

Să adăugăm un stil Bevel & Emboss. Acest stil ne va ajuta să creăm un efect de sticlă. Acesta nu este cel mai mult parte importantă, pentru că în țevile de neon sticla este practic invizibilă, dar asta ne va ajuta să obținem un efect de volum. Specificați parametrii așa cum se arată mai jos.

Pasul 5

Adăugați stilul Inner Shadow. Aici selectăm culoarea pe care dorim să o dăm efect de neon. În cazul nostru, este turcoaz strălucitor.

Pasul 6

Stilul Inner Glow servește aceluiași scop. Datorită acestui stil, vom obține o tranziție frumoasă între culorile turcoaz și alb.

Pasul 7

Stilul Outer Glow va crea un efect strălucitor. El este responsabil pentru modul în care lumina din conductele de neon va fi suprapusă pe fundal și pe alte obiecte de sub logo. Profităm la maximum dimensiune posibilăși modul de amestecare Overlay, precum și aceeași nuanță turcoaz.

Pasul 8

Stilul Drop Shadows va crea o tranziție strălucitoare. Pentru a face acest lucru, utilizați modurile de amestecare Vivid Light sau Color Dodge. În exemplul nostru, am aplicat două stiluri de straturi Drop Shadows simultan. Primul va funcționa ca o strălucire externă, iar al doilea va reflecta lumina pe fundal. Va fi puțin mai aproape sau mai departe, în funcție de unghiul în care doriți să afișați sigla.

Pasul 9

Iată cu ce ajungi:

Pasul 10

Acum să adăugăm o textură de beton pe fundal. Acest lucru o va întuneca puțin.

Pasul 11

De asemenea, puteți adăuga câteva elemente mici, cum ar fi fire sau elemente de fixare. Nu exagera. Lasă totul să fie cât se poate de simplu.

Pasul 12

Puteți conecta firul la țevi de neon folosind element individual pentru a crea senzația că logo-ul este la o oarecare distanță de perete. În cazul nostru, este doar un dreptunghi cu următoarele stiluri de straturi.

Fotografia de modă în lumină de neon a câștigat o popularitate reînnoită după videoclipul „Pink Wine” al lui Feduk și Eldzhey. La urma urmei, videoclipul lor este țesut literalmente din caracteristici elegante: zgârie-nori din Malaezia, haine scumpe, mâncare de stradă, fete frumoase din Asia, lentile albe și iluminare cu neon. Rețelele de socializare Era o manie de a face poze cu iluminare neobișnuită. Să vedem cum să repeți un efect similar acasă.

Metoda 1

Pentru a crea o fotografie în lumină de neon, veți avea nevoie de un monitor obișnuit. Acesta ar putea fi un ecran de computer desktop, un ecran de laptop sau o tabletă. Este recomandat sa faci poze in intuneric, astfel incat singura sursa de lumina sa fie monitorul.

Pentru gradient veți avea nevoie de oricare două afișaje. Ele trebuie să fie plasate pe ambele părți ale dvs., pe fiecare dintre acestea o imagine cu culori diferite.

Metoda 2

Pentru a crea o fotografie în lumină de neon în a doua opțiune de care avem nevoie lampă de birou(de preferat cu tulpina lunga) si un tricou/carpa veche in culoarea cu care vrei sa iti luminezi fotografia.

Cum să faci o fotografie în lumină de neon:

Legați materialul pe lampă.
Așezați lampa pe o parte, astfel încât să nu fie vizibilă în cadru.
Aprindeți lampa.
Bucurați-vă de iluminarea cu neon.
Puteți seta camera pe un temporizator sau puteți cere cuiva să vă facă o fotografie în întuneric complet.

Dacă doriți să creați un gradient de lumină neon, atunci echipați o a doua lampă, înfășurați-o într-o țesătură de alt ton și așezați-o pe cealaltă parte a dvs.