5 out of 7 members found this post helpful.
Cum se face o tema wordpress dintr-ul layout .PSD
Cum se face o tema wordpress dintr-ul layout .PSD si m-am apucat de treaba asa ca am sa va arat pe rand, fiecare parte, iar in aceasta parte o sa creeam layout-ul in Photoshop pas cu pas.
Pasul 1: Deschidem Photoshop, cream in document nou cu dimensiunile 1024X768;
Pasul 2: Accesam din bara de meniu, View -> New Guide, la position adaugam 512 px si sa fie bifat vertical; – o sa ne puna o bara verticala pe mijlocul documentului pentru orientare.
Site-ul nostru din cei 1024px pe latine, va avea doar 960px, ramanand 32px in stanga si 32 in dreapta liberi, care vor fi acoperiti de background.
Pasul 3: Adaugati inca doua New Guide ca in pasul 2, tot pe verticala, una la 32px si una la 992px. Intre aceste noi Guide-uri se va afla site-ul nostru.
Pasul 4: Folosind Rectangle Tool (U) creati un Layer care sa cuprinda tot documentul, cu ce culoare vreti, acesta va reprezenta background-ul site-ului.
Pasul 5: Adaugati doua NEW Guide, de aceasta data pe orizontala, cu urmatoarele pozitii: prima 10px, a doua la 120px, intre acestea doua va fi continutul headerului ! lasam sus 10px gol, poate avem ceva toolbar si astfel sa fie vizibil continutul peste care vine toolbar-ul;
Pasul 6: Intre aceste 2 Guides, tot cu Rectangle Tool, adaugati un dreptunghi care va avea dimensiunile 1024 x 110 px; vezi si imaginea de mai jos, doar ca mie imi arata toate guide-urile.
Pasul 7: Trasati din nou 2 Guide-uri orizontale, una la 130px si cealalta la 160px, dupa care cu Rectangle Tool creati un dreptunghi cu dimensiunile 960 x 30 px si il pozitionati intre guide-urile create la acest pas si cele de la pasul 3, pentru a fi centrat; (vezi si imaginea de mai jos)
Pasul 8: Trasati doua guide-uri, una verticala la 352px si una orizontala cu 10px mai jos decat meniul, ca sa adaugam sidebar-ul, adica la 170px. Trasati un dreptunghi intre aceste guide-uri cu latimea de 320px, iar de lung cat vreti voi; (vezi imaginea de mai jos)
Pasul 9: Mai punem o linie ajutatoare cu 10px mai la dreapta de sidebar, pentru spatiu intre slide-ul ce il creeam si sidebar. Va fi verticala si la positia 362px . Acum una orizontala la pozitia 400px, pana acolo va fi slide-ul de lung.
Pasul 10: Cu Rectangle Tool, creeam un dreptunghi intre aceste guide-uri care va reprezenta background-ul la slide-ul nostru. Dimensiuni: 632 x 230 px. (vezi imaginea de mai jos)
Pasul 11: Postarile pe site vreau sa fie pe doua coloane, asa ca va trebui sa creeam un dreptunghi care sa ne reprezinde background-ul coloanelor. Pentru asta creeam o noua linie ajutatoare, orizontala la pozitia 410px, pentru a lasa spatiu intre slide si acest box. Cu Rectangle Tool trasati acest box, aliniat cu aceasta linie ajutatoare si cu slide-ul de mai sus, cu dimensiunile 310 x 200 px. (vezi imaginea de mai jos)
De alte elemente nu mai avem nevoie, sidebar-urile le vom duplica direct in cod, la fel si aceste box-uri, iar ga background la footer vom folosi cel creat la meniu.
Culorile si stilurile dreptunghiurilor le puteti alege cum vreti, iar in urmatoarea parte (in curand), vom transforma acest layout in CSS si HTML, intr-un stil prietenos cu SEO si pe urma o vom transforma in tema WordPress.
3 out of 3 members found this post helpful.
Pentru lenesi:
Downloadati si folositi un grid system: 960 Grid System
Si pentru avansati: Unsemantic CSS Framework
Trust, but verify.
Răspunde cu citat
Postat în original de Dan
