Cum de a ilustra o pictogramă Brain pentru OSX și Vista

În acest tutorial, vă voi arăta cum să creați o ilustrare a creierului într-un stil de desen animat, apoi cum să convertiți imaginea ca o pictogramă pentru OSX și Vista. Voi discuta câteva puncte despre detalierea pentru proiectarea icoanelor. Să începem!

Imagine finală a imaginii

Mai jos este imaginea finală la care vom lucra. În acest tutorial, vom crea, de asemenea, o icoană din acest. Doriți acces la fișierele vectoriale Source și copiile descărcate ale fiecărui tutorial, inclusiv acesta? Alăturați-vă Vector Plus pentru doar 9 $ pe lună.

Detalii tutoriale

  • Program: Illustrator CS4, Composer de icoane - Independent (OSX)
  • Dificultate: Intermediar
  • Durata estimată de finalizare: 2-3 ore

Secțiunea 1: Ilustrație

Etapa 1 Cercetare

Adunați unele materiale de referință și imagini / ilustrații ale creierului. Cărțile medicale sunt o sursă perfectă. Creierul este la fel de complex pe plan extern, pe cât este intern. Principalele lucruri pe care trebuie să le țineți cont sunt că creierul este o formă ovală generală care formează materia cenușie, atunci există cerebelul și tulpina creierului. Privind din perspectiva din față / de sus, creierul este bipolar și constă din două emisfere.

Pasul 2 Desen

Îmi place să schițez o formă de bază pe hârtie sau digital, mai întâi, înainte să o duc la Illustrator. Acest lucru este valabil mai ales cu o formă organică, deoarece nu sunteți sigur cum va arăta, astfel încât va fi util să schițați elementele de bază înainte de a vă deplasa pe vectori.

Când schițezi aspectul creierului, ia în considerare următoarele:

    Punct de vedere - Din ce parte îți vei face creierul? O vedere laterală tinde să nu fie atât de dimensională, prin urmare, vă sugerez să o poziționați puțin dinspre lateral pentru a integra linia care separă cele două emisfere.

    Modula - Un creier arată aproape ca o rețea mare de țevi neuniforme care au fost îndoite împreună pe o minge de spaghete. Aceste tevi au o curbură unică, dar puteți reutiliza elemente precum S și M în formă de zig-zag, T intersecții și diverse alte elemente din creier; amintiți-vă doar să păstrați forma generală și să-i extindeți în locuri.

    Exagera - Nu mergem pentru o redare realistă realistă din punct de vedere anatomic. Utilizați curbele pentru a accentua anumite zone.

    Simplifica - Nu trebuie sa faci atâtea ciocniri ca un creier real. Din nou, nu facem o renderare realistă, pentru a evita detaliile inutile. Acest lucru se datorează faptului că atunci când va veni la conversia imaginii într-o pictogramă, unele detalii pot fi pierdute sau rupte atunci când sunt văzute la rezoluții mai mici. Am omorât chiar cerebelul și creierul pentru a simplifica imaginea.

    Consistent - Păstrați-vă arta consistentă. Grosimea liniei dictează proximitatea și greutatea curbelor între ele, deci țineți minte acest lucru.

Poate fi un pas inutil pentru unii, dar, de obicei, merg peste o schita creion în Flash pentru a produce o linie de artă curată și apoi lucrați de la cea din Illustrator, dar vă simțiți liber să utilizați fluxul de lucru preferat.

Pasul 3 - Vectorizarea

Creați o pânză de 512 pixeli cu 512 de pixeli în Illustrator. Importați schița pe pânză și utilizând Instrumentul Pen, începeți să creați linia de artă. Dacă sunteți confortabil cu instrumentul Brush Illustrator sau cu o tabletă, este posibil să îl utilizați în schimb, dar să îl convertiți în contururi ulterioare. Asigurați-vă că intersectează curbură cu direcția în minte și creează pliuri și suprapuneri corespunzătoare.

Păstrați pliurile extreme cu capete ascuțite, iar pentru pliurile mai moi, creați mai multe capete rotunjite sau chiar adăugați pliuri mici pentru a susține structura vizuală. Mergeți toate formele într-o singură umplere folosind instrumentul pathfinder Unite și redenumiți stratul la "linework".

Utilizați Bucket Bool pentru a umple cu culori, apoi Extrude.

Pasul 4 - Colorarea

Odată ce ați sortat toate liniile de artă, utilizați Instrumentul Live Bucket Bucket pentru a crea umpluturile. Selectați linia de artă și folosiți o culoare puțin desaturată roz pentru bază, nu-l face gri sau prea roz, dar este până la tine.

Deoarece instrumentul pentru cupă este o caracteristică Live Paint, vectorii vor deveni un obiect în cadrul unui Live Paint Group. Pentru a rezolva acest lucru și pentru a le separa, mergeți la Object> Live Paint> Expand. Aceasta va transforma Live Paint Group într-un grup obișnuit de umpleri din paleta de straturi. Apoi continuați și separați culorile de culoare roz pe alt strat și redenumiți-le "baza".

Pasul 5 - Umbrirea

Trebuie să adăugăm câteva detalii suplimentare pentru a face creierul să arate lucios și mai tridimensional prin adăugarea de evidențe și umbre. Decideți în ce direcție vine lumina. În cazul meu, este standard în partea de sus-stânga. Creați un nou strat denumit "evidențiază". Acum, folosind Instrumentul Pen, începeți să realizați forme foarte rotunjite cu fața spre lumina asumată, folosind o culoare ușor mai strălucitoare decât baza dvs..

Rețineți că nu ar trebui să fie realistă, ci să dați un sentiment de luciu, adăugând o anumită specularitate. Păstrați-l simplu și nu adăugați prea mult, deoarece culorile se amestecau la rezoluții mai mici.

În timp ce evidențierile sunt rotunjite și sunt destul de independente, umbrele vor fi adiacente marginilor, vizavi de cele mai importante. Pe un alt strat numit "umbre", folosind instrumentul stiloului și o culoare mai închisă de la bază, creați niște umbre. Asigurați-vă că le adăugați în locuri în care creierul se suprapune și umbre arunca unul pe celălalt.

Duplicați linia și straturile de bază pe o nouă denumită "gradient", pe care o vom folosi pentru a adăuga o altă caracteristică de umbrire a creierului. Utilizați din nou instrumentul Pathfinder Unite pentru a îmbina linia de artă și rozul de bază împreună într-o singură umplere. Apoi, faceți o umplere cu gradient, folosind o nuanță de roz, altele decât cele deja folosite, și o culoare moale. Am folosit o nuanță de roz, cu un pic de portocaliu în ea. Setați stratul peste orice altceva și setați modul de amestecare la "Culoare".

Ultimul pas este crearea unei umbre sub creier, strict pentru utilizarea icoanelor. Duplicați stratul de bază și puneți-l sub el. Umpleți formele cu negru și utilizați Efecte> Efecte Photoshop> Blur> Gaussian Blur cu o valoare de 10px pentru a estompa umbra. Asigurați-vă că ați redimensionat și poziționați totul astfel încât nimic să nu atingă marginea pânzei și că umbra nu este tăiată de ea fie.

Ar trebui să terminați cu 6 elemente principale: "gradient", "linie", "evidențiere", "nuanțe", "roz bază" și "umbre". Ilustrația finală este de mai jos. Acum sunteți gata să transformați ilustrația într-o pictogramă de fișier!

Secțiunea 2 - Efectuarea creierului nostru într-o pictogramă

Pasul 1 - Prezentare generală

Cel mai recent Mac OS Leopard și, desigur, Snow Leopard care vine, suportă dimensiuni ale pictogramelor de până la 512 pixeli cu 512 de pixeli, în timp ce Windows Vista acceptă doar 256 px la 256 px. Mac OSX acceptă toate tipurile de formate pentru a fi utilizate ca pictograme, datorită modului în care sistemul de operare redă imagini. Din nefericire, Windows se ocupă de formatul ICO, ceea ce nu este consecvent între Vista și versiunea mai veche a Windows.

Mac OSX vine cu un utilitar numit "Icon Composer" și se află în Root> Developer> Applications> Utilities. Face parte din instrumentele gratuite de dezvoltare ale Apple disponibile aici (este necesar un cont gratuit).

Windows nu are utilitate nativă pe care o puteți utiliza, dar există un editor de pictograme freeware IcoFX care poate exporta în ICO printre altele.

În scopul acestui tutorial, voi folosi doar imaginea originală de 512x512 și las software-ul să-l redimensioneze automat. Rezoluțiile necesare pentru Mac OS sunt 512x, 256x, 128x, 32x, 16x. Destul de ciudat, pentru Windows, acestea sunt de 256x, 48x, 32x, 24x, 16x.

În realitate, ați modifica și perfecționați pictograma la fiecare pas în care este dimensionat în jos, deoarece există o pierdere de detalii incredibilă, iar la rezoluțiile cele mai scăzute, formele vor fi indisolubile și va trebui să recurgeți la editarea manuală până la pixeli.

Pasul 2 - Mac OSX

