A leírásból megtanulhatod, hogyan készíts retró hatású képeket mindössze néhány lépést használva. A leíráshoz szükséged lesz egy Photoshopra és néhány percre. Az első lépés az, hogy válaszd ki az átalakítani kívánt képet. Nyitsd meg a képet, majd duplázd a réteget. A duplázást több módon is elérheted, pl.: jobb klikk a rétegen, majd Duplicate Layer vagy jelöld ki a réteget (ha alapból nem lenne kijelölve) és Ctrl + J billentyűpáros (Command + J). Az eredeti réteget törölheted, a továbbiakban nem lesz rá szükség.
Elolvasom a teljes bejegyzést »

A következő leírás segítséget biztosít fraktálok és véletlenszerű formák készítéséhez Photoshopban. Készíts egy új dokumentumot 300 x 300 képpont mérettel, fekete háttérrel. Ezt követően készít egy új réteget aminek a közepén hozzál létre egy közepes kijelölést. Ezt a kijelölést töltsd ki fehérrel. A Ctrl (Command) gombot letarva üss D billentyüt, így megszünik a kijelölés. Majd üss még egy D billentyüt, ezúttal a Ctrl lenyomása nélkül, hogy visszaálljanak az alap színek (fekete-fehér).
Elolvasom a teljes bejegyzést »

Hosszú kimaradás után egy újabb Photoshop leírással gazdagodik a tartalom. A leírást követve elkészítheted saját robbanó és egyben fényesre stilizált szövegedet. Különösebben nincs egy adott célja, amire használhatod. Szerintem logónak is megfelelő. A kezdéshez hozzuk létre a munkafelületet: készíts egy 500×300 képpontos (pixeles), fehér hátterű, 8 bittes dokumentumot. Válaszd ki a neked tetsző színt (foreground color), ami a szöveg és a robbanás színét is adja majd. Készíts egy írást egy új rétegen, lehetőleg nagy betűkkel, ami nagyrészt átfogja a dokumentumot (szélességre).
Elolvasom a teljes bejegyzést »

Az elkövetkezőkben bemutatók néhány példát havas szöveg készítésére. Az elsőben inkább fagyos, hóharmatos szöveget készítek, a másodikban behavazott szöveget, aztán meg, ami jön. Az alap lépések mindenik effekthez ugyanazok: hozz létre egy fehér háttérszínű dokumentumot, és helyezz rá egy (tetszés szerint) kék szöveget. Ezen a szövegen fogjuk elvégezni a kívánt változtatásokat.

Harmatos szöveg készítése. Talán ez a legegyszerűbb. Készíts egy új réteget a szöveg rétege fölé. Ezt követően a Ctrl gombot lenyomva tartva kattints a szöveg rétegének nézőképére (szöveg réteg esetén egy T betű). Így készítesz egy kijelölést, amely a szöveg körvonalát követi. Ha nem sikerül, akkor ugyan ezt a műveletet egy más módszerrel is elérheted: jobb klikk a nézőképen és Select Layer Transparecy (magyarban valami ehez hasonló kellene legyen: a réteg áttetszőségének kijelölése). Ezt követően válaszd a fehér előtérszínt (foreground color, a felső szín négyzet) és egy soft brush-t (egy puha körvonalú, nagyon áttetsző ecset). Az új rétegen óvatosan színezd be a szöveg azon területeit, ahova hóharmatot szeretnél.
Elolvasom a teljes bejegyzést »

Ahogyan azt a fórumban beígértem, téli témába vágó leírások következnek. Kezdésnek egy behavazott effektet mutatok be, amit sokfelé újrahasznosíthatsz: weboldalad téli designra váltásánál, behavazott fejlécnek, képeslapnak, stb. Szükséged lesz néhány grunge stílusú ecsetre is, rengeteg van az interneten. Ha nem találsz, az sem gond, alap ecsetekkel is el lehet készíteni. Jó szórakozást!
Az első lépés, mint máskor is, az új dokumentum létrehozása, bár ez esteben nem számít a háttérszín. Válassz két világoskék színt előtér és háttérszínnek (foreground, background), majd egy vertikális színátmenettel töltsd ki az alap réteget. Ha készen vagy, válaszd a fehért, mint előtérszín és keress egy puha ecsetet. Hozz létre egy új réteget és színezd ki a képed felső részét. Ezt követően válassz egy szétzúzott ecsetet és egy új rétegen próbáld felrojtozni a havat.

Ezt követően hasonló, tört, ecsetekkel próbáld neked megfelelőre formázni a hó lelógó részeit. Ha befejezted a fehérítést, akkor egy új rétegen, készíts egy szétszórt fekete mintát, ugyancsak egy karcos ecsettel. A fekete réteg áttetszőségét állítsd egy alacsony értékre, hogy csak egy kevés árnyékot/piszkosságot adjon a hónak.
Elolvasom a teljes bejegyzést »

