Logotipul Design Tutorials. Mod de realizare.

Când a apărut ideea creării unui logotip pentru DesignTutorials mă gândeam să fac ceva atât simplu cât şi comun dar şi distinct. Ştiam că vreau să fie un logotip pătrat, cu colţuri rotinjite şi în mod obligatoriu trebuie să fie litera “D” mare, iar pe lângă această să existe şi un simbol care să semnifice ideea de ajutor sau tutorial sau ambele împreună.
Pornind de la modul în care arată alte logotipuri, am decis să utilizez simbolul “+” (plus) pentru a marca simbolica ajutorului dar şi ideea de “mai mult decât o singură idee promovată”. Logotipul a fost creat cu ajutorul programelor Adobe InDesign şi Adobe Illustrator.
Am pornit în InDesign pentru că la moment, pur şi simplu, lucram în acel program, şi întrucât InDesign deasemenea lucrează cu vectori, n-am văzut o problemă în a genera logotipul acolo.
În cele ce urmează voi explica modul în care a fost creat logotipul, cu ajutorul programului Adobe Illustrator. Funcţiile utilizate sunt, de fapt, echivalente cu cele din InDesign.

1. Deschidem o imagine nouă (File > New). 500px*500px @ 72 PPI, RGB color mode.

2. Aleg instrumentul “Rounded Rectangle Tool” (Ţineţi apăsat pe icon, ca să apară meniul de unde puteţi alege instrumentul necesar). Apoi faceţi click pe pagină. Va apărea o casetă unde puteţi seta dimensiunile figurii noi pe care să o plasaţi în pagină. Eu am ales 490px*490px. Corner radius: 15 px.

Dacă figura apărută nu este centrată, utilizaţi următoarele setări ca să o centraţi, să-i modificaţi aspectul şi poziţia.

Aceste setări se găsesc în partea superioară a programului, panoul de control general.
Prima setare este punctul de referinţă (Reference Point) care trebuie setat la centrul imaginii, aşa cum e prezentat sus.
Următoarele două casete arată poziţia punctului de referinţă pe imaginea noastră (întrucât am pornit cu 500*500, centrul imaginii va fi la 250*250: X*Y). Aceasta a fost şi cauza pentru care punctul de referinţă a fost stabilit la centrul imaginii.
Setarea de mai departe arată dimensiunile figurii, care este aşa cum am setat-o iniţial.

Pasul 3. Colorăm interiorul figurii cu un gradient radial de la negru la un gri întunecat. (RGB: 0/0/0 >>> RGB: 30/30/30). Având selectat instrumentul Gradient Tool pe imagine apare slider-ul cu ajutorul căruia alegem poziţia şi direcţia gradientului nostru. Eu modific poziţia sliderului la baza chenarului, apoi măresc raza pe care o acoperă gradientul, în aşa fel încât raza să acopere întreaga figură.


Pasul 4. Am stabilit baza imaginii mele, acum aleg conţinutul imaginii. După cum am spus mai sus, voi avea litera “D” mare. Pentru asta am ales fontul Helvetica Neue, stilul de literă Bold (75). Pe care, după ce am scris-o, am transformat-o în curbe (Ctrl+Shift+O). O redimensionez pentru a o vedea mai mare pe ecran. Având imaginea în curbe, o izolez (dublu click pe dânsa, sau click dreapta > Isolate Selected Group).

Cu ajutorul la Direct selection tool (cursorul alb) selectez punctele care definesc interiorul literei D. Le omit din literă (CTRL+X), apoi dublu click pe spaţiul gol din imaginea mea (imaginea nu va mai fi izolată), şi CTRL+V.

Pasul 5. Selectez figura nou apărută şi o colorez în roşu. RGB (200/0/0). Şi o plasez în centrul figurii mai mari, pentru a reface D-ul aşa cum era la început, doar cu interiorul roşu.

Pasul 6. Ceea ce mai vreau să adaug la imaginea mea este “plusul” despre care vorbeam la început, şi să mai adaug ceva text care să se citească, împreună cu litera D, “design”. Decizia este să scriu “SIGN” şi să-l alipesc literei D.

Cu instrumentul “Type tool” scriu textul “sign”, cu minuscule. (Font: Helvetica Neue, stil: 75 Bold). Ceea ce observ este că litera “g” are descendent care iese de pe baseline (“codiţa literei g”), iar punctul literei “i” trece de x height. Soluţia a fost să micşorez din corpul literei “i”, iar litera “g” să o scriu ca majusculă mică (small caps).
Mai întâi am modificat litera “g”. Am selectat-o, apoi din meniul casetei Character aleg “Small caps”.

După ce am modificat litera “g”, transform întregul cuvânt în vectori (aleg Selection Tool (cursorul negru), apoi Ctrl+Shift+O). Acum am pregătit terenul pentru a modifica litera “i”, şi anume pentru a reduce corpul literei până la înălţimea celorlalte caractere. Primul lucru pe care îl fac este să degrupez vectorii, pentru editare separată (Ctrl+Shift+G sau Click dreapta > Ungroup).

Cu ajutorul la Direct Selection Tool (cursorul alb) selectez toate anchor points din care e creat punctul de pe “i” şi primele două anchor points din corpul literei “i”. Pe care le dau mai jos cu ajutorul săgeţilor de la tastatură, până când linia superioară a punctului de pe “i” ajunge la acelaşi nivel cu înălţimea celorlalte litere.

După ce am făcut aceasta, selectez înapoi toate literele şi le regrupez (Click dreapta > Group, sau Ctrl+G). A rămas să rotesc grupul la 90 de grade (Click dreapta > Transform > Rotate / 90 degrees).

Pasul 7. Ceea ce urmează să fac este să alipesc literele “sign” literei “D”, şi să le unesc într-un singur corp. În primul rând le fac să aibă aceeaşi înălţime (selectaţi grupul de litere, plasaţi-l la baza literei “D”, ţineţi apăsat Shift, apăsaţi şi trageţi de un colţ al grupului de litere până înălţimea acestuia este la fel ca înălţimea literei “D”).

Acum, apropiaţi grupul de litere de “D”. Atenţie! Litera D trebuie să fie din două corpuri separate, unul negru şi unul roşu, aşa cum a fost creat la început, fără ca aceste două corpuri să fie grupate!!!
Desenaţi nişte chenare mici, de culoare neagră, cu stroke (linie) invizibil, cu care să acoperiţi golurile dintre literele “sign” şi “D”. Selectaţi doar corpurile de culoare neagră.

Din meniul “Window” activaţi panoul “Pathfinder” (Ctrl+Shift+F9). Şi alegeţi “Unite” din panoul de control nou apărut.

Imaginea odată creată (unită) se va plasa deasupra figurii de culoare roşie. Pentru a pune figura neagră dedesubt celei roşii, o mutăm pe primul nivel al imagini (selectăm, apoi Ctrl+Shift+[ ). Imaginea se plasează dedesubt, iar figura roşie deasupra.

Pasul 8. Ceea ce urmează să fac este stilizarea figurilor create anterior. Selectăm figura roşie şi îi atribuim efectul “Inner Glow” (Effect > Stylize > Inner Glow). Atenţie la setările pe care le puneţi, pentru că ele rămân neschimbate, în cazul redimensionării ulterioare a imaginii. Setările mele sunt: Mode: Normal Color: RGB 0/0/0 Opacity: 50 Blur: 20px Alignment: Edge. Pentru a vedea modificările în timp real, puneţi bifă în dreptul la “Preview”.

Următoarea etapă a acestui pas este să stilizez figura de culoare neagră. Ceea ce vreau să fac este să atribui un gradient linear vertical de la alb la un gri deschis. Selectez figura, deschid panoul Gradient (Window > Gradient, sau Ctrl+F9), şi fac click pe gradientul din panou. Setările sunt următoarele:

Gradient: RGB 220/220/220 >>> RGB 255/255/255 Angle: 90 Restul setărilor sunt standard.

Selectez întreg grupul de figuri (Dsign gradient + figura roşie) şi le plasez în centrul chenarului negru pe care l-am creat la începutul lecţiei.

Pasul 9. Până la finalul lucrului a mai rămas puţin: “+” în interiorul literei D, şi efectul de oglindă de pe icon.

“Plusul” îl scriu ca pe orice caracter, cu ajutorul Type Tool. Font: Helvetica Neue, stil: 85 Heavy, culoare: alb (RGB 255/255/255). Transform totul în vectori (Ctrl+Shift+O). Plasez “plusul” în centrul figurii roşii, şi-l redimensionez ca să aibă suficient spaţiu în jurul lui.

Stilizăm “plusul” prin adăugarea unei umbre uşoare. Effect > Stylize > Drop shadow, cu următoarele setări:

Mode: Normal Opacity: 50 X/Y Offset: 0 px Blur: 5 px Color: Black (RGB 0/0/0). Ţineţi cont de faptul că setările rămân la fel chiar după redimensionare. De aceea, ajustaţi-vă propriile setări în dependenţă de imaginea pe care o aveţi.

Pasul 10. A rămas ultimul element: efectul de oglindă. Ca să nu vă chinuiţi să desenaţi încă o dată un chenar deasupra imaginii voastre, cel mai simplu este să porniţi “sticla” din chenarul negru desenat la început. Alegeţi chenarul negru, ţineţi apăsat pe ALT apoi apăsaţi pe săgeata spre dreapta de la tastatură, o singură dată (chenarul se va dubla, şi se va muta în dreapta cu un pixel). Luaţi degetul de pe ALT şi apăsaţi pe săgeata spre stânga, pentru a readuce chenarul la poziţia lui iniţială. Apoi, cu figura selectată, apăsaţi Ctrl+Shift+]. Chenarul se va plasa pe nivelul de deasupra tuturor figurilor desenate anterior.

Următoarea mişcare este să modificăm aspectul “sticlei”. Cu ajutorul peniţei (Pen Tool) ştergem câteva puncte din partea de jos şi cea lateral-dreapta a imaginii noastre:

După ce am renunţat la cele patru puncte marcate, alegem Direct Selection Tool (cursorul alb), şi, ţinând apăsat pe ALT modificăm amplasarea mânerelor punctelor “sticlei”.

Scopul butonului ALT este de a frânge linia de tensiune care se ţine pe punctul modificat de noi. Facem aceeaşi operaţie de mai su cu ambele anchor points.

După care modificăm poziţia (doar pe orizontală) punctului din colţul din dreapta-sus mai aproape de centrul figurii (selectăm punctul cu ajutorul Direct Selection Tool după care apăsăm de la tastatură săgeata spre stânga, până punctul ajunge deasupra centrului figurii.)

În caz de necesitate, ajustăm linia curbă cu ajutorul mânerelor punctelor noastre, astfel ca aceasta să meargă lin în jos.
A mai rămas puţin pentru a finisa imaginea: culoarea “sticlei” + transparenţa acesteia.
După cum ştim, “sticla” noastră este creată din backgroundul cu gradient, lucru pe care noi nu l-am modificat în “sticlă”, de aceea alegem instrumentul Gradient Tool şi deschidem panoul Gradient.

Modificăm culoarea gradientului: RGB 230/230/230 >>> RGB 255/255/255
Modificăm amplasarea sursei gradientului între literele “i” şi “g”, aproape de marginea figurii de culoare roşie.


Selectăm al doilea cursor de gradient şi-i stabilim Opacity: 0 (vezi mai sus)

—————————

Practic asta a fost totul. Nu uitaţi că un tutorial pe lângă faptul că vă învaţă cum să faceţi un efect anume, vă mai arată şi modul în care puteţi opera cu anumite instrumente şi utilităţi ale programului în care lucraţi.

Sper că aţi învăţat ceva util din această lecţie!

680FansLike
574FollowersFollow
84FollowersFollow
542FollowersFollow
1,470SubscribersSubscribe

Mai vezi și astea

Gradient Mesh tool // Adobe Illustrator

Neaţa! După o lungă pauză de creaţie şi tutoriale, iată că revin la activitatea de...

3D în Adobe Illustrator