Share
Astăzi, în partea a doua a acestui tutorial masiv, vom continua această sesiune cu a doua zi de design. Am creat deja pagina de pornire - așa că acum vom proiecta cele patru pagini de suport care formează restul site-ului complet (Portfolio, Blog List, Blog Post și pagina Formular de contact). Să ne scufundăm în noi?
Veți găsi o mulțime de tutoriale de web design și dezvoltare în rețea? dar foarte puține tuts care te iau de la început până la sfârșit. Multe tutoriale sunt doar pentru proiectare, iar altele sunt doar pentru codificare. Astăzi începem o nouă serie în care vom proiecta și dezvolta un site complet de la zero; Vă vom duce de la schema inițială la proiectarea completă a site-ului (inclusiv 5 pagini). Apoi, vom codifica designul (în Nettuts, desigur) și în final vom transforma această temă completă XHTML într-o temă WordPress de lucru!
Verificați întregul proces așa cum se întâmplă la pagina noastră de sesiuni!
Să examinăm pe scurt obiectivele noastre de proiect pe care le-am înființat în prima zi:
Scopul nostru este de a proiecta și de a dezvolta un design simplu de site cu un aspect modern care să conducă la sisteme CMS cum ar fi WordPress. Nu vom aplica niciun fel de efecte de stil sălbatic și nebun în designul nostru (punctul de aici este să îl păstrăm simplu), dar vom aborda întregul proces, de la început până la sfârșit, ca un studiu în aspect și o utilizare corectă de margini și de umplutură.
Vom folosi sistemul de grilă 960 de la început până la sfârșit - și acest lucru nu va fi diferit pentru sesiunea de proiectare a Zilei a Doua.
O schiță scurtă a cursului. S-ar putea să distrugem acest lucru în mod diferit odată ce am lovit faza de codificare, dar asta ar trebui să vă dau o idee bună despre locul în care mergem cu această serie:
Să începem să aruncăm o privire asupra a ceea ce vom crea:
Faza de proiectare de astăzi este împărțită și în patru părți și vom proiecta toate celelalte pagini ale Iconify în această sesiune. Așa cum am proiectat deja pagina de pornire, sarcina noastră principală a fost finalizată - așa că trebuie doar să completați spațiile libere pentru restul sitemap-ului.
Acesta este un pas crucial care este adesea trecute cu vederea în multe proiecte de proiectare, dar proiectarea unor specificații pentru aceste pagini de suport este ceva ce nu doriți să săriți. Amintiți-vă că un design al site-ului web nu este complet după ce ați configurat pagina de pornire - cel puțin veți avea nevoie de câteva template-uri suplimentare destinate paginilor suplimentare care alcătuiesc un site.
Întrucât aspectul nostru este destul de clar, vom schimba suprafața principală a conținutului pentru fiecare pagină. Elementele de site-uri universale (Header, Navigation, Footer) vor rămâne aceleași de la o pagină la alta. Acest lucru este important pentru a păstra o bază solidă pentru site, astfel încât utilizatorii să știe întotdeauna unde se află.
Pagina Portofoliu este prima pagină de suport pe care o vom proiecta. Amintiți-vă că folosim sistemul 960 Grid pentru întregul design al site-ului, așa că vom folosi aceeași structură de bază și aceeași structură a coloanei pe care o configuram pe pagina de design.
Creați un duplicat al index.psd fișier și redenumiți-l la portfolio.psd. Deschide-l cu Photoshop. Ștergeți totul din interior conţinut grupa de straturi, cu excepția bg strat.
Acum creați straturile "breadcrumbs" și "notes" pentru pagina de portofoliu. Pentru forma de fundal "note", utilizați aceleași stiluri de strat ca și noi proiect recent„s bar dreptunghi. Utilizați imaginea E - 1a ca îndrumare.
Apoi, vom folosi o tehnică simplă pentru a lucra într-o varietate de variații ale coloanelor din interiorul acestei pagini pentru articolele din portofoliu.
Utilizați tehnica de creare a imaginii din prima zi (Pasul C3) pentru a crea două elemente de portofoliu de coloană, după cum se arată în imagine E - 2a. Dacă vă amintiți, pur și simplu trageți în dreptunghiuri care se potrivesc cu ghidajele coloanelor, aplicând un stil de strat și apoi decupați imaginile pentru a crea un efect subtil de margine.
Acum repetați aceeași tehnică pentru trei elemente de coloană și patru coloane de portofoliu. Utilizați imaginea E - 2b și E-2c ca îndrumare. Rețineți că vom răsturna între diferitele straturi de ghidare 12_ coloană și coloană 16 pentru a obține acest lucru perfect. În cele din urmă, organizați-vă straturile după cum se arată în imagine E - 2d.
Pagina Blog List este destinată să fie locul în care sunt afișate "fragmente" ale fiecărei postări de blog. Aceste "fragmente" sunt de asemenea numite elemente "buclă" - și de obicei sunt compuse dintr-un titlu, o imagine miniaturală, o previzualizare scurtă de text și câteva meta-informații (cum ar fi data,.
Ca și în cazul ultimei pagini, vom începe prin crearea unui duplicat portfolio.psd pagina și redenumirea acesteia blogs.psd. În interiorul fișierului blogs.psd, ștergeți totul din dosarul de conținut, cu excepția bg, firimituri de pâine, și pagini straturi. Acum avem un dosar gol de bloguri, putem începe să-l populăm cu conținut.
Pentru prima dată vom folosi un aspect de blog cu două coloane standard - unul pentru conținut și altul pentru bara laterală. Utilizați imaginea F - 1a ca ghid pentru a proiecta conținutul blogului și al barei laterale - observați că am plasat linia verticală de separare între două straturi de coloană, astfel încât acesta este perfect distanțat.
Proiectarea reală aici este destul de simplă, astfel încât nu vom merge în prea multe detalii - trebuie doar să urmați regulile stabilite pentru straturile de tip (textul roșu din exemple) și să utilizați toate stilurile pe care le-am setat deja în celelalte pagini. Luați notă specială cu privire la spațiul dintre elemente (marcat și în textul roșu), deoarece vă va spune exact unde să plasați totul.
Când ați terminat, organizați-vă straturile așa cum se arată în imagine F - 1b.
Acum, când avem pagina de configurare a listei de bloguri, avem nevoie de un șablon pentru fiecare post de blog complet. Aceasta este o pagină destul de gravă în ceea ce privește conținutul, pentru că trebuie să planificăm și un sistem de comentarii și o mulțime de alte detalii. Acordați o atenție deosebită exemplelor din această secțiune!
Încă o dată, începeți prin redimensionarea blogs.psd fișier cu un nume de Blogul-post.psd. Interior Blogul-post.psd, ștergeți tot conținutul listei de bloguri astfel încât să putem începe proaspete. În secțiunea de conținut, apucați instrumentul dvs. de text și începeți să populați cu text și imagine, după cum se arată în imagine G - 1a.
Desenați un dreptunghi și aplicați aceleași stiluri de straturi proiect recent„s bar din fișierul index.psd. Utilizați-l cu conținut și poziție, după cum se arată în imagine G - 2a. Pentru stilurile de riglă orizontală, verificați imaginea G - 2b.
Desenați un dreptunghi cu lățimea de 630px și orice înălțime pentru acum. Numeste bg și plasați-o într-un grup de straturi numit comentarii. Copiați stilurile de straturi din bg-ul popular al căsuței poștale, apoi lipiți-l pe acest strat. Utilizați imaginea G - 3a ca îndrumare.
Pentru săgețile cu cutiile de comentariu, trageți un triunghi în caseta de comentarii (permiteți Adăugați în zona de formare în timp ce desenați) măsurați 10X10px rotiți săgeata și poziționați-le așa cum se arată în imagine G - 3b și să aplicați stilurile straturilor așa cum se arată în imagine G - 3b.
Părăsim o margine stângă de 40px pentru al doilea comentariu pentru a indica faptul că acesta este un răspuns. Folosind aceeași tehnică, putem merge chiar mai adânc - afișând o a treia, a patra, sau chiar și a cincea adâncime de răspuns doar prin indentarea a încă 40px pentru fiecare nivel. Vom face același lucru și în versiunea XHTML, așa că amintiți-vă aceste reguli de stil de bază.
Desenați un alt dreptunghi cu același stil ca și comentarii„s bg strat și numele acestui strat bg. Plasați-l într-un grup de straturi numit formularul de comentariu. Utilizați imaginea G - 4a ca îndrumare.
Încă o dată, copiați blogs.psd și lipiți-o cu un nume de contact.psd. Deschideți-o în Photoshop. Ștergeți totul cu excepția pesmetului și a barei laterale de la conţinut grup de straturi. Copie formularul de comentariu și lipiți-o așa cum se arată în imagine H - 1a. Încă o dată, introduceți conținutul așa cum este prezentat în imagine.
Veți observa că multe dintre acestea se repetă până acum - suntem doar copiați / lipiți în conținut, potrivind-o în ghidurile pe care le dorim să le folosim și utilizând aceleași stiluri de tipografie și straturi din paginile anterioare.
Lucrurile ar trebui să se miște destul de repede până la terminarea acestei pagini. Puteți repeta același proces de bază pentru cât mai multe pagini de care aveți nevoie pentru a mockup - trebuie doar să vă lipiți de ghidajele coloanelor și să utilizați aceleași reguli tipografice și de stil de bază pentru fiecare design nou și ar trebui să puteți să bateți mai multe dintre acestea pe care le ar putea avea nevoie foarte repede.
Aceasta incheie a doua parte a tutorialului nostru masiv! Până acum, am proiectat site-ul nostru cu succes. În următoarea sesiune (care vine în curând la Nettuts), vom începe procesul de codificare, așa că verificați aici (și la Nettuts) pe măsură ce postăm noi porțiuni din acest tutorial!
Accentsconagua