Mi-a venit ideea asta acum cateva luni: am tot facut recenzii de site pe mai multe forumuri de web design si am ajuns la concluzia ca pot “mirosi” usor un incepator in Photoshop sau design daca doriti (ca oricum majoritatea pe Photoshop lucreaza), dupa niste mici “indicii” sau sa le zicem “greseli” de design. Nu sunt neaparat chestii grave, dar afecteaza imaginea unui site si in timp, pe masura ce designerul devine tot mai sigur pe el si mai experimentat, ele dispar. Iata lista mea si explicatiile in cauza:
1. Folosirea efectului bevel/emboss
Asta e o chestie de genul “so 8o’s”, chiar daca pe vremea aia nu visam noi design. Unul dintre efectele pe care le-am folosit in disperare in primele luni de design a fost minunatul bevel/emboss, inca la setari deloc discrete.
Mi se parea ca acest efect de “3D” da un look bun layoutului. In cele mai multe cazuri este neinspirat, pentru ca relieful obtinut va arata destul de ciudat pe layoutul “plat”. Se poate eventual folosi in unele cazuri, dar cu mare discernamand si la 1-2 pixeli cel mult “inaltime”.
2. Gradients foarte contrastanti.
Gradient este unul dintre efectele pe care le folosesc si eu uneori chiar abuziv. Este un trick bun pentru un design sic, dar folosit totusi cu atentie. Ceea ce fac multi incepatori este sa foloseasca gradient contrastanti (prea contrastanti): alb-negru, galben-rosu, alb-rosu etc.
Stiu ca unele sunt in panoul default in Photoshop (e si asta o explicatie), dar este un efect care nu mai ofera o frumusete discreta, ci arata pur si simplu prost. Un gradient se incepe de la culoarea dorita (sa zic kaki asa cum am eu pe background aici) si o nuanta foarte apropiata. De obicei mut “bulina” de color picker o idee mai in stanga sau in dreapta (pe diagonala de cele mai multe ori), foarte aproape de pozitia in care am setat culoarea initiala. Asta imi ofera o nuanta foarte apropiata, dar usor contrastanta (atat cat sa se vada diferenta si sa nu fie suparatoare).
3. Shadow negru, 5 pixeli distanta, 5 pixeli marime.
.. adica setarea implicita.
Asta merge OK daca ai un text de 40 de pixeli inaltime si eventual o imagine mare (un layout de 800×600 ca exemplu. Atunci nu se mai simte umbra atat de neplacut.
Daca ai insa un text micut, sau o imagine iarasi de dimensiuni mici, va arata rau. Umbra va parea ca “pleaca la plimbare” de langa obiectul/layerul in cauza.
Si umbra (shadow) este unul dintre efectele des folosite, tocmai pentru ca poate arata foarte bine. Este indicat sa umblam insa la setari. Chiar si un distance de 0 pixeli (in loc de 5) fac deja ca layerul sa arate mai bine. Dimensiunile se vor seta si ele incat umbra sa fie discreta.
Si culoarea ei se ia usor: se pune color picker pe layerul de background (peste care sta cel cu umbra) si avand setat ca “multiply” (default, deci nu aveti de ce sa va speriati) nuanta umbrei va fi mai inchisa decat a fondului pe care sta. Negru arata OK pe un font gri. Daca aveti insa un fond rosu, umbra aia neagra va arata ca nuca in perete. Un rosu mai inchis (asa cum rezulta din modificarea culorii umbrei prin color picking) va da imediat designului un look mai elegant si mai unitar.
4. Outer glow galbui (tot default)
Tot in setarile implicite este si outer glow galbui, un efect care se potriveste in acest mod de putine ori. Daca ai o tema grafica pe alb-galbui este OK. Arata insa absolut neinspirat sa fie un fond albastru sau gri si imaginea sau logoul sa aiba o stralucire galbuie (fara nicio legatura cu tema grafica).
Este inca un caz in care un lucru minor iti poate da peste cap designul. Se va modifica deci culoarea cu o nuanta potrivita temei grafice. De la un efect neinspirat, outer glow va deveni acel ceva care va oferi unui design un plus de frumusete.
5. Texte si imagini pixelate
Un text layer trebuie sa fie “soft” si sa nu se vada “patratelele” de pixeli pe el. Cand scrieti un text, chiar in meniul de sus aveti posibilitatea de a da un style: none, soft, crisp etc. Eu aleg de cele mai multe ori soft si deja arata bine.
Imaginile trebuie si ele taiate cu grija, fara a se putea vedea ca sunt “ciopartite”.
Este munca de migala, dar asta presupune pana la urma designul.
6. Nefolosirea unor efecte mai complexe (patterns discrete) sau a combinatiilor de patterns.
Photoshop are niste patterns presetate ca si efect, dar sunt urate. Se pot realiza insa patterns usor. Si ele vor fi discrete si abia vizibile fata de fondul pe care apar. Combinatiile de efecte sunt de asemenea un lucru de dorit: gradient, un shadow discret, poate un stroke, un inner shadow si inner glow.
Cuvantul de ordine este “DISCRETIA” insa. Un designer bun reuseste sa realizeze un layout placut fara a se simti ca a abuzat de efecte, chiar daca le-a folosit aproape pe toate. Gradienti placuti si putin contrastanti, shadow mic, un stroke bun, un inner shadow de distanta 1 pixel si size tot atat intr-o nunanta apropiata de fond etc. toate ofera designului un look aparte.
Stiu ca majoritatea celor prezentate sunt “chitibusuri” si poate veti fi mirati ca ma leg de asa ceva. In design orice detaliu conteaza. Este clar ca fiecare suntem inspirati pe cat putem si invatam in fiecare zi ceva nou. Oricat de avansat esti ca designer, tot mai apar lucruri noi pe care trebuie sa le inveti.
Acestea sunt insa chestiunile care “deranjeaza” de multe ori in cazul unui designer incepator. Sunt primele lucruri pe care si eu am invatat sa le rezolv si sper ca va ajuta sa realizati situri si mai frumoase 😉
