Creare uno UserTotem LICENZA:

Cos'è un usertotem? In breve è una userbar sviluppata in verticale.
Come la sorella orizzontale, anche lo usertotem permette di inserire immagini nella firma, complete di testo.
Purtroppo, non tutti i siti di forum permettono l'inserimento di tali elementi grafici nelle firme, e TNT non fa eccezione.

Innanzitutto, per realizzarne uno, dovete avere degli strumenti: un programma di grafica (in questo caso utilizzeremo Photoshop), un'idea di quello che volete realizzare, e delle immagini.

Per questa guida ho scelto come tema Azureus, programma che molti di voi conosceranno, almeno di nome, bazzicando qua in TNT.



Per prima cosa, aprite Photoshop e create un nuovo documento che chiamerete "totem", di 30 pixel di larghezza e 120 di altezza, risoluzione 72 pixel/pollice (è la risoluzione standard per la visualizzazione delle immagini sul web), con sfondo trasparente.

Ora creiamo il bordo esterno della nostra immagine.
Selezionate tutta l'area dell'immagine (Select>All/Seleziona>Tutto o usando i tasti di scelta rapida CTRL+A). Dal menù Edit (Modifica), cliccate la voce bordo/stroke, ed impostate lo spessore a 1 px, colore nero, direzione del bordo come interno/Inside ed il resto lasciatelo com'è.



A questo punto avrete un livello (layer) di Photoshop in cui apparirà il bordo nero dello spessore di 1 px.
Assicuratevi di avete la finestra dei livelli già visualizzata (Window>Layers/Finestra>Livelli o F7). Rinominatelo con il nome "bordo"; basta selezionare il livello nella Finestra Livelli, tasto destro del mouse, Proprietà del livello/Layer Properties, questo farà aprire un'ulteriore finestra dove potrete cambiare il nome del livello.

Adesso dovete "solamente" inserire le immagini che volete utilizzare all'interno del vostro totem.

Ricordate che lo spazio a disposizione è piuttosto ridotto, quindi attenzione all'immagine che volete usare. Se è grande e la dovrete rimpicciolire, perderà particolari, quindi non è detto che l'effetto risultante sarà quello che volete ottenere. Se invece l'immagine è troppo piccola e dovrete ingrandirla, questa rischierà di "sgranare". Vi consiglio di provare e rendervi conto se possa andare bene.

Per lo sfondo ho scelto questa immagine (background.jpg)



Apritela con Photoshop, quindi selezionate tutta l'immagine (menù>Select>All o CTRL+A come prima), quindi copiate la selezione (Edit>Copy/Modifica>Copia o CTRL+C), ritornate sul vostro totem, ed incollate la selezione (Edit>Paste/Modifica/Incolla o CTRL+V. Questa verrà copiata in un nuovo livello della vostra immagine totem.
Assicuratevi di ordinare i livelli in modo d'avere il bordo sopra l'immagine, il cui livello chiameremo "sfondo".
Dato che volevo uno sfondo azzurro e non verde, ne ho cambiato il colore Image>Adjustament>Hue/Saturation (CTRL+U), scegliendo l'opzione colora/colorize(la casella in basso nella finestra) e modificando i valori cromatici dell'immagine.



Adesso abbiamo un bello sfondo azzurro su cui poter inserire il nostro soggetto: la rana di Azureus (rana.png).



Questa è una versione in formato PNG, che permette di avere una parte dell'immagine trasparente (il canale Alpha) come le GIF, ma che in più ha la possibilità di utilizzare un numero superiore di colori (v. guida Formati di immagini). Se volete, potreste utilizzare un'altra immagine, ma ricordatevi che la dovete prima scontornare, eliminando eventuali elementi di sfondo che non volete riportare nel totem.
Come prima, aprite l'immagine della rana, selezionate tutto (CTRL+A) e copiate (CTRL+C) e incollate (CTRL+V) nel vostro totem.
L'immagine risulterà essere troppo grande, quindi sarà da ridimensionare. Premete CTRL+T e in alto vi apparirà questa barra (altrimenti menù>modifica>trasformazione libera/menù>edit>free transform)



E' la barra di trasformazione del contenuto del livello selezionato, suddivisa nelle seguenti funzioni
- la prima area, riquadrata di colore verde, permette di scegliere il punto base e di origine per tutte le trasformazioni (in alto sx, alto-centro, alto dx, medio sx, centro, medio dx, sotto sx, sotto centro, sotto dx)
- l'area rossa indica le coordina del punto base, solitamente espressa in px o mm
- area blu indica in valore percentuale le dimensioni dell'immagine, o più esattamente dell'area occupata sul livello selezionato. Sono indicate la larghezza e l'altezza, solitamente in valore percentuale. Per scalare il livello, basta variare tali valori, esprimendoli in %, px o mm o altre unità di misura accettate da Photoshop. Tra i due valori, se notate c'è in disegno raffigurante una catena; se attivata (basta cliccarci sopra) uniformerà il valore di scala per entrambe le dimensioni. Ricordate che una volta modificati tali valori ed accettati, tali misure diventeranno le dimensioni 100% del livello.
- l'area gialla indica l'angolo di rotazione del livello
- l'area viola indica i valori di distorsione orizzontale e verticale
Quando attivate la trasformazione, attorno all'area occupata del livello apparirà un rettangolo con dei quadratini in corrispondenza dei vertici e dei punti mediani dei lati; questi possono essere utilizzati per scalare o ruotare manualmente l'area.
Scusate la digressione, ma volevo essere chiaro sugli strumenti, nel caso vogliate provare con immagini di varie forme e dimensioni.



Tornando alla nostra rana, impostate la scala a 25% e posizionatela in basso in modo tale che si possa vedere bene il muso e la zampa anteriore (basta che clicchiate e teniate premuto il tasto del mouse sulla rana e trascinatela dove volete). Premete ENTER una volta posizionata e ridimensionata correttamente.
Dato che non risalta molto, aggiungendo un effetto allo stile del livello con i metodi di fusione/blending option (tasto destro sul livello nella finestra livelli). Selezionate bagliore esterno/outer glow, effetto scolora/screen coi valori qua indicati scegliendo un azzurro come colore.



Adesso l'ultimo tocco: la scritta.
Selezionando lo strumento di scrittura ed utilizzando il font Visitor TT2 BRK (l'ho preso in prestito dalla guida sulle userbar di Plutarcus) scrivete THI NK con le impostazioni qua riportate (lo spazio tra la I e la N è voluto)



Aggiungetegli un effetto di bagliore esterno/outer glow sullo stile di livello.



Ruotate a questo punto la scritta menù>modifica>trasforma>ruota 90° antiorario/menù>edit>transform>rotate 90° CCW, e posizionatelo nella parte superiore dell'immagine usando lo strumento



Ripetete questi ultimi passaggi creando la scritta AZURE.

Posizionate le due scritte nella posizione che più preferite, facendo però in modo che non si sovrappongano alla figura della rana.

A questo punto salvate il tutto con il formato PSD, in modo tale che lo possiate modificare qualora vogliate.
Quindi, per ottimizzarlo per il web scegliete salva per web/save for web e scegliete le impostazioni che più si adattano all'utilizzo che ne vorrete fare, usando le opzioni preimpostate e vedendo nella preview l'esito della scelta e le dimensioni in Kb.

Qua vi inserisco anche delle altre versioni di UserTotem





La prima è uno UserTotem di 30x120px con bordo;
la seconda è sempre un UserTotem di 30x120px con bordo e con elemento esterno;




Messaggio modificato da toller58 il Aug 14 2017, 04:33 PM