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

ekkor: 2013-10-06 · 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

A most következő folytatásos tutorialban bemutatom, miként készíthetünk el egy dizájnos sörös címkét. A tradicionális stílusú címke elkészítéséhez alapvető, egyszerű módszereket fogunk használni.

1. lépés

Nyissunk egy új projektet egy darab rajztáblával. Válasszuk az Ellipse Tool-t (“l”) majd rajzoljunk egy hasonló ellipszist, mint a képen. Legyen a rajztábla közepéhez igazítva az Align panel segítségével és ne legyen körvonal színe:

soros_cimke_005

Másoljuk le az ellipszist, majd illesszük be újra és a másolatot vegyük kisebbre. Pozicionáljuk ezt is középre. Én egy picit szélesebbre vettem még mindkettőt:

soros_cimke_009
Ismét készítsünk egy másolatot, majd vegyük nagyobbra, igazítsuk középre és jobb klikk > Arrange > Send to Back paranccsal küldjük a háttérbe:

soros_cimke_014
A következő lépések során nem írok pontos színkódokat az egyes elemek kitöltéséhez, mert nem fontos pont ugyanezekkel a színekkel dolgozni. Mindenki válasszon a saját ízlésének megfelelő összeállítást. Én azért választottam alapnak a kék színt, mert a “Pisztráng” nevet adtam a képzeletbeli sörömnek. Az arany ezzel jól harmonizál és emellett elegáns, tradicionális megjelenést kölcsönöz. Arra viszont ügyeljünk, hogy módszeresen a kiválasztott színeket alkalmazzuk a grafika többi részén is, mert úgy lesz kellemes az összhatás a végén.

A háttérben lévő legnagyobb ellipszist töltsük ki a képen láthatóhoz hasonló átmenettel. Használjuk a Gradient palettát és a Gradient Tool-t (“g”). Az ellipszis körvonalához állítsunk be egy sötét tónusú arany színt 10 pt vonalvastagsággal:

soros_cimke_024
A középső ellipszist az alábbihoz hasonló színátmenettel töltsük ki. A körvonala sötétkék legyen és 6 pt vastag:

soros_cimke_026
Végül a középső ellipszis kitöltő színe legyen fehér, a körvonala az előzőleg használt sötétkék, 10 pt vastagság értékkel:

soros_cimke_027
Jelöljük ki mindhárom ellipszist, majd a Stroke panelen válasszuk az Align Stroke to Outside opciót, hogy a körvonalak az elemeket kívülről határolják:

soros_cimke_030
Ha ez megvan, akkor másoljuk le, majd helyezzük az előtérbe a legnagyobb ellipszisünket. A körvonal színét változtassuk “None” – ra:

soros_cimke_035
Ezt követően a Swatches paletta bal alsó sarkában nyissuk le a Swatch Libraries menu – t és innen válasszuk a Patterns >Basic Graphics > Basic Graphics_Textures könyvtárat, mely az Illustrator saját textúra mintáit tartalmazza:

soros_cimke_036
Az itt található minták közül válasszuk a USGS 8 Sewage Disposal nevű mintát. Én legalábbis ezt választottam, de természetesen mindenki bízza a fantáziájára a dolgot:

soros_cimke_037
Egyszerű, sűrű csíkos mintával lett kitöltve az ellipszis az előtérben. Küldjük hátrébb párszor jobb klikk > Arrange > Send Backward paranccsal (Ctrl + Ő kombóval is működik). (A Ctrl + Ú pedig az előrébb hozás kombinációja – természetesen ez magyar billentyűzeten értendő, angol billentyűzeten a képen látható gyors gombok működnek):

soros_cimke_039
A hátrébb helyezést követően kattintsunk duplán a Scale Tool ikonjára a bal oldali eszköztáron:

soros_cimke_040

A felugró ablak Options csoportjában csak a Patterns checkbox legyen bepipálva, hogy kizárólag a kitöltő minta legyen méretezve, maga az alakzat ne. A Uniform > Scale mezőbe adjunk meg 500% – ot:

soros_cimke_041
Ha ezzel megvagyunk, az Appearance panelen a csíkos ellipszis rétegtulajdonságát állítsuk át Normal-ról Soft Light-ra:

soros_cimke_042
Én ezt követően még megnöveltem kicsit a hátsó ellipszis és a csíkos minta méretét, mert később még kelleni fog a hely, meg különben is, így jobban mutat:

soros_cimke_044
Most a középső, eddig fehér ellipszis kitöltését változtassuk meg egy fehérből, halvány kék árnyalatba tartó színátmenetre, hasonlóan a képen láthatóhoz. Az átmenet típusa Radial legyen, beállításához pedig használjuk a Gradient Tool-t:

soros_cimke_045
Most a Pen Tool (“p”) segítségével alkossunk egy hullámvonalat. Valami hasonlót, mint a képen. Ha már víz és pisztráng a téma, akkor ahhoz jól mutat a hullám motívum:

soros_cimke_046
Most válasszuk a Width Tool-t (Shift + W), majd segítségével az alábbi képeken látható módon növeljük meg a hullámvonal vastagságát középen, a két végén pedig vékonyítsuk el teljesen:

soros_cimke_048 soros_cimke_050
He ez megvan és elégedettek vagyunk a vonallal, akkor Alt + Shift nyomva tartása mellett húzzuk lejjebb, jó távol a vonalat, így készítve másolatot:

soros_cimke_051
Jelöljük ki mindkettőt, majd Object > Blend > Make parancs:

soros_cimke_053
Ezt követően Object > Blend > Blend Options, majd a beállításoknál a Spacing listából válasszuk a Specified Steps lehetőséget, az értékmezőbe pedig írjunk mondjuk 20-at. Így a két szélső forma között kaptunk még 20 db-ot:

soros_cimke_056
Ha ez kész, akkor Object > Expand Appearance, majd Object > Expand parancs. Erre azért volt szükség, mert a későbbiekben méretezni fogjuk majd a mintát és alakzatként nem változik a vastagsága, míg görbeként igen, ha méretezzük:

soros_cimke_057 soros_cimke_059
A legkisebb ellipszisről készítsünk egy másolatot a képen látható módon:

soros_cimke_062
Húzzuk föléje a hullámos mintát és méretezzük az alább látható módon, majd jobb klikk > Arrange >Send to Back paranccsal küldjük a háttérbe:

soros_cimke_064
Legyen kijelölve a minta és az ellipszis egyaránt, majd válasszuk az Object > Clipping Mask > Make parancsot:

soros_cimke_065
Az Align panel segítségével igazítsuk a csíkos mintát középre:

soros_cimke_067

A kicsi ellipszisről készítsünk ismét egy másolatot, majd az alább látható módon töltsük azt ki egy fehérből feketébe tartó Radial típusú színátmenettel:

soros_cimke_073
Ezt követően jelöljük ki a fekete-fehér és a mintát tartalmazó ellipszist, majd a Transparency panelen jobb oldalt nyissuk ki a legördülő menüt és innen válasszuk a Make Opacity Mask opciót:

soros_cimke_074
Létrehoztunk egy láthatósági maszkot. Ahol fekete a kitöltés, ott nem látszik a minta. A maszkra történő kattintás után a Gradient panelen és a Gradient Tool segítségével finomhangoljuk a mintha láthatóságát, amíg elégedettek nem leszünk:

soros_cimke_075
Végezetül jelöljünk ki minden elemet és Object > Group, vagy Ctrl + G kombinációval foglaljuk őket csoportba:

soros_cimke_077

2. lépés

Rectangle Tool (“m”) segítségével rajzoljunk a képen láthatóhoz hasonló téglalapot, amit egyúttel igazítsunk is az ellipszisekhez képest függőlegesen középre:

soros_cimke_081
Ha ezzel megvagyunk, akkor váltsunk Direct Selection Tool-ra (“a”) és jelöljük ki az alább látható pontokat és vigyük őket feljebb:

soros_cimke_084 soros_cimke_085
A bal oldalon hasonlóképpen járjunk el, csak ott lefelé vigyük a pontokat:

soros_cimke_086 soros_cimke_087

Ha ez megvan, akkor az Appearance panelen válasszuk az fx > Warp > Flag effektet. Az effekt típusa legyen Horizontal a Bend értékét pedig állítsuk -10 -re:

soros_cimke_088

Ezek után Object > Expand Appearance paranccsal képezzünk önálló alakzatot az effekttel ellátott téglalapból:

soros_cimke_089

Másoljuk le a hullámos csíkunkat, majd váltsunk Direct Selection Tool-ra:

soros_cimke_093

Jelöljük ki, majd Del-lel töröljük a képeken látható módon az alakzat függőleges éleit:

soros_cimke_094 soros_cimke_095

Az alábbi két görbénk marad meg:

soros_cimke_096

Az alsót töröljük nyugodtan, a megmaradt vonal körvonal színét állítsuk feketére, a kitöltőszínt pedig None-ra:

soros_cimke_099

Most pozicionáljuk a képen látható módon a fekete görbét. Állítsuk a vonal vastagságát 4 pt-re, majd válasszuk a Pen Tool-t (“p”):

soros_cimke_102

A Pen Tool-t használva az alábbi képeken látható helyen adjunk hozzá a görbéhez egy-egy pontot:

soros_cimke_103 soros_cimke_104

Ha ezzel megvagyunk, váltsunk vissza Direct Selection Tool-ra, jelöljük ki a középső pontot és töröljük Del-le:

soros_cimke_105 soros_cimke_106

Ezek után Width Tool (“Shift + W”) segítségével állítsuk be a bal oldali görbe vastagságát a képen láthatóhoz hasonlóan:

soros_cimke_110

A túloldalon tegyünk hasonlóképp. Ezekből a vonalakból szálkákra hasonlító motívumok lesznek majd. De ha nem magyarázzuk bele a szálka témát, akkor is mutatós :-):

soros_cimke_114

