Salve a tutti, ragazzi, adulti, vecchi ma soprattutto ragazze:D ho iniziato a lavorare di grafica a 15 anni circa, ma l’altalenante mestiere vero e proprio del grafico freelance l’ho iniziato ben dopo, ad oggi sono circa sette anni; yuppie! champagne per tutti! u-huuu.
Grafica; questa Dea spesso messa da parte da coloro che non ne capiscono la sua importanza, o che non sono in grado di prenderla per mano o che, come spesso accade, giudicano più importante il background del gioco.
Ho deciso di scrivere questo articolo (che se vedrete pubblicato, vorrà dire che la redazione avrà deciso che in qualche modo non sarà utile solo a riempire l’archivio:P) perché spesso, sempre più spesso, vedo giochi di ruolo on line che sono un pugno nell’occhio per l’utente, home page che sembrano realizzate da Attila o Conan il barbaro e che spesso nascondono invece un background di gioco dalle discrete potenzialità. Sicché in questo articolo, cercherò di consigliarvi sulla realizzazione grafica di un Gdr on line, ben inteso, che non si tratta di un tutorial dove vi dirò passo per passo cosa fare, il web ne è pieno.
Tutti i consigli e le considerazioni che troverete, sono da intendersi rivolte all’ambiente dei giochi di ruolo on line
I tre punti con cui dovreste iniziare un GdR online per la sua buona riuscita
Eppure molti, specie i giovanissimi lo fanno, perché? Probabilmente il motivo principale è la fretta di vedere on line la propria creazione, poco importa se non è completa. “Un po’ per volta, con il tempo…” questo è il principale pensiero che passa nella mente del gestore, ed ha la funzione di mettere in pace l’animo con la parte razionale della propria coscienza, la quale invece sta dicendo: “che cosa stai facendo? Vendi una bici senza catena dicendo che più avanti porterai a casa del cliente la catena?”.
Quando un gdr on line non ultimato viene messo sul web, nel 90% dei casi nemmeno il manuale con le regole è stato finito, così succede che le regole sono campate in aria, fatte sul momento e poi aggiunte con litigi all’interno del gioco, crisi isteriche degli utenti e tutto a danno del gdr.
Le modifiche, quelle che rientrano nel pensiero “con il tempo, più avanti, abbiamo appena iniziato” dovrebbero essere rivolte alle rifiniture, sbavature grafiche, piccoli bug, migliorie di codice e basta, non alla costruzione di un’intera interfaccia di gioco, di un’intera home page, di linee e linee di codice.
Compresi questi tre punti, il gioco di ruolo e la grafica saranno migliori, non compresi…beh guardatevi attorno.
La creazione di gioco di ruolo si dovrebbe dividere in due fasi, teoria e pratica, la teoria decide l’ambientazione, il back ground, le regole, tutta la parte scritta, la pratica sviluppa la grafica basandosi sul tipo di ambientazione decisa e infine sviluppa il codice.
Quindi ricapitolando l’ordine di lavoro dovrebbe essere il seguente:
- Scelta dell’ambientazione (e successiva descrizione delle razze, manuale ecc)
- Costruzione della grafica
- Costruzione del codice
La grafica della Home Page
Questo è il momento dove dare sfogo totale alla vostra creatività, qui è dove avete maggiore spazio in termini di pixel, qui è dove approda la gente, qui è la prima impressione, qui scatta la molla della curiosità che spinge l’utente a vedere che cosa c’è oltre, se fallite qui, allora sperate di avere un back ground completo in ogni dove, e mi riferisco a cose serie come i manuali dei GdR cartacei, perché di vie di mezzo, il mondo dei Gdr online ne è pieno.
Ora vediamo tre tipi diversi di impostazione grafica per l’home page:
- Classica full window: Questo tipo di grafica occupa tutta la finestra del browser, dovrebbe essere utilizzata, qualora vi siano parecchie informazioni che si vogliono mettere nell’home page, un po’ come fosse la home di un portale.
L’errore più frequente di molti gestori di giochi di ruolo online, e voler scegliere questa impostazione ma non avere abbastanza informazioni da inserire in essa. Questo comporta un avanzo di spazi, che l’occhio rileva come dispersione, sensazione di vuoto, tal volta questo difetto può venir compensato dall’incorniciare i dati. In sostanza e come quando il soffitto di un locale viene abbassato con delle travi, l’occhio percepisce prima le travi e non si accorge subito che queste non sono il vero soffitto, ma che fra esse e le travi c’è dello spazio. Non da meno anche la scelta dei colori è importante, se avanzano degli spazi non bisognerebbe utilizzare colori freddi come ad esempio l’azzurrino, accentuano il senso di vuoto.
Abbiamo anche l’errore opposto, un sovraccarico di informazioni. A volte capita che nella home page vengano messe più informazioni del necessario, le quali spesso nemmeno vengono lette, molte di esse poi risultano essere presenti nelle bacheche interno del gioco.
In entrambi i casi viene portato via dello spazio alla grafica e allo scopo principale della home: catturare l’utente.
Un altro piccolo errore presente soprattutto fra i ragazzi più giovani, si ha nell’utilizzo di uno sfondo a ripetizione, molte volte questo sfondo non è una texture ma un immagine, con la conseguenza che ad ogni ripetizione, l’occhio assiste alla duplicazione netta dell’immagine senza una continuità uniforme, questo fa perdere qualità.
Un home page a tutto schermo, in termini di scrittura, dovrebbe contenere l’essenziale al fine di avvicinare/incuriosire l’utente.
Inserire le news nella home page, può essere una buona strategia, se queste sono presenti come semplici titoli su cui poi si apre una pop up, oppure vengono aperte in uno spazio ben preciso della home, senza doverla “scrollare” per intero. Prendete come esempio la prima pagina dei giornali, su di essa ci sono delle sintesi alle notizie, ed il rimando alla pagina esatta in cui possono essere lette per intero.
Con questo sistema spesso, si riesce ad avere una home page full window senza utilizzare lo scroll del browser con uno sfondo a ripetizione.
In questo tipo di home, potete includere il numero degli iscritti totali, il numero degli iscritti per razza, il numero di razze attive, la data di apertura, la media di utenti connessi giornalmente, il numero di pagine viste, il numero di utenti connessi attualmente, tutte informazioni che hanno lo scopo di attirare l’attenzione, perché è a questo che vi serve l’home page, è la vostra scatola, è la prima cosa che vede l’occhio.
Fra le interfacce di gioco e la home, cercate di mantenere uno stile diverso ma concatenato, ovvero non usate gli stessi colori della home, con i medesimi scopi (sfondo scritte del menù ad esempio) nell’interfaccia, perché questo da vita ad un senso di monotonia che può scoraggiare l’utente.
Farli nettamente diversi, non è un problema, ma attenzione a non generare nell’utente, la situazione di trovarsi con un piede nella home ed un piede nell’interfaccia, a volte ho visto gdr con una discreta home ma una pessima interfaccia, tanto che mi sono chiesto dove fosse il nesso.
Concatenare, significa semplicemente che l’ideale, è utilizzare fra home e interfaccia, la stessa gamma cromatica con variazioni cromatiche diverse, ma minime. Possiamo avere una home, che abbraccia tutta la gamma cromatica compresa fra un rosso F1543A e un giallo FCDC03, ma non significa che utilizzare colori diversi sia sbagliato, anzi. Ad esempio un verde apparentemente non c’entra nulla, se usato troppo e in malo modo l’occhio se ne accorge, ma anche qui è possibile ingannare l’occhio e la mente.
Se il colore viene utilizzato poco e nel modo giusto, succede che l’occhio percepisce l’immagine nel suo insieme apprezzandola e non accorgendosi del verde, perché è minore rispetto al quantitativo degli altri colori. Se invece si sposta ad osservare quel verde, inizia a rapportarlo con il resto dei colori ma non riesce a dare un giudizio definitivo, perché preso singolarmente ha l’impressione che stoni, quando l’occhio riprende ad avere la visione completa, questa sensazione svanisce.
Le ultime note da spendere vanno all’header della home, ovvero la parte alta quella dove generalmente si trova il titolo del gioco.
Si trova in alto per tre principali motivi:
-solitamente è la prima porzione della pagina a caricarsi, quindi la prima ad essere vista.
-la porzione superiore della pagina, è quella dove l’occhio è più abituato a guardare, in quanto si trovano la stringa dell’url e i comandi del browser
-nel tempo, si è creato uno standard che vede il titolo di una home page nella parte alta, questo ha saldato ancora di più la nostra abitudine, ad aspettarci il titolo in quella posizione.
Nell’header quindi va posizionato il nome del vostro GdR, il nome vi rappresenta, non dategli un’aria sciapa, il titolo deve essere una freccia che si incunea nel cervello dell’utente, lo deve colpire, l’header è il cavallo di battaglia della home, specie nello stile moderno che tra poco vedremo.
Evitate sfondi a tinta unica su cui “appoggiate” il titolo con un effetto bagliore esterno, perché è la prima cosa che una persona poco avvezza alla grafica esegue, di conseguenza, nel tempo, se ne è abusato ed ora è diventata una combinazione dall’effetto scarso.
- Moderna:
Definisco moderne, tutte quelle home generalmente rettangolari, incorniciate da una linea di 1-2 pixel, posizionate al centro o lato sx della finestra del browser, senza occuparla tutta e che in questo spazio ridotto racchiudono tutte le funzionalità di una home page full window, senza dover utilizzare lo scroll del browser. Molti template per blog utilizzano questo stile che spesso sembra attingere dal minimalismo, per la sua essenza trasmessa da poche linee ben assestate.
Qui su GdR on line non ne ho viste molte, anzi a dire il vero ne ho viste due-tre, quindi non posso fare una lunga descrizione degli errori più comuni in relazione all’utilizzo di questa home nei gdr.
Questo è uno stile che negli ultimi anni ho apprezzato sempre di più, da una sensazione di classe, di sintetico e di pieno contemporaneamente, ma è molto difficile da gestire con efficacia, lo spazio è ridotto e bisogna saper fare un uso sapiente dei pochi pixel a disposizione.
Anche qui come per la full window, cercate di differenziare la home dall’interfaccia di gioco, è come un pacchetto regalo, ricordate quando eravate piccoli? Eravate tutti presi da quei pacchi regalo avvolti nelle loro sgargianti confezioni, che già vederli era una sorpresa, aprirli e scoprire che il contenuto era ancora meglio dell’incarto, generava in voi una seconda sorpresa. Ecco questo dovete fare.
Fate attenzione che le home moderne e minimaliste, possono uccidere ambientazioni come quelle fantasy, ma sostenere invece quelle futuristiche.
Scegliete questo tipo di home se non avete la necessità di immettere delle news, questo perché lo spazio ridotto è difficile da gestire se non siete abili, preferite piuttosto inserire i numeri, i dati di cui sopra in stile full window ho accennato, sfruttate il minimo per ottenere il massimo, dopo tutto il gioco è dentro non fuori, aggiungere le news in home dovrebbe essere uno sfizio, un contorno da eseguire solo dopo che la home è riuscita ad ottenere il suo scopo “catturare” l’attenzione.
- Prehome:
Definisco prehome una sequenza di pagine di questo tipo: logo-home-interfaccia.
A volte per esigenze stilistiche, si viene a concludere che la home non può supportare lo stile, la qualità e la quantità grafica decisa, per vari motivi, magari perché non c’è spazio, o perché abbiamo realizzato un lavoro che cozza un po’ con i colori della home, oppure perché vogliamo utilizzare una strategia diversa di “vendita” del nostro prodotto, così decidiamo per un pagina, prima della vera è propria home page.
In essa spesso troviamo un simbolo oppure in siti non inerenti il gdr (quindi non ci interessa) il link alla nostra stessa pagina ma in lingua diversa.
Perché troviamo un simbolo? Perché spesso è un simbolo criptico? qualcosa che non ci dice nulla a volte corredato da poche scritte come “entra” oppure risoluzione “800x600” ecc?
Perché dobbiamo insinuare la curiosità nell’utente.
Ricordate? Chi opta per questa scelta spesso non può dare alla home page quella grafica che serve a spingere la molla della curiosità, oppure non può farlo nel modo che vorrebbe. Quindi quello che era lo scopo della home page, viene trasferito alla prehome. Perché un simbolo o un’immagine che spesso occupano uno spazio ridotto al centro?
Perché se fosse qualcosa di più diverrebbe una home page e non avrebbe più senso quella che invece era la nostra pagina madre.
I simboli in essi raccolgono un messaggio, il nostro cervello lo sa, quindi si sforza di capire il significato e questo spinge in noi la curiosità a proseguire, stessa cosa per le immagini.
Il tutto viene posizionato al centro, perché è lì che la nostra attenzione ricade, quando guardiamo il monitor non guardiamo i suoi bordi. Come vedete, tutto ha una sua strategia.
Purtroppo il senso si è perso, così molti ragazzi anziché sforzarsi di creare un simbolo nuovo, ne usano altri riciclati dalla nostra cultura, oppure da altri siti. Il simbolo o l’immagine dovrebbero essere qualcosa di nostro, qualcosa di intimamente connesso al gdr, qualcosa che magari si rifà al back ground del gioco stesso.
L’interfaccia di gioco
Questa è la parte più ostica del lavoro di un grafico, nel realizzarla dovete tenere conto di questi fattori:
1) Interazione con l’ambiente di gioco
Se si tratta di un ambientazione fantasy, utilizzate uno stile fantasy, non siate asettici, la grafica dovrebbe evocare l’ambiente in cui vi trovate, è questo il suo scopo, aggiungersi alla vostra immaginazione, darle una spinta, aiutarla a mettersi in moto.
2) Interazione con l’occhio
Questa è l’area in cui l’utente passerà la maggior parte del tempo, concentrandosi maggiormente sullo spazio dell’interfaccia dedicato alle chat e alle bacheche.
Non dovrete utilizzare colori sgargianti ne troppo scuri, nel primo caso gli occhi si stancheranno prima, nel secondo caso la noia subentrerà prima, compreso un senso di oppressione dato dalla maggioranza di colori scuri.
Se proprio dovete usare delle combinazioni vivaci, fatelo all’esterno facendole sfumare mano a mano che si avvicinano all’area di gioco vera e propria.
3)Efficienza
Cercate di trasferire tutti i comandi, all’interfaccia. I tasti come leggi la posta, scrivi, ecc dovrebbero essere sempre presenti nel vostro pannello di comando, e non accessibili da una pagina che si apre all’interno dello spazio dedicato a chat, bacheche e mappe o comunque sempre meglio aprirle in un’altra finestra.
Quando li scegliete, se non sono tasti scritti, usate icone che richiamino la loro funzione o se non è possibile per esigenze stilistiche, dite al programmatore di fare in modo, che al passaggio del mouse sopra di essi, si apra la classica finestrella a sfondo giallo con scritto al suo interno la funzione del tasto.
4) Stile: pesante o leggero
Scegliete lo stile, uno stile pesante e costruito vi permette> di usufruire di tutti i pixel disponibili per occuparli con l’interfaccia, ciò vi consentirà di trasmettere meglio l’atmosfera di gioco, dall’altro lato alcuni non lo apprezzeranno perché lo troveranno troppo “massiccio” o pesante.
Lo stile leggero quasi minimalista vi permette in impatto soft con l’occhio ma per ambientazioni fantasy, dark, gothic, medievali, barocche ecc vi risulterà più difficile trasmettere l’atmosfera di gioco, ben si adatta come già detto in precedenza, allo stile futuristico/moderno. Infine se nell’altro troverete qualcuno che lo definirà pesante, qui troverete qualcuno che lo definirà povero.
Nella costruzione dell’interfaccia di gioco evitate di utilizzare immagini di sfondo alle chat, specie se queste si ripetono senza intersecarsi, l’effetto è scadente e spesso non si riesce ad ottenere una combinazione efficace fra il colore del font e quelli dell’immagine.
Un consiglio sui simboli
I simboli sono un’altra piaga per i grafici, lavorare in 30x30 pixel o peggio 20x20, sarebbe stato come chiedere a Leonardo da Vinci di dipingere un capolavoro su una tela di 1cm per 1cm.
Ho conosciuto professionisti della grafica con esperienza di 10-15anni in grado di costruire la grafica di videogioco in stile 3d, ma che di fronte alla richiesta di fare un simbolo di 20x20 si sono messi le mani nei capelli.
Ho visto che molti utilizzano simboli riciclati dal web o da altri gdr on line, nel farlo ritagliano l’immagine dal suo sfondo originario per renderla poi una gif trasparente oppure per incollarla su di un nuovo sfondo fermandosi lì, con il risultato che i bordi risultano seghettati, oppure nei casi delle gif trasparenti, spesso si adagiano bene sullo sfondo di un colore, ma sopra un altro sono orribili.
Dal momento che i simboli devono comparire in tre punti solamente: sfondo chat, sfondo schede e sfondo bacheche, utilizzate per tutti e tre i contesti lo stesso sfondo, in questo modo non dovrete salvare i simboli in formato gif trasparente, ma direttamente in jpg mantenendo una risoluzione migliore.
Quando ritagliate i simboli, fatelo bene e una volta incollati sul nuovo sfondo, limate il contorno con il comando sfoca di un qualsiasi programma di grafica.
Ideologie Metropolitane
In questo ultimo punto, scriverò di alcune fra le più consuete frasi che mi capita di sentire e che purtroppo negli anni si stanno tristemente insinuando nel cervello dei giocatori, con il risultato di creare idee balzane, basate su fondamenta distorte e che spesso vengono ripetute per sentito dire.
“La grafica in un gioco di ruolo non è importante”
Questa frase è controproducente, sembra di sentire qualcuno che mi dice “l’importante è essere belli dentro” certo vero, ma tu provi attrazione al primo colpo per una persona esteticamente brutta?
Un pensiero di questo tipo, sembra fatto per tirarsi su il morale, quando invece si sa bene che la grafica del proprio gdr non è il massimo, e non ci resta che sperare solo nel bg per richiamare l’attenzione dei players.
Moralmente, idealmente, è così. Il contenuto, l’originalità della storia, dovrebbero avere l’importanza maggiore, purtroppo non è così, la grafica conta per la metà..
Essa ha lo scopo di gettare la rete, il bg invece quello di infilare le catene ai polsi dei giocatori.
E’ più facile catturare qualcuno con una rete, che aspettare che si lasci convincere a farsi mettere le catene ai polsi.
“La grafica Flash è più bella”
Si certo, probabilmente quando la tecnologia ci permetterà di modificare la gioconda di da Vinci tanto da farle fare il sorriso alternato ad una linguaccia, 24 su 24 a qualcuno piacerà a qualcun altro no, ancora una volta, gusti.
Quando vidi il formato flash intorno al 99’ circa, tirammo un sospiro di sollievo, finalmente non dovevamo più fare gif animate chilometriche e pesanti per le intro. Di fatti è bellissimo per fare le intro, ma a lungo andare per diverse persone flash diventa noioso, stare connessi e vedere l’animazione della pagina che si compone davanti a noi, le linee che si intersecano in linea di massima allo stesso modo di altre duecento animazioni di apertura dell’interfaccia di un sito, mentre tu sei lì che aspetti solo di poter cliccare per vedere quella cosa che ti interessa e poi, finita l’animazione ti trovi davanti una home page di un piatto incredibile, oppure un bitorzolo pieno di effetti e ghirigori vari che non riesci a trovare i link. C’è modo è modo di fare le cose, non sempre l’animazione è migliore della statica, anzi, spesso è un abuso, oppure colma la mancanza di fantasia di chi l’ha creata.
“Quel gdr ha la grafica pesante, non va bene”
Questa è una critica abbastanza diffusa, il problema e che tre quarti degli utenti che la esprimono, non sanno cosa dicono, e in secondo luogo, ai giorni nostri, con le attuali velocità di connessione, l’eventuale grafica pesante è una scelta e non un difetto.
Una volta la grafica pesante era una pagina che ci metteva troppo tempo a caricarsi (20 e più secondi), oggi non è più così, la media dei players viaggia con linee adsl.
Una volta sono stato su quella che un utente ha definito pagina pesante, mi si è aperta in un tempo compreso fra 3 e 5 secondi.
Grafica pesante oggi, è un tipo di grafica dall’aspetto massiccio e che non significa necessariamente che sia brutta o sbagliata, è uno stile così come lo era il cubismo o l’impressionismo.
“Sto cercando un grafico che mi allacci la nuova home al codice”
Un grafico non allaccia niente, un grafico dipinge e basta. Sono i programmatori ad allacciare il codice alle immagini, per questo motivo grafico e programmatore dovrebbero lavorare in una quasi totale simbiosi, sono due figure che si completano.
Con questo vi saluto e spero di essere stato utile a qualcuno!
I dati del 
