Analóg óra készítése Photoshop és Flash segítségével

Írta: | 2011. június 26. | kategóriák: Photoshop

Ebben a 3 részes írásban egy analóg órát fogunk elkészíteni, muködésre bírni valamint, beilleszteni weboldalunkba. Az elso részben elkészítjük magát az órát Photoshop CS3-ban. A második részben “beindítjuk” Flash CS3-ban, és végül beillesztjük egy html oldalba SWFObject segítségével.

I. rész Photoshop

Amit elkészítünk.

A kész óra

1.) Hozz létre egy új dokumentumot az alábbi beállításokkal. A meglévo réteget nevezd át háttérnek és töltsd ki fehér színnel.

új dokumentum létrehozása

Tipp: Érdemes bekapcsolni a rácsozást a könnyebb pozícionálás miatt(View->Show->Grid) valamint, a zoom-ot 200%-ra állítani. View->New Guide, vertikálisan és horizontálisan is készíts egy segéd vonalat. Mindkét esetben 150px legyen az érték.

2.) Elkészítjük az óra keretét. Készíts egy új réteget (CTRL+Shift+n) és add neki az óra keret nevet. Az Elliptical Marquee Tool(M) használatával hozz létre egy 300px-es kört (Style: Fixed Size) és rakd a vászon közepére.

3.) Foreground color-t állítsd a következo színre: #840101 és töltsd ki vele a kijelölést (alt+delte).

4.) Készíts egy 250px-es kört az óra keret réteg közepére és üss egy delete gombot. Ezzel elkészült az óra kerete.

óra keret kész

5.) OK. Kész a keret, adj neki egy kis fény effektet. Ehhez kell egy új réteg és a neve legyen óra keret effekt.

6.) CTRL-t nyomva kattints az óra keret rétegre, ezzel kész is a kijelölésed.

7.) Jöjjön a fény effekt a fény effekt rétegre :). Az elozo kijelölés maradjon, majd válaszd a Gradient Tool(G)-t az eszköztárról, a foregroundot állítsd fehérre, a gradient editorból válaszd ki a foreground to transparent típust. Készíts egy függoleges színátmenetet a vászon tetejétol kb. a 3/4-ig. Opacity-t álltsd 75%-ra.

óra keret effekt

Tipp: a SHIFT-et nyomva tartva pontosan tudod húzni a függoleges átmenetet.

8.) Következzen a számlap háttere. Kell egy új réteg, neve számlap háttér. Állj rá az óra keret rétegre és válaszd ki a Magic Wand Tool(W)-t az eszköztárról. A kereten belül kattints valahova a fehér területre, ezzel megkapjuk a belso területet kijelölve.

9.) Jelöld ki a számlap háttér réteget és állítsd be a foregorund color-t a következore: #c18d29, majd töltsd ki a kijelölést vele (alt+delete).

számlap háttér

10.) Adjunk egy kis belso árnyékot a számlap háttérnek. Ehhez kattints duplán a számlap háttér rétegen, majd a Layer Style ablakból válaszd ki az Inner Shadow menüpontot és állítsd be az alábbiak szerint.

számlap árnyék

11.) Most létrehozzuk az óralap skáláját. Hozz létre egy új réteget és add neki az óra skála háttér nevet. Készíts egy 230px átméroju kijelölést az Elliptical Marquee Tool(M)-al, majd helyezd középre. A kijeölést töltsd ki fehér színnel. Készíts egy újabb kör kijelölést, de most 220px-el. Rakd középre és nyomj egy delete billentyut, ezzel kapunk egy fehér gyurut. Eddig itt tartunk.

számlap gyuru

12.) A következokben elkészítjük a skálát. Az egész órák vastag vonallal a perc skálák pedig vékonyabb vonallal lesznek jelölve. Hozz létre egy új réteget add neki az óra skála nevet. A Rectangular Marquee Tool(M)-al készíts egy 6*5px-es (Style: Fixed Size) kijelölést, majd töltsd ki fekete színnel. Vidd ezt a kis fekete téglalapot a fehér gyüru felso részébe, mint ahogyan a képen is látszik.

kis teglalap

13.) Duplikáld (CTRL+J) az óra skála réteget és az új rétegen lévo kis téglalapot mozgasd a gyuru alsó részére.

kis teglalap alul

14.) Jelöld ki az elozoekben létrehozott két réteget (SHIFT+CLICK), majd egyesítsd oket (CTRL+E), végül nevezd át óra skálara. 12 óra lesz a számlapon és 360° a számlapunk: 360/12=30. Tehát, akkor 30°-al el kell forgassuk az óra skálákat.

