Share
Acest tutorial va oferi exemple de tehnici de creare a texturilor din lemn și țesături. De asemenea, vom învăța cum să facem jocul cu lumină pe obiecte cu ajutorul opacității Mască, Blend Tool și Art Brushes. Studiind acest tutorial pas cu pas, veți cunoaște toate secretele creației profesionale de design icoane.
Pictogramele pentru aplicațiile iOS au o dimensiune tipică. Chiar dacă vom folosi un editor de vectori, pictograma va fi făcută la dimensiunea presetată necesară. Înțelegerea celor de mai sus ne permite să creăm un grafic profesionist, să evităm crearea unor detalii ciudate, care nu vor fi niciodată vizibile la scară reală sau ar putea afecta viziunea lor generală.
Astăzi, vom face o icoană cu dimensiunea de 512 x 512 px. Această dimensiune este utilizată pentru afișarea în iTunes, inclusiv CoverFlow și App Store. Stilul retro este considerat a fi una dintre direcțiile fancy ale designului modern. Prin urmare, am decis să fac radio App Icon ca un set de radio în stil retro din mijlocul secolului trecut.
Vom începe cu utilizarea instrumentului rotunjit dreptunghi pentru a modela formularul cu pictograma având o dimensiune necesară și o rază de rotunjire a colțului, după cum se arată mai jos.
Completați formularul cu culoarea maro închis.
Toate obiectele vor fi colorate în cursul procesului de creare a icoanelor, dar este necesar să se determine în prealabil poziția sursei de lumină. În cazul nostru, sursa de lumină este situată în partea dreaptă sus. Culorile de umplere a gradientului, direcția umbră a umbră, poziția evidențiată și intensitatea depind de poziția sa.
Aplicarea unor surse de lumină sau a unor imagini similare trebuie evitată. Acest lucru se datorează faptului că creierul nostru percepe lumea reală și grafica într-un mod diferit; prin urmare, ar trebui să existe unele surse de lumină aplicate, imaginea dvs. ar putea părea nenaturală și chiar își va pierde caracteristicile 3D. Trebuie să folosim judecata noastră artistică cu determinarea modului de a afișa lumina asupra designului nostru de icoane.
Faceți o copie a dreptunghiului rotunjit și lipiți-l direct deasupra celui anterior (Command + C; Command + F). Completați copia cu un gradient liniar compus din mai multe culori maro, cu nuanțe de lumină și întuneric.
După cum puteți vedea, în partea dreaptă a acestui formular se află localizatoarele mai ușoare ale gradientului, în funcție de poziția sursei de lumină.
Faceți o copie a ultimului dreptunghi rotunjit făcută și lipiți-o în față. Umpleți-l cu un gradient alb-negru, așa cum se arată în figura de mai jos.
Selectați două dreptunghiuri de sus și creați o mască Opacity selectând Make Opacity Mask din meniul panoului Transparență.
Prin urmare, am obținut o distribuție inegală a luminii în partea superioară a imaginii.
Faceți o copie a dreptunghiului inițial creat în timpul primului pas și lipiți-o în față. Plasați noul formular în partea superioară a tuturor obiectelor create și completați-l cu un gradient liniar maro închis.
Selectați punctele A, B, C și D cu ajutorul Instrumentului de selecție directă (A), apoi mutați-o vertical, ținând apăsată tasta Shift pentru al restrânge.
Păstrați obiectul selectat, mergeți la Obiect> Cale> Cale de decalare și setați valoarea de offset afișată în caseta de dialog.
Umpleți dreptunghiul cu o culoare maro închis.
Acum mergeți la Object> Blend> Blend Options și setați numărul de Pași specificați afișați în caseta de dialog. Selectați două forme din partea de sus și mergeți la Object> Blend> Make.
Faceți o copie a obiectului de sus și lipiți-o în față. Deplasați noua formă din obiectul amestec în panoul Straturi.
Umpleți-l cu o culoare maro deschis.
Acum să creăm textura vectorului de lemn. Utilizați instrumentul Rectangle (M) pentru a crea un dreptunghi încărcat cu gri. Înălțimea unui astfel de dreptunghi trebuie să fie mai mare decât înălțimea dreptunghiului brun deschis.
Păstrați obiectul selectat, mergeți la Efect> Schiță> Stil grafic și setați parametrii pentru acest efect în caseta de dialog.
Acum, mergeți la Object> Expand Appearance și apoi la Object> Live Trace> Trace Options și setați parametrii prezentați în figura de mai jos.
Mergeți la Object> Extindeți și extindeți textura vectorului orizontal cu ajutorul instrumentului de selectare (V), ținând apăsat tasta Alt. Lățimea texturii trebuie să fie mai mare decât dreptunghiul rotunjit rotund.
Umpleți textura cu o culoare maro deschisă. Această culoare trebuie să aibă o nuanță ușor mai deschisă față de dreptunghiul plasat sub ea.
Utilizați Instrumentul Warp; Faceți dublu clic pe această pictogramă a instrumentului din bara de instrumente, care va deschide caseta de dialog cu setările sale.
Aplicați compensările orizontale și verticale ale boabelor de textura cu ajutorul instrumentului Warp.
Selectați întreaga textură și treceți la Efect> Distort & Transform> Roughen și setați parametrii pentru un astfel de efect urmărind simultan modificările aplicate texturii.
Faceți o copie și lipiți textura din față. Umpleți copia cu o nuanță mai închisă de culoare brună și deplasați-o ușor în jos. Modificați parametrii efectului Roughen; setați Modul de amestecare multiplă și micșorați opacitatea. Toți acești parametri sunt accesibili din panoul Aspect.
Aplicând tehnica descrisă în pașii 7 și 8, am creat încă un fel de textură și am plasat-o mai presus de cele două. Pentru demonstrații, vizibilitatea primelor două texturi a fost dezactivată, după cum se arată în figura de mai jos.
Cu toate acestea, toate texturile arată împreună, după cum urmează.
Utilizând instrumentul Pen (P) pentru a forma forma umbrei.
Păstrați obiectul selectat, mergeți la Efect> Blur> Gaussian Blur și setați valoarea razei, după cum se arată mai jos.
Aplicați modul Multiplicare amestecare și micșorați opacitatea cu ajutorul panoului Transparență.
Faceți o copie a dreptunghiului rotunjit rotund și lipiți-l în față. Plasați copia peste toate obiectele create anterior.
Selectați toate texturile, forma umbrei și dreptunghiul rotunjit de sus, apoi faceți clic pe comanda rapidă Command + 7, creând astfel Masca de tăiere.
Acum, umbra și toate obiectele de textură sunt grupate. Reduceți Opacitatea acestui grup cu ajutorul panoului Transparență.
Selectați substratul cu Cale de decupare din panoul Straturi și lipiți-l în față.
Deplasați calea creată afară din grup cu Clipping Path și umpleți-o cu un gradient liniar alb-gri.
Aplicați modul Multiplicare amestecare pentru obiect cu ajutorul panoului Transparență.
Acum, să creăm o scară de reglare a setărilor radio. Utilizați instrumentul Ellipse (L) pentru a desena o elipsă maro închis.
Faceți o copie a elipsei create și lipiți-o în față. Țineți apăsată tasta Alt + Shift, apoi micșorați dimensiunea elipsei din partea de sus cu ajutorul instrumentului de selectare (V).
Selectați ambele elipse și mergeți la Object> Blend> Make.
Creați încă două elipse așa cum se arată în figura de mai jos.
Utilizați instrumentul pentru foarfece (C) pentru a tăia elipsele din punctele 1-8. Ștergeți segmentele dintre ele.
Aplicați profilul corespunzător din panoul Stroke în segmentele din stânga.
Selectați toate segmentele și accesați Object> Expand Appearance. Acum putem umple obiectele cu gradiente liniare. Prin urmare, am creat ochii pe marginea scalei de reglare.
Creați noua elipsă și umpleți-o cu un gradient liniar complex, după cum se arată în figura de mai jos.
Apoi vom umple cele două elipse cu o culoare maro și gradient liniar.
Să creăm o serie de elipse cu lovituri de diferite lățimi și fără a le umple.
Selectați-le și mergeți la Object> Expand. Acum, completați-le cu gradienți liniari așa cum se arată în figura de mai jos.
Desenați elipsa în centrul scalei de reglare.
Umpleți-l cu un gradient conic.
Instrucțiuni detaliate pentru o astfel de creare de umplere gradient conic sunt furnizate în tutorialul meu accesibil aici Creați un Gradient Conic cu Adobe Illustrator, în două minute!.
Folosind instrumentul Pen (P) pentru a desena o linie înclinată care trebuie să treacă peste centrul punctului central al elipsei centrale.
Utilizați instrumentul pentru foarfece (C) pentru al tăia în două puncte și apoi ștergeți segmentul central.
Selectați ambele segmente și accesați Object> Expand; acum, umpleți obiectele cu un gradient liniar alb-galben.
Selectați ambele segmente, copiați-le și lipiți-o înapoi. Umpleți segmentele inferioare cu o culoare gri închis și deplasați-le puțin în jos.
Acum să creăm strălucirea. Utilizați instrumentul Ellipse (L) pentru a desena o elipsă. Acum, întoarceți-o și întindeți-o, apoi glisați unul din ele în direcția centrului de reglare cu ajutorul Instrumentului de selectare directă (A). Umpleți obiectul cu o culoare galben deschis.
După aceea, trageți o elipsă și umpleți-o cu o culoare albă.
Setați valoarea Opacitate la 0% în panoul Transparență pentru obiectul inferior plasat.
Selectați ambele obiecte, apoi le-ați folosit ca bază, creați amestecul (Object> Blend> Make).
Desenați încă o elipsă și plasați-o sub toate obiectele scalei de reglare. Umpleți-l cu negru, aplicați modul Multiplicare amestecare și micșorați opacitatea din panoul Transparență.
Acum, să mergem la crearea difuzoarelor radio. Utilizați instrumentul Pen (P) pentru a crea formatul prezentat în figura de mai jos.
Acum creați cercul, selectați ambele formulare și apăsați tasta Minus Front din panoul Pathfinder.
Umpleți formularul obținut cu o culoare bej închis.
Din păcate, nu este eficient să rotunji colțurile unor astfel de forme cu ajutorul instrumentelor Adobe Illustrator standard. Efectul Round Corner nu este aplicabil în astfel de cazuri, deoarece distorsionează toată forma.
Prin urmare, este utilă rotunjirea colțurilor manual prin adăugarea punctelor și deplasarea lor cu ajutorul unor mânere. Modul cel mai convenabil ales de mine pentru rezolvarea acestei probleme este pluginul VectorScribe care permite rotunjirea ușoară a oricărui colț cu ajutorul instrumentului Dynamic Corners Tool.
Să creați textura țesăturii pe difuzor. Utilizați instrumentul Rectangle (M) pentru a desena un dreptunghi cu o lățime de 1px.
Culoarea de umplere pentru un astfel de dreptunghi poate fi oricare pentru moment. Lăsând dreptunghiul selectat, mergeți la Object> Transform> Move și setați valoarea offset orizontală, apoi apăsați butonul Copy.
Acum, apăsați pe Command + D de câte ori este necesar pentru a acoperi formatul difuzorului cu copiile dreptunghiului.
Este necesar ca toate aceste dreptunghiuri să fie umplute cu nuanțe diferite de culoare brună. Pentru norocul nostru, acest lucru se poate face automat. Utilizați panoul Culoare pentru a crea unele nuanțe de culoare brună și a le salva în panoul Swatches.
Acum, selectați toate dreptunghiurile, alegeți culorile necesare din panoul Swatches și porniți scriptul Random Color Swatches. Puteți descărca acest script freeware și obțineți informații detaliate despre el făcând clic pe link-ul următor Random Swatches Fill.
Păstrați dreptunghiurile selectate, mergeți la Efect> Distort & Transformați> Decupați și setați parametrii efectului.
Grupați toate dreptunghiurile. Aplicați tehnica descrisă anterior pentru a crea un grup de dreptunghiuri orizontale.
Aplicați modul Multiplicare combinare pentru grup.
Copiați forma difuzorului și lipiți-o în față și apoi puneți-o peste toate obiectele.
Selectați textura țesăturii și forma de sus aplicând Command + 7, creând astfel Masca de tăiere.
Utilizați instrumentul Rectangle (M) pentru a desena câteva dreptunghiuri, care urmează să fie umplute cu un gradient liniar.
Grupați-le și trageți-le în grup cu Masca de decupare a difuzorului. Această manipulare ar trebui făcută în panoul Layer.
Copiați dreptunghiurile grupate și lipiți-le în spate. Completați grupul cu o culoare gri și aplicați modul Multiplicare amestecare utilizând panoul Transparență.
Acum, umbra este creată.
Să facem inscripția pe difuzor. În acest scop, am folosit fontul Sf American Dreams care poate fi descărcat făcând clic pe următorul link. Deci, folosiți instrumentul Type (T) și creați inscripția "Radio".
Păstrați textul selectat, alegeți Tip> Creare contururi, apoi Obiect> 3D> Extrude & Bevel și setați parametrii efectului prezentat în figura de mai jos.
De asemenea, puteți regla iluminarea obiectului; în acest scop este necesar să apăsați tasta Mai multe opțiuni în această casetă de dialog.
Copiați inscripția și lipiți-o în spate. Umpleți inscripția jos cu o culoare gri și apoi aplicați Modul de amestecare multiplă cu o diminuare a opacității în panoul Transparență. Acum mișcați puțin în jos și în dreapta. Astfel se creează umbra picăturii de pe inscripție.
Utilizați instrumentul Pen (P) pentru a crea forma părții finale a deschiderii în cazul setului de radio.
Aplicați tehnica descrisă în pașii 7-8 pentru a crea textura pentru acest obiect.
Creați forma umbrei din marginea din dreapta a deschiderii din carcasa aparatului radio și umpleți-o cu o culoare maro.
Glisați substratul cu acest formular în grupul cu masca de decuplare a difuzorului.
Lăsând obiectul selectat, mergeți la Efect> Blur> Gaussian Blur și setați raza de neclaritate în caseta de dialog.
Acum, descrește Opacitatea formei umbrite.
Acum, să creăm indicatorul. Tehnica creației este similară cu cea descrisă în acest tutorial; prin urmare, vă voi arăta pașii creației pe care ați putea să-l folosiți.
Acum este timpul să creați tunerii. Utilizând instrumentul Pen (P), creați formularul similar formularului prezentat în figura de mai jos.
Glisați acest formular în panoul Perii și salvați noua perie ca perie de model.
Creați circumferința și aplicați peria de model pentru ea.
Păstrați formatul tunerului selectat, mergeți la Object> Expand Aspect și înlocuiți umplerea și cursa.
Utilizați instrumentul Ellipse (L) pentru a crea cercul prezentat în figura de mai jos.
Selectați toate elementele de tuner și apăsați butonul Unite din panoul Pathfinder.
Faceți forma mai mică și plasați-o în partea de jos a setului radio.
Culoarea de umplere pentru astfel de formulare poate fi oricare pentru moment.
Selectați tunerul și mergeți la Efect> 3D> Extrude & Bevel, apoi setați parametrii prezentați în figura de mai jos.
Acum, mergeți la Object> Expand Appearance. Aceste manipulări vor duce la crearea grupului de obiecte vectoriale obișnuite. Umpleți suprafețele de capăt ale tunerului cu gradienți liniari pentru a face distribuția luminii pe ele.
Creați elipsa pe suprafața tunerului frontal și umpleți-o cu un gradient radial, după cum se arată în figura de mai jos.
Acum creați janta pe tuner și umpleți-o cu un gradient liniar.
Blocurile de pe tuner sunt create cu ajutorul obiectelor Blend prin aplicarea tehnicii descrise mai sus.
Este posibil să se aplice o altă tehnică pentru crearea ochilor. Utilizați Instrumentul Creion (N) pentru a crea forma de glares cu următoarea aplicație a efectului Gaussian Blur.
Aceste forme reproduc iluminarea moale. Acum, hai să facem mai multă atenție. Formele menționate mai sunt create cu ajutorul instrumentului Pencil Tool (N), dar fără aplicarea efectului Gaussian Blur în acest caz.
Utilizați două elipse și Blend Tool pentru a crea umbra de la tuner.
Grupați toate elementele tunerului și duplicați-l de două ori, după ce ați plasat tuner-ele așa cum se arată în figura de mai jos.
Să începem cu crearea ochilor pe caseta de radio. Utilizați două elipse pentru a crea obiectul Blend.
Glisați-l în panoul Perii și salvați noua perie ca Perie Art.
Acum utilizați perii similare menționate pentru a crea toate ochii.
Așadar, am creat o pictogramă cu dimensiunea de 512 x 512 px. Este posibil să utilizați obiectele existente pentru a crea pictograme cu alte dimensiuni. Pentru norocul nostru, avem de-a face cu vectorul "fără dimensiuni". Cu toate acestea, este recomandat să modificați unele elemente atunci când redimensionați.
De exemplu, pentru pictogramele cu dimensiuni mai mici, este recomandabil să modificați inscripția pentru ao face mai ușor de citit. De asemenea, puteți simplifica texturile și puteți șterge câteva imagini. Ori de câte ori ați aplicat transformări, verificați întotdeauna eficiența prin vizionarea pictogramei cu dimensiunea reală.
Orice pictogramă pentru aplicațiile iOS va avea în final formatul mapat cu bit (PNG) și, prin urmare, puteți vizualiza operele dvs. de artă în modul de previzualizare a pixelilor (View> Pixel Preview) pentru a estima calitatea produsului final.
Pictograma finală este prezentată mai jos.
Accentsconagua