Dacă nu doriți să vă înscrieți pe Apple și să descărcați instrumentele pentru dezvoltatori doar pentru a obține Icon Composer, aveți noroc, deoarece Mac OS suportă standardele RGBA PNG în icoanele sale. Tot ce trebuie să faceți este să salvați fișierul din Illustrator ca un PNG de 512x512 cu transparență, deschideți-l cu Previzualizare, faceți clic pe Editare> Copiere pentru a copia imaginea. Apoi, mergeți la dosarul pe care doriți să îl modificați și faceți clic dreapta> obțineți informații (sau comanda + I). Căutați pictograma din colțul din stânga sus alături de numele dosarului și faceți clic pe acesta. Se va evidenția cu o culoare albastru deschis.

Odată ce ați obținut acest lucru, puteți merge mai departe și faceți clic pe Editare> Lipire. Și asta va introduce PNG pe care l-ați copiat anterior.

Dezavantajul este că imaginea este încă de 512 de pixeli până la 512 de pixeli, chiar și pentru dimensiuni mai mici, care afectează memoria atunci când afișează pictograma. Altă este faptul că veți avea dificultăți în a vă întoarce înapoi dacă ați schimba unul dintre pictogramele de sistem.

Pentru a crea un fișier nativ OSN ICNS, rulați Icon Composer și trageți PNG-ul de 512px cu 512px în aceleași dimensiuni. Programul vă va solicita dacă doriți să copiați și să redimensionați imaginea la alte rezoluții. Dacă doriți să creați o imagine separată pentru fiecare, faceți-o mai departe. În acest moment, voi lăsa computerul să-l redimensioneze pentru mine.

Puteți vedea că există o filă Mască în partea de jos. Ceea ce face, este să vă importați o imagine independentă care va gestiona transparența. Deoarece folosim PNG-urile, este bine să mergem File> Export și să salvăm un fișier ICNS.

Dacă deschideți noua noastră ICNS în previzualizare, veți vedea că este un container pentru 5 imagini cu dimensiunile respective.

În acest moment, este dificil să implementați ICNS ca pictogramă, deoarece nu puteți doar să o copiați și să o lipiți ca fișier întreg. Dacă sunteți în personalizare pe mac, și cum ar fi icoane personalizate, sau sunteți un designer care are nevoie pentru a testa opere de artă lor, vă sugerez un utilitate foarte curat CandyBar. Nu este gratuit, dar merită, dacă intenționați să luați serios personalizarea.

Pasul 2 Windows Vista

Vista este diferit de Windows XP. Au fost introduse pictograme cu compresie PNG și sunt derulate în Windows 7, permițându-vă să creați icoane frumoase cu o transparență adecvată. Windows gestionează pictogramele prin fișiere ICO. Ele sunt echivalente cu ICNS pentru mac, care sunt containere pentru imagini pentru diferite rezoluții.

Vom folosi o aplicație freeware numită IcoFX. Windows nu acceptă rezoluții de pictograme de peste 256 de pixeli până la 256 de pixeli, așadar vă sugerăm să exportați o imagine de 256 pixeli direct din Illustrator pentru a evita comprimarea suplimentară.

Accesați fila> importați imaginea pentru a importa pngul 256px. Utilizați 32 biți 256x256 setări.

În panoul din stânga, faceți clic dreapta> imagine nouă pentru a importa unul cu următoarea rezoluție. Puteți să faceți o importanță personalizată de 128x128 ca dimensiune suplimentară. Apoi importați restul imaginilor.

După ce ați încărcat toate imaginile, sunteți gata să salvați fișierul ca fișier ICO.

Pentru a schimba o pictogramă a unui dosar / locație în Vista, în acest caz, voi schimba pictograma "computerul meu". Faceți clic dreapta pe el, alegeți proprietăți. Dacă modificați o scurtătură, mergeți la fila Shortcut sau, dacă este un dosar, accesați fila Customize. Faceți clic pe butonul Alegeți pictograma și alegeți fișierul ICO pe care l-ați salvat.

Confirmați alegerea imaginii și pictograma trebuie reîncărcată în cea personalizată.

Concluzie

Acum cunoașteți procesul de creare a unei pictograme de la bază, atât pentru Mac OSX, cât și pentru Windows Vista. Indiferent dacă ați citit tutorialul de la Secțiunea 1 pentru a urmări procesul de ilustrare sau ați sărit direct la secțiunea 2 pentru a vedea cum să convertiți imaginile în pictograme de sistem utilizabile, vă mulțumesc că ați urmat tutorialul și sperăm să vedeți o serie de personaje extraordinare! Există o mulțime de locuri minunate pentru a începe.

Abonați-vă la Vectortuts + RSS Feed pentru a rămâne la curent cu cele mai recente tutoriale vectoriale și articole.