Realizzare una grafica per WordPress

Nella settimana scorsa mi sono occupato di realizzare una nuova veste grafica del sito ilMioGuadagno.it per l’amico Stefano. Il lavoro è partito sul concetto di realizzare una grafica su tre colonne: due sidebar e un content centrale per i post, palette di colori uniforme e a due colori principali: celeste e piccola percetuale di arancione, ottimizzazione degli spazi per adsense, Feed in vista, e sopratutto di incentrare la grafica molto sul gioco dei riflessi.

Quali sono gli strumenti?

Realizzare una grafica (non un tema) per WordPress consiste per il 90% lavorare con i fogli di stile CSS, e il restante con il markup html per spostare, introdurre e modificare gli elementi della pagina.

Per realizzare la grafica ho usato principalmente tre strumenti:

• Web Developer Tools: è una toolbar per Firefox che permette di analizzare e modificare una pagina web direttamente su browser in tempo reale. Una delle più utili funzioni è Display Element Information che al passaggio del mouse evidenzia ogni singolo elemento della pagina, mostrando tutte le informazioni riguardo a discendenza da elementi, misure e margine.
• Firebug: è uno strumento che svolge le stesse funzioni di Web Developer Tools, ma in quanto alla modifica in tempo reale risulta migliore, in quanto salva le modifiche anche uscendo dalla pagina, autocompletamento dei tag, evidenzia con colori diversi i singoli elementi del codice, pulisce il codice automaticamente.
• Photoshop: non ha bisogno di presentazioni, dico semplicemente che è sicuramente il miglior programma per grafica web, quello che ogni web designer dovrebbe sempre tenere aperto e ridotto a icona, pronto per essere utilizzato.

Come si realizza?

Intanto c’è da dire che bisogna avere un bel pò di nozioni approfondite sopratutto su i Css, Html, e qualche minima conoscenza di php e WordPress, un pò di senso estetico, e sopratutto chiarezza su quello che si vuol realizzare.

Un Progetto Grafico

Il primo passo da fare è quello di prendere carta e penna e di abbozzare un pò di idee, e con l’aiuto di una squadretta e colori si incomincia a delineare l’idea.

La calcolatrice è un’altro strumento che dev’essere sempre a portata di mano per capire su che misure stai lavorando, sopratutto se si lavora su una grafica centrata, sarà fondamentale per ottenere le misure da usare poi con le guide su photoshop.

Photoshop

Dopo aver realizzato bozza su carta, usa i Righelli e le Linee Guida per impostare le misure degli oggetti grafici che faranno da sfondo agli effettivi elementi html.

Questi video possono essere di grande aiuto.

Lavorare sul codice

Se devi semplicemente aggiornare la grafica e il tema nella sua struttura ritieni che si buono così allora modifica direttamente il tema esistene, se invece devi realizzare qualcosa di nuovo, o vuoi ridisegnare completamente la struttura grafica è bene partire da un tema già esistente molto minimale. Qua puoi trovare buoni punti di partenza.

Dopo di che installa Web Developer Tools e FireBug sul tuo Firefox, e modifica in tempo reale il codice, e tenendo conto delle misure che hai utilizzato Photoshop, ricordati che queste stesse dovranno riessere utilizzate su i Css per far coincidere la grafica con l’immagine di sfondo.

Dopo di che copia e incolla il codice Css sul foglio di stile del tema su wordpress, carica via ftp tutti gli elementi grafici creati con photoshop sulla stessa cartella del tema wordpress e attiva il nuovo tema grafico.