Design del fan site passo dopo passo

Questo post è stato concepito e preparato già da molto tempo. Inizialmente doveva essere pubblicato come continuazione di una serie di articoli "Creazione di un fan site" (uno e due). Ma cosa ci fa allora questo articolo nel blog di Fable 3? La risposta è semplice: nel caso del design, senza un esempio concreto è difficile spiegare qualcosa. Non esiste un design sferico in un vuoto. Pertanto, quando un po' di tempo fa è stata presa la decisione di rilanciare uno dei nostri fan site dedicati alla serie di giochi Fable, ho pensato che questo fosse proprio l'esempio con cui avrei "condiviso le mie sapienze".

In realtà, non volevo rivelare il grande mistero dell'universo né insegnare a creare un design unico per il tuo fan site attraverso un solo articolo. L'argomento del design è vastissimo e multiforme, perché un solo designer possa esplorarlo completamente usando un solo lavoro... Voglio anche dirlo subito, non si tratta di un tutorial su Photoshop. Ce ne sono già abbastanza senza di me, Google a riguardo. Come autore, presumo che tu sia già familiare con le basi del funzionamento di Photoshop, quindi non aspettarti istruzioni passo-passo su "clicca qui", "vai là". Questo non è un tutorial su Photoshop, è un masterclass sulla creazione di design. Ti racconterò come lavoro, ti svelerò alcuni trucchi e segreti, che in realtà non sono segreti, ma che spesso vengono dimenticati. Iniziamo :)

Prepariamo il cavalletto e la tela

Nel nostro caso, il cavalletto sarà, come avrai già intuito, Photoshop CS4, e la tela sarà il nostro nuovo file di origine, ancora vuoto. Oltre a "fotomontaggi" ci sono anche altri programmi, come Gimp. Alcuni riescono a lavorare in Corel Draw. Ma in ogni caso, l'umanità non ha ancora inventato un programma migliore di Photoshop per il web design. Questo è lo strumento principale del web designer. Lo stesso Corel Draw o Adobe Illustrator possono essere utilizzati per creare elementi separati del tuo design, ma "assemblare" il layout è più comodo in Photoshop.

Abbiamo chiarito il "cavalletto", ora è tempo della tela. Qui va ricordata la risoluzione dello schermo. Circa cinque anni fa, la risoluzione 1024x768 regnava ovunque, e 1280x960 iniziava appena a penetrare nelle menti delle persone. Un paio d'anni fa, 1680x1050 e 1600x1200 erano considerate risoluzioni elevate. Oggi i monitor con Full HD di default stanno diventando sempre più la norma, cioè dovremmo orientare la massima risoluzione su 1920x1080. Tuttavia, 1024x768 non ha ancora fretta di andare in pensione, quindi questa è la nostra soglia minima. In realtà, la larghezza è quella che conta di più, poiché in altezza il nostro sito sarà lungo-lungo, come il 90% di tutti i siti in rete.

