Színátmenet a (web)designban

A színátmenetek már régóta terítéken vannak, nem kell azt gondolnunk, hogy ez csak régen volt “divat” (gondoljunk például az első WordArt-okra a Word szövegszerkesztőben vagy az “ütős” retro disco-feliratokra : )), és esetleg már nem trendi. Trendi a használata mai is, azonban sokkal modernebb, letisztultabb formában.

      

A színátmenetek használata nagyszerű módja annak, hogy érdekesebbé, színesebbé tegyük az adott munka designját, megjelenését. Használhatjuk ugyanannak a színnek több (világosabb-sötétebb) árnyalatát, vagy több színt is keverhetünk. Lehet lineáris vagy radiális is, a lényeg az, hogy a színátmenetek szépen harmonizáljanak és passzoljanak az adott munka stílusához. Használhatod a gradienst a webdesignban (az egész website designon, vagy csak a fejlécen, láblécen, vagy csak egy-két elemén), és egyéb grafikákban, valamint az offline nyomdai anyagon is szépen mutat.

     

 

Íme néhány példa a színátmenet használatára weboldalakon:

      

Finom, pasztell színek és kellemes színátmenetes háttér. Kell ennél több?

       

11024699_1036051429741907_5317862291430633648_n

   

        

Ennél a példánál a színátmenet nemcsak egyszerűen a háttér része, hanem egyfajta árnyékként az egész oldalt végigkíséri.

    

11017493_1036052349741815_3850900784818385792_n

 

 

Színátmenetes teljes hátterek élénk színekkel, amik akár flat designhoz is felhasználhatóak.

     

1

         

7

        

9

  

     

A gradient vagyis színátmenet effektet nem csak weboldalon, hanem nyomtatott anyagokon, például névjegykártyán is remekül lehet használni. 

   

Nagyon szép az összhangja ennek a designnak, ahol az egyik oldal telibe színátmenetes.

    

10-pink-orange-business-card-gradient

13-alvaro-uribe-business-card-design

  

  

Ennél a névjegynél egy háttérfotón alkalmazzák a színátmenetet, illetve az is ötletes, ahogy a hátoldalon a körvonal maga átmenetes.

 

32-pink-green-gradient-business-card

   

     

Itt pedig azt láthatjuk, hogy nem maga a kártya, hanem annak csak a széle színátmenetes.

 

14-creative-business-card-gradient

   

  

Színátmenetet a logóknál is előszeretettel használnak a tervezők, most erre nézzünk néhány ötletet.

  

Színátmenet több színnel.

 

L-2403

 

yncense-creative-gradient-3d-logo-design

    

  

…és egy-egy színnel

   

14-Origamia-by-Gabber1

  Smackdab-Logo

 

 

Mint látjátok a színátmenet igazán kreatív eszköz arra, hogy a munkánkat kifinomulttá és látványossá tegyük, csak ízlésesen kell használni. : )

 

   

Az alábbiakban néhány színátmenet készítésére alkalmas eszközt gyűjtöttünk össze Nektek, hogy megkönnyítsük a munkátokat! : )

Kattints a fotókra, és rögtön le is tudod tölteni az adott eszközt.

    

Photoshop akciók, melyekkel a fotókra színátmenetes “fátylat” tudunk húzni.

      

photoshopactions10-500x339

    

violaceous_shine_action___free_by_nimfale-d36h4xw-359x500

    

go_boom_by_afinewar-d4kmrdr-444x500

 

  

Photoshop színátmenet effektek

Ezeket az effekteket fel lehet tölteni a PS könyvtárába és már használhatjuk is őket. (Kitömörítés után csak duplán kattintsunk a grd fájlra és az automatikusan betöltődik a Photoshop megfelelő könyvtárába, vagy nyissunk meg egy színátmenet panelt – például az alakzatoknál a kitöltésnél válasszuk a színátmenet kitöltést, – majd ott a színátmenet mellett nyissuk le a kis fogaskereket és a megjelenő panelon már az új színátmenet lehetőséggel be tudjuk tölteni azt.)

   

xphotoshop-gradients.jpgqresize600P2C505.pagespeed.ic_.rHmQFDUJ-RAjMpE2Rh98-500x421

    

75_Modern_Photoshop_Gradients_by_Falco953-500x281

   

JJs-Gradients-1-Skin-Tones

 

   

Színátmenetes hátterek

    

variety-of-blurred-backgrounds_23-2147509631

     

blurred-backgrounds-collection_23-2147509594

       

collection-of-blurred-backgrounds_23-2147506736

 

    


 

Színátmenetre fel! : )

  

Hozzászólás írása

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöltük

A felhasználói élmény fokozásra ún. cookie-kat használunk. Reméljük, nem gond számodra, ha mégis, kattints a további infó gombra.
OK, üzenet bezárása