Plava neonska pozadina. Neonski efekat u Adobe Photoshopu

Modna fotografija u neonskom svjetlu stekla je drugi val popularnosti nakon klipa Feduka i Aljaya "Rose Wine". Na kraju krajeva, njihovi video snimci su bukvalno satkani od stilskih karakteristika: malezijskih nebodera, skupe odjeće, ulične hrane, lijepih azijskih djevojaka, bijelih sočiva i neonskih svjetala. Društvene mreže su prigrlile maniju za slikama sa neobičnim pozadinskim osvetljenjem. Hajde da vidimo kako da ponovimo ovaj efekat kod kuće.

Metoda 1

Da biste napravili fotografiju u neonskom svjetlu, potreban vam je običan monitor. To može biti desktop ekran, ekran laptopa ili tablet. Preporučljivo je slikati u mraku kako bi monitor bio jedini izvor svjetlosti.

Za gradijent će vam trebati bilo koja dva ekrana. Treba ih postaviti sa obe strane od vas, od kojih će svaka otvoriti sliku različitih boja.

Metoda 2

Za kreiranje fotografije neonskog svjetla u drugoj opciji, potrebna nam je stolna lampa (po mogućnosti sa dugačkom drškom) i stara majica/krpa u boji kojom želite osvijetliti svoju fotografiju.

Kako snimiti fotografiju u neonskom svjetlu:

1. Vežite tkaninu za lampu.
2. Postavite lampu na svoju stranu tako da se ne vidi u okviru.
3. Upali lampu.
4. Uživajte u neonskim svjetlima.
5. Možete postaviti kameru na tajmer ili zamoliti nekoga da vas slika u potpunom mraku.

Ako želite stvoriti gradijent neonskog svjetla, opremite drugu lampu, umotajte je u tkaninu drugog tona i postavite je na drugu stranu od sebe.

Metoda 3

Fotografija u neonskom svjetlu može se napraviti od improviziranih sredstava. Šta će biti potrebno:

• lampa (po mogućnosti kao na slici)
• široka papirna traka
• trajni flomaster ili marker.

Kako napraviti neonsku pozadinu za fotografije:

1. Zalijepite cijelom dužinom lampe ljepljivom trakom.
2. Prefarbajte sloj flomasterom u 1-2 sloja.
3. Zalijepite lampu ponovo trakom.
4. I ponovo obojite prostor flomasterom u boji.
5. Neonske lampe su spremne! Upali lampu i slikaj!

Pa, pogledajmo netlenočku. Ovde je tako lepo...

Budite najotmjeniji! Koristite super efekte.

U ovom tutorijalu napravićemo veoma lep i realističan efekat neonskog sjaja za logo u Adobe Photoshopu. Postoji mnogo tutorijala posvećenih istom cilju, ali ovaj se razlikuje na dva vrijedna načina. Prvo, ovdje nema ništa suvišno. Autor je očigledno pokušao više od jedne opcije, izabrao najbolju i opisao samo ovo. Drugo, opisani su svi stilovi slojeva koji stvaraju efekat i možete razumjeti koji sloj se za šta koristi. Mnogo pomaže u razumijevanju rada sa stilovima.

Rezultat

Korak 1

Počnimo kreiranjem jednostavnog sloja, kojem ćemo odrediti stil sloja sa radijalnim gradijentom. Svetla ne bi trebalo da budu prejaka. U našem slučaju, to su #303e4a i #151515. O tome zavisi realizam efekta.

Korak 2

Koristite najjednostavniju verziju vašeg logotipa. U idealnom slučaju, ovo bi trebalo da budu glatke linije. Inače, realizam rada zavisi i od njihove debljine.

Korak 3

Sada dvaput kliknite na sloj logotipa da biste mu dali sljedeće stilove slojeva.

Počnimo sa preklapanjem boja. Koristite bijelo. Ako primijetite, sam centar neonskih cijevi je uvijek bijel. Ovo je najsjajniji dio, a mi to pokušavamo prenijeti.

Korak 4

Dodajmo Bevel & Emboss stil. Ovaj stil će nam pomoći da stvorimo stakleni efekat. Ovo nije najvažniji dio, jer je staklo gotovo nevidljivo u neonskim cijevima, ali će nam pomoći da postignemo efekat volumena. Odredite parametre kao što je prikazano ispod.

Korak 5

Dodajte stil Unutarnja sjena / Unutarnja sjena. Ovdje biramo boju kojoj želimo dati naš neonski efekat. U našem slučaju, to je svijetlo tirkizno.

Korak 6

Stil Inner Glow služi istoj svrsi. Zahvaljujući ovom stilu, dobićemo prekrasan prijelaz između tirkizne i bijele boje.

Korak 7

Stilski vanjski sjaj / vanjski sjaj će stvoriti efekt sjaja. On je odgovoran za to kako će se svjetlost iz neonskih cijevi postaviti na pozadinu i druge objekte ispod logotipa. Koristimo najveću moguću veličinu i način miješanja Overlay / Overlap, kao i istu tirkiznu nijansu.

Korak 8

Stil Drop Shadows će stvoriti prijelaz sjaja. Da biste to uradili, koristite režime mešanja Vivid Light / Jarko svetlo ili Color Dodge / Lighten osnovne. U našem primjeru, primijenili smo dva stila sloja Drop Shadows odjednom. Prvi će raditi kao vanjski sjaj, a drugi će reflektirati svjetlost na pozadinu. Bit će malo bliže ili dalje, ovisno iz kojeg ugla želite da prikažete logo.

Korak 9

Evo šta se dešava na kraju:

Korak 10

Sada dodajmo konkretnu teksturu pozadini. Ovo će ga malo potamniti.

Korak 11

Također možete dodati nekoliko malih predmeta kao što su žice ili pričvršćivači. Ne preterujte. Neka sve bude što jednostavnije.

Korak 12

Možete spojiti žicu na neonske cijevi s posebnim elementom kako biste dali utisak da je logo na nekoj udaljenosti od zida. U našem slučaju, to je samo pravougaonik sa sljedećim stilovima slojeva.

Neonske boje... tako svijetle, zabavne, neobične... dosadne i ugodne u isto vrijeme. Iznenađujuće, s obzirom na standarde web dizajna, majstori ih još uvijek koriste u raznim kombinacijama i varijacijama u svojim projektima. Međutim, neonske boje je teško raditi bez utjecaja na dizajn u cjelini. Da, odlični su za logotipe, ikone, elemente korisničkog interfejsa u aplikacijama, postere, umjetnost, ali web dizajn postaje težak ako ne razumijete glavne probleme i karakteristike.

Danas ćemo istražiti načine za efikasnu upotrebu neona (kao efekta i kao boje) u web dizajnu, pogledati primjere webmastera koji su osvojili Awwwards i Css Design Awards i saznati kako Photoshop može pomoći s neonskim bojama.

Općenito, pokušajmo postati neon ninjas!

nijansa limete

Limeta zelena je svijetli predstavnik neonske boje (bez odgovarajućeg efekta), čija je nijansa žuto-zelenkasta, ali još nije svijetlozelena.

Hex kod: #32cd32

Posebnost boje je da se u kombinaciji s tamnom pozadinom dobiva pravi neonski efekat. Izgleda zabavno i može privući posjetitelje na stranicu. Ovo je najlakši način da dodate neon svom web dizajnu bez opterećivanja cijelog projekta. Kao primjeri vrijeme , limegreencreative , QQ pretraživač (za Mac), novi KIS , Craftedbygc , Nvidia. Svi oni, u jednoj ili drugoj mjeri, koriste kombinacije svijetlo zelene i tamne pozadine, ali učinak je lijep, pa čak i vremenski testiran.

neon rainbow

Dok se mnoge boje mogu kombinovati jedna s drugom i koristimo ih svaki dan, neonske boje ne mogu stvoriti cjelokupnu shemu boja. Činjenica je da većina neonskih boja ima iste vrijednosti zasićenosti i svjetline, te se stoga spajaju na ekranu, izgledaju isto. Shodno tome, postoje problemi s čitljivošću i ukupnim kontrastom. Zbog toga webmasteri koriste jednu neonsku boju, ali na pozadini "jednostavnije" nijanse i okruženu prigušenim tonovima.

Hrabre odluke

Korištenje neonske boje kao pozadine na cijelom ekranu je hrabar potez. Samo podebljano. Ali to nije tehnika koja se može vidjeti na svakom drugom mjestu, iako je za autorske radove ili varijacije konkurencije i podjele prostora između više boja prema zasićenosti prirodno.

Samo pazite da sve ostale elemente na ekranu svedete na minimum. Nije potrebno obojiti dugmad u još svjetliju boju ili kreirati tekst aršinima. Minimalizam, ravni dizajn, jednostavna tipografija, strogi font i neonska boja će stvoriti mnogo stilskiji dizajn, strog, elegantan.

Pogledaj izbliza f37foundry, Funplex, Langlois, Glow Motion, NOEIN OI. Koristi uparene boje, jednobojnu ispunu ili neonski gradijent.

neon i bela

Neonske boje i bela nikada se ne mešaju, jer su neonski elementi na beloj pozadini gotovo "nečitljivi". Mnoge neonske boje koriste bijelu za svoju svjetlinu, tako da će stvoriti neku vrstu pretjerane ekspozicije i izduvavanja na ekranu. Jednostavno rečeno: efekat neona je efekat blistave bele boje, a na beloj pozadini sve se spaja.

neonsko brendiranje

Neke kompanije koriste neonske nijanse kao glavne boje svog brenda. Na primjer, Nvidia- bogato zelena (limeta) u kombinaciji sa crnom, AMD- crna, bijela i jarko crvena, Devillard- bogato žuta + crna, MTN DEW x NBA- zeleni neon u kombinaciji sa izblijedjelim nijansama. U ovom slučaju je kreiranje web dizajna mnogo lakše, jer bi neon trebao biti prisutan, ali u maloj količini.

Ne propustite ovu boju. Naprotiv, tamo gdje mu je zgodno da pronađe parove i predstavi njihovu kombinaciju u prvom planu, kada će ih pozadina zasjeniti i naglasiti. Nije potrebno cijelu pozadinu popuniti markiranim neonom, dovoljno je ovom bojom stvoriti akcente na elementima.

Van efekata

Sam po sebi, neon već nosi neverovatne mogućnosti za dizajn i fantaziju. Ne biste trebali koristiti sve vrste efekata (animacija, 3D, paralaksa, itd.) zajedno sa neonom. Na kraju, rizikujete da korisnike, kupce, pa i sebe uvedete u ogorčenje i depresiju.U početku će vam se činiti da je sve u redu, a onda će vam se oči umoriti od gledanja u sve.

U međuvremenu, treba odati priznanje suptilnostima umijeća kada se efekti koriste, ali u tolikoj količini i tako neprimjetno da su gotovo nevidljivi.

Projekt craftedbygc kreirao animaciju slova G kada ga kursor miša pogodi. Dugmad, okviri i još mnogo toga istaknuti su ovom neonskom nijansom. Ali sve je to gotovo neprimjetno i stoga izgleda lijepo.

Napravite neonski sjaj

Neonski efekat ili sjaj nije novo u svijetu. To je samo sjajna boja koju tako često vidite na natpisima noću. Kada radite na realističnom efektu u Photoshopu, izgleda da nijanse i boje sijaju, kao da zaista postoji bijela svjetlost koja prolazi kroz njih. Važno je ne poludjeti i ne pretjerivati ​​sa sjajem, inače će se ispostaviti kao čist neukus, kada vrlo mali sjaj može transformirati web dizajn.

Druga opcija je animacija koja će, kada se kursor pomjeri, stvoriti blagi sjaj određenog elementa. Ovo će omogućiti korisnicima da zadrže pažnju na objektu.

Neonske boje su načini za oživljavanje stranice u cjelini, pa čak i „podizanje“ elemenata, stvarajući tako efekat dubine i slojevitosti. Uz ovu opciju, neon ne bi trebao nadjačati primarne boje u paleti dizajna. Suština neona nije zasićenje kao takvo, već sjaj. Može biti i blijedo ružičasta i jarko žuta.

Još nekoliko zanimljivih primjera korištenja neona u web dizajnu: We Craft Apps, Zaha Hadid, DERIVE, Sidewalk Labs, creativecats, adaptable, DDD2017, bigomaha, ReNa. Mnogo toga se desilo, ali na svakom od njih je sve drugačije i veoma lepo.

Koristimophotoshop

Najjednostavnije mjesto gdje može biti potreban neonski efekat je pozadina. Pretpostavimo da kreiramo tamnu pozadinu, koristimo kontrastni tekst i želimo da koristimo uzorak ili teksturu umjesto uobičajene ispune na pozadini. Koristeći neonsku boju, možete napraviti rijetke i male bljeskove, obrube valova i biljne elemente. U isto vrijeme, možete ih učiniti zatamnjenim ili lagano toniranim i ispast će jako lijepo. U gornjim primjerima već postoje analozi ovome. Pogotovo ako postoji ilustrovana pozadina za arhitektonsko mjesto, dijagram zgrade i okoline, onda se neki objekti mogu osvijetliti neonom.

Ima mnogo ideja, ali da vidimo.

Uzeli smo uzorak dizajna (mnogi od vas su već upoznati s njim) i ovdje logotip i ivice gumba imaju neonski efekat. Okviri su napravljeni po analogiji sa onim što ćemo pokazati. Sada dodajmo nešto zanimljivo u pozadinu zaglavlja... Naš logo koristi dvije svijetle nijanse: #49A3CC i #53C3BF. Koristićemo ih.

Napravite sloj, popunite ga željenom bojom ili gradijentom i kreirajte još jedan prazan prozirni sloj na vrhu. Pozadina je potrebna radi praktičnosti, kasnije je nećemo ni kopirati.

Izaberi Pero, stavite jednu tačku, zatim drugu i, ne puštajući LMB, počnite pomicati kursor. Pojavljuje se zakrivljenost. Pomjerite miša za podešavanje i otpuštanje. Stavili smo još jednu tačku i takođe se malo pomerili. Kada dovedete liniju do kraja (kako god želite), odaberite alat Dodajte sidrenu tačku (u istom Pero) i kursorom nežno kliknite na tačke i pomerajte ih, poravnavajući tako konturu.

Idemo na alat Četka, odabiremo odgovarajući, tako da naša linija izgleda kao lagani potez. Međutim, možete se sjetiti drugog efekta. Veličina četke bi trebala biti mala, jer će tada sjaj i dalje dodati željenu širinu.

Pripremili smo kist i opet idemo na Pero. Napravite još jedan sloj (prazan) i klikom na Pen Tool na RMB konturu, odaberite Gladite stazu. U dijaloškom okviru navedite simulacija četke i pritiska. U suprotnom, efekat prevlačenja neće raditi. Boja kista u ovom slučaju je potpuno nevažna. Evo žute. Nakon toga, ponovo kliknite desnim tasterom miša na liniju i Izbrišite obris.

Sada ostaje ovom remek-djelu dodati sjaj sjaja.

AT Prozor slojeva desnim klikom na ovaj drugi sloj sa linijom i odaberite Opcije preklapanja. I počinjemo da maštamo.

Naš zadatak je da postavimo Vanjski sjaj koristeći najsvjetliju nijansu u logotipu. To je #53C3BF sa modom ekrana postavljenom na malu neprozirnost.

Onda koristimo Unutrašnja senka sa nijansom i druga boja od #49A3CC logotipa. Također možete odabrati način boje kao Overlay.

Sada ostaje napraviti lagano toniranje, inače će ispasti presvijetlo, a efekat još nije realističan. Izaberi preklapanje boja i uzmite tamno zelenu u našem slučaju. Što se tiče blend mode - igrajte se! To će biti zabavno!

Spreman. Kopirajmo ovaj zadnji sloj sa linijom u naš glavni projekat i, na primjer, rastegnimo ga na cijelu pozadinu (pravougaonik) ili njime naglasimo liniju menija i logotipa. Izgleda prilično loše. I, da, lako je. Koliko god neonske boje izgledale složeno, kreiranje ovog je vrlo jednostavno. Možete čak koristiti boje projekta i učiniti liniju malo svjetlijom, možete utišati tonove, učiniti liniju tanjom... Ima mnogo varijacija.

Na tako jednostavan način možete istaknuti bilo koji element, dio pozadinske slike, kreirati dekor. I, naravno, vježbajte svoju maštu!

nalazi

Moderni neonski efekti imaju malo zajedničkog sa neonom iz 80-ih, iako su nastali od njega. Sada je važno odabrati neonski koji će djelotvorno funkcionirati uz moderan dizajn, minimalizam, smirenost boja. Istovremeno, neon treba da naglasi ono glavno na sajtu, obavesti posetioca da će slične informacije pronaći ovde iza ovog dugmeta.

Neonske boje mogu biti vrlo vesele i vrlo mirne u isto vrijeme, čak i neupadljive. Glavna stvar je kombinacija s općom paletom i temom projekta. Tek tada možete postići sretan završetak projekta.

Neon se koristi u modernim vremenima i vrlo, vrlo često čak i poznati brendovi. Samo treba vidjeti i razumjeti: gdje i kako.