ArteDelWeb.it - WebDesign, Photoshop, Tutorial

Videotutorial: come creare un’avanzata scritta 3D in Photoshop CS5

STAFF — Sat, 28 Aug 2010 06:15:48 +0000

Come creare un effetto ingrandimento con CSS3

STAFF — Thu, 26 Aug 2010 10:34:25 +0000

Grazie alla sua rapida ascesa e continua evoluzione, il CSS3 ci permette ormai di ottenere delle soluzioni animate senza ricorrere all’utilizzo di Javascript e con pochissime righe di codice. Vediamo come.

In questa breve guida, infatti, voglio mostrarvi un semplice modo in cui poter ottenere un effetto ingrandimento all’hover di un’immagine. Bisogna precisare, che mostreremo una tecnica valida solo con i browser webkit (Safari, Chrome). Clicca qui per vedere la demo, mentre qui per scaricare il tutorial.

Per prima cosa, inseriamo all’interno del file html la nostra immagine attribuendole la classe “img” ed un collegamento (comunque non indispensabile):

 href="#"> src="1.jpg" class="img" alt="" />>

Nello css del nostro documento, invece, attribuiamo uno stile alla classe img:

.img{
//impostiamo un arrotondamento ed una ombra alla nostra immagine per renderla più accattivante
	-webkit-border-radius: 5px;
	-webkit-box-shadow: 0 4px 3px rgba(0,0,0,0.4);
//posizioniamola al centro
	display: block;
	margin: 20px auto;
}

Ed infine scriviamo le poche righe di codice CSS3 che ci servono per animare l’immagine al suo passaggio con il mouse:

.img:hover{
//con -webkit-transform modifichiamo la grandezza della nostra immagine rendendola piu grande
	-webkit-transform: scale(1.2);
//infine con -webkit-transition dichiariamo quale valore va animato (quindi webkit-transform), quanto tempo debba durare la nostra animazione (0.2s) e di che tipo debba essere (linear).
	-webkit-transition: -webkit-transform 0.2s linear;
}

>
	>
		>Effetto ingrandimento con CSS3 - Artedelweb.it>
		>
		.img{
			-webkit-border-radius: 5px;
			-webkit-box-shadow: 0 4px 3px rgba(0,0,0,0.4);
			display: block;
			margin: 20px auto;
		}
		.img:hover{
			-webkit-transform: scale(1.2);
			-webkit-transition: -webkit-transform 0.2s linear;
		}
 
		>
	>
 
	>
			 href="#"> src="1.jpg" class="img" alt="" />>			
	>
>

Tutorial: come creare una composizione di oggetti in Photoshop

STAFF — Sat, 21 Aug 2010 21:07:44 +0000

Siamo appena tornati dalle nostre, speriamo meritate, vacanze e, senza troppi convenevoli, è giunto il momento di rimettersi in marcia, sperando che anche voi vi siate goduti un pò di riposo! Ripartiamo nella maniera che più ci piace: proponendovi un nuovo tutorial per Adobe Photoshop piuttosto alla portata di tutti.
Oggi vedremo, infatti, come creare una composizione di oggetti, ispirandoci un pò al del logo dei Guns N’ Roses.

Innanzitutto, creiamo un nuovo documento (1000×800 px) con sfondo nero e vi applichiamo questo gradiente radiale.

Successivamente importiamo questa texture nel documento, la desaturiamo, ridimensioniamo e la impostiamo su moltiplica.

Ecco, ora, l’occorrente per la nostra composizione: una rosa, una foglia, una pistola, delle fiamme e un teschio.

Iniziamo con l’aprire tutte le nostre immagini all’interno di Photoshop, e grazie allo strumento bacchetta magica (in combinazione, anche, con il Refine Edge), scontorniamo le nostre immagini.

Successivamente importiamo all’interno del nostro documento, l’immagine del teschio e della rosa (quest’ultima và anche ridimensionata).

Creiamo un nuovo gruppo (ad es. Rose1) e vi inseriamo il livello della nostra rosa all’interno. Ora la duplichiamo 3 volte e disponiamo le nostre rose in posizioni diverse e con grandezze diverse. Vi consiglio anche di ruotare le varie rose in modo tale da migliorarne l’effetto.

Duplichiamo il gruppo Rose1, lo spostiamo verso il lato destro e, entrando nella modalità Trasformazione Libera (Cmd o Ctrl+T), lo riflettiamo orizzontalmente.

