07/04/2011

Creiamo una Skin completamente personalizzata! (parte 2)

Ci eravamo lasciati nel post precedente dopo aver creato l'header della nostra nuova grafica...procediamo quindi con la seconda parte, quella forse più ostica e meno trattata nei tutorial sul web, in cui impareremo a rendere anche il resto della pagina perfettamente coerente con l'intestazione!

 

Iniziamo con un piccolo trucco: clicchiamo sulla tavolozza del colore e scegliamo il colore dello sfondo della pagina, noi abbiamo optato per un grigio tenue in modo da non disturbare la lettura dei testi. Successivamente scegliamo lo strumento Pennello e letteralmente pitturiamo il livello con la nuova immagine coprendolo completamente. Per sicurezza salviamo questa immagine poiché potrebbe tornarci utile in seguito.

 


MyBlog_NewSkin_Flat.jpg

 

Ora ricaviamo i pezzi mancanti. Affinchè gli effetti che abbiamo applicato non interferiscano col ritaglio dell’immagine scegliamo Unisci tutti i livelli nel menu Livello per creare una immagine “piatta”. Selezioniamo lo strumento Taglierina (short cut: C) e nel menù in alto impostiamo l’opzione dimensioni uscita, lasciamo invariata la larghezza (955) e modifichiamo l’altezza immettendo il valore 10. Se ora clicchiamo sull’immagine (più o meno al centro del bordo sinistro) e trasciniamo per tutta la sua larghezza noterete che si creerà un riquadro che mantiene le proporzioni appena inserite e delimita la famosa striscia di cui abbiamo bisogno…

 

MyBlog_NewSkin_CutBG.jpg

 

Premiamo invio per completare l’operazione e salviamo l’immagine.

 

 

MyBlog_NewSkin_BG.jpg


Per creare l’immagine di chiusura premiamo un paio di volte Ctrl+Z per annullare e tornare all’immagine intera e ripetiamo il passaggio con lo strumento Taglierina, ma questa volta invece di 10 inseriamo il valore 30 per l’altezza e partiamo a trascinare dall’angolo in alto a sinistra. Premiamo invio e come ultimo passaggio selezioniamo “Ruota quadro 180°” dal menu immagine. Salviamo il risultato…

 

 

MyBlog_NewSkin_Footer.jpg



Quando avremo finito possiamo caricare le nuove immagini sul nostro spazio “Gestione file” nel “Pannello di controllo” e sostituire le URL delle vecchie immagini con quelle delle nuove, facendo molta attenzione alle corrispondenze.



MyBlog_NewSkin_CSS2.jpg

 

Inoltre usando lo strumento Selettore colore (shortcut: i) possiamo cliccare il colore dello sfondo e risalire al suo codice esadecimale nella finestra che si apre cliccando sul colore principale della tavolozza.

 

 

MyBlog_NewSkin_ColorPicker.jpg


Utilizzando questo codice possiamo uniformare lo sfondo della pagina del browser in cui viene visualizzato il nostro blog col colore di sfondo della grafica dello stesso. Per ottenere questo risultato dobbiamo intervenire sulla sezione Body > Background: # . . . . . . del foglio di stile, sostituendo le 6 cifre dopo il # con quelle del nuovo colore di sfondo.

 

Di seguito vediamo una immagine “Prima e Dopo” il trattamento ;)

 

 

Blog_NewSkin_B-A.jpg

 

 

 

Qui potete vedere il risultato finale! Noterete che abbiamo cambiato anche la grafica della finestra dei post e il “bullet” che accompagna i titoli degli articoli…per farlo abbiamo utilizzato le stesse tecniche e strumenti appena descritti, lasciamo a voi questo piccolo esercizio visto che ormai siete diventati dei professionisti della grafica!!! XD

Per ulteriori suggerimenti vi consigliamo di visitare la nostra pagina di Tips & Tricks.

Trackback

L'URL per fare trackback su questo post è: http://redazione.myblog.it/trackback/3305547

Commenti

L'effetto è molto carino, solo che non è semplicissimo da realizzare però il gioco vale sicuramente la candela.
Grazie e buona serata dalla Toscana

avatar utente villa-toscana

Scritto il:07/04/2011

Rispondi a questo commento

Caro villa-toscana

se trovi difficoltà ti consiglio di scaricare il file con il template del post:

http://redazione.myblog.it/archive/2011/04/05/per-tutti-i-golosi.html

dove trovi i file delle immagini già a dimensione corretta così potrai studiarli più nel dettaglio o usarli cambiando i colori.

A presto,
La Redazione

avatar utente Redazione.Myblog

Scritto il:08/04/2011

Rispondi a questo commento

Scrivi un commento

NB: i commenti di questo blog sono moderati.