Creare la bozza di una skin

Ultima modifica: 06/08/13

In questo tutorial vi spiegherò come creare con Gimp la bozza di una skin come questa.

  1. Decidete come organizzare lo sfondo fuori dal container (il container è la parte centrale). Potete farlo monocolore, oppure usare un pattern, oppure usare un'immagine. Se scegliete quest'ultima opzione cercate un'immagine abbastanza grande da usare come sfondo.
  2. Aprite un nuovo documento di grandi dimensioni. Il mio è di 1340x1300px. Altre dimensioni molto usate sono: 1024x1200px, 1280x900px, 1340x1680px. Se per lo sfondo avete scelto un'immagine scegliete in base alle sue dimensioni quelle del documento.
  3. Inserite lo sfondo che avete scelto e rinominate questo livello sfondo (cliccate col tasto destro del mouse sul livello e poi andate su Modifica attributi livello e digitate il nome).
  4. Create un nuovo livello (Livello-->Nuovo livello) e rinominatelo container. Con lo strumento selezione rettangolare disegnate un grande rettangolo al centro per il container: qui andranno il banner, la tabella, la tagboard con la chat e le varie sezioni. La grandezza del mio è di 840x1160px. Se vi piace di più potete fare un rettangolo arrotondato. Con il secchiello riempite il rettangolo di un colore che si abbina allo sfondo. Io ho scelto il colore #000348. Se non volete colorare lo sfondo del container alla fine di tutto il lavoro eliminate questo livello.
  5. Se volete tenere il container potete anche aggiungere un bordo. In tal caso duplicate il livello container (Livello-->Duplica livello) e rinominatelo bordo_container (cliccate col tasto destro del mouse sul livello e poi andate su Modifica attributi livello e digitate il nome). Andate su Livello-->Trasparenza-->Alfa a selezione e poi su Seleziona-->Riduci e impostate il numero di pixel che volete per il bordo. Io ho scelto 10px. Cliccate Ctrl+X per cancellare la parte interna, in modo che rimanga solo il bordo. Ora il bordo avrà lo stesso colore dello sfondo del container, per differenziarlo andate su Livello-->Trasparenza-->Alfa a selezione e poi colorate la selezione usando il secchiello (per un bordo monocolore) oppure utilizzando lo strumento sfumatura (se volete due o più colori che sfumano). Io ho usato lo strumento sfumatura per colorare dal #7159be al #135387.
  6. Ora creiamo la barra in alto (quella in cui si può accedere al profilo, al messenger, ecc...). Create un nuovo livello (Livello-->Nuovo livello) e rinominatelo barra (cliccate col tasto destro del mouse sul livello e poi andate su Modifica attributi livello e digitate il nome). Con lo strumento selezione rettangolare disegnate un rettangolo in alto, lungo quanto tutto il documento. Il mio è di 1340x55px. Con il secchiello o con lo strumento sfumatura colorate l'area rettangolare. Io ho usato lo strumento sfumatura per colorare dal #207f82 al #155e79. Ora andiamo a inserire tutto ciò che deve contenere la barra. Cerchiamo un'immagine da usare come avatar. Una volta trovata rimpicciolitela a piacimento (può anche "sbordare" dalla barra, io l'ho scelta di 50x50px in modo che stia all'interno), copiatela e incollatala in un nuovo livello (Modifica-->Incolla e poi Livello-->A nuovo livello). Spostate l'avatar sulla sinistra. Se volete potete aggiungere un piccolo bordo all'avatar (Livello-->Trasparenza-->Selezione a alfa e poi Seleziona-->Bordo e scegliete 1 o 2 px). Ora andiamo a inserire le icone sulla destra e la barra di ricerca. Per inserire le icone potete fare uno stamp di icone che trovate in altre skin, poi copiatele e incollatele in un nuovo livello (Livello-->Ancora livello). Potete fare la stessa cosa per la barra di ricerca, oppure potete crearne una voi creando un rettangolo arrotondato con un'ombra in alto a sinistra e poi incollando una lente di ingrandimento sulla destra. Infine bisogna aggiungere le scritte. Per il colore sceglitene uno che si abbini sempre allo sfondo ma che sia ben leggibile, quindi diverso dal colore della barra. Io ad esempio l'ho scelto bianco. Come carattere conviene scegliere un font senza troppe decorazioni e ben leggibile e di dimensione non troppo grande, deve essere contenuto all'interno della barra. Io ho scelto Italianno di dimensione 28px.
  7. Ora andiamo a creare il banner. Potete crearlo in un documento a parte, oppure nello stesso documento in cui state lavorando. Se avete fatto un conteiner come il mio e volete metterlo all'interno le dimensioni non devono superare quelle del conteiner. Potete creare un banner con i contorni ben definiti, oppure sfumarli con lo sfondo del container. Potete anche fare semplicemente una bella scritta con il nome del forum oppure aggiungere anche alcune immagini come ho fatto io. A voi la scelta. L'importante è che il banner non stoni troppo con il resto della skin: quindi bisogna usare colori che si intonano con quelli già usati e se si usano immagini queste non devono avere uno stile troppo differente dall'immagine di sfondo.
  8. Ora andiamo a costruire: tabella, tagboard (chat) e un blocco di sezioni (ne basta uno per una bozza skin). Create un nuovo livello (Livello-->Nuovo livello) e rinominatelo Tabella_sfondo. Con lo strumento selezione rettangolare disegnate un rettangolo al centro del conteiner, sotto il banner. Il mio è di 700x250px. Se volete potete farlo anche arrotondato. Ora prendete il secchiello e riempite la selezione di un colore che si abbina con quelli già usati. Io ho usato il colore #207f82 e ho impostato la modalità del livello su schermo. Ora andiamo a creare il bordo della tabella. Rimanete sul livello Tabella_sfondo e andate su Livello-->Trasparenza-->Alfa a selezione. Create un nuovo livello (Livello-->Nuovo livello), rinominatelo Tabella_bordo e andate su Seleziona-->Bordo e scegliete la dimensione (io ho scelto 2px). Colorate la selezione con un colore già usato o con un altro colore che si abbina agli altri (io ho scelto il coore #686cc5). Ora cercate di decorare il bordo: potete fare un doppio bordo, oppure un effetto illuminazione come nel mio esempio, oppure ancora potete applicare delle immagini come ha fatto •Stella~ in questa bellissima bozza skin. Per completare il riquadro della tabella dovete decidere dove inserire il "titolo" della tabella. Nel mio esempio ho preso l'immagine di una fatina e l'ho inserita in un nuovo livello chiamato tabella_fatina_sx, poi ho duplicato il livello, l'ho rinominato tabella_fatina_dx e l'ho ribaltato in orizzontale (Livelo-->Trasforma-->Rifletti orizzontalmente). Poi ho preso l'immagine di una pergamena (nel web ne trovate tante), l'ho salvata sul pc e aperta come nuovo livello (File-->Apri come livelli), l'ho rimpicciolita usando lo strumento scala, e l'ho sistemata tra le due fatine. Infine ho applicato un effetto illuminazione sulla pergamena e ho modificato il colore della pergamena andando su Colori-->Tonalità-saturazione.
  9. Ripetete il passaggio precedente per creare la struttura della tagboard e del blocco di sezioni, variando l'altezza dei riquadri. La mia tagboard è di 700x135px, il blocco delle sezioni 700x335px.
  10. Ora scrivete i titoli dei vari blocchi: quello della tabella, quello della tagboard e quello delle sezioni. Io li ho chiamati rispettivamente: welcome, chat e regno incantato. Il font e il colore potete sceglierli nuovi oppure fra quelli che avete già utilizzato. Io ho usato il font 101! Star Lit Nght di 28px e di colore bianco (come per le scritte nella barra in alto).
  11. Ora andiamo a creare la parte interna dei vari blocchi. Nella tabella potete inserire tutto ciò che generalmente contengono le tabelle dei forum: immagini, minibanner, icone e un piccolo testo. Per quanto riguarda il testo conviene scegliere un font standard di scrittura, come Times New Roman, Arial, fonts della famiglia Serif ecc... Il colore può essere nuovo (purché si intoni con gli altri colori) oppure fra quelli già utilizzati. In genere si sceglie un colore diverso rispetto a quello dei titoli dei blocchi, ma non sempre. La cosa più importante è che si scelga un colore che permetta una lettura del testo senza troppe difficoltà: se lo sfondo è scuro è bene utilizzare un colore chiaro di contrasto, se lo sfondo è chiaro il viceversa. Io ho usato il font Tahoma di 11px, come colore ho scelto #249ba6.
  12. Una volta ultimata la tabella occupatevi della parte interna della Tagboard. Bisogna inserire i bottoni vari e il rettangolo in cui si scrive il testo. Per farlo potete fare uno stamp da una skin con dei colori simili ai vostri, incollatela sul vostro documento su un nuovo livello, tagliate la parte superfluea, se necessario rimpicciolitela, e poi impostate la modalità del livello su Schermo. Se volete potete anche inserire qualche scritta di esempio sulla chat. In tal caso scegliete lo stesso font, la stessa grandezza e lo stesso colore del testo della tabella.
  13. Infine andate nel blocco delle sezioni. Decidete quante sezioni inserire, io ad esempio ne ho scelto 4, quindi ho diviso il blocco in 4 parti. Per farlo ho creato un nuovo livello (Livello-->Nuovo Livello), e con lo strumento matita ho disegnato all'interno del blocco 3 linee orizzontali dello stesso colore del bordo. Per disegnare il tratto orizzonatale impostate la matita con un pennello tondo o quadrato della dimensione di 1px, fate un click nel punto in cui volete che cominci la linea, premete Shift da tastiera, lasciando premuto posizionatevi nel punto finale e infine fate un click e verrà disegnato il tratto di matita. Se avete difficoltà a fare un tratto perfettamente orizzontale con questo sistema potete anche disegnare un rettangolo avente per la stessa dimensione del blocco e per altezza 1px. Una volta diviso lo spazio per le sezioni bisogna creare i bottoni "on" e "off" da mettere sul lato sinistro. Potete farli sfruttando qualche immagine, oppure qualche pennello, o volendo potete fare anche solo delle semplici scritte. Io ho creato due bottoni rotondi usando due diverse immagini. Create un livello per ogni bottone e fate attenzione che i bottoni siano ben incolonnati. A questo punto mancano solo le scritte. In genere si differenzia il titolo della sezione dalla sua descrizione sia per la grandezza che per il colore (infatti il titolo della sezione è un link, e i link in genere hanno un colore diverso rispetto al resto del testo). Io ho cambiato anche il font: ho scelto Italianno (lo stesso font che avevo scelto per le scritte della barra in alto) di 30px e colore bianco. Il testo della descrizione invece deve essere lo stesso di quello della tabella e della chat. Infine, sulla destra del blocco ho inserito due colonne di testo: una indica le statistiche (numero di discussioni e risposte), l'altra l'ultimo messaggio pubblicato.
  14. A questo punto la bozza della skin è pronta! Se vi viene in mente qualche altra idea potete aggiungere qualche decorazione (io ho aggiunto due fatine ai lati del banner) oppure fare qualche modifica sui colori. Io, ad esempio ho cambiato i colori delle parti di testo che sono link, come i nick (nalla chat e nella colonna di destra del blocco delle sezioni) e i titoli delle ultime discussioni. Per farlo ho duplicato il livello del testo di cui volevo cambiare parte dei colori (Livello-->Duplica livello) e poi sono andata su Livello->Abbandona informazioni sul testo. Ho cancellato le parti di testo che non mi ineterssavano lasciando solo quelle dei link, e ho impostato la modalità del livello su Somma.

Esempi di skin

Per avere idee su come fare una bozza skin è importante vedere tanti esempi di skin reali, in modo da avere degli spunti. Ecco quindi alcuni esempi:

Condividi su Facebook