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 laiuto di una squadretta e colori si incomincia a delineare lidea.
La calcolatrice è unaltro strumento che devessere 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 la Linea Guida per impostare le misure degli oggetti grafici che faranno da sfondo agli effettivi elementi html.
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 limmagine 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.