Neoninis efektas Adobe Photoshop. Neoninių spalvų ypatybės kuriant interneto dizainą ir kuriant „Photoshop“.

Neoninės spalvos... tokios ryškios, linksmos, neįprastos... kartu erzina ir džiugina žmogų. Keista, bet interneto dizaino standartų fone meistrai vis dar juos naudoja skirtingi deriniai ir jų dizaino variantai. Tačiau neoninėmis spalvomis sunku dirbti, nepažeidžiant bendro dizaino. Taip, jie puikiai tinka logotipams, piktogramoms, vartotojo sąsajos elementams programose, plakatuose, meno kūriniuose, tačiau web dizainas tampa sudėtingas, jei nesuprantate pagrindinių problemų ir funkcijų.

Šiandien ieškosime variantų efektyvus naudojimas neoną (kaip efektą ir spalvą) kuriant interneto dizainą, apsvarstykite žiniatinklio valdytojų, gavę Awwwards ir Css Design Awards apdovanojimus, pavyzdžius ir sužinokite, kaip Photoshop gali padėti dirbant su neoninėmis spalvomis.

Apskritai, pabandykime tapti neoninės nindzios!

Kalkių atspalvis

Laimo žalia – ryški neoninės spalvos atstovė (be atitinkamo efekto), kurios atspalvis gelsvai žalsvas, bet dar ne šviesiai žalias.

Šešioliktainis kodas: #32cd32

Spalvos ypatumas tas, kad derinant su tamsiu fonu gaunamas tikras neoninis efektas. Tai atrodo smagiai ir gali pritraukti lankytojus į svetainę. Tai lengviausias būdas pridėti neoną prie savo interneto dizaino neapsunkinant viso projekto. Kaip pavyzdžius orai, limegreencreative, QQ naršyklė (skirta Mac), newKIS, Craftedbygc, Nvidia. Visose vienokiu ar kitokiu laipsniu naudojami ryškiai žalio ir tamsaus fono deriniai, tačiau efektas gražus ir net laiko patikrintas.

neoninė vaivorykštė

Nors daug spalvų gali derėti ir mes jas naudojame kiekvieną dieną, neoninės spalvos nesugeba sukurti bendro vaizdo. spalvų schema. Faktas yra tas, kad dauguma neoninių spalvų turi tas pačias sodrumo ir ryškumo vertes, todėl ekrane jos susilieja ir atrodo vienodai. Atitinkamai, kyla problemų dėl skaitomumo ir bendro kontrasto. Štai kodėl žiniatinklio valdytojai naudoja vieną neoninę spalvą, bet „paprasto“ atspalvio fone ir apsuptą prislopintų tonų.

Drąsūs sprendimai

Neoninės spalvos kaip fono naudojimas viso ekrano režimu yra paryškintas. Tiesiog būk drąsus. Bet tai nėra technika, kurią galima pamatyti kas antroje svetainėje, nors originaliems darbams ar variacijoms konkurencija ir erdvės padalijimas tarp kelių spalvų sodrumo atžvilgiu yra natūralu.

Tiesiog būkite atsargūs, kad visi kiti elementai ekrane būtų kuo mažesni. Nereikia dar labiau dažyti mygtukų ryškios spalvos arba sukurti tekstą iš aršinų. Minimalizmas, plokščias dizainas, paprasta tipografija, griežtas šriftas ir neoninė spalva sukurs daug daugiau stilistinis dizainas, griežtas, elegantiškas.

Pažiūrėkite atidžiau f37foundry, Funplex, Langlois, Glow Motion, NOEIN OI. Jame naudojamos suporuotos spalvos, vienos spalvos užpildymas arba neoninis gradientas.

Neonas ir baltas

Neoninės spalvos ir balta niekada nesimaišo, nes neoniniai elementai baltame fone praktiškai „neįskaitomi“. Daugelis neoninių spalvų naudoja baltą šviesumą, todėl ekranas sukurs kažką panašaus į per didelę ekspoziciją ir per didelę ekspoziciją. Paprasčiau tariant: neoninis efektas yra balto švytėjimo efektas, o baltame fone visa tai susilieja.

Neoninis prekės ženklas

Kai kurios įmonės kaip pagrindines savo prekės ženklo spalvas naudoja neoninius atspalvius. Pavyzdžiui, Nvidia- sodri žalia (kalkių) derinama su juoda, AMD- juoda, balta ir ryškiai prisotinta raudona, Devillardas- sodri geltona + juoda, MTN DEW x NBA- neoninė žalia kartu su išblukusiomis atspalviais. Tokiu atveju sukurti interneto dizainą yra daug lengviau, nes neonas turėtų būti, bet nedideliais kiekiais.

Neatsisakykite šios spalvos. Priešingai, kur jam patogu susirasti poras ir pateikti jų derinį pirmame plane, kai fonas juos atspalvins ir pabrėš. Nebūtina užpildyti viso fono firminiu neonu, pakanka sukurti akcentus ant šios spalvos elementų.

Beyond Effects

Pats neonas jau suteikia nuostabių dizaino ir vaizduotės galimybių. Neturėtumėte naudoti visų rūšių efektų (animacijos, 3D, paralakso ir kt.) kartu su neonu. Galų gale rizikuojate sukelti vartotojus, klientus ir net save pasipiktinimu ir nusivylimu. Iš pradžių viskas atrodys puiku, bet tada jūsų akys pavargs į viską žiūrėti.

Tuo tarpu reikia pagerbti įgūdžių subtilumą, kai naudojami efektai, tačiau tokiais kiekiais ir taip nepastebimai, kad jų beveik nesimato.

Projektas sukūrė gc sukūrė G raidės animaciją, kai ją paspaudžia pelės žymeklis. Šiame neoniniame atspalvyje taip pat išryškinti mygtukai, rėmeliai ir kt. Bet visa tai beveik nepastebima, todėl atrodo gražiai.

Neoninio švytėjimo kūrimas

Neoninis efektas arba švytėjimas ne naujiena pasaulyje. Tai tiesiog švytinti spalva, kuri taip dažnai matoma iškabose naktį. Dirbant su efekto tikroviškumu „Photoshop“, atrodo, kad atspalviai ir spalva švyti, tarsi kažkas iš tikrųjų praeina per juos. baltas. Svarbu neišprotėti ir nepersistengti su švytėjimu, kitaip jis pasirodys visiškai neskanus, kai tik mažytis švytėjimas gali pakeisti web dizainą.

Kitas variantas – animacija, kuri, judant žymekliui, sukurs nedidelį tam tikro elemento švytėjimą. Tai leis vartotojams išlaikyti savo dėmesį į objektą.

Neoninės spalvos – tai būdas pagyvinti svetainę kaip visumą ir netgi „pakelti“ elementus, taip sukuriant gylio ir sluoksniavimo efektą. Pasirinkus šią parinktį, neonas neturėtų slopinti pagrindinių dizaino paletės spalvų. Neono esmė yra ne sodrumas kaip toks, o švytėjimas. Jis gali būti šviesiai rožinis arba ryškiai geltonas.

Dar keletas įdomių pavyzdžių neono naudojimas interneto dizaino kūrime: We Craft Apps, Zaha Hadid, DERIVE, Sidewalk Labs, Creativecats, pritaikomas, DDD2017, bigomaha, ReNa. Daug kas nutiko, bet ant kiekvieno iš jų viskas kitaip ir labai gražu.

Mes naudojamePhotoshop

Paprasčiausias dalykas, kur gali prireikti neoninio efekto, yra fonas. Tarkime, kad kuriame tamsų foną, naudojame kontrastingą tekstą ir norime fone pritaikyti šabloną arba tekstūrą, o ne įprastą užpildymą. Naudodami neoninę spalvą galite sukurti retus ir mažus blyksnius, bangų ribas ir augalų elementus. Tuo pačiu metu galite juos pritemdyti arba šiek tiek atspalvinti, ir tai pasirodys labai graži. Aukščiau pateiktuose pavyzdžiuose jau yra tam analogų. Be to, jei yra iliustruotas architektūrinės vietos fonas, pastato ir apylinkių schema, kai kurie objektai gali būti apšviesti neonu.

Idėjų yra daug, bet pažiūrėkime.

Mes paėmėme dizaino pavyzdį (daugelis jau žino) ir čia logotipas ir sagų rėmeliai turi neoninį efektą. Rėmeliai gaminami pagal analogiją su tuo, ką parodysime. Dabar pridėkime ką nors įdomaus antraštės fone... Mūsų logotipe naudojami du šviesūs atspalviai: #49A3CC ir #53C3BF. Mes juos panaudosime.

Sukurkite sluoksnį ir užpildykite jį tinkama spalva arba gradientą ir ant viršaus sukurkite kitą tuščią skaidrų sluoksnį. Fonas reikalingas patogumui, vėliau jo net nekopijuosime.

Pasirinkite Plunksna, įdėkite vieną tašką, tada antrą ir, neatleisdami LMB, pradėkite perkelti žymeklį. Atsiranda kreivumas. Perkelkite pelę, kad sureguliuotumėte ir atleiskite. Dedame dar vieną tašką ir taip pat šiek tiek perkeliame. Baigę eilutę (ką norite), pasirinkite įrankį Pridėti atskaitos taškas(tame pačiame PerO) ir naudokite žymeklį, kad švelniai spustelėkite taškus ir perkeltumėte juos, taip sulygiuodami kontūrą.

Eikime prie įrankio Šepetys, pasirenkame tinkamą, kad mūsų linija atrodytų kaip lengvas potėpis. Tačiau galite sugalvoti kitą efektą. Šepetėlio dydis turėtų būti mažas, nes tada švytėjimas vis tiek pridės norimo pločio.

Mes paruošėme šepetį ir vėl pereiname prie Plunksna. Sukurkite kitą sluoksnį (tuščią) ir dešiniuoju pelės mygtuku spustelėdami rašiklį ant kontūro pasirinkite Pabraukite kontūrą. Dialogo lange nurodome šepečio ir slėgio modeliavimas. Priešingu atveju plakimo efektas neveiks. Teptuko spalva šiuo atveju visai nesvarbu. Čia turime geltoną. Po to dar kartą dešiniuoju pelės mygtuku spustelėkite eilutę ir Kontūro pašalinimas.

Dabar prie šio šedevro belieka pridėti „Glow glow“.

IN Sluoksnių langas RMB spustelėkite šį antrąjį sluoksnį su linija ir pasirinkite Maišymo parinktys. Ir mes pradedame fantazuoti.

Mūsų užduotis yra konfigūruoti Išorinis švytėjimas naudojant šviesiausią logotipo atspalvį. Tai #53C3BF su ekrano režimu ir mažu neskaidrumu.

Tada naudojame Vidinis šešėlis su Spalvos tonas ir antroji spalva iš logotipo #49A3CC. Taip pat galite pasirinkti spalvų režimą kaip perdangą.

Dabar belieka padaryti lengvą atspalvį, kitaip jis pasirodys per ryškus, o efektas dar nėra realus. Pasirinkite Spalvota perdanga o mūsų atveju paimkite tamsiai žalią. Kalbant apie maišymo režimą – žaisk! Tai bus smagu!

Paruošta. Nukopijuokime šį paskutinį sluoksnį su linija į savo pagrindinį projektą ir, pavyzdžiui, ištempkime iki viso fono (stačiakampio) arba juo paryškinkime meniu liniją ir logotipą. Atrodo gana gerai. Ir taip, tai lengva. Kad ir kokios sudėtingos atrodytų neoninės spalvos, jas sukurti labai paprasta. Netgi galima panaudoti projekto spalvas ir padaryti liniją šiek tiek ryškesnę, galima nutildyti tonus, ploninti liniją... Variacijų yra labai daug.

Šiuo paprastu būdu galite paryškinti bet kurį elementą, fono paveikslėlio dalį arba sukurti dekorą. Ir, žinoma, lavinkite savo vaizduotę!

Išvados

Šiuolaikiniai neoniniai efektai turi mažai ką bendro su 80-ųjų neonu, nors ir kilo iš jo. Dabar svarbu pasirinkti neoną, kuris veiks efektyviai modernus dizainas, minimalizmas, ramios spalvos. Tuo pačiu metu neonas turėtų pabrėžti pagrindinį dalyką svetainėje, informuoti lankytoją, kad jis ras panašią informaciją čia, už šio mygtuko.

Neoninės spalvos gali būti labai smagios ir tuo pačiu labai ramios, net nepastebimos. Pagrindinis dalykas yra derinys su bendra projekto palete ir tema. Tik tada galėsite laimingai užbaigti projektą.

Neonas naudojamas šiais laikais ir labai, labai dažnai net žinomų prekių ženklų. Tereikia tai pamatyti ir suprasti: kur ir kaip.

Šioje pamokoje sukursime labai gražų ir tikrovišką neoninio švytėjimo efektą logotipui Adobe Photoshop. Yra daug mokymo programų, kurios apima tą patį tikslą, tačiau ši skiriasi dviem vertingais būdais. Pirma, čia nėra nieko nereikalingo. Autorius akivaizdžiai išbandė ne vieną variantą, išsirinko geriausią ir aprašė tik šį. Antra, aprašomi visi efektą sukuriantys sluoksnių stiliai ir galima suprasti, kuris sluoksnis kam tarnauja. Tai labai padeda suprasti, kaip dirbti su stiliais.

Rezultatas

1 veiksmas

Pradėkime kurdami paprastą sluoksnį ir suteikdami jam radialinio gradiento sluoksnio stilių. Šviesos neturėtų būti per ryškios. Mūsų atveju tai yra #303e4a ir #151515. Nuo to priklauso efekto tikroviškumas.

2 veiksmas

Naudokite labiausiai supaprastintą logotipo versiją. Idealiu atveju tai turėtų būti lygios linijos. Beje, nuo jų storio priklauso ir kūrinio tikroviškumas.

3 veiksmas

Dabar dukart spustelėkite logotipo sluoksnį, kad suteiktumėte jam šiuos sluoksnio stilius.

Pradėkime nuo spalvų perdangos. Naudokite baltą spalvą. Jei pastebėjote, pats neoninių vamzdžių centras visada yra baltas. Tai yra ryškiausia dalis, kurią mes stengiamės perteikti.

4 veiksmas

Pridėkime „Bevel & Emboss“ stilių. Šis stilius padės mums sukurti stiklo efektą. Tai ne pati svarbiausia svarbi dalis, nes neoniniuose vamzdžiuose stiklo praktiškai nesimato, bet tai padės mums pasiekti tūrio efektą. Nurodykite parametrus, kaip parodyta žemiau.

5 veiksmas

Pridėkite vidinio šešėlio stilių. Čia pasirenkame spalvą, kurią norime suteikti savo neoninis efektas. Mūsų atveju tai ryškiai turkis.

6 veiksmas

Inner Glow stilius tarnauja tam pačiam tikslui. Šio stiliaus dėka gausime gražų perėjimą tarp turkio ir baltos spalvos.

7 veiksmas

Outer Glow stilius sukurs švytėjimo efektą. Jis yra atsakingas už tai, kaip neoninių vamzdžių šviesa bus padengta fone ir kitais logotipu pažymėtais objektais. Mes maksimaliai išnaudojame galimas dydis ir perdangos maišymo režimą, taip pat tą patį turkio atspalvį.

8 veiksmas

