Vektorgrafikus nagyítólencse

ekkor: 2013-04-30 · Kategória: Illustrator
×A grafika elkészítéséhez az Adobe Illustrator CS5, vagy újabb verzióra lesz szükség!

Színátmenetes kitöltések használata a térhatás eléréséhez

Az Illustratorban – és persze más vektor-, illetve pixelgrafikus alkalmazásokban is – érdemes használni és kihasználni a színátmenetes kitöltések adta lehetőségeket, ha térhatású objektumok érzetét szeretnénk kelteni. Színátmenetekkel egyszerűen megoldható többek között az árnyékolás, a fényvisszaverődés, megcsillanás, átlátszó hatás, tükröződés, melyek – akár együttes – alkalmazásával a síkbeli objektumoknak térhatást kölcsönözhetünk. Ebben a tutorialban a fenti megoldásokra látunk példát egy nagyító lencse rajzolása során.

1. lépés

Először is nyissunk egy új rajztáblát az Illustratorban. Az enyém 1024 x 768, de természetesen kinek hogy tetszik. Ezt követően az Ellipse Tool-t alkalmazva rajzoljunk egy körhöz közelítő, oldalról kicsit nyomott ellipszist:

nagyito_03
Ezután forgassuk el kicsit balra, úgy kb. 18-20 fokkal, ahogy a képen:

nagyito_04
A forgatást követően készítsünk róla másolatot, amit aztán húzzunk kissé balra és lefelé. Nem kell túlzottan pontosnak lennünk:

nagyito_05
A másolt ellipszist küldjük a háttérbe, majd válasszuk a Direct Selection Tool-t (“a”) és jelöljük ki vele az ellipszis jobb oldalán lévő pontot, ahogy a képen látható:

nagyito_07
Töröljük a kijelölt pontot Del-lel, majd a könnyebb pozicionálás miatt változtassuk a kitöltőszínt None-ra, a körvonal színét pedig feketére. Valami ilyesmit kapunk eredményeképpen:

nagyito_08
Még mindig maradjunk a Direct Selection Tool-nál és igazítsuk a fél-ellipszis pontjait úgy, hogy érintkezzenek a másikkal, valahogy úgy, mint a képen:

nagyito_09
Most jelöljük ki a fél ellipszis két végpontját, ahol nyitva van a görbe, majd a felső eszköztárról válasszuk a Connect selected end points ikont, hogy összekössük a végpontokat. Ezután változtassuk meg a kitöltőszínt és vegyük le a körvonalat:

nagyito_14
Selection Tool-lal jelöljük ki a felül lévő ellipszist, majd Ctrl+C-vel (egyébként Edit > Copy) másoljuk a vágólapra:

nagyito_17
Ezt követően válasszuk a jobb oldali Appearance panelről az fx > Path > Offset Path parancsot, majd a párbeszédablakban adjunk meg -5 px értéket az Offset értékhez:

nagyito_18
Ha ez megvan, akkor szüntessük meg a kijelölést és a vágólapról illesszük be az előzőleg odamásolt ellipszist az Edit > Paste In Place (Ctrl + Shift + V) paranccsal:

nagyito_19
Ezt követően küldjük egyel hátrébb a beillesztett ellipszist. A mellékelt képen én helytelenül a háttérbe tettem, ehelyett csak egyel tegyük hátrébb:

nagyito_20_2

Jelöljük ki újból a legelöl lévő ellipszist és helyezzük a vágólapra a másolatát:

nagyito_21
Ezt követően alkalmazzuk az Appearance panelről az fx > Path > Offset Path parancsot ismét Offset: -5 px értéket használva:

nagyito_22
A vágólapról helyezzük vissza Ctrl + Shift + V – vel az odatett ellipszist, majd küldjük egyel hátrébb, ahogy az alábbi képeken látszik:

nagyito_23 nagyito_24
Ha ezzel megvagyunk, akkor a legfelső, legkisebb – a képen zöld – ellipszist mozdítsuk kicsit lefelé és balra. Pozicionáljuk a képen látható módon:

nagyito_25

2. lépés

Most, hogy nagy vonalakban kialakítottuk a nagyító formáját, elkezdjük kialakítani a térhatást a színátmenetes kitöltések alkalmazásával. Ehhez főként a Gradient panelt (Ctrl+F9) és a Gradient Tool-t  (“g”) fogjuk használni. Akiknek esetleg új lenne a színátmenetes kitöltés, azoknak itt egy kis segítség a Gradient panel és a Gradient Tool használatához:

Gradient Tool segédlet – Video

Angolul beszél a hölgyemény a videóban, de hang nélkül is követhető, hogy mit csinál.

