Tutorial Design http://www.tutorialdesign.altervista.org Tutorial per Photoshop, Indesign, Xpress ecc... Tue, 22 Jul 2008 09:28:52 +0000 http://wordpress.org/?v=2.5.1 en ZioSteve http://www.tutorialdesign.altervista.org/senza-categoria/36/ziosteve/ http://www.tutorialdesign.altervista.org/senza-categoria/36/ziosteve/#comments Tue, 22 Jul 2008 09:28:52 +0000 admin http://www.tutorialdesign.altervista.org/?p=36 Ecco il mio nuovo blog —> ZioSteve

]]> http://www.tutorialdesign.altervista.org/senza-categoria/36/ziosteve/feed/ Trasformare un immagine reale in un disegno a matita http://www.tutorialdesign.altervista.org/adobe/photoshop/33/trasformare-un-imamgine-reale-in-un-disegno-a-matita/ http://www.tutorialdesign.altervista.org/adobe/photoshop/33/trasformare-un-imamgine-reale-in-un-disegno-a-matita/#comments Sun, 18 May 2008 19:23:02 +0000 admin http://www.tutorialdesign.altervista.org/?p=33 Probabilmente avrete sentito parlare, o visualizzato in alcuni lavori, lo “Style Pencil”. Questo effetto, consiste nel trasformare un immagine reale, in un semplice disegno a matita. L’effetto non è per niente banale da realizzare, ma, grazie una serie di procedimenti da eseguire con l’ausilio di Photoshop, riuscirete ad ottenere ottimi risultati:

  1. Aprite l’immagine da trattare con photoshop (esempio)
  2. Successivamente dovete scontornare il soggetto con il lazo magnetico
  3. Ora andate su Livello>Nuovo>Crea livello tagliato
  4. Ora cliccando sul nuovo livello, andate su Immagine>Regolazioni>Togli saturazione
  5. Ora andate su Filtro>Sfocatura>Sfocatura migliore ed impostate l’effetto desiderato
  6. Andate su Immagine>Regolazione>Inverti

Volendo, potete lavorare ulteriormente l’immagine (come nell’esempio), sfruttando ciò che nella grafica risulta una delle cose più importanti .. la fantasia!

]]> http://www.tutorialdesign.altervista.org/adobe/photoshop/33/trasformare-un-imamgine-reale-in-un-disegno-a-matita/feed/ Realizzare un background e applicarlo con i css http://www.tutorialdesign.altervista.org/adobe/photoshop/29/realizzare-un-background-e-applicarlo-con-i-css/ http://www.tutorialdesign.altervista.org/adobe/photoshop/29/realizzare-un-background-e-applicarlo-con-i-css/#comments Thu, 15 May 2008 05:21:58 +0000 admin http://www.tutorialdesign.altervista.org/?p=29 Con questo nuovo tutorial, impareremo a realizzare un particolare background e ad applicarlo sulle nostre pagine web, attraverso l’utilizzo di un semplice codice css.

1. Per prima cosa, apriamo Photoshop e andiamo su File>Nuovo (ctrl+n;mela+n)

2. Successivamente imposta il colore di primo piano e di sfondo, (nell’esempio abbiamo utilizzato un #89FF80 e #068000) e attraverso lo strumento sfumatura applica una sfumatura verticale.

3. Adesso andiamo nella sezione filtri

4. Ora selezioniamo il filtro visualizzabile nell’immagine trascrivendo i relativi settaggi e cliccate su OK

5. Andate su File>Salva per Web e dispositivi… e cliccate sul bottone in alto a destra Salva. Ora attraverso la nuova finestra che vi appare, andate su scrivania e create una nuova cartella (es. PROVA), nella quale salverete il vostro sfondo; vi consiglio di rinominarlo “bg.jpg”

6. Ora uscite da Photoshop e aprite un nuovo file .html, salvatelo nella nuova cartella e trascriverete la seguente porzione di codice:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>http://www.tutorialdesign.altervista.org</title>
<style type=”text/css”>
<!–
body {
background-image: url(bg.jpg);
background-repeat: repeat-x;
background-color: qui inserite il colore di primo piano nel nostro caso #89FF80;
}
–>
</style></head>

<body>
</body>
</html>

7. Salvate nuovamente il file .html. Ora apritelo con un normale browser ed ecco l’effetto finale:

Alla prossima :-)

]]> http://www.tutorialdesign.altervista.org/adobe/photoshop/29/realizzare-un-background-e-applicarlo-con-i-css/feed/ Testo effetto web 2.0 http://www.tutorialdesign.altervista.org/adobe/photoshop/1/ciao-mondo/ http://www.tutorialdesign.altervista.org/adobe/photoshop/1/ciao-mondo/#comments Wed, 14 May 2008 14:49:43 +0000 admin http://www.tutorialdesign.altervista.org/?p=1 Eccoci al nostro primo tutorial, dedicato alla realizzazione di un effetto su testo stile web 2.0. Buon tutorial

  1. Per prima cosa aprite Photoshop e andate su File>Nuovo (o ctrl+N;mela+N)
  2. Impostate la grandezza del foglio (es: 500px,500px,72pixel)
  3. Dalla barra verticale di sinistra, cliccate sul bottone Testo

  1. Successivamente rasterizza il livello del testo (Livello>Rasterizza>Testo)
  2. Ora cliccando con il tasto sinistro sul livello del testo seleziona duplica livello…
  3. Rifletti verticalmente il livello appena duplicato
  4. Con lo strumento sposta ,sposta il livello esattamente sotto il testo digitato
  5. Ora applicare una maschera al livello duplicato
  6. Con lo strumento sfumatura , applicare la sfumatura desiderata

P.s.

Unendo i due livelli, potrete modificare il colore facilmente tramite immagine>regolazioni>saturazione

]]> http://www.tutorialdesign.altervista.org/adobe/photoshop/1/ciao-mondo/feed/