„Drop Shadows“ stilius sukurs švytėjimo perėjimą. Norėdami tai padaryti, naudokite maišymo režimus „Vivid Light“ arba „Color Dodge“. Mūsų pavyzdyje vienu metu taikėme du „Drop Shadows“ sluoksnių stilius. Pirmasis veiks kaip išorinis švytėjimas, o antrasis atspindės šviesą fone. Jis bus šiek tiek arčiau ar toliau, priklausomai nuo to, kokiu kampu norite rodyti logotipą.

9 veiksmas

Štai ką jūs baigsite:

10 veiksmas

Dabar fone pridėkime konkrečios tekstūros. Tai šiek tiek patamsins.

11 veiksmas

Taip pat galite pridėti keletą mažų elementų, pavyzdžiui, laidus ar tvirtinimo detales. Nepersistenkite. Tegul viskas būna kuo paprasčiau.

12 veiksmas

Galite prijungti laidą prie neoninių vamzdžių naudodami atskiras elementas sukurti jausmą, kad logotipas yra tam tikru atstumu nuo sienos. Mūsų atveju tai tik stačiakampis su šiais sluoksnių stiliais.

Mados fotografija neoninėje šviesoje vėl išpopuliarėjo po Feduko ir Eldzhey vaizdo įrašo „Pink Wine“. Juk jų vaizdo įrašas tiesiogine prasme išaustas iš stilingų bruožų: Malaizijos dangoraižių, brangių drabužių, gatvės maistas, gražios Azijos merginos, balti lęšiai ir neoninis apšvietimas. Socialinė žiniasklaida Apėmė manija fotografuoti su neįprastu apšvietimu. Pažiūrėkime, kaip pakartoti panašų efektą namuose.

1 būdas

Norėdami sukurti nuotrauką neoninėje šviesoje, jums reikės įprasto monitoriaus. Tai gali būti stalinio kompiuterio ekranas, nešiojamojo kompiuterio ekranas arba planšetinis kompiuteris. Rekomenduojama fotografuoti tamsoje, kad vienintelis šviesos šaltinis būtų monitorius.

Gradientui jums reikės dviejų ekranų. Juos reikia dėti abiejose jūsų pusėse, ant kiekvieno iš jų bus atidarytas paveikslėlis su skirtingomis spalvomis.

2 būdas

Norėdami sukurti nuotrauką neoninėje šviesoje antruoju variantu, kurio mums reikia stalo lempa(geriausia su ilgu kotu) ir senus marškinėlius/skudurą tokios spalvos, kuria norite apšviesti savo nuotrauką.

Kaip fotografuoti neoninėje šviesoje:

1. Pririškite audinį prie lempos.
2. Padėkite lempą ant savo šono, kad jos nesimatytų kadre.
3. Įjunkite lemputę.
4. Mėgaukitės neoniniu apšvietimu.
5. Galite nustatyti fotoaparato laikmatį arba paprašyti, kad kas nors nufotografuotų jus visiškoje tamsoje.

Jei norite sukurti neoninės šviesos gradientą, įrenkite antrą lempą, apvyniokite ją kitokio atspalvio audiniu ir padėkite kitoje savo pusėje.

3 būdas

Nuotraukos neoninėje šviesoje gali būti padarytos naudojant turimas medžiagas. Ko jums reikės:

• lempa (geriausia kaip nuotraukoje)
• plati kanceliarinė juosta
• nuolatinis flomasteris arba žymeklis.

Kaip pasidaryti neoninį nuotraukos foną:

1. Uždenkite visą lempos ilgį juostele.
2. Dažykite sluoksnį flomasteriu 1-2 sluoksniais.
3. Vėl uždenkite lempą lipnia juosta.
4. Ir vėl nuspalvinkite erdvę spalvotu flomasteriu.
5. Neoninis apšvietimas paruoštas! Įsijunkime lempą ir fotografuokime!

Na, pažvelkime į nepraeinančią. Čia taip gražu...

Būk pati stilingiausia! Naudokite super efektus.