15.) Duplikáld az óra skála réteget (CTRL+J), majd csalogasd elo a Free Transform panelt (CTRL+T). A Set Rotation mezobe gépeld be az elozoekben kiszámított 30°-ot majd üss enter-t vagy fogadd el a beállíátsokat a panel végén lévo pipával.

Elforgatva 30°-al

16.) Ismételd meg az elozo lépést még négyszer, ahhoz, hogy mind a 12 skála meglegyen. Mindig az elozoleg duplikált réteget duplikáld, mert akkor a forgatásnál csak 30°-ot kell beírni. Kis kézügyességgel gyorsan létre lehet hozni a skálát (CTRL+J utána CTRL+T, 30° beír, enter, majd elorol :)). Ha mindent jól csináltál, akkor kell lennie egy óra skála rétegnek és még 5 másik copy-nak. Most valahogy így kell kinéznie az órádnak:

Óra skála kész

17.) Nos, ha megvan az óra skála és jól is néz ki, akkor egyesíthetjük az egyes rétegeket, amikbol áll. Jelöld ki a 6db óra skála réteget (SHIFT+CLICK) és egyesítsd oket (CTRL+E).

18.) Jól van, haladunk :). Jöjjenek a perc skálák. A procedúra hasonló lesz az elozohöz. Ehhez kell egy új réteg, neve legyen perc skála. A Rectangular Marquee Tool(M)-al készíts egy 3x5px-es kijelölést majd töltsd ki a következo színnel: #605e5e.

19.) Az óra skálához hasonlóan itt is be kell állítani az elso két skálát amit majd forgatni fogunk. A kis téglalapot vidd 12 órához, majd duplikáld, és az újonnan létrejöttet vidd 6 órához. Egyesítsd a két réteget és nevezd át perc skálára.

20.) A következokben ezt az egyesített perc skálát fogjuk elforgatni, de nem 30°-kal, hanem csak 6°-kal (60 perc kell, tehát 360/60=6). Nos, forgassuk el 6°-kal. Nyomj CTRL+T-t majd írd be a 6°-ot és enter. Duplikáld a réteget (CTRL+J) majd ismételd meg az elozo muveletet még háromszor (duplikál, transzform, beír, enter), hogy létre jöjjön a 4db perc skálád. Ha van egy perc skálád és három copy-d, akkor jó nyomon jársz:). Most valami ilyet kell látnod.

Perc skálák

21.) Egyesítsd a 4db perc skálát (CTRL+E), majd duplikáld (CTRL+J). Hívd elo a Free Transforms panenlt (CTRL+T) és forgasd el 30°-kal. Ez azért lesz így jó, mert most már nem 6°-onként kell bíbelodni. Ekkor létrejön az 1 és 2 óra közti perc skála. Ismételd meg ezt a muveletet addig, amíg “körbe” nem érsz az óralapon. Ha jól dolgoztál, akkor 6db perc skála rétegnek kell lennie. Ezeket egyesítsd. Most itt járunk:

Perc skála kész

22.) Kíváló! Készen van a skálánk, nincs más hátra, mint számokkal ellátni. Válaszd a Horizontal Type Tool(T)-t az eszköztárról. Betutípus legyen Banff a betuméret pedig 22pt, szín fekete.

23.) Gépeld be a 12-es számot, igazítsd a 12 órához. Duplikáld ezt a réteget írd át 1-re és igzítsd az “1 óra” helyére. Jó ha be van kapcsolva a segédrács, mert akkor pontoasan lehet a számokat igazítani a helyükre. Ismételd az elozo lépést, amíg el nem készül a 12 számod. Miután megvannak a számok készíts egy mappát (Create a new group a réteg lista alatt) a text rétegekenek. Nevezd el számoknak. Jelöld ki a számokat 1-12-ig és húzd bele ebbe a mappába. Ezzel egy kicsit átláthatóbbak a rétegek. Eddigi munkánk.

Számlap kész

24.) Egyesíteni kell a számok mappát, de elötte “elmentjük”. Layer->Duplicate Group… duplikáld a számok mappádat, majd a felugró ablakra OK. Erre azért van szükség, hogy a számok megmaradjanak külön rétégeken. Késobb, ha más betutípust vagy bármi mást akarsz csinálni a számokkal, akkor nem kell újra igazítgatni stb.
Tehát, jobb klikk az új mappán majd válaszd a Merge Group pontot. A számlap mappa láthatóságát kapcsold ki (kis szem a mappa mellett). Az új réteget pedig nevezd át számokra. Most egy rétegen van az összes számunk, plusz megvannak külön rétegenként is elrejteve. Adjunk egy kis effektet a számoknak.

25.) Kattints duplán a számlap rétegre és a Layer Style panelen válaszd ki az Drop Shadow és az Outer Glow ablakot és állítsd be úgy, mint ahogy lent is látható.

Számok effektje

Számok effektje

Számok effektje

26.) Elkészült a számlapunk is, kezd óra formája lenni :). Jöjjenek a mutatók. 3 mutatónk lesz. Óra, perc, másodperc. Kedjük az óra és perc mutatókkal.
Úgy gondoltam ezek egy színuek lesznek csak méretben térnek el.

27.) Készíts egy új réteget perc mutató néven. Válaszd a Pen Tool(P)-t, majd az options panelen válaszd a paths gombot.

Pen tool beállítása

28.) Foregound-ot állítsd a következo színre: #363636. A képen látható egy új segédvonal. Az 20px-el van lejjebb a középtol, ott lesz a mutatók alja. Készíts egy háromszöget, majd ha megvan jobb klikk a path-on és válaszd a Fill Path pontot, végül a feugró ablakon OK. Ezzel kész a perc mutatónk. Semmi extra csak egy mutató :).

Készülo perc mutató

29.) Készíts egy új réteget óra mutató néven és úgyanígy járj el, de legyen rövidebb és vastagabb a háromszöged. Valahogy így.

Az óra mutató

30.) Következik a másodpercmutató. Hozz létre egy új réteget és nevezd el másodpercmutatónak. Készíts egy 2x150px-es kijelölést a Rectangular Marquee Tool(M)-al és töltsd ki az következo színnel: #a70002. Szüntesd meg a kijelölést (CTRL+D) és válts át a Move Tool(V)-ra. Mozgasd a mutatót középre úgy, hogy a mutató tetje az óra skála háttérbe érjen (fehér gyuru). Az alsó fele túl fog lógni a többi mutató alján, de nem baj.

Mutató teteje a fehér gyuruben

31.) Csinálunk egy kis “díszítést” a másodpercmutatónk aljára. Készíts egy 4x20px-es kijelölést és mozgasd a mutató aljához. Töltsd ki a mutató színével.

4*20-as kijelölés

32.) Kész vannak a mutatók, de van még egy kis dolgunk ami majd a Flash résznél lesz segítségünkre. Mivel a mutatók forgáspontja nem a végükön van, ezért egy kis fehér “pöttyel” megjelöljük azt. Készíts egy új réteget és nevezd el segéd pontnak. Zoomolj rá jó erossen az óra közepére (1200%) utána egy 2x2px-es kijelölést tölts ki fehér színnel és mozgasd azt középre. Segítségedre lesznek a segéd vonalak (Guide). Majd ragadd meg a ezt réteget és mozgasd a mutatók alá, ezzel el lesz rejtve.

Kis pötty elrejtve

33.) Védjük a számlapot és a mutatókat :). Hozz létre egy új réteget, nevezd el búranak. A CTRL billentyut nyomva tartava kattints a számlap háttér rétegre ahhoz, hogy megkapd a kör kijelölést. Csökkentsd 5px-el a kijelölés méretét. Ehhez navigálj a Select->Modify->Contract menübe és a felugró ablakon add meg az 5px-t. Foreground-ot állítsd fehér színre és töltsd ki a kijelölést a búra rétegen állva. A réteg opacity-jét állítsd 15%-ra.

34.) Az Ellipical Marquee Tool(M)-t használva készíts egy picivel nagyobb kijelölést mint az óra. Mozgasd a kijelölést kb az óra negyedéig és üss egy delete gombot. Ezzel elkészült a búra hatás.

Búra effekt

35.) A végeredmény valami hasonló.

A kész óra

Photoshop fájl letöltése

Sikeresen “utána építést”! Találkozunk a Flash részben.



Értékeld a bejegyzést!

Loading ... Loading ...

A bejegyzésre érkező kommenteket elérheted RSS 2.0 formájában vagy emailben is:

A bejegyzéshez tartozó trackback cím, illetve a permalink.

A megjegyzéseket kérlek, tedd fel érthető és illendő módon, ne fikázz le másokat, mert nem tudnak valamit, amit te már igen. A kommentár lehetőleg függjön a bejegyzéshez :)

kötelező
kötelező, titok marad
ha nincs, maradjon üres