Salve a tutti!
In questa guida vedremo come creare dei banner
che siano all' altezza di quelli professionali.
Il primo banner che andremo a vedere, è quello
più piccolo e più semplice da fare, ovvero l'
88x31 pixel. Quindi, create un nuovo documento
di Photoshop di queste dimensioni, con lo sfondo
trasparente.
Bisogna ora stabilire come creare il banner in base
alla grafica e ai contenuti del sito in questione.
Di norma, un banner di queste dimensioni è
principalmente composto da questi elementi:
- 1 sfondo, che non deve contenere troppe
*sfumature o effetti 3d, visto le dimensioni
*estremamente ridotte.
*Per la scelta dello sfondo, si può usare una
*texture o un c4d abbastanza semplice, e
*se non ne avete una personale può andare
*benissimo trovata una con Google Immagini.
- Il logo o la sigla del nome del sito, scritta in
*angolo del banner. Se scegliete di usare la
*sigla del nome del sito, è bene scegliere un
*font senza Anti-Alias, e che sia veramente
*semplice e funzionante anche a dimensioni
*estremamente ridotte. Ecco un ottimo sito
*dove potrete scaricare decine di pixelfont:
*
- Magari non lo avete notato, ma spesso questo
*tipo di banner ha un bordo nero di 1 pixel
*per tutto il contorno del banner. Per crearlo
*basterà creare un nuovo livello sopra tutti gli
*altri, selezionare lo strumento Matita, impostare
*la dimensione di 1 pixel e creare il contorno.
Ora passiamo alla pratica!
Create appunto il documento come detto prima,
e importateci la texture come sfondo, riadattandola
alle dimensioni del banner.
Come texture, io ho usato questa:
L' ho riadattata e tagliata, poi ho inoltre usato
lo strumento Contrasta per aumentare di un pochino
la nitidezza.
Ho creato poi un livello di testo, settato con
queste impostazioni:
Font: The Godfather
Dimensione: 24 pt
Colore: bianco
Ho applicato una traccia di nero di 1 pixel
e duplicato il livello. Ho rasterizzato quello
duplicato, e infine ho applicato l' Effetto vento
2 volte.
Ecco il risultato finale:
Non vi resta che andare su File>Salva per Web
e salvare l' immagine (io la salvo in .png).
Caricate l' immagine su un vostro dominio o
su un servizio come tinypic (
Dovrete ora fornire a chi vuole affiliarsi al vostro
sito il seguente codice html:
********************************************
Passiamo ora al banner verticale di 120x240 pixel.
Il vantaggio di questo e degli altri banner rispetto a
quello di 88x31 pixel è il fatto che, essendo più grandi,
si possono mettere più informazioni.
Vediamo ora come posizionare gli elementi all' interno
del banner, con quest' immagine presa da html.it:
Io, nel mio caso, ho scelto il primo:
L' immagine è prevalentemente costituita da:
- 1 sfondo in tinta unita con un pattern
*(se siete a corto di pattern, vi consiglio quest'
* ottimo sito:
- 1 logo (che è ovviamente quello del sito del
* banner)
- il link o il nome del sito (non troppo grande)
- della grafica di riempimento (io ho creato,
*smanettando un po' con i vari strumenti forma
*quest' immagine alla quale ho applicato vari effetti:
*
- lo slogan o una breve descrizione dei contenuti
*del sito
Ora, però, il banner è un po' statico, quindi andiamo
a vedere un piccolo "trucchetto" per rendere il banner
più interattivo.
Innanzitutto, dovete preparare 2 immagini:
la prima rappresenterà il banner quando
l' utente non sta passando il mouse sull'
immagine.
La seconda rappresenterà invece il banner
quando l' utente tiene il mouse sul banner.
*
Ora, anziché fornire a chi si vuole affiliare al sito
il codice precedente, fornirete questo:
Ecco una piccola animazione che mostra il
funzionamento:
***************************************************************
Passiamo al banner di 468x60 pixel.
Innanzitutto, vediamo come predisporre gli
elementi grafici all' interno del nostro spazio
con quest' immagine presa da html.it:
Io ho scelto l' ultimo:
Anche qui possiamo notare i seguenti componenti:
- 1 sfondo in tinta unita con un pattern
- 1 logo (che è ovviamente quello del sito del
* banner) o grafica di riempimento
- il link o il nome del sito (non troppo grande)
- lo slogan o una breve descrizione dei contenuti
*del sito
Non sto qui a dirvi come l' ho creato, in quanto
è molto simile al banner precedente.
Vi lascio però quest' animazione che mostra
il banner in tutte le sue fasi di costruzione:
Anche con questo è consigliabile rendere il
banner più interattivo con il consiglio visto prima:
*
Anche qui, anziché fornire a chi si vuole affiliare al sito
il codice del banner di 88x31 pixel, fornirete questo:
Ecco una piccola animazione che ne
mostra il funzionamento:
********************************************
Passiamo all' ultimo banner che andiamo a vedere insieme,
che è cioè quello di 520x520 pixel.
Prima di cominciare, analizziamo un banner qualsiasi
e vediamo di che elementi grafici è composto:
Ovviamente siete liberi di posizionare gli elementi
grafici come volete, questo è solo un esempio.
Notiamo che il banner d' esempio è
principalmente formato da:
- 1 sfondo con strisce di vari colori alle quali sono
*stati applicati vari effetti (voi potete applicare
*benissimo anche solamente un pattern a uno
*sfondo in tinta unita o con sfumatura)
- 2 loghi (che è ovviamente quello del sito del
*banner, voi potete metterne anche solo 1)
*o grafica di riempimento
- il link o il nome del sito (non troppo grande)
- lo slogan o una breve descrizione dei contenuti
*del sito
Ecco il banner che ho creato io:
Non sto qui a dirvi come l' ho creato, in quanto
è simile agli altri banner visti in precedenza,
e anche perché ogni grafico ha il proprio stile.
Anche con questo è consigliabile rendere il
banner più interattivo con il consiglio visto prima:
*
Anche qui, anziché fornire a chi si vuole affiliare al sito
il codice del banner di 88x31 pixel, fornirete questo:
*******************************************************
Fine del tutorial!
Fonte:mia
P.S.: Cliccate sulle immagine per poterle vedere a
dimensione originale
In questa guida vedremo come creare dei banner
che siano all' altezza di quelli professionali.
Il primo banner che andremo a vedere, è quello
più piccolo e più semplice da fare, ovvero l'
88x31 pixel. Quindi, create un nuovo documento
di Photoshop di queste dimensioni, con lo sfondo
trasparente.
Bisogna ora stabilire come creare il banner in base
alla grafica e ai contenuti del sito in questione.
Di norma, un banner di queste dimensioni è
principalmente composto da questi elementi:
- 1 sfondo, che non deve contenere troppe
*sfumature o effetti 3d, visto le dimensioni
*estremamente ridotte.
*Per la scelta dello sfondo, si può usare una
*texture o un c4d abbastanza semplice, e
*se non ne avete una personale può andare
*benissimo trovata una con Google Immagini.
- Il logo o la sigla del nome del sito, scritta in
*angolo del banner. Se scegliete di usare la
*sigla del nome del sito, è bene scegliere un
*font senza Anti-Alias, e che sia veramente
*semplice e funzionante anche a dimensioni
*estremamente ridotte. Ecco un ottimo sito
*dove potrete scaricare decine di pixelfont:
*
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
- Magari non lo avete notato, ma spesso questo
*tipo di banner ha un bordo nero di 1 pixel
*per tutto il contorno del banner. Per crearlo
*basterà creare un nuovo livello sopra tutti gli
*altri, selezionare lo strumento Matita, impostare
*la dimensione di 1 pixel e creare il contorno.
Ora passiamo alla pratica!
Create appunto il documento come detto prima,
e importateci la texture come sfondo, riadattandola
alle dimensioni del banner.
Come texture, io ho usato questa:
L' ho riadattata e tagliata, poi ho inoltre usato
lo strumento Contrasta per aumentare di un pochino
la nitidezza.
Ho creato poi un livello di testo, settato con
queste impostazioni:
Font: The Godfather
Dimensione: 24 pt
Colore: bianco
Ho applicato una traccia di nero di 1 pixel
e duplicato il livello. Ho rasterizzato quello
duplicato, e infine ho applicato l' Effetto vento
2 volte.
Ecco il risultato finale:
Non vi resta che andare su File>Salva per Web
e salvare l' immagine (io la salvo in .png).
Caricate l' immagine su un vostro dominio o
su un servizio come tinypic (
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
).Dovrete ora fornire a chi vuole affiliarsi al vostro
sito il seguente codice html:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
********************************************
Passiamo ora al banner verticale di 120x240 pixel.
Il vantaggio di questo e degli altri banner rispetto a
quello di 88x31 pixel è il fatto che, essendo più grandi,
si possono mettere più informazioni.
Vediamo ora come posizionare gli elementi all' interno
del banner, con quest' immagine presa da html.it:
Io, nel mio caso, ho scelto il primo:
L' immagine è prevalentemente costituita da:
- 1 sfondo in tinta unita con un pattern
*(se siete a corto di pattern, vi consiglio quest'
* ottimo sito:
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
)- 1 logo (che è ovviamente quello del sito del
* banner)
- il link o il nome del sito (non troppo grande)
- della grafica di riempimento (io ho creato,
*smanettando un po' con i vari strumenti forma
*quest' immagine alla quale ho applicato vari effetti:
*
- lo slogan o una breve descrizione dei contenuti
*del sito
Ora, però, il banner è un po' statico, quindi andiamo
a vedere un piccolo "trucchetto" per rendere il banner
più interattivo.
Innanzitutto, dovete preparare 2 immagini:
la prima rappresenterà il banner quando
l' utente non sta passando il mouse sull'
immagine.
La seconda rappresenterà invece il banner
quando l' utente tiene il mouse sul banner.
Ora, anziché fornire a chi si vuole affiliare al sito
il codice precedente, fornirete questo:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Ecco una piccola animazione che mostra il
funzionamento:
***************************************************************
Passiamo al banner di 468x60 pixel.
Innanzitutto, vediamo come predisporre gli
elementi grafici all' interno del nostro spazio
con quest' immagine presa da html.it:
Io ho scelto l' ultimo:
Anche qui possiamo notare i seguenti componenti:
- 1 sfondo in tinta unita con un pattern
- 1 logo (che è ovviamente quello del sito del
* banner) o grafica di riempimento
- il link o il nome del sito (non troppo grande)
- lo slogan o una breve descrizione dei contenuti
*del sito
Non sto qui a dirvi come l' ho creato, in quanto
è molto simile al banner precedente.
Vi lascio però quest' animazione che mostra
il banner in tutte le sue fasi di costruzione:
Anche con questo è consigliabile rendere il
banner più interattivo con il consiglio visto prima:
Anche qui, anziché fornire a chi si vuole affiliare al sito
il codice del banner di 88x31 pixel, fornirete questo:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Ecco una piccola animazione che ne
mostra il funzionamento:
********************************************
Passiamo all' ultimo banner che andiamo a vedere insieme,
che è cioè quello di 520x520 pixel.
Prima di cominciare, analizziamo un banner qualsiasi
e vediamo di che elementi grafici è composto:
Ovviamente siete liberi di posizionare gli elementi
grafici come volete, questo è solo un esempio.
Notiamo che il banner d' esempio è
principalmente formato da:
- 1 sfondo con strisce di vari colori alle quali sono
*stati applicati vari effetti (voi potete applicare
*benissimo anche solamente un pattern a uno
*sfondo in tinta unita o con sfumatura)
- 2 loghi (che è ovviamente quello del sito del
*banner, voi potete metterne anche solo 1)
*o grafica di riempimento
- il link o il nome del sito (non troppo grande)
- lo slogan o una breve descrizione dei contenuti
*del sito
Ecco il banner che ho creato io:
Non sto qui a dirvi come l' ho creato, in quanto
è simile agli altri banner visti in precedenza,
e anche perché ogni grafico ha il proprio stile.
Anche con questo è consigliabile rendere il
banner più interattivo con il consiglio visto prima:
Anche qui, anziché fornire a chi si vuole affiliare al sito
il codice del banner di 88x31 pixel, fornirete questo:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
*******************************************************
Fine del tutorial!
Fonte:mia
P.S.: Cliccate sulle immagine per poterle vedere a
dimensione originale
Ultima modifica:
