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.
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…
Premiamo invio per completare l’operazione e salviamo l’immagine.
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…
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.
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 ;)
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.
15:21 Scritto da: myblog.it in Blog - Tips and Tricks | Link permanente | Commenti (2) | Trackback (0) | Segnala
| Tag: grafica blog, cambiare grafica blog, cambiare header, personalizzare blog, sfondo blog | OKNOtizie |
|
del.icio.us
|
|
Digg |
Facebook








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
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
Rispondi a questo commento
Scrivi un commento
NB: i commenti di questo blog sono moderati.