A ‘Design’ kategória arhívuma

Behavazás Photoshoppal

Írta: | 2007. december 01. | kategóriák: Blogolok, Design, Speciális effektek | 2 megjegyzés

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!
Fehérre színezett felső részAz 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 Web 2.0 designer szemmel (harmadik rész)

Írta: | 2007. november 28. | kategóriák: Blogolok, Design, Web | Nincs megjegyzés

Ízléses web 2.0A 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 »

A Web 2.0 designer szemmel (második rész)

Írta: | 2007. november 25. | kategóriák: Blogolok, Design, Web | 5 megjegyzés

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

Elkülönített fejléc

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 »

A Web 2.0 designer szemmel (első rész)

Írta: | 2007. november 23. | kategóriák: Blogolok, Design, Web | 8 megjegyzés

Browse Happy, web 2.0 jellegzetességekAz 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 »

Vektor hatású felhő

Írta: | 2007. október 28. | kategóriák: Blogolok, Design, Speciális effektek | Nincs megjegyzés

Vektor hatásu felhőA minap láttam egy érdekes weboldalt a neten böngészve és megtetszett rajta egy felhős design. A lényeg, hogy most eszembe jutott és leírom, hogyan lehet olyan kis aranyos felhőket készíteni Photoshoppal. Első lépésként hozz létre egy új dokumentumot, fehér háttérrel. Második lépésként válaszd az Elliptical Marquee Tool-t. Magyar változatban valami hasonló lehet: ovális kijelölési eszköz. Válaszd azt a lehetőséget, hogy a kijelöléshez adja hozza az újabb kijelölést, majd készíts egy nagy ovális kijelölést, amihez hozzáadod a kis kijelöléseket, így kapva egy felhőt. Természetesen ez még egyszínű, de már csak egy lépésre vagy a valóságtól.

Elolvasom a teljes bejegyzést »

Speciális WordPress sablon fájlok

Írta: | 2007. október 24. | kategóriák: CMS, Design, Programozás, Web | Nincs megjegyzés

Ebben a bejegyzésben egy listát találsz azokkal a fájlokkal, amelyeknek speciális értékük van a WordPress számára. Miért fontos ez? Azért, mert ha egy jó sablont akarsz készíteni, akkor pontosan tudnod kell, melyik fájlt, milyen esetben használd a legmegfelelőbb eredmény elérése érdekében.
A legfontosabb fájl a style.css. Ezt kötelező módon tartalmaznia kell a sablonnak a megfelelő fejléccel, mivel ez az a fájl, amely a sablon definícióját végzi. Ha nem tartalmazza a fejlécet, akkor is működik, de van eset, hogy egyéb történik, mint amit elvárunk (pl. egyes esetekben a Default sablont hozza be, ha nincs fejléc).

Elolvasom a teljes bejegyzést »

WordPress sablon készítése (második rész)

Írta: | 2007. október 21. | kategóriák: (X)HTML, CMS, CSS, Design, PHP | 11 megjegyzés

Ebben a leírásban a sablon fájlok kerülnek nagyító alá. A sablon kód fájljai egy vagy több PHP fájlból állnak. Akárhogyan is extrém eset az, ha csupán az index.php állomány áll rendelkezésre. A WordPress a hivatkozásból próbálja eldönteni, hogy melyik sablon a legrelevánsabb és hívódik meg, mint afféle parser a kérésre. Első lépésként azt nézi, hogy milyen kategóriájú a kérés: pl. Keresés, Arhívum, Bejegyzés, stb. Ha megvan a típus, akkor megpróbálja meghívni a kellő sablont, viszont, ha az nem létezik, akkor lejjebb ugrik a hierarchiában, így eljutva az index.php oldalig, ha nincs más létező állomány.

Elolvasom a teljes bejegyzést »

WordPress sablon készítése (első rész)

Írta: | 2007. október 19. | kategóriák: (X)HTML, CMS, CSS, Design, PHP | 11 megjegyzés

Janoszen weboldalán találtam rá egy érdekes leírásra, ami ötletet adott a leíráshoz. A téma: WordPress sablon készítése. Ahhoz, hogy egy sablon tudjál készíteni, kell tudjál HTML-t, CSS-t és PHP-t is. Ajánlott olvasmány a WP dokumentációja és a WordPress codex is.
A WordPress sablonok két fő részből állnak: a programozási része, PHP fájlok, és a design része, CSS fájl(ok) és a hozza tartozó képek. A sablon a wp-content/themes/ mappaban kell legyen. Pontosabban a megadott mappában kell létrehozd a sablon nevével annak mappáját. A sablon mappájában két fájl a kötelező: style.css és index.php. A többi rád van bízva, hogy mit is csinálsz és hogyan csinálod. Ha plusz függvényeket is szeretnél használni, amiket te definiálsz, akkor használnod kell a functions.php állományt is. Az említett fájlban kell definiáld a függvényeket és szükség szerint megírd azokat.

Elolvasom a teljes bejegyzést »

Windows Live stílusú menü

Írta: | 2007. október 18. | kategóriák: Design, Interface, Photoshop, Speciális effektek | 16 megjegyzés

A web 2.0 világában élünk és sok szép, úgynevezett glossy effektes dolog létezik, minden csillog villog. Valamelyest ebben jelentkezik, grafikai szinten a web 2.0. A következő leírásban egy, a Windows Live navigációs menüjéról mintázott, üveges hatású menü elkészítését fogod elsajátítani.

Windows Live stílusú menü
Kezdésnek hozzunk létre egy új, fehér hátterű dokumentumot, lehetőleg téglalap alakút (500x60px). Hozz létre egy új réteget a menü alapjának elkészítésére. Válaszd a Rectangular Marquee eszközt és készíts egy kijelölést, amekkorára a menüt akarod készíteni, pl. 480x40px, majd színezd ki a következő színnel: #005b95. A kellő effektelés érdekében végezd a következőket: Layer / Layer Style / Gradient Overlay a következő színekkel (balról jobbra, vagyis a világosabb szín legyen felűl): #2473a5, #005b95, #3585b9, #7eb1d2. Egy Stroke effekt is kell, a következő paraméterekkel: 1px széles, outside, opacity (láthatóság) 100%, a szín pedig #003150.

Windows Live stílusú menü

Elolvasom a teljes bejegyzést »

Aero vista gomb készítése

Írta: | 2007. október 07. | kategóriák: Design, Interface, Speciális effektek | 2 megjegyzés

Aero Vista gomb alapA leírásban Aero Vista stílusú gombokat fogunk elkészíteni. Több okból is érdemes elsajátítani ezt a fajta stílust: aránylag egyszerű az elkészítése és a weben is jól néz ki, afféle web2.0 stílusnak is megfelel. Vágjunk is bele, hozz létre egy új dokumentumot, majd válaszd a Rounded Rectangle eszközt. A radius paramétert állítsd 5 képpontra, majd rajzolj egy ehez hasonló méretű lekerekített sarkú téglalapot.
Ha készen vagy, akkor kezdődhet a nagy átalakítás. Néhány effektet használva, hamarosan befejezed a képet és megtanulod a Photoshop néhány, leggyakrabban használt, effektét is. Kattints duplán a rétegen és válaszd a Stroke egységet, vagy Layer/Layer style/Stroke. Állítsd be a következő értékeket: size 1, position outside, blend mode normal, opacity 100%, fill type color, color fekete.

Elolvasom a teljes bejegyzést »