Designul unui fan-site pas cu pas

Acest post a fost conceput și pregătit de foarte mult timp. Inițial, trebuia să iasă ca o continuare a ciclului de articole "Crearea unui fan-site" (una și două). Ce caută, așadar, acest articol în blogul Fable 3? Răspunsul este simplu: în cazul designului, fără un exemplu concret, cu greu poți explica ceva. Nu există design sferic în vacuum. Așadar, când acum câteva vreme s-a decis să facem o repornire a uneia dintre fan-site-urile noastre dedicate seriei de jocuri Fable, am decis că acesta este exemplul cu ajutorul căruia voi "împărtăși meșteșugurile".

De fapt, nu am avut ca obiectiv să dezvălui marea taină a universului sau să învăț cum să creezi un design unic pentru fan-site-ul tău printr-un singur articol. Tema design-ului este vastă și multifacetică pentru ca un singur designer să o poată explora complet doar cu un singur exemplu... De asemenea, vreau să menționez de la bun început că aceasta nu este o lecție despre Photoshop. Există destule deja și fără mine, Google te ajută. Ca autor, presupun că ești deja familiarizat cu noțiunile de bază ale funcționalității Photoshop-ului, ceea ce înseamnă că nu te aștepta la instrucțiuni pas cu pas "apăsați aici", "mergeți acolo". Aceasta nu este o lecție de Photoshop, ci un masterclass despre crearea design-ului. Voi explica cum lucrez, voi oferi câteva trucuri și secrete, care nu-s cu adevărat secrete, dar dintr-un motiv anume, sunt adesea uitate. Haideți să începem :)

Pregătim plăcuța de pictură și pânza

În cazul nostru, plăcuța de pictură va fi, cum probabil ați ghicit, Photoshop CS4, iar pânza noastră va fi un fișier nou, gol, deocamdată. Pe lângă "foto-montaje", există și alte programe, cum ar fi Gimp. Unii reușesc să lucreze în Corel Draw. Dar, cum s-ar zice, umanitatea nu a inventat până acum un program mai bun pentru design-ul web decât Photoshop. Acesta este instrumentul principal al designerului web. La fel, Corel Draw sau Adobe Illustrator pot fi utilizate pentru a crea elemente individuale ale design-ului tău, însă "asamblează" un layout cel mai comod în Photoshop.

Am discutat despre "plăcuță", acum e vremea pânzei. Aici merită să ne amintim despre rezoluțiile ecranului. Acum cinci ani, rezoluția 1024x768 domnea peste tot, iar 1280x960 abia începea să capteze atenția oamenilor. Acum câțiva ani, 1680x1050 și 1600x1200 erau considerate rezoluții mari. Astăzi, monitoarele cu Full HD devin din ce în ce mai comune, deci ar trebui să ne orientăm după o rezoluție maximă de 1920x1080. Totuși, 1024x768 nu se grăbește să se retragă complet, deci este pragul nostru minim. De fapt, lățimea este mai importantă, deoarece înălțimea site-ului nostru va fi foarte mare, la fel ca 90% din toate site-urile de pe rețea.

Cândva, era la modă să faci site-uri "extensibile". Adică, elementele individuale ale design-ului erau constituite din elemente repetitive, ceea ce permitea site-ului să se extindă pe lățime în funcție de rezoluția utilizatorului. Însă, odată cu venirea Full HD, această metodă de adaptare a site-ului la rezoluția utilizatorului a devenit estetic neplăcută. Oamenii percep mai bine informația situată la o distanță de o braț armată cu o lățime similară cu cea a unei foi de A4. Tot ce este mai lat nu mai este în focus. Așadar, în ultima vreme, partea de conținut a site-ului este realizată cu o lățime mai restrânsă, iar spațiul rămas pe stânga și pe dreapta este umplut cu un decor de fundal. Așa și oile sunt satifăcute, și lupii rămân întreagă :) Așadar, partea de conținut va avea 1000 de pixeli (nu uitați că în browser pe dreapta există o bară de derulare, care "mănâncă" acei 24 de pixeli din 1024). Astfel, zona pentru "margini" cu decorațiuni de fundal va fi (1920-1000)/2=460 de pixeli pe stânga și pe dreapta. Pentru a nu ieși din această zonă, folosesc ghiduri. În modul de linii activate, pur și simplu trag cursorul și "trag" ghidurile pe locurile necesare. De asemenea, pot să marchezi centrul pânzei noastre. Am măsurat aproximativ înălțimea locului pe care îl rezerv pentru antetul site-ului, în viitor el se va mișca, dar am făcut o "notă" pentru mine. Totul, munca preliminară a fost finalizată. Trecem la pregătire :)

Pregătirea preliminară s-a încheiat

Găsind inspirație

Această etapă este cea mai simplă și cea mai complicată în același timp. Trebuie să aduni materialele din care vom sculpta design-ul nostru. Dacă ești un artist profesionist, desigur, poți să-ți desenezi toate elementele de artă și interfață necesare sau poți încredința asta echipei tale... Pe de altă parte, în acest caz, ce caută tu, Artemie Tatanov Andreevici, în acest articol? :) Acesta este un articol pentru începători. Ne vor trebui elemente de artă și interfete tematice sau măcar cele din care putem să facem aceste elemente. Probabil, că din prima nu vei aduna tot ce ai nevoie pentru munca ta, deci va trebui să te întorci la căutarea artei și inspirației de mai multe ori. Eu încep de obicei cu site-ul oficial, apoi mă mut pe mari site-uri de fani, dacă există. După aceea, trec la căutarea de imagini pe Google și Yandex. Și în special ambele motoare de căutare, deoarece rezultatele sunt foarte diferite. Acolo unde unul nu dă roade, altul găsește tone de material. E bine când sunt multe arte, sunt capturi mari ale interfeței jocului, dezvoltatorul lansează multe fundaluri... dar de cele mai multe ori nu-ți va ajunge nimic.

În urma căutărilor mele, am găsit o mulțime de arte pentru Fable și nu numai, pentru diferite părți ale jocului. Însă pentru cea de-a treia parte, am găsit extrem de puține arte frumoase. Dar tu adună tot: fundaluri, concepte, capturi de ecran... Nu știi niciodată ce îți poate fi de folos. Nu te voi obosi cu o colecție completă a materialelor găsite. În spoiler, vei găsi elementele care au stat la baza design-ului.

Această ramă a fost în final desfăcută în tot felul de elemente de interfață


Primul art normal, găsit pentru cea de-a treia parte

Și acesta este al doilea art. Asta e tot, nu am găsit mai nimic în stilul necesar

Iată, acest art a fost imediat folosit ca fundal. Nu este ideal, dar nu am găsit ceva mai bun.

Arta din partea a doua s-a dovedit utilă deja la finalul muncii

Ce-ar fi fără logo?

Începem munca

Acum putem începe să lucrăm. Îți voi da un mic truc, îmi salvez regulat rezultatul muncii sub un nume nou, păstrând istoricul versiunilor. Implicit, primul rezultat este versiunea 0_1, apoi urmează 0_2, 0_3 și așa mai departe. Versiunea 1_0 apare atunci când consideri că ai făcut tot ce ai vrut și poți să începi să arăți munca ta recenzentilor/prietenilor/cliților. Cel mai probabil, design-ul va necesita ajustări. Atunci vor apărea versiunile 1_1, 1_2 și etc. Este convenabil pentru a-ți urmări progresul propriu și, de asemenea, în cazul în care este nevoie, să ai posibilitatea de a reveni la ideile din versiunile mai vechi sau să iei de acolo un anumit element pe care în versiunea curentă l-ai eliminat sau modificat până la neînsușire.

Și încă un sfat, în Photoshop, toate elementele tale sunt stocate pe straturi separate. Nu te lenevi să le dai din start nume semnificative, iar straturile unui element separat să le grupezi folosind funcția ctrl+b. Când în fișierul tău se acumulează mai mult de 100 de straturi, să te descurci fără etichete și grupări devine extrem de dificil.

Însă, destul cu vorbăria, e vremea să aruncăm o privire asupra primelor rezultate. Deși aceasta nu este prima, este aproape nula:

La acest stadiu, este deja conturată zona pentru conținut, artele sunt plasate orientativ pe locurile unde ar putea fi. Pretutindeni sunt deja elemente vizibile și invizibile, care în continuare trebuie să se integreze în design. Sau nu. Trecem mai departe. La această etapă, de altfel, au fost efectuate două lucrări tehnice importante. Foarte atent, din fundal a fost decupat personajul nostru, iar rama a fost desfăcută în părți mici.

Pentru decupare, folosesc adesea nu radierea, ci măștile de strat. Cu negrul colorăm zonele care trebuie ascunse, iar pe cele vizibile le lăsăm albe. Tonurile gri reprezintă zone de semi-transparentă. Datorită acestui fapt, dacă șterg ceva în plus, poate fi ușor returnat la loc. Personajul tău tăiat la cea mai mare rezoluție l-am salvat separat, ca să nu se piardă.

Rama a fost desfăcută în bucăți prin tăierea curentelor mici și transformarea lor în texturi. Colțurile sunt reflectate de trei ori din colțul stâng sus. Așa am obținut simetria.

Inițial, design-ul a fost planificat să fie sumbru, similars cu primele noastre două lucrări principale. Cu ajutorul pensulelor moi și a diferitelor moduri de amestecare, am reușit să transform dintr-o imagne de fundal, destul de vie, într-o pânză destul de întunecoasă. Partea de conținut am încercat să o reprezint sub forma unei pergamente pliate în trei, care ar trebui să fie încadrată de rama aurită cunoscută. Coroana, ca unul dintre elementele cheie, a continuat să fie prezentă în design. Am început să-mi caut încet un font pentru meniu.

Cu fonturile frumoase în chirilică există o mică problemă. Deoarece, de obicei, pur și simplu nu există. Asta e, există literele englezești, dar nu sunt cele rusești. Fie pentru română se cer mulți bani, fie versiunea rusească este realizată de meșteșugari populari prost și urât. Sau totul este ok, dar fontul nu este lizibil :) Fontul din imagine se numește bonzai. Cui îi trebuie, ia legătura. Îți voi dărui. Hai să mergem mai departe.

După câteva chinuri, începe să ia formă ceva rațional. A fost realizată prima versiune a meniului principal (acesta se va schimba ulterior, dar baza ne va folosi de mai multe ori). Prietenii atenți pot observa că partea stângă și partea dreaptă a acestui meniu sunt coroana noastră combinată cu o volută din ramă. Nu te teme să combini diferite elemente ale interfeței. Împreună, ele oferă deseori un rezultat neașteptat, dar plăcut. În plus, conceptul părții de conținut principale s-a schimbat. Am încercat să reprezint ceva de tip mantie regală, dar rezultatul mi-a plăcut complet. Drept urmare, am luat decizia de a schimba conceptul.

Aceasta nu este încă o nouă iterație, aceasta este, practic, doar o încercare a stiloului: Cum ar arăta în varianta deschisă și fără "mantie"? - Cu siguranță mai bine, dar trebuie să mă gândesc mai departe. Apropo, elementele din stânga sus sunt "literele" fontului fleur. O chestie excelentă pentru realizarea elementelor de interfață. O mulțime de volute și floricele într-un singur flacon.

Și iată ceva nou. Am experimentat cu plasarea eroului nostru în antetul site-ului, dar cel mai important nu este aceasta. Am renunțat la meniul orizontal și am încercat să fac unul vertical. Ce, pare destul de bine. Iar meniul central s-a mutat în footer.

Încă o iterație intermediară, în care am comparat meniul orizontal cu cel vertical, gândindu-mă să fac blocurile laterale extinzibile la click.

Iată-l pe acela, atunci când versiunile anterioare salvate îți vor fi de folos. Designul a început să meargă în direcția greșită. Culoarea pe întreaga lățime a conținutului împreună cu rama din mijloc și cu cadrele reduse pentru blocurile laterale arată prost. Am renunțat la această variantă, m-am întors un pas înapoi și am mers pe un alt drum.

Și iată-l pe momentul adevărului! Revenind un pas înapoi, jonglând cu elementele noastre, în final am obținut un layout, care este deja destul de aproape de final. Toate elementele principale sunt adunate și la locul lor: meniul principal, blocurile laterale, conținutul, antetul și footerul. Dacă te uiți cu atenție, poți observa că unele dintre elementele din iterația anterioară nereușită mi-au fost totuși utile. Structura textuală a fost preluată de la un site despre Dragon Age, doar ca să estimez plasarea textului. Fontul principal folosit a fost Palatino Linotype. Acesta este un font standard frumos, ceea ce este foarte important. În acest caz, site-ul tău se va afișa fără probleme la toți utilizatorii de Windows. Există, desigur, o modalitate de a folosi fonturi proprii pe care site-ul le va încărca în cache utilizatorului, dar aceasta îngreunează traficul și creează probleme de afișare a fontului în diferite browsere. Nu recomand să te implici prea mult în acest lucru. În internet există o tablă excelentă de fonturi standard Windows. Eu folosesc, și de asemenea recomand. La header, poți și chiar trebuie să folosești fonturi decorative. Pentru numele site-ului, tocmai în acest stadiu am găsit un font incredibil, care se numește Algerius Caps. Simte diferența față de fontul anterior!

O etapă foarte interesantă, care ilustrează că chiar și în designul aproape finalizat întotdeauna există ceva ce poate fi îmbunătățit. În primul rând, am renunțat la meniul de jos și l-am transformat definitiv în footer. Ți-aduci aminte că am spus că meniul orizontal ne va fi încă de folos? - A fost de folos. Layout-ul a fost curățat de elemente deja inutile, pentru a nu aglomera design-ul. Dar cel mai important lucru este că coroana a găsit în design un loc definitiv. La revedere, sabia din teacă! Luăm unul dintre artele noastre și tăiem din el mâna cu sabia și coroana. Munca de umplere a logo-ului, care atârna deasupra mănușii, a fost pur și simplu meticuloasă. Acesta este cazul în care un scale de peste 1000% este uneori util. De asemenea, am început să lucrez la corectarea culorilor fundalului. Era prea galben-verzui. L-am estompat. Eu folosesc de obicei un strat suplimentar, umplut cu culoarea dorită cu tipul de amestecare soft light (lumina moale), dar pe măsură ce este nevoie, poți încerca și alte tipuri de amestecare. În acest caz, gama a fost corectată cu ajutorul unui strat albastru.

Am continuat să îmbunătățesc designul. Am corectat plasarea artei pe fundal, am modificat din nou paleta de culori. Am eliminat aproape toată mizeria rămasă din curățarea anterioară, am lăsat doar o volută. Dar am observat, că pe fundalul cerului, numele site-ului arată tern. Prin urmare, am modificat stilul și l-am făcut contrastant cu fundalul, dar totuși folosind culorile principale ale site-ului.

Linia de final

Păraaaam! Iată versiunea 1_0. De fapt, nu este finală, dar exact în acest stadiu am decis să arăt designul prietenilor mei și să ascult critica. Aici nu mai există mizerie, iar fundalul a fost colorat din nou. Dar ce este important, a fost adăugat un meniu cu căutare și butoane de rețele sociale. Inițial, va funcționa doar RSS, dar în curând va fi deschis Twitter, canal YouTube și pagina de Facebook.

Prima observație importantă - eroul nostru este evident singur în header. Are nevoie de companie. Din păcate, nu am găsit arte frumoase feminine pentru cea de-a treia parte, dar a venit în ajutor țiganca din arta părții a doua. Chiar se potrivește. Site-ul nu este doar despre cea de-a treia parte. În schimbul fetei, eroul nostru a trebuit să renunțe la pistol, el a devenit evident de prisos.

Dar asta nu a fost tot, un alt lot de observații a venit. Site-ul a ieșit foarte strident auriu, iar rama aurie a blocului central de conținut mânca prea mult spațiu. Ei bine, am estompat nuanța cu ajutorul efectelor de strat, am micșorat rama. Lanțurile care îngreunau design-ul și complicau layout-ul au fost, de asemenea, îndepărtate. A venit momentul adevărului. Varianta finală:

www.Fable-game.ru

Epilog

De fapt, ne aștepta încă și codarea, care a adus, de asemenea, unele corecții mici. De exemplu, plasarea fundalului și a eroilor relativ la el. Au existat încă modificări în stiluri, căutarea erorilor și neajunsurilor. Dar aceasta este deja o chestiune de tehnică. Cea mai complicată parte este în spate. Când ajungeți la această etapă, puteți să vă relaxați, să vă lăudați și să puneți în portofoliul vostru noua muncă. Iar apoi să începeți să completați și să reîncărcați site-ul cu materiale, să gândiți o structură optimă... dar aceasta este deja cu totul o altă poveste :)

Sper sincer că "povestea mea cu imagini și despre imagini" v-a plăcut, iar mai presus de toate, că vă va ajuta să creați propriile design-uri frumoase, unice și uimitoare pentru site-urile voastre. Aștept întrebările, sugestiile sau comentariile voastre.

*Autorul design-ului și textului sunt eu, Ksandr\_Warfire

Materialul a fost pregătit special pentru GAMER.ru