Share
De câteva ori, în fiecare lună, reluăm câteva dintre postările preferate ale cititorului nostru de-a lungul istoriei Vectortuts +. Acest tutorial de Scott Jackson a fost publicat pentru prima data pe 8 mai 2009.
În acest tutorial, voi da o imagine de ansamblu a modului în care a dezvoltat un personaj de la prima scurtă până la mascota finală a site-ului și apoi pentru a continua să creeze mai multe poziții pentru diferite părți ale site-ului.
Acest personaj a fost creat inițial pentru un site Envato care nu a decolat și operele de artă nu au fost folosite, așa că am redat acest lucru un pic pentru a deveni un personaj Vectortuts +. Să examinăm procesul de a face acest mascot pe site și să învățăm multe sfaturi de-a lungul drumului!
Caracterul și designul mascotului nu sunt nimic nou și au fost în jur de mult timp, dar odată cu apariția internetului a fost oarecum o renaștere. Pe internet ne confruntăm cu un baraj zilnic de informații, date și imagini. Utilizarea unei mascote de site poate fi o modalitate eficientă de a reduce această supraîncărcare a informațiilor și de a se conecta cu spectatorul la un nivel emoțional. Mascotele și personajele pot fi folosite ca parte a unui logo sau în mod independent, dar avantajul pe care îl au asupra unei sigle în sine este acela că acestea au caracter și o personalitate pe cont propriu.
Am folosit Adobe Illustrator pentru a crea mascota folosind cele mai de bază instrumente și funcții, și din acest motiv mă voi concentra asupra arătării dezvoltării și fluxului de lucru implicat. Sperăm că acest lucru vă va oferi o perspectivă asupra creării personajului și vă va ajuta să vă creați mascotele proprii.
Voi da, de asemenea, o prezentare a unora dintre cele mai bune site-uri de design de caractere de pe web și aruncarea unor sfaturi pe măsură ce mergem împreună.
Pentru mai multă inspirație și ca un bonus, oamenii buni de la Vectortuts + vă oferă posibilitatea de a descărca fișierele originale pentru uzul dvs. propriu, care este un super freebie. Consultați fișierul de descărcare pentru mai multe informații despre utilizare. Caracterul este disponibil atât în formatele AI cât și EPS.
Deși acesta este un studiu fictiv, acesta a fost inițial bazat pe un proiect actual Envato. Cu toate acestea, pentru scopurile acestui tutorial, am de gând să cred că această mascotă va fi pentru site-ul Vectortuts +, ceea ce ne dă un obiectiv de a folosi ca exemplu.
Mascota va fi "The Tuts Guy" și va fi reprezentantul cititorului Vectortuts +, precum și al scriitorilor de tutoriale. O dispoziție pozitivă și prietenoasă pentru toate grupele de vârstă. Să apară profesional, dar totuși ocazional. De asemenea, trebuie să se încadreze în schema de culori a site-ului, pentru a putea încorpora cu ușurință caracterul în aspectul paginii.
Prin natura lor, mascotele sunt destinate utilizării pe web. Nu uitați să vă setați fișierul în RGB.
Așa cum am menționat în Brief, caracterul trebuie să fie capabil să se încadreze în schema de culori a site-ului. Cu un mascot uman, acest lucru se poate face prin folosirea îmbrăcămintei și a părului pentru a se potrivi sau accentua site-ul. Cu un animal sau o creație fictivă aveți mult mai multă flexibilitate.
Acordați o atenție deosebită publicului țintă, imaginii și site-ului. Să ne uităm și la câteva sfaturi.
Este caracterul să fie integrat alături de logo sau antet? Dacă este așa, panza este, de obicei, o bandă largă și folosirea unei figuri înalte înalte poate duce la căutarea pierdută și diminuarea caracteristicilor faciale. Deci, ce se poate face în legătură cu acest lucru?
Faceți înălțimea caracterelor cât mai aproape posibil de lățimea caracterelor.
Prin trunchierea părții superioare a corpului și prin concentrarea asupra celor mai importante caracteristici, puteți economisi spațiu și crește impactul mascotului. De asemenea, puteți vedea modul în care caracterul mai condensat se îmbină mai bine cu formatul antetului.
Poate fi foarte util ca designerul să pună site-ul împreună, dacă îi oferiți o mascotă într-o poziție plană, pe o altitudine, deoarece acest lucru poate face mult mai ușor integrarea în aspectul site-ului. Alternativ, adâncimea câmpului poate crea o imagine mai interesantă.
Eu nu am nici o regulă tare și rapidă atunci când vine vorba de greutăți de linie sau umed pentru a utiliza munca de linie, la toate. În timp ce nu folosiți deloc nicio lucrare de linie, poate să vă simțiți la lumina mascotei, ea se poate pierde și în fundal, mai ales dacă este ocupată. Folosirea liniei de lucru și / sau o contur mai greu poate oferi imaginii mai multă prezență și definiție.
Există o zicală că ochii sunt fereastra spre suflet. Cu designul de caractere ochii sunt primul lucru cu care ne conectam. Ne conectăm atunci când vizionăm pentru prima dată un personaj în același mod ca atunci când ne întâlnim pentru prima dată pe cineva, deci este important să luați în considerare acest lucru în designul dvs. Ochii pot comunica o mulțime de emoții foarte rapid și pot adăuga viață unui personaj.
Este ușor să credeți că cu cât sunt mai complexe redarea ochilor, cu atât mai bine, dar, de fapt, atunci când este făcută în mod corespunzător, câteva puncte pot face acest lucru la fel de bine.
Deși am o tabletă Wacom, foarte rar o folosesc pentru a schița idei. Opresc în favoarea creionului, a hârtiei și a capacității de a face sens dintr-o grămadă de idei răspândite în jurul zonei mele de lucru.
În acest stadiu, încerc să obțin ceva și totul pe hârtie înainte de a trece prin el pentru a vedea ce funcționează pentru mine. Apoi, rafinați dururile înainte de a utiliza un pad layout pentru rudele finale. Prefer preferințele layout-ului pentru a urmări hârtia, deoarece acestea sunt mult mai ieftine și munca creionului este mai puțin predispusă la împrăștiere.
Foarte rar trimit dresuri groaznice unui client. Mă duc, de obicei, la extra mile și să le lucrez în vectori, mai ales dacă trebuie să existe mai multe poziții de același caracter, astfel încât să aibă o idee clară despre rezultatul final. Acest lucru a condus la greu folosind un scanner în favoarea de a lua un snap de cerneală dur cu un aparat de fotografiat digital, sau chiar camera de pe telefonul meu mobil, care este rapid și ușor de importat prin bluetooth.
Aici am lucrat mai multe variante pentru ca clientul să se uite.
Am de gând să-l iau că am primit feedback și vom merge la caracterul No.4, dar simt că ar funcționa mai bine cu o barbă de capră eliminată.
Aici este caracterul principal (minus goatee) pentru a apărea pe pagina de pornire a site-ului web, dar acum trebuie să dezvolt personajele pentru restul site-ului.
Toate acestea vor avea o plasare foarte asemănătoare cu personajul principal, astfel încât există posibilitatea de a reutiliza elementele personajului original. Acest lucru nu numai că vă va reduce dramatic volumul de muncă, ci și un sentiment de continuitate pentru site. Având părțile separate ale personajului pe straturi individuale este un mare ajutor aici, deoarece mișcarea brațelor și înclinarea capului poate transforma poziția.
Nu trebuie să existe niciun fundal pentru mascote care să sugereze scopul lor, dar ajustarea posturii și adăugarea unor elemente de recuzită simple pot comunica acest lucru cu spectatorul.
Folosind schița originală pentru personajul principal împreună cu un pad layout îmi dă un pic de cap de start atunci când vine vorba de celelalte poziții. În ceea ce privește restul pozițiilor, este cazul de a le prezenta clientului și de a face modificări după cum este necesar până când acestea sunt fericite cu ei.
Mai jos sunt caracterele terminate. Tot ce trebuie să faceți este să le furnizați clientului în forma dorită. În acest caz, puteți descărca fișierele originale pentru uz personal aici.
Iată o prezentare a câtorva dintre site-urile mele de design preferat pentru inspirație:
Mojizu.com - Moji este cuvântul japonez pentru caracter și despre asta este vorba despre acest site. Este o comunitate de designeri de caractere în care vă puteți înscrie pentru un profil și puteți trimite propriul Mojis. Un război săptămânal Moji le împinge unul împotriva celuilalt într-un concurs pentru a găsi Championul Moji printr-o serie de runde.
Ilikecharacters.com - un site destul de nou dedicat prezentării celui mai bun design de caractere creat de artistul Steve Rack.
characterhunter - Un blog după o căutare continuă a designului de personaje pe străzile din Tokyo. Unul bun, dacă, ca mine, vă place kawaii (drăguț). Scrisă în limba franceză despre designul japonez, acest site arată cum designul mascotului poate traversa diferențele lingvistice și culturale.
Smashing Magazine 40 Tutoriale ilustrare de caractere - un monstru rotund de 40 de caractere de design de caractere.
vinylpulse - Design de caractere care a trecut peste lumea 3D.
patchtogether - Dacă v-ați imaginat vreodată că lucrarea dvs. a fost făcută în vinil, acest lucru ar putea fi locul potrivit pentru dumneavoastră.
Abonați-vă la Vectortuts + RSS Feed pentru a rămâne la curent cu cele mai recente tutoriale vectoriale și articole.
Accentsconagua