Robotikaszakkör logó

Robotikaszakkör logó

Inkscape, Érettségi - 2022. október 25

Robotikaszakkör logó

Ma egy valódi emelt digitális kultúra érettségi vektorgrafikás feladatát oldjuk meg Inkscape-ben: a Robotikaszakkör logót.
A cél nem az, hogy “rajzoljunk valami aranyos robotot”, hanem hogy pontosan azt csináld, amit a javítókulcs pontoz: méretek, színek, igazítás, csoportosítás, export. Ez a vizsgán a különbség a “hát ez majdnem olyan” és a “35/35” között. 😄

A feladatot innen tudod letölteni: Robotikaszakkör logó
A szükséges fájlokat a zip fájlban találod: digitális kultúra (a 2020-as Nat szerint tanulók számára)

    Robotikaszakkör logó Inkscape-ben: robot figura és ROBOTIKA–SZAKKÖR felirat zöld táblán

    A feladat leírása

    1.A Robotikaszakkör logó – az iskolában robotikaszakkör indul. Feladata a szakkör logójának elkészítése. A grafika elkészítéséhez használjon vektorgrafikus rajzolóprogramot. Az ábra megrajzolásához a leírást és az alábbi mintát kövesse. 

    1. Munkáját a vektorgrafikus szerkesztőprogram alapértelmezett formátumának megfelelően
    robotika néven mentse!
    Vizsgálja meg a mintát, és az ott látható alakzatokból a leírás figyelembevételével készítse
    el a robotot!
    2. A rajz elkészítéséhez négyféle színt használjon:
    a. fehéret: a robotot tartalmazó téglalap, a robot mellkasán lévő kijelző (lekerekített
    téglalap), a két szem, valamint a szöveg kitöltéséhez;
    b. feketét: az alakzatok körvonalaként, a szem pupillájának kitöltéséhez, a szöveg
    árnyékaként, a robot feje felett látható hullámok színeként és a szájvonalnál;
    c. zöldeskék RGB(0, 128, 128) kódú színt: a robot kezében lévő téglalap alakú
    tábla, valamint a robot fején lévő antenna körének kitöltéséhez;
    d. szürke RGB(204, 204, 204) kódú színt: a robot testrészeinek kitöltéséhez
    (kivéve a korábban említett, más színű területeket)!
    3. A robotot tartalmazó nagy téglalap szélessége 170 mm, magassága 270 mm legyen!
    4. A robot mindkét szeme méreteiben és a pupilla helyzetében egyforma legyen, a pupilla
    pozícióját tetszőlegesen meghatározhatja! Állítsa be, hogy a szemek vízszintesen egy
    vonalban legyenek!
    5. A robot kézfejét a minta szerint alakítsa ki úgy, hogy az egy villáskulcs alakzathoz hasonló
    legyen! Oldja meg, hogy a villáskulcs nyílásának területe átlátszó legyen!
    6. A robot feje (benne a szempárral és a szájjal), antennája, nyaka, teste, kijelzője és a feliratot
    tartalmazó tábla is egymáshoz képest vízszintesen középre legyen igazítva!
    7. A robot mellkasán megjelenő szívritmus vonalrajzot a szivritmus.png állományban
    találja. Vektorizálja ezt az ábrát és az alakzat színét változtassa meg a leírásban található
    zöldeskék színre! Amennyiben nem tudja vektorizálni a képet, használja fel az eredeti
    rasztergrafikus képet, változatlan formában!
    8. A szívritmust ábrázoló vonalrajz pontosan a kijelző bal oldalától a jobb oldaláig tartson!
    9. Helyezze el a mintának megfelelően a táblán a szöveget csupa nagybetűvel! Válasszon
    tetszőleges típusú, az ábrával harmonizáló betűtípust!
    10. Helyezze el a szöveg fekete változatát a szöveg mögött, úgy, mintha a szöveg árnyékot
    vetne!
    11. Foglalja közös csoportba az összes alakzatot!
    12. A kijelölt ábrát exportálja, vagy mentse robotika.png néven is! Ügyeljen arra, hogy az
    exportált képen minden megrajzolt alakzat teljes terjedelmében látható legyen!

    Ez egy 35 pontos feladat, minden pontját tartuk számon, de azt javaslom, ne a feladat szerinti sorrendben haladjunk, mert saját dolgunkat nehezíthetjük meg vele. 

    Álljunk neki a feladat megoldásának

    0. lépés

    1) Nyisd meg az Inkscape-et → Új dokumentum.
    2) Mentsd el rögtön: robotika.svg néven.
    ➡️ Vizsgán ez kötelező: a munkafájl neve és formátuma számít.

    3) Állítsd mm-re az egységet (ha nem az):
    Fájl → Dokumentum tulajdonságai → egység: mm
    ➡️ Azért kell, mert a feladat mm-ben adja meg a méreteket. Nem pixelezünk, ez nem Minecraft.

    A robot feje

     Elsőként rajzoljuk meg a robot fejét. Gyűjtsük ki az információkat, amit a fej megalkotásához kaptunk: 

    • A robot fejét szürke: RGB (204,204,204) színkóddal töltjük ki
    • A megadott rajznak megfelelően kell elkészítenünk, tehát ez egy lekerekített szélű téglalap lesz.
    • A méretére nincs adatunk, viszont látjuk, hogy a kezében tartott tábla nagyobb lesz, a teste kisebb. Ügyeljünk majd az arányokra.

    1. Kattints  téglalapok eszközre és rajzolj egy téglalapot.
    2. Lépj oldalt a kitöltésre > egyenletes színre >  állítsd át RGB-re, majd írd be a színkódot (204, 204, 204). (Az utolsó kód az átlátszóság, azt nem állítjuk át, marad a 100-as értéken.)
    Az alsó színskálát most nem tudjuk használni, mert a szín pontosan meg lett adva.

    3.  A téglalapot le kell kerekítenünk. Térj vissza a most már szürke téglalaphoz. Látod, hogy a téglalap csúcsain különböző fogantyúk vannak. Ragadd meg a kör alakú fogantyút és húzd le addig, amíg a fej lekerekítése nem lesz megfelelő. 

    4. A rajzon látszik, hogy a fej fekete körvonallal van kihúzva. 
    Menjünk vissza a kitöltés és körvonalrajzolat pontra és állítsuk be, majd a körvonal pont alatt állítsuk be a körvonal szélességét (itt nincs megadva, ez tetszőleges lehet, de legyen egységes 1-2 px körüli), a vonal mintája pedig egyenes. Kattints el és a fej körvonala is elkészült. 

    A robot arca 

      Az utasítás szerint: A robot mindkét szeme méreteiben és a pupilla helyzetében egyforma legyen, a pupilla pozícióját tetszőlegesen meghatározhatja. Állítsa be, hogy a szemek vízszintesen egy vonalban legyenek!

      A mintán látszik, hogy a robotnak két szeme van: egy fehér szemgolyó fekete körvonallal, és benne egy kisebb, fekete kitöltésű pupilla.

      1) Készítsünk el egy szemet
      Rajzoljunk egy nagyobb kört/ellipszist (szemgolyó), majd helyezzünk bele egy kisebb fekete kört (pupilla). A pupilla helye lehet tetszőleges, de most érdemes úgy elhelyezni, hogy “nézzen valahová” (pl. kicsit befelé).

      2) Tegyük a szemet egyben mozgathatóvá
      Jelöljük ki a szemgolyót és a pupillát, majd csoportosítsuk őket:

      • jobb egérgomb → Csoportosítás, vagy

      • Ctrl+G

      Így a pupilla nem fog véletlenül elcsúszni, amikor a szemet mozgatjuk.

      3) Készítsük el a második szemet (hogy tuti egyforma legyen)
      A kész szemet duplikáljuk:

      • Ctrl+D

      ➡️ A duplikálás azért szuper, mert így a pupilla helyzete is pont ugyanaz lesz, tehát teljesül a “méret és pupillahelyzet azonos” követelmény.

      4) Legyenek egy vonalban (szemek vízszintes igazítása)

      A feladat külön kéri, hogy a két szem vízszintesen egy vonalban legyen. Ez azt jelenti, hogy a két szem középpontja ugyanarra a magasságra kerüljön (ne legyen az egyik fél milliméterrel feljebb, mert az vizuálisan is látszik, és javításnál is pontvesztős lehet).

      1) Jelöld ki mindkét szemet egyszerre

      • Kijelölés eszköz (F1)

      • Kattints az egyik szemre

      • Tartsd lenyomva a Shift-et, és kattints a másik szemre is
        ➡️ Most mindkettő ki van jelölve.

      2) Nyisd meg az Igazítás és elosztás panelt

      • Shift + Ctrl + A
        ➡️ Megjelenik az Igazítás és elosztás ablak (panel).

      3) Állítsd be, mihez képest igazítson
      A panel tetején keresd a „Relatív ehhez:”  legördülőt, és válaszd:

      • Kijelölt terület 
        ➡️ Így a két kijelölt szem egymáshoz képest fog rendeződni.

      4) Kattints a megfelelő igazításra
      A cél: egy vízszintes vonal, tehát a szemek “magassága” legyen azonos. Ehhez kattints arra az ikonra, ami:

      • Vízszintesen középre igazítja a kijelölt objektumokat
        (Hivatalos logika: a kijelölt objektumok vízszintes tengely menti középpontját egy vonalba hozza)

      Gyors ellenőrzés (hogy biztos jó legyen)

      • Mozgasd el kicsit az egyik szemet fel-le, majd nyomd meg újra az igazítást.
        Ha mindig ugyanarra a vonalra “ugrik vissza”, akkor jól csináltad.

      ➡️ Extra (ha “bandzsit” akarsz): a duplikált szemet tükrözheted, így a pupillák befelé vagy kifelé “néznek”. (Ez csak stílus, nem kötelező.)

      A robot szájához nincs instrukciónk, a rajz szerint kell dolgoznunk. 
      Válasszuk a toll eszköz, kattints egyet a száj kezdeténél, húzz egy pici vonalat, majd kattints újra. Menj picit lefelé átlósan, kattints, átlósan menj feljebb, végül egyenesen jobbra. Egy ENTER-rel zárd le a rajzot. Ne ijedj meg, a száj most nem a képnek megfelelően néz ki. Lépj a kitöltés gombra oldalt és jelöld ki a nincs kitöltés opciót. Így a száj vonallá alakul. 

      Robot nyaka

      A nyak méretét a feladat nem adja meg, ezért a mintát követjük: ez egy egyszerű téglalap, ugyanazzal a szürkével, mint a fej (RGB(204,204,204)), és fekete körvonallal.
      A nyak azért lesz “szép”, mert a fej eltakarja a felső részét, így nem kell túlgondolni a szegélyt.

      1. Téglalap rajzolása (F4)
      Rajzolj egy keskeny, álló téglalapot a fej alá.

      2. Kitöltés és körvonal beállítása

      • Kitöltés: RGB(204,204,204)

      • Körvonal: fekete
        ➡️ Ha a fejnél már beállítottad ezt a színt, gyorsan tudsz “pipettázni” is (színminta vétele), de az RGB biztosabb.

      3. A nyak kerüljön a fej mögé
      A nyakat tedd a fej mögé, hogy a fej “ráüljön” a nyakra:

      • jelöld ki a nyakat → Page Down (egy szinttel hátrébb)
        vagy

      • Objektum → Lejjebb (Lower)

      ✅ Kész vagy, ha:

      • a nyak alja kilátszik,

      • a tetejét pedig a fej takarja,

      • és a körvonalvastagság egységes a fejével.

      Robot teste

      • Rajzolunk egy téglalapot a nyak alá, ami keskenyebb, mint a fej (ez lesz a törzs).

      • A “has” (kijelző) egy lekerekített téglalap a testen belül.

      • A kijelzőbe kerül a szívritmus, amit a szivritmus.png fájlból importálunk, majd vektorizálunk, hogy át tudjuk színezni a megadott zöldeskékre.

      1) Törzs (külső test)

      1. Téglalap eszköz (F4) → rajzolj egy téglalapot a nyak alá.

      2. Kitöltés: RGB(204,204,204), körvonal: fekete.

      Inkscape logó fekete-fehér ikonként, vektorgrafika jelképe

       2) Kijelző (has) – lekerekített téglalap

      1. Téglalap eszköz (F4) → rajzolj egy kisebb téglalapot a testen belül.

      2. Kerekítsd le a sarkait (a téglalap kerek fogantyújával).

      3. Kitöltés: fehér, körvonal: fekete.

      3) Szívritmus importálása és vektorizálása

      A feladat szerint a szívritmus a szivritmus.png fájlban van. Vektorizálni kell, és a vonal színét át kell állítani RGB(0,128,128)-ra. A szívritmus vonala pedig pontosan a kijelző bal oldalától a jobb oldaláig tartson.

      Lépések:

      1. Fájl → Importálás → válaszd ki a szivritmus.png-t. (ott találod, ahova mentetted)
      2. Jelöld ki a képet → Útvonal → Bitkép vektorizálása.
      3. A megjelenő ablakban kattints az Alkalmazás gombra.
      4. Ha kész, gyakran két réteg lesz egymásonfelül az új vektor, alatta az eredeti raszterkép.
      5. Mozgasd kicsit félre a felsőt, töröld az alsó eredetit (Delete).
      6. A vektor színét állítsd át: Kitöltés és körvonal (Shift+Ctrl+F) → szín: RGB(0,128,128).
      7. Méretezd úgy, hogy a szívritmus vonal balról jobbra pontosan kitöltse a kijelző szélességét.

      Robotkarok

      Nézzük meg a mintát: a kar több egyszerű elemből áll.

      • Váll: egy kör

      • Kar: két téglalap (egy “felkar”, egy keskenyebb “alkar”, picit döntve)

      • Kéz: egy kör, amiből “kivágunk” egy téglalapnyi részt (villáskulcs-hatás)

      ➡️ Jó hír: elég egy kart megcsinálni, utána duplikáljuk és tükrözzük.

      1) Váll elkészítése
      Rajzolj egy kört szürke kitöltéssel (RGB 204,204,204) és fekete körvonallal, majd tedd a test mögé (Page Down), hogy “szépen becsússzon”.

      2) Felkar (téglalap)
      Készíts egy téglalapot, helyezd a váll köréhez, igazítsd, és küldd a kör alá (Page Down), hogy a kör takarhassa a csatlakozást.

      3) Alkar (keskenyebb téglalap)
      Rajzolj egy keskenyebb téglalapot, forgasd el kicsit, és tedd az előző téglalap alá úgy, hogy a minta szerinti törést megkapd.

      4) Kéz (körből kivágás – Útvonal/Különbség)
      A kar végére rajzolj egy kört (szürke kitöltés, fekete körvonal).
      Most rajzolj egy téglalapot, és lógasd bele a körbe úgy, hogy “hiányozzon” belőle egy darab.

      • Jelöld ki a téglalapot és a kört

      • Fontos: a téglalap legyen felül (ha kell: Home / Page Up, vagy “Előrehozás”)

      • Útvonal → Különbség
        ➡️ Ezzel a téglalap “kivágja” a részt a körből, és megkapod a villáskulcs-szerű nyílást.

      5) Kéz és kar együtt kezelése (csoportosítás)
      Ha kész a kar, jelöld ki az elemeit és csoportosítsd: Ctrl+G
      ➡️ Így egyben mozgatható, nem esik szét 

      6) Duplikálás és tükrözés

      • Duplikálás: Ctrl+D

      • Tükrözés: vízszintesen (az eszközvezérlő sávban vagy Objektum menüben)
        ➡️ Így megvan a másik kar, és csak a helyére kell húzni

      Tábla elhelyezése

      A robot két keze között egy lekerekítés nélküli téglalap lesz a tábla. A feladatban megadják, hogy összesen 4 színt használhatunk: fehér, fekete, zöldeskék (RGB 0,128,128) és szürke (RGB 204,204,204). A tábla színét nem írják elő külön, de látjuk, hogy sötétebb, mint a szürke, így zöldeskékre színezzük: RGB(0,128,128).

      A feladat további utasítása a táblára:

      • „Helyezze el a mintának megfelelően a táblán a szöveget csupa nagybetűvel! Válasszon tetszőleges típusú, az ábrával harmonizáló betűtípust!”

      • „Helyezze el a szöveg fekete változatát a szöveg mögött, úgy, mintha a szöveg árnyékot vetne!”

      1) A tábla megrajzolása

      1. Téglalap eszköz (F4) → rajzolj egy téglalapot a két kéz közé.
      2. Kitöltés: zöldeskék RGB(0,128,128)
      3. Körvonal: fekete (egységes vastagsággal, mint a többi elemnél)

      2) A felirat elkészítése (csupa nagybetűvel)

      1. Szöveg eszköz → kattints a táblára, és írd be:
      ROBOTIKA- SZAKKÖR (a kötőjel az első sor végén marad)

      Betűtípus: miután elkezdesz gépelni, felül ki tudod választani a betűtípust.
      ➡️ Olyat válassz, ami “robotos”, de még olvasható (vizsgán az olvashatóság a barátod).

      A szöveg formázása:

      • Kitöltés: fehér

      • Körvonal: nincs (kapcsold ki)

      3) Árnyék készítése duplikálással

      Jelöld ki a fehér szöveget → Ctrl+D (duplikálás)

      A duplikált (másolat) szöveg:

      • Kitöltés: fekete

      • Körvonal: nincs

      • Árnyék hatás: a fekete szöveget küldd a fehér mögé:

      • Page Down (egy szinttel hátrébb), amíg a fehér felirat elöl marad

      • Mozgasd el a fekete szöveget nagyon picit (pl. 1–2 px jobbra-le), hogy tényleg árnyéknak hasson

      ✅ Kész, ha:

      • a fehér szöveg tisztán olvasható,

      • a fekete “árnyék” csak kicsit látszik mögötte,

      • és a két szöveg pontosan ugyanaz (duplikálás miatt).

      Radar jelek a robot fején

      A robot fején van egy antenna (egy keskeny háromszög) és a tetején egy kör, mellette pedig 3 radarhullám.

      • Válaszd a Sokszög/Star eszközt (bal oldali eszköztárban, a kör/ellipszis alatt szokott lenni).

      • Fent, az eszközvezérlő sávban állítsd be:

        • Sarkok száma: 3 (így lesz belőle háromszög)

      • Rajzolj egy háromszöget, majd formázd:

        • Kitöltés: szürke RGB(204,204,204)

        • Körvonal: fekete (ha eltűnt, a Körvonalrajzolat fülön kapcsold vissza)

      • Alakítsd “antenna” formára:

        • Kijelölés (F1) → nyomd keskenyebbre (vízszintesen összenyom), és tedd a fej tetejére.

      • Rétegsorrend:

        • tedd a háromszöget a fej mögé (Page Down), hogy a fej “takarja” az alsó részét.

      Antenna vége: kör

      Ellipszis (F5) → rajzolj egy kört a háromszög tetejére.
      Színek:

        • Kitöltés: zöldeskék RGB(0,128,128)

        • Körvonal: fekete

      Radarhullámok: 3 ív “egyre nagyobb” méretben

      Itt több megoldás is jó. Te azt írod, hogy ellipszisből “kivágod” a bal felét — ez tök oké. Így írható le tisztábban:

      A) Egy hullám elkészítése (ellipszisből félív)

      Ellipszis (F5) → rajzolj egy ellipszist (inkább lapos legyen).

      Kapcsold ki a kitöltést, és adj csak körvonalat:

      • Kitöltés: nincs
      • Körvonal: fekete

      Rajzolj egy téglalapot, ami lefedi az ellipszis bal felét.

      Jelöld ki először az ellipszist, majd Shift-tel a téglalapot is (vagy fordítva, de figyelj a kijelölési sorrendre), és használd:

        • Útvonal → Különbség (Difference)

      ➡️ Eredmény: megmarad a jobb oldali félív. A bal oldali rész “kivágódik”.

      Hullámok duplikálása és méretezése

      Kijelölöd a kész félívet → Ctrl+D (duplikálás)

      A duplikált ívet nagyobbra méretezed, és a megfelelő helyre igazítod.

      Ezt ismétled, amíg 3 ív megvan.

      A vonalvastagság csapda 

      Ha méretezéssel növeled az íveket, előfordulhat, hogy a vonalvastagság nem marad egységes.

      Megoldás:

      • Jelöld ki mindhárom ívet → Kitöltés és körvonal (Shift+Ctrl+F)Körvonalstílus

      • Állítsd be mindegyiknél ugyanarra a vastagságra (pl. 1–2 px), hogy egységes legyen.

      Igazítás (hogy szépen “radar” legyen)

      • Jelöld ki a 3 ívet, és kézzel igazítsd úgy, hogy:

        • középpontjuk kb. egy irányba “nézzen”

        • a távolságuk egyenletesnek hasson

      ➡️ Ha nagyon precíz akarsz lenni: az Igazítás és elosztás panellel (Shift+Ctrl+A) rá tudsz segíteni

      Utolsó simítások

       

      1) A robot méretezése és elhelyezése

      Ha már minden elem a helyén van, jelöld ki a robot összes részét (kijelöléssel, vagy húzz köré kijelölőkeretet), és csoportosítsd:

      • Ctrl+G (Csoportosítás)

      ➡️ Így egyben tudod mozgatni és méretezni, nem esik szét semmi.

      2) A keret (170×270 mm) elkészítése

      Most jön a “lap”, amibe a robot kerül:

      Téglalap eszköz (F4) → rajzolj egy téglalapot.

      Fent állítsd be:

      • Szélesség: 170 mm
      • Magasság: 270 mm

      Színek:

      • Kitöltés: fehér

      • Körvonal: fekete (ha a mintán van körvonal; ha nincs, akkor kikapcsolható)

      Tedd a téglalapot a robot mögé:

      • End (legaljára küldés), vagy
      • Page Down többször, amíg a robot elé nem kerül.

      Igazítsd a robotot a téglalapba: helyezd el úgy, hogy minden elem kényelmesen elférjen, ne lógjon ki.

      3) Mentés (munkafájl)

      Nézd át még egyszer a feladatot, majd jelöld ki a robotot a téglalappal együtt, és csoportosítsd:

      • Ctrl+G

      Ezután mentsd el a munkát:

      • Fájl → Mentés
        ✅ (robotika.svg)

      4) Export PNG-be (robotika.png)

      Most jön a leadandó kép:

      Fájl → Exportálás

      Exportálás módja: válaszd a “Kijelölés” / “Csak a kijelölt exportálása” opciót

      Fájlnév: robotika.png

      Kattints az Exportálás gombra

      ➡️ Gyors ellenőrzés: az exportált képen minden elem látszódjon, semmi ne legyen levágva.

        Ha szeretnéd, itt tudod ellenőrizni, mire hány pontot tudtál volna szerezni: megoldókulcs

        Vidám anime lány számítógépnél grafikát készít, Inkscape alapok tanulása

        Ha szeretnél továbbhaladni a vektorgrafikával, lépj a következő leckére:

        Inkscape felülete

        Inkscape felülete

        Inkscape

        Inkscape felülete - mit hol találsz meg?

        Az Inkscape felülete elsőre kicsit ijesztő lehet a rengeteg gomjával, de a felület logikája nagyon következetes, és ha tudod melyik sáv mire való, akkor onnantól gyorsan otthon leszel benne. 

        Ennek a leckének a célja: 

        • tudd megnevezni és használni a fő felületi elemeket,

        • tudd visszaállítani, ha “eltűnik valami”,

        • és legyen egy stabil alapod, mielőtt nekiesünk a csomópontoknak (a vektor igazi varázslatának).

        Inkscape felülete: anime stílusú illusztráció, ahol egy diák az Inkscape program munkaterületét használja a számítógépen
        Inkscape felülete feliratozva: menüsor, eszközvezérlő sáv, bal oldali eszköztár, vászon, jobb oldali panelek, színpaletta és állapotsor

        Menüsor az Inkscape-ben

        A menüsoron nagy valószínűséggel ezeket fogod látni: Fájl | Szerkesztés | Nézet | Réteg | Objektum | Útvonal | Szöveg | Szűrők | Kiterjesztések | Súgó
        Nem kell mindent kivülről fújni, elég megtanulni a top pontokat. 

        1. Fájl – az életmentő (mentés, export, import)

        Itt vannak a vizsga-klasszikusok: 

        • Új / Megnyitás / Mentés / Mentés másként
        • Importálás (ha kapsz képet és be kell húzni)
        • Exportálás (leggyakrabban PNG, néha PDF/SVG)

        2. Szerkesztés – visszavonás, másolás, beillesztés .

        • Visszavonás / Újra (Ctrl + Z / Ctrl +Shift + Z)
        • Másolás / Beillesztés

        3. Nézet – ha eltűnt valami

        Ez a menü a pánikgátló

        • Nagyítás / kicsinyítés, nézetek
        • Rács, segédvonalak
        • Panelek megjelenítése, ha valami eltűnik

        4. Réteg – rendet csinál a káoszból

        • Új réteg, átnevezés, zárolás, elrejtés
        • Rétegek sorrendje

        5. Objektum – objektumszintű műveletek

        • Igazítás / elosztás (néha itt, néha panelen)
        • Csoportosítás, sorrend (előre / hátra)
        • Transzformációs dolgok, tükrözés, forgatás

        Ha egy elem a másik mögé került, akkor Objektum -> előre / hátra

        6. Útvonal – a vektor igazi főnökmenüje

        Vizsgán erre majdnem biztosan szükséged lesz, itt van benne a legtöbb művelet, amit fel fogsz majd használni:

        • objektum útvonallá alakítás
        • egyesítés / kivonás / metszet (alakzatból új forma)

        7. Szöveg – tipó, betűk, útvonalon szöveg

        • Szöveg beállítások
        • Szöveg útvonalra illesztése
        • Betűkezelés 

        8. Szűrők – látvány, de óvatosan

        Szép effektek, de érettségin ritkábban fordul elő és könnyű vele túlzásba esni

        9. Kiterjesztések – extrák

        Külön funkciók, beépülők. Ha a feladat megköveteli, elővesszük. 

         

        Eszközvezérlő sáv

        Az eszközvezérlő sáv a menüsor alatt van. A lényege: mindig az aktuális eszközhöz tartozó beállításokat mutatja. Tehát ha átváltasz téglalapra, akkor mást látsz, mint a szövegnél vagy tollnál. 

        Mit fog itt tipikusan látni? 

        • X / Y (pozíció)

        • Szélesség / magasság (W / H)

        • Forgatás / döntés (bizonyos nézetekben)

        • Mértékegység (px, mm, cm…)

        • plusz eszközspecifikus opciók (pl. saroklekerekítés, kör szelet/ív, csillag pontszám, Bézier-simítás stb.)

        Fontos a vizsgán: 

        1. Pontos méret – ne ránézésre rajzolj, hanem számokkal. Ha a feladat azt mondja, készíts 80×50 mm-es téglalapot, azt itt tudod beírni

        2. Pontos pozíció: ha valamit középre vagy egy meghatározott helyre kell tenni, akkor X/Y mezők lesznek életmentők. Használd az igazítás és elosztás paneleket is a tiszta megoldáshoz

        3. Eszközváltás: ha valamilyen beállítást keresel és nincs itt, 99%, hogy rossz eszköz van kiválasztva

        Eszköztár (bal oldalt)

        Az eszköztárban sok ikon van, de nekünk most a “vizsgás top 10” kell. Ezeket ha stabilan tudod, a feladatok nagy része megoldható.

        1) Kijelölés (Select) – F1

        Mire jó? Mozgatás, méretezés, forgatás, objektum kijelölése.
        ➡️ Vizsgán: minden ezzel indul és ezzel végződik.

        Mini tipp: ha kijelölsz valamit, és még egyszer rákattintasz, átvált a fogantyúk módja (méretezés ↔ forgatás).

        2) Csomópont szerkesztés (Node) – F2

        Mire jó? Útvonalak pontjainak (csomópontjainak) és görbéinek szerkesztése.
        ➡️ Vizsgán: logó/piktogram finomítás, “legyen pont ilyen forma”.

        Kapcsolat: sokszor előtte kell az Útvonal → Objektum útvonallá alakítása.

        3) Téglalap (Rectangle) – F4

        Mire jó? Téglalap, lekerekített sarkokkal is.
        ➡️ Vizsgán: keretek, gombok, táblázat alap, ikonok.

        4) Ellipszis/Kör (Ellipse) – F5

        Mire jó? Kör, ellipszis, ív/szelet (pl. “tortaszelet”).
        ➡️ Vizsgán: kördiagram, ikonok, jelölések.

        5) Csillag/Sokszög (Star/Polygon)

        Mire jó? Csillag, sokszög, paraméterezhető pontszám.
        ➡️ Vizsgán: díszítő elemek, jelölők, piktogram-alap.

        6) Ceruza / Szabadkézi (Pencil) – F6

        Mire jó? Kézi rajz, gyors skicc útvonalként.
        ➡️ Vizsgán: ritkább, de “gyors kontúr” feladatra jó lehet.

        7) Toll (Bézier) – Shift+F6

        Mire jó? Pont-pont kattintással rajzolsz egyeneseket/görbéket (a vektor “pro” eszköze).
        ➡️ Vizsgán: logó, ikon, precíz forma.

        Tipp: kezdőként ez elsőre kemény, de ha megtanulod, onnantól minden más könnyebb.

        8) Szöveg (Text) – F8

        Mire jó? Feliratok, címek, jelölések.
        ➡️ Vizsgán: cím, magyarázó szöveg, jelölő betűk/számok.

        Vizsgatrükk: végleges leadáshoz néha útvonallá alakítják (ha betűhiba/eltérő betűkészlet gond lehet), de akkor már nem szerkeszthető szövegként.

        9) Nagyító (Zoom)

        Mire jó? Gyors nagyítás/kicsinyítés.
        ➡️ Vizsgán: részletek finomítása, csomópontozás.

        10) Kitöltő / Színátmenet (Fill/Gradient tools)

        Mire jó? Kitöltés finom hangolása, színátmenet iránya, csomópontjai.
        ➡️ Vizsgán: ha árnyalás, átmenet szerepel a feladatban.

        Mini gyakorlat 

        1. Rajzolj egy téglalapot (F4) és egy kört (F5).
        2. Válts kijelölésre (F1), mozgasd őket, majd próbáld ki a forgatást (dupla katt a kijelölt objektumon).
        3. Írj rájuk egy szót szöveggel (F8).
        4. Válts csomópont eszközre (F2), és nézd meg: melyik elem szerkeszthető csomópontokkal “értelmesen”, és melyiknél kell előbb útvonallá alakítás

        Színpaletta

        A színpaletta az Inkscape ablak alján futó színes csík. Nem a teljes színbeállítás, de a vizsgán jelentősen le tudja rövidíteni az időt egy színezős feladatnál. 

        Két legfontosabb kattintás

        • Bal kattintás egy színre -> a kijelölt objektum kitöltése (Fill) olyan színű lesz
        • Shift + bal kattintás egy színre -> a kijelölt objektum körvonala (Stroke) olyan színű lesz

        Nincs szín (átlós csík): 

        • Kattintás -> kitöltés kikapcsol (átlátszó)
        • Shift + kattintás -> körvonalat kapcsolja ki

        Miért nem színeződik valami, pedig rákattintottál?

        1. Nincs kijelölve objektum (az állapotsor is panaszkodik)
        2. Nem az objektum van kijelölve, hanem egy csoport. Ilyenkor bele kell lépni vagy bontani

        Mini gyakorlat (megoldás nélkül)

        1. Rajzolj egy téglalapot (F4).
        2. Adj neki piros kitöltést (paletta kattintás).
        3. Adj neki kék körvonalat (Shift+kattintás).
        4. Kapcsold ki a kitöltést (Nincs szín ikon).
        5. Kapcsold ki a körvonalat (Shift + Nincs szín)

         

        Állapotsor - mit látsz rajta és mire jó?

        Az állapotsor általában 3 féle dolgot közöl:

        1) Kijelölés info: “Mi van kijelölve?”

        • Ha semmi: „Nincs kijelölve objektum”

        • Ha van: kiírja, hogy téglalap / ellipszis / szöveg / útvonal / csoport stb.

        ➡️ Vizsgán ez óriási: néha azt hiszed, a téglalapot jelölted ki, de valójában egy csoportot. Az állapotsor lebuktatja.

        2) Kontextus üzenet: “Mit vár tőled a program?”

        Példák:

        • “Kattints és húzd…” (rajzolásnál)

        • “Válassz objektumot…” (műveletek előtt)

        • “Shift: körvonal, kattintás: kitöltés…” (színezésnél)

        ➡️ Ez a beépített súgó. Ha elakadnál, előbb nézd le ide, mint hogy pánikolsz.

        3) Dokumentum / réteg / stílus jelzések (helyzettől függ)

        Gyakori:

        • aktuális réteg neve (pl. “Réteg 1”)

        • figyelmeztetés, ha valami “nem érhető el” (pl. kitöltés/körvonal, ha nincs kijelölés)

        • néha méretek, pozíciók, vagy a kijelölt objektum stílusára utaló info

        Gyorsindító - jobb oldali ikoncsík

        A gyorsindító lényege:

        • Egy kattintással megnyit vagy előhoz párbeszédpaneleket (pl. Rétegek, Kitöltés és körvonal, Igazítás, Export…).
        • Ha a panelek “eltűnnek” vagy elcsúsznak, ez sokszor a leggyorsabb visszaút.

        • A jobb oldali nagy “Panelek” doboz (fülekkel) tipikusan ide van dokkolva, és a gyorsindítóval váltogathatod/előhívhatod őket.


          ➡️ Magyarul: a
          panel maga a nagy beállító doboz, a gyorsindító meg az a “távkapcsoló”, amivel előszeded.
        Inkscape logó fekete-fehér ikonként, vektorgrafika jelképe

        Panelek - mik ezek és miért kellenek?

        • általában jobb oldalt dokkolva találod meg, fülekkel (pl. „Rétegek és objektumok”, „Kitöltés és körvonal”)

        • vagy a jobb oldali gyorsindító ikonsávval tudod őket előhívni

        • menüből is elérhetők (Nézet / Ablak / Párbeszédpanelek jellegű pontokkal, verziótól függően)

        A 4 legfontosabb panel 

         

        1) Kitöltés és körvonal (Fill & Stroke)

        Mire jó?

        • kitöltés színe + átlátszóság

        • körvonal színe

        • körvonal vastagsága, szaggatott vonal, sarok/lezárás stílus

        ➡️ Ez lesz a “szépítés + pontosság” panel.
        Gyorsbillentyű: Shift + Ctrl + F

        2) Igazítás és elosztás (Align & Distribute)

        Mire jó?

        • középre igazítás (vízszintesen/függőlegesen)

        • egyenletes elosztás

        • “pixelpontos rend”

        ➡️ Ha a feladat azt mondja: “helyezd középre”, “legyenek egyenlő távolságra” — ez a panel.
        Gyorsbillentyű: Shift + Ctrl + A

        3) Rétegek és objektumok (Layers and Objects)

        Mire jó?

        • rétegek létrehozása, átnevezése

        • rétegek elrejtése/zárolása

        • objektumok sorrendje (mi van elöl, mi van hátul)

        ➡️ Vizsgán: legalább 2–3 réteg (háttér / rajz / felirat) = sokkal tisztább munka.
        Gyorsbillentyű: gyakran Shift + Ctrl + L (rétegek)

        4) Export (Export)

        Mire jó?

        • PNG export (kijelölés, oldal vagy dokumentum export)

        • felbontás, méret beállítása

        ➡️ A “leadandó fájl” itt születik.
        Gyorsbillentyű: gyakran Shift + Ctrl + E

        Amit ne felejts el a paneleknél: csak akkor tudod használni őket, ha van kijelölés.

        Mini gyakorlat

        1. Rajzolj egy téglalapot.
        2. Nyisd meg a Kitöltés és körvonal panelt, állíts körvonal vastagságot.
        3. Rajzolj még két alakzatot, és az Igazítás és elosztás panellel rendezd őket egy sorba.
        4. Hozz létre 3 réteget: “Háttér / Rajz / Felirat”, és tedd külön rétegre az elemeket.
        5. Exportálj PNG-be (oldal export).

        Ennyi volt az Inkscape felülete lecke! Most már tudod, hol találod a legfontosabb részeket (menüsor, eszköztár, eszközvezérlő sáv, panelek, színpaletta, állapotsor), és ami a legjobb: legközelebb már nem “keresgélni” fogsz, hanem dolgozni.

        Vidám anime lány számítógépnél grafikát készít, Inkscape alapok tanulása

        Ha szeretnél továbbhaladni a vektorgrafikával, lépj a következő leckére:

        Inkscape alapok – bevezetés a vektorgrafikába

        Inkscape alapok – bevezetés a vektorgrafikába

        Inkscape

        Inkscape alapok - bevezetés a vektorgrafikába

        Inkscape: mi ez, és miért érdekeljen?

        Az Inkscape egy ingyenes, nyílt forráskódú (azaz legálisan használható és folyamatosan fejlesztett) vektorgrafikai program.
        Magyarul: nem képpontokat festesz, hanem vonalakat, görbéket és alakzatokat építesz. Ez azért vizsgabarát, mert a vektoros rajz bármennyire nagyítható, nem lesz pixeles, és sokkal könnyebb “tiszta” beadandókat / plakátot / piktogramot készíteni.

        Inkscape alapok: diák vektoros ikonokat szerkeszt számítógépen (kör, csillag, nyíl)

        Inkscape alapok: ebben a leckében megérted a pixel és vektor különbségét, az SVG lényegét, és letöltjük az Inkscape-et biztonságosan.

        Honnan és hogyan töltsd le az Inkscape-et?

        Az Inkscape ingyenes és legálisan használható, de fontos, hogy honnan töltöd le. A net tele van “Letöltés” gombokkal, amik mellé még ajándékba kapsz egy rakás felesleges programot… köszi, nem. 😅

        1) Letöltés a hivatalos oldalról

        1. Nyisd meg az inkscape.org oldalt, és keresd a Download / Letöltés részt.

        2. Válaszd ki az operációs rendszeredet:

        • Windows
        • macOS
        • Linux

        Töltsd le a telepítőt, majd indítsd el.

        Inkscape letöltés Windowsra a hivatalos inkscape.org oldalon – Windows Installer Package (MSI)

        2. Ha letöltötted a telepítőt, nyisd meg az .msi fájlt, majd indítsd eé a telepítő varázslót. (Next > Next > Install > Finish)

        3. Indítsd el az Inkscape-et. Ha nem magyar nyelven van, állítsd át: Edit > Preferences > Interface > Language > Hungarian, majd índítsd újra. 

        Ok, megvan az Inkscape, de ez mitől más, mint a GIMP, és mire jó?

        Pixel vagy vektor?

        A digitális képeknek két nagy “fajtája” van, ezt fontos megértened. 

        Pixelgrafika (raszter)

        A kép apró képpontokból (pixelekből) áll. Ha ránagyítasz, előbb-utóbb látod a kis négyzeteket, tehát pixelesedik. 
        Tipikus példák hozzá: fotók, képernyőképek, festés / javítás (GIMP)

        Pixelgrafika példa: anime lány szeme 1600× nagyításban, látható pixelrács és képpontok

        Anime lány szeme 1600x nagyításban

        Vektorgrafika

        A kép nem pixelekből épül, hanem vonalakból, görbékből és alakzatokból, amiket a program “leír”. Ezért nagyításkor újraszámolja, és éles marad. Tipikus: logó, ikon, plakát, infografika, piktogram, nyomtatható grafika

        Vektorgrafika példa: egyszerű ikon (csigavonal) Inkscape-ben, SVG formátum
        Vektorgrafika nagyításban: 1600× zoom után is sima, éles kontúr (nem pixelesedik)

Felirat (caption):

        Nem tudom úgy kinagyítani a pici csiga egyetlen pontját sem, hogy pixelekre essen szét, mert a vektor nem pixelekből áll, hanem görbékből és alakzatokból, amiket a program újraszámol. Ezért akár 1600x nagyításnál is éles marad – nem kockásodik. 
        Próbáld ki te is! Nyiss meg egy SVG ikont Inkscape-ben, nyomj rá zoomot, és figyeld meg, hogy a körív és az élek továbbra is simák. 

        Inkscape - tájkép tintával

        Az Inkscape nem “random program a netről”, hanem egy régi, jól bejáratott vonal folytatása. A történet Lauris Kaplinski litván programozó Sodipodi nevű alkalmazásával indult: ez egy webes vektorgrafikus szabványra épülő, Linux alatt használható program volt.
        A Sodipodi viszont még sok mindent külön ablakokban intézett – pár perc alatt simán össze lehetett hozni egy kisebb káoszt a képernyőn. 😅

        A projekt nyílt forráskódú volt, vagyis szabadon használható és továbbfejleszthető. 2003-tól egy csapat új lendületet adott neki: a cél az volt, hogy a vektorgrafika profibb és könnyebben kezelhető legyen. Ebből lett az Inkscape.

        Inkscape logó fekete-fehér ikonként, vektorgrafika jelképe

         

        SVG

        Az Inkscape a rajzaidat SVG-ben (Scalable Vector Graphics = skálázható vektorgrafika) menti. A lényeg: az SVG nem “pixelfotót” tárol, hanem alakzatokat és görbéket (mintha a kép egy recept lenne: „rajzolj ide egy kört, ilyen színnel, ilyen vonalvastagsággal”). Emiatt a rajz bármilyen méretben éles marad, nem fog “kockásodni”.

        Az SVG ráadásul szövegként is értelmezhető formátum. Ezért  egy sima szövegszerkesztőben is megnyitható, és láthatod, hogy a program hogyan írja le az objektumokat (például egy téglalapot, kört, színt, pozíciót).
        ➡️ Ez nem azért fontos, hogy te kézzel kódolj SVG-t, hanem mert ettől nagyon jól együttműködik más programokkal (weboldalak, kiadványszerkesztők, grafikai szoftverek), és könnyű vele dolgozni.

        Mit tud még? Vektoros elemek mellett szöveget is kezel, sőt képes képpontképet (bitmapet) is “beleágyazni” egy SVG-be — de ha a cél az éles, skálázható grafika, akkor a vektor elemekkel jársz a legjobban.

        Ennyi volt az első lecke!
        Most már tudod a nagy különbséget:

        • Pixel (raszter) = képpontokból áll → nagyításnál “kockásodik” (GIMP-terep).

        • Vektor = görbékből és alakzatokból áll → nagyításnál is éles marad (Inkscape-terep).

        • SVG = a vektor “anyanyelve” → könnyen szerkeszthető, nyomtatható, webre is baráti.

        Vidám anime lány számítógépnél grafikát készít, Inkscape alapok tanulása

        Ha szeretnél továbbhaladni a vektorgrafikával, lépj a következő leckére: