Share
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!
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, deci dacă v-ați întrebat vreodată cum este să folosiți sistemul, acum este un timp excelent pentru a învăța! Vom face câteva abateri de la normă, dar în cea mai mare parte vom folosi 960g în fazele de proiectare și de codificare.
Odată ce sunteți băieți / galași ați terminat, sunteți bineveniți să personalizați designul tot ce vă doriți cu propriile fonturi, culori, stiluri și texturi! Amintiți-vă, acest lucru este doar un punct de plecare - sunteți bineveniți să mergeți la fel de nerăbdători pe cât doriți atunci când vine vorba de personalitatea propriei versiuni a designului.
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:
Resursele utilizate pentru acest proiect
Puteți utiliza resursele proprii dacă doriți, dar aici este lista completă a imaginilor și a icoanelor pe care le-am folosit în tutorial:
Deci, fără altă întârziere, să începem în faza de proiectare! Această fază de proiectare este împărțită în două părți. Astăzi, vom aranja schema cu ajutorul sistemului 960gs și vom proiecta pagina de pornire. În a doua parte (care vine săptămâna viitoare), vom proiecta celelalte pagini de suport.
Principalul lucru pe care veți dori să îl urmăriți astăzi este modul în care vom folosi împreună două variații ale modelului 960gs (un aspect de 12 coloane și un aspect cu 16 coloane) împreună în același fișier. Voi explica mai multe despre acest lucru mai târziu, dar urmăriți când vom folosi fiecare aspect diferit, deoarece acesta va juca un rol important în faza de codificare mai târziu!
Cele patru sub-părți de astăzi sunt:
Pe măsură ce vom lucra cu sistemul de rețea 960, continuați și aruncați sistemul de rețea 960 de aici (sau să-l apucați de la 960.gs dacă această legătură va coborî vreodată).
În directorul principal (ceea ce tocmai ați descărcat de la http://960.gs), accesați "templates-> photoshop" și deschideți "960_grid_16_col.psd" în Photoshop. Redenumiți acest fișier la "index.psd" și salvați-l într-un folder nou ales de dvs., după cum se arată în imagine A - 1a.
Acum, când avem setarea fișierului cu 16 coloane, vrem să importăm de asemenea stratul de ghidare din fișierul cu 12 coloane.
Deschideți caseta "960_grid_12_col.psd "din Photoshop (din același director ați deschis fișierul" 960_grid_16_col.psd ". Acum deblocați layerul și poziția" 12 Col Grid ", apoi glisați-l la noul nostru creat index.psd fișier așa cum se arată în imagine A - 1b și A - 1c. De asemenea, deblocați stratul și poziția "grid_16_col".
S-ar putea să vă întrebați "De ce ar trebui să folosesc două fișiere de rețea diferite"Deoarece grid_16 nu ne poate da trei coloane egale, trebuie să folosim și grid_12. Sistemul 960gs este de fapt construit pentru a fi folosit în acest fel, astfel încât să nu provoace conflicte pe linie. utilizați aceste două grile în faza de conversie XHTML.
Selectați straturile "grid_12_col" și "grid_16_col", apoi selectați "Aliniați marginile superioare" și "Aliniați centrele orizontale" din panoul de opțiuni, după cum se arată în imagine A - 1d (în timp ce selectați aceste opțiuni, asigurați-vă că ați activat de asemenea Mutați instrumentul (V)). Și rezultatul final ar trebui să arate ca imagine A - 1d.
Este timpul să ne înființăm liniile directoare și conducătorii pentru a ne poziționa cu ușurință elementele. Accesați "Editare-> Preferințe-> Unități și conducători" sau apăsați "Ctrl + K" pentru a apela Preferințe caseta de dialog. Apoi selectați fila "Unități și conducători". În panoul "Unități și conducători" Unități sub-secțiune, setați "pixeli" pentru opțiunile "Rulers" și "Type" așa cum se arată în imagine A - 2a.
Acum, selectați fila "Ghidaje, grilă și felii" și în meniul său Grilă sub-secțiune, valoarea setată "100" și unitatea la "pixeli" pentru opțiunea "Gridline every". Și setați "10" pentru câmpul "Subdiviziuni" așa cum se arată în imagine A - 2b.
Acum, apăsați "Ctrl + Alt + C" sau mergeți la "Image-> Size Canvas" pentru a apela Dimensiunea pânzei caseta de dialog și modificați setările, după cum se arată în imagine A - 3.
Pe măsură ce am crescut înălțimea pânzei, acum trebuie să selectăm și să extindem grilele noastre în funcție de înălțimea documentului nostru.
Selectați atât stratul de rețea, apoi apăsați "Ctrl + T" sau mergeți la "Editare-> Transformare liberă", apoi glisați acele grile așa cum se arată în imagine A - 3b. Acum blocați ambele straturi de grilă și ascundeți stratul "grid_12_col" așa cum se arată în imagine A - 3c.
Implicit am poziționat ghiduri din grid_16_col după cum am pornit de la grid_16_col.psd fişier. Nu avem ghiduri pentru grid_12_col, dar într-adevăr nu avem nevoie de ele deoarece vom folosi doar grid_12_col în situații rare.
De asemenea, puteți verifica grilele și ghidajele documentului prin apăsarea "Ctrl +" (View-> Show-> Grid) "și" Ctrl + "(View-> Show-> Guides) A - 3d.
Lățimea documentului este de 1020 pixeli; Când folosim sistemul de grilă 960, ar trebui să folosim 940 de pixeli pentru lățimea conținutului. Vom devi doar un pic din modelul 960, folosind o coloană de stânga și dreapta de 20px (40px total) pentru coloana de conținut. Deci, lățimea noastră totală de conținut va fi de 980 de pixeli. Selectați stratul de fundal și apăsați "Ctrl + Backspace" sau "Ctrl + F5" sau mergeți la "Editare-> Completați" pentru a apela Completati caseta de dialog, apoi selectați opțiunea "Culoare?" din "Utilizare". Și setați valoarea la "e7e7e7" după cum se arată în imagine A - 4a
Dacă aveți probleme în a face acest lucru în versiunile mai vechi ale Photoshop ca CS4, mai întâi "rasterize" fundal apoi aplicați fundalul utilizând pasul de mai sus.
Acum, selectați "Instrumentul rotunjit dreptunghi" setat pe "Radius" la "10 px" în Opțiuni și setați culoarea "prim plan" la "f1f1f1". Desenați un dreptunghi rotunjit în dimensiunea de măsurare a tabloului de bord 980 x 150 pixeli. Denumiți acest strat antetul bg și plasați acest strat într-un grup de straturi și denumiți grupul respectiv Antet. Și organizați paleta de straturi așa cum se arată în imagine A - 4b. Și păstrați întotdeauna straturi de grilă deasupra tuturor straturilor din paleta de straturi.
Pentru a crea un grup, pur și simplu selectați straturile pe care doriți să le setați într-un grup (ținând apăsată tasta Ctrl sau Shift), apoi apăsați "Ctrl + G" sau mergeți la "Layer-> Layers Group". Și pentru a schimba un nume de grup sau un nume de layer, faceți dublu clic pe numele său implicit, apoi va deveni un câmp de text editabil așa cum se arată în imagine A - 4b.
Selectează Convertizor Punct Tool din paleta de instrumente Instrumentul Pen grup. Apoi apăsați "Ctrl + Click" antetul bg dreptunghi și faceți clic pe cele patru colțuri superioare, după cum se arată în imagine A - 4c. Și ștergeți foarte sus două puncte folosind Ștergeți instrumentul Anchor Point din Instrumentul Pen grup așa cum se arată în imagine A - 4d.
Acum antetul bg dreptunghiul ar trebui să aibă o înălțime de 140px, deoarece am șters cele două puncte superioare. Selectați antet grupul de straturi și stratul de fundal selectați apoi Aliniați marginile superioare și Alinierea centrelor orizontale din Opțiuni paletă după cum se arată în imagine A - 4e.
Aplicați un stil de strat în antetul bg folosind setările afișate în imagine A - 4f. Împingeți acest strat cu 1px de sus pentru a ascunde strălucirea de top.
Acum, selectați din nou Instrument rotunjit dreptunghi și desenați regiunea de conținut (măsurând 980 x 1400 pixeli). Numeste bg și plasați-o într-un grup de straturi numit conţinut și să aplicați aceleași stiluri de straturi ca și antetul bg. Desenați un alt dreptunghi (care măsoară 980 x 570px) footer bg și plasați-o într-un grup de straturi numit subsol și, de asemenea, să aplicați aceleași stiluri de straturi. Ștergeți cele două puncte din partea de jos footer bg dreptunghi folosind aceeași metodă de antetul bg. Mențineți distanța de 20px între fiecare secțiune (de ex., Antet, conținut, subsol). Plasați totul așa cum este prezentat în imagine A - 4g.
Aranjarea cu fir a conținutului real ar consuma timpul prețios? Așa că vom merge direct la adăugarea conținutului "real" pentru acest mockup în secțiunea următoare.
Selectează Instrument de linie apoi trageți o linie cu greutatea de 1px și lungimea de 940px (țineți apăsată tasta "Shift" în timp ce desenați linia perfectă). Plasați-l așa cum se arată în imagine B - 1a. Denumiți acest strat HR, umple fundalul cu culoarea cdcdcd și un stil de strat așa cum se arată în imagine B - 1a.
Acum, selectați Instrumentul dreptunghiului și desenați un dreptunghi de 200 x 24px, aplicați stiluri de straturi și plasați-le așa cum se arată în imagine B - 1b. Setați culoarea de fundal la 000000 apoi reduceți opacitatea de umplere la 10%.
Introduceți un text de legătură rapidă în partea stângă a paginii noastre câmpul de căutare. Selectează Instrument de text de la Paragraf și selectați Aliniați textul corect. Apoi introduceți câteva nume de meniu și le separați cu un "|" (bară verticală). Utilizați imaginea B - 1c ca îndrumare. Setați culoarea textului la ababab. Pentru câmpul de căutare tip de etichetă Căutare cu culoarea ababab apoi selectați Instrumentul pentru Shape Custom și din Formă selectați meniul Căutare forma apoi trageți și plasați forma luptei așa cum se arată în imagine B - 1c. Setați culoarea luptei la f1f1f1.
Nu vă voi îndruma cum să creați acest logo, deoarece nu este foarte important să îl duplicați perfect; Sper că veți putea să vă creați cu ușurință propriul logo care să fie utilizat. Plasați logo-ul existent (sau propriul) așa cum se arată în imagine B - 2a.
Selectează Instrument de text, apoi activați Aliniați textul corect din PARAGRAF panoul. Și introduceți câteva nume de meniu utilizând setările așa cum se arată în imagine B - 2b.
Deoarece majoritatea tastaturilor nu au tasta ">>", mai întâi selectați și copiați această săgeată ("), apoi lipiți-o în Photoshop și denumiți acest strat săgeată. Utilizați aceeași culoare ca și culoarea meniului și setați-o Scala orizontală la 150% și selectați săgeată layer (dacă nu deja) apăsați "Ctrl + T" apoi rotiți-o după cum se arată în imagine B - 2c.
Desenați un dreptunghi rotunjit cu o rază de 4px cu orice măsurătoare. Apoi setați culoarea de umplere la d5d5d5, aplicați stilurile de straturi afișate și introduceți câteva nume de submeni, după cum se arată în imagine B - 2d.
Desenați un dreptunghi de 940 x 338px, apoi aplicați stilurile straturilor așa cum se arată în imagine C - 1a. Denumiți acest strat slider bdr. Loc slider bdr în conţinut zona, după cum se arată în imagine C - 1b.
Plasați și selectați o imagine deasupra slider bdr apoi stratul Ctrl + clic slider bdr strat pentru a câștiga zona imaginii cursorului (imagine C - 1c). Apoi mergeți la "Select-> Modify-> Contract" în caseta de dialog Contract set 1px și apăsați "Enter". Acum, apăsați "Shift + Ctrl + i" sau mergeți la "Select-> Inverse" la selecție inversă, apoi apăsați tasta "Delete" de la tastatură. Acum ar trebui să avem un slider de imagine perfect ca pe imagine C - 1d.
Selectează Instrumentul Ellipse și trageți un cerc de 16 x 16 pixeli. Aplicați un stil de strat ca în imagine C - 1e și poziționați-le așa cum se arată în imagine C - 1e. Grupați aceste cercuri și denumiți grupul lor de straturi: radiouri.
În primul rând, vom crea patru articole promoționale pe coloană. Pentru a crea grupul cu patru coloane, activați grid_16_col. Împărțiți cele 16 coloane cu patru și veți găsi patru coloane de lățime egală. Populați coloanele cu conținutul afișat în imagine C - 2a. Apoi, plasați o linie cu aceleași setări de antet„s HR poziționați-o în funcție de imagine C - 2a.
Atunci când se creează reguli multiple de linii, cum ar fi HR și VR, este de obicei important ca acestea să aibă același stil de bază și aceeași culoare.
Aceste icoane provin din tutorial9. Le puteți descărca de aici.
Aceasta este o secțiune promoțională cu trei coloane. Pentru aceasta, vom ascunde grid_16_col și ascunde grid_12_col. Utilizați fiecare a patra coloană ca o singură coloană pentru a plasa elementele promoționale. Mai întâi trageți un dreptunghi cu dimensiunile de 300 x 140 pixeli și plasați-l așa cum se arată în imagine C - 2b. Acum plasați o imagine pe partea de sus a acestui strat, apoi selectați și decupați zonele de imagine (care sunt excesive din zona dreptunghiului inferior) așa cum am făcut-o pentru secțiunea cursor de imagine. Aplicați acum stilurile straturilor așa cum se arată în imagine C-2b.
Să adăugăm un text acum. Selectați Instrument de text și a desena un bloc text ca în imagine C - 2c și tastați unele titluri, de asemenea, tastați o scurtă descriere și un text de legătură așa cum se arată în imagine C - 2c.
Acum faceți un grup cu aceste straturi cu numele de "promo". Apoi copiați și lipiți grupul "promo" de două ori, apoi grupați în cele din urmă toate cele trei grupuri "promo" cu un nume promo-col-3 și poziționați-le și straturile dvs. așa cum se arată în imagine C - 2d.
Selectați Instrumentul dreptunghiului trageți un dreptunghi cu lățimea de 940px și setați înălțimea în funcție de necesități. Umpleți acest dreptunghi cu 000000 culoare și reduceți-l Completati opacitatea la 5% și numește-o testi bg.
Acum, selectați Instrumentul pentru Shape Custom din Formă meniu și selectați Formă triunghiulară. Faceți clic pe Vector thumbnail pentru mască din testi bg strat. Ar trebui să aveți o selecție de formă acum.
Permite Adăugați în zona de formare (+) de la Opțiuni panou și trageți un triunghi interior testi bg formă. Apoi, cu Ștergeți punctul de ancorare instrumentul șterge o parte a triunghiului și așezați-l așa cum se arată în imagine C - 2e.
Apoi, aplicați stilurile de straturi afișate, poziționați-o și umpleți-o cu un text așa cum este prezentat în imagine C - 2f.
Selectează Instrumentul dreptunghiului trageți un dreptunghi măsurând 940 x 40px și denumiți acest strat bar. Puneți acest dreptunghi în interiorul unui grup de straturi și etichetați acest grup proiecte recente. Setați culoarea de umplere a dreptunghiului la FFFFFF, și setați-o Completati opacitatea la 15% apoi aplicați stiluri de straturi dreptunghiului așa cum se arată în imagine C - 2g și poziționați și plasați niște imagini sub el cu setările și poziția afișate ca în imagine C - 2h iar dimensiunile acestor imagini sunt de 220 x 180 pixeli.
Pentru imagini, utilizați aceleași tehnici și stiluri de straturi pe care le-am utilizat pentru promo-col-3 secțiuni. De acum înainte, folosiți aceeași tehnică și stiluri pentru proiectarea oricăror imagini pentru această temă în prima și a doua parte. De ce? Pentru că va ajuta designul nostru să aibă o schemă de stil unificată și consistentă. De acum înainte, voi referi numai la aceste stiluri și tehnici folosind "aplica stiluri de imagine" în loc să repetați toți acești pași.
În subsol grupul de niveluri creează un grup de straturi și îl numește top. În interiorul acestui grup plasați conținutul și formatați-le după cum se arată în imagine D - 1a. Pentru rigla verticală folosiți același stil de culoare și strat de riglă orizontală HR. În cele din urmă, plasați-vă straturile după cum se arată în imagine D - 1b.
Descărcați aceste icoane sociale de la funcția de funcționare și pictograma de pasăre de la webtreats.
Acum creați conținutul principal al subsolului. Populați și poziționați conținutul așa cum se arată în imagine D - 1c. Poziționați straturile așa cum este prezentat în imagine D - 1d.
Selectează Instrumentul pentru Shape Custom, din Formă selectați meniul Triunghi forma și trage un triunghi de 10 x 10px. Completați cu culoarea cdcdcd și aplicați un accident vascular cerebral din stilul stratului așa cum se arată în imagine D - 1e, și denumiți acest strat săgeată sus. În sfârșit, adăugați un text și plasați elementele așa cum se arată în imagine D - 1f.
Acum, design-ul dvs. ar trebui să arate exact ca demo-ul nostru:
Aceasta incheie prima parte a tutorialului nostru masiv! Până acum, am configurat cu succes cadrul de bază pentru site și ne-a proiectat pagina de pornire. În următoarea sesiune de proiectare (care vine săptămâna viitoare), vom proiecta paginile de asistență. În cele din urmă, vom despică designul și îl vom pregăti pentru XHTML și, în cele din urmă, pentru codarea WordPress!
Accentsconagua