Se il tuo problema è capire come fare tecnicamente per mettere insieme un layout, posso solo darti un consiglio personale riguardo la mia esperienza/conoscenza, che di certo è limitata.
Con Photoshop disegni liberamente quel che vuoi, i menù come vuoi, i pulsanti come vuoi, i contorni e i bordi come vuoi etc.. però poi devi poter integrare il tutto in html. Lo strumento usato solitamente è lo slice, che praticamente ti fa a pezzi il disegno e lo scompone in tante immagini. Con il comando "Save for Web", Photoshop ti esporta tutto in html e crea i vari file immagine, ma la struttura html che combina le immagini non è altro che un tabellone pesantissimo; e qui il problema, perché la filosofia dei siti è più css e meno html possibile. Quindi è sicuro che con Photoshop riesci a realizzare, senza troppo impegno e con un po' di gusto/esperienza, un design accattivante o comunque decente, ma comprometti la qualità e la leggerezza del sito (tutto questo discorso ha senso tenendo conto del fatto che lavori di questo tipo li ho fatti con la CS2 e CS3, ma non con la CS4, che magari porta con sé delle novità).
Se lavori con i CSS e Photoshop, invece, ottieni dei risultati eccellenti. Il principio è semplice: CSS lo usi per impaginare, per colorare sfondi, per dare spessore ai bordi, per sovrapporre immagini semi trasparenti a colori html pieni, giochi con le proprietà delle liste <li><ul> e con l'elasticità dei <div>, manipoli margini e padding come se niente fosse, nonché l'allineamento e la ripetitività di immagini qualsiasi. Con CSS sfrutti il concetto di ereditarietà, lavori addirittura lungo un immaginario asse z per nascondere o mostrare solo parte di quel che ti interessa di un oggetto nella pagina. Insomma, puoi liberare la tua fantasia all'infinito. Se poi, con Photoshop o simili, realizzi anche dei completamenti grafici (ad esempio un bordo sfumato coi fiorellini che si arrampicano sopra, ma con lo sfondo trasparente) e combini il tutto con CSS (il colore di sfondo che sta sotto all'immagine del bordo è il verde prato), ottieni il top (mi è venuto in mente un esempio così..).
Ti passo due siti da cui prendere spunto, e secondo me sono fatti davvero bene: combinano grafica e CSS, e me li sono studiati per un lavoretto che stavo facendo, giusto per prendere spunto
https://www.dovesiamonelmondo.it/
ACI Informatica: Home