Menù

Image Map

mercoledì 19 febbraio 2014

Nuovo look per "Voglio il mondo a colori"

Buongiorno,
oggi grande giornata, "Voglio il mondo a colori" esce con una nuova veste grafica.
Era un po' che ci pensavo ed ora mi sono buttata anche grazie ai vostri consigli.

Voglio il mondo a colori. nuovo look
Per il momento ho deciso di non stravolgere troppo il Blog, ho mantenuto la stessa immagine di sfondo (dopo vi spiego perché) e quindi sono andata alla ricerca di una palette di colori in tono.
Ho usato Adobe Kuler ed ho generato la mia palette dall'immagine di sfondo.

Ricerca della palette con Adobe Kuler
La prima cosa che dovevo cambiare era l'header perché quello che avevo in realtà era una scritta camuffata da immagine, l'avevo fatta all'inizio quando ancora non sapevo usare i programmi di grafica, poi ho aspettato un po' per capire meglio cosa "dire" nel mio header, alla fine ho optato per un assaggio di quello che il  mio Blog contiene seguendo i consigli di Alex, foto mie che rappresentano quello di cui parlo, il nome ed una breve spiegazione.

Vecchio e nuovo header
Un'altra cosa che dovevo assolutamente cambiare perché non mi piaceva proprio era la barra del menù con i link alle sezioni, e qui è cominciato il cinema!

Mi piaceva molto quello di Daniela di Decoriciclo creato da Tine, elegante, semplice, funzionale e moderno ma proprio non ho capito come si faceva per cui ho ripiegato su qualcosa di più semplice seguendo le istruzioni di Wanesia.

In pratica ho sostituito il gadget attuale con uno script in cui caricavo un'immagine con delle aree mappate e per mapparle ho utilizzato Image Map, un sito che, dopo registrazione gratuita, permette di accedere alle funzioni di base per la mappatura delle immagini, ma a me non serviva di più.

Mappatura immagini

Restava comunque da togliere l'antiestetica riga di sfondo che anche se la mettevo trasparente si vedeva lo stesso e non mi piaceva, allora ho cercato dentro il codice html ed alla fine sono arrivata alla sezione giusta dove ho impostato a "none" l'immagine del tabs.background.gradient,ho poi anche tolto da tutto il codice qualsiasi altro riferimento a questa variabile.
Non so se c'era un modo più semplice ma così funziona.

Vecchio e nuovo menù
Poi ho cambiato lo sfondo dei gadget laterali perché come colore non c'entrava niente ed allora per non appesantire troppo un look già colorato e per uscire un po' dal mio "periodo barocco" come giustamente insegna Tine, l'ho tolto del tutto.

Vecchie e nuovi sfondi gadget
Ed adesso arriviamo allo sfondo, mi sarebbe piaciuto uno sfondo in cui c'è un'immagine di base e lo spazio per i post al centro, tipo questo layout per intenderci


ma qui mi sono imbattuta nei primi problemi, lo sfondo si deve adattare al browser ed alla risoluzione video per cui non riuscivo a far stare la parte dei post sempre all'interno della parte centrale, almeno  non riuscivo a verificarlo perché con Explorer 9 non si adattava, per cui ho rinunciato.

Ho provato con sfondi più o meno fantasiosi, gradienti sulle tonalità della palette un po' elaborati ma il risultato era decisamente "pesante" per cui ho lasciato perdere in attesa che mi venga un'idea migliore.

Al momento ho solo tolto lo scorrimento della pagina.

Mi resta solo da inserire le icone sociali, ci sto lavorando.
Ho inserito anche le icone sociali, dopo un po' di tentativi le ho messe nella barra del  menù.

Ecco, questo è quanto, per adesso.

Vi ringrazio fin da ora per commenti e suggerimenti, sono molto apprezzati, ditemi se vi sembra troppo pesante, quali errori ho fatto, ecc.

Grazie

Ciao

8 commenti:

  1. Ma hai fatto un lavoraccio!! Bravissima, mi piace tanto!!

    RispondiElimina
  2. Norma, hai fatto un ottimo lavoro! Mi piace tanto, e poi il verde e l'arancione sono i miei due colori preferiti, soprattutto accostati.
    Ottime le icone sociali incluse nella barra dei menù...a proposito vengo a trovarti su pinterest, che adesso ci sono anch'io...
    Bravissima. =)
    Daniela

    RispondiElimina
  3. Ciao Norma, innanzitutto sono contenta che ti sia piaciuto il menù che avevo fatto per Daniela :) Scriverei volentieri un tutorial per realizzarlo, senza ricorrere a image maps (che sono semplici da usare ma più pesanti e meno indicizzabili, per questo di solito i web developer sconsigliano di usarle per i menù), ma c'è di mezzo del codice che varia molto di caso in caso... Insomma, se troverò un modo per scrivere dei tutorial lo farò volentieri in futuro.
    In generale secondo me hai apportato belle modifiche al tuo blog, soprattutto hai fatto un bel lavoro con l'header e le barre laterali!
    Per quanto riguarda l'immagine di fondo, intanto hai fatto bene a renderla fissa. Tempo fa avevo scritto un tutorial per far prendere all'immagine di background le stesse dimensioni della finestra del desktop. Non so se può aiutarti, ti lascio il link per ogni evenienza:
    http://tinethelazy.blogspot.it/2013/11/come-scegliere-lo-sfondo-del-blog-3.html
    Buona giornata!

    RispondiElimina
    Risposte
    1. Uh, dimenticavo. Quel tipo di sfondo come l'esempio che hai riportato, con l'albero e il verde, non credo che funzioni bene con la visualizzazione che si adatta alla finestra del browser, perché anche l'area del contenuto si ridimensiona e di conseguenza il testo può sbordare. Meglio scegliere un'immagine senza questi riquadri per il testo, che tanto al di sopra di essa si formerà già da solo, come già accade nel tuo blog.
      Scusa se mi sono spiegata un po' male, in ogni caso se hai bisogno di aiuto per questa cosa scrivimi pure :)

      Elimina
  4. Anch'io sto, con calma, mettendo mano alla grafica! Mi piacciono molto le scelte che hai fatto, è molto più bello adesso! Silvia

    RispondiElimina
  5. WOW Norma, stai diventando una grafica provetta! ;)
    Mi piace molto l'accostamento dei colori, hai fatto proprio un bel lavoro!
    Daniela - Mani di Dani

    RispondiElimina
  6. Sei bravissima, Norma!
    Rimango incantata da quante cose sai fare!!!!
    Grazie x essere passata da me!
    Michela di Creareregali

    RispondiElimina