Successivamente importiamo anche l’immagine della foglia (precedentemente scontornata) e la posizioniamo al di sotto dei gruppi delle rose. Anche qui, duplichiamo e riflettiamo, per cercare di avere questo risultato.

Ripetiamo lo stesso procedimento con le pistole. Inoltre, dovreste avere la palette Livelli disposta in questo modo.

Inseriamo, ora, l’immagine delle fiamme all’interno del documento. Laridimensioniamo, ed eventualmente (come nel nostro caso) la distorciamo un pò. Infine, la posizioniamo dietro i livelli delle rose, delle foglie e delle pistole.

Duplichiamo il livello delle fiamme e ne ruotiamo e rimpiccioliamo la copia, in modo tale, che sembrino più compatte.

Inoltre, possiamo utilizzare lo strumento sfumino per rendere più realistico l’effetto.

Adesso è il momento di sistemare un pò le luci e le ombre della nostra composizione, perchè fino ad ora, ci siamo limitati solo a posizionare gli elementi all’interno del nostro documento. Quindi, con gli strumenti Brucia e Scherma, andiamo a migliorare le luci e le ombre degli oggetti della nostra composizione.

Inoltre, dobbiamo anche creare le ombre che ogni oggetto crea al di sopra di un altro (l’ombra del teschio, delle foglie, delle rose e così via). Quindi, con un pennello morbido, creiamo una serie di ombre come mostrato in figura.

Infine, aggiungiamo una serie di livelli di regolazione: uno di tonalità/saturazione, una mappa gradiente, e una regolazione di curve.

Ed ecco pronta la nostra composizione!

Chiuso per ferie!

STAFF — Sat, 17 Jul 2010 21:39:34 +0000

Come vi avevamo anticipato nell’articolo precedente, anche noi di Artedelweb.it andiamo in vacanza!

Torneremo, più forti di prima, tra 2-3 settimane, ma la pubblicazione regolare degli articoli riprenderà da circa metà Agosto!

Non ci resta che salutarvi calorosamente e augurarvi una buona estate.. a presto!

Come creare un iPod Nano in Photoshop

STAFF — Fri, 16 Jul 2010 13:17:14 +0000

In fatto di design, non c’è nulla da dire, i prodotti Apple sono sempre esteticamente molto belli. Ed è di Apple che parliamo oggi, anzi di iPod. Vedremo, infatti, come creare un iPod Nano in Photoshop. Questo sarà l’ultimo articolo, e quindi anche l’ultima guida, prima di rilassarci con un pò di vacanze della durata di circa 2-3 settimane.

Creiamo un nuovo documento 300×700 px con sfondo bianco. Creiamo un nuovo gruppo con il nome di “Base”. Tramite lo strumento rettangolo, creiamo una forma rettangolare al centro del documento di colore #c3c3c3.

Modificando il tracciato della nostra forma, aggiungiamo un punto nella parte bassa in modo tale da rendere leggermente arrotondata la zona inferiore dell’iPod.

Infine applichiamo questo gradiente allo stile livello dell’iPod.

Su un nuovo livello, sempre all’interno del nostro gruppo, creiamo dei rettangoli verticali ai margini dell’iPod attraverso lo strumento selezione rettangolare.

Successivamente, andiamo su Filtro -> Sfocatura -> Controllo sfocatura e impostiamo un valore pari a 5. Infine eliminiamo le parti che fuori escono dell’iPod attraverso una maschera di livello ed impostiamo l’opacità a 50%.

Terminata la base, ora passiamo alla creazione del player che ci consente di cambiare canzone, mettere in pausa e così via. Questo, è a forma di corona circolare che possiamo ricreare facilmente attraverso l’uso di tracciati o selezioni.

E vi applichiamo questo stile livello.

Per quanto riguarda la creazione dei vari pulsanti presenti nel player, ho preferito fare un’animazione che chiarisca il metodo utilizzato. Molto più facile a farsi, che a dirsi! Infine, la font utilizzata per il testo “Menu”, è Lucida Grande con una grandezza di 15pt.

Otterremo qualcosa del genere.

Creiamo un nuovo gruppo con il nome di “Schermo”. Tramite lo strumento rettangolo arrotondato, con un raggio di circa 5px, creiamo lo schermo del nostro iPod di colore #181818.

Vi applichiamo una sovrapposizione gradiente.

Su un nuovo livello, creiamo un rettangolo leggermente più piccolo del precedente. Vi applichiamo, anche qui, un gradiente.

Creiamo un ultimo gruppo, con il nome di “Luci”. All’interno vi creiamo un altro gruppo all’interno del quale, su un livello, creiamo un rettangolo di colore bianco.

Vi applichiamo un controllo sfocatura con un valore pari a 10. Successivamente abbassiamo l’opacità del livello a 55% ed impostiamo il gruppo su “Colore scherma”. Eliminiamo le parti che fuori escono dall’iPod con una maschera di livello o come meglio credete.

Creiamo un nuovo livello e, attraverso lo strumento lazo poligonale, formiamo una selezione come in figura.

Infine, utilizzando lo strumento gradiente (dal bianco al trasparente) creiamo un riflesso e impostiamo il livello su Luce Soffusa. Eliminiamo i residui con una maschera di livello.

Ed il nostro iPod Nano è completo! Per ottenere diverse colorazioni, ci basterà cambiare il colore della nostra base

Videotutorial: come creare un’icona 3D in Photoshop CS5

STAFF — Fri, 09 Jul 2010 12:41:33 +0000

In questo videotutorial vedremo come creare un’icona dei Feed RSS in 3D utilizzando i nuovi strumenti introdotti in Photoshop CS5.
Cliccando qui è possibile scaricare la forma (.csh) del Feed RSS utilizzato ed importarla in Photoshop.

I 10 hack più cercati per la gestione dei commenti in WordPress

STAFF — Thu, 08 Jul 2010 15:02:51 +0000

Anche voi state sviluppando, o avete mai sviluppato, un tema per WordPress? Se la risposta è positiva, allora saprete senza dubbio quanto sia importante gestire e potenziare al meglio i commenti di un tema. E spesso, si perde molto tempo nel cercare guide e tutorial che mostrino come fare una o un’altra cosa perchè non si è espertissimi della piattaforma WordPress. Oggi, quindi, vi segnalo i 10 hack più cercati per la personalizzazione dei commenti di un tema!

Colori alternati per i commenti

Questo semplice hack permette di alternare il colore dei commenti, o ancora, alternare stili css differenti.

Diverso stile per i commenti dell’admin

Davvero utile questo tip che permette di evidenziare in maniera differente il commento dell’admin.

Numerazione dei commenti

Una buona soluzione per chi vuole numerare i commenti. Sono disponibili anche molti plug-in per i meno esperti su WordPress.org.

Aggiungere pulsanti rapidi di azione

Utile guida che mostra come poter eliminare o segnalare come spam un commento senza dover accedere al pannello di controllo.

Separare i trackbacks dai commenti

I link di ritorno, o trackbacks, a volte possono essere fastidiosi. In questa guida viene mostrato come separarli.

Usare l’avatar di Twitter nei commenti

Per un motivo o per un altro, si può preferire di utilizzare l’avatar di Twitter al posto del famoso Gravatar, nella visualizzazione di un commento.

Paginare i commenti

Specialmente con blog molto famosi che hanno una grande mole di commenti, avere un plug-in per impaginarli è davvero indispensabile!

Mostrare i commenti recenti

Senza dover ricorrere a dei widget, questo utile codice mostra i commenti recenti.

Mostrare gli articoli più commentati

Questo codice mostra gli articoli più commentati entro un determinato lasso di tempo.

Invertire l’ordine di visualizzazione dei commenti

Di default WordPress mostra i commenti più recenti in basso. Se volete invertirne l’ordine, non vi basterà che seguire questa semplice guida!

Come creare un poster vintage per i mondiali 2010 in Photoshop

STAFF — Sun, 04 Jul 2010 08:15:51 +0000

I mondiali di calcio in Sudafrica sono iniziati da un pezzo e stiamo ormai entrando nella fase “calda” del torneo. Purtroppo, i nostri azzurri non sono riusciti a passare il girone di qualificazione, quindi non ci resta che aspettare altri 4 anni per poterci rifare. Nel frattempo, oggi voglio mostrarvi come creare un poster vintage dedicato ai mondiali in Photoshop!

Innanzitutto dobbiamo aprire la bandiera del Sudafrica, o ricrearla in Photoshop, all’interno di un nuovo documento di lavoro.

Fatto ciò, utilizziamo lo strumento testo e iniziamo a personalizzare la bandiera secondo i nostri gusti. Io ho scelto di inserire la scritta “Sudafrica” in bianco, al di sopra della prima striscia bianca. Ho utilizzato come font, Helvetica Neue Bold e come valore di spaziatura tra i caratteri -100.

Successivamente, con la stessa tecnica, ho posizionato il testo “2010″ in bianco al di sotto della seconda striscia bianca.

Infine ho posizionato i testi “Football” e “World cup” in giallo, in prossimità delle due strisce oblique sulla sinistra.

Adesso, creiamo un nuovo livello. Utilizziamo lo strumento selezione rettangolare per creare dei prolungamenti ai testi. Ad esempio, nel nostro caso, siamo andati a prolungare la U di Sudafrica e il numero 1 di 2010.

Importiamo all’interno del nostro documento questa texture, la ridimensioniamo, desaturiamo, e la impostiamo su Moltiplica con il 70% d’opacità.

Infine creiamo 2 livelli di regolazione. Il primo è un filtro fotografico seppia con una densità pari a 95%. Il secondo invece, è una mappa gradiente che và dal nero al bianco e che impostiamo su Luminosità. Ecco pronto il nostro poster in peino stile retrò!

Vi ricordo che per qualsiasi dubbio o domanda potete utilizzare i commenti!

Videotutorial: come creare una bandiera realistica in Photoshop

STAFF — Fri, 25 Jun 2010 11:50:39 +0000

In occasione dei mondiali in Sudafrica 2010, oggi vi propongo una semplice tecnica che mostra come creare una bandiera realistica in Photoshop.
Sfortunatamente per noi, il mondiale degli azzurri è durato ben poco!

Come creare un attraente sfondo per un sito web con CSS3

STAFF — Wed, 16 Jun 2010 09:22:33 +0000

Lo sfondo è, senza dubbi, un elemento importantissimo per qualsiasi sito web. Che sia esso un pattern o una tinta unita, il suo principale obbiettivo è quello di far risaltare i contenuti che il sito vuole proporre. Quindi, quello dello sfondo è un compito cruciale: cogliere l’attenzione del lettore e invogliarlo a continuare a visitare il nostro sito.
Per questo motivo, oggi, voglio mostrarvi come creare un attraente sfondo web 2.0, utilizzando un pattern (che verrà creato con Photoshop) e CSS3.

Per vedere una demo del tutorial potete cliccare qui, mentre da qui potete scaricare i files utilizzati!

Apriamo Photoshop, creiamo un nuovo documento (30x30px) e riempiamo lo sfondo di un blu scuro (#202847).
A questo punto attiviamo la griglia (Cmd o Ctrl + ‘), ci rechiamo nelle preferenze di Photoshop (Cmd o Ctrl + K) e impostiamo i valori della griglia come segue.

Il nostro documento si presenterà così, ora:

In prossimità del quadratino centrale, creiamo un ellissi di un blu leggermente più scuro (#03081b). E ne applichiamo questo stile livello:

Duplichiamo 4 volte la nostra forma, e posizioniamo le 4 copie come in figura:

Infine uniamo tutti i livelli (Cmd/Ctrl + Shift + E), e con lo strumento ritaglia riduciamo la zona del nostro documento. Infine salviamo in formato JPG.

Il nostro pattern è pronto! Ora, iniziamo a scrivere le prime righe di codice CSS. Naturalmente, applicheremo lo sfondo ripetendolo orizzontalmente e verticalmente.

body{
	background:transparent url(pattern.jpg) repeat;
	margin:0;
	padding:0;
}

Inoltre, creiamo un div con nome “light”. E’ qui, che grazie al CSS3, applicheremo un gradiente radiale che scurirà leggermente i margini della nostra pagina e renderà tutto più accattivante!

#light{
	background-image:-webkit-gradient(radial, 50% 40%, 700, 50% 40%, 0, from(rgba(0, 0, 0, 0.898438)), to(transparent));
	background-image:-moz-radial-gradient(transparent, #000);
	height:100%;
	position:absolute;
	width:100%;
	}

E infine, ecco le poche righe di HTML che ci servono:


   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
>
>Artedelweb.it- Come creare un attraente sfondo con CSS3>
 rel="stylesheet" href="style.css" type="text/css" /> 
 
>
 
>
 id="light">
>
>
>

Vi ricordo che, per vedere una demo del tutorial potete cliccare qui, mentre da qui potete scaricare i files utilizzati!