Hogyan segítsd a fejlesztőt

Egy grafikus gondolatai a leadott grafikákról 1. rész

Régóta fogalmazódik ez a poszt. Lehetett volna a címe Designers vs. Developers, de akkor pont a lényeg veszne el.

Képzeld el, hogy ülsz otthon, és végre csöngetnek. Megjött! Suhan át a gondolat az agyadon, mire már az ajtónál állsz. Kinyitod, és egy futár áll előtted. Felhúzod a szemöldököd, meghallgatod a monológot, és már egy snicerrel térdelsz a dobozok között, harcra készen a bontogatáshoz, beletörődve. Tudod, hogy csak most kezdődik a móka: kinyit, rendszerez, elnevez, kiválaszt, összerak, szétszed, újra… Már megint! Pedig direkt szerelővel kérted. Szereted a boltot, de néha ő nem szeret téged. Sebaj, most is megoldod, csak épp most nem akartad. Most csak szépen a helyére akartad tenni kedved szerint, és csendben gyönyörködni benne. Franc!

És most képzeld el, hogy a csomagban PSD-k vannak. Ismerős? Akkor te vagy az a builder, aki ezt a posztot olvassa. Az, aki leül, és máris csalódottan keresi azokat a klasszikus hibákat, amikről már van egy listád.

Egy lista neked. Figyelsz graffer?! Igen, ez most itt neked fog szólni, mert nekünk könnyebb. Nap mint nap használjuk rutinosan, és fel se tűnik, hogy olykor „rosszul” (én is). Így mi az fps-nél összeszedtük, én meg megpróbálom elmondani hozzá a miérteket.

…onnantól kezdve, hogy közösségben dolgozol, megváltoznak a játékszabályok.

Photoshop etikett. Ez is lehetett volna a cím, de remélem ez már nem csak a könyvjelzők között van, hanem a tudás birtokában is vagy. Ezekből szeretnék most párat kiemelni a fejlesztő kollégák gondolataival.

„Rectangle38 copy”

Ez egy layer neve? Komolyan?! Kérlek, ne tedd ezt senkivel! Magaddal se. OK, tudom, hogy te gyorsan és rögtön eligazodsz bármilyen psd-ben, de képzeld el, hogy valaki ebbe a boltba csak vásárolni jött. Szerintem te is szeretnél segíteni neki. Hagyd, hadd tájékozódjon magától, és akkor nem fog kérdezgetni arról, mit hol talál.

Hogy néz ki a szép struktúra? Érthetően elnevezett csoportok, beszédes rétegek és netán színek.

„A psd felépítése, struktúrája egy nyelv. Az a nyelv, amit csak és kizárólag te beszélsz, az érthetetlen. Semmire sem jó.”

Tipp: Én mostanában inkább csak smart objecteket hagyok a gyökérben, amik egyes modulokat foglalnak magukban. Például: menu, header, footer stb. Így ha megnyit a builder egy ilyen elemet, akkor már csak az ottani group és layer struktúrát kell megismernie. Az előnye neked, hogy ha valahol megváltoztatod a forrást, akkor mindenhol változtatsz rajta. Ugye mekkora segítség?

Szemetes

Szorosan az előzőhöz kapcsolódnak az ottfelejtett rétegek, csoportok. Ha valamire nincs szükséged, töröld őket. A teleszemetelt psd se nem szép, se nem helytakarékos.

Fontok

Ez külön poszt lehetne, mármint azok használata és hiánya, de ahogy kollégám mondta:

„Free transform-mal megmágiázott text, mert úgy kifér”

Ilyen még van?! Kérdezem. Persze, jön a válasz. És hogy buildeled le? Sehogy. Nem vicces, mert a builder meg ott ül, és próbál rá megoldást találni.

Tipp: Használd a „trackinget”, amiből már le tudja képezni a „letter-spacinget”.

Inkonzisztencia, avagy gondolkozz a fejlesztő fejével

„Amikor már a hatodik szürkeárnyalatot találod, elbizonytalanodsz”

De idézhetném a másik fejlesztő kollégát is:

„Ez most szándékos vagy véletlen?”

A fenti két mondat hűen tükrözi azt az állapotot, amikor nincsenek egységesítve a dolgok. Ilyenkor kicsit vissza szoktam sírni a print korszakomat, amikor még Quarkban kellett valamit elkezdeni. Addig nem tudtál színeket használni, amíg nem definiáltál egy színt. A végén lett egy színpaletta, amin elég volt csak módosítani, és meg is történt mindenhol a változás.

Tipp: Erre egy jó megoldás a Prisma plugin, csak sajnos fizetős. Ha tudsz jobbat, ne tartsd magadban, és írd meg kommentben!

Persze nem csak a színekkel eshet az ember túlzásba, hanem eltartásokkal, lekerekítésekkel, vonalvastagságokkal és igazából mindennel. A legjobb, ha készítesz magadnak egy listát az összes elemről.

Várj! Erre van a styleguide. Vagy ha már egy meglévőből szeretnél kiindulni, itt vannak a material forrásai. Szerintem az a legjobb megoldás – legyen szó bármekkora projektről –, ha már az elején elkezded építeni és folyamatosan bővítgetni a guide-ot, így minimálisra csökkenthetőek az ilyen különbözőségek. Tudom, idő és szokás kérdése, de hidd el, lassan elkerülhetetlen.

Normal, Dissolve, Darken, Multiply, Effects…

Próbáltad már CSS-ben leképezni ezeket? Körülbelül úgy kell elképzelni, mint amikor RGB-ről CMYK-ra változtatod a színteret. Akkor is kapsz egyből figyelmeztető ablakot, hogy vannak effektek, rétegkeverési módok, amik el fognak veszni, vagy egyszerűen máshogy fognak megjelenni. Tetézve pedig az a legőrjítőbb, ha egy egész groupra alkalmazol áttűnést, vagy effektet.

Tipp: Egyesíts. Mentsd el magadnak, ha változtatni kell később, de amikor le adsz egy fájlt, akkor már csak azok az effektek maradjanak benne kibontva, amiket elő lehet állítani CSS-ben is. Ide jó lett volna egy link ami összefoglalja ezeket. Van ilyened?

Jó lesz az szemre

Jó hát! Aztán ne panaszkodj, ha valami nem pontosan ott van, ahova „tervezted”.

Kézzel behúzza, szemre, hogy az a közepe és akkor úgy lesz. De az nem 50%, hanem 53%… A gridrendszerek használatát ez öli meg.

Tipp: Tele a net jobbnál jobb rendszerekkel. Válassz egyet, lehetőleg úgy, hogy egyeztetsz előtte a fejlesztővel és utána karcold bele a monitorodba azokat a segédvonalakat!

Photoshop

Jogosan merül fel a kérdés, hogy ha ilyen nyűg ez Photoshop, akkor mi van helyette? Erről fog szólni a poszt 2. része. Igyekszünk összeszedni azokat a célprogramokat, amik közelebb tudják hozni a grafikust a fejlesztőhöz.

Ha addig is van véleményed, javaslatod, akkor mond el, ha pedig találkoztál már valamelyik oldalról a fenti problémák egyikével, oszd meg, hátha eljut olyanhoz, aki tanulhat belőle!