Tnt village
tntvillage.scambioetico.org · Statuto T.N.T.      Aiuto      Cerca      Utenti      Calendario

Questo sito non utilizza cookies a scopo di tracciamento o di profilazione. L'utilizzo dei cookies ha fini strettamente tecnici.

Sostieni movimentopirati.org

 

  Discussione chiusaInizia nuova discussioneAvvia sondaggio

> [GUIDA] User Totem, Photoshop
epanimondo
  Inviato il: Aug 15 2007, 10:52 PM
Cita questo messaggio



Group Icon

Gruppo: Domiciliati
Messaggi: 6
Utente Nr.: 126651
Iscritto il: 28-April 07



user posted image


Creare uno UserTotem LICENZA:user posted image

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.

user posted image

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'Ŕ.

user posted image

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)

user posted image

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.

user posted image

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

user posted image

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)

user posted image

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.

user posted image

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.

user posted image

Adesso l'ultimo tocco: la scritta.
Selezionando lo strumento di scrittura user posted image 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)

user posted image

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

user posted image

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

user posted image

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

user posted image

user posted image

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


Per problemi o dubbi inerenti questa guida, o per mostrare ci˛ che siete riusciti a fare seguendo questa guida,
aprite un topic nel Forum GRAPHIC'S LAB
Per ringraziare l'autore di questa guida esiste questa discussione


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

---
Messaggio PrivatoIndirizzo Email
Top
Utenti totali che stanno leggendo la discussione: 0 (0 Visitatori e 0 Utenti Anonimi)
Gli utenti registrati sono 0 :
 

Opzioni Discussione Discussione chiusaInizia nuova discussioneAvvia sondaggio

 

Scambio etico - ethic share
 Debian powered site  Nginx powered site  Php 5 powered site  MariaDB powered site  xml rss2.0 compliant  no software patents  no software patents