Az Inkscape egy ingyenes, nyílt forráskódú vektorgrafikai képszerkesztő program, a GNU Általános Nyilvános Licensz alatt kiadva. 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. Az Inkscape használata igényel némi gyakorlást, különösen a bonyolultabb grafikai elemek esetén, de ez a fizetős szoftverekre is igaz. Az Inkscape működésében nagyon hasonlít a CorelDRAW vagy az Adobe Illustrator programokhoz. A nyomdai előkészítés kivételével szinte bármit megoldhatunk az Inkscape-pel is.
Az Inkscape teljesen ingyenesen letölthető és használható, később sem kell érte fizetni. Ha honlapod van (vagy még ha nincs is, de mondjuk szórólapod vagy névjegyed igen), akkor az Inkscape egy nagyon praktikus, ingyenes program. A fantáziádtól és a programmal szerzett gyakorlatodtól függően az Inkscape tökéletes pl. logó szerkesztésére. Könnyen lehet vele honlap elemeket - akár 3D-s gombokat - készíteni. Sokan használják akár profi prezentációk készítésére, diagramok bemutatására is.
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. 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 Inkscape felületének bemutatása
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. Az alábbi 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.
Objektumok elhelyezése és egyszerű módosítása
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.
Fontos tudnivalók a példákhoz
Fontos: 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.
Fontos: 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.
Logókészítési példák az Inkscape-ben
BBC logó (négyzetek és szöveg)
Kezdjük egy egyszerűbb logó megvalósításával, legyen ez a BBC logója. 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.
Fájl megtekintése: BBC logójának elkészítése (animáció) című háttéranyag megtekintése
Információ az állományról: Az animáció segítségével bemutatjuk a logó elkészítésének lépéseit.
Eighty20 logó (sok négyzet igazítása)
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.
Megvalósítás sorok és oszlopok beállítással
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!
Fájl megtekintése: Eighty20 logó elkészítése sorok és oszlopok alkalmazásával (animáció) című háttéranyag megtekintése
Információ az állományról: Az animáció segítségével bemutatjuk a logó elkészítésének lépéseit.
Megvalósítás csempézett klónok létrehozásával
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.
Fájl megtekintése: Eighty20 logó elkészítése klónozással (animáció) című háttéranyag megtekintése
Információ az állományról: Az animáció segítségével bemutatjuk a logó elkészítésének lépéseit.
Chanel logó (körívek)
Az előző példáinkban főleg négyzetekkel, téglalapokkal dolgoztunk. Most nézzük meg, hogy a kör objektumot hogyan használhatjuk. Gyakorlásként készítsük el a Chanel logóját, ami két egymásba fordított C betűre hasonlít. Mi azonban nem C betűkkel, hanem körvonal segítségével valósítjuk meg ugyanezt.
Fájl megtekintése: Chanel logó elkészítése (animáció) című háttéranyag megtekintése
Információ az állományról: Az animáció segítségével bemutatjuk a logó elkészítésének lépéseit.
RSS-logó (körívek, lekerekített téglalap, színátmenet)
Most alkalmazzuk az eddig tanultakat egy olyan logó elkészítése során, amely kört, körívet, és lekerekített téglalapot is tartalmaz. A logó háttere legyen színátmenetes. A téglalap sarkait ugyanolyan módszerrel kell majd lekerekíteni, ahogy a kör objektumot is módosítottuk a körív létrehozásánál, vagyis duplán kell kattintanunk és a megfelelő csomópontokat el kell mozgatnunk. Lássuk mindezt a gyakorlatban is! A megoldást két részben közöljük, először elkészítjük az logó hátterét, színátmenetes kitöltéssel.
Fájl megtekintése: RSS logó alapjának elkészítése (animáció) című háttéranyag megtekintése
Információ az állományról: Az animáció segítségével bemutatjuk a logó elkészítésének lépéseit.
Ez után elhelyezzük a segédvonalakat , létrehozzuk a fehér kört, majd körívet, lekerekítjük a vonal végeket és a megfelelő helyre pozícionáljuk az objektumokat.
Fájl megtekintése: RSS logó elkészítésének folytatása (animáció) című háttéranyag megtekintése
Információ az állományról: Az animáció segítségével bemutatjuk a logó elkészítésének lépéseit.
Mivel vektorgrafikus formátumban dolgoztunk, a logó átméretezése során sem sérül.
RSS logó (30 képpont széles)
RSS logó (60 képpont széles)
RSS logó (90 képpont széles)
RSS logó (120 képpont széles)
RSS logó (200 képpont széles)
RSS-logó készítése meglévő kép vektorizálásával
Tegyük fel, hogy van egy fekete-fehér ábránk, amelyet logó, ikon, stb. készítéshez fel kívánunk használni. Megtehetjük-e, hogy a rasztergrafikus képet az InkScape programban használjuk? Természetesen igen. Rasztergrafikus képek importálására lehetőség van a Fájl / Importálás menüponttal. De ha rasztergrafikus képet helyezünk el a logóban, akkor elveszítjük azt az előnyt, hogy a logó tetszőleges méretben exportálható legyen. Emiatt a képet érdemes vektorizálni.
A következő példában egy meglévő fekete-fehér RSS-logót vektorizálunk és alakítunk át a saját igényeinknek megfelelően. A feladat elkészítése során az alábbi fekete-fehér képet használjuk fel:
Fájl megtekintése: RSS logó elkészítése rasztergrafika vektorizálásával (animáció) című háttéranyag megtekintése
Információ az állományról: Az animáció segítségével bemutatjuk a logó elkészítésének lépéseit.
RSS-logó továbbfejlesztése szűrők segítségével
Az Inkscape program Szűrők menüpontjában számos olyan beépített effektust találunk, amelyet ki tudunk használni az ábráink továbbfejlesztése során. Ezek felfedezését az Olvasóra bízzuk, az alábbi animációban az RSS-logó egyfajta árnyékolására mutatunk példát.
Fájl megtekintése: RSS logó továbbfejlesztése szűrőkkel (animáció) című háttéranyag megtekintése
Információ az állományról: Az animáció segítségével bemutatjuk a logó elkészítésének lépéseit.
Lepke készítése (átlátszóság, szakaszok görbévé alakítása)
Az eddigi feladatok során az objektumok kitöltése vagy egy adott szín, vagy színátmenet szerint történt, nézzük meg, hogy hogyan játszhatunk az átlátszósággal, ami sok logón felfedezhető, elég ha megnézzük a 35 inspiráló példa átlátszó logó készítéséhez illetve 30 példa átlátszóság használatára című blogbejegyzéseket. Most próbáljunk meg egy egyszerűbb alakzatot elkészíteni, mondjuk egy lepkét. Ennek kapcsán használni fogjuk a Béziér-görbék rajzolása eszközt, módosítjuk a görbe csomópontjait és szakaszait, majd az objektumok kitöltésénél alkalmazzuk az átlátszóságot.
Lássuk ezt a gyakorlatban!
Fájl megtekintése: Lepke készítése átlátszósággal (animáció) című háttéranyag megtekintése
Információ az állományról: Az animáció segítségével bemutatjuk a logó elkészítésének lépéseit.
A vektoros grafika előnyei és az Inkscape
Lauris Kaplinski litván programozó kezdte el fejleszteni az Inkscape program elődjét, Sodipodi néven. Az SVG-re, egy webes vektorgrafikus szabványra épülő, Linux alatt használható illusztrációs program volt. Az Inkscape működésében nagyon hasonlít a CorelDRAW vagy az Adobe Illustrator programokhoz. A nyomdai előkészítés kivételével szinte bármit megoldhatunk az Inkscape-pel is. Rugalmas rajzobjektum-kezelés. (Bármely síkidom körvonalát, kitöltését, méretét, formáját pillanatok alatt megváltoztathatod. Bézier-görbék (útvonalak) szerkesztése a legkorszerűbb eszközökkel. (Csúcsos, simított és szimmetrikus csomópontok mellett használ egy olyan csomópontfajtát is, amely végigcsúsztatható az útvonal mentén, mindvégig megtartva az ideális görbületet. Útvonal-effektusok. Árnyalási lehetőségek. Körülvágás és maszkolás. Szövegek görbére illesztése.
Hogy segítsük a program megismerését, 2014-ben az FSF.hu Alapítvány létrehozta az inkscape.hu weboldalt, és kiadta az Inkscape - vektorgrafika mindenkinek c. szakkönyvet.
Az Inkscape használata igényel némi gyakorlást, különösen a bonyolultabb grafikai elemek esetén, de ez a fizetős szoftverekre is igaz. Én például arra is az Inkscape-et használom, hogy ha látok egy jó grafikát, de nem akarok rá az adott projekt keretén belül pénzt kiadni, akkor szépen megrajzolom magam.
Persze aki nálam komolyabb grafikai tehetséggel van megáldva, az egészen professzionális grafikákat is képes Inkscape-pel készíteni.
Az Inkscape magyarul is használható. Megjegyzés: nálam a nyelvi beállítás valamiért nem működik, marad angol. De mivel én alapból minden programot angolul szeretek használni, ezért nem is foglalkoztam vele.
Precíz méretezés és összeállítás
Lézervágásra kellene előkészíteni egy hatszög alapú hasábot - fedőlap nélkül. Mindezt kiszerkeszteni nem olyan nagy kaland, de a pontosságra és az illesztésekre oda kell figyelni. A hatszög oldalai 100 mm. Figyelj arra, hogy amikor megrajzolod a hatszöget, alsó és felső oldala vízszintes legyen (CTRL!). Amikor elkészült, a Tulajdonságsoron kapcsold be a kis lakatot a szélesség és a magasság között (arányosan fog átméreteződni), majd állítsd a szélességet 200 mm-re. Ez kevesebb, mint amit beállítottunk! Most mi van, nem pontos az Inkscape?! Itt a dilemma: Ha egészen pontosan szeretnénk dolgozni, akkor vonalvastagság nélkül kell ezt megoldani.
Emmándöfi! Most rajzolj egy 100 mm × 35 mm-es téglalapot, a pontos beállításnál függetlenítsd a szélesség és magasság értékeit! Színezd kékre! Majd illeszd a hatszög tetejére. Duplázd (CTRL+D), majd forgasd el hatvan fokkal (CTRL-lal kényszerítve). Így rakd körbe! Nagyon figyelj a pontos illesztésre!!!!! Most ezeket a füleket össze kell forrasztani a hatszöggel (ez lesz a papírforma), majd bejelölni szaggatott vonallal a hajtáséleket (ez az eredeti hatszög). Ehhez másold be a vágólapra a piros hatszöget (CTRL+C). Jelöld ki az összes síkidomot és foglald Unióba! Legyen a körvonala fekete és 0,25 pt, kitöltése semmi. Varázsold vissza a vágólapról a hatszöget: Menü > Szerkesztés > Beillesztés megfelelő helyre (SHIFT+CTRL+B). Körvonala fekete, vastagsága 0,25 pt, vonalminta szaggatott.