Share
Este destul de uimitor cât de multă culoare și fundal poate schimba aspectul unui site web. În acest tutorial vom reuni un layout rapid, simplu dar eficient și apoi vom crea variante folosind fundaluri, fotografii și modele. Ne vom uita, de asemenea, cum să facem dintr-o fotografie fotografii, metode de închidere a unei singure fotografii și modalități simple de a crea modele de pixeli. Pe scurt, este un tutorial plin de gemuri!
Această postare este Ziua 1 a Sesiunii noastre de Web Design. Sesiunea de sesiuni de creație Ziua 2 "
Deci, prima noastră sarcină este de a proiecta un aspect pentru pagina noastră. Nu vom face nimic prea fantezie, deoarece tutorialul este despre fundaluri mai mult decât layouts. Totuși ar trebui să arate bine și să fie un aspect real. Deci, în imaginea de mai sus puteți vedea planul meu de componente brute ale paginii. Am planificat într-un meniu și submeniu, un panou pentru a introduce secțiunea și o zonă de conținut. De asemenea, am planificat ca aceasta sa fie mai mica de 1000 de pixeli, astfel incat atunci cand o persoana pe un mic ecran vizualizeaza site-ul ei inca mai vad fundalul corect (din moment ce aceasta va fi o mare caracteristica a design-ului).
Acum ar trebui să subliniez în realitate că nu am desenat acest set de cutii ca asta. Era mai mult ca și cum m-aș fi rătăcit până am crezut că "oooo este un aspect frumos". Dar, în scopul acestui tutorial, este mai bine să explicăm acest lucru!
Așa că aspectul este oasele noastre, acum trebuie să-l caram cu ceva conținut fals și o schemă de culori.
După cum puteți vedea că nu am făcut nimic cu adevărat uimitor aici, am plasat elementele pe pagină destul de elegant și uniform. Deci, rețineți că spațierea. În imagine am încercat să arăt modul în care diferite elemente se aliniază (linii galbene), cum spațierea este aproximativ chiar verticală și orizontală, precum și elemente deasupra și dedesubt.
Rețineți că acestea sunt doar ghiduri dure și de fapt lucrez doar cu ochii până când lucrurile arată bine. Dar dacă nu sunteți siguri de spațiere, de a face lucrurile în mod egal nu este un loc rău pentru a începe. Pe măsură ce vă simțiți mai confortabil cu distanțele, puteți să modificați lucrurile și să jucați cu balanțe neuniforme.
În imaginea de mai sus puteți vedea că am selectat o tipă de afișare principală numită Rockwell pe care o vom folosi în panoul de titlu pentru a da paginii un pic de caracter. Dacă am fost construirea acestui site care ar putea fi o imagine sau inserat folosind sIFR. Restul textului este Helvetica și Arial, care, desigur, este potrivit pentru utilizarea HTML. De asemenea, am aruncat o ilustrație vectorică a unui plan de hârtie pe care l-am desenat cu ani în urmă și am vândut ca stoc. Desigur, într-un proiect real, această imagine ar fi ceva de-a face cu site-ul în loc să fie aruncat în mod aleatoriu așa cum am aici.
În cele din urmă am folosit o paletă de tonuri calde, de pământ. De fapt, sunt un fan al culorilor bej și pământ și veți găsi că le folosesc foarte mult. Cred că acestea merg mult spre a face site-urile să pară mai prietenoase și mai accesibile.
Deci, pagina este în căutarea de bine, dar nu este nimic memorabil încă despre ea și este un pic de bază. În pasul următor vom adăuga un polonez.
OK asa ca aici puteti vedea exact acelasi layout dar l-am lustruit si am adaugat doua elemente vizuale pentru a da ceva stil. Primul element este ieșirea săgeții din meniul lateral. Acest lucru face ca panoul de mijloc să arate ca un fel de bule de vorbire exagerat. Cea de-a doua viziune pe care o veți vedea atunci când priviți aproape este un fel de temă punctuală.
Astfel, în toate am folosit trei elemente vizuale pentru a da paginii un stil: o ilustrație, o formă interesantă de rupere a grilei și o temă subtilă bazată pe o formă simplă. Mai târziu, vom adăuga un al patrulea element vizual - un fundal - pentru a finaliza stilul site-ului.
În imaginea de mai sus am subliniat toate fragmentele de lustruire pe care le-am adăugat. Este vorba doar de momente minore și de absolvire în culori, puncte și, bineînțeles, săgeata tăiată. Ați putea fi, de asemenea, interesat de un articol anterior pe care l-am scris acum un an despre șlefuirea desenelor web aici pe Psdtuts+.
Deci, cu asta avem structura noastră de bază!
Deci, primul fundal pe care o vom schimba este o imagine cu gresie. În acest caz, folosim o fotografie de iarbă pe care am folosit-o în acest tutorial de text pentru iarbă (o serie pe care am terminat încă :-) Puteți obține fotografia originală de iarbă pe Flickr.
Bineînțeles, dacă încercați să fotografiați fotografia originală, nu va arăta foarte bine și va fi evident că repetăm aceeași imagine mereu. În schimb, trebuie să modificați imaginea astfel încât să fie perfectă. Din fericire tocmai am pus un tutorial pe acest subiect, așa că treceți și citiți:
Odată cu schimbarea de fundal, desigur, am actualizat culoarea pentru a se potrivi aspectului nou. Observați că am evitat să folosesc aceeași nuanță de verde strălucitor și luminos ca iarba - acest lucru ar fi fost puternic. În schimb, luarea nuanțelor de verdeață duller mai întunecată și mai deschisă completează fundalul.
Acum, fundalurile de acest gen sunt perfecte pentru a adăuga straturi transparente deasupra. Aici, atât panoul Despre, cât și meniul au o anumită transparență și arată minunat, deoarece puteți vedea o parte din iarbă care vine și adaugă o anumită adâncime. Deși pur și simplu puteți diminua opacitatea stratului corespunzător în jos, o altă opțiune este de a adăuga încă câteva straturi pe partea de sus - unul cu un gradient ușor decolorat în nimic și celălalt cu un accent de 1px.
În imaginea de mai sus puteți vedea, de exemplu, în meniu faptul că am un bloc de alb setat la 70% opacitate, în plus față de care există un gradient de la alb la nimic, iar în partea superioară este o linie albă de 1px pe marginea de jos. Aceste straturi suplimentare subliniază transparența și dau adâncimea imaginii.
Deci, această transparență este ușor de făcut în Photoshop, dar s-ar putea să te întrebi cât de fezabil este să construiești un astfel de design.
Din fericire, este posibil datorită formatului de fișier .PNG care vă permite să utilizați transparența imaginilor. Un lucru care trebuie avut în vedere este că, în timp ce puteți face transparență (de exemplu opacitatea de 60%), nu puteți face moduri de amestecare a straturilor (de exemplu, Multiplicare sau Suprapunere). Deoarece într-un design Photoshop este important să nu faceți nimic care nu este de fapt construibil, tot ce am folosit este setările de opacitate. E mai limitator, dar totusi poti avea efecte benefice.
Deci, să creăm un test HTML rapid pentru a ne asigura că totul funcționează într-adevăr așa cum ne imaginăm. Pentru a crea un PNG transparent, mai întâi vom îmbina straturile pentru forma noastră de panou mare într-una. Deoarece toate straturile au o anumită transparență, rezultatul final după fuziune este, de asemenea, semi-transparent.
Acum copiați-l într-un document Photoshop nou, apoi opriți stratul de fundal (vedeți imaginea de mai sus) și ar trebui să vedeți transparența afișând.
Acum du-te la Fișier> Salvare pentru Web și dispozitive și alegeți PNG-24 din opțiuni. Ar trebui să vedeți aceeași transparență în fereastra de previzualizare.
Apoi, voi face același lucru pentru mai multe elemente de imagine, deoarece în testul nostru vrem să demonstrăm că este posibil să plasezi un PNG transparent pe lângă un PNG transparent pe fundal.
Cu toate imaginile create, acum este doar o chestiune de a pune împreună unele HTML:
Context / Test de transparență
Deci, tot ceea ce facem aici este stabilirea imaginii de fundal pentru a fi jpg noastre. Apoi introduceți a
Asta va face pentru a dovedi că acest design este construibil. De fapt, va trebui să faceți niște corecții pentru a face să funcționeze în IE6, a Căutare Google dezvăluie o mulțime de articole despre subiect, dar din moment ce acesta este Psdtuts + și nu NETTUTS, îl vom termina aici :-)
Ceea ce este ușor de făcut cu un fundal dur de textura, cum ar fi iarba, este chiar mai ușor de făcut cu texturi mai simple, cum ar fi textura de hârtie de la Bittbox. Deoarece imaginea sursă este mai bună, puteți crea fundaluri mult mai mari pentru fundal, care sunt mult mai puțin probabil să se uite repetate.
O altă opțiune pentru fundaluri sunt modelele simple de pixeli care, atunci când se repetă, oferă un fundal un pic de textură. Modelul prezentat în această variație a aspectului este acela pe care l-am folosit pe Creattica Daily.
Puteți crea astfel de modele cu ușurință. Pentru a face acest efect, trebuie doar să creați o imagine nouă cu dimensiunea de 4px la 5px și să măriți cât puteți, apoi să trageți în pixeli:
Apoi, apăsați CTRL-A pentru a selecta totul și a merge la Editați> Definiți modelul, dați-i un nume, apoi puteți aplica modelul cu un Suprapunerea modelului prin opțiunile de amestecare ale unui strat. Deci, înapoi în fișierul principal PSD faceți clic dreapta pe stratul la care doriți să adăugați modelul, apoi selectați Opțiuni amestecate atunci alege Suprapunerea modelului. În imaginea de mai sus am setat modelul la Multiplica pe un fundal gri închis la culoare.
De fapt, este destul de distractiv să jucați cu aceste tipuri de pixeli. Pixelul iubitor de folk la K10K are o bibliotecă de modele Pixel pe care le puteți verifica, de asemenea, pentru modele mult mai avansate.
Ultima variantă pe care o vom analiza este folosirea unei fotografii unice. Aici folosesc o fotografie frumoasă a West Cliffs de Cristiano Betta pe care am găsit-o pe Flickr:
Este o fotografie largă și plăcută pentru o schemă de culori frumoasă. Deci, iată câteva etape rapide pe care le-am făcut pentru a plasa imaginea.
Aici stă doar în fundalul designului nostru. Cu o anumită transparență, deja arată destul de bine, dar ce se întâmplă în partea stângă sus?
Mutarea fotografiei în jurul a 50 pixeli împinge părțile stranii decolorate din pagină. Următoarea problemă este că nu putem avea un fond fotografic nesfârșit, așa că o vom decolora într-o culoare.
Selectând o culoare mai închisă din mare, creăm un nou strat și tragem într-un gradient care se estompează de la culoare la transparent. Acest lucru se situează frumos deasupra fundalului oceanic și se amestecă.
Acum, fundalul pare de fapt un pic plat, astfel încât ar fi frumos să lumineze culorile un pic. Pentru a face acest lucru, vom suprapune fotografia cu un gradient de culori potrivite în afara imaginii.
În imaginea de mai sus puteți vedea că am tras într-un gradient folosind purpurii și portocalele imaginii originale.
Setează stratul de gradient la Acoperire și 70% într-adevăr luminează apusul soarelui și face să pară mult mai vibrant.
Acum, următoarea problemă este că trebuie să facem mișcarea fotografiei pe margini. Acest lucru va fi dificil pentru că, pe de o parte, avem un munte și pe de altă parte este doar cer. Deci, probabil, cea mai bună soluție este să se amestece în culorile întunecate. Pentru cei mai mulți oameni nu vor vedea acest lucru, este doar pentru toți acei oameni care folosesc un ecran gigant și deschiderea browsere lor dreapta.
Deci, primul lucru pe care îl vom face este să alegeți o selecție verticală de 1px de la fiecare margine exterioară a imaginii și să o loviți CTRL-T pentru ao transforma. Motivul pentru care facem acest lucru este că, dacă vreunul dintre fundal arată prin culoarea pe care o să adaug, nu va arăta ciudat.
Apoi, vom adăuga un nou strat și vom desena într-o elipsă uriașă în fundal, apăsați CTRL-SHIFT-I pentru a inversa selecția și ao umple cu aceeași culoare închisă pe care am folosit-o mai devreme.
Acum, deselectați stratul și mergeți la Filtru> Blur> Gaussian Blur pentru a ne estompa culoarea, folosind o rază de 80 de pixeli. Apoi duplicați acest strat și îl estompeți din nou folosind o rază de 120px, apoi a treia oară cu o rază de 160px. Acest lucru ar trebui să dea o frumoasă absolvire moale.
Deci, designul nostru final cu fundal foto pentru majoritatea oamenilor va arata ca imaginea de mai sus. Dar putem fi siguri că nici o fereastră imensă a browserului nu va dezvălui nimic prostește.
Puteți afla mai multe despre proiectarea cu imagini de fundal mari prin citirea acestor trei articole minunate:
După cum puteți vedea, am obținut o mulțime de kilometri din structura noastră simplă și, sperăm, de-a lungul felului în care ați obținut ceva util din acest proces!
Această postare este Ziua 1 a Sesiunii noastre de Web Design. Sesiunea de sesiuni de creație Ziua 2 "
Accentsconagua
