A következő tutoriál segítségével az alábbi blog fejlécet készíthetjük el GIMP-ben:

Használt eszközök:

Áthelyezési eszköz

Színátmenet-eszköz

Ecset

Mielőtt bármibe is belekezdenék, láthatóvá teszem a vonalzót, illetve a navigáló ablakot, mindkettőt a Nézet menüből tudom előhalászni:

A vonalzót a Shift+Ctrl+R lenyomásával is megjeleníthetjük

Létrehozok egy 1024 pixel széles és 768 pixel magas képet (Ctrl+N):

A blog sablon szélessége 960 pixel lesz, ez kisebb, mint a jelenlegi munkafelületem szélessége (1024px), ilyenkor (és még sok más esetben) a segédvonalak alkalmazása jelenti a megoldást.

A képlet egyszerű: 1024px-960px=64px ezt még elosztom kettővel így megkapom, hogy a lap szélétől hány pixelre kell „meghúznom” a segédvonalat.

Előhívom az Új segédvonal ablakot:

Kép> Segédvonalak> Új Segédvonal

Majd készítek egy függőleges segédvonalat 32 pixelre a bal oldali szegélytől.

Szükségem van egy újabb segédvonalra a jobb oldali szegélytől 32 pixelre, ehhez 992 pixelt kell beírnom, ugyanis a segédvonal mindig a baloldali szegélytől számítódik (1024px-32px=992px):

Az előkészületekkel meg is vagyok, a két segédvonal közti távolság pontosan 960 pixel, kezdődhet a kreatív munka.

Létrehozok egy új 960 pixel széles és 120 pixel magas réteget (lásd.) „fejléc” névvel. Egyelőre nem töltöm ki semmilyen színnel, azaz átlátszó marad:

Az Áthelyezési eszközzel a két segélyvonal közé helyezem az új réteget, ehhez rákattintok a „fejléc” rétegére majd bejelölöm Az aktív réteg áthelyezése parancsot (máskülönben az áthelyezési eszköz nem az üres réteget, hanem a mögötte levő hátteret fogja mozgatni) és elkezdem középre húzni a fejlécet. Sokat segít, ha a Nézet menü alatt található Illesztés a segédvonalhoz aktiválva van. Ez „magnetizálja” a segédvonalat, így ha valamit a közelébe húzunk, akkor az hozzátapad. Így biztosak lehetünk abban, hogy egy vonalba került a rétegünk a segédvonallal, és nem egy-két pixellel odébb, amit szabad szemmel nem mindig látni, csak ha nagyon ránagyítunk.

Következő lépésben létrehozom azt a színpalettát, amit használni fogok a sablonomhoz. Ehhez a http://colorschemedesigner.com/ -t hívom segítségül. Megtehetném azt is, hogy a saját színérzékemre hagyatkozok, de úgy nem biztos, hogy a színek annyira harmonizálnának egymással. (Bár a fejléc monokróm, ami nem teszi indokolttá az efféle segédeszközök használatát, viszont a későbbiekben, szükség lehet egy-két új szín bevitelére, például a linkek esetében.)

Végül az alábbi színek mellett döntöttem:

http://colorschemedesigner.com/#3e31Tw0w0w0w0

A kívánt színt úgy tudom átvinni GIMP-be, hogy a Color Scheme Designer-ben a „Color List” fülre kattintok, majd a szín hexakódját kimásolom és beillesztem GIMP-be (lásd.)

Most kitöltöm a fejlécemet a Színátmenet-eszköz (Gradient tool) segítségével. Ez az eszköz -mint a neve is sugallja- egy színátmenetet hoz létre a kitöltendő felület két megadott része között. Ehhez legalább két szín megadása szükséges. Az alábbi képen ábrázoltam a szükséges lépéseket a színátmenet létrehozásához:

A színátmenetek hatalmas népszerűségnek örvendenek a web dizájn területén, ennek egyik oka az lehet, hogy a valós környezetünk is tele van ilyen átmenetekkel.

Például, ha a plafonra tekintünk, rögtön láthatjuk, hogy az ablaknál, ahol a fény beárad, világosabb, befelé haladva pedig fokozatosan sötétedik. Ez esetben egy lineáris színátmenettel van dolgunk. Amikor besötétedik és felkapcsoljuk a villanyt egy sugaras ( radiális) színátmenetnek leszünk szemtanúi. (Mindezt beállíthatjuk GIMP-ben is a Forma menüpontnál:

Egy másik példa szemtanúi lehetünk, amikor a távolba tekintünk: a távolabb eső dolgok fakóbbak, halványabbak lesznek, mint a közeliek, a zöld színek pedig fokozatosan átmennek kékbe.

De ezek az átmenetek nagyon finomak, nem szembeötlőek, nem is érzékeljük ezeket tudatosan. Éppen ezért a honlapok esetében is tanácsos a színátmenetek visszafogott használata. Hacsak valami nem teszi indokolttá az ellenkezőjét.

A létrehozott színátmenetet túl erősnek találom, de ahelyett, hogy egy újabbat készítenék, megoldom a problémát úgy, hogy a réteg átlátszóságát 100 százalékról leviszem 50-re.

Most következhetnek a vizes buborékok. Ehhez egy ecsetet fogok használni, amely letölthető az alábbi honlapról:

http://hawksmont.deviantart.com/art/GIMP-Bubbles-90842381?q=gallery%3Ahawksmont%2F4784059&qo=3

Még több ecsetet találunk a http://browse.deviantart.com/resources/applications/gimpbrushes/ címen.

GIMP ecsetek telepítése:

1. csomagoljuk ki a fájlokat

2. Másoljuk be őket GIMP brushes mappájába (ezt normális estben a Program Files/GIMP/share/gimp/2.0/brushes helyen találjuk.

3. GIMP-ben nyomjunk egy frissítést az ecseteknél:

A letöltött ecsetek közül egyet kiválasztok, majd azt a bal oldalon megjelenő menüből az alábbi képen látható módon konfigurálom:

Átlátszat – Az ecset átlátszóságát lehet vele beállítani.

Méretezés – A méretét állíthatjuk be. Ki gondolta volna :)

Az érdekesebb dolgok az Ecsetdinamika lenyitásakor jelentkeznek:

A Nyomás résszel azoknak érdemes foglalkozni, akik rendelkeznek nyomásérzékeny digitális ceruzával. A Sebesség az egér (vagy digitális ceruza) gyorsaságának függvényében változtat az aktivált paramétereken. A Véletlenszerűség sem a nyomást sem a sebességet nem veszi figyelemben, kénye kedve szerint variálja a bejelölt tulajdonságokat:) A Véletlenszerű Méret például azt eredményezi, hogy az ecsetünk hol kisebb, hol nagyobb lesz.

Az Elszórás segít a buborékok egyenlőtlen szétszórásában, így sokkal valószerűbb lesz a kapott eredmény. Próbáljunk meg nélküle festeni, a bubik szépen, egyenletesen, „katonasorban” fognak egymás után megjelenni, nem rájuk vall ez a fajta viselkedés :).

Miután megfelelően konfiguráltam az ecsetet, jobb klikkel a „fejléc” rétegére kattintok, majd megkétszerezem azt.

Ezt követően lenyomom a "delete" billentyűt, így kapok egy üres réteget a fejléc méretével, a későbbi kavarodásokat elkerülendő átnevezem bubik-ra, ehhez duplán kattintok a „fejléc másolata” elnevezésre:

Az újonnan létrehozott rétegre elkezdek festeni az ecsetemmel, közben többször módosítom a Méretezést:

Létrehozok egy új 960 pixel széles, 3 pixel magas réteget szegély néven, amelyet kitöltök a már korábban beállított előtérszínnel:

A rétegeknél legfelülre teszem, majd az Áthelyező eszközzel behúzom a fejléc aljára:

Kész is volnánk:)

Ha képszerkesztésről van szó, akkor (majdnem) mindenkinek a photoshop jut az eszébe, kétségtelen a "fotosop" az etalon, a profik mind ezt használják. Azonban a családi  vagy egyéb fotóikat kicsit átszerkeszteni vágyók, nem valószínű, hogy igényt tartanak egy ilyen összetett program minden képességére, talán beérik egy kicsivel szerényebb, de ugyancsak hatékony, és nem utolsósorban ingyenes alternatívával, trádám: a GIMP-ről volna szó!

A tutoriál készítése alatt a GIMP 2.6.10 magyar nyelvű verzióját használtam. Letölthető innen.

Első tutoriálról révén szó, csak néhány egyszerűbb módszert szeretnék bemutatni, nem a végterméken lesz a hangsúly (valószínűleg nem is fog senkinek sem leesni tőle az álla:).

Aki szeretné velem végigcsinálni a tutoriált, a kiindulóképet letöltheti innen.

Előtte:

Utána:

Az alábbi eszközöket fogom használni:

Másolóeszköz

Javítóeszköz

Varázspálca

Áthelyezési eszköz

Átméretezési eszköz

A kép megnyitásakor a GIMP-ben az alábbi látvány(hoz hasonló) kell fogadjon bennünket:

Első lépésben eltüntetem a madár tartóoszlopát. Előbb azonban megnyitom a Navigátorablakot: Nézet > Navigátorablak; nagy hasznomra lesz majd a különböző műveleteknél.

A Navigátorablak segítségével felnagyítom a képet 67%-os méretűre, majd a madárhoz navigálok.

A Space lenyomásával könnyedén navigálhatunk a képen.

Ezt követően a baloldali eszköztárból előhalászom a Másolóeszközt, majd beállítom a méretezést 10-re:

Figyeljünk oda, hogy a többi beállítás is egyezzen a képen láthatóval

A Másolóeszköznek szüksége van egy másolandó felületre, ezt a CTRL billentyű lenyomásával adom meg.

Majd az alábbi képen jelzett módon, az egérgombot lenyomva rajzolok egy ívet:

illetve mégegyet, de az oszlop felső részét még ne törlöm:

CTRL-al kijelölök egy újabb kiindulási pontot:

Majd törölöm az oszlop alsó részét is, közben többször is módosítom a másolandó felületet

Távolabbi kiindulópontokat is választhatunk, a felhő esetében ez úgysem látszik annyira.

A Másolóeszköz méretét kisebbre állítom (2-re), felnagyítom a képet 200 százalékosra, majd gondosan törlöm, ami még maradt a kapuból.

Következhet az egyenetlenségek kijavítása, amelyeket a Másolóeszköz okozott. Ehhez a Javítóeszköz lesz nagy segítségemre. A működési elv nagyjából ugyanaz, mint a Másolóeszköznél, csak a Javítóeszköz arra is ügyel, hogy a felület amelyen alkalmazzuk beolvadjon a környező textúrába.

Ne felejtsük el gyakran frissíteni Ctrlal a forrásterületet, mindig a szomszédos helyekről vegyük a mintát.

Gondolom sokan rájöttek, hogy az eszköz nagyon hatékony, ha például egy portréképen a bőr kisebb hibáit (anyajegyek, mitesszerek) szeretnénk eltüntetni.

Íme az eredmény:

Tulajdonképpen ezzel már le is zárhatnám ezt a tutoriált, de engem nem igazán győzött meg ez a vasmadár arról, hogy ő valóban tud repülni, túlságosan merevnek tűnik ahhoz. Ezen próbálok meg kicsit segíteni a Varázspálcámmal:)

Az eszköztárakból előveszem a Varázspálcát,

majd azt beállítom a képen látható módon

Hókuszpók valószínűleg nem így konfigurálta anno:)

A lágy széleket 2.4-re állítom, ez kifinomítja a kijelöléskor keletkező durva széleket.

Miután sikerült megfelelően beállítani a Varázspálcát,  a vasmadár közepére kattintok vele:

Ha mindent jól csináltunk, "menetelő hangyákat" kell hogy lássunk körülötte, ez jelzi, hogy kijelöltük.

Ezt követően kivágom a madarat a képből, ehhez a Szerkesztés menüben található Kivágás lesz a segítségemre:

Egyszerűbben aktiválhatjuk a Kivágást a CTRL+X billentyűk lenyomásával

Megszüntetem a kijelölést a CTRL+Shift+A billentyűk egy időben történő lenyomásával. Ugyanezt megtehetném, ha a Kijelölés menübe a Semmit-re kattintok.

Beillesztem a madarat a Szerkesztés-Beillesztés (CTRL+V) segítségével. Jobb oldalt a rétegeknél megjelenik egy új ikon, jobb gombbal ráklikkelek, majd az Új réteg-re.

Köszöntelek a Rétegek (Layers) világában! Rétegek nagyon hatékony képszerkesztést tesznek lehetővé, az alapelv nagyon egyszerű: minden réteg egy képet, képrészletet jelent, és ezek egymáson helyezkednek el, akárcsak egy füzet lapjai. Ha a legfelső lapból (rétegből) kivágunk, akkor megjelenik az alatta levő, és így tovább. Míg a papírlapok esetében csak egy olló áll a rendelkezésünkre, itt jóval több eszközt, hatást alkalmazhatunk.

A beillesztett réteg melletti szem ikonra kattintva ideiglenesen elrejtem azt.

Sajnos nem mondható el, hogy a kivágott madárnak hűlt helye sem maradt, hisz ott éktelenkedik a fehér sziluettje a háttérrétegben, a következőkben ezt fogom befesteni.

Először aktiválom ezt a réteget, (ezt úgy tehetjük meg, hogy rákattintunk a Háttér feliratra vagy a kis képre mellette).

Ismét előveszem a Másolóeszközt, és a szomszédos területeket felhasználva kitöltöm a fehér foltot.

A Másolóeszköz eléggé felületes munkát végzett (vagy én, de jól fog egy bűnbak:)

Szükség lesz a Javítóeszközre is:

A Javítóeszköz szépen kisimította a barázdákat, de még mindig érezni, hogy valami történt a képpel, nem tudom, lehet, hogy csak én vagyok szőrszálhasogató:

Egy picit még előveszem a Másolóeszközt, egészen halványra állítom és a jobb oldali felhőkből egy keveset becsempészek a kifestett felületre:

Majd azt is megegyengetem még egy picit a Javítóeszközzel. A végeredmény így már sokkal meggyőzőbb:

Ismét láthatóvá teszem a vasmadarat, ehhez ugyanoda kattintok, ahol korábban a szem ikon volt:

Aktiválom a vasmadár rétegét a korábban leírt módon, majd az Áthelyezési eszközzel kicsit módosítom a pozícióját:

Az áthelyezéshez nem kell mást tennünk, csak kattintsunk a madárra, majd vigyük az egérrel, bár a valóságban a madár szokta vinni az egeret:)

Mielőtt felszabadítanám a madarat görcsös merevségéből, készítek egy másolatot róla, soha nem lehet tudni, talán majd egyszer szükség lesz még az eredetire. Ehhez jobb gombbal rákattintok a rétegre, majd a Réteg kétszerezése menüpontra.

A szem ikonra kattintva eltüntetem az újonnan létrehozott réteget, majd kijelölöm a középsőt:

Következhet a "Frankeinsteini" énem kiélése, vagyis az élettelen tárgy életre keltése:)

Előhívom a Csavarás és összehúzás szűrőt a Szűrők-Torzítás menüből:

Majd az alábbi képen látható módon konfigurálom, és nyomok egy OK-t neki:

Természetesen lehet játszadozni az értékekkel

Már sokkal élethűbb a kép, de még mindig nem elég dinamikus, a Szűrők-Elmosás-Elmosás elmozdítással talán segíthet ennek orvoslásában:

Szintén lehet játszani az értékekkel, én most csak egy nagyon enyhe elmosódást tettem; a szögre azonban érthető módon nem árt odafigyelni

Az Átméretezés eszközzel még egy kicsit karcsúsítom a madarat. Az eszköz kiválasztása után a képre kattintok majd a felső középső négyzetbe kattintva lejjebb húzom azt, végül az Enter billentyű lenyomásával véglegesítem a változtatásokat:

A végterméket JPEG formátumban mentem el, 80 százalékos minőségben:

Amikor megkérdezi, hogy exportálja-e, kattintsunk az Exportálra:

Ezt követően beállítom a kép minőségét, minél alacsonyabb, annál kevesebb helyet foglal a fájl, viszont a kép minősége is romlik (pixelesedik).

Végül ajánlott a GIMP saját formátumában (xcf) is elmenteni a képet, hogy a későbbiekben tudjuk még módosítani, ha akarjuk. Az xcf formátum megőrzi a rétegeket is.

Remélem sikerült néhány hasznos ismeretre szert tenni a turoriál segítségével, terveim szerint lesz még folytatás is.

Ennek a sablonnak a grafikáját még a tavaly nyáron készítettem GIMP-ben, sablonosítására azonban csak most került sor, jobb később, mint soha:)

Demo

Letöltés:

Egyszerű telepítés:

template_e.zip

Kicsit nehezebb:

pictures.zip

template.zip

Útmutató