Tedd ezt a cikket a kedvencekbe!

Ez a technika jól jöhet minden olyan oldalon ahol 3d hatást akarunk elérni. Nem csak papír daraboknál használható, bármilyen formához ami árnyékot vethet.

Készítsünk egy 400x400-as dokumentumot. A háttér színét állítsuk szürkére (ezen jól kivehetőek a grafikák).

Rajzoljunk egy 250 széles és 270 pixel magas téglalapot, az új papír nevű rétegünkre. Az effekteknél adjunk hozzá egy felülről lefelé, fehérből vajszínűbe haladó színátmenetet (gradient overlay). A szerkesztés/alakítás/forgatás paranccsal (edit/transform/rotate) forgassuk el enyhén jobbra a téglalapot, csak hogy ne legyen annyira szabályos a kép.



Menjünk vissza a rétegünk stílus lapjára, és adjunk rá még egy effektet: minta átfedés (pattern overlay). Válasszuk a mellékelt képen látható mintát. Ha nem találjátok, nyomjatok a kis nyílra az ablakban (kép), és válasszátok a minta csoportot, aztán ok gomb. Az áttetszőséget állítsuk 20%-ra. Ezzel piszkos hatást adtunk a papírnak, így reálisabb lesz. Persze elhagyhatjátok ha nem kell kosz rá.







Nyomjunk egy ctrl klikket (macen alma klikk) a papír rétegen, így kijelöljük azt. Hagyjuk aktívan a kijelölést és készítsünk új réteget, képdoboz néven, váltsunk is rá. Most válasszuk a kijelölés/módosítás/zsugorítás parancsot (select/modify/contract), és adjunk meg 5-ös értéket. Így egy ugyanolyan formájú, de 5 pixellel kisebb kijelölést kapunk, a kívül eső rész lesz a fénykép kerete. Töltsük ki tetszőleges színnel. Ez egy segédréteg lesz, ebben fog megjelenni a valódi képünk, amit könnyedén megváltoztathatunk bármikor.

Ehhez egy vágómaszkot kell készítenünk, nézzük hogyan!

Töltsünk be egy képet amit a fényképre szeretnénk tenni. Jelöljük ki az egészet, másoljuk el, aztán illesszük be a sajátunkba. Tegyük legfelülre a réteget, és nevezzük el képnek. Figyeljünk rá hogy biztosan befedje a papírunkat!

Jöhet a trükk! Legyen kijelölve a kép réteg, és ctrl klikkel nyomjunk rá a képdoboz rétegre. A felugró menüben válasszuk a vágómaszk létrehozását (create clipping mask). Ha mindent jól csináltunk akkor a rétegeknek képen láthatóan kell kinézniük. A lényege az ennek a technikának hogy a kép egy meglévő formán belül fog megjelenni, jelen esetben a képdoboz rétegünkön. Így ha szeretnénk egy másik képünket is átalakítani, egyszerűen betöltjük ide, és rámaszkoljuk a képdobozunkra. Egyébként a kép réteget továbbra is mozgathatjuk, torzíthatjuk, persze csak a képdobozon belül.

Eddig egész jó, jöhetnek a 3d hatások, természetesen mind fénnyel kapcsolatos.

Azt szeretnénk ha a fényképünk 3 helyen felemelkedne egy picit, ehhez árnyékra lesz szükség. Készítsünk másolatot a papír rétegről, nevezzük árnyéknak és tegyük a papír réteg alá. Az rajta lévő effekteket kapcsoljuk ki, és helyettük jöjjön színátfedés (color overlay) feketével. Mossuk el picit, szűrők/életlenítés/gauss életlenítés, (filters/blur/gaussian blur), 4-es értékkel.

Most jön a fontos lépés. Használjuk a szerkesztés/ átalakítás/ hajlítás parancsot (edit/transform/warp). Egy 4x4-es négyzethálót kapunk. 3 sarkot húzzunk kijjebb egy kicsit, a többi pontot pedig kicsit a kép alá. A cél hogy csak a 3 saroknál legyen árnyék, mintha felkunkorodnának (kép). A réteg átlátszóságot 60-ra tegyük, mert 100-on az árnyék túlságosan sötét lenne.

Tartsatok ki, már nincs sok hátra!



Jelöljük ki a papír réteg tartalmát (ctrl vagy alma klikk a rétegen), és hozzunk létre egy újat csillanás néven. Miközben aktív a kijelölés, válasszuk a színátmenet eszközt (gradient tool). Állítsuk fehérből átlátszóba haladónak, és a kép jobb alsó sarkából indulva húzzuk a kép közepe felé egy keveset, kb. az egész kép ötödéig. A réteg 80%-ban legyen átlátszó.


Meg van még a kijelölés? Ha nem akkor jelöljük ki újra. Készítsünk még egy utolsó réteget árnyékolás néven. Ismételjük meg az előbbi lépést, ezúttal a bal felső sarokban és fekete-átlátszó színnel. Egy picivel kisebb volnalat húzzunk, a réteg átlátszóság legyen 25%.






Ezzel készen is vagyunk. Ne feledjétek hogy a vágómaszk technikával cserélhető a fénykép tartalma. További jó kisérletezést!

A példafájl innen letölthető.

Mindenki azt gondolja mikor weboldal készítést kezd tanulni, hogy grafikusnak kell lennie hozzá, és a photoshop használatát kell tökéletesítenie. Nos vannak egyszerűbb megoldások is, amikkel profi grafikát készíthetünk, kezdő tudással. Még csak szoftvereket sem kell feltelepítenünk, ne adj isten fizetni értük. Lássunk néhány online grafikus programot!

Splashup

Kezdjük ezzel, ha már photoshopot emlegettem. Talán a PS online és ingyenes verziójának tekinthető, szinte megtévesztésig hasonló felületet kapunk, majdnem ugyanannyi tudással! Leglényegesebb tulajdonsága hogy rétegeket is használhatunk benne. Feltölthetjük kedvenceinket, de akár valamelyik népszerű képmegosztóról is betölthetünk képeket (picasa, flickr, stb.).

Picnik

A Picnik tökéletes példája az olyan online programoknak, amivel kis tudással is profi képeket készíthetünk. Ezen az oldalon nem rajzolhatunk (arra ott a Splashup), viszont könnyedén átalakíthatjuk képeinket. Az oldal bizonyos eszközei fizetősek ugyan, da nélkülük is rengeteg dolgot csinálhatunk: átméretezés, kivágás, élesítés, képkeretezés, fény és kontraszt, forgatás, feliratozás, effektek, alakzatok, kész grafikák, stb., stb. Szintén feltölthetjük képeinket vagy a képmegosztókról is áthozhatjuk őket.

VectorMagic

Egy kitűnő alkalmazás ami még csak néhány hete elérhető, de máris rengetegen használják. A működése egyszerű: vektorizálhatjuk vele képeinket. Mit jelent ez?
A hagyományos képek pixelenként tárolják az információt. Ezen pixelek mérete nagyjából megegyezik a monitorok képpontjaival. Ezért ha nagyítani kezdjük a képünket, egy egy pixel több képpontot foglal a monitoron, ezáltal egyre darabosabb képet kapunk. A vektorok ezzel szemben körvonalakat és bennük színeket tárolnak, így végtelenségig nagyíthatóak.
Nem szabad azonban elfelejteni hogy a vektorizált kép elveszti fénykép jellegét, ezért leggyakrabban logókhoz használjuk.

Stripe Generator

Már már ciki a csíkos háttér mivel a webkettes oldalak 80 százaléka ezt használja, de valljuk be: ha megfelelően (szolidan) használjuk, feldobja oldalunkat.
Ezen az oldalon pofonegyszerűen alkothatunk ismétlődő mintákat, azt hiszem a használata magától értetődő. A kész mintát kis méretű PNG-ként menthetjük.

Gradient Generator

Mi kell még hogy igazi webkettes dizájnt készítsünk? Persze persze, a csíkozás. És még? Szinátmenetek! Ezen az oldalon megnézhetitek hogyan használhatjátok a generátort.

Remélem lesz aki hasznosnak találja ezeket az oldalakat. A profiktól én kérek elnézést. Jövő hétfőn folytatjuk!

Jöjjön egy újabb 3d hatású kivágás effekt, ezúttal egy papírlapból fogunk formát kimetszeni.

Készítsünk egy 400x400-as dokumentumot, fehér háttérrel.
Adjunk hozzá egy új réteget, és nevezzük el papírnak. Töltsük ki tetszőleges szinnel, ezután nyissuk meg a rétegstílus ablakot (dupla katt a rétegen, rétegek eszköztárban), és kapcsoljuk be a színátmenet átfedést (gradient overlay). Érdemes fehérből vajszinű átmenetet beállítani, így nagyjából papír színt kapunk. Függőleges átmenet legyen, lentről felfelé sötétedjen (kép).

Készítsünk egy újabb réteget, nevezzük el alaknak. Az egyedi alakzat (custom shape tool) menüből (kép) válasszunk egy formát, ezt fogjuk kivágni a papírból. Ebben a példában a juharlevelet használtam, de bármi más is lehet.




Tegyük a formát a rétegre, nagyjából a képünk negyedét takarja be (kép). Rögtön nyomjunk jobb gombot rajta, és töltsük ki fehér színnel a formát, és töröljük is az alakzatot a szerkesztés menü törlés parancsával (edit/clear).







Válasszuk a szerkesztés/alakítás/torzítás parancsát (edit/transform/distort), és adjunk egy kis perspektívát a formánknak (kép), ezáltal térbeli hatást érünk el.

Duplázzuk meg az alak réteget, nevezzük kivágásnak. Használjuk újra a torzítás parancsot, és az alak felső peremét húzzuk le és balra úgy, mintha előrevetülő árnyékot szeretnénk készíteni (kép).


Erre a rétegre csak idáig volt szükségünk, segítő rétegként kellett. Most használjuk is fel: jelöljük ki a tartalmát (CTRL és klikk a rétegen az eszköztárban, Mac-en option és klikk), váltsunk át a papír rétegre és nyomjunk törlést. Ezzel lyukat vágtunk a papíron. Törölhetjük is a kivágás réteget.

Mint látható kész ugyan a kivágás, de nem túl realisztikus. Természetesen a fényhatás hiányzik, ehhez árnyékra lesz szükség. Menjünk a papír réteg stílusához (katt a rétegen), és adjunk hozzá egy enyhe vetett árnyékot (drop shadow) (kép).

A levelünk szárán olyan effektre van szükség, amitől úgy tűnik a lapból van felhajtva a kivágás. Ezt egyszerű elérni. Menjünk az alak réteg stílus menüjébe, és adjunk neki színármenet átfedést (gradient overlay) fehérből feketébe. A méretezést (scale) húzzuk 20%-ra, aztán a képen nyomva tartva az egér bal gombját (miközben a színátmenet menüben vagyunk), húzzuk azt lefelé, hogy éppen csak a levél legalján látszódjon az átmenet (kép).


Fogjuk a réteget és vigyük néhány pixelt lefelé, hogy ne a levegőben lógjon a levél (kép)

Egyetlen lépés maradt, árnyékot készítünk a levélnek. Ehhez ugyanarra a technikára lesz szükség mint a kivágásnál: duplázzuk az alak réteget, és a torzítás paranccsal húzzuk le és jobbra a felső peremet, épp a kivágással ellentétes irányba (kép).





Adjunk neki fekete színátfedést (color overlay), és a szűrők/életlenítés menü gauss életlenítés parancsával  (filters/blur/gaussian blur) tegyük homályossá (az érték 2 legyen). (Kép)


Majdnem jó, még kell valami. Adjunk hozzá a réteghez egy maszkot (kép), váltsunk rá. Használjuk a színátmenet  eszközt (gradient tool) a levél tövétől az árnyék tetejéig húzva függőlegesen, fehérből feketébe (kép). Így szépen eloszlik az árnyék a levéltől távolodva.







Készen vagyunk, az eredményt itt láthatjátok, remélem tetszik. A psd innen letölthető.

Mostantól kezdve, minden hétfőn érdekes oldalak várnak titeket! Érdemes lesz tehát visszatérni. Ma néhány közösségi oldalt veszek gorcső alá.

Last.fm

Szeretsz zenét hallgatni? Vadászhatsz a kedvenceidre, de itt a zenehallgatás kényelmesebb módja: írj be egy előadót vagy stílust, és a last.fm kapcsolódó zenéket játszik le neked. Ha tetszik egy szám, jelöld meg kedvencnek, így egy idő után csak olyan számot hallhatsz amit szeretsz.

Listal

Készíts listát a kedvenc filmjeidről, zenékről, könyvekről és játékaidról, ez alapján új dolgokat kínál az oldal neked.

Clipmarks

Szeretnél a web értékes részével foglalkozni? Ebben segít a clipmarks. Ha találsz valami érdekeset a weben, kimásolhatod a clipmarks oldalára és megoszthatod másokkal, és persze ők is veled.

Fleck

Kommentáld a netet! Mire jó ez? Bármilyen neked tetsző oldalhoz megjegyzéseket fűzhetsz, esetleg segíthetsz másoknak az oldal használatában. Egy példa.

• Ezek már nem a 90-es évek
  A kezdeti időkben mindenki photoshopban kezdte a rajzolást, és nagyon erősen a szűrőkre és effektekre koncentrált. Csilanások, domborítás, árnyékok és ragyogások túlzott használatával próbáltak eredményt elérni. Fontos hogy elkerüljük ezt. Félreértés ne essék, nagyon is szükségünk van rájuk, de ne az legyen a célunk hogy lássa mindenki hogy ott árnyék van, hanem hogy minél szebbé és reálissá tegye az oldalt. A kevesebb néha több, legfőképp igaz ez a web dizájnra. Az említett eszközök mind a hasznunkra lesznek mindaddíg, míg nem tömjük meg vele a dizájnunkat.
  


• Használhatóság, semmi felesleg
  Úgy tehetjük az oldalunkat eredményessé, ha a látogatók elégedettek. Könnyű kezelhetőség, jól olvasható szövegek, és legfőképp áttekinthetőség. Ha valaki bejön az oldaladra, tudniuk kell az első néhány másodperc után hogy mit kínálsz nekik. Ugyanis a legtöbben már akkor döntenek mikor meglátták az oldalt. Ígényes oldal egyenlő a megbízhatósággal. Ebben a néhány másodpercben van szükség a jó dizájnra. Nem szabad teletömni az oldalt, nagy terekre van szükség. Természetesen a sok tartalommal nincs baj, de fontos hogyan mutatod be ezeket.
  

• Szövegek
  Szintén a korai időkre voltak jellemzőek a kis betűméretek. Én is az idióta használók közt voltam, ugyanis jól mutat. Ám ha a funkcióját tekintjük, teljesen hibás ötlet. Azt szeretnénk hogy lássák mit kínálunk, és mi (a többség) nem látszerészek vagyunk. Sose menjünk 11px alá, és még a 11-es méretet is ritkán használjunk. 12-14px közt érdemes a szövegünket írni, de nagyobb felbontáson a 12 még kevés is lehet. A sortávolság is nagyon fontos, a nagyobb köz olvashatóbbá teszi az oldalt.

Most következzen egy olyan technika ami nagyon egyszerű, ám annál több évet spórolhatunk vele. Tudjátok, ez köszön vissza a címlapokról, kivasalt arcok és domborítások. Mi csak vasalni fogunk.

Előre szólok hogy minél többet fiatalítunk egy arcon, annál inkább mű lesz. Ez a címlapon szereplőket űgy tűnik nem zavarja, minket viszont igen. Ezért meg kell próbálnunk természetes arcot készíteni, ez a legnehezebb az egészben, de mindenkinek magábn kell eldöntenie hogy mennyi elég. Akkor lássunk hozzá, ezzel a képpel kezdünk.

Az első lépést kihagyom, mivel bár nagyon jó eredményt érhetünk el vele, túlságosan mű arcot csinál. Ez a helyi javító eszköz (spot healing brush). Úgy működik hogy a javítandó területhez hasonló részletet keres a képen, és kicseréli vele. Így eltüntethetjük az arc hibáit (miteszer, stb.) anélkül hogy rontanánk a minőségen. A lényeg hogy nagyon kicsi ecsetet használjunk. Én azért nem javaslom mert hiba minden arcon van, ezeket eltüntetve egy szupernemlétező arcot alkotnánk. Kírívó archibáknál használjuk csak.

Nevezzük el a réteg hátteret eredetinek, és készítsünk róla egy másolatot (jobb gomb a rétegen, rétegmásolat készítése (duplicate layer)), és nevezzük el retusáltnak. Az új réteg legyen felül. Dolgozzunk ezen egy keveset:










Három szűrőt alkalmazunk rajta, először a szűrők/életlenítés/intelligens életlenítés parancsot (filters/blur/smart blur) (kép). Ezzel eltüntetjük az összes hibát, természetesen még változtatunk az erején. Ezután jöhet a szűrők menü/zaj/por és karcok parancsa (filters/noise/dust and scratches) (kép), ezzel még több hiba tűnik el.

Mint látható a pórusok teljesen eltűntek, ezért újakat készítünk. Ehhez a zaj almenü/zaj hozzáadását (noise/add noise) használjuk (kép). Fontos hogy a monokróm kapcsolót benyomjuk, mivel nem akarunk színeket adni a képhez, a meglévő színből készítjük a zajt. Ha sikerül jól beállítani, létrehozhatunk a pórusokhoz hasonló alakzatokat, de mégis megmarad a sima bőr.

A retusált nevű réteghez addjunk hozzá egy átlátszósági maszkot (add layer mask) (kép), váltsunk rá a rétegtől jobbra lévő maszkra, és a festékvödör (paint bucket) eszközzel töltsük ki fekete színnel. Így teljesen átlátszó lesz az új rétegünk.

Most jön a legfontosabb mozzanat. Ahol azt akarjuk hogy a kisimított bőr látszódjon, az ecset eszközzel fehér színt festünk a réteg maszkra. Ugyanis a réteg maszk úgy működik, hogy a fekete területeken átlátszó lesz a réteg, a fehéreken pedig takarni fogja.

Szépen lassan fessük végig először nagy ecsettel az egész arcot, a nehéz helyeken pedig váltsunk kisebbre. Ha nem akarjuk hogy teljesen előtűnjön a jevított bőr, használjunk a fehérnél sötétebb színt (szürkét), így csak részben tűnik elő a retusált réteg.







Nagyon vigyázzunk a szemeknél, a szájnál és a hajnál, azokat nem akarjuk homályosítani. A főbb mimikai ráncokat is kerüljük el, ezekre szükség van a tarmészetes archoz. Picit vékonyíthatunk rajtuk úgy, hogy a peremébe egy picit belerajzolunk szürke színnel.







Végül használjuk a életlenítés eszközt (blur tool) a retusált rétegen, tüntessük el vele az esetleges hibákat.







Előtte és utána:




















PSD letöltése

Tegnap kaptam egy levelet az egyik olvasómtól, aki nagyon jó kérdést tett fel: hogyan tehetné az elkészült gombot egy weboldalra úgy, hogy az beleolvadjon a háttérbe? Lássuk a lehetőségeinket!

4 megoldás létezik a problémára:

1. A weboldal hátterével együtt menteni ki a képet. Ezt úgy értem hogy ha az oldal minden eleme photoshopban készül, akkor a gomb ráhelyezhető a háttérre, amit utána az egyesített másolás paranccsal kimásolható a vágólapra.
   
   
2. Kép kimentése PNG formátumban. Ha photoshopban kivesszük a gomb mögül a fehér hátteret, és a rétegeket összeolvasztjuk, kimenthető a kép átlátszó háttérrel is, PNG formátumban. Egy nagy hátránya van ennek, az internet explorer csak 7-es verzió óta tudja értelmezni az ilyen képeket. Firefoxban tökéletesen működik. Mivel a legtöbben még mindig a 6-os explorert használják, így ez nem a legjobb megoldás.
   
   
3. Kép mentése GIF formátumban. Ez az egyetlen platform független megoldás, sok hátránnyal. A képet ugyanúgy kell kimenteni mint a PNG-t, de a képet 256 színűvé kell tennünk, a kép menü/színmód/színpaletta parancsával. A felugró ablakban az átlátszóságot be kell pipálni. Éppen ez a legfőbb hátrány, a kép max. 256 színű lehet. Ez általában elég, de ha sok szín van a képen, csúnya átmenetek keletkeznek. Van még egy gyengéje a módszernek. A PNG-vel ellentétben, a GIF képek csak 2 állást ismernek fel a képen: átlátszó és nem átlátszó. Ez azt jelenti hogy nem tudunk félig átlátszó területeket megadni, tehát például egy gomb árnyéka nem menthető ki, mivel a peremeken egyre erősödő átlátszóságra lenne szükség. PNG formában viszont ezt is megtehetjük.


4. Léteznek különféle ún. hack-ek, amik közelebb visznek a megoldáshoz. A gond csak az hogy egy kezdőnek talán nehéz lehet a használatuk, és nem tökéletesen böngésző függetlenek. Példák a kommentek között.

Mint látható tökéletes megoldás nincs, ebből kell kihozni a legtöbbet.

A webkettes oldalak közül nézzünk egy olyat, ami sokat segíthet a rendszerezésben és az információszerzésben. Rengeteg minden van neten, ezt áttekinteni szinte lehetetlen, de sokat könnyíthetünk a helyzeten.



Természetesen nem a Netvibes az egyetlen startoldal, vetélytársa legfőképp az igoogle, de most csak ezzel foglalkozzunk. A netvibes jóval a google előtt készült, én úgy érzem sokkal kiforrottabb a vetélytársainál. Persze az is lehet hogy elfogult vagyok (nem!), elvégre ezt használom már a kezdetektől.

Szerencsére a netvibes tud magyarul, így nem kell magyaráznom a regisztráció menetét. Azt érdemes tudni hogy a főoldalon regisztráció nélkül is kipróbálhatjuk az eszközöket, ha megtetszik és regisztrálunk, a meglévő oldalunkat rögtön elmenti.

A netvibes legfontosabb funkciója a hírolvasás (rss). Biztos nagyon sokan tudják hogy mi ez, akit nem érdekel most ugorjon lejjebb.
Az rss források lényege hogy egy oldal bejegyzéseit listaként kezeli, ami folyamatosan frissül az új bejegyzésekkel. Egy oldal rss forrását felvehetjük a netvbes oldalunkra, ami ezentúl jelzi ha új hír került az oldalra. Így könnyedén áttekinthetünk rengeteg oldalt, anélkül hogy állandóan új írásokra vadásznánk.