Aveți un astfel de site web, dar numai cu butoane de mână-de-perle? Nu? Ei bine, atunci vom arăta. Pentru a nu merge și nu căuta în rețea pentru un portal "șubred", ordonează-l "pentru croitorie". Dar mai întâi trebuie să creați un aspect al site-ului.
Ce fel de aspect al site-ului?
Site-uri precum mașini și clădiri sunt afișate pentru prima oară în machete și numai atunci sunt tipărite folosind html. Dacă vorbim de portaluri cu mai multe pagini, aspectul resurselor va consta în layout-urile tuturor paginilor sale.
În cele mai multe cazuri, comenzile de bază, designul și stilul lor sunt identice pe toate paginile. Dar, în centrul tuturor stilisticilor se află proiectarea paginii principale a site-ului. Prin urmare, cel mai adesea este implicată dezvoltarea layout-ului paginii principale a site-ului. Este stilul și elementele sale de design care moștenesc toate celelalte secțiuni ale portalului.
În plus față de pagina principală, se dezvoltă mai multe variante ale designului tuturor secundarelor. După aceasta, una dintre ele este revizuită și aprobată mai întâi de către managerul de proiect și apoi de către client.
În studiouri mari, artistul participă, de asemenea, la procesul de creare și aprobare a aspectului. Perioada de elaborare a variantelor de schiță și numărul acestora este agreată de managerul de proiect cu clientul în primele etape de dezvoltare.
Versiunea finalizată și aprobată a aspectului este transferată artistului de make-up. Pe baza sa, html -verstalschik „bucăți“ pe schiță a aspectului și a produce părțile sale folosind un limbaj hipertext tag-uri.
După o prezentare detaliată, doriți să preluați rapid crearea independentă a aspectului site-ului în Photoshop. Dar mai întâi trebuie să luăm în considerare un set de reguli care trebuie să corespundă cu aspectul grafic viitor.
Semne ale acestei machete a portalului de internet
O miniatură grafică a unei resurse de rețea trebuie să aibă următoarele proprietăți:
5) Nu puteți utiliza imagini de fundal greoaie ca fundal - acestea greutate greu întreaga pagină, și crește timpul de descărcare.
6) Aliniați poziția tuturor straturilor numai cu ghidaje speciale.
7) Când aplicați inscripții în aspectul site-ului în Photoshop, trebuie să utilizați seturi de fonturi standard. Pentru efectele de distorsiune a imaginii, ar trebui folosite imagini separate.
8) La afișarea elementelor formularelor, trebuie să încercați să respectați proporțiile lor standard.
9) Un număr mare de elemente "accesorii pentru ferestre" (butoane, pictograme) sunt plasate într-un fișier separat atașat aspectului.
10) Extingerea și abandonarea listelor și a meniurilor trebuie prezentată în două state (închise și desfășurate).
Acum, când v-ați familiarizat cu modul în care ar trebui să arate un aspect real al site-ului PSD, vom ajunge la afaceri.
Exemplu de creare a unui aspect al site-ului
Mai întâi trebuie să decideți despre opțiunea de plasare a blocurilor principale ale paginii. Acestea includ:
- Pălăria este pe partea de sus. Cel mai adesea, acesta afișează logo-ul și numele site-ului;
- Meniu - include mai multe elemente sau butoane active pentru a naviga prin paginile site-ului;
- Coloanele stânga și dreapta;
- Subsol - situat în partea de jos a aspectului paginii.
Există multe variații în plasarea acestor blocuri una față de cealaltă. În exemplu, versiunea clasică a combinației lor va fi utilizată:
De asemenea, este important să determinați corect dimensiunea aspectului site-ului în Photoshop.
De exemplu, în atribuirea tehnică se indică faptul că acesta va fi un portal cu o lățime fixă pe laturile de mijloc și cauciuc. Pe baza rezoluției minime a ecranului (1024 cu 768 de pixeli), lățimea aspectului este de 1003 de pixeli. Restul (21 de pixeli) se va deplasa în zona derulării (defilare). Latura de cauciuc este de 100 de pixeli. Înălțimea aspectului depinde de dimensiunile date ale elementelor de proiectare. Lungimea medie este de 500-600 de pixeli.
Și acum începe cel mai interesant:
1. Creați un fișier nou și setați dimensiunile aspectului viitor. Pentru aceasta, mergeți la meniul "Fișier" - "Nou". În fereastra care apare, specificați dimensiunea și numele fișierului:
2. Apoi creați fundalul aspectului site-ului. În bara de instrumente, selectați instrumentul Gradient. În panoul superior, setați tipul și culoarea și trageți un gradient peste suprafață. Iată ce sa întâmplat:
3. Marcați suprafața planului folosind ghiduri. În primul rând, vom marca elementele de bază ale aspectului (capace, subsol, meniuri și laturi):
4. Proiectați aspectul site-ului psd începând cu antetul.
- Selectați zona de sub numele site-ului folosind instrumentul "Zonă dreptunghiulară";
- Apoi umplem zona delimitată cu un gradient;
- Utilizați instrumentul "Text" pentru a numi site-ul:
Iată o imagine a designului finalizat. Pentru a edita rapid oricare dintre elementele, este important să păstrați ierarhia de cuibare a straturilor. De asemenea, este important să dați nume semnificative fiecăruia dintre straturi.
Pentru a grupa straturile, trebuie să creați un dosar pentru plasarea lor. Pentru aceasta, faceți clic pe pictograma dosarului din partea de jos a panoului Straturi. Gruparea elementelor apare prin tragerea straturilor în dosarul dorit:
5. Creați aspectul site-ului continuați cu designul barei de meniu, situat chiar sub antet.
- Creați piesa de prelucrat a butonului de meniu într-un fișier separat. Salvăm-o în format psd. Va fi util în viitor:
Ambele părți vor avea aceeași culoare și model. Acestea sunt aplicate folosind instrumentul "Selecție dreptunghiulară" și un gradient. Pentru fiecare dintre pereții laterali, ca și pentru fiecare element, creăm stratul propriu:
7. Acum, să luăm partea de jos a layout-ului site-ului psd. În contrast, panourile laterale se face prin intermediul instrumentului „umplere“ și apoi se termina cu oricare dintre filtrele (elementul de meniu „Filtru“):
8. Pentru a face aspectul mai credibil, în zona de afișare a conținutului, plasați un text cu o imagine. Poate fi preluat dintr-o altă imagine prin glisarea stratului. Dar versiunea finală a aspectului site-ului:
Desigur, acest exemplu nu se pretinde a fi cel mai bun.
În plus față de o combinație armonioasă de culori în aspectul acestui site, puteți adăuga câteva elemente și inscripții. Dar toate acestea se fac în același fel ca cele descrise mai sus.
Ce se întâmplă în continuare cu aspectul site-ului
Și mai departe de această reprezentare grafică a designului, designerul de layout face un aspect al site-ului html. În același timp, toate proporțiile elementelor și părților site-ului sunt păstrate.
Elementele de design care nu pot fi afișate utilizând etichetele html. sunt decupate din aspectul grafic și apoi folosite ca imagini de fundal. În cazul exemplului nostru, astfel de elemente includ desene ale fundalului principal și ale tuturor componentelor. Numele site-ului și logo-ul acestuia sunt tăiate și inserate separat în codul html.
Unele controale care au un design complex sunt, de asemenea, tăiate și utilizate ca imagini de fundal. În exemplul nostru, aceste părți sunt butoane.
Sau poate html dintr-o data?
Structura layout-ului site-ului în html este ineficientă. Multe dintre elementele de design nu pot fi afișate utilizând limba hipertext. În plus, editarea și dezvoltarea unei reprezentări vizuale este mult mai ușoară și mai rapidă.
Articole similare
Trimiteți-le prietenilor: