Share
V-ați întrebat vreodată cum să creați modele de fundal perfecte, fără probleme, care funcționează pe Photoshop și pe web? Nu te uita mai departe pentru că astăzi o vom rupe pentru tine - pas cu pas. Veți crea propriile modele de fundal în cel mai scurt timp!
Heya toată lumea! Astăzi am plăcerea de a începe o serie de serii de screening pe care am vrut să o fac de ceva vreme acum: Cum să creați modele web care să funcționeze în Photoshop și pe web. Vom face acest lucru ca o serie, începând cu cele mai de bază modele și trecând la unele dintre cele mai avansate modele de fundal pe care le putem găsi, inclusiv texturi complexe.
Obiectivul nostru este simplu: Pentru a învăța pe oricine cum să creeze modele de fundal care sunt destinate pentru web (dar care pot fi folosite și în timpul procesului de proiectare). Vom fi "program agnostic", ceea ce înseamnă că majoritatea sfaturilor vor funcționa atât în Photoshop cât și în Fireworks.
Să fie clar: Ideile care stau la baza creării tiparelor de fundal sunt toate destul de simple - majoritatea modelelor iau doar câțiva pași și pot duce la texturi remarcabil de eficiente. De fapt, cele mai proaste modele pentru web sunt, de obicei, cele care "încearcă prea tare" încercând să se potrivească prea mult în interiorul fiecărei plăci.
De ce e așa de rău? Deoarece modelele de fundal (în majoritatea cazurilor) ar trebui să fie subtile și nonabrazive. Textele dure distrag atenția utilizatorului de la steaua reală pe orice design web: conținutul.
Deci, de ce folosesc texturile? Deoarece, în mod corespunzător, modelele de fundal dau unui site un sentiment de caracter și de personalitate care poate sufla culori plane. Modelele și texturile dau adâncime și separare de conținut, ajută la dezvoltarea ierarhiei și pot oferi site-urilor (care sunt pline prin natura lor) un sentiment tactil. Ele pot face un site să se simtă lustruit, rafinat și profesionist - care ajută la accentuarea conținutului și de a face memorabil.
În timp ce ideile care stau la baza creării modelelor sunt simple? obtinerea lor de a lucra de fapt perfect poate fi adesea dificil. Fiți siguri, totuși, această serie de tutori vă va arăta toate trucurile de care veți avea nevoie vreodată pentru a vă crea propriile variante personalizate de utilizat în proiectele proprii. Vom scoate chiar și niște freebies de-a lungul drumului!
Astăzi este doar prima zi din seria noastră - deci vom începe cu niște modele uber-simple pentru a ne mișca creierul. Vom incepe cu o grilă simplă, vom trece la un model de hibrid, vom arăta cum să creăm un model diagonal de scalare, și apoi vom obține un pic funky prin a vă arăta cum să adăugați unele culori subtile și textura.
Gata? Să o facem!
Porțiunea video a acestui tutorial vă va ajuta să remediați pașii pe care nu îi urmați în versiunea scrisă (de mai jos). Plus, uneori, este de asemenea frumos să vezi cum funcționează altcineva, bucurați-vă!
Deoarece unele dintre aceste modele vor fi greu de văzut pe un ecran de rezoluție web, ofer un tutorial scris pas cu pas. Puteți viziona videoclipul sau versiunea scrisă (sau amândouă!), Este destul de mult până la dvs. în ce fel învățați cel mai bine. Hai să ne aruncăm?
Modelul de bază al rețelei este la fel de simplu ca și el, deci este un punct de plecare fantastic. Să începem prin deschiderea unui document cu 7px-7px.
De ce această dimensiune? Pentru că vom crea un model de grilă cu o linie de 1px care se execută în centru? și vom dori să avem o cantitate egală de spațiu pe fiecare parte a rețelei. Acest lucru nu este obligatoriu pentru acest tipar special (atâta timp cât grila este o pătrată perfectă, se va repeta fără probleme), dar este un obicei pe care îl vom dori atunci când vom trece mai târziu pe modelele mai avansate.
Pașii sunt simpli:
Iată capturile de ecran:
Odată ce ați modelul exact unde doriți, vrem să îl salvăm ca pe un model. Pentru a face acest lucru, selectați din meniul de sus din Photoshop "Editați> Definiți modelul"Aceasta va salva automat documentul ca un model care poate fi folosit în interiorul"Stiluri de strat> Suprapunere model"bibliotecă.
Acum că am realizat elementele de bază, poți să te distrezi foarte mult. Am folosit un document de 7px, dar dacă v-ați dorit o rețea mai strânsă, puteți merge la 5px sau 3px. Alternativ, dacă doriți o rețea mai larg deschisă, puteți utiliza o dimensiune mai mare a documentului. Lățimea liniei, spațierea și culorile depinde de dvs..
Bacsis: Culoarea care ar putea părea subtilă (contrast scăzut) pe documentul modelului poate părea prea intensă atunci când le folosiți ca un model real într-un alt document mai mare. Trucul aici este de a:
Pentru acest al doilea model, în esență, ne vom roti liniile cu 45 de grade. Amintiți-vă că spațierea este crucială - de aceea vom avea de gând să folosim o mică gândire critică pentru a repeta modelul:
Deschideți un nou document de la 8px la 8px de data aceasta. De ce 8px și nu 7px ca înainte? Pentru că vrem ca liniile noastre să corespundă exact fiecărui colț și dacă vom folosi și dacă vom folosi 7px, liniile nu vor funcționa.
Iată capturile de ecran:
Acordați o atenție deosebită acelei ultime capturi de ecran, deoarece ilustrează modul în care puteți schimba într-adevăr întreaga senzație de rețea prin distanțarea acesteia sau prin decuparea pe ea. Un model rigid de hibrid poate face o textura extraordinara la fel de bine ca un model de suculenta mare. Redați cu spațierea și lățimea liniei până când sunteți mulțumit de rezultate.
Acest model următor este destul de ușor, deoarece în esență folosește doar ideile de tip crosshatch (folosind doar o linie în loc de două, desigur!). Diagramele simple cu linii diagonale reprezintă o modalitate excelentă de a adăuga textură subtilă în spatele textului (cum ar fi titlurile) deoarece adaugă un caracter fără a face textul necitit.
Pentru linia diagonală, mergeți mai departe și începeți cu un document de tip crosshatch - dar de această dată, eliminați una dintre linii înainte de a vă salva modelul (Edit> Define Pattern). Mărimea documentului în acest caz va fi crucială, deoarece se corelează direct cu legătura strânsă a liniilor.
Capturile de ecran:
Cea de-a doua imagine arată cum, prin reglarea distanței dintre document și greutatea și direcția liniei, puteți obține o gamă foarte largă de modele. Nu prea înșelătoare?
Bacsis: Pentru puriciștii de acolo puteți obține o linie mult mai curată, mai clară, trecând prin linia dvs. - pixel cu pixel - și eliminând oricare dintre "feathering" pe care l-am văzut din rendering-ul Photoshop. Acest lucru se întâmplă în mod esențial pentru că Photoshop desenează o linie anti-aliată, unde dorim în mod ideal o linie pixelată. Pixelii sunt atât de mici, deși, în cele mai multe cazuri, nu contează nici un fel. Iată doar o captură de ecran a versiunii super-clare doar în cazul în care doriți să o vedeți.
În regulă, așa că am scăpat de elementele de bază! Acum, să adăugăm doar un pic mai mult personalitate folosind două tehnici mai rapide: Adăugarea de culoare și textura.
Partea de culoare este probabil destul de ușoară dacă nu ați dat seama încă. Doar adăugați culoarea la fundal și linii până când veți avea efectul dorit. Sfaturile mele: păstrați contrastul scăzut - nu este nimic mai neplăcut decât un model prea vibrant.
Partea texturii este mai dificilă. Textura a fost întotdeauna un lucru notoriu dificil de a stăpâni pe web. De ce? Deoarece în cele mai multe cazuri textura se repetă? iar majoritatea oamenilor îl pot vedea la o milă distanță. Chiar și texturile cu rezoluție înaltă vor repeta și arăta separarea plăcilor, dacă nu folosiți imagini uriașe (cum ar fi 1920 x 1080)? care nu este întotdeauna o soluție practică.
Trucul cu modele texturice?
În părțile ulterioare ale acestei serii de tutorial vom examina cum să creăm niște texturi avansate? dar pentru a rotunji până astăzi, să ne uităm la un model foarte simplu, cu un pic de grunge la ea. Pașii:
Și capturile de ecran:
Și nu în ultimul rând, să aruncăm o privire ultima la cele patru texturi pe care tocmai le-am creat:
Bonus Sfat 01: Când salvați modelul (Editați> Define Pattern), rețineți să ascundeți stratul de fundal dacă doriți să creați un model transparent. Uneori, veți dori de fapt să salvați culoarea de fundal, dar de alte ori poate fi foarte util pentru a putea suprapune un model pe o altă culoare, fără a fi nevoie să reveniți la fișierul original și să efectuați modificări. Evident, folosirea culorilor albă sau neagră este cel mai bun pariu în ceea ce privește extinderea utilizării acestor modele transparente.
Bonus Sfat 02: Am trecut peste cum să transformăm aceste modele în "modele" care pot fi folosite de Photoshop (sau Fireworks), dar cum le folosim pe web? Ușor de fapt - la fel ca fișierele .GIF, .PNG sau .JPG (recomand PNG pentru modele transparente). Apoi, trebuie doar să le adăugați în folderul web și să le folosiți ca imagini de fundal prin CSS! Amintiți-vă să setați valoarea "repetați" dacă doriți ca ei să se potrivească pe întreaga pagină.
În regulă! Deci, sper că ați scăpat ceva din această primă sesiune. Până acum, ar trebui să aveți o bună înțelegere a conceptelor teoretice în spatele modului în care funcționează modelele - și o înțelegere tehnică a modului în care să le creați și să le utilizați în Photoshop. Puteți salva toate fișierele pe care le-am creat aici ca fișiere .GIF, .PNG sau .JPG și le puteți folosi instantaneu și pe web? dar tocmai am început doar.
În următorul nivel al acestei serii vă vom arăta cum să creați câteva modele de fundal "zgomotoase" care vă fac să jurați că le puteți atinge. Vom atinge, de asemenea, modul în care se pot crea modele de textură avansate, modele bazate pe spae, modele transparente și multe altele în viitor.
Abonează-te sau verifică din nou pe site pentru a vedea toate actualizările acestei serii în momentul în care se întâmplă!
Accentsconagua