Share
Ce veți creaV-ați întrebat vreodată cum trebuie să simțiți că sunteți un om de știință nebun, creând tot felul de invenții misterioase? În acest caz, nu vă întrebați mai mult, deoarece în tutorialul de astăzi vom lua un geek și vom crea un mic pachet de pictograme cu tematică științifică retro, folosind câteva dintre cele mai simple forme și instrumente pe care Illustrator le poate oferi.
De asemenea, nu uitați că puteți întotdeauna să vă extindeți proiectul, verificând GraphicRiver unde veți găsi literalmente pagini pe paginile pictogramelor cu tematică științifică.
Deoarece sper că aveți deja Illustrator în picioare în fundal, aduceți-o în sus și să organizăm o Document nou (Fișier> Nou sau Control-N) folosind următoarele setări:
Și de la Avansat fila:
De vreme ce vom crea pictogramele utilizând un flux de lucru pixel-perfect, vom dori să înființăm un pic frumos Grilă astfel încât să putem avea controlul total asupra formelor noastre.
Mergeți la Editați> Preferințe> Ghiduri și Grilă submeniu și ajustați următoarele setări:
Sfat rapid: puteți afla mai multe despre grile, citiți această lucrare detaliată despre modul în care funcționează sistemul Grid al Illustratorului.
Odată ce am creat grila noastră personalizată, tot ceea ce trebuie să facem pentru a ne asigura că formele noastre arată clar sunt permise Fixat la retea opțiune găsită în cadrul Vedere meniu, care se va transforma în Faceți clic pe Pixel de fiecare dată când intri Previzualizarea pixelilor mod.
Acum, dacă sunteți nou în întregul "flux de lucru pixel-perfect", vă recomand să vă prezentați modul de creare a tutorialului de artă perfectă pixel, care vă va ajuta să vă lărgi abilitățile tehnice în cel mai scurt timp.
Odată cu crearea noului document, ar fi o idee bună să ne structurăm proiectul folosind câteva straturi, deoarece astfel putem menține un flux de lucru constant concentrându-ne pe o pictogramă la un moment dat.
Acestea fiind spuse, ridicați straturi și creați un total de patru straturi, pe care le vom redenumi după cum urmează:
grilele de referință (sau grilele de bază) reprezintă un set de suprafețe de referință precis delimitate, care ne permit să construim icoanele noastre, concentrându-ne pe mărimea și consistența.
De obicei, dimensiunea grilelor determină mărimea icoanelor reale și ele ar trebui să fie întotdeauna prima decizie pe care o luați în momentul în care începeți un nou proiect, deoarece veți dori întotdeauna să începeți de la cea mai mică dimensiune posibilă și să vă dezvoltați.
Acum, în cazul nostru, vom crea un pachet de pictograme folosind doar o mărime, mai exact 128 x 128 px, care este destul de mare.
Începeți prin blocarea tuturor straturilor decât "grila de referință", apoi apucați Instrumentul dreptunghiular (M) și de a crea un 128 x 128 px portocale (# F15A24), care va ajuta la definirea dimensiunii generale a icoanelor noastre.
Adăugați un număr mai mic 120 x 120 px unu (#FFFFFF), care va acționa ca suprafață activă de desenare, oferindu-ne astfel totul 4 px umplutură.
Grupați cele două pătrate care compun grila de referință folosind Control-G comanda rapidă de la tastatură și apoi creați trei copii la o distanță de 40 px unul de celălalt, asigurându-vă că le aliniați la centrul artboard.
După ce ați terminat, blocați stratul curent și treceți la următorul, unde vom începe să lucrăm la prima noastră pictogramă.
Presupunând că ați trecut deja la următorul strat (care ar fi cel de-al doilea strat), după crearea rețelelor de referință, să începem proiectul prin apropierea de prima noastră rețea de referință, unde vom începe să lucrăm la standul mic de sticlă eprubete.
Începeți să lucrați la primul tub prin crearea unui 12 x 88 px dreptunghi, pe care o vom folosi folosind culoarea # 56C1AD și apoi poziția la o distanță de 2 px din marginea superioară a zonei de desen activă și 30 px din partea stângă.
Ajustați forma pe care tocmai am creat-o prin setarea Rază din colțurile de jos până la 6 px din interiorul Transforma panoul Dreptunghi Proprietăți.
Dați formei rezultante o contur folosind Accident vascular cerebral metodă, prin crearea unei copii a acesteia (Control-C) pe care o vom lipi în față (Control-F) și apoi reglați mai întâi schimbând culoarea # 5B4032 și apoi răsturnând-o Completati cu al ei; cu al lui Accident vascular cerebral (Shift-X), asigurându-vă că setați Greutate la 4 px.
Adăugați buza tubului utilizând a 20 x 4 px dreptunghi (# 5B4032), pe care o vom poziționa pe secțiunea superioară a conturului său, aliniindu-l astfel la formele create anterior.
Dați tubului o umbră tare folosind a 12 x 6 px dreptunghi (# 5B4032) pe care le vom centra aliniați la marginea superioară a formei de umplere mai mari. Odată ce ați terminat, selectați și grupați toate cele patru forme împreună folosind Control-G Comanda rapidă de la tastatură.
Creați două copii ale tubului pe care tocmai am terminat să lucrăm (Control-C> Control-F de două ori), apoi distribuiți-le pe partea dreaptă, poziționându-le la o distanță de 4 px unul de altul. După ce ați terminat, selectați și grupați-i împreună folosind butonul Control-G Comanda rapidă de la tastatură.
Începeți să lucrați la rackul de lemn creând baza folosind un a 104 x 16 px dreptunghi (# C48755) cu 4 px grosime (# 5B4032), pe care le vom alinia la marginea inferioară a zonei de desen activă.
Adăugați eticheta mică utilizând a 20 x 8 px dreptunghi (# 5B4032) pe laturile cărora le vom adăuga două mai mici 8 x 4 px (# 5B4032). Selectați și grupați (Control-G) toate cele trei forme împreună, aliniați-le la secțiunea mai mare a lemnului, asigurându-vă că ați creat un alt grup după aceea.
Creați secțiunile laterale ale rafturilor utilizând două 10 x 64 px dreptunghiuri (# AF7245) cu 4 px grosime (# 5B4032), pe care o vom grupa în mod individual (Control-G) și apoi poziționați partea superioară a secțiunii anterioare, aliniați-le la marginea exterioară.
Adăugați secțiunea superioară a rack-ului folosind a 104 x 12 px dreptunghi (# C48755) cu 4 px grosime (# 5B4032), pe care o vom grupa (Control-G) și apoi poziția deasupra formelor create anterior.
Adăugați șuruburile mici folosind două 4 x 4 px cercuri (# 5B4032) pe care o vom poziționa deasupra, astfel încât să se alinieze cu secțiunile laterale ale rack-ului. Odată ce le aveți la locul lor, selectați și grupați (Control-G) la secțiunea de bază.
Apoi, faceți câteva momente și adăugați două umbre grele 10 x 6 px dreptunghiuri (# 5B4032) pentru secțiunile laterale ale rafturilor de lemn, urmate de trei 12 x 6 px (# 5B4032) pentru tuburile de sticlă suspendate.
Creați secțiunea orizontală care ține tuburile folosind a 108 px larg 4 px gros Accident vascular cerebral linie (# 5B4032), pe care o vom centra aliniați la raft, poziționându-l la o distanță de 20 px din partea superioară a acestuia, asigurându-vă că o trimiteți înapoi după aceea (faceți clic dreapta> Aranjare> Trimitere înapoi).
Terminați de pe raft, și cu ea pictograma în sine, prin tragerea în brațele mici diagonale structurale folosind a 4 px gros Accident vascular cerebral cu culoarea setată la # 5B4032. După ce ați terminat, selectați și grupați (Control-G) toate secțiunile sale de compunere împreună, făcând același lucru pentru întreaga pictogramă ulterior.
Presupunând că ați terminat lucrul la prima pictogramă, blocați stratul și apoi treceți la cel de-al doilea (care ar fi al treilea), unde vom începe să lucrăm la microscopul mic.
Creați secțiunea inferioară a bazei folosind un 80 x 12 px dreptunghi (# 6B5B51) cu 4 px grosime (# 5B4032), pe care o vom grupa (Control-G) și apoi aliniați centrul la marginea inferioară a zonei de desen activ.
Adăugați secțiunea superioară a bazei folosind a 96 x 12 px dreptunghi (# C48755) cu 4 px grosime (# 5B4032), pe care o vom grupa (Control-G) și apoi poziția deasupra formelor create anterior.
Creați două 108 px larg 4 px gros Accident vascular cerebral linii (# 5B4032) pe care le vom poziționa deasupra muchiilor de sus și de jos ale conturului, adăugând încă unul la centrul formei de umplere după aceea. Odată ce ați terminat, selectați și grupați toate formele secțiunii superioare împreună cu ajutorul Control-G Comanda rapidă de la tastatură.
Așezați o umbră tare pe partea inferioară a bazei, folosind o 80 x 6 px dreptunghi (# 5B4032), pe care o vom centra aliniați la marginea superioară. După ce ați terminat, grupați (Control-G) umbra la sectiunea sa, facand acelasi lucru pentru intreaga baza dupa aceea.
Începeți să lucrați pe braț prin crearea unui 12 x 72 px dreptunghi, pe care o vom folosi folosind culoarea # 82756C și apoi poziția deasupra bazei la o distanță de 30 px de la marginea stângă.
Creați un număr mai mic 12 x 14 px dreptunghi (# 82756C) și poziționați-o pe partea stângă a celei mai înalte din pasul anterior, unind cele două într-o singură formă mai mare utilizând deschizător de drumuri„s Activați modul Shape.
Selectați punctul de ancorare din partea superioară a secțiunii inferioare, utilizând Instrumentul de selecție directă (A) și apoi împingeți-o în partea de jos cu o distanță de 6 px folosind Mișcare instrument (dați clic dreapta> Transformați> mutați> vertical> 6 px).
Dați forma rezultată a 4 px grosime folosind Accident vascular cerebral , asigurându-vă că setați culoarea # 5B4032.
Adăugați șurubul mic folosind a 4 x 4 px cerc (# 5B4032), pe care o vom poziționa în partea inferioară a brațului, lăsându-l pe 4 px spațiu în jurul acestuia. După ce ați terminat, selectați toate cele trei forme și grupați-le împreună folosind Control-G Comanda rapidă de la tastatură.
Începeți lucrul la șurubul superior de strângere, creând o 8 x 8 px dreptunghi (# 5B4032), pe care o vom poziționa deasupra brațului microscopului.
Creați secțiunea mai subțire a șurubului folosind a 4 x 2 px dreptunghi (# 5B4032) (2), peste care vom adăuga a 16 x 4 px dreptunghi (# 5B4032) (3), urmată de un ușor mai restrâns 12 x 4 px unu (# 5B4032) (4). Poziționați toate cele trei forme deasupra dreptunghiului din pasul anterior, selectând și grupând (Control-G) apoi împreună.
Creeaza o 16 x 8 px dreptunghi (# 5B4032), pe care o vom poziționa pe partea stângă a brațului microscopului, la o distanță de 12 px de la marginea superioară.
Adăugați bara de sprijin utilizând a 4 x 68 px dreptunghi (# 5B4032), pe care, de asemenea, o vom poziționa pe partea stângă a brațului, asigurându-ne că o vom trimite apoi în spatele tuturor celorlalte forme după aceea (faceți clic dreapta> Aranjare> Trimitere înapoi).
Adăugați roata de ajustare mică utilizând a 16 x 16 px cerc (# C48755) cu 4 px grosime (# 5B4032), peste care vom adăuga un număr mai mic 4 x 4 px cerc (# 5B4032). Grup (Control-G) toate cele trei forme împreună și apoi poziționați-le în centrul brațului microscopului, la o distanță de 22 px de la baza mai mare.
Dă roata o umbră tare prin crearea unui 14 x 14 px pătrate (# 5B4032) pe care o vom regla prin setarea Rază din colțul din dreapta jos al acestuia 14 px din interiorul Transforma panoul Dreptunghi Proprietăți. Poziționați forma rezultată pe jumătatea inferioară a roții, asigurându-vă că o aliniați la partea sa dreaptă.
Mascați umbra folosind o copie (Control-C) a formei de umplere a brațului ca a Mască de tăiere, pe care o vom lipi în față (Control-F) și apoi faceți clic dreapta> Faceți o mască de tăiere. Odată ce ați terminat, trimiteți umbra la spatele roții folosind butonul Aranjați> Trimiteți înapoi, selectarea și gruparea (Control-G) toate secțiunile de compunere ale brațului împreună.
Începeți să lucrați pe corpul principal al microscopului, creând un 18 x 40 px dreptunghi (# 6B5B51) cu 4 px grosime (# 5B4032), pe care o vom grupa (Control-G) și apoi poziția la o distanță de 16 px din braț și 36 px de la baza mai mare.
Creați tubul de observare utilizând a 10 x 10 px pătrate (# 5B4032) peste care vom adăuga un număr mai mic 6 x 4 px dreptunghi (# 5B4032) urmată de o ușoară extindere 14 x 4 px dreptunghi (# 5B4032). Grup (Control-G) toate cele trei forme împreună, poziționându-le pe partea superioară a corpului mai mare al tubului.
Dă corpului mai mare o inserție mică prin crearea unui 6 x 6 px pătrate (# 5B4032) pe care le vom centra aliniați la marginea de jos.
Creați secțiunea superioară a obiectivului folosind a 10 x 10 px pătrate (# D8A466) cu 4 px grosime (# 5B4032) până la care vom adăuga un pic mai larg 18 x 4 px dreptunghi (# 5B4032) urmat de a 10 x 6 px umbră în partea de sus (# 5B4032). Grup (Control-G), toate cele patru forme împreună, apoi poziționați-le în partea inferioară a corpului mai mare al microscopului.
Adăugați secțiunea inferioară a obiectivului utilizând a 10 x 2 px dreptunghi (# 5B4032), sub care vom adăuga o lărgire 22 x 4 px unu (# 5B4032). Grup (Control-G) ambele forme împreună și apoi poziționați-le sub secțiunea anterioară.
Creați obiectivul real utilizând a 10 x 8 px elipsă (# 56C1AD) cu 4 px grosime (# 5B4032), pe care o vom grupa (Control-G) și apoi poziționați-o pe secțiunea precedentă, astfel încât jumătatea superioară a acesteia să se suprapună. Odată ce ați instalat-o, asigurați-vă că o trimiteți în spatele secțiunii mai largi faceți clic dreapta> Aranjare> Trimitere înapoi, selectarea și gruparea (Control-G) toate secțiunile inferioare ale microscopului împreună.
Adăugați roata de ajustare mică utilizând a 4 x 4 px pătrate (# 5B4032), în partea de care vom adăuga a 4 x 8 px dreptunghi (# 5B4032). Grup (Control-G) și poziționați cele două forme pe partea dreaptă inferioară a corpului mai mare al microscopului, selectând și grupând (Control-G), toate secțiunile sale compuse apoi.
Începeți să lucrați la secțiunea dreaptă a brațului, creând o 32 x 12 px dreptunghi (# C48755), pe care o vom regla prin setarea Rază de la colțurile sale drepte la 6 px din interiorul Transforma panoul Dreptunghi Proprietăți. După ce ați terminat, poziționați forma rezultată la o distanță de 52 px de la baza microscopului.
Creați un număr mai mic 14 x 12 px dreptunghi (# C48755) și poziționați-o sub secțiunea creată anterior, unind cele două într-o singură formă mai mare utilizând deschizător de drumuri„s Activați modul Shape.
Reglați forma rezultată selectând mai întâi colțul din dreapta-jos, utilizând Instrumentul de selecție directă (A) și apoi scoateți-l apăsând Șterge. presa Control-J pentru a închide calea rezultată și apoi a da a 4 px grosime (# 5B4032), asigurându-vă că selectați și grupați (Control-G) cele două împreună după aceea.
Finalizați brațul de extindere prin adăugarea micului șurub folosind a 4 x 4 px cerc (# 5B4032), urmată de o 8 x 4 px introducere dreptunghiulară (# 5B4032) după aceea. După ce ați terminat, selectați și grupați (Control-G) toate formele sale de compunere împreună.
Așezați umbra tare pe microscop utilizând a 14 x 12 px dreptunghi (# 5B4032) pe care o vom regla prin setarea Rază din colțul din dreapta jos al acestuia 12 px din interiorul Transforma panoul Dreptunghi Proprietăți. Poziționați forma rezultată pe jumătatea inferioară a brațului de expansiune, asigurându-vă că ați trimis-o în spate selectând atât ea, cât și microscopul mai mare și apoi faceți clic dreapta> Aranjare> Trimitere înapoi.
Finalizați microscopul și, împreună cu acesta, pictograma în sine, adăugând etapa folosind a 48 x 4 px dreptunghi (# 5B4032) pe care o vom poziționa pe partea dreaptă a brațului microscopului, la o distanță de 4 px de la baza sa mai mare. După ce ați terminat, selectați și grupați (Control-G) înainte de a trece la pasul următor, toate secțiunile de compunere ale pictogramei.
Acum suntem la cea de-a treia și ultima noastră pictogramă, deci presupunând că te-ai mutat la următorul strat, măriți grila de referință și să încheiem lucrurile!
Creați secțiunea inferioară a bazei dispozitivului cu ajutorul unui 88 x 12 px dreptunghi (# AF7245) cu 4 px grosime (# 5B4032), pe care le vom alinia la marginea inferioară a zonei de desen activă.
Adăugați segmentele laterale mici utilizând două 6 x 4 px dreptunghiuri (# 5B4032), pe care o vom alinia de jos până la secțiunea vizuală a formei de umplere. Odată ce ați terminat, selectați și grupați toate cele patru forme împreună folosind Control-G Comanda rapidă de la tastatură.
Creați secțiunea superioară a bazei utilizând a 104 x 28 px dreptunghi (# C48755) cu 4 px grosime (# 5B4032), pe care o vom grupa (Control-G) și apoi poziția deasupra formelor anterioare.
Adăugați șuruburile mici folosind patru 4 x 4 px cercuri (# 5B4032), pe care o vom poziționa de la distanță 4 px din fiecare colț al secțiunii mai mari.
Adăugați eticheta utilizând 28 x 16 px dreptunghi (# 5B4032), pe laturile cărora vom adăuga două mai mici 8 x 8 px pătrate (# 5B4032). Grup (Control-G) toate cele trei forme împreună și apoi centrale aliniați-le la secțiunea mai mare, selectarea și gruparea (Control-G) toate formele sale de compunere.
Adăugați umbra tare la partea inferioară a bazei, utilizând o 88 x 6 px dreptunghi (# 5B4032) pe care le vom centra aliniați la marginea superioară. După ce ați terminat, selectați și grupați toate formele pe care le-am utilizat până acum Control-G Comanda rapidă de la tastatură.
Începeți să lucrați pe corpul superior al dispozitivului, creând o 72 x 12 px dreptunghi (# 82756C) cu 4 px grosime (# 5B4032), pe care o vom grupa (Control-G) și apoi poziția deasupra bazei mai mari.
Adăugați liniile orizontale detaliate folosind două 84 px larg 4 px gros Accident vascular cerebral linii (# 5B4032), pe care o vom poziționa în partea superioară și centrală a conturului secțiunii. Odată ce le aveți la locul lor, selectați și grupați (Control-G) împreună cu cele mai mari dreptunghiuri înainte de a trece la pasul următor.
Creați butonul mic folosind a 12 x 6 px dreptunghi (# C48755) cu 4 px grosime (# 5B4032), peste care vom adăuga un alt ușor mai restrâns 8 x 6 px dreptunghi (# 5B4032). Grup (Control-G) toate cele trei forme împreună și apoi poziționați-le în partea de sus a secțiunii anterioare, la o distanță de 12 px de la marginea stângă.
Adăugați mufa dispozitivului utilizând a 24 x 12 px dreptunghi (# 6B5B51) cu 4 px grosime (# 5B4032), la fundul căruia vom adăuga un număr mai mic 8 x 6 px dreptunghi (# 5B4032). Grup (Control-G) toate cele trei forme împreună, apoi poziționați-le pe partea dreaptă a butonului, la o distanță de 12 px din ea.
Creați baza becului cu ajutorul a 16 x 12 px dreptunghi (# D8A466) cu 4 px grosime (# 5B4032) în centrul căruia vom adăuga un altul 16 x 4 px dreptunghi (# 5B4032). Grup (Control-G) toate cele trei forme împreună, apoi poziționați-le peste secțiunea creată anterior.
Începeți să lucrați la secțiunea de sticlă a becului, creând o 16 x 4 px dreptunghi (# 56C1AD), pe care o vom poziționa deasupra bazei din pasul anterior.
Apoi, creați un 32 x 32 px cerc (# 56C1AD) pe care o vom poziționa deasupra dreptunghiului mai mic, la o distanță de 4 px de la marginea superioară.
Deschideți calea cercului selectând punctul de ancorare inferior folosind Instrumentul de selecție directă (A) și apoi apăsând Șterge. Faceți același lucru pentru dreptunghiul prin adăugarea unui nou punct de ancorare în centrul marginea superioară a acestuia cu ajutorul funcției Adăugați un instrument de ancorare (+), și apoi scoateți-l apăsând Șterge.
Combinați cele două căi într-o singură formă mai mare, selectând-le pe ambele și apoi apăsând Control-J de două ori.
Îndepărtați tranzițiile formei rezultate prin ajustarea curburilor sale cu ajutorul mânerelor ancoră Previzualizarea pixelilor mod (Alt-Control-Y). Ia-ți timp și, după ce termini, treceți la pasul următor.
Dați forma rezultată a 4 px grosime (# 5B4032) folosind Accident vascular cerebral metodă, selectarea și gruparea (Control-G) atât ea, cât și forma de umplere subiacentă împreună.
Începeți să lucrați la filament, creând două 8 x 8 px cercuri cu a 4 px gros Accident vascular cerebral (# 5B4032) la o distanță orizontală de 2 px una de cealaltă, pe care o vom poziționa în centrul bulbului, la o distanță de 10 px de la marginea superioară.
Deschideți secțiunile inferioare interioare ale traseului fiecărui cerc prin adăugarea unui nou punct de ancorare utilizând Adăugați un instrument de ancorare (+), și apoi scoateți-o selectând și apăsând Șterge.
Finalizați filamentul și, împreună cu acesta, pictograma în sine, selectând și unind punctele de ancorare de la baza folosind Control-J comanda rapidă de la tastatură, desenarea secțiunilor verticale folosind Instrument Pen (P). După ce ați terminat, selectați și grupați toate formele de compoziție ale becului, procedând la fel pentru întreaga pictogramă în cele ce urmează.
Buna treaba! Sper că ați găsit tutorialul destul de interesant să-l urmați până la sfârșit - de când a fost unul lung - și cel mai important a învățat ceva nou și util de-a lungul drumului.
Accentsconagua