Share
Bună ziua artiști Photoshop, numele meu este Sergio Ordonez, geniul autoproclamat din spatele SOSFactory, pionier în design mascot corporativ pentru web. Mă puteți găsi și pe blogul meu SOSNewbie sau pe Deviantart la sergitosuanez.
Puteți găsi fișierul Photoshop PSD într-un director numit "PSD" care a apărut în fișierul ZIP pe care l-ați descărcat. Am inclus, de asemenea, proiectul original al acestui tutorial pentru cititorii dvs. spanioli. Poate doriți să le priviți pe scurt înainte de a începe. O previzualizare a imaginii finale este de mai jos. Puteți vedea și versiunea mai mare aici.
Cand am inceput sa proiectez mascote, ca orice noob bun, obisnuiau sa incep demersurile fara sa am nicio idee despre ceea ce am vrut sa spun. În acea perioadă am învățat că planificarea este diferența dintre un designer profesionist și altul care nu este. Din acest motiv și pentru că sunt plătit pentru fiecare cuvânt, îți voi stoarce mințile cu puțină teorie!
Personalitatea este cheia pentru un mascot bine conceput. Toate elementele de design (expresia facială, expresia corporală, simbolurile, îmbrăcămintea etc.) trebuie să încurajeze atitudinea personajului, care va depinde de valorile corporative ale clientului nostru. Să vedem câteva exemple de mai jos.
Vrem să transmitem atitudinea dorită într-o singură poziție memorabilă, curată, ușor de reținut și ușor de recunoscut. Pentru asta, trebuie să vedem linia de acțiune și silueta.
O eroare foarte obișnuită atunci când proiectăm un site web este să punem mascota fără a lua în considerare zona în care va fi folosită. Pentru a vă asigura că personajul va arăta cât mai mare posibil, trebuie să adaptați poziția în zonă, a se vedea exemplele de mai jos.
Linia de acțiune definește intenția de mișcare a personajului, direcția în care sunt îndreptate energiile sale. Puteți vedea câteva exemple de mai jos.
Stăpânul animației Raúl Garcia explică totul perfect în acest exemplu, este un exercițiu în care căutăm personajul care definește mai bine povestea: "Umplerea unei cești de ceai."
Prima încercare este vagă și nu definește concis concluzia. Nu există nicio linie de acțiune care să descrie mișcarea "ceaiul turnat în ceașcă" sau orice tensiune care ar putea sugera greutatea sau echilibrul. Această siluetă a desenului este amorfă și fără niciun interes.
Căutând acea siluetă clară, încearcă să-și despartă brațul care ține ceainicul din corp.
Cupa și ceainicul sunt acum clar separate de corp, dar silueta nu este încă precisă.
Silueta brațelor este mult mai clară. Ceainicul se înclină pentru a arăta acțiunea de "ceai turnat".
Poziția brațului care ține paharul a fost modificată pentru a face să pară mai naturală. Gâtul personajului a fost subliniat pentru a obține o siluetă generală mai bună.
Silueta se transformă într-o acțiune mai eficientă prin adăugarea unei plăci sub ceașcă și prin includerea unei poziții mai bune pentru mână.
Îndoind brațul care ține ceainicul și întinzându-și degetul, obținem o siluetă mai interesantă.
Înclinându-ne capul, obținem o siluetă mai eficientă, creăm un spațiu negativ care să conducă atenția supraveghetorului la gura ceaiului.
Observați că silueta numărul 4 este pe deplin descriptivă, nu avem nevoie de nimic mai mult pentru a înțelege acțiunea. Atunci când proiectăm mascote corporative, de obicei nu putem obține o siluetă perfectă. Chiar și așa, este ideal.
În acest caz, PSDTUTS mi-a dat libertatea totală de creație, așa că voi lăsa instinctul să mă ghideze și vom sări peste briefing.
După cunoașterea clientului, cel mai bun lucru pe care îl putem face este să căutați referințe, deoarece ideile originale ar putea să nu vină în minte la început. Căutarea referințelor ne poate ajuta să renunțăm la ideile evidente și să luăm în considerare unele alternative.
Acum considerații pentru a veni cu idei noi:
Exemplu:
AVERTISMENT 1: Inspirându-vă este permisă, plagiat nu este.
AVERTISMENT 2: Unii artiști și site-uri web oferă resurse gratuite. Ar trebui să arătați apreciere pentru acest lucru, afirmând unde ați obținut lucrarea de artă și luați în considerare donarea, donați cel puțin un dolar american.
Pen tablet sau mouse? Dacă încă nu dețineți un Tablet Pen, vă recomand să cumpărați un Wacom, sunt unele foarte accesibile, dar vă recomand să mergeți cu un Wacom. Dacă nu aveți una, puteți desena schița cu creion și hârtie tradițională, apoi utilizați mouse-ul și instrumentele de desen digitale ale Photoshop pentru a imprima cu cerneală, deși procesul va dura mult mai mult. În cazul colorării, este recomandat să utilizați comprimatul. Vedeți videoclipul de mai jos cu privire la acest proces.
Când mi-am cumpărat iubitul meu Wacom Cintiq 21UX (monitorul din dreapta), mi-am schimbat metoda. Acum fac întregul proces digital, de la prima schiță până la detaliile finale. Am desenat linii de mână pentru că mi se pare mai ușor și mai rapid decât utilizarea instrumentelor de desen vectorial.
Photoshop sau Illustrator? Este alegerea ta, eu personal găsesc instrumentele de desen vectorial Illustrator maddening. Mai degrabă folosesc Photoshop, trag linii de mână și folosesc doar instrumentele de desen pentru linii dificile. Lucrez la rezoluție înaltă, deci vectorizarea ulterioară este destul de ușoară. Pentru asta folosesc un plugin Illustration numit Silhouette.
Este foarte important să lucrați în rezoluție ridicată, folosesc o pânză de dimensiune A3 la 300 pixeli pe inch. Procesul de lucru este același la această dimensiune și există multe avantaje:
Aici puteți vedea câteva subtitrări ale personajului în diferite etape, de la schiță la linia finală. Din păcate, nu există trucuri, practică și practică mai mult:
Observați că grosimea liniei (greutatea liniei) este variabilă, aceasta este una dintre cele mai laborioase părți. Regula generală este: linii groase pentru contururi, linii mai subțiri pentru părțile interioare.
Astfel, observatorul poate distinge formele mult mai bine. Acest lucru este deosebit de util pentru ilustrații complexe în care putem juca cu grosimea liniei pentru a crea profunzime în ilustrație.
Când terminăm desenul și într-un singur strat, putem extrage liniile din fundal sau pentru a plasa stratul în modul multiplu și pentru a adăuga culoarea în straturi noi sub el. Prefer să le extrag, astfel încât să le pot colora cu ușurință mai târziu.
Observați că voi picta patina și caracterul separat, așa că atunci când terminăm, vom avea două versiuni: cu și fără patina.
Pentru a extrage liniile, procedați în felul următor:
Dacă sunteți un pic leneș, puteți descărca această acțiune Photoshop pentru a extrage liniile desenului. În acest fel nu va trebui să o faceți manual.
Am scris deja diverse tutoriale cu privire la modul de colorare în Photoshop. Nu vreau să te plictisesc, așa că voi încerca ceva diferit:
Acestea sunt cele trei culori pe care le-am ales pentru a picta personajul. Așa cum am spus deja, vom colora personajul cu comenzile Photoshop mai târziu, deci alegerea culorilor nu este foarte importantă. Amintiți-vă că aveți nevoie de o culoare întunecată pentru umbre, la mijloc pentru lumină generală și strălucitoare pentru contururi și lumini mai intense.
Peria de istorie este un instrument puternic pe care îl folosesc foarte des, deoarece putem bloc părți ale designului nostru care sunt deja terminate și continuă să lucreze la restul, fără a le strica. Vă voi da un exemplu de bază, arătat mai jos.
Cu puțină practică, veți fi conștienți de posibilitățile nelimitate ale acestui instrument. După cum puteți vedea în exemplul respectiv, îl putem folosi ca radieră (fără să ne fie frică să ștergem piesele finite); putem face același lucru pentru a picta în loc să ștergem; dacă luăm diferite instantanee ale aceluiași design, putem obține versiuni intermediare; putem reduce opacitatea pensulei și putem îmbina diferite versiuni ale aceluiași design; putem chiar să jucăm cu tonaliile ... Nu vă fie frică să experimentați.
AVERTIZARE: peria de istorie funcționează pe straturi, stratul pe care dorim să îl modificăm trebuie să existe în ambele puncte ale istoriei. Dacă fuzionăm sau ștergem stratul în cauză, peria de istorie nu va funcționa.
Puteți vizita acest tutorial video despre cum să colorați cu Photoshop pentru a viziona peria de istorie în acțiune.
Sub stratul de linie, creăm un strat nou și îl denumim "Culori plane" și apoi umplem desenul cu culori care trebuie să difere destul de mult unul de celălalt pentru a ușura selecțiile ulterioare. Puteți să o faceți cu toate instrumentele pe care le doriți, să aveți grijă să nu lăsați niciun gol.
Vom folosi doar acest strat pentru a face selecții, de exemplu: Dacă vrem să picurăm părul personajului nostru, alegem instrumentul Magic Wand și faceți clic pe păr. Astfel obținem o selecție rapidă și precisă.
Dezactivați stratul "Flat Colors" și îl plasăm oriunde nu ne deranjează. Putem obține o selecție a conturului complet al personajului prin apăsarea comenzii pe această pictogramă a stratului.
Apoi vom crea un strat nou, îl numim "Bază de culoare" și îl umplem cu o culoare plată. În acest caz, am ales culoarea # e37750, pentru că este o culoare confortabilă și neutră pentru mine.
Creați un nou strat deasupra "Baza de culori" și îl denumim "Umbre". În acest strat, vom picta umbrele cu aceeași culoare de bază, dar vom pune stratul în modul Multiply temporar.
Am ales o sursă de lumină care vine din partea de sus-stânga. Știind cum să fii coerent cu volumul punctelor de iluminare este cea mai dificilă parte și nu există nici un alt truc decât să practici ... poți folosi o jucărie articulată într-o cameră întunecată cu un punct de iluminare puternic și folosește-o drept referință.
Observați că umbrele nu trebuie să ocupe întregul desen, trebuie să lăsăm loc pentru iluminare. Folosesc câteva subtitrări pentru a vedea modul în care pictez, de obicei, umbrele.
Când am pictat deja umbrele, noi creăm un strat nou de mai jos și îl numim "Soft Light".
Utilizăm instrumentul Gradient pentru a crea o iluminare moale care va fi baza pentru iluminarea ulterioară.
Aici puteți vedea configurația pe care o folosesc pentru a face declivitățile:
Creăm un nou strat chiar sub "linii" și îl numim "Lumină tare". Procesul este în esență același cu cel folosit pentru umbre, dar inversat. În loc să picteze zonele profunde, vopsește proiectele. Eu folosesc o culoare #ffeeae.
Creez un nou strat sub umbre și îl numesc "Reflecții". Îmi place să subliniez volumele adăugând reflecții la contururi, contururile și volumele sunt mult mai clare în acest fel. Amintiți-vă că am șters contururile din Pasul Umbre, acum trebuie doar să puneți un strat sub umbre și să pictați cu grijă.
Aici vine distracția! Am terminat deja iluminatul, toate volumele sunt definite și avem diferite nivele de lumină (umbre, tonuri medii și tonuri luminoase) separat. Acum, jucând cu Command + U în Photoshop, vom colora rapid caracterul.
Observați că culorile pe care le-am ales sunt toate din același interval, dar ușor diferite, pentru a obține o gamă largă de cromatici. Putem merge mai departe și să folosim diferite culori, chiar și în același strat. Aici am exagerat un pic, astfel încât să puteți vedea posibilitățile:
Mai jos puteți vedea cum am colorat fiecare parte a personajului. Încearcă-ți propriile combinații de culori până vei obține unul care îți place.
Am terminat deja baza de culori, acum vom juca cu straturi în diferite modalitățile de fuziune (Paleta de straturi, meniul din stânga) pentru a conferi mai multă adâncime culorii. Toate straturile trebuie să fie deasupra stratului "Lineart".
Când terminăm, putem îmbina toate straturile (faceți o copie de securitate înainte de asta) și adăugați mai multe efecte. Putem folosi instrumentul Dodge pentru a lumina unele zone sau instrumentul Burn pentru a le întuneca. Putem juca cu balansul de culoare (Command + B) sau cu toate nivelele (Command + L). Cu puțină imaginație puteți obține rezultate remarcabile.
După cum am spus la început, o să pictez separat patina, așa că vom avea două versiuni. Am folosit aceeași tehnică pe care am făcut-o cu personajul. Designul caracterului final este de mai jos.
Și în cele din urmă am terminat. Arată bine, nu crezi?
Ca profesioniști buni suntem, trebuie să fim atenți la prezentare. Cu câteva logouri, câteva imagini preluate de la prietenii noștri de la Gomedia și puțină imaginație, putem face o prezentare ca cea prezentată mai jos. Puteți lua aici versiunea cu dimensiunea monitorului.
Uite! A fost o idee bună să facem patina separat, acum avem două versiuni diferite, cu aproape același efort. Puteți lua aici versiunea cu dimensiunea monitorului.
Aceasta este versiunea de culoare limitată, dar putem juca doar cu linii prea (din fericire le-am făcut destul de gros). Puteți lua aici versiunea cu dimensiunea monitorului.
Nu vă fie teamă, nu voi explica cum să faceți aceste imagini de fundal. Am acoperit deja ceva teren pentru acest tutorial, acum pot pleca fericit!
Ei bine, prietenii mei, doar un singur lucru a rămas de făcut. Vreau să fac o cerere ... către acele "mari" companii de publicare, care își obțin mulțumirile materiale pentru exploatare, care își umple buzunarele cu bani fără a împărți un cent (părăsesc artiștii FAME pentru noi); ei ar trebui să urmeze modelul PSDTUTS, întotdeauna atât de generos și care să se îngrijească atât de artist, cât și de cititor, demonstrând că rentabilitatea unei afaceri nu depinde de materialele cu sursă de cost redus, ci de calitatea ei și de caracterul inventiv când vine vorba să-l vândă.
Mulțumită lui Eden pentru crearea unei resurse atât de mari ca PSDTUTS, în special lui Sean pentru flexibilitatea sa. Mulțumită prietenei mele Anita, pentru că m-ai ajutat cu totul altruist și pentru traducerea acestui articol (am inclus și versiunea originală în limba spaniolă în descărcare). Și, în sfârșit, datorită cititorilor PSDTUTS, sper că ați citit până la sfârșit, că ați învățat multe lucruri noi sau cel puțin că v-ați bucurat de acest tutorial.
Desigur, dacă aveți întrebări, voi răspunde cu plăcere. Simțiți-vă liber să comenteze postul de știri pe acest site. Salutari
Accentsconagua