Există un număr mare de șabloane de site-uri web, dar au un singur dezavantaj - nu sunt unice. Dacă proprietarul site-ului nu dorește ca designul site-ului său să fie repetat în altă parte, poate comanda un șablon de la un designer profesionist sau poate încerca să îl creeze singur.
Este necesar
Programul Adobe Photoshop
Instrucțiuni
Pasul 1
Crearea propriului șablon nu este o sarcină atât de dificilă pe cât ar putea părea la prima vedere. Pentru a funcționa, aveți nevoie de Adobe Photoshop - desigur, trebuie să aveți cel puțin o înțelegere de bază despre lucrul cu acesta. Dar, înainte de a lansa programul și de a începe să creați, trebuie să vă gândiți la viitorul design. Cel mai convenabil mod de a face acest lucru este să vă familiarizați mai întâi cu cel puțin o sută de șabloane gata făcute, să le evaluați avantajele și dezavantajele. Acordați atenție soluțiilor de succes ale anumitor elemente de design. Acest lucru nu înseamnă că le veți copia, dar este destul de rezonabil să luați ca soluții frumoase și convenabile.
Pasul 2
Pe baza analizei șabloanelor altor persoane și a propriei creativități, ar trebui să vă faceți o idee despre cum va arăta site-ul dvs. Cel mai bine este să faceți schițe brute ale viitorului design cu creioane colorate pe coli A4 obișnuite. Ar trebui să începeți să lucrați cu Photoshop numai după ce aveți o idee clară despre ce anume veți desena.
Pasul 3
Porniți Photoshop, creați un nou proiect 1200x1600, setați un fundal transparent. Porniți instrumentul Ruler, dacă nu este deja activat, pentru a face acest lucru, apăsați combinația de taste Ctrl + R. Activați snapping: Vizualizare - Snapping.
Pasul 4
Acum trebuie să împărțim șablonul cu ghiduri care vor arăta marginile elementelor sale - laturi, coloane etc. De exemplu, doriți să împărțiți șablonul astfel încât să existe o coloană îngustă în stânga, o coloană largă în dreapta la dreapta șablonului și să existe spațiu în partea de sus pentru un antet. Aceasta înseamnă că aveți nevoie de trei linii verticale (marginea stângă a șablonului, dreapta și linia dintre ele) și una orizontală, care să arate marginea inferioară a antetului. Pentru a seta o linie verticală, mutați cursorul către rigla stângă pe partea stângă, apăsați V și, în timp ce țineți apăsată tasta, trageți linia în locația dorită. Faceți același lucru cu celelalte două linii verticale. Cele orizontale sunt construite în același mod, se folosește doar rigla superioară.
Pasul 5
Găsiți un fundal pentru șablonul dvs., ar trebui să fie un model mic, care se repetă. Deschideți-l în Photoshop, selectați, copiați. Apoi lipiți în șablon de câte ori aveți nevoie pentru a-l umple cu fundalul. Lipirea se face astfel: „Editați” - „Lipiți”, apoi trageți zona de fundal în locația dorită. Este chiar mai rapid să inserați o imagine utilizând comanda Ctrl + V. Adăugați un fundal pentru antetul site-ului în același mod. Puteți utiliza diverse umpluturi cu gradient pentru a crea un fundal.
Pasul 6
Folosind instrumentul Creion, desenați marginile șablonului, concentrându-vă pe liniile deja trasate (adică deasupra lor). Ați primit baza celui mai simplu șablon, acum trebuie să îl completați cu detaliile necesare - butoane de navigare, linii de meniu, diverse elemente de decor etc. Pentru mai multe informații despre cum să creați butoane și alte elemente, citiți articolele corespunzătoare despre lucrul cu Adobe Photoshop.
Pasul 7
Șablonul este creat, acum trebuie să îl tăiați în bucăți pentru a le introduce în pagina html. Utilizați instrumentul Slice pentru a tăia. Pentru a-l găsi, faceți clic dreapta pe instrumentul Cadru și alegeți Decupare din meniul care se deschide. Acum puteți cuibla șablonul după cum doriți, apoi salvați: „Fișier” - „Salvare pentru web”. În fereastra care se deschide, selectați tipul de fișier: HTML și imagini, specificați numele fișierului: index.htm și salvați-l. Veți avea un fișier index.htm și un folder de imagini cu imagini în felii.