Készítsünk másolatot a jobb oldali vonalról, majd pozicionáljuk az alábbi módon és jelöljük ki mindkét objektumot:

soros_cimke_115

Ezt követően a már előzőleg ismertetett módon Object > Blend > Make, majd ezt követően Object > Blend > Blend Options. Használjuk a Specified Steps beállítást 10-es érték mellett:

soros_cimke_118

A bal oldalon ugyanezt a módszert alkalmazzuk ugyanezekkel a beállításokkal:

soros_cimke_121

Készítsünk most egy másolatot a csíkról, majd küldjük az eredeti mögé:

soros_cimke_125

Készítsünk most még egy másolatot, amit kissé húzzunk jobbra a képen látható módon:

soros_cimke_126

Küldjük ezt is hátrébb, de még az előzőleg létrehozott másolat elé:

soros_cimke_127

Direct Selection Tool segítségével jelöljük ki a – képen zöld – első számú másolatot, húzzuk lejjebb és a jobb alsó pontját pozicionáljuk a kissé jobbra tolt kettes számú másolat – a képen barna – jobb alsó pontjához:

soros_cimke_128

Valami hasonló módon kell kinézni a dolognak. Legyen kijelölve mindkét alakzat, majd nyomjuk meg a Pathfinder palettán a Minus Front funkciógombot:

soros_cimke_129

Ilyesmi eredményt kell kapnunk:

soros_cimke_130

Ugyanezzel a módszerrel készítünk egy csíkot a felső részhez is. Másolunk egyszer, majd még egyszer:

soros_cimke_131 soros_cimke_132

Egymáshoz képest elcsúsztatjuk itt is a két alakzatot, majd Direct Selection Tool-lal pozicionáljuk ezúttal a bal felső sarokpontot. Valahogy így:

soros_cimke_133

Jelöljük ki mindkét alakzatot, majd ismét Minus Front a Pathfinder palettáról:

soros_cimke_135

Illesszük valami hasonló módon a felülre létrehozott csíkot:

soros_cimke_136

A széles csíkunkat most töltsük ki ugyanazzal a színátmenettel, amivel a kék ellipszist is, majd a halszálkák körvonal színét állítsuk fehérre:

soros_cimke_137 soros_cimke_138

A felső keskeny csíkot töltsük ki fehérrel:

soros_cimke_141

Az alsó esetében is végezzük el a fehérrel kitöltést, majd másoljuk le a csíkot, húzzuk lejjebb és töltsük ki egy arany színnel:

soros_cimke_143

Felül ugyanígy készítsünk egy arany színű másolatot, majd a széles, kék csíkunk körvonalához állítsuk be ugyanazt a sötétkék színt, amit az ellipszisekhez. a körvonal vastagsága legyen 8pt:

soros_cimke_148

Ha ezzel megvagyunk, készítsünk egy másolatot a széles csíkról és helyezzük az előtérbe, majd a körvonal színét állítsuk át None-ra:

soros_cimke_150

Ezt követően a Swatches panelen nyissuk le ismét a Swatch Libraries menüt és innen válasszuk a Petterns > Basic Graphics > Basic Graphics_Textures könyvtárat:

soros_cimke_151

A minták közül válasszuk a Sand névre hallgató mintát. Tudom, hogy a minta homoknak van szánva, de az elrendezése nagyon hasonló a pikkelyekéhez, ezért használtam ezt. Persze nyugodtan lehet mást is, ami ide illik:

soros_cimke_152

Most a pikkely minta rétegtulajdonságát állítsuk át Multiply-ra:

soros_cimke_153

Ha ezzel megvagyunk, kattintsunk duplán a Scale Tool ikonjára, pipáljuk be kizárólag a Patterns checkboxot és a Scale értéket állítsuk 150%-ra:

soros_cimke_154

Megjegyzés: Látható, hogy a keskeny csíkok színeitfehér és világos arany árnyalatokról megváltoztattam világos arany, illetve sötét arany árnyalatokra, mert így jobb lett az összkép. Ezekről a momentumokról elmaradt a kép, de változtattam kicsit.

Térjünk most vissza kicsit az ellipszisekhez. Object > Ungroup-pal bontsuk a csoportot, majd a középső, kék ellipszisről készítsünk egy másolatot középre:

soros_cimke_161

Vegyük le ennek is a körvonalát, majd alkalmazzuk itt is a “Sand” nevű mintát:

soros_cimke_164

A rétegtulajdonságot ebben az esetben is állítsuk Multiply-ra az Appearance panelen:

soros_cimke_165

Ha mindez kész, akkor küldjük hátrébb egészen a középső ellipszis mögé, majd a Scale Tool használatával ez esetben is méretezzük át a textúrát. Most is 150%-os értéket adjunk meg:

soros_cimke_167

Ezzel készen is vagyunk a címke alapjával. A következő részben elkészítjük a pisztráng grafikát, illetve hozzáadjuk a “Pisztráng” feliratot, amit csinosítunk és megfelelően elhelyezünk majd.

Folyt. köv.