Share
Primele impresii se numără! Uimirea spectatorilor nostri cu un portofoliu vizual este unul dintre cele mai importante lucruri pe care un designer le poate face pentru a judeca un nou client. Astăzi vom demonstra cum să folosim fotografii, pensule și texturi și obiecte 3D pentru a proiecta un aspect creativ de site multimedia în Photoshop. Să începem!
Următoarele resurse au fost utilizate în realizarea acestui tutorial:
Creați o pânză de 960 x 620 pixeli în Photoshop. Aceasta este o rezoluție bună pentru site-uri web, deoarece majoritatea ecranelor le pot găzdui.
Apăsați Cmd + R pentru a adăuga rigla și a trage câteva ghidaje pentru a marca limitele pentru zona principală de conținut. Acestea vor fi utile pentru a vă centra proiectarea.
Acum că zona de conținut principal este delimitată în mod corespunzător, să redimensionăm pânza la 1224px la 620px (Imagine> Canvas Size) pentru a crea un fundal mai mare. Această zonă de vărsare va fi utilă pentru vizitatorii cu ecrane mari și va crea un aspect "fără margini".
Ultimul pas în pregătirea documentului nostru este de a adăuga un ghid în centru. Acest ghid va fi util atunci când trebuie să centrați elementele de design. O modalitate rapidă de a găsi centrul este să creați un nou strat și să apăsați tastele de comenzi rapide Cmd + T pentru a activa "Free Transform".
Să facem platforma cloud pe care va fi așezat designul principal. Faceți un fundal de gradient gri. Strat> Strat de strat> Suprapunere gradient. Gradient # 434344 la #EAECEC. Lăsați toate celelalte setări ca prestabilite.
Creați un nou strat "Nori". Încărcați periile de nor și vopsiți în alb câteva nori de diferite forme, mărimi și opacitate până când veți obține un rezultat similar, după cum se arată mai jos.
Creați un al doilea strat "nori 2", adăugați câteva nori în centru.
Creați un al treilea strat "nori 3". De data aceasta folosiți periile strălucitoare Abstract, a doua perie, dimensiunea 420px. Răsturnați-l, apăsați Cmd + T> Flip orizontal. Acest lucru va ajuta la a da norii un look mai atent și eteric.
Acum vom crea un mare 3D "M" pentru "Multimedia". Puteți înlocui inițialele companiei dvs. aici.
Deschideți Illustrator și lipiți fundalul din cloud pe care tocmai l-ați creat într-un strat nou. Utilizați-l ca ghid pentru a proiecta 3D "M". Introduceți litera "M": font Handel Gothic Ex, 181pt, alb; puteți înlocui orice alt font gros larg. Pentru a da textului un efect 3D, mergeți la: Effect> 3D & gt Extrude & Bevel. Vedeți imaginea de mai jos pentru setări.
Copiați 3D "M" și reveniți la Photoshop pentru al lipi în document. Redenumiți stratul la "m". Acum vom aplica unele efecte și texturi pentru a deveni mai realiste și mai interesante. Mai întâi aplicați următorul stil de strat la stratul "m".
Creați un folder nou "m textures". Selectați litera "M" cu instrumentul Magic Wand Tool și, cu această selecție, adăugați o mască de strat în dosar. Acum vom avea toate texturile pentru 3D "M" din interiorul acestui dosar.
Utilizați "texture 4.jpg" din pachetul Rust Textures. Copiați, inserați și apelați stratul "textura". Duplicați-l și scalați duplicatul strat "texture2" până la 12,5%.
Reglați Opacitatea straturilor la 40% și schimbați Modul de amestecare la Color Burn pentru ambele straturi.
Adăugați un alt textur strat "texture3" folosind "metal_plaque_bump_seam.jpg" Texturi blindate din metal. Reglați opacitatea stratului la 26% și schimbați modul de amestecare la greu. Schimbați stratul până când sunteți mulțumit de poziția texturii.
Utilizați o perie rotundă moale cu opacitate de aproximativ 30% pentru a aplica o umbră sub "M". Utilizați instrumentul Smudge pentru a ajusta și crea o umbră înclinată după cum urmează.
Adăugați numele companiei dvs., în acest caz "Multimedia". Folosește Heritage Extra Bold, 32 de pixeli, negru. Apoi adăugați o umbră slabă sub ea.
Duplicați stratul, redenumiți-l "umbră multimedia". Cmd + T pentru a accesa instrumentul Transform Tool, faceți clic dreapta și selectați Flip Vertical. Adăugați Blur Motion. Schimbați opacitatea stratului la 50%. Adăugați o mască de strat și, în final, aplicați un gradient pentru a estompa fundul.
Acum vom crea orașul pentru lumea noastră multimedia. Puteți utiliza periile Cityscape pentru clădiri. Descărcați câteva pachete de redare abstractă: Render Pack Textures 1 și Render Pack Textures 2 pentru texturi. Folosiți mai întâi periile pentru a desena câteva clădiri. Desenați fiecare clădire pe un strat separat, între straturile "nori" și "nori2".
Redimensionați, poziționați și decupați o parte din clădirile de care nu aveți nevoie.
Pentru fiecare clădire, creați un dosar nou care va conține texturile respective. Folosind aceeași metodă pentru a aplica textura pentru litera "M", selectați fiecare clădire, una câte una, cu instrumentul Magic Wand Tool și adăugați selecția ca o mască de strat în folder. Setați modul de amestecare a stratului de foldere pentru a ușura.
Aplicați texturile abstracte pe panorama urbană, după cum urmează. Mutați, rotiți, redimensionați texturile până când sunteți mulțumiți de efecte.
Este o practică bună să vă curățați și să vă organizați straturile. Deși un pic plictisitor la început, această practică vă va salva de fapt timp prețios atunci când căutați fișiere, să spunem o lună mai târziu. Plasați toate straturile de clădiri într-un nou folder "Clădiri". Aduceți acest dosar în jos între straturile "nori" și "nori 2".
Utilizați periile nor pentru a picta câteva nori mici pe stratul "nori2" pentru a acoperi baza clădirilor.
Să adăugăm recuzita noastră multimedia: cameră clasică, scaun director, cameră video, laptop, microfon, balonul Hotair 1, balonul Hotair 2, copac mic. Pentru fiecare dintre aceste obiecte, extrageți fundalul folosind instrumentul Magic Wand Tool (W) și apoi faceți clic pe butonul Refine Edge pentru a ajusta marginile. Pentru a îndepărta marginile brute rămase, utilizați instrumentul Eraser (E) cu o perie rotundă mică.
Redimensionați și apoi aplicați Filter> Smart Sharpen (Cmd + F) pentru fiecare obiect. Poziționați-le ca mai jos.
Adăugați umbre la scaun, cameră TV, laptop, microfon, aparat de fotografiat și mașină urmând aceleași tehnici utilizate pentru litera "M". Pentru copac, utilizați perii naturale și reglați formele folosind instrumentul Smudge.
Timp de curățare de primăvară Conectați fiecare strat de obiect cu stratul său de umbră, astfel încât să fie ușor să activați și să dezactivați fiecare obiect, după cum este necesar. Pentru aceasta, apăsați Shift + faceți clic pe ambele straturi. Faceți clic dreapta și selectați Link Layers. Apoi plasați toate straturile de recuzită într-un nou dosar "Props".
La proiectarea unei pagini de pornire, elementele interactive joacă un rol major în determinarea succesului site-ului. Prin urmare, ar trebui să facem butoanele principale atractive și proeminente pentru ca utilizatorii să dorească să le facă clic. Vom crea cutii 3D care sunt conectate cu panorama orașului prin fire colorate. Acestea vor reprezenta secțiunile noastre diferite de pagină. Iată o previzualizare a ceea ce veți fi proiectat.
Du-te înapoi la Illustrator pentru a desena cutii 3D și fire colorate. Utilizați instrumentul dreptunghi (M) pentru a desena 6 casete albe cu o lățime diferită, în funcție de lungimea textului pe care va conține caseta. Exemplu "Web" va avea o casetă mai mică și "Contact" va avea o cutie mai largă.
Aplicați Efect> 3D> Extrude & Bevel pentru fiecare casetă. Vedeți imaginea pentru setările efectului fiecărei cutii, de la stânga la dreapta.
Copiați peste opera de artă creată în Photoshop până acum și inserați-o într-un strat "fundal" ca ghid. Desenați câteva linii fie cu instrumentul Pen (P) fie cu Pencil Tool (T), oricare ar fi mai ușor pentru dvs..
Acum vom face niște perii curcubeu. Utilizați instrumentul Rectangle (M) pentru a desena un dreptunghi. Apoi, copiați și lipiți patru până la cinci dreptunghiuri unul lângă celălalt pe verticală. Modificați culorile. Selectați întregul dreptunghi și utilizați Aliniere stânga pentru a le alinia.
Faceți câteva variații de curcubeu. Iată câteva eșantioane.
Pentru a face peria, selectați un cluster curcubeu, trageți-l și plasați-l în panoul Dvs. de perii. Selectați Perie de artă nouă. Denumiți Art Brush "Rainbow1" și păstrați setarea implicită cu direcția orizontală dreaptă.
Aplicați acum periile curcubeului pe diferitele linii.
Copiați și lipiți fiecare fir de curcubeu (linie) individual în Photoshop. Lipiți straturile din fața clădirilor, dar în spatele recuzităților și litera "M". Aplicați o mască de straturi pe straturile de sârmă și utilizați periile Cloud pentru a face o parte a firelor transparente.
Pentru a oferi firelor un aspect 3D și pentru a le face mai strălucitoare, aplicați un stil de strat Bevel & Emboss Layer cu setări similare, după cum se arată mai jos. Fiecare cablu necesită o reglare ușoară a setărilor pentru a obține aspectul dorit.
Copiați și inserați cutiile 3D de pe Illustrator în straturi individuale.
Aplicați textura "metal_plaque_bump_seam.jpg" din textură blindată, folosind aceleași tehnici ca și în pasul 10 și pasul 17. Setați modul de amestecare a stratului de textura la lumină puternică cu opacitate 26%.
Adăugați textul în cutii. Utilizați Heritage Extra Bold, 14px, negru. Rotiți textul acolo unde este necesar pentru a urmări unghiul casetelor.
Curățați straturile și organizați butoanele în foldere, dacă nu ați făcut-o deja.
Ultimul pas! Adăugați subsolul și ați terminat! Utilizați Verdana, 10px, #cccccc pentru prima linie și # 999999 pentru linia de jos. Acestea sunt culori web sigure.
Sper că ați găsit acest tutorial util. Împărtășiți-vă părerile, ideile și mă bucur să vă ajut dacă aveți întrebări. Fiți creativi și explorați tehnicile pe care le-ați învățat aici - nu pot să aștept să văd ce vă propuneți!
Accentsconagua