Un tempo era di moda creare siti "adattabili". Cioè, elementi di design erano composti da elementi ripetuti, grazie ai quali il sito si allungava in larghezza secondo la risoluzione dell'utente. Ma con l'arrivo del Full HD, questo metodo di adattamento del sito alla risoluzione dell'utente è diventato poco estetico. L'occhio umano è progettato in modo tale da percepire bene le informazioni a una distanza di un braccio, con una larghezza di circa un foglio A4. Tutto ciò che è più largo non è più a fuoco. Pertanto, ultimamente è consuetudine realizzare la parte dei contenuti in modo stretto, mentre lo spazio rimanente a sinistra e a destra viene riempito con qualcosa di decorativo di sfondo. In questo modo sia le pecore sono sazie, sia i lupi sono al sicuro :) E quindi, la parte contenutistica sarà di 1000 pixel (non dimenticare che nel browser a destra c'è una barra di scorrimento che "mangia" quei 24 pixel da 1024). Di conseguenza, la nostra area per i "margini" con le bellezze di sfondo sarà (1920-1000)/2=460 pixel a sinistra e a destra. Per non uscire involontariamente da quest'area, utilizzo delle guide. In modalità righelli attivi, semplicemente trascino il cursore e "sposto" le guide nei punti desiderati. Posso anche segnare subito il centro della nostra tela. Ho anche segnato approssimativamente in altezza il posto che sto riservando per l'intestazione del sito; in futuro si muoverà, ma mi sono fatto un "segno". Ecco, il lavoro preliminare è completato. Procediamo alla preparazione :)

Preparazione preliminare completata

Attrarre ispirazione

Questa fase è la più semplice e la più complessa allo stesso tempo. Dovrai raccogliere materiale dal quale creeremo il nostro design. Se sei un artista professionista, puoi naturalmente disegnare da solo tutte le arti e gli elementi dell'interfaccia necessari o affidare il compito al tuo team... D'altra parte, in questo caso, cosa ci fai, Artemij Tat'janovich Andrejievich, in questo articolo? :) Questo è un articolo per principianti. Avremo bisogno di articoli tematici e elementi per la nostra interfaccia o almeno di ciò da cui potremo fare questi elementi. È probabile che al primo tentativo non raccoglierai tutto il necessario per il tuo lavoro, quindi dovrai tornare più volte a cercare arti e ispirazione. Normalmente inizio a cercare sul sito ufficiale, poi mi muovo su grandi fan site, se ce ne sono. E dopo passo a cercare immagini su Google e Yandex. Infatti, utilizzo entrambe le motori di ricerca, poiché i risultati sono molto diversi. Dove uno fallisce, l'altro trova tonnellate di materiale. È bello se ci sono molte opere d'arte, grandi screenshot dell'interfaccia del gioco, il produttore rilascia molti sfondi... ma più spesso ti mancherà qualcosa.

A seguito delle mie ricerche, ho trovato un buon numero di opere d'arte su Fable e non solo, su varie parti del gioco. Ma per quanto riguarda il terzo capitolo, le belle opere d'arte scarseggiano. Ma raccogli tutto: sfondi, concetti, screenshot... Non sai mai cosa potrebbe tornarti utile. Non ti sommermerò con l'intera selezione del materiale trovato. Nello spoiler troverai quegli elementi che alla fine sono stati utilizzati come base per il design.

Questa cornice alla fine è stata smontata in un sacco di singoli elementi dell'interfaccia


La prima arte decente trovata per il terzo capitolo

E questa è la seconda arte. Niente di più nella stilistica necessaria.

Questa arte è stata subito scelta come sfondo. Non è perfetta, ma non si è trovata di meglio.

L'opera per il secondo capitolo è stata utile già alla fine del lavoro

Come si fa senza logo?

Iniziamo a lavorare

Ora possiamo iniziare a lavorare. Ti darò subito un piccolo trucco, salvo regolarmente i progressi di lavoro con un nuovo nome seguendo la cronologia delle versioni. Per impostazione predefinita, il primo risultato è la versione 0_1, poi seguono 0_2, 0_3 e così via. La versione 1_0 arriva quando pensi di aver fatto tutto ciò che volevi e puoi iniziare a mostrare il lavoro a recensori/amici/clienti. È probabile che il design necessiti di modifiche. Allora appariranno le versioni 1_1, 1_2 e così via. Questo è utile per monitorare i propri progressi e, inoltre, nel caso fosse necessario, poterti riportare a idee da versioni più vecchie o prelevare qualche elemento che, nella versione attuale, hai eliminato o modificato così tanto da essere irriconoscibile.

Un altro consiglio: in Photoshop, tutti i tuoi elementi sono memorizzati su livelli separati. Non essere pigro a dare loro nomi sensati subito, e raggruppare i livelli di un elemento specifico usando la funzione ctrl+b. Quando nel tuo file si accumulano più di 100 livelli, diventa estremamente difficile orientarsi senza etichette e raggruppamenti.

Ma basta chiacchiere, è ora di dare un'occhiata al primo risultato. Anche se in realtà non è il primo, è quasi nullo:

A questo punto, è stata delineata approssimativamente l'area per i contenuti, le opere sono state posizionate orientativamente nei punti in cui potrebbero trovarsi. Sono già visibili elementi che, in seguito, dovranno inserirsi nel design. O forse no. Andiamo avanti. In questa fase sono state svolte anche due importanti operazioni tecniche. Il nostro personaggio è stato tagliato con molta attenzione dallo sfondo e la cornice è stata smontata in piccole parti.

Per il ritaglio, uso più spesso non la gomma, ma le maschere di livello. Coloriamo le aree che vogliamo nascondere di nero, mentre lasciamo visibili quelle bianche. Le sfumature di grigio sono per le aree di semitrasparenza. Grazie a questo, se rimuovo qualcosa in più, sarò in grado di ripristinarlo facilmente. Ho salvato il personaggio ritagliato nella massima risoluzione separatamente, in modo che non si perdesse.

La cornice è stata smontata in parti tagliando piccoli pezzi e trasformandoli in texture. Gli angoli sono la ripetizione tre volte dell'angolo in alto a sinistra. In questo modo ho ottenuto simmetria.

Inizialmente, il design era previsto di tono cupo, simile alle nostre prime due opere principali. Con pennelli morbidi e vari modi di fusione, sono riuscito a trasformare un'immagine di sfondo abbastanza luminosa in un dipinto piuttosto cupo. Ho provato a rappresentare la parte dei contenuti come una pergamena piegata in tre, che doveva essere incorniciata da una cornice dorata a te ben nota. La corona, come uno dei elementi chiave, ha continuato a essere presente nel design. Ho cominciato a guardarmi intorno per un carattere per il menu.

Ci sono alcune difficoltà con i caratteri in cirillico belli. Perché, in genere, non ce ne sono. Cioè, ci sono lettere inglesi, ma non ci sono russi. O per la versione russa vengono chiesti soldi, oppure la versione russa è realizzata da artigiani popolari in modo goffo e brutto. Oppure va bene, ma il carattere è illeggibile :) Il carattere nell'immagine si chiama bonzai. Chi ne ha bisogno, può contattarmi. Condividerò. Andiamo avanti.

Dopo alcune fatiche, ha cominciato a delinearsi qualcosa di sensato. È stata realizzata la prima versione del menu principale (poi cambierà, ma il campione ci sarà utile più volte). I compagni attenti potrebbero notare che la parte sinistra e destra di questo menu è la nostra corona unita a un giro del motivo della cornice. Non aver paura di combinare diversi elementi dell'interfaccia. Insieme spesso producono risultati inaspettati, ma piacevoli. Inoltre, il concetto principale della parte contenutistica è cambiato. Ho cercato di rappresentare qualcosa tipo un mantello regale, ma il risultato non mi è piaciuto affatto. Quindi ho preso una decisione ferma: cambiare il concetto.

Questa non è ancora una nuova iterazione, è, in sostanza, solo un tentativo: come apparirà in una versione chiara e senza "mantello"? - Chiaramente meglio, ma bisogna pensarci su. A proposito, gli elementi sulla sinistra in alto sono "lettere" del carattere fleur. Ottima cosa per creare elementi dell'interfaccia. Un sacco di ghirigori e fiori in un'unica confezione.

Ecco qualcosa di nuovo. Ho sperimentato con il posizionamento del nostro eroe nell'intestazione del sito, ma la cosa principale non è questo. Ho rinunciato al menu orizzontale e ho provato a fare un menu verticale. Non c'è niente di male. E il menu centrale è stato spostato nel footer.

Un'altra iterazione intermedia, dove ho confrontato il menu orizzontale con quello verticale, pensando di rendere i blocchi laterali espandibili al clic.

Ecco il momento in cui ti serviranno le versioni salvate in precedenza. Il design è andato in una direzione sbagliata. Il rotolo a tutta larghezza dei contenuti insieme alla cornice al centro e le cornici ridotte per i blocchi laterali non sembrano affatto bene. Ho abbandonato questa versione, sono tornato indietro e ho cominciato a ripartire in un'altra direzione.

Ed ecco il momento della verità! Tornando indietro di un passo, sperimentando con i nostri elementi, ho ottenuto un layout che è già molto vicino al finale. Tutti gli elementi principali sono assemblati e nei posti giusti: menu principale, blocchi laterali, contenuto, intestazione e footer. Se ti guardi attentamente, puoi notare che qualcosina della precedente iterazione non fortunata si è rivelata utile. La disposizione del testo è stata presa a caso da un sito su Dragon Age, giusto per avere un'idea di dove posizionare il testo. Come carattere principale è stato scelto Palatino Linotype. È un bel carattere standard, il che è molto importante. In questo caso, il tuo sito sarà visualizzato senza problemi a tutti gli utenti di Windows, per certo. C'è un modo, certo, di utilizzare caratteri propri, che il sito caricherà nella cache dell'utente, ma questo significa traffico in più e problemi di visualizzazione del carattere in diversi browser. Non consiglio di dilungarsi troppo. In rete c'è una fantastica tabella di caratteri standard di Windows. La utilizzo e la consiglio. Ecco, nell'intestazione, puoi e dovresti usare caratteri decorativi. Per il titolo del sito, proprio in questa fase ho trovato un carattere fantastico chiamato Algerius Caps. Senti la differenza rispetto a quello che era!

Una fase molto interessante, che dimostra chiaramente che anche in un design vicino al completamento c'è sempre spazio per miglioramenti. Prima di tutto, ho rinunciato definitivamente al menu inferiore e l'ho trasformato nel footer. Ricordi, ti ho detto che il menu orizzontale ci sarebbe ancora stato utile? - È stato utile. Il layout è stato ripulito dagli elementi già non necessari, in modo che non ingombrassero il design. Ma la cosa più importante è che alla corona nel design è stato trovato un posto finale. Via la spada dal fodero! Prendiamo una delle nostre opere d'arte e ritagliamo via la mano con la spada e la corona. Il lavoro di colorazione del logo che pendeva sopra il guanto è stata semplicemente magistrale. Questo è quel caso in cui un ingrandimento oltre il 1000% è a volte utile. E ho anche iniziato a lavorare con la correzione dei colori del nostro sfondo. Era troppo giallo-verde. L'ho attenuato. Di solito uso un ulteriore livello, riempito con il colore necessario e con il tipo di fusione soft light (luce soffusa), ma a seconda delle necessità si possono provare anche altri tipi di fusione. In questo caso, la gamma è stata corretta grazie a uno strato blu.

Continuavo a rifinire il design. Ho sistemato il posizionamento dell'arte sullo sfondo, ho nuovamente corretto la sua gamma di colori. Ho rimosso quasi tutto il resto della pulizia precedente; ho solo saltato un ricciolo. Ma ho anche notato che il titolo del sito non si distingue bene sullo sfondo del cielo. Quindi ho corretto lo stile e l'ho reso contrastante con lo sfondo, ma comunque utilizzando i colori principali del sito.

Il rush finale

Paaaaaaam! Ecco la versione 1_0. In realtà non è finale, ma a questo stadio ho deciso di mostrare il layout ai miei amici e ascoltare le critiche. Qui non c'è più nulla di superfluo, il fondo è stato nuovamente colorato. Ma ciò che è importante, è stato aggiunto il menu con la ricerca e i pulsanti dei social network. Inizialmente funzionerà solo l'RSS, ma presto sarà aperto Twitter, il canale YouTube e la pagina su Facebook.

La prima importante osservazione è che il nostro eroe è chiaramente solo nell'intestazione del sito. Ha bisogno di compagnia. Sfortunatamente, non si è trovato niente di bello sul terzo capitolo, ma in soccorso viene la zingara dalla seconda parte. E va bene. Il sito infatti non riguarda solo il terzo capitolo. In cambio della ragazza, il nostro eroe ha dovuto rinunciare alla pistola, che era davvero di troppo.

Ma non finisce qui, è arrivata anche un'altra serie di osservazioni. Il sito è risultato davvero troppo dorato, e la cornice dorata del blocco centrale dei contenuti occupava troppo spazio. Beh, ho attenuato la tonalità usando effetti di livello e ridotto la cornice. Le catene che appesantivano il design e complicavano il layout sono state rimosse. È arrivato il momento della verità. La versione finale:

www.Fable-game.ru

Epilogo

In realtà, ci aspettava ancora la realizzazione, che ha apportato anche le sue piccole correzioni. Ad esempio, il posizionamento dello sfondo e dei personaggi in relazione ad esso. Ci sono state anche modifiche agli stili, ricerca di bug e difetti. Ma questa è già una questione tecnica. La parte più difficile è dietro di noi. Quando arrivi a questa fase, puoi rilassarti, lodarti e inserire tranquillamente nel tuo portfolio il nuovo lavoro. E poi iniziare a riempire e completare il sito con materiali, pensando alla struttura ottimale... ma questa è un'altra storia del tutto :)

Spero sinceramente che la mia "storia con immagini e su immagini" ti sia piaciuta, e soprattutto che ti aiuti a creare i tuoi bellissimi, unici e sorprendenti design per i tuoi siti. Attendo le tue domande, suggerimenti o osservazioni nei commenti.

*Autore del design e del testo, io, Ksandr\_Warfire

Materiale preparato appositamente per GAMER.ru