Flash menü készítése 2

Most ezt a menüt fogjuk elkészíteni:

1. Csinálj egy új üres dokumentumot, 160*170 px legyen, a frame rate legyen 30, háttérszín pedig fekete.

 

2. A “Rectangle Tool” segítségével csinálj egy kis fehér négyzetet.

 

3. A négyzet mellé írd be a szöveg a Text Tool-lal.

 

4. Jelöld ki a négyzetet és a szöveget, mégpedig úgy, hogy katt a szövegre, majd a shift gomb nyomvatartásával katt a kis négyzetre. Nyomj F8-at, és csinálj belőle movie clipet.
A neve legyen “home_mc”.

 

5. Alul is írd át “home_mc”-re.

 

6. Katt kétszer a szövegre. Így bevisz minket a movie clip belsejébe. Most katt csak a szövegre, és nyomj “ctrl+x”-et. A Layer 1-et nevezd el “rectangle”-nak, és csinálj felette még egy layert, amit nevezz el “text”-nek. A text layeren nyomj “ctrl+shift+v”-t.

 

7. A rectangle layeren katt a négyzetre –> F8 –> movie clip, nevezd el rectangle-nak.

 

8. A 7-es frame-en nyomj F6-ot.

 

9. Itt a 7-es frame-en A Free Transform Tool-lal húzd szét a négyzetet.

 

10. A 17-es frame-en nyomj F6-ot, és a Free Transform Tool-lal és a shift+alt gombok lenyomva tartásával húzd a négyzetedet szét jobbra.

 

11. A text layeren katt a szövegre –> F8 –> movie clip, legyen a neve “home_mc_inside”.

 

12. 7-es és 17-es frame-en nyomj F6-ot.

 

13. Most a 17-esen vagy, katt a szövegre, és alul válaszd ki a Tint-et, és a színt állítsd be feketére. Ezután ctrl+c utána ctrl+v. Most te nem látod de egymáson kétszer ott van a home szöveg, így húzd a legfelsőt ki balra szélre, ugy, hogy a munkafelületedről lelógjon.

 

14. Katt arra a szövegre amit msot húztál ki szélre, alul állítsd Tint-re és a színt valamilyen bordóra vagy pirosra.

15. 26-os frame-en nyomj F6-ot, és húzd úgy jobbra az egészet, hogy a piros szöveg legyen csak rajta a fehér háttéren, a fekete meg valahol jobbra a munkafelületen kívűl legyen.

 

16. A rectangle layeren a 26-os frame-en nyomj F5-öt. Ezután csinálj Motion Tween-t azokon a helyeken, ahol a képen is látod:

 

17. Menj vissza felül a Scene 1-re. Csinálj egy új layert, nevezd el “invisible button”-nak. Most valamilyen színnel és a Rectangle Tool segítsgégével rajzolj egy négyzetet a home feliratodra, úgy, hogy ellepje.
Majd kattints rá, és nyomj F8-at.

 

18. Katt kétszer a most rajzold négyzetre és ami az Up alatt van fekete pötty fog meg és húzd a Hit-re.

 

19. Menj vissza a Scene 1-re. Kattints az invisible buttonodra, ami az én képemen kék, majd nyomj F9-et, és tedd be a következő kódot: (Persze a linket írd át a te linkedre)

on (rollOver) {
_root.mouse_over_home_mc = true;
}

on (rollOut) {
_root.mouse_over_home_mc = fstartlse;
}

on (release){
getURL(“http://everlasting.hu”);
}

20. Csinálj egy új layer-t, nevezd el action-nek. Kattints ezen a layer-en a legleső frame-re, majd nyomj F9-et és tedd be a következő kódot:

_root.home_mc.onEnterFrame = function() {
if (mouse_over_home_mc) {
_root.home_mc.nextFrame();
} else {
_root.home_mc.prevFrame();
}
};

Ha le szeretnéd tölteni a mintát, mert valamit nem értettél, akkor kattints ide: Katt!

 

Flash menü készítése 1

Most ezt a menüt fogjuk elkészíteni:

1.Új dokumentum, 150*170px, frame rate: 30, background color: #CC99FF.

 

2. Nevezzük át a Layer 1-et “button”-ra.

 

3. Katt a “Line Tool”-ra, majd alul a stroke colornál állítsd fehérre (#FFFFFF), solid legyen, és pipáld ki a stroke hinting-et.

 

4. Rajzolj négy vonalat, mint a képen:

 

5. KAtt a “Text Tool”-ra, és alul állítsd be: Static text-re, Arial-ra, 12-es betűméretre, félkövérre, és a színt fehérre, majd gépeld be a szöveget.

 

6. Katt a “Selection Tool”-ra, majd jelöld ki az első menü nevét és az alatta lévő vonalat, mégpedig úgy, hogy katt a pl home-ra, majd shiftet lenyomva tartod és katt a vonalra.

 

7. Nyomj F8-at és csinálj belőle movie clip-et. A neve legyen home_mc.

 

8. Ezután alul is írd át home_mc-re, különben nem fog működni a menü.(Ezt azért hangsúlyozom ki, mert én legelőször kihagytam és nem jöttem rá sokáig miért nem működött a menüm xD hát azért mert ezt nem írtam át)

 

9. Dupla katt a home movie cliped közepén lévő kis fehér pöttyre, hogy bekerülj a movie clip belsejébe.

10. Nevezd át a Layer 1-et line-ra.

 

11. Katt a Selection Tool-ra és utána csak a szövegre.

 

12. Nyomj “ctrl+x”-et. Új layer, nevezd át text-re és nyomj “ctrl+shift+v”-t.

 

13. Nyomj F8-at –> movie clip –> nevezd el home_inside_mc -nek.

 

14. A 8-as és 16-os frame-nél nyomj F6-ot.

 

15. Most ugye ott vagyunk a 16-os frame-en, most kattints egyszer a szövegre, majd alul –> Tint –> #CC99FF.

 

16. Most menj a 8-asra és a Selection Tool segítségével mozgasd a szöveget és kicsit lentebb.

17. Az 1 és 8 frame között jobb egérgomb, majd Motion Tween, és a 8 éa 16 között is.

 

18. Katt a line nevű rétegre és a 16-os framenél nyomj F5-öt.

 

19. Csinálj egy új réteget a line fölé (text alá), és nevezd át rectangle-ra.

 

20. Most a rectangle rétegen kattints a 2-es frame-re és nyomj F6-ot. Most katt a Rectangle Tool-ra, és oldalt a stroke color-t blokkold a kis-fehér-négyzet-áthúzva-pirossal ikonnal, és a fill colort állítsd fehérre.

 

21. Most rajzolj egy kis négyzetszerűséget az első vonalad fölé, úgy körülbelül 2-3px magasságút.

 

22. Most katt a rectangle layer 16 frame-jére és nyomj F6-ot.

 

23. Maradsz a 16-oson és katt a Free Transform Tool-ra, és nyújtsd meg felfelé az előbb rajzolt négyzetszerűséget.

 

24. Alul, ahol van a Tween, állítsd Shape-re.

 

25. Menj a Scene 1-re (felül).

 

26. Csinálj egy új layer-t a button layer fölé, és nevezd el invisible button-nak.

 

27. Katt az invisible button layerre, majd a Rectangle Tool-ra, és alul megint a stroke colort blokkold, színnek meg válasst ki egy színt, teljesen mindegy, hogy milyet, úgy sem fog látszani, csak te lásd. Rajzolj egy négyzetet az első menüdre, vagyis a home-ra, úgy hogy teljesen befedje, ez azért fontos, mert ez a felület amit most ez letakar, erre ha ráviszik az egeret, vagy rákattintanak, ezt fogja érzékelni, mint gombot.

 

28. Katt erre az négyzetre –> F8 –> button –> nevezd el invisible button1-nek.

 

29. Katt kétszer erre az “invisible button”-ra, majd az Up alatt fogd meg a fekete pöttyöt és húzd át a Hit-re.

 

30. Menj vissza a Scene 1-re. Kattints az invisible buttonodra, ami az én képemen kék, majd nyomj F9-et, és tedd be a következő kódot: (Persze a linket írd át a te linkedre)

on (rollOver) {
_root.mouse_over_home_mc = true;
}on (rollOut) {
_root.mouse_over_home_mc = fstartlse;
}
on (release){
getURL(“http://everlasting.hu”);
}

31. Csinálj egy új layer-t, nevezd el action-nek. Kattints ezen a layer-en a legleső frame-re, majd nyomj F9-et és tedd be a következő kódot:

_root.home_mc.onEnterFrame = function() {
if (mouse_over_home_mc) {
_root.home_mc.nextFrame();
} else {
_root.home_mc.prevFrame();
}
};

Ha le szeretnéd tölteni a mintát, mert valamit nem értettél, akkor kattints ide: Katt!

 

Képváltás flash-sel

Mivel én kihagytam a flash-tanulásban az alapokat, így én a legtöbbet billentyűkombinációkkal tudom, és csak így tudom elmagyarázni is 😛

1. Csinálj egy új üres dokumentumot.

2. A képet, amivel kezdeni szeretnéd behúzod a programba és elengeded az üres dokumentum felett, ezzel beteszi a képet.

3. Katt a képre, majd nyomd meg az F8-at, és válaszd ki a movie clipet.

4. Az idővonalon (Timeline) körülbelül a 10-esnél nyomj egy F6-ot.

5. Kattints vissza az elsőre, vagyis az első kis fekete pöttyre az idővonalon, majd kattints a képre, és alul válasz ki azt, hogy Alpha, melette pedig vidd le 0%-ra.

6. A két fekete pötty között kattints valahova jobb egérgombbal, majd válaszd ki azt hogy Motion Tween.

7. Attól függően, hogy mennyi időre mutasson egy képet, olyan messze az idővonanol megint nyomj F6-ot.

8. Körülbelül a 20-asnál megint nyomj F6-ot, majd katt a képre, és alul állítsd Alpha-ra és mellette 0%-ra.

9. Csinálj egy új layer-t, mégpedig úgy, hogy kattints jobb egérgombbal a Layer 1-re és insert layer. Ott ahol az alatta lévő layer-nek a vége van, vagyis a 20-iknál, kattints oda és nyomj F6-ot

10. Most ott vagyunk ugye a 20-nál a második layer-en a kis fekete pöttynél, és húzzunk be a programba egy képet, amit így rátesz a már meglévő dokumentumra.

11. Kattints a képre, majd nyomd meg az F8-at, majd csinálj belőle movie clipet. (Úgy mint az előző képnél már egyszer.)

12. Körülbelül az idővonalon a 28 körül nyomj F6-ot.

13. Most kattints a 20-nál a kis fekete pöttyre, majd katt a képre, és alul állítsd be az alpha-ra, és mellette 0%-ra. Felül a 20 és 28 közötti területen kattints oda jobb egérgombbal és kattints arra hogy Motion tween.

14. Megint attól függően, hogy mennyi ideig mutasson egy képet, olyan messzire helyezz el keyframe-t, nálam ez egy olyan három kis bigyusz múlva van, szóval a 28 után kihagytam kb 3 helyet és utána nyomtam egy F6-ot. Majd megint kb 5 helyet hagyj ki, és utána megint nyomj F6-ot. Most itt maradunk ezen a fekete pöttyön, katt a képedre, majd alul állítsd be az Alpha-ra, és mellette a 0%-ra, felül pedig megint állítsd be a motion tween-t.

Így most két kép váltakozik, ha megfigyelitek a második layer-en, a második képnél ugyanazok a lépések vannak mint az elsőn, csak el van csúsztatva az idővonalon, hogy azt csak az első kép bejövése és eltűnése után csinálja. Ha több képet szeretnél még egymás után rakni, hogy egymás után váltakozzanak, akkor megint csinálsz egy réteget (layer-t), és ahol a második rétegnek a vége van, a harmadik layer-en ott kezded el. És így tovább…. 🙂

Az én végeredményem így néz ki:

Ha szeretnéd, lementheted a .fla fájlt, amit meg tudsz nézni, hogy én hogy csináltam, ha a leírás alapján valamit nem értettél: Letöltöm

Photoshop 7 tutorial – Fejléc készítése 2.

1.lépés
File–>New–>állítsd be hogy 800px széles legyen és 400px magas
Mentsd le a következő PNG képet Letöltöm!, húzd rá a szerkeszteni való üresképre.

2.lépés
Mentsd le a következő textúrát: Letöltöm!
Húzd rá a képedre úgy, hogy a PNG kép legyen felül, a textúra pedig alatta. A PNG kép Mode-ját állítsd át Overlay-re.

3.lépés
Mentsd le a következő textúrát: Letöltöm!
Húzd rá a képedre úgy, hogy ez a textúra legyen layer-eknél legfelül. Mode-ját állítsd át Screen-re.

3.lépés
Kattints layer-eknél a PNG képre, majd Filter–>Sharpen–>Sharpen.

4.lépés
Mentsd le a következő textúrát: Letöltöm!
Húzd rá a képedre úgy, hogy ez a textúra legyen layer-eknél legfelül. Mode-ját állítsd át Multiply-re.

5.lépés
Mentsd le a következő textúrát: Letöltöm!
Húzd rá a képedre úgy, hogy ez a textúra legyen layer-eknél legfelül. Mode-ját állítsd át Soft light-re.

6.lépés
Oldalt layereknél alul kattints balról 4. gombra(Create new fill or adjusment layer)–>Selective color.

Értékeket állítsd a következőre:
Yellow:
-100

-100

-100

0
Neutral:

+22

+26

+26

0

7.lépés
Oldalt layereknél alul kattints balról 4. gombra(Create new fill or adjusment layer)–>Levels.

Értékeket állítsd a következőre:

8.lépés
Mehet rá egy kis szöveg egy kis effekttel.

Eredmény:

Photoshop 7 tutorial – Fejléc készítése

1.lépés
File–>New–>állítsd be hogy 800px széles legyen és 400px magas

2.lépés
Mentsd le a következő PNG képet: Letöltöm!
Húzd rá a PNG képet az új üres képedre a jó öreg Drag and Drop módszerrel

3.lépés
Mentsd le a következő textúrát: Letöltöm!
és nyisd meg a photoshopban, és húzd rá a szerkesztett képedre, úgy, hogy a layer-eknél a PNG kép legyen legfelül, a textúra pedig alatta.

4.lépés
Oldalt layereknél kattints a PNG képre, majd felül a Mode-ot állítsd át Overlay-re!

5.lépés
Mentsd le a következő textúrát: Letöltöm!
és nyisd meg a photoshopban, és húzd rá a szerkesztett képedre, ez legyen layer-eknél legfelül! Mode-ot állítsd ennek a textúrának Hard Light-ra!

6.lépés
Kattints oldalt a layereknél a PNG képet tartalmazó layer-re, majd felül Filter–>Sharpen–>Sharpen

7.lépés
Mentsd le a következő textúrát: Letöltöm!
és nyisd meg a photoshopban, és húzd rá a szerkesztett képedre, ez legyen layer-eknél legfelül! Mode-ot állítsd ennek a textúrának Color burn-re!

8.lépés
Mentsd le a következő textúrát: Letöltöm!
és nyisd meg a photoshopban, és húzd rá a szerkesztett képedre, ez legyen layer-eknél legfelül! Mode-ot állítsd ennek a textúrának Color burn-re!

9.lépés
Jöhet rá egy kis szöveg kis effekttel

Végeredmény

Kapcsolat/vélemények

Aki fel szeretné venni velem a kapcsolatot, mert valamilyen honlapszerkesztéssel kapcsolatos problémája van akkor ezen a két e-mail címen tudtok engem elérni:

kiss_andrea92@hotmail.com

kissandrea92@gmail.com

FIGYELEM! A hotmail-os e-mailemre nem kapom meg a freemail-es emaileket, úgyhogy akinek freemail-je van, az a gmail-es címre írjon!