Tehát… először is a legfelül lévő ellipszisre alkalmazzuk az alábbi képen látható színátmenetes kitöltést. Figyeljünk rá, hogy a Type mező Radial-ra legyen beállítva. Az alkalmazott színek kódjai balról jobbra haladva:

  • 1. #FFFFFF (teljesen fehér)
  • 2. #D7F0FC
  • 3. #9DDCF9
  • 4. #00A7D6

nagyito_26
Haladjunk tovább a következő, egyel kijjebb lévő ellipszisre. Ezt az alább látható módon töltsük ki színátmenettel. A Type mező legyen Linear, az alkalmazott színek pedig a következők balról jobbra haladva:

  • 1. #585655
  • 2. #FFFFFF
  • 3. #B0ABA8
  • 4. #D5D5D5
  • 5. #FFFFFF

nagyito_27
Most a nagyító peremének kitöltése következik. Ehhez a következő színátmenetet használjuk szintén Linear típusú kitöltéssel:

  • 1. #DED9D6
  • 2. #F3F4F4
  • 3. #DED9D6
  • 4. #A0A2A5
  • 5. #A0A2A5
  • 6. #A7A9AC

nagyito_28
Haladjunk tovább a nagyító oldalának kitöltésére. Gradient Type: Linear és alkalmazzuk a képen látható módon a kitöltést a következő színekkel:

  • 1. #EFEFF0
  • 2. #C2C5C8
  • 3. #E6E7E8
  • 4. #8B9298
  • 5. #FFFFFF
  • 6. #252C2F

nagyito_29
Most a középen kékes színátmenettel kitöltött ellipszist másoljuk a vágólapra, majd ezt követően egymás után kétszer illesszük be Ctrl + Shift + V – vel ugyanoda. A legfelül lévő ellipszist kicsit mozdítsuk balra és lefelé a képen látható módon:

nagyito_34
A pozicionálást követően jelöljük ki mindkét újonnan beillesztett ellipszist és a Pathfinder palettáról (Ctrl + Shift + F9 -cel előhozható) válasszuk a Minus Front opciót. A végeredmény a képen látható sarló alakú kis objektum lesz:

nagyito_35
Töltsük ki ezt a formát a következő színátmenettel. Type továbbra is maradjon Linear:

  • 1. #23515F
  • 2. #75A2B3
  • 3. #B3E4FA
  • 4. #98BFD1
  • 5. #B7E0F3

nagyito_36
Most adjunk egy kis fényt a nagyító peremének is. Ehhez az alábbi képen látható ellipszist jelöljük ki és tegyük a vágólapra:

nagyito_37
A vágólapra helyezést követően egymás után kétszer illesszük be ugyanoda, majd a felül lévő ellipszist mozdítsuk 1 pixellel balra, majd lefelé és jelöljük ki az alatta lévővel együtt. Valahogy így kell festenie ennek a dolognak:

nagyito_40
A kijelölést követően a Pathfinder eszköztárról válasszuk a Minus Front opciót:

nagyito_41
Az újonnan létrejött kis peremet töltsük ki a #FFFDE5 kódú halvány krémszínnel:

nagyito_42
Ismételjük meg ugyanezt a módszert a nagyító bal felén is. A másolást és a két beillesztés, majd a kivágást követően a képen pirossal kiemelthez hasonló objektumunk keletkezik, amit az ugyancsak töltsünk ki az előző pontban említett #FFFDE5 kódú színnel:

nagyito_48
Jelenleg valahogy így fest a nagyító, ha jól dolgoztunk eddig:

nagyito_49
Most hozzunk létre Ellips Tool-t használva egy kis kört a nagyító bal oldalán a pereménél:

nagyito_51
Ha kész a kör, akkor töltsük ki a képen látható módon egy Radial típusú színátmenettel, melynek mindkét végénél teljesen fehér (#FFFFFF) szín található a jobb oldali szín esetében azonban az Opacity érték 0%. Így kapunk elhalványodó hatású fény csillanást:

nagyito_52
Másoljuk az imént létrehozott “megcsillanás-effektet” a nagyító túloldalára, valahogy így:

nagyito_53

3. lépés

Most rajzoljuk meg a nagyító nyelét és alkalmazzuk rá a kitöltéseket. Ehhez először ragadjuk meg a Pen Tool eszközt (“p”) és hozzunk létre valami hasonló alakzatot, mint a lenti képen:

nagyito_57
Ezt követően alkalmazzunk rá egy Linear típusú színátmenetet a képen látható módon beállítva az alábbi színekkel:

  • 1. #2D2A2B
  • 2. #292627
  • 3. #444445
  • 4. #2D2A2B
  • 5. #2D2A2B

nagyito_58
Ha a kitöltés kész, akkor megint használjuk a Pen Tool-t és rajzoljunk egy görbét a nyél fölé, majd másoljuk le az alábbi képen látható módon:

nagyito_59
Jelöljük ki a görbéket a nyéllel együtt, majd a Pathfinder palettáról válasszuk a Divide parancsot:

nagyito_60
Ha ez megvan, akkor jelöljük ki a nyelet és válasszuk a Group > Ungroup parancsot (Ctrl + Shift + G):

nagyito_61
Így már külön objektumként tudjuk szerkeszteni a nyélen létrehozott csíkot.

Fontos, hogy hagyjuk meg azt a színátmenetet, ami eredetileg is rajta volt és azt szerkesszük át az alábbi képen látható kitöltésre. Így a legegyszerűbb megoldani, hogy a hosszant futó élfény ugyanott legyen a csíkon is, mint a nyélen végig.

Az alkalmazott színek tehát a következők (a 2. szín pozíciója ugyanaz marad, mint az előző kitöltés 3. színéé):

  • 1. #8B878D
  • 2. #F3F4F4
  • 3. #807B80
  • 4. #A7A9AC

nagyito_63

Most a nyél felső részén is rajzoljunk két görbét:

nagyito_64
A nyéllel együtt történő kijelölés után alkalmazzuk a Divide parancsot a Pathfinder panelről:

nagyito_65
Ungroup parancsot követően alkalmazzuk ugyanazt a kitöltést a felső csíkra, mint az alsó esetében tettük:

nagyito_67
Ha megvagyunk a kitöltésekkel, akkor jelöljük ki a nyelet alkotó objektumokat és foglaljuk őket csoportba (Ctrl + G):

nagyito_68
Pozicionáljuk be a nyelet a nagyítónkhoz, majd küldjük a háttérbe. Valami ilyesmi lesz az eredmény:

nagyito_70

4. lépés

Utolsó előtti lépésként létrehozzuk a nagyított hatású szöveget. Ehhez először a Type Tool-t használva pötyögjünk be valami tetszőleges szöveget:

nagyito_71
Válasszunk a szöveghez egy nyomtatott sajtót idéző betűtípust. Én a Times New Roman-nél kötöttem ki, mert az tuti, hogy mindenkinek megvan 🙂 Ezt követően alakítsuk a fontokat görbévé az Object > Expand parancs segítségével:

nagyito_73
Méretezzük, mozgassuk a szöveget, ahogy kényelmes, majd válasszuk az Object > Ungroup parancsot, hogy betűnként szerkeszthessük a szöveget:

nagyito_74
Az alábbi képeken látható módon jelöljük ki a szöveg utolsó néhány betűjét, majd másoljuk a vágólapra és illesszük be újra ugyanoda:

nagyito_75
A beillesztett betűkre alkalmazzuk az Object > Envelope Distort > Make with Warp opciót az alábbi beállításokkal:

  • Style: Fisheye
  • Bend: 50%

nagyito_79
A módosító alkalmazása után az alap szövegből töröljük, ami nem kell és a maradékot küldjük a háttérbe:

nagyito_82
Ezek után a domborított betűkre alkalmazzuk az Object > Expand parancsot, hogy görbékké alakítsuk a szöveget:

nagyito_83
Ha ezzel megvagyunk, akkor jelöljük ki a nagyító kékes kitöltésű lencséjét és helyezzük a vágólapra:

nagyito_84
A vágólapra helyezés után illesszük vissza a helyére az ellipszist, majd hozzuk az előtérbe:

nagyito_88
Ezt követően jelöljük ki a torzított szöveggel együtt és válasszuk az Object > Clipping Mask > Make parancsot (Ctrl + 7), hogy egy ellipszis formájú vágómaszkot hozzunk létre a szövegre. Pozicionálást követően hasonló végeredményt kell kapnunk:

nagyito_90
Utolsó mozzanatként hozzunk létre egy árnyékot a nagyító nyelének. Ehhez először másoljuk le a nyelet:

nagyito_91
Alkalmazzunk egy egységes fekete kitöltést az egész objektumra, majd válasszuk a Pathfinder panelről a Unite parancsot:

nagyito_93
Az egyesítést követően forgassuk és pozicionáljuk az árnyékot a nagyító nyeléhez a képen láthatóhoz hasonló módon:

nagyito_94
Legvégül alkalmazzunk egy színátmenetes kitöltést az árnyékra, amely Linear típusú és mindkét végénél teljesen fekete. A jobb oldali fekete szín esetében az Opacity érték 0%, így érhetjük el az árnyék halványodását:

nagyito_95
Ha jól dolgoztunk a tutorial során, akkor a munka végén, valami nagyon hasonló összkép fogad majd minket:

nagyito_97