Icons
Az utobbi par evben elkezdtem kicsit aktivabban foglalkozni az ikontervezessel, mert a tapasztalat azt mutatja, hogy bar csillionyi fizetos es ingyenes ikonkeszlet elerheto az internetsen, ezek tobbsege vagy nem abban a meretben keszulnek mint amire szukseg lenne, vagy hianyzik belole az amire epp szukseg lenne (Milyen szep, hosszu mondat).
Ilyenkor vagy megprobaljuk megrajzolni a hianyzokat (es szinte biztosan erzodni fog rajtuk, hogy utolag lettek hozzapatkolva) vagy uj szetet rajzolunk es akkor minden ugy fog kinezni, ahogy mi szeretnenk.
Par guideline, ha az utobbi mellett dontenenk:
Egyseges meretek:
Az egyik legfontosabb szempont, hogy az ikonjaink egyseges benyomast keltsenek. Igyekezzunk tehat az ikonok foltjat kb azonos meretre hozni. Ehhez segitseg lehet, ha a tervezett ikonmeretben meghatarozunk egy un. Safe frame-et, ami egy, az ikonmeretnel kisebb negyzet. Hasznalata kb hasonlo mint a betuknel a baseline, a korok, kiallo elemek kiloghatnak a belole, a negyzetes dolgok kevesbe, az eredmeny pedig jo esetben egy egyseges ikonkeszlet lesz.
Egyseges meretek pt 2.:
A masik hasznos lepes az egysegesseg iranyaban a konzekvens vonalvastagsag-hasznalat. Az erzesre beallitgatott vastagsagok, utolag meretezgetes a legtobb esetben nem celravezeto. Torekedjunk hat arra, hogy a keszulo ikonok mar a legelso vonalhuzasnal legyen mar egy konvencionk, hogy milyen vastag lesz a kontur, a detailvonal stb.
Tervezzunk meretben:
Lehetoleg minden ikont probaljunk meg felhasznalasi meretben elokesziteni, igy elkerulhetjuk az olyan szituaciokat, hogy ami illustratorban 1000×1000px-en jol nez ki, vegleges meretben (pl 32×32) mar kevesbe; a vonalak homalyosak, a reszletek pedig nehezen kivehetoek.
Keep it simple:
A jo ikonok ismerve, hogy keruli a folosleges reszleteket es csak annyi elemet hasznal, amivel meg pont le lehet irni a hozza tartozo fogalmat. Peldaul egy kapcsoltamos telefonikonnal nem szukseges a tarcsazot belerajzolni a keszulekbe, ha a kezibeszelo konturja is megteszi. Oraikonnal eleg egy szamlap es ket mutato, a beosztasok es a masodpercmutato elhagyhato. Tudnek meg tucatnyi peldat mondani, de a lenyeg, hogy amit ki lehet hagyni, azt hagyjuk ki, a szettunk halas lesz erte. Termeszetesen kivetelek mindig vannak, nagyobb meretu felhasznalas eseten van hogy el kell barokkositani az ikonokat, de kisebb mereteknel (32×32px alatt) jobb ha az ikonunk minel egyszerubb. Figyeljunk emellett arra is, hogy ne detailezzunk bizonyos ikonokat tul, masokat alul, mert a vegeredmeny nem lesz egyseges.
Ha mar szinek:
Ha szines ikonokat rajzolunk jol jon ha van egy palettank, amibol osszepickelhetjuk a szineket, ezzel is az egysegesseg fele tudjuk terelni a szettet. Ugyanez vonatkozik a grayscale dolgokra is, definaljunk 4-5 arnyalatot es abbol valasszunk arnyek es highlight szint, az ikonkak nagyon halasak lesznek erte.
Tervezd egyutt:
Nagy segitseg ha az ikonokeszletunket egy dokumentumon belul keszitjuk, ideailis esetben egy gridre felosztva, igy hamarabb eszrevehetjuk/javithatjuk a meret/detail-beli egyenetlensegeket.
Grids are cool:
Nem kotelezo, de sok szempontbol megkonnyiti a dolgunkat ha ikonjainkat gridek segitsegevel rajzoljuk, igy a meretigazgatassal, detailezessel kevesebb problemank lesz. Raadasul ha kisebb mereteket is elo kell allitani, egy jol megvalasztott grid-beosztassal kevesebb szopo lesz az osszetapado vonalak/detailek miatt.
Ha tobb meretet kell gyartani:
Ha 16×16 es hasonlo kis meretekben is kell gondolkodnunk, keszuljunk fel a pixelezesre, mert nincs univerzalis megoldas arra, hogy ugyanaz az ikon tobb meretben is ugyanolyan eles maradjon vektorbol. Bar van mar az Illustrator CS5-ben align to pixel grid kapcsolo, nagyon ritkan szokott ugy kijonni egy keszlet, hogy vegul ne kelljen matatni a pixeleket a kis meretu verzioknal.
Tovabbisvanmondjammeg, de most ledolok standbyba, mert holnap is van nap.
Stay tuned.
Popularity: 19% [?]


