A leckében konkrét feladatok segítségével megismerkedünk a vektorgrafikus ábrák készítésére alkalmas InkScape alkalmazással.
A hallgató legyen képes egyszerűbb logók elkészítésére az Inkscape alkalmazásban.
Az InkScape alkalmazás egy több platformra is telepíthető, ingyenesen használható alkalmazás, amellyel vektorgrafikus ábrákat készíthetünk. A program képes a rasztergrafikus képek vektorizálására is. Az alkalmazás több formátumban (SVG, PDF, PS, ODG, stb.) is képes elmenteni az ábrákat.
Ebben a fejezetben kifejezetten a logókészítés kapcsán mutatjuk be az alkalmazást különböző logók megvalósításán keresztül. Tananyagunk készítésének pillanatában az Inkscape 0.48.4-es a legfrissebb stabil verzió, így a példák létrehozásánál ezt fogjuk használni.
A következő animációk segítségével az alkalmazás felületét mutatjuk be, azok kedvéért, akik most ismerkednek az alkalmazással, vagy eddig egy korábbi verzióját ismerték csak.
Az alábbiakban elhelyezünk néhány objektumot, majd módosítjuk ezeket.
Az alábbi leírásokban és animációkban az egyszerűbb logóktól haladunk az összetettebb logók megvalósításáig, miközben megismerjük az Inkscape alkalmazás funkcióit.
Az itt szereplő példákban nem törekszünk az eredeti logó teljesen hű, tökéletes lemásolására, előfordul, hogy a logón szereplő feliratokat el hagyjuk, mert az eredeti betűtípus felkutatása/utánzása feleslegesen bonyolítaná a megvalósítást. Ezen példák tehát elsősorban gyakorlás céljából lettek létrehozva, hogy a különböző eszközök használati módját konkrét feladatok kapcsán mutathassuk be, és ezek alapján az Olvasó képes legyen saját ötlet alapján is egyszerűbb logók megvalósítására.
Ahhoz, hogy az egyes műveletek rögzüljenek és azok készség szinten is használhatóak legyenek a későbbiekben, nem elég az animációkat megtekinteni, az abban szereplő műveleteket interaktívan, az Inkscape alkalmazás megnyitása mellett érdemes mindjárt lépésről lépésre megvalósítani.
Az animációk egy részét kénytelenek voltunk nagy felbontásban készíteni, hogy az alkalmazás minden fontos funkciója látható legyen a képernyőn. Ezen animációk külön ablakban jelennek meg.
Kezdjük egy egyszerűbb logó megvalósításával, legyen ez a BBC logója.
A BBC logójának történetéről az alábbi oldalon sok érdekességet megtudhatunk:
http://www.bbc.co.uk/historyofthebbc/resources/in-depth/bbc_logo.shtml
A logó megvalósítása során három fekete négyzetet kell egymás mellé tennünk, amelyekben el kell helyeznünk a fehér B B C betűket. Munkánkat itt is segítik a segédvonalak, akár csak a GIMP alkalmazásban. A segédvonalakat ugyanolyan módszerrel kell elhelyeznünk, mint GIMP-ben, vagyis a vonalzóról kell ezeket fogd és vidd módszerrel behúzni. Az eredeti logón lemértük a négyzetek és a térközök arányát, ez alapján megtehetjük azt, hogy 120 egység méretű négyzeteket hozunk létre, amelyek között 15 egység üres helyet hagyunk. Így az teljes logó 390 egység széles lesz és 120 egység magas. A betűk magassága 80 egység.
Amikor egy objektumot megrajzoltunk, és pont ugyanolyan objektumra van még szükségünk, akkor használhatjuk a kettőzés funkciót, amelyet az eszköztáron is elérünk, használhatjuk a CTRL+D gyorsbillentyűt, illetve az objektumra a jobb egérgombbal kattintva, a menüből is kiválaszthatjuk. Ezt a funkciót használjuk most a négyzetek kettőzésére, illetve a betűk kettőzésére is.
A négyzetek elhelyezése után a szövegeket is elhelyezzük, majd azokat a négyzetek közepéhez igazítjuk vízszintesen és függőlegesen egyaránt (Objektum / Igazítás és elrendezés). Ezek után egy fehér hátterű téglalapot helyezünk el, amelyet leghátra teszünk.
Hogy az egyes elemeket együtt tudjuk kezelni azokat az egérrel kijelöljük, majd csoportosítjuk (Objektum / Csoportosítás).
A legvégén pedig elmentjük a logót SVG formátumban, illetve exportáljuk a végeredményt PNG formátumban.
Az előző példánkban három négyzetet kellett rajzolnunk és ezeket megfelelő helyre pozícionálnunk. Sok objektum esetén viszont a korábban alkalmazott módszer (kettőzés majd kézi igazítás a segédvonalakhoz) nagyon körülményessé teszi a munkát. Szerencsére van megoldás. Ezt az alábbi logó egy részletének elkészítése során mutatjuk be. A feladatot két különböző módszerrel is megoldjuk.
A logóról többet is megtudhatunk a következő oldalon:
Láthatjuk, hogy ebben a logóban 14 négyzet van elhelyezve, két sorban. A szürke négyzetek színkódja: RGB (220,220,220), az alkalmazott kék szín kódja: RGB(108,138,164). A mintán a négyzetek 45 képpont szélesek, és 15 képpont távolságra vannak egymástól.
A megoldás során kihasználhatjuk az Inkscape Objektum / Sorok és oszlopok menüpontjának lehetőségeit. Először is szükségünk lesz mind a 14 négyzetre, utána pedig az imént említett funkcióval elhelyezzük őket ebben a kívánt elrendezésben. Ezt követően csak át kell színeznünk a kék négyzeteket, és készen is vagyunk.
Lássuk ezt lépésről lépésre!
Azt is megspórolhatjuk, hogy mi hozzuk létre a 13 változatot. Ehhez a Szerkesztés / Klónozás / Csempézett klónok létrehozása menüpontot kell használnunk, az alábbi animációban bemutatott módon.
  |
 |
 |
A tananyag az ELTE - PPKE informatika tananyagfejlesztési projekt (TÁMOP-4.1.2.A/1-11/1-2011-0052) keretében valósult meg.
A tananyag elkészítéséhez az ELTESCORM keretrendszert használtuk.
