Het ontwerpen van een fansite stap voor stap

Deze post is al gerijpt en voorbereid voor een lange tijd. Oorspronkelijk zou het als vervolg op de serie artikelen "Het maken van een fansite" (één en twee) worden gepubliceerd. Wat doet dit artikel dan in de Fable 3 blog? Het antwoord is eenvoudig: zonder een heel specifiek voorbeeld kun je niets uitleggen over ontwerp. Er is geen sferisch ontwerp in een vacuüm. Daarom, toen we een tijdje geleden besloten om een van onze fansites over de Fable game-serie opnieuw op te starten, besloot ik dat dit het voorbeeld was waarmee ik mijn "wijsheden" zou delen.

In werkelijkheid had ik natuurlijk niet als doel de grote geheimen van het universum te onthullen of met één artikel te leren hoe je een uniek ontwerp voor je fansite maakt. Het onderwerp ontwerp is enorm en veelzijdig, zodat één ontwerper het niet volledig kan uitleggen aan de hand van slechts één werk ... Ik wil ook meteen zeggen dat dit geen Photoshop-les is. Die zijn er genoeg en zonder mij, Google helpt. Als auteur ga ik ervan uit dat je al bekend bent met de basisfunctionaliteiten van Photoshop, wat betekent dat je geen stap-voor-stap instructies zoals "klik hier", "ga daarheen" moet verwachten. Dit is geen Photoshop-les, dit is een masterclass over ontwerp. Ik zal vertellen hoe ik werk, enkele trucs en geheimen delen die geen geheimen zijn, maar waar mensen vaak vergeten. Laten we beginnen :)

Bereid het schildersdoek voor

In ons geval is de schildersdoek, zoals je al had kunnen raden, Photoshop CS4, en het doek is ons originele, nog lege nieuwe bestand. Naast "photo manipulation" zijn er ook andere programma's, zoals Gimp. Sommige mensen weten zelfs met Corel Draw te werken. Maar hoe dan ook, tot nu toe heeft de mensheid geen betere programma voor webdesign bedacht dan Photoshop. Dit is het belangrijkste gereedschap voor webdesigners. Corel Draw of Adobe Illustrator kunnen worden gebruikt voor het maken van afzonderlijke elementen van je ontwerp, maar "samenstellen" van een lay-out is het handigst in Photoshop.

We hebben nu de "schildersdoek" besproken, het is tijd voor het doek. Hier moeten we denken aan schermresoluties. Vijf jaar geleden was de resolutie van 1024x768 overal de norm, terwijl 1280x960 net begon hun populariteit te winnen. Een paar jaar geleden werden 1680x1050 en 1600x1200 als grote resoluties beschouwd. Tegenwoordig zijn monitors met de standaard Full HD steeds meer de norm, wat betekent dat we ons moeten richten op een maximale resolutie van 1920x1080. Desondanks is 1024x768 nog niet helemaal met pensioen, en dat is onze ondergrens. In feite is de breedte belangrijker, omdat onze site in hoogte vrij lang zal zijn, net als 90% van alle sites op het net.

Vroeger was het populair om "uitrekbare" sites te maken. Dat wil zeggen dat afzonderlijke ontwerpelementen bestonden uit herhaalde componenten, waardoor de site in de breedte werd uitgerekt om aan de resolutie van de gebruiker te voldoen. Maar met de komst van Full HD is deze manier van aanpassen van de site aan de gebruikersresolutie esthetisch minder aantrekkelijk geworden. Het menselijk oog is zo ingericht dat informatie die op armlengte is geplaatst goed wordt waargenomen met een breedte ongeveer gelijk aan een A4-papier. Alles wat breder is, is al uit focus. Daarom is het tegenwoordig gebruikelijk om de contentgedeelten smaller te maken, terwijl de ruimte aan de linkerkant en de rechterkant wordt gevuld met een soort achtergronddecor. Zo zijn zowel de schapen tevreden, als de wolven ongedeerd :) En dus, ons contentgedeelte zal 1000 pixels zijn (vergeet niet dat er aan de rechterkant van de browser een scrollbar is, die die 24 pixels van de 1024 "opslokt"). Daarom zal onze ruimte voor de "marges" met mooie achtergronden (1920-1000)/2=460 pixels aan zowel de linker- als de rechterkant zijn. Om deze ruimte niet per ongeluk te overschrijden, gebruik ik hulplijnen. In de modus met ingeschakelde linialen sleep ik gewoon de cursor en "trek" de hulplijnen naar de juiste plekken. We kunnen ook onmiddellijk het midden van ons doek aanduiden. Ik heb ook ongeveer de hoogte gemarkeerd voor het gedeelte dat ik voor de kop van de site reserveer, deze zal in de toekomst verschuiven, maar ik heb mezelf een "markering" gegeven. Dat is het, het voorbereidend werk is afgerond. Laten we doorgaan naar de voorbereiding :)

Voorbereidende werkzaamheden zijn afgerond

Haal inspiratie

Deze fase is tegelijkertijd de gemakkelijkste en de moeilijkste. Je staat voor de taak om materiaal te verzamelen waaruit we ons ontwerp zullen vormen. Als je een professionele kunstenaar bent, kun je natuurlijk zelf alle benodigde artwork en interface-elementen tekenen of dit aan je team toevertrouwen ... Aan de andere kant, wat doe je dan hier, Artemiy Tatyanych Andreevich? :) Dit is een artikel voor beginners. We hebben thematische artwork en elementen voor onze interface nodig, of in ieder geval iets waarmee we deze elementen kunnen maken. Waarschijnlijk zul je bij je eerste poging niet alles nodig hebben voor je werk, wat betekent dat je vaker terug moet om artwork en inspiratie te zoeken. Ik begin meestal met de officiële website, ga dan naar grote fansites als die er zijn. Daarna schakelen ik over op het zoeken naar afbeeldingen via Google en Yandex. En precies met beide zoekmachines, omdat de zoekresultaten sterk verschillen. Waar de één mislukt, vindt de ander tonnen materiaal. Het is goed als er veel artwork is, als er grote schermafbeeldingen van de interface van de game zijn, als de ontwikkelaar veel wallpapers uitbrengt ... maar meestal ontbreekt er altijd iets.

Het resultaat van mijn zoektocht was dat ik een aantal artworks over Fable vond en niet alleen dat, over verschillende delen van het spel. Maar voor het derde deel is er slechts een handvol mooie artworks. Maar je moet alles verzamelen: wallpapers, concepten, schermafbeeldingen ... Je weet nooit wat nuttig zal zijn. Ik zal je niet vermoeien met een volledige verzameling van het gevonden materiaal. In de spoiler vind je de elementen die uiteindelijk de basis van het ontwerp vormden.

Dit frame werd uiteindelijk ontleed in een heleboel afzonderlijke interface-elementen


De eerste normale artwork gevonden over het derde deel

En dit is de tweede artwork. Dat was het, meer in de gewenste stijl was er niet te vinden

En deze artwork werd meteen als achtergrond genomen. Het is niet perfect, maar beter was er niet te vinden.

Artwork uit het tweede deel werd al aan het einde van het werk nuttig

Waar zou je zijn zonder het logo?

Begin met werken

Nu kunnen we aan het werk. Laat me je meteen een kleine truc vertellen: ik sla mijn werk regelmatig op onder een nieuwe naam om de versiegeschiedenis bij te houden. Standaard is de eerste uitkomst versie 0_1, daarna komen 0_2, 0_3, enz. Versie 1_0 komt wanneer je denkt dat je alles hebt gedaan wat je wilde en dat je kunt beginnen je werk te laten zien aan recensenten/vrienden/opdrachtgevers. Het is waarschijnlijk dat het ontwerp wijzigingen vereist. Dan komen er versies 1_1, 1_2, enzovoort. Dit is handig om je eigen voortgang bij te houden, en ook om, indien nodig, terug te kunnen gaan naar ideeën uit oudere versies of daar een element uit te pakken dat je in de huidige versie hebt verwijderd of onherkenbaar hebt veranderd.

En nog een tip: in Photoshop worden al jouw elementen opgeslagen op afzonderlijke lagen. Wees niet lui om ze gelijk betekenisvolle namen te geven, en groepeer de lagen van een bepaald element met de functie ctrl+b. Wanneer je bestand meer dan 100 lagen heeft, wordt het moeilijk om zonder labels en groeperingen te begrijpen.

Maar genoeg geklets, laten we eens kijken naar de eerste uitkomst. Alhoewel dit zelfs niet de eerste is, dit is bijna nul:

In deze fase is het gebied voor content ongeveer afgebakend, arts zijn ongeveer geplaatst op de plekken waar ze zouden kunnen zijn. Overal zie je al zichtbare en niet-zichtbare elementen die in de toekomst in het ontwerp moeten passen. Of niet. Laten we verder gaan. In deze fase zijn er trouwens twee belangrijke technische werken uitgevoerd. Onze character is heel zorgvuldig uit de achtergrond gehaald, en het frame is in kleine stukjes ontleed.

Voor het uitsnijden gebruik ik meestal geen gum, maar laagmaskers. Met zwart schilderen we de gebieden die we willen verbergen, met wit laten we de zichtbare delen. Halftonen van grijs zijn gebieden van semi-transparantie. Hierdoor, als ik per ongeluk iets overbodigs wist, kan het gemakkelijk weer terugkomen. De uitgesneden character heb ik apart in maximale resolutie opgeslagen, zodat het niet verloren gaat.

Het frame werd in delen ontleed door kleine stukjes af te snijden en deze om te zetten in texturen. Hoeken zijn verdedigd door de linkerkant van de bovenste hoek drie keer te spiegelen. Zo krijg ik symmetrie.

In eerste instantie was het ontwerp somber gepland, qua stijl dichtbij onze eerste twee hoofdartworks. Met behulp van zachte penselen en verschillende mengmodi slaagde ik erin om de achtergrond, een vrij heldere afbeelding, om te vormen tot een behoorlijk somber doek. Het contentgedeelte probeerde ik voor te stellen als een driedubbelgevouwen perkament, dat omringd moest worden door een gouden frame dat jullie al kennen. De kroon, als een van de sleutelelementen, bleef aanwezig in het ontwerp. Ik begon langzaam een lettertype voor het menu te zoeken.

Met mooie Cyrillische lettertypen is er een kleine spanning. Omdat veelal zijn ze gewoon niet aanwezig. Dus zijn er Engelse letters, maar geen Russische. Of ze vragen een aanzienlijk bedrag voor de Russische versie, of de Russische versie is gemaakt door volksambachtslieden die het slecht en slecht doen. Of alles is goed, maar het lettertype is onleesbaar :) Het lettertype op de afbeelding heet bonzai. Voor wie dit nodig heeft, neem contact met me op. Ik deel het graag. Laten we verder gaan.

Na enige moeite is er langzaam iets te zien wat zinvol is. De eerste versie van het hoofdmenu is gemaakt (dit zal later veranderen, maar de basis zal ons niet een keer te betekenen komen). Aandachtige mensen kunnen opmerken dat de linker- en rechterzijde van dit menu onze kroon zijn gecombineerd met een krullen uit het frame. Wees niet bang om verschillende interface-elementen te combineren. Samen resulteren ze vaak in onverwachte, maar aangename resultaten. Bovendien veranderde de conceptie van het hoofdcontentdeel. Ik probeerde iets van een koninklijke mantel te verbeelden, maar het resultaat beviel me helemaal niet. Daarom nam ik de moedig beslissing om het concept te veranderen.

Dit is nog niet een nieuwe iteratie, dit is, in feite, gewoon een proef: hoe zou het eruit zien in een lichte variant en zonder de "mantel"? - Duidelijk beter, maar het moet verder denken. Trouwens, de elementen linksboven zijn "letters" van het lettertype fleur. Een geweldig ding voor het maken van interface-elementen. Een heleboel krullen en bloemetjes in één fles.

En hier is iets nieuws. Ik experimenteerde met het plaatsen van onze held in de kop van de site, maar dat is niet het belangrijkste. Ik nam afscheid van het horizontale menu en probeerde een verticaal menu te maken. Waarom niet, het ziet er eigenlijk heel goed uit. En het centrale menu is naar de footer verschoven.

Nog een intermediaire iteratie waarin ik het horizontale menu met het verticale menu vergeleek, terwijl ik nadenkende over het idee om de zijblokken uit te rekken door te klikken.

Dit is zo'n geval waarin de opgeslagen vorige versies nuttig zullen zijn. Het ontwerp ging ergens heel verkeerd. Het perkament voor de gehele breedte van de content samen met het frame in het midden en de verkleinde frames voor de zijblokken zien er gewoon verschrikkelijk uit. Ik wees dit alternatief af, keerde een stap terug en ging een andere weg.

En daar is het moment van de waarheid! Door een stap terug te gaan, met onze componenten te toveren, had ik uiteindelijk een lay-out gecreëerd die al behoorlijk dichtbij de finale is. Alle belangrijke elementen zijn verzameld en op hun plaats: hoofdmenu, zijblokken, content, kop en footer. Als je goed kijkt, kun je opmerken dat ik iets van de vorige mislukte iteratie uiteindelijk toch nog heb kunnen gebruiken. De tekstindeling werd willekeurig genomen van een site over Dragon Age, gewoon om de plaatsing van de tekst te schatten. Als hoofdlettertype werd Palatino Linotype gekozen. Dit is een mooi standaard lettertype, wat erg belangrijk is. Hierdoor zal je site zonder problemen worden weergegeven bij alle Windows-gebruikers. Er is een manier om je eigen lettertypen te gebruiken die de site in de cache van de gebruiker laadt, maar dit is extra verkeer en problemen met de weergave van de lettertypen in verschillende browsers. Ik raad aan niet te ver te gaan. Op internet is er een geweldige tabel van standaard Windows-lettertypen. Ik gebruik het zelf en raad het jou ook aan. Maar in de kop kun je ook decoratieve lettertypen gebruiken. Voor de naam van de site heb ik op deze fase een geweldige font gevonden, genaamd Algerius Caps. Voel het verschil met wat er eerder was!

Een zeer interessante fase, die duidelijk laat zien dat er zelfs in een bijna voltooid ontwerp altijd iets kan worden verbeterd. Ten eerste nam ik uiteindelijk afscheid van het onderste menu en maakte het definitief tot een footer. Herinner je je dat ik zei dat het horizontale menu ons nog van pas zou komen? - Het is nuttig gebleken. De lay-out was gezuiverd van al reeds onnodige elementen, zodat ze het ontwerp niet verstoorden. Maar het belangrijkste is dat de kroon in het ontwerp een definitieve plek heeft gevonden. Weg met het zwaard uit de schede! We nemen een van onze afbeeldingen en snijden de hand met het zwaard en de kroon eruit. Het werk met het opvullen van het logo dat boven op de handschoen hing was gewoon filigraan. Dit is het geval waarin een schaal van meer dan 1000% niet overbodig is. Bovendien begon ik te werken met de kleurcorrectie van onze achtergrond. Hij was te geel-groen. Ik heb het gedempt. Normaal gesproken gebruik ik hiervoor een extra laag, gevuld met de juiste kleur met de mengmodus soft light (zacht licht), maar afhankelijk van de noodzaak kun je ook andere mengmodi proberen. In dit geval werd de gamma gecorrigeerd met een blauwe laag.

Ik bleef het ontwerp verder verfijnen. Ik heb de plaatsing van de artwork op de achtergrond opnieuw aangepast, de kleurstelling ervan opnieuw gecorrigeerd. Bijna al het rommel dat na de vorige opruiming overbleef, is verwijderd, maar er is één krul doorheen geglipt. Maar ik lette ook op het feit dat de naam van de site op de achtergrond van de lucht bleek blek te zijn. Dus heb ik de stijl gecorrigeerd en deze contrasterend gemaakt ten opzichte van de achtergrond, maar toch met het gebruik van de belangrijkste kleuren van de site.

De slotfase

Pam! Hier is versie 1_0. Het is actually geen definitieve, maar op dit stadium besloot ik de lay-out aan mijn vrienden te tonen en hun kritiek te horen. Rommel is er hier absoluut niet meer, opnieuw is de achtergrond gekleurd. Maar wat bovendien belangrijk is, er is een menu met zoekfunctie en knoppen voor sociale netwerken toegevoegd. Aanvankelijk zal alleen RSS werken, maar binnenkort zal ook Twitter, een YouTube-kanaal en een Facebook-pagina worden geopend.

Een belangrijke opmerking - onze held is duidelijk eenzaam in de kop van de site. Hij heeft gezelschap nodig. Helaas waren er geen mooie vrouwlijke artworks voor het derde deel, maar een Zigeuner uit de artwork voor het tweede deel kwam te hulp. En het is passend. De site gaat immers niet alleen over het derde deel. In ruil voor de vrouw moest onze held zijn pistool opgeven, dat was duidelijk overbodig.

Maar dat was nog niet alles, er kwamen nog enkele opmerkingen aan. De site bleek nogal schreeuwerig goud te zijn, terwijl de gouden rand van het centrale contentblok te veel ruimte verbruikte. Nou, de tint kreeg ik verder gedempt met behulp van laag-effecten, en ik heb de rand verkleind. De kettingen die het ontwerp verzwarten en de opbouw compliceren, werden ook verwijderd. Het moment van de waarheid is aangebroken. De finale versie:

www.Fable-game.ru

Epiloog

In werkelijkheid stond ons nog steeds het coderen te wachten, wat ook enkele kleine correcties met zich meebracht. Bijvoorbeeld, de plaatsing van de achtergrond en helden ten opzichte van hem. Er waren ook stilistische wijzigingen, het zoeken naar bugs en blunders. Maar dat is al technische details. Het moeilijkste ligt achter ons. Wanneer je deze fase hebt bereikt, kun je je ontspannen, jezelf prijzen en geduldig de nieuwe lay-out van je portfolio toevoegen. En dan de pagina vullen en aanvullen met materialen en nadenken over de optimale structuur ... maar dat is al een heel ander verhaal :)

Ik hoop oprecht dat mijn "verhaal met afbeeldingen en over afbeeldingen" je heeft aangesproken, en vooral dat het je zal helpen bij het maken van je eigen mooie, unieke, geweldige ontwerpen voor jouw sites. Ik kijk uit naar jouw vragen, suggesties of opmerkingen in de reacties.

*De auteur van het ontwerp en de tekst ben ik, Ksandr\_Warfire

Het materiaal is speciaal voorbereid voor GAMER.ru