Come creare un attraente prodotto pubblicitario

Creare un rinfrescante poster di una birra

Come realizzare un efficace scenario sott’acqua

Come realizzare una composizione di luci e particelle

Come creare un avanzato testo 3D con Cinema4D e Photoshop

Come realizzare un testo con ornamenti d’oro

Come creare una realistica illustrazione di fuoco in Photoshop

Come creare una composizione fantascientifica

Come creare un interessante composizione di armi

Come realizzare una scena retro fantascientifica

Come aggiungere effetti di luce ad una ragazza

Come creare una composizione fantasy

Come forse molti di voi ben sanno, l’avvento di Snow Leopard ha portato un’aggiornamento di Quicktime, denominandolo, Quicktime X, un player dalle funzionalità del tutto più potenti del precedente. Tra le varie feautures, si nota subito un restyling dell’icona; proprio per questo motivo, ho voluto cimentarmi nel creare una sua versione riveduta che spiegherò in questa guida per Photoshop.

Creiamo un nuovo documento 400×400 px con sfondo trasparente. Apriamo le preferenze premendo Ctrl + K e impostiamo la griglia come in figura; successivamente la attiviamo.

Tramite lo strumento selezione ellittica, creiamo un ellisse (ma dai? ) grande quanto il nostro documento e, su un nuovo livello, la riempiamo di colore nero. Successivamente andiamo su Selezione -> Trasforma selezione, ed impostiamo come altezza e larghezza 65%. Infine clicchiamo su canc per cancellare la selezione ridotta. Otterremo una sorta di ciambella!

Tramite lo strumento rettangolo arrotondato (con raggio pari a 30px) creiamo un rettangolo arrotondato (wahh! ) e, tramite la modalità trasformazione libera, lo ruotiamo di 45° posizionandolo come in figura.

Uniamo i livelli creati ed importiamoli in un nuovo documento più grande (nel nostro caso, 1280×800 px). Applichiamo allo sfondo una sfumatura lineare che và dal #110716 al #4d4f54 ed impostiamo questo stile al nostro livello Q (N.B.: bisogna spostare la sfumatura radiale verso la parte alta della nostra forma).

Otterrete qualcosa di simile:

Posizionatevi sotto il livello della nostra Q e create, su un nuovo livello tramite lo strumento ellissi o selezione ellittica, un cerchio grande quanto la zona vuota.

Vi applicate questo stile livello:

Ecco come dovrebbe presentarsi, ora, il nostro logo di Quicktime:

Aggiungiamo, sopra al nostro cerchio, una nuova forma ellittica leggermente schiacciata:

Abbassate l’opacità a 85% ed il riempimento a 0% e vi applicate questo stile livello:

Aggiungete un ombra e la vostra icona è pronta! Volendo, potete facilmente cambiarne anche la colorazione! Per qualsiasi dubbio o domanda vi rimandiamo ai commenti, mentre potete scaricare da qui il PSD del lavoro!

Oggi vedremo come creare un semplice, ma efficace testo contornato da una serie di effetti di luce in Photoshop. Sicuramente una tecnica suggestiva e dal forte impatto visivo

Per prima cosa apriamo Photoshop, creiamo un nuovo documento (nel nostro caso, 1280 x 800 px) e aggiungiamo subito questa sfumatura, tramite lo stile livello, allo sfondo.

Creiamo un nuovo livello, e andiamo su Filtro->Rendering->Nuvole.

Successivamente andiamo su Filtro->Sfocatura->Sfocatura Radiale e inseriamo come fattore 40, lasciando invariati gli altri valori.

Premiamo Ctrl + L per abilitare la regolazione livelli ed aumentiamo il contrasto come in figura:

Infine impostiamo il livello su Sovrapponi. Ecco cosa dovreste aver ottenuto:

Con lo strumento testo, creiamo una scritta al centro del documento di colore #8d1259. Il carattere che noi abbiamo utilizzato è Palatino Linotype Bold con 300pt di grandezza.

Successivamente, applichiamo questo stile livello:

Ecco cosa dovreste ottenere:

Scaricate ed importate nel documento questa texture posizionandola sopra al livello del testo. La ridimensionate e desaturate. Successivamente create una maschera di ritaglio (Livello -> Crea maschera di ritaglio o Ctrl + Alt + G) e impostate il livello su moltiplica.

Ora create un nuovo gruppo e lo posizionate sotto il livello del testo. All’interno vi inserite un livello dove create, con lo strumento selezione, una striscia bianca. Successivamente andate su Fitro->Sfocatura->Controllo sfocatura ed inserite come raggio 2px.

Ora, grazie ad un pennello morbido, cercate di ricreare queste zone bianche. Prima utilizzate dei pennelli più grandi per creare delle zone di luce sotto la O, la N e la E, successivamente utilizzate dei pennelli da 3, 5 e 7 px per creare dei piccoli punti di luce.

Infine impostate il gruppo su modalità “Colore scherma”. Ecco completata la guida

Potete scaricare da qui il PSD del lavoro e potete utilizzare i commenti per porci domande o dubbi!

Le vacanze ormai sono finite e si ritorna a pubblicare, iniziando l’anno nuovo con una nuova guida per Adobe Photoshop . Oggi vedremo, come potete ben notare dal titolo, come creare uno sfondo grunge con scritta incavata in Photoshop. Al lavoro!

Apriamo Adobe Photoshop, creiamo un nuovo documento (nel nostro caso 1280×800 px), e impostiamo un colore di sfondo a piacere. Andiamo nello stile livello dello sfondo, e applichiamo un gradiente radiale.

Creiamo una nuova scritta di colore nero: utilizzeremo come font Rockwell (in versione bold), 270pt di grandezza e una spaziatura tra le lettere pari a -100. Ridurre la spaziatura, a volte, è un ottimo espediente per rendere un testo più accattivante

Applichiamo questo stile livello al testo. In particolare, vi invito a notare l’uso dell’ombra esterna come leggero bagliore, e del bagliore interno per creare un disturbo.

Abbassiamo poi l’opacità di riempimento a 10%. Ecco cosa dovreste ottenere.

Andiamo ad infangare il nostro documento (metaforicamente parlando, sia chiaro) con texture e dei watercolor brushes. Vi consiglio di scaricare questo pack di texture e questi brushes dall’ottimo sito wegraphics.net.

Dopo aver importato i pennelli, utilizzateli come meglio credete, ma in modo non molto invasivo, per ottenere qualcosa del genere; abbassate l’opacità intorno al 20%.

Aggiungete poi, una delle texture scaricate (io ho preferito la 5a) e importatela nel documento. Desaturatela e impostatela su moltiplica; abbassate l’opacità a 70%. Ricordate: la maggior parte delle volte che viene aggiunta una texture all’interno del documento, và prima desaturata e poi elaborata.

Andiamo ad indurire i colori del nostro sfondo. Per farlo, applicheremo un filtro fotografico (Livello -> Nuovo livello di regolazione -> Filtro fotografico), selezionando Filtro più caldo (LBA) con densità 50%. Successivamente due mappe sfumatura, una dal nero verso il bianco che imposteremo su Luce Soffusa con 60% d’opacità, e un’altra dal viola verso l’arancione (è presente nel set di default), che imposteremo su Tonalità con 20% d’opacità. Ecco finito il nostro sfondo . Per qualsiasi domanda o dubbio vi rimandiamo ai commenti

Clicca qui per scaricare il PSD del tutorial.

Il 2010 è alle porte, e perchè, quindi, non addobbare il nostro desktop per l’arrivo di questo nuovo anno? Oggi voglio mostrarvi come creare un bel wallpaper sul 2010 con Adobe Photoshop.. ecco l’effetto finale:

Creiamo un nuovo documento (1280 x 800 px nel nostro caso) e applichiamo subito questo stile livello allo sfondo per creare un gradiente radiale:

Selezioniamo lo strumento gradiente, entriamo nell’editor sfumatura e, dopo aver selezionato una sfumatura a scelta, impostiamo il tipo di sfumatura su “Disturbo“, percentuale di disturbo pari a 100% e spuntiamo i valori “Limita colori” e “Aggiungi trasparenza“.

Impostiamo, infine, la sfumatura come angolare.

Creiamo, quindi, su un nuovo livello, una sfumatura dal centro verso l’esterno. La desaturiamo e impostiamo il livello su “Sovrapponi“.

Utilizzando lo strumento testo, creiamo la scritta “2010” di colore bianco con il font Impact a 360 pt, al centro del nostro documento. La duplichiamo e rendiamo non visibile la scritta appena duplicata. Creiamo un nuovo gruppo (Livello -> Nuovo -> Gruppo) e inseriamo all’interno la scritta visibile. Dovreste avere, quindi, la paletta livelli disposta in questo modo:

Rasterizziamo la scritta presente nel gruppo, e andiamo in Filtro -> Sfocatura -> Sfocatura radiale e impostiamo questi valori:

Otterrete, più o meno, qualcosa del genere:

Creiamo un nuovo livello, sempre all’interno del gruppo, e con un pennello morbido di colore bianco (circa 400px) creiamo una zona bianca al centro del documento. Con dei pennelli più piccoli (3, 5, 9, 21 px), invece, creiamo dei punti sparsi qua e là per avere qualcosa di simile:

Impostiamo il gruppo su “Colore scherma (color dodge)”, e ta tan!

Creiamo un nuovo livello, d’ora in poi sempre fuori dal gruppo, e applichiamo il filtro nuvole (Filtro -> Rendering-> Nuvole). Impostiamo il livello su “Sovrapponi“, e cancelliamo, con una gomma morbida o una maschera, le zone esterne del documento.

Rendiamo di nuovo visibile la scritta fuori dal gruppo, e ne cambiamo il colore in nero. Vi applichiamo questo stile livello:

Otterremo qualcosa di simile:

Scarichiamo ed importiamo nel nostro documento questa texture, cancelliamo, come abbiamo fatto in precedenza, le zone esterne, e impostiamo il livello su “Sovrapponi“. Infine, creiamo un nuovo livello di regolazione Filtro Fotografico, utilizzando come filtro “Seppia” e come densità, 50%. Ecco il nostro wallpaper pronto

Puoi scaricare, cliccando qui, il PSD del wallpaper.

Ormai mancano davvero pochi giorni a Natale, per questo, vi proponiamo una bella guida sulla creazione di un testo in stile natalizio in modo davvero semplice, ma al tempo stesso, d’effetto, con Adobe Photoshop. Partiamo!

Creiamo un nuovo documento (1280×800 px) con colore di sfondo #062336. Su un nuovo livello, creiamo un bagliore bianco (con un pennello o una sfumatura) al centro del documento e impostiamo il livello su “Sovrapponi“.

Utilizziamo lo strumento testo, e con il carattere Berlin Sans FB Demi a 300 pt, creiamo una scritta al centro del nostro documento di colore bianco.

Duplichiamo il livello della scritta, nascondiamo l’originale che si troverà al di sotto del livello duplicato, e applichiamo a quest’ultimo questo stile livello.

Ecco cosa dovreste ottenere:

Ci spostiamo sul livello nascosto, lo rendiamo visibile e lo rasterizziamo. Andiamo su Filtri -> Fluidifica e con lo strumento Forward warp (in italiano dovrebbe essere sposta), impostato con un pennello di grandezza 70, pressione 70 e densità 65, cerchiamo di ottenere qualcosa di simile:

Vi applichiamo, poi, quest’ombra interna:

Aggiungiamo qualche altra decorazione, ed ecco pronta la nostra scritta:

Puoi scaricare cliccando qui il file .PSD; per dubbi o domande ti invitiamo a lasciarci un commento

body{
margin: 0;
}
a.button{
/* Impostiamo la grandezza del nostro bottone. */
width: 200px;
display: block;
 
/* Scegliamo il colore di sfondo. */
background-color: #388fc5;
 
/* Utilizziamo la proprietà CSS3 per arrotondare il bottone. */
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
 
/* Utilizziamo la proprietà CSS3 per aggiungere un'ombra al bottone. */
-moz-box-shadow: 1px 1px 0 #145278;
-webkit-box-shadow: 1px 1px 0 #145278;
 
/* Impostiamo un bordo chiaro al bottone. */
border: 1px solid #9fdaff;
 
/* Impostiamo il cursore come "manina" */
cursor: pointer;
 
/* Aggiungiamo dei margini interni ed esterni */
padding: 10px;
margin: 30px;
 
/* Formattiamo il testo */
font-size: 1.7em;
font-family: Myriad Pro, Tahoma, Sans-serif;
font-weight: bold;
color: #ffffff;
text-shadow: 0 1px 0 #363636;
line-height: 45px;
text-align: center;
text-decoration: none;
}
 
a.button:hover{
background-color: #45a2dc;
}
 
a.button:active{
background-color: #2a7aab;
}

Il codice, commentato, mi sembra piuttosto semplice da capire;  i selettori che ci interessano maggiormente sono -moz-border-radius, -webkit-border-radius (entrambi per la realizzazione dell’effetto arrotondato) e -moz-box-shadow per creare l’effetto rilievo con il bordo interno.
Ecco, quindi, come si presenterà il nostro codice:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
 
<title>Bottone in stile web 2.0 full CSS3</title>
<style type="text/css">
body{
margin: 0;
}
a.button{
/* Impostiamo la grandezza del nostro bottone. */
width: 200px;
display: block;
 
/* Scegliamo il colore di sfondo. */
background-color: #388fc5;
 
/* Utilizziamo la proprietà CSS3 per arrotondare il bottone. */
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
 
/* Utilizziamo la proprietà CSS3 per aggiungere un'ombra al bottone. */
-moz-box-shadow: 1px 1px 0 #145278;
-webkit-box-shadow: 1px 1px 0 #145278;
 
/* Impostiamo un bordo chiaro al bottone. */
border: 1px solid #9fdaff;
 
/* Impostiamo il cursore come "manina" */
cursor: pointer;
 
/* Aggiungiamo dei margini interni ed esterni */
padding: 10px;
margin: 30px;
 
/* Formattiamo il testo */
font-size: 1.7em;
font-family: Myriad Pro, Tahoma, Sans-serif;
font-weight: bold;
color: #ffffff;
text-shadow: 0 1px 0 #363636;
line-height: 45px;
text-align: center;
text-decoration: none;
}
 
a.button:hover{
background-color: #45a2dc;
}
 
a.button:active{
background-color: #2a7aab;
}
 
</style>
 
</head>
<body>
<div>
	<a class="button" href="http://www.artedelweb.it/wp-content/uploads/2009/12/bottone_full_css.zip">
		Download
	</a>
	<a class="button" href="http://www.artedelweb.it/2009/12/08/guida-creiamo-un-bottone-dagli-angoli-arrotondati-e-in-stile-web-2-0-con-css3/">
		Go to article
	</a>
</div>
</body>
</html>

Per qualsiasi dubbio o domanda, potete scriverci nei commenti

Dopo aver realizzato sia l’header, che il content, arriviamo ora all’ultima tappa di questa guida realizzando il footer. Questo sarà principalmente composto da un contact form e da un testo di crediti.

Footer

Sfondo

Creiamo un nuovo gruppo di nome “Footer“. Inseriamo il livello del footer all’interno del gruppo e lo rinonimiamo in “bg_footer“. Vi applichiamo questo stile livello (N.B.: bisogna spostare il gradiente verso l’alto come mostra la figura 3):

Ecco cosa dovreste ottenere:

Contact form e crediti

Creiamo un nuovo gruppo di nome “Contact form“. All’interno creiamo, grazie allo strumento rettangolo arrotondato, queste forme:

Ai campi bianchi, applichiamo questo stile livello:

Mentre al bottone azzurro, quest’altro stile livello:

Ecco ciò che otterremo:

Aggiungiamo, infine, del testo sopra ai campi, e una scritta di crediti in basso:

Ecco finito il nostro template in perfetto stile web 2.0

Potete scaricare da qui gratuitamente, il file .PSD del template Per qualsiasi domanda, o dubbio, potete scriverci nei commenti .

In questa guida per Adobe Photoshop, vi mostrerò come creare un efficace template web 2.0 per la propria attività. Sarà suddiviso in un header (contenente logo, alcune informazioni e gallery), un content (contenente menu ed informazioni) ed un footer (contenente un contact form e dei crediti). Potete segnalarci qualsiasi errore o chiederci qualunque cosa nei commenti

Premessa sul workspace.

Lo spazio di lavoro in cui lavoriamo deve essere completo di ogni strumento che può servirci, in modo tale da non dover perdere tempo inutilmente a cercarli. Vi consiglio di utilizzare il pre-creato Web con l’aggiunta della paletta di Storia.

Creazione del documemnto.

Creiamo un nuovo documento 900×1000 px. Attiviamo lo strumento griglia (View->Show->Grid) e lo impostiamo come segue (Ctrl + K):

Iniziamo a schematizzare il nostro layout. I primi 3 “quadrati grandi” e mezzo, saranno il nostro header, i successivi 3 quadrati e mezzo il nostro content, e gli ultimi 3 quadrati il nostro footer. Possiamo quindi “livellarli” e colorarli con colori differenti. Ricordate, l’ordine e la precisione nella creazione di un template in Photoshop sono essenziali. Senza contare che sono indispensabili nel qual caso volessimo crearne la versione HTML/CSS.

Header.

Sfondo.

Iniziamo a lavorare con l’header; creiamo un nuovo gruppo di nome “Header“, rinonimiamo il livello in “bg_header” e lo coloriamo con #00677e. Apriamo lo stile del livello; assicurandoci di avere come colore di primo piano il bianco, applichiamo una sovrapposizione gradiente come in figura. Spostiamo quindi il gradiente verso l’alto (con la finestra dello stile aperta, posizioniamoci con il puntatore nel documento e spostiamo il gradiente in alto).

Spostiamoci alla voce “Bagliore interno“. Utilizzeremo il bagliore impropriamente, infatti questo ci servirà soltanto a creare un lieve effette disturbo in modo tale che l’header non risulti del tutto piatto.

Ecco cosa dovreste ottenere:

Logo e slogan.

Creiamo un nuovo gruppo di nome “Logo” da posizionare dentro il gruppo “Header“. All’interno aggiungiamo un testo; l’immagine spiega meglio di mille parole:

Applichiamo uno stile livello al testo:

Aggiungiamo, ora, un testo di slogan da posizionare al di sotto del logo. Applichiamo anche uno stile livello:

Ecco come dovrebbe presentarsi il nostro header:

Gallery

E’ il momento, ora, di focalizzarci sulla creazione del box di una possibile gallery. Questa, quindi, sarà costituita dal box centrale e da 2 freccie di scorrimento. Iniziamo creando il box centrale.

Su un nuovo livello di nome “Box gallery“, con lo strumento che preferite, creiamo un quadrato grande 2 quadrati (scusate il gioco di parole ), e lo coloriamo di bianco. Apriamo lo stile livello del quadrato e vi applichiamo questo stile livello:

Creiamo un nuovo livello di nome “Shadow” da posizionare sotto a quello del box. Utilizzando un pennello morbido di 200 px, creiamo una zona circolare colorata di nero sul livello. Apriamo la modalità trasformazione libera, e diminuiamo l’altezza della nostro cerchio colorato. Si verrà quindi a formare una sorta di ellissi molto schiacciata: la posizioniamo nella parte bassa del box e diminuiamo l’opacità a 70%.

Inseriamo un’immagine a piacere, rinonimiamo il suo livello in “Image example“, e le diminuiamo la grandezza in modo tale che sia più o meno grande quanto il box. Successivamente creiamo una maschera di ritaglio (clipping mask) tra il livello “Box gallery” e “Image example“.

Con lo strumento penna, o con delle forme predefinite, creiamo una freccia da posizionare a sinistra del box. La duplichiamo e la riflettiamo orizzontalmente posizionandola a destra del box. Infine applichiamo a entrambe questo stile livello:

Ecco cosa dovreste aver ottenuto:

Informazioni aggiuntive

Creiamo un nuovo gruppo di nome “Welcome box“. Ora passeremo alla creazione di un piccolo riquadro nel quale poter scrivere qualche breve news o informazione. Creiamo, quindi, con lo strumento rettangolo arrotondato (raggio 10px), un piccolo riquadro bianco. Abbassiamo l’opacità al 15% e applichiamo una traccia di colore nero di 1 px con 70% di opacità. Aggiungiamo sopra al box, un breve testo di colore #89c9d7 e grandezza 25pt.