Cum Se Fac Anteturi Pentru Site-uri Web

Cuprins:

Cum Se Fac Anteturi Pentru Site-uri Web
Cum Se Fac Anteturi Pentru Site-uri Web

Video: Cum Se Fac Anteturi Pentru Site-uri Web

Video: Cum Se Fac Anteturi Pentru Site-uri Web
Video: 11 Tips For Designing A Great Website Header 2024, Mai
Anonim

Principiul „a fi întâmpinat de haine” este valabil nu numai pentru oameni, ci și pentru site-uri. Rochia site-ului este designul său. Și designul determină impresia pe care vizitatorul o are în primele câteva secunde de vizionare a resursei. Această impresie este deosebit de importantă, deoarece determină comportamentul său viitor. Primul element de design pe care îl vede fiecare utilizator care vizitează site-ul este „antetul” său. Capacul este fața resursei web. Prin urmare, fiecare designer de web novice dorește să învețe în primul rând cum să facă anteturi pentru site-uri.

Cum se fac anteturi pentru site-uri web
Cum se fac anteturi pentru site-uri web

Necesar

  • - acces la internet;
  • - browser modern;
  • - editor grafic raster (GIMP, Photoshop);
  • - opțional: editor de grafică vectorială (CorelDraw);
  • - opțional: mediu de modelare 3D (Blender, 3DStudio);
  • - opțional: coală de hârtie, creion sau stilou.

Instrucțiuni

Pasul 1

Elaborați un concept pentru viitorul antet al site-ului. În mod ideal, conceptul ar trebui să se bazeze pe ideea originală. Atunci când ideile lipsesc, inspirația poate fi câștigată analizând soluțiile bune existente. Reflectați rezultatul cercetării creative sub forma unei schițe pe o bucată de hârtie. Schița ar trebui să reflecte structura viitorului antet al site-ului, cu indicarea locurilor și a zonelor „din cauciuc” umplute cu imagini. În acest stadiu, este o idee bună să vă gândiți la o schemă de culori aproximativă pentru proiectarea antetului.

Pasul 2

Selectați dimensiunea antetului. De fapt, merită să definiți în mod clar doar unul dintre parametrii săi - înălțimea. De regulă, înălțimea antetelor site-ului este fixă și nu depinde de rezoluția logică care afectează parametrii de afișare a fonturilor. Cu alte cuvinte, ar trebui să alegeți o valoare pentru înălțimea antetului în pixeli. În acest caz, este logic să se ia în considerare posibilitatea de a plasa bannere sau blocuri de publicitate contextuală în antet. În ceea ce privește lățimea, ar trebui să determinați valoarea minimă, evidențiind cel puțin o zonă "din cauciuc" care permite antetului să se adapteze la diferite dimensiuni ale paginii web.

Pasul 3

Creați un șablon de antet într-un editor grafic. Într-un document nou, adăugați un strat transparent la care veți trage schița în funcție de parametrii geometrici selectați. Înălțimea stratului trebuie să se potrivească cu înălțimea antetului. Lățimea poate fi luată ca arbitrară, dar mai mare decât dimensiunea minimă, lăsând spațiu pentru zonele orizontale „din cauciuc”. În șablon, desemnați zone de dimensiuni fixe și variabile, zone destinate a fi umplute cu imagini statice, imagini de fundal.

Pasul 4

Căutați sau creați imagini statice pentru a le plasa în șablonul de antet. Logo-ul și câteva elemente unice pot fi create într-un editor de vectori sau un mediu de modelare 3D. Este destul de ușor să găsiți imagini tematice pe photobanks gratuite pe Internet.

Pasul 5

Introduceți fundalul, sigla și imaginile statice în șablonul de antet al site-ului într-un editor grafic. Adăugați fundalul și fiecare imagine la un strat transparent separat. Aranjați straturile în cel mai bun mod. Prin mișcarea imaginilor în straturi, atingeți aspectul perfect, corespunzător șablonului creat anterior.

Pasul 6

Salvați imaginea antetului rezultată. Salvați proiectul de lucru în formatul nativ al editorului grafic. Apoi salvați imaginea de antet aplatizată într-un format fără pierderi (de exemplu, PNG).

Pasul 7

Creați un șablon de antet HTML dacă este necesar. Deschideți imaginea aplatizată în editor. Decupați din ea imagini care corespund unor zone de dimensiuni fixe. Din locurile corespunzătoare zonelor „de cauciuc”, decupați imaginile cu lățimea de 1 pixel. Salvați toate imaginile pe disc. Aranjați antetul HTML folosind imaginile salvate.

Recomandat: