Designa en fansida steg för steg

Detta inlägg har utvecklats och förberetts under en lång tid. Ursprungligen skulle det komma ut som en fortsättning på artikelcykeln "Skapa en fansida" (del ett och del två). Men vad gör denna artikel här i Fable 3-bloggen? Svaret är enkelt: när det gäller designen, utan ett helt konkret exempel, är det svårt att förklara något. Det finns ingen sfärisk design i vakuum. Därför, när det för en tid sedan beslutades att göra omstart på en av våra fansidor dedikerade till Fable-serien, bestämde jag att det är just detta exempel jag kommer att använda för att "dela med mig av mina insikter".

I själva verket hade jag förstås inte som mål att avslöja djupa universums hemligheter eller att med hjälp av en artikel lära ut hur man skapar en unik design för din fansida. Designämnet är stort och facetterat för att en enda designer ska kunna utforska det fullständigt genom ett enda arbete... Jag vill också påpeka att detta inte är en Photoshop-lektion. Det finns redan gott om sådana, google till hjälp. Som författare förväntar jag mig att du redan är bekant med grunderna i Photoshops funktionalitet, så inga steg-för-steg-instruktioner som "klicka här", "gå dit" ska du förvänta dig. Det här är inte en Photoshop-lektion, det är en masterclass i designcreation. Jag kommer att berätta hur jag arbetar, ge tips om tricks och hemligheter, som inte är hemligheter, men som av någon anledning ofta glöms bort. Låt oss börja :)

Förbereder staffliet och duken

I vårt fall blir staffliet, som du kanske redan har gissat, Photoshop CS4, och duken vår ursprungliga, fortfarande tomma nya fil. Förutom "photo-shops" finns det också andra program, till exempel Gimp. Vissa lyckas arbeta i Corel Draw. Men så eller så har mänskligheten ännu inte kommit på något bättre för webdesign än Photoshop. Det är det primära verktyget för webdesignern. Corel Draw eller Adobe Illustrator kan användas för att skapa enskilda element i din design, men det är mest bekvämt att "sätta ihop" mockupen i Photoshop.

När vi har klarat av "staffliet", är det dags för duken. Här är det värt att minnas om skärmupplösningar. För ungefär fem år sedan rådde upplösningen 1024x768 överallt, och 1280x960 började bara få fäste hos folk. För ett par år sedan ansågs 1680x1050 och 1600x1200 vara stor upplösning. Nu för tiden blir monitorer med standard Full HD allt mer normala, så vi ska sikta på 1920x1080 som maxupplösning. Ändå är 1024x768 fortfarande inte iväg för att gå i pension, så det är vår lägsta standard. I verkligheten är det mer principielt att tänka på bredden, eftersom vår webbplats kommer att bli lång, precis som 90% av alla webbplatser på nätet.

Tidigare var det trendigt att göra "sträckande" webbplatser. Det vill säga att enskilda designelement bestod av upprepade element, som gjorde att webbplatsen kunde sträckas i bredd beroende på användarens upplösning. Men med ankomsten av Full HD har denna metod att anpassa webbplatsen till användarens upplösning blivit oestetisk. Den mänskliga ögonen är så konstruerade att information som ligger inom räckhåll uppfattas bra på en bredd som är ungefär lika med ett A4-papper. Allt som är bredare - är redan inte i fokus. Därför är det numera vanligt att göra innehållsdelar smala, och det utrymme som är kvar till vänster och höger fylls med någon bakgrundsdekoration. Så både fåren är mätta och vargarna är hela :) Så, vår innehållsdel kommer att vara 1000 pixlar (glöm inte att det finns en scrollbar på höger sida i webbläsaren, som "äter" dessa 24 pixlar av 1024). Därför kommer vårt område för "kanter" med bakgrundsmagnifika att vara (1920-1000)/2=460 pixlar till vänster och höger. För att inte av misstag gå utanför detta område använder jag hjälplinjer. I läget med aktiverade linjaler drar jag helt enkelt med musen och "drar" hjälplinjerna till de nödvändiga platserna. Du kan också markera mitten av vår duk. Jag har också cirka markerat på höjden den plats som jag avsätter för webbplatsens header, den kommer att flytta sig i framtiden, men jag har gjort ett "märkte" för mig själv. Allt, den preliminära arbetet är avslutat. Vi går vidare till förberedande :)

Förberedande arbete avslutat

Hämta inspiration

Denna fas är den enklaste och den svåraste på samma gång. Du behöver samla material från vilket vi ska skulptera vår design. Om du är en professionell konstnär kan du förstås rita alla nödvändiga konstverk och gränssnittselement själv eller be ditt team att göra det... Å andra sidan, i så fall, vad gör du, Artyom Tatyanych Andreyevich, i denna artikel? :) Det här är en artikel för nybörjare. Vi behöver tematiska konstverk och element för vårt gränssnitt eller åtminstone sådant som vi kan skapa dessa element ifrån. Det är troligt att du med första försöket inte kommer att samla allt nödvändigt för ditt arbete, så du måste återvända till jakten på konstverk och inspiration många gånger. Jag brukar börja med den officiella webbplatsen, sedan rör jag mig till stora fansidor, om sådana finns. Efter det byter jag till bildsökningar i Google och Yandex. Och just med båda sökmotorerna, eftersom resultaten skiljer sig kraftigt. Där en misslyckas, hittar den andra massor av material. Det är bra om det finns mycket konst, om det finns stora skärmdumpar av spelets användargränssnitt, om utvecklaren släpper många bakgrunder... men oftast kommer du att sakna något.

Som ett resultat av mina sökningar hittades det en hel del konstverk för Fable och inte bara, från olika delar av spelet. Men för den tredje delen var vackra konstverk sällsynta. Men samla allt: bakgrunder, koncept, skärmdumpar... Du vet aldrig vad som kan komma till nytta. Jag kommer inte att trötta ut dig med en fullständig samling av det material som hittats. I spoilern kommer du att hitta de element som till slut lade grunden för designen.

Denna ram bröts slutligen ner i en hel mängd separata gränssnittselement


Den första normala konsten, funnen i den tredje delen

Och detta är den andra konsten. Det finns inget mer i den önskade stilen.

Och detta konstverk användes direkt som bakgrund. Det är inte perfekt, men inget bättre hittades.

Konstverk från den andra delen kom till nytta i slutet av arbetet

Vad skulle vi göra utan logotypen?

Låt oss börja arbeta

Nu kan vi börja arbeta. Jag ger dig en liten snabblink, jag sparar regelbundet arbetets resultat med ett nytt namn för att följa versionshistoriken. Som standard är det första resultatet version 0_1, sedan följer 0_2, 0_3 och så vidare. Version 1_0 inträffar när du anser att du har gjort allt du ville och kan börja visa arbetet för recensenter / vänner / kunder. Det är troligt att designen kommer att kräva ändringar. Då dyker versioner upp såsom 1_1, 1_2 osv. Det är praktiskt att hålla koll på din egen framsteg, och dessutom, för att det i händelse av behov ska finnas möjlighet att återgå till idéer från en äldre version eller ta en del från den som du har tagit bort eller ändrat till oigenkännlighet i den aktuella versionen.

Och en annan rekommendation, i Photoshop sparas alla dina element på separata lager. Tveka inte att ge dem meningsfulla namn direkt och gruppera lager av ett visst element med hjälp av ctrl+b-funktionen. När du har över 100 lager i din fil, blir det mycket svårt att reda ut utan etiketter och gruppering.

Men nog med prat, låt oss ta en titt på det första resultatet. Även om det här inte ens är det första, utan nästan ett noll:

Vid detta stadium är området för innehållet ungefär definierat, konstverken har lagts på ungefär de platser där de skulle kunna vara. Överallt syns redan de synliga och osynliga elementen som i framtiden måste passa in i designen. Eller inte passa in. Låt oss fortsätta. Förresten utfördes två viktiga tekniska arbeten vid detta stadium. Mycket noggrant klipptes vår karaktär ut från bakgrunden, och ramen delades i små delar.

För utklippning brukar jag oftare använda lager-masquerader. Måla med svart färg de områden som ska döljas, medan de synliga delarna lämnas vita. Halvtoner av grått - områden med genomskinlighet. Tack vare detta, om jag råkar radera något överflödigt, kan det enkelt återställas. Jag har sparat den utklippta karaktären i maximal upplösning separat så att den inte går förlorad.

Ramen bröts ner i delar genom att klippa små bitar och göra dem till texturer. Hörnen är reflekterade och tre gånger dubblerade det övre vänstra hörnet. Så jag uppnådde symmetri.

Designen var ursprungligen planerad att vara lite mörk, nära våra två första huvudkonstverk. Med mjuka penslar och olika blandningslägen lyckades jag förvandla den ganska ljusa bakgrundsbilden till ett ganska mörkt verk. Jag försökte avbilda innehållsdelen i form av en tredelad pergament, som borde ramas in av den välbekanta gyllene ramen. Kronan, som en av de viktigaste elementen fortsatte att finnas med i designen. Jag började sakta och försiktigt se efter en font för menyn.

Det finns en viss brist på vackra kyrilliska typsnitt. Eftersom de flesta av dem helt enkelt inte finns. Det vill säga, det finns engelska bokstäver, men inga ryska. Antingen ber de om stora pengar för den ryska versionen eller så är den ryska versionen gjord av folkkonstnärer, dåligt och fult. Eller så ser allt bra ut, men typsnittet är oläsligt :) Typsnittet i bilden kallas bonzai. Om någon behöver, kontakta mig. Jag delar gärna med mig. Låt oss gå vidare.

Efter en del kval började någon slags meningsfull bild ta form. Den första versionen av huvudmenyn har skapats (den kommer att ändras senare, men förberedelsen kommer att komma till nytta många gånger). Uppmärksamma personer kan märka att den vänstra och högra delen av denna meny är vår krona som är i kombination med dekor från ramen. Tveka inte att kombinera olika gränssnittselement. Tillsammans ger de ofta ett överraskande, men trevligt resultat. Dessutom förändrades konceptet för den huvudsakliga innehållsdelen. Jag försökte avbilda något som liknar en kunglig mantel, men jag gillade resultatet inte alls. Så jag tog ett kraftfullt beslut att förändra konceptet.

Detta är inte ens en ny iteration, detta är i själva verket bara en provförsök: hur kommer det att se ut i en ljus variant och utan "manteln"? - Tydligt bättre, men jag måste tänka vidare. Förresten är elementen uppe till vänster "bokstäver" i typsnittet fleur. En fantastisk sak för att skapa gränssnittselement. En hel mängd dekorativa element i en flaska.

Och här är något nytt. Jag experimenterade med positioneringen av vår hjälte i webbplatsens header, men det viktigaste är inte detta. Jag avstod från den horisontella menyn och försökte göra en vertikal. Varför inte, det ser faktiskt bra ut. Och den centrala menyn har flyttats till sidfoten.

Ännu en mellanskalär iteration, där jag jämförde den horisontella menyn och den vertikala, och funderade på att göra sidblocken som kan expandera vid klick.

Det här är det fall som du kommer att ha nytta av att ha sparat tidigare versioner. Designen har gått i en helt fel riktning. Rullgardinen på hela innehållsområdet tillsammans med ramen i mitten och de minskade ramarna för sidblocken ser fruktansvärt ut. Jag avstod från detta alternativ, gick tillbaka ett steg och tog en annan väg.

Och här är sanningen! Återigen tillbaka ett steg, efter att ha arbetat med våra element, resulterade det i en layout som redan är ganska nära den slutliga. Alla viktiga element är samlade och på sina platser: huvudmenyn, sidoblokkar, innehåll, header och sidfot. Om du tittar närmare kan du märka att jag fick nytta av några element från den tidigare misslyckade iterationen. Textlayouten lånades lite från en webbplats om Dragon Age, bara för att få en idé om textens placering. Den primära fonten är Palatino Linotype. Det är en vacker standardtypsnitt, vilket är mycket viktigt. I det här fallet kommer din webbplats utan problem att visas för alla Windows-användare. Det finns dock ett sätt, förstås, att använda egna typsnitt, som webbplatsen kommer att ladda ner till användarens cache, men detta ökar trafiken och problem med visning av typsnittet i olika webbläsare. Jag rekommenderar inte att överdriva med detta. På internet finns det en utmärkt tabell över standard Windows-teckensnitt. Jag använder den och rekommenderar den till dig. Men i headern, kan och bör dekorativa typsnitt användas. För webbsidans namn, på detta stadium fann jag en fantastisk typsnitt, som heter Algerius Caps. Känn skillnaden från det tidigare!

En mycket intressant fas, som tydligt visar att även i och omkring den avslutande designen finns det alltid något att förbättra. Först och främst avstod jag från den nedre menyn och har slutligen förvandlat den till en sidfot. Kommer du ihåg att jag sa att den horisontella menyn fortfarande kommer att vara användbar? - Användbart. Själva layouten rensades från redan onödiga element, för att de inte ska överbelasta designen. Men det viktigaste är att en slutlig plats för kronan i designen har hittats. Bort med svärdet ur skidan! Vi tar en av våra konstverk och klipper bort handen med svärdet och kronan. Arbetet på att fylla i logotypen, som hängde ovanför handskarna, var ren filigree arbete. Detta är det tillfälle när en skala över 1000% inte är överflödig. Och jag började också arbeta med färgkorrigeringen av vår bakgrund. Den var för gul-grön. Jag dämpade den. Jag använder vanligtvis ett extra lager, fyllt med rätt färg med blandningstyp soft light (mjuk ljus), men vid behov kan du prova andra blandningstyper. I detta fall korrigerades gammanskalan med hjälp av ett blålagret.

Jag fortsatte att putsa designen. Jag justerade konstverkens placering på bakgrunden, justerade dess färgschema igen. Jag tog bort nästan allt av det skräp som återstod efter den senaste städningen, jag missade bara en dekorativ del. Men jag noterade också att namnet på webbplatsen såg blekt ut mot bakgrunden av himlen. Därför justerade jag stilen och gjorde den kontrasterande mot bakgrunden, men fortfarande med penggunaan av webbplatsens primära färger.

Finalen

Paaaam! Här är version 1_0. Faktiskt inte den slutgiltiga, men just på detta stadium bestämde jag mig för att visa layouten för mina vänner och lyssna på kritiken. Det finns inga skräp här alls, bakgrunden har återigen förfinats. Men vad som också är viktigt, en meny med sökfunktion och knappar för sociala nätverk har lagts till. Inledningsvis kommer endast RSS att fungera, men snart öppnas Twitter, YouTube-kanal och en sida på Facebook.

Det första viktiga observationen - vår hjälte är uppenbarligen ensam i webbsidans header. Han behöver sällskap. Tyvärr hittades det inga vackra kvinnliga konstverk i den tredje delen, men en romsk kvinna från konsten till den andra delen kom till hjälp. Det passar faktiskt bra. Webbplatsen handlar ju inte bara om den tredje delen. I utbyte mot kvinnan tvingades vår hjälte att ge upp sin pistol, det blev uppenbarligen överflödigt.

Men det slutade inte där, ytterligare en rad anmärkningar kom fram. Webbplatsen blev för gäll och gyllene, och den gyllene ramen för det centrala innehållsblocket tog upp för mycket utrymme. Nåväl, jag dämpade nyansen med hjälp av lager effekter, och minskade ramen. Kedjorna som tyngde ner designen och komplicerade layouten togs också bort. Momen av sanning har nått. Den slutliga versionen:

www.Fable-game.ru

Epilog

I själva verket hade vi fortfarande layoutarbetet framför oss, vilket också gjorde sina små korrigeringar. Till exempel, placeringen av bakgrunden och hjältarna i förhållande till den. Det var också justeringar av stilar, sökande efter buggar och misstag. Men det är redan ett tekniskt jobb. Det svåraste ligger bakom. När du har nått detta steg kan du koppla av, berömma dig själv och tryggt lägga till ett nytt arbete i din portfolio. Och sedan börjar fylla och komplettera webbplatsen med material, tänka på den optimala strukturen... men det är redan en helt annan historia :)

Jag hoppas verkligen att min "berättelse med bilder och om bilder" tilltalade dig, och framför allt att den kommer att hjälpa dig i skapandet av dina egna vackra, unika, fantastiska designer för dina webbplatser. Jag ser fram emot dina frågor, förslag eller kommentarer.

*Författaren av designen och texten är jag, Ksandr\_Warfire

Materialet har förberetts speciellt för GAMER.ru