Sörös címke készítése – 2. rész

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

Egy kitalált sör márka címkéjének elkészítése vektorosan – 2. rész

A tutorial most következő, 2. részében a már meglévő címke alapra elkészítjük a pisztrángot ábrázoló grafikát, illetve hozzáadjuk a szöveget az összképhez.

3. lépés

Aki tud fejből pisztrángot rajzolni, ugorjon a következő lépéshez :-). Én kerestem egy vázlatos rajzot egy pisztrángról, ezt fogom használni alapként. A beállítás is passzol az elképzeléshez. Természetesen azt a módszert is választhatjuk, hogy sok eredeti képet nézünk meg és tanulmányozunk a témával kapcsolatban, majd azok alapján megrajzoljuk a saját mintánkat, de sokszor a most bemutatott megoldás gyorsabb és mégis egyedi lesz a végeredmény. Ugyanis nem másoljuk az eredetit, csak annak alapján más stílusban készítünk egy grafikát.

A kép beillesztése után (File > Place) rögzítsük le azt az Ojbect > Lock > selection, vagy a Ctrl+2 kombóval:

soros_cimke_171
A Pen Tool (“p”) segítségével rajzoljuk körbe a képet:

soros_cimke_175 soros_cimke_176

Valami hasonló lesz az eredmény:
soros_cimke_178
Még mindig a Pen Tool-t használva kezdjük el a főbb vonalak berajzolását:

soros_cimke_180
Folytassuk ezt tovább a képeken láthatóhoz hasonló módon:

soros_cimke_181 soros_cimke_184
Ha minden vonal a helyén van, akkor az Object > Unlock All paranccsal (vagy Ctrl+Alt+2 – vel) oldjuk fel a kép rögzítését és töröljük azt Del-lel:

soros_cimke_186
A hal körvonalát töltsük ki egy egységes színnel (nálam fekete), amíg szerkesztjük a többi részét, majd a már ismertetett módon rögzítsük azt:

soros_cimke_188
Váltsunk a Width Tool eszközre (“Shift+W”):

soros_cimke_189
Segítségével állítsunk a főbb vonalak vastagságán, hogy pofásabbá tegyük a pisztráng grafikát:

soros_cimke_190 soros_cimke_191
Az úszóknál lévő vonalakat jelöljük ki Selection Tool-lal (“v”), majd a vonalak vastagságát állítsuk egy nekünk tetsző értékre (nálam 5 pt volt) és válasszuk a felső eszköztárról az előre definiálta vonalstílusok közül a Width Profile 4 névre hallgatót. A képen látható vonalakat eredményez:

soros_cimke_193
Folytassuk tovább a farok úszónál ugyanezzel a módszerrel:

soros_cimke_197

A faroknál lévő vonalak esetében a Width Profile 5 nevű vonalbeállítást használtam. Természetesen nyugodtan kísérletezzünk, használjuk azt a beállítást, ami nekünk tetszik:

soros_cimke_199

A has és hátúszók esetében megint a Width Profile 4 beállítást használjuk:

soros_cimke_200 soros_cimke_202

A hal fejénél rajzolt vonalakhoz a Width Profile 5 stílust állítsuk be:

soros_cimke_204

A hal szeméhez a Width Profile 1-et alkalmazzuk:

soros_cimke_205

Jelöljük ki az összes vonalat és az Object > Group paranccsal (Ctrl+G) foglaljuk csoportba őket:

soros_cimke_207

Object > Ulock All paranccsal oldjuk fel a rögzített, feketével kitöltött hal körvonalat, majd a körvonal színét állítsuk át None-ra:

soros_cimke_209

Foglaljuk csoportba a vonalakat és a pisztrángot:

soros_cimke_211

Én egy másolatot készítettem a komplett pisztrángról, de a most következő lépést természetesen az eddigi munkán is végrehajthatjuk. Object > Expand Appearance paranccsal alakítsuk a vonalakból álló pisztrángot alakzatok csoportjává:

soros_cimke_212

Valahogy így áll most a rajzunk:

soros_cimke_213

Kattintsunk duplán a pisztráng alapjára, hogy a csoporton belül azt szerkeszthessük. Állítsuk át a kitöltőszínét sötétkék árnyalatúra, majd Esc gombbal lépjünk vissza a csoport szint tetejére:

soros_cimke_214

Ugyanezzel a módszerrel változtassuk meg a vonalak kitöltőszínét fehérre, majd az egész pisztrángot forgassuk el kicsit:

soros_cimke_215

Kattintsunk ismét duplán a hal kék alapjára, majd az Appearance panelen válasszuk az Add new Fill gombot, hogy új kitöltőszínt adjunk hozzá:

soros_cimke_217

Az új színt változtassuk meg fehérre. Látszólag nem történik még semmi:

soros_cimke_218

Ha ez megvan, akkor válasszuk az fx > Path > Offset Path effektet az új fehér kitöltőszínre alkalmazva:

soros_cimke_219

Az Offset érték legyen mondjuk 4 px a Joins értéket pedig állítsuk Miter-re, majd okézzuk le:

soros_cimke_220

Ha ez kész, akkor Esc-kel lépjünk vissza egy szintet a csoportban és legyen kijelölve kompletten a pisztrángunk, majd fx > Stylize > Drop Shadow:

soros_cimke_224

A effekthez tartozó beállításoknál a következő értékeket használjuk:

  • Mode: Normal
  • Opacity: 100%
  • X Offset: 4 px
  • Y Offset: 8 px
  • Blur: 0 px
  • Color: ide a már a címke alapjánál is használt arany színt állítsuk be

soros_cimke_228

4. lépés

A pisztránggal készen vagyunk, most adjuk hozzá a szöveget. Type Tool segítségével gépeljük be a “PISZTRÁNG” szót:

soros_cimke_229

Keressünk egy számunkra tetszetős és a címke stílusához is illő betűtípust:

soros_cimke_230

Ezt követően az Appearance panelről az fx > Warp > Flag effektet alkalmazzuk a szövegre:

soros_cimke_232

Az effekthez tartozó beállításoknál a Horizontal típus legyen aktív, a Bend értékhez pedig adjunk meg -20 – at:

soros_cimke_234

Az Appearance panel Add new Fill gombjával adjunk a szöveghez egy új kitöltőszínt, amit változtassunk meg a pisztrángnál is használt kékre:

soros_cimke_238

Ha ez megvan, akkor fx > Path > Offset Path, majd az Offset mezőbe adjunk meg 18 px – et, a Joins pedig legyen Round típusú:

soros_cimke_239 soros_cimke_240

Most újabb kitöltőszín hozzáadása következik. Ez legyen a már használt arany szín:

soros_cimke_243

Fontos, hogy a képen is látható módon a fehér és a kék kitöltés közé helyezzük el, majd a már ismert Offset Path effektet alkalmazzuk rá 3 px és Round értékek használatával:

soros_cimke_244 soros_cimke_245

Hogy jobban mutasson a grafika, a kék kitöltőszínt a képen láthatóhoz hasonló módon lecserélhetjük egy színátmenetre. A Gradient panel és a Gragient Tool (“g”) segítségével alkalmazhatunk egy hasonló színátmenetes kitöltést a szövegre és a pisztráng kék részére is:

soros_cimke_246

A további szövegek hozzáadása előtt egy kis kitérő, vissza a címkéhez. Váltsunk Direct Selection Tool-ra, majd a szálkákra emlékeztető vonalaknál válasszuk bal oldalon az alsó vonal jobb oldali pontját a képen látható módon, Vegyük kicsit rövidebbre a vonalat, igazítsunk az ívén is. Mivel alkalmaztuk a felső és alsó csík közt a Blend módosítót, ami átmenetet képez az első és utolsó elem között, így a vonalak felülről lefelé haladva egyre rövidülnek majd:

soros_cimke_248 soros_cimke_250

A jobb oldalon játsszuk el ugyanezt, csak ott a felső vonalat rövidítsük kellően:

soros_cimke_251

A kitérőt követően készítsünk a képeken látható módon egy másolatot a címke ellipszis részeiről, majd töröljünk minden külső ellipszist, a pikkely és hullám mintákat is. Csak a középső ellipszist hagyjuk meg:

soros_cimke_252 soros_cimke_253

Ha ez megvan, válasszuk a Type on a Path Tool-t (Type Tool-lal egy csoportban) a bal oldali eszköztárról:

soros_cimke_254

Kattintsunk vele az ellipszis körvonalára valahol felül, hogy a vonalra írjunk. Az ellipszis színei eltűnnek majd, de nem fognak kelleni, szóval rendben is van így:

soros_cimke_255

Gépeljünk be szöveget. Én az alább látható mellett döntöttem, csupa nagybetűvel:

soros_cimke_256

A szöveg kezdeténél lévő pozicionáló vonalnál fogva Selection Tool segítségével igazítsuk húzással úgy a szöveget a körvonalon, hogy középre essen:

soros_cimke_257

Ezt követően az Align panel segítségével igazítsuk a címkéhez képest középre a szöveget:

soros_cimke_260

Növeljük meg a méretét az alább látható módon:

soros_cimke_262

A már ismert kitöltéses módszerrel, illetve az Offset Path effekt segítségével állítsuk be a szöveg színeit úgy, hogy fehér legyen a kitöltés, körülötte pedig arany körvonal legyen:

soros_cimke_263

Az előbbi görbére illesztett szöveget másoljuk le, majd írjuk át rajta a szöveget:

soros_cimke_264 soros_cimke_265

A feliratot a pozicionáló vonalka segítségével fordítsuk az ellipszis ív belseje felé, ahogy a képen is látható és igazítsuk alulra:

soros_cimke_267

Méretezzük, igazítsuk és állítsuk át a színét aranyra:

soros_cimke_273

Az alábbi képen látható módon én még – egy a sörös címkéken megszokott – évszámot is hozzáadtam, ezt már egyszerűen Type Tool-lal, fehér színnel kitöltve:

soros_cimke_276

A következő részben megrajzoljuk a címke peremét díszítő malátakoszorú alapjait, illetve hozzáadjuk magát a díszítés ezzel lezárva a címke tervezését.

Folyt. köv.