Navigációs címkék

Mit készítesz? Fül alakú menücímkéket egy honlap tetejére: lekerekített tetejű, egyenes aljú gombokat, amelyek felül erős színűek, lefelé kifehérednek, és a tetejükön üveges csillanás fut. Először egy kék Galéria címkét építesz fel, aztán ebből lesz a háromszínű menü: Galéria, Áruház, Kapcsolat.

Mit tanulsz meg közben?

• egy téglalap-kijelölés növelésével lekerekített sarkú alakot kapni, és a kivonás móddal levágni belőle;
• a kijelölést körberajzolni (vékony körvonal a gomb szélén);
• szűkítéssel, kivonással és lágy széllel csillanást készíteni;
• egy kész elemet átlátszó PNG-be menteni, rétegként megnyitni és többször felhasználni;
• az Árnyalat-telítettséggel egy mozdulattal átszínezni.

Mire jó ma? A fülsoros menü, a „pill” gomb és a címkék ma is így készülnek a látványterveken. Egy elemet egyszer építesz fel, aztán másolod és átszínezed: így lesz a sorozat egységes.

A címke 600 × 400 képpontos vásznon készül. A növelés, a szűkítés, a lágy szél és a körvonal értéke ehhez a mérethez tartozik: fele akkora képen felezd őket.

A) Egy címke

1. Új kép: Fájl › Új…, szélesség 600, magasság 400 képpont.

2. Új réteg: Réteg › Új réteg… (Shift+Ctrl+N), név: Címke, Kitöltés ezzel: Átlátszóság.

3. Téglalap a kép közepén: válaszd a Téglalap-kijelölés eszközt (R), és húzz egy téglalapot a kép közepére. Az eszközbeállításokban pontosítsd: Pozíció 110, 120, Méret 380 × 200.

4. Növelés: Kijelölés › Növelés…, 50 képpont. A kijelölés minden irányban 50 képponttal nagyobb lesz, a sarkai pedig 50 képpont sugarú ívvel lekerekednek.

5. Az alsó rész levágása: a Téglalap-kijelölés beállításaiban a Mód sorban kattints a harmadik gombra (Kivonás a jelenlegi kijelölésből). Húzz egy téglalapot a kijelölés alsó része köré, és pontosítsd: Pozíció 0, 280, Méret 600 × 120. Kattints egyszer a téglalap belsejébe: a kivonás megtörténik. A kijelölés teteje lekerekített, az alja egyenes.

Figyelj: a mezők után ne nyomj Entert. Az eszközbeállításokban a mező után nyomott Enter a következő jelölőnégyzetet (például a Kiemelést) kapcsolhatja be. A beírt értéket Tab-bal hagyd jóvá, a téglalapot pedig egy kattintással a belsejébe.

6. Világoskék előtérszín: nyomd meg a D-t (fekete előtér, fehér háttér), majd kattints az előtérszín-mezőre, és a HTML-jelölés mezőbe írd: 15cbf3. OK. A háttérszín fehér marad.

7. Színátmenet: válaszd a Színátmenet eszközt (G), Előtérből háttérbe (RGB), Lineáris. Húzd a kijelölés tetejétől az aljáig, függőlegesen. A címke felül kék, alul fehér. Nyomd meg az Enter-t a vásznon: ezzel véglegesíted a színátmenetet.

Figyelj: a színátmenet szerkeszthető marad. Amíg a vásznon látszik a színátmenet vonala, a GIMP 3.2-ben a végpontjai még mozgathatók, és ha közben színt váltasz, a kész színátmenet is átszíneződik. Ezért az Enter-rel véglegesítsd, mielőtt új színt választasz.

8. Halványszürke előtérszín: kattints az előtérszín-mezőre, és írd be: c0c0c0. OK.

9. Körvonal: Szerkesztés › Kijelölés körberajzolása…. Vonal lap, Előtérszín, Vonalszélesség: 2 px. Kattints a Vonal gombra. A címke szélén vékony, szürke keret fut.

10. Réteg a csillanásnak: Réteg › Új réteg…, név: Csillanás, Kitöltés ezzel: Átlátszóság.

11. Szűkítés: Kijelölés › Szűkítés…, 10 képpont. A kijelölés kicsit beljebb húzódik a körvonaltól.

12. Az alsó háromnegyed levágása: a Téglalap-kijelölés eszköz még Kivonás módban van. Húzz egy téglalapot a kijelölés alsó része köré, és pontosítsd: Pozíció 0, 128, Méret 600 × 272. Kattints a belsejébe. A kijelölésből csak a felső negyede marad, egy keskeny, lekerekített sáv.

13. Lágy szél: Kijelölés › Lágy szél…, 20 képpont.

14. Fehér kitöltés: Szerkesztés › Kitöltés a háttérszínnel (Ctrl+.). A háttérszín fehér, így a sáv fehér lesz, a széle lágyan elfogy.

15. Kijelölés › Semmit (Shift+Ctrl+A). A Rétegek dokkban a Csillanás réteg Átlátszatlanság mezőjébe írd: 80. Ettől lesz a csillanás üveges, nem tömör fehér. Ha túl erős vagy túl gyenge, ezzel az értékkel finomíthatod.

