Bazele de web-design. Schițe. Dezvoltarea schiței
- Materialul anterior - Bazele web-design-ului. Schițe. Ce trebuie să știu înainte de a începe să lucrez pe acest site?
Cum să începi să desenezi o schiță?
Trebuie să începeți cu presupunerea că clientul poate respinge desenul dvs. fără a explica motivele. Ei bine, nu-mi plac, asta-i tot! În general, potrivit statisticilor, doar 6% din populația adultă își poate explica în mod inteligibil și rezonabil atasamentele și disprețurile. Clientul nu poate pur și simplu tolera culoarea verde și nu o puteți ajuta. Mai bine, într-adevăr, dacă învață despre asta în avans.
De aceea, schița poate fi unică numai dacă lucrați pentru dvs., iubitul vostru. Cel mai bine este să desenați trei variante, diferite, aspectul materialului și schema de culori. Procedând astfel, vă oferi clientului posibilitatea de a alege de la: „culoare ca prima schiță, text puțin mai mare decât al doilea, dar în același font, și au nevoie de undeva să rămânem aici că kartinochku frumos al treilea.“ Făcând o singură schiță, riscați să "nu, ceva nu este corect". Nu știu ce, dar nu-mi place! ", Și totul poate fi început din nou.
Să presupunem că site-ul pe care îl construiți ar trebui să conțină o mulțime de informații textuale. Pe prima pagină, clientul dorește să plaseze "ceva special". Ce ne dă acest lucru?
Din moment ce experiența cu noi până acum încât pisica a plâns, vom încerca să urmăm calea cea mai mică rezistență. Uită-te la imaginea de mai jos.
Nimic original, nu? Cu toate acestea, de asemenea, din astfel de schițe este posibil să se facă o bomboană. Să ne referim mai mult la acest desen: imaginați-vă că acestea sunt schițe reale, reduse, astfel încât toate detaliile pur și simplu nu pot fi văzute.
Acum să trecem la partea "b", prototipul paginilor de nivel 2. Deoarece textul este partea principală a conținutului unor astfel de pagini, banda cu acesta ar trebui să fie în centrul compoziției. În stânga se poate amplasa bara de navigare, de sus și de jos, de exemplu, bannere. Partea dreaptă rămâne nefolosită, numai proprietarii monitoarelor cu rezoluție mare îl vor vedea. Și din nou - chiar dacă rămâneți în cadrul diagramei prezentate, există o alegere: culori, aspectul butoanelor, designul ilustrațiilor, dacă există, separatoarele blocurilor de text și orice altceva.
Când începeți să schițați, nu vă lăsați însoțit de detalii: lăsați prima schiță (de preferință pe hârtie și nu în Photoshop) să nu fie mai detaliată decât cele pe care le-am desenat. Este extrem de important să se vadă întreaga compoziție în ansamblul ei și apoi va apărea o înțelegere a culorilor care sunt cele mai bune de a alege, cum se fac contururile elementelor, dacă sunt necesare simetrie și geometricitate.
Nu voi ascunde descrierea unuia dintre posibilele abordări a venit destul de sărăcăcios, dar altfel nu ar putea fi: o persoană poate fi instruit să distileze din loc în loc de pixeli în Photoshop, dar chiar primul pas în proiectarea, el poate face doar pe sine, și primul Schița realizată de dvs. vă va oferi un sentiment de încredere în sine. Dar nu vă relaxați: nu există nici o garanție că prima ta capodoperă va fi tradusă în HTML. ;-)
Tehnică pentru schițare
Când creați un fișier nou pentru schița din Photoshop, selectați corect parametrii acestui fișier, va fi mult mai dificil sau imposibil să le schimbați mai târziu, cu condiția să păstreze calitatea imaginii.
Înainte de începerea lucrului, uita-te la elementul de meniu File | Preferințe. În secțiunea Afișare Cursorii au setat tipul de cursor la Dimensiunea pensulei pentru Cursoare de pictură și sunt precise pentru alte cursoare. Dacă nu faceți acest lucru, cu funcții cum ar fi Crop, va fi dificil să lucrați.
Setați rezoluția la 72 de puncte pe inch, această setare este standard pentru grafica web. Dacă doriți să creați o miniatură cu o rezoluție de 600-800 dpi (această abordare este adesea găsit în designeri obișnuiți să lucreze cu presa) și înainte de a fi stocat în formatul corespunzător pentru a reduce rezoluția la dorit, ține cont de faptul că acest lucru nu va funcționa: calitate imaginea va fi pierdută iremediabil. Imaginile fotografice după această procedură pot păstra o calitate acceptabilă, dar toate construcțiile bazate pe primitive grafice vor muri.
Câteva cuvinte despre formatele fișierelor grafice. Imagini constând din grafice. primitive și folosind o paletă limitată, trebuie să salvați în format GIF. Vă permite să determinați manual numărul de culori. Același lucru este valabil și pentru imaginile transparente: elementul de meniu File | Exportarea vă permite să atingeți efectul dorit dacă utilizați formatul GIF89A. Imaginile fotografice sunt de obicei salvate în format JPEG (în acest scop este convenabil să utilizați funcția File | Save for Web). Dacă schița dvs. include ambele tipuri de grafică, imaginea poate fi întotdeauna tăiată în mai multe părți, salvată în diferite formate și apoi îmbinată într-o singură imagine într-un fișier HTML, folosind un tabel.
Rămâne să spunem câteva cuvinte despre text.
Din păcate, foarte puțini designeri novici în procesul de elaborare a schițelor acordă atenție textului care ar trebui plasat pe pagina web simulată. Cu toate acestea, textul este cea mai importantă parte a proiectului. Rețineți cele patru reguli pentru lucrul cu textul:
Prima regulă:
Literele albe pe fundal alb sunt normale. Literele întunecate pe un fond deschis sunt acceptabile. Literele litere pe un fundal întunecat - conceptul dvs. de design ar trebui să fie foarte valoros pentru a necesita o astfel de combinație de culori! Lite alb / albastru / verde / roșu pe fundal negru - nu încercați să numărați, încercați din nou.
Regula doi:
Regula trei:
Fiecare paragraf al textului trebuie să fie separat de celelalte elemente ale paginii de câmpurile culorii de fundal. Textul care "lovește" limitele coloanei în care se află nu poate fi citit.
Regula Patru:
Poate că veți fi dezamăgiți, dar nu voi explica cum să lucrați în mod corespunzător în Photoshop sau cum să realizați acest sau acel efect vizual. Toate acestea trebuie să te înveți. Există suficiente resurse pe Internet și o mulțime a fost dedicată acestui subiect. Du-te pentru ea!
Dacă încă nu vă puteți imagina cum va arăta schița dvs. pe Internet, luați o captură de ecran a ferestrei browserului, deconectați pagina de pe ea și salvați acest fișier pe disc. Acum puteți "pune" în ea oricare dintre schițele dvs. Trebuie doar să completați în zona corespunzătoare a paginii cu o imagine care vă oferă, după repetiție repetată, bare orizontale gri
Prin urmare, dimpotrivă, dacă doriți să vedeți cum arată schemele acestui sau acelui site care vă plac, faceți o captură de ecran, tăiați margini și vedeți ce se întâmplă. O lecție foarte utilă, vă pot asigura!
Cum sa născut acest site
Liniile albastre arată cum sa tăiat schița pentru a produce o pagină HTML. Zona gri este un spațiu gol, aici pe pagina reală este textul. Schița a constat din două straturi: în partea de sus există doar un punct albastru, care se deplasează de-a lungul cuprinsului după cursorul mouse-ului, în partea de jos - totul.
De altfel, partea grafica a site-ului este organizat oarecum diferit: în loc de „tăiat“ un tabel cuprins în mai multe imagini mici, am salvat ca GIF-fișier, folosind tehnologia de introducere Harta sylok Image. despre care vom vorbi într-una din lecțiile dedicate HTML.
Dar schița paginilor de nivel 2:
Schema este aceeași: culoarea albastră prezintă liniile tăiate, două straturi, dintre care unul conține doar un punct albastru. Până acum, este complet neclar de ce este așa și nu altfel, nu-i așa? Nu este nimic: totul va cădea în loc, când vom stăpâni layout-ul meselor. sau atunci când încercați să "colectați" o pagină mai mult sau mai puțin complicată.
Ultimul pas este un fundal dungat. Pentru a obține efectul dorit, trebuie doar să completați zona corespunzătoare a paginii cu o imagine care dă dungi orizontale gri atunci când se repetă. Așa arată când ai 16x măriți (GIF, două culori, 536 octeți, dimensiunea reală este de 10x9 pixeli):
Pe aceasta vreau sa termin discutia despre Photoshop, schite si tot felul de grafice. Data viitoare vom scrie codul pentru cea mai simplă pagină web și vom încerca să ne dăm seama, iar la exercițiile cu grafică pentru web vom reveni puțin mai târziu și deja la un alt nivel. Mult noroc!
- Materialul anterior - Bazele web-design-ului. Schițe. Ce trebuie să știu înainte de a începe să lucrez pe acest site?
Articole similare
Trimiteți-le prietenilor: