AfterFuture 2.0

Archive for the ‘Tutorial’ Category

Il blog AfterFuture ormai ha effettuato il suo “rodaggio” della prima settimana, quindi ora mi sembra una buona idea iniziare ad inserire delle rubriche settimanali e stabili. Così ho pensato che il mercoledì può essere dedicato alla grafica, in particolar modo all’utilizzo di PhotoShop!

Se non hai Photoshop, questo è il link per poterlo scaricare gratis (è una versione trial di 30 giorni): clicca qui!

Oggi vediamo come creare un pulsante/bottone gommoso in stile 2.0, ecco quale sarà il risultato del tutorial:

1 – Creiamo un nuovo progetto con le dimensioni, larghezza 200px e altezza 50px e sfondo trasparente:

2 – Selezioniamo lo Strumento Secchiello (tasto rapido G), e dopo aver selezionato come colore #6aa3cf, riempiamo lo sfondo e rinominiamo il livello “Sfondo” (questo ci serve per poter far risaltare maggiormente le ombre con cui lavoreremo dopo):

3 – Creiamo un nuovo livello, rinominandolo “Bottone”. Selezioniamo lo Strumento Rettangolo Arrotondato (tasto rapido U), inserendo nella barra superiore raggio 5px e il colore #2a425f. Disegnamo un rettangolo di queste dimensioni:

4 – Selezioniamo il livello “Bottone” e clicchiamo col tasto destro. Selezioniamo “Opzioni Fusione” e modifichiamo lo stile del nostro rettangolo arrotondato:

4a – Ombra Esterna:

4b – Bagliore Interno:

 

4c – Sovrapposizione Colore:

 

4d – Sovrapposizione Sfumatura:

La cui sfumatura è composta da due colori, ecco qui quali:

4e – Traccia:

 

Questo è il risultato dopo aver modificato le opzioni di fusione:

 

5 – Ora che abbiamo realizzato la base del bottone, dobbiamo inserirne il contenuto. Creiamo un nuovo livello, rinominandolo “Forma”. Selezioniamo lo Strumento Forma Personale e successivamente la forma che desideriamo (in questo caso io ho scelto la nuvoletta):

Selezioniamo il colore #a1c9f7 e disegnamo la forma, posizioniandola alla sinistra sul pulsante in modo che si ottenga come risultato:

6 – Selezioniamo il livello “Forma”, clicchiamoci sopra col tasto destro e selezioniamo “Opzioni Fusione” e modifichiamo lo stile della forma da noi disegnata:

6a – Bagliore Esterno:

6b – Bagliore Interno:

Ecco il risultato dopo aver modificato le opzioni di fusione:

7 – Ora è il momento di scrivere il testo sul nostro pulsante, selezioniamo lo Strumento Testo Orizzontale, settiamo il font Verdena, dimensione 9pt, anti alias Preciso e il colore bianco (#ffffff):

Scriviamo il testo, nel caso di questo tutorial ho scritto “Send us an email Today!” con questo risultato:

8 – Ora selezioniamo il livello del testo, clicchiamo col tasto destro e operiamo sulle Opzioni Fusione in modo da inserire un’Ombra Esterna con queste caratteristiche:

Questo è il risultato dopo aver aggiunto l’ombra al testo:

9 – Clicchiamo col tasto CTRL + tasto sinistro del mouse, il livello “Bottone” così da selezionare tutto il rettangolo arrotondato:

Dopodichè selezioniamo lo strumento Strumento Selezione Ellittica, e tenendo premuto il tasto ALT, andiamo a togliere una parte della selezione precedente, in modo tale da ottenere una selezione di questo tipo:

10 – Creiamo un nuovo livello chiamandolo “Gommoso”, selezioniamo lo Strumento Secchiello e riempiamo l’area selezionata precedentemente col colore bianco (#ffffff), in modo da ottenere questo:

11 – Selezioniamo il livello “Gommoso” e riduciamo l’opacità in modo da averla al 40%:

Il risultato di questo tutorial sarà appunto il nostro bottone, pronto per essere utilizzato!

Se non riuscite a capire qualche passaggio, potete chiedere postando. Il video per realizzare il bottone l’ho uppato su YouTube (anche se non si leggono molto bene i numeri…): clicca qui per il video!

Se volete il file .psd: download it!

Il blog AfterFuture ormai ha effettuato il suo “rodaggio” della prima settimana, quindi ora mi sembra una buona idea iniziare ad inserire delle rubriche settimanali e stabili. Così ho pensato che il mercoledì può essere dedicato alla grafica, in particolar modo all’utilizzo di PhotoShop!

Se non hai Photoshop, questo è il link per poterlo scaricare gratis (è una versione trial di 30 giorni): clicca qui!

Oggi vediamo come creare un pulsante/bottone gommoso in stile 2.0, ecco quale sarà il risultato del tutorial:

Leggi il seguito di questo post »

Bellissimo YouTube, ci sono video su video, alcuni giorni ci passo le ore grazie alla funzione dei video correlati di fianco al video… uno tira l’altro… infatti mi dicono molto spesso che solo io riesco a trovare i video più simpatici e carini. 🙂

Però non siamo qui a enunciare le mie doti di detective 😀 bensì a spiegare (per chi ancora non sapesse…) come fare a scaricare un video da YouTube per poterlo vedere offline, così da poterlo vedere quando volete, comodamente sul vostro pc senza che dobbiate essere connessi a internet e evitando che lo streaming sia lento e vi causi l’interruzione del filmato… che non è una bella cosa… specie nei trailer!!!

Si l’ho visto! Era spaventoso! Si trovava proprio …” … pausa … buffering … quanto è veloce la mia linea …

1 – Scaricate il programma save2pc (versione light) che è gratis! (naturalmente ha delle funzioni bloccate… ma possiamo usare tutto ciò che ci serve per avere su Hard Disk il video che solitamente guardiamo su YouTube).

2 – Installate il programma e avviatelo.

3 – La schermata del programma si presenta così (le parti sottolineate di rossi sono quelle che verranno spiegate nei punti successivi):

 

4 – Save To indica la destinazione del filmato sul vostro Hard Disk, per cambiarla cliccate sul pulsante che contiene i tre puntini di sospensione “…” e selezionate la cartella che desiderate.

5 – Save As indica il formato in cui vogliamo salvare il video, possiamo scegliere tra avi e mpeg, io consiglio avi(PC).

6 – Download From lasciate il sistema Auto, ovvero in base al link che voi gli fornite, lui stabilisce da quale sito si sta scaricando il video.

7 – Link sta ad indicare la casella in cui dobbiamo inserire il link del video che ci interessa scaricare da YouTube, quindi dobbiamo procurarci il link. Andiamo su YouTube, dopo aver scelto quale video scaricare, copiamo l’url che c’è scritto sulla destra del filmato, nel riquadro delle informazioni (precisamente l’indirizzo all’interno del riquadro rosso disegnato da me per indicarvi qual è l’url da copiare):

8 – Incolliamo l’url all’interno della casella Link nel programma Save2Pc (il link dev’essere come quello riportato nell’esempio scritto al di sopra della casella stessa!).

9 – Clicchiamo sul pulsante Start, noterete che nella parte più inferiore del programma Save2Pc partira una striscia colorata con una percentuale (%) che indica il completamento del download del filmato (e la rispettiva conversione in .avi).

10 – Appena si raggiunge il 100%, significa che il video è stato scaricato e convertito e pronto per essere guardato!

Esistono mille altri modi per poter scaricare un filmato/video da YouTube… questo non è nè il primo nè l’ultimo… ma secondo me è uno dei più veloci. Se incontrate problemi nel procedimento o non vi è chiaro qualcosa, ditemelo che provvedero a correggere (là dove ho sbagliato) o aiutarvi se non avete capito o non sono stato chiaro. 🙂

Se il post vi è sembrato interessante segnalatelo in giro… eh dimenticavo!!! Buona visione!!!