A webkettes design elemek leírása elég hosszúra sikerült. Az elöző részekben szó volt a lényeges, nagy elemekeről. A jelen, harmadik és talán befelyező részben az apróságokra próbálom fektetni a hangsúlyt. Mint afféle bevezetés, megragadnám a lehetőséget egy, az elöző leírásokban nem szereplő, nagy elem ecsetelésére. Arról van szó, hogy minden webkettes oldalon megfigyelhetőek az elkülönített részek a tartalmi egységeben is. Reményeim szerint ezt a tulajdonságot tovább boncolva minden említésre érdemes elemet érinteni fogok.
A részek elkülönítése nagyon egyszerű dolog (nak tűnhet): fogok egy oda nem illő háttérszínt, nem találó szövegelemeket és készen is vagyok. Rossz! A lényeg, hogy megtartsuk az oldal áttekinthetőségét, egyszerűségét, vagyis a letisztultságot. Első lépés, hogy különítsük el az állandó navigációs elemeket. Ez álltalában a főmenü. Használjunk a designba találó, de mégis összetéveszthetetlen formákat és színeket, tisztán olvasható betűket az elkészítéshez. Ez azért fontos, hogy tudassuk a böngésző személlyel, hogy: hol van és hová mehet.
Elolvasom a teljes bejegyzést »

Az első részben szó esett az általános jellemzőkről, az oldal elrendezéséről, méreteiről és a szövegek formálásáról. Ez a rész egy más megközelítésből szemlélteti a webkettes karaktersziszikákat.

Pozitív egyszerűség

Régebb is említettem, hogy az egyszerűség egy etalon a web 2.0 világában. Ezt most mélyebben is elemezném: mit is értek a pozitív egyszerűség alatt. Vegyük alapul a valós életet: ha van egy megoldásra váró feladat és két megoldási lehetőség, melyiket választjuk? Természetesen az egyszerűbb nyeri el a tetszésünk! Így van ez a weben is: a böngészőt nem érdekli, hogy mennyi mindent lehet belemocskolni egy jó, tartalmas, weboldalba. A látogatókat a tartalom érdekli; az, hogy egyszerűen megtalálja, szinte elvárássá vált.
Ha például egy weboldalt teleszúrkálunk mindenféle widgettekkel, annak nem lesz jó vége, mivel a látogató a csicsás dolgokra fog odafigyelni és nem lesz már türelme/ideje az igazi tartalom megtalálására. A hasonló kellemetlenségek elkerülésére több egyszerüsítő módszer is van a gyakorlatban. Egy bevált eljárás, ha eltüntetjük a fő tartalomhoz szorosan nem tartozó elemeket vagy kevesebb figyelemfelkeltést biztosítunk ezeknek az elemeknek. Ugyancsak ide tartoznak a sokak szerint dekorálásnak tartott, úgynevezett webkettes megbélyegzések. Az ikonok, kitűzők és egyébb szemkápráztató elemek fő célja a figyelemfelkeltés: a fontos információra való figyelmeztetés.
Elolvasom a teljes bejegyzést »

Az előbbi cikkekben (web 2.0 gyorstalpaló, web 2.0 műszaki szemmel) nem került kihangsúlyozásra a webkettes esztétikum. Ebben a bejegyzésben megpróbálom körülírni és megmagyarázni a webkettő grafikai szokásait.

Általános vonások

Szinte minden webkettes weboldalon találhatunk színátmenetet, kontrasztot, letisztultságot, harmadik dimenziót, ikonokat és sok-sok szabadhelyet. Bizonyára sokan megkérdik magukban: mi az új? Talán semmi! Minden esetre, abban gondlom mindenki egyetért, hogy régen nem volt ilyen népes a jól megformált weboldalak tömege. Több dolgonak is köszönhető ez, köztük a jobb eszközöknek, a web fejlődésének, de akár az inspiratív odalaknak is! A következő részben sorraveszem a legfontosabb elemeket.
Elolvasom a teljes bejegyzést »

A leírás egy szövegeffektet mutat be: technoszöveg készítése. A nehézségi foka eléggé egyszerű, de mégis szép kinézetet nyújt. Kezdjük is az elején: hozz létre egy új dokumentumot, ami elég nagy a szövegednek, pl. Egy 500×100 képpontos vászon éppen elég lesz. Válaszd ki a betűtípust, amivel írni fogsz (lehetőleg valami kövér betű legyen), majd írj egy szót. Nem árt, ha jól választod meg a színt, mert a későbbiekben nehezebb lesz már változtantni, miután raszteressé tesszük a vektorszöveget (megérik az effektek).
Miután kész vagy a gépeléssel és színezéssel, készítsd el a szöveged kijelölését. Több módon is megteheted, én csak a két legegyszerűbb módszert írom le. Az egyik, hogy a Ctrl billentyűt lenyomva tartod és rákattintassz a szöveg nézőképére (az a kis kép, a réteg neve mellett). A másik módszer: jobbklikk a nézőképen, majd kiválasztod a Select layer transparency menüpontot.

Elolvasom a teljes bejegyzést »

Készíts egy 100×100 képpontos, fehér hátterű dokumentumot. Válaszd ki a neked megfelelő két színt, amelyet a szem elkészítésére fogsz használni, majd a világosabbat állítsd be az előtér színének, a sötétebbet a háttér színnek (foreground és background színek).
A Rectangular Marquee Toolt használva, jelöld ki a dokumentumod kb. egynegyedét (a bal oldalát), majd töltsd ki a sötétebb színnel (Edit / Fill). Következő lépésként fordítsd meg a kép színeit, Image / Adjustments / Invert vagy üss Ctrl-I kombinációt. Erre a szélhatás tulajdonsága miatt van szükség, hogy a sötétebb színre fújja a világosabb színt. Most, hogy megvagy a színfordítással, add hozza a széleffektet: Filter / Stylize / Wind. Ezt ismételd meg kb. 3szor, amíg hasonló képet nem kapsz. Az ismétlést a Ctrl+F gomb leütésével is elérheted, mivel az mindig a legutolsó effektet fogja újból elvégezni.
Elolvasom a teljes bejegyzést »