16. Betűszín: kattints az előtérszín-mezőre, és írd be: 1e4664 (sötét kékesszürke). OK.

17. A felirat: válaszd a Szöveg eszközt (T). Betűkészlet: Georgia Félkövér, Méret: 90 px. Kattints a címkére, és írd be: Galéria. Ha nincs Georgia a gépeden, bármely vastag, talpas betű jó.

18. Középre: nyomd meg az Esc-et, válaszd az Áthelyezés eszközt (M). A Rétegek dokkban kattints jobb gombbal a Galéria rétegre, Réteg tulajdonságainak szerkesztése…, X eltolás 129, Y eltolás 123. OK.

19. Kész az első címke. Rétegei: Galéria (szöveg), Csillanás (80%), Címke, Háttér. Mentsd: Fájl › Mentés másként…, cimke.xcf.

20. Üres címke átlátszó PNG-be: a Rétegek dokkban kapcsold ki a Háttér és a Galéria réteg szemét: a címke körül sakktábla-mintát látsz, ez az átlátszóság. Fájl › Exportálás másként… (Shift+Ctrl+E), név: cimke-ures.png, majd Exportálás, a PNG-ablakban újra Exportálás. A felirat nélküli, átlátszó hátterű címkéből lesz a menü három füle.

B) A menü: három fül egymás mellett

21. Új kép a menünek: Fájl › Új…, szélesség 1500, magasság 250 képpont. Ebbe fér el egymás mellett a három 480 képpontos fül, közöttük 8 képpontos réssel.

22. A címke rétegként: Fájl › Megnyitás rétegekként… (Ctrl+Alt+O), és válaszd a cimke-ures.png fájlt. A fájl nem új képként nyílik meg, hanem új rétegként kerül a menü képére, a közepére.

23. Az első fül helye: a Rétegek dokkban kattints jobb gombbal az új rétegre, Réteg tulajdonságainak szerkesztése…. Réteg neve: Kék fül, X eltolás −40, Y eltolás −50. OK. A réteg 600 × 400-as, a fül benne 60 képponttal beljebb és 70-nel lejjebb kezdődik: ezért kell negatív eltolás, hogy a fül 20 képpontra legyen a kép bal szélétől és tetejétől.

24. Két másolat: Réteg › Rétegek kétszerezése (Shift+Ctrl+D), és a másolat tulajdonságaiban: Piros fül, X 448, Y −50. Kettőzd meg ezt is: Zöld fül, X 936, Y −50. A három fül egymás mellett áll, 488 képpontonként (480 a fül, 8 a rés).

25. Zöld fül: a Zöld fül réteg legyen aktív, Színek › Árnyalat-telítettség…. A Fő gomb maradjon kijelölve (ez minden színre hat), Árnyalat: −77. OK. A kék fül zöldre fordul, a fehér rész és a csillanás fehér marad.

26. Piros fül: Réteg › Verem › Következő réteg kijelölése (Page Down), hogy a Piros fül legyen aktív, majd Színek › Árnyalat-telítettség…, Árnyalat: 180. OK. A kék a színkörön szemközti színe felé fordul: lazacpiros lesz.

Miért az árnyalat? Az Árnyalat-telítettség a színkörön forgatja el a színeket. A fül világossága, a színátmenet, a csillanás és a körvonal változatlan marad, csak a szín cserélődik. Így a három fül pontosan egyforma, és egy lépésben új színt kap.

27. Feliratok: Réteg › Verem › Legfelső réteg kijelölése (Home), hogy a feliratok a fülek fölé kerüljenek. Válaszd a Szöveg eszközt (T): Georgia Félkövér, 72 px. Az előtérszín legyen 1e4664. Kattints a kék fülre, és írd be: Galéria.

28. Nyomd meg az Esc-et. Az előtérszín legyen 6e2814 (sötét vörösbarna), kattints a piros fülre: Áruház. Esc, az előtérszín 1e5a1e (sötétzöld), kattints a zöld fülre: Kapcsolat. Végül a feliratokat a réteg tulajdonságaiban tedd pontosan középre: Galéria X 124, Áruház X 611, Kapcsolat X 1052, mindhárom Y 83.

29. Alapvonal: Réteg › Új réteg…, név: Alapvonal, átlátszó. Válaszd a Téglalap-kijelölést, a Mód legyen újra az első gomb (Csere), Pozíció 0, 230, Méret 1500 × 8. Az előtérszín a0a0a0, majd Szerkesztés › Kitöltés az előtérszínnel. A fülek egy szürke vonalon állnak, mint egy honlap fülsoros menüje.

30. Kijelölés › Semmit, és mentsd: cimkek.xcf. Exportáld PNG-be is.

Mikor vagy kész? A három fül egyforma méretű, egyenlő közökkel áll; a csillanás mindegyiken ugyanott fut; a feliratok középen vannak, és a fül színének sötét árnyalatával olvashatók. Kicsinyítve (Nézet › Nagyítás › 1:2) is jól látszik minden felirat.

Minta: (egy címke: Galéria, Csillanás 80%, Címke, Háttér) és (menü: három szövegréteg, Alapvonal, Zöld fül, Piros fül, Kék fül, Háttér).