2011. August 11., Thursday 8:22
Szia,
Sokkal élvezetesebb lenne, ha esetleg a betűt tetején az ékezetek is megjelennének. Sok esetben nem olvasom el a cikkeket, épp emiatt.
Üdv.
2011. August 11., Thursday 11:25
FYI, a bejegyzesek nagy szazaleka ifonon szuletik, ahol az ekezetek elocsalogatasa meglehetosen korulmenyes – mint az kozismert.
2011. August 11., Thursday 13:19
a méregdrága ifonok ilyen praktikusak?
2011. August 11., Thursday 14:32
Vajh melyik okostelefon rendelkezik 101 gombos magyar billentyuzettel? ;)
2011. August 11., Thursday 15:32
nemkellenek ekezetek, en sem irok sose…. tolunk nyugatra sincs!:D
2011. August 11., Thursday 16:14
Pedig meg lehetne oldani az iphoneos ékezet-kérdést: http://blog.lorentey.hu/2010/04/18/iphone-magyar-kiosztas/
2011. August 11., Thursday 19:20
O rly, a ekezetpreferenciakrol szol a diskurzus?
Szerintem aki Adobe termekek (PS, Illu, blabla) es IDE meg HTML editorok kozott tolti az ideje nagyreszet vagy IRC-zett valamikor az elete soran az szinten tartozkodik az ekezethasznalattol.
Node, get used to it vagy mondjatok vissza az elofizetest ha faj az ekezetek hianya (protip).
2011. August 11., Thursday 21:41
Utálom az ékezet nélküli írást, de ezt a bejegyzést el tudtam olvasni ékezetek nélkül is, mert érdekel a téma, és köszi, hogy ezeket így leírtad. ;) Amúgy nem tudom, ezekkel az egységes színekkel mindig bajban vagyok, bár az én buziságom, hogy szeretem a tiritarka ikonszetteket.
2011. August 11., Thursday 23:19
en szemely szerint a monokrom ikonok hive vagyok, egy szines ikon gyakran indokolatlanul von el figyelmet a tobbitol (pl ha piros) es ez lehet negativ hatassal az ikszpirienszre, nem?
Ha szoveggel tarsul az ikonnak inkabb kiegeszito szerepe van, talan ezert is utott at minden sidebar ikont monokromra az apple a lionban
2011. August 12., Friday 0:41
Persze, nem feltétlenül kell mindig hivalkodónak lenni az ikonoknak, sok esetben pont az a lényeg, hogy “csendesen” tegyék a dolgukat, és szimbolizáljanak valamit. Viszont vannak esetek, amikor az ikon már nem annyira ikon, inkább markáns grafikai elem, ami vezeti a szemet, például egy szoftver esetében a letöltés mellett a nyíl, doboz, stb. vagy éppen egy webshopban a kosárba tétel. A nyáltermelés beindításához pedig egy bizonyos rétegnél (persze nem lehet uniformizálni) szükséges, hogy az ikonok tarkák legyenek. De persze értem, amit mondani szeretnél, sőt egyet is értek veled.