Creare un layout con Photoshop, aiuto please!!

[Jedi82]

ragazzi ho deciso di provare a fare qualche sitarello non piu con il solo codice ma anche con un accattivante layout made by Photoshop ma, ma....
Ho seguito alcuni tutorials e perfetto piano piano me lo costruisco cosi come viene quindi una semplice foto ma il dopo, come funziona scusate, tempo di avere la foto come ci metto il codice, come faccio ad esempio a far cambiare pagina o parte della pagina lasciando intatto il resto?

Non son riuscito a trovare nulla riguardo guide esplicative del dopo layout, solo tanti tanti tutorials sui layout ma il dopo???

[frikes]

io non so aiutarti. però nella mia firma c'è risorse grafiche. è pieno di link sparsi un po' nelle pagine perchè è da mettere tutto in ordine, ma sicuramente sbirciando troverai qualcosa

[tutmosi3]

Io non ho capito niente
Ciao

[Dievel]

Io forse ho capito, però cerca di spiegarci meglio la tua situazione, in particolare dicci le conoscenze che hai di base (linguaggi e software) e magari posta un esempio diretto (link) di quello che vuoi ottenere.

Vedrai che ti sapremo aiutare

[Leron]

se puoi scegliere, invece di photoshop usa Fireworks: è fatto apposta e è MOLTO meglio per disegnare template


... e non usare il codice delle pagine generate da photoshop

[Jedi82]

Avete ragione ma trovo difficile spiegarmi al meglio in questa situazione, ma cmq ad esempio se seguite questo tutorial

http://www.pimpmyphotoshop.com/tutorial/10

alla fine vi ritroverete con un bel template creato con il solo Photoshop ok? Bene questo è fatto di una singola pagina ed alcuni link quali home, tutorials, contact ecc...bene arrivati a quel punto come fare per completare il sito, costruirlo?

[Dievel]

questo che vedi nel tutorial è il primo passo verso la creazione di un sito; ora puoi scegliere tra due strade:

- sezionare l' immagine creata con PS e andarla a inserire in una tabella costruita in HTML, che riempirai con le varie sezioni; poi completerai l' opera inserendo i contenuti testuali e i link.
Ti serve quindi un editor html, tipo dreamweaver.

E' grosso modo quello che viene esposto in questo tutorial, dove però la "sezionatura" e la generazione del codice html viene fatta attraverso gli strumenti di Imageready:

http://grafica.html.it/guide/leggi/2...-photoshop-cs/

l' unico problema è che in questo modo il codice generato è molto pesante, come ha detto Leron. Diciamo che per iniziare e apprendere il meccanismo va bene, in seguito raffinerai la tecnica scrivendoti da solo il codice html, con l' aiuto dell' editor.

Questo primo metodo è ormai superato, anche se molti lo utilizzano ancora.

- la seconda via è quella di imparare l' utilizzo dei fogli di stile CSS e applicarli all' impaginazione del sito.
L' apprendimento porta via più tempo e può sembrare brigoso, ma è un metodo più moderno, potente, elegante ed offre un sacco di vantaggi.

Su html.it trovi un sacco di risore, nella sezione CSS ovviamente.


buon lavoro

[Jedi82]

Originariamente inviato da Dievel

questo che vedi nel tutorial è il primo passo verso la creazione di un sito; ora puoi scegliere tra due strade:

- sezionare l' immagine creata con PS e andarla a inserire in una tabella costruita in HTML, che riempirai con le varie sezioni; poi completerai l' opera inserendo i contenuti testuali e i link.
Ti serve quindi un editor html, tipo dreamweaver.

E' grosso modo quello che viene esposto in questo tutorial, dove però la "sezionatura" e la generazione del codice html viene fatta attraverso gli strumenti di Imageready:

http://grafica.html.it/guide/leggi/2...-photoshop-cs/

l' unico problema è che in questo modo il codice generato è molto pesante, come ha detto Leron. Diciamo che per iniziare e apprendere il meccanismo va bene, in seguito raffinerai la tecnica scrivendoti da solo il codice html, con l' aiuto dell' editor.

Questo primo metodo è ormai superato, anche se molti lo utilizzano ancora.

- la seconda via è quella di imparare l' utilizzo dei fogli di stile CSS e applicarli all' impaginazione del sito.
L' apprendimento porta via più tempo e può sembrare brigoso, ma è un metodo più moderno, potente, elegante ed offre un sacco di vantaggi.

Su html.it trovi un sacco di risore, nella sezione CSS ovviamente.


buon lavoro

Grazie mille per la lunga risposta e ti dico che per quanto riguarda il codice html non ho problemi, lo conosco bene come ho imparato a conoscere bene i CSS che davvero sono fantastici...ma continuo a non capire una cosa, quando andrò a sezionare il layout creato con PS, come faccio ad esempio nel momento in cui clicco un link a far cambiare solo una parte di pagina come avviene in molti siti?

Secondo poi, il codice mi dite che è molto pesante, bah alla fine dopo PS crea una semplice tabella, o forse qualcosa di piu? Alla fine sono solo semplici immagini no?

Con i CSS ok disponi il testo e gli elementi ma quando mi dite di usare i CSS sempre dopo aver creato un layout PS o senza questo?

[Leron]

Originariamente inviato da Jedi82

Grazie mille per la lunga risposta e ti dico che per quanto riguarda il codice html non ho problemi, lo conosco bene come ho imparato a conoscere bene i CSS che davvero sono fantastici...ma continuo a non capire una cosa, quando andrò a sezionare il layout creato con PS, come faccio ad esempio nel momento in cui clicco un link a far cambiare solo una parte di pagina come avviene in molti siti?

Secondo poi, il codice mi dite che è molto pesante, bah alla fine dopo PS crea una semplice tabella, o forse qualcosa di piu? Alla fine sono solo semplici immagini no?

Con i CSS ok disponi il testo e gli elementi ma quando mi dite di usare i CSS sempre dopo aver creato un layout PS o senza questo?

scusa ma tu tieni il template così come esce? crei tutto il sito in photoshop?

questo non è creare un template

per creare un template parti dalla foto ma poi ti costruisci tutto il codice tramite XHTML+css, magari evitando le tabelle già che ci sei

esempio www.materiaprima.tn.it

il template di base è fatto con Fireworks, ma il codice è scritto tutto a mano e ottimizzato naturalmente

fireworks o photoshop sono utili come base per creare il template e per fare da "taglierina" per separarti le immagini, ma poi sta a te costruire il sito vero e proprio perchè quello che genera photoshop è un obrobrio immenso che poi tra il resto non ti lascia neanche fare quasi niente

a parte che è IMPOSSIBILE creare un template adeguato con photoshop senza intervenire con il codice: come faresti?

photoshop non riconosce un background-repeat ad esempio e in quel caso cosa fai, schiaffi un'immagine da 300k quando può bastartene una da 1k?

oppure come fai a calcolare l'altezza di una pagina nel caso ci sia uno sfondo?

queste sono tutte cose che devi fare con i css, mica con photoshop: photoshop lo puoi usare come punto di PARTENZA ma poi il template te lo devi costruire mica si fa da solo


PS: rinnovo la proposta di lasciare photoshop (se ne hai la possibilità) e passare a fireworks: per il web è decisamente migliore sia come strumenti che come capacità di personalizzazione e ottimizzazione delle immagini

PS: se vuoi vedere un esempio di come è fatto un template scaricati quello che trovi sul mio sito: è disponibile sia il codice che l'immagine (in fireworks) di base, esaminando quella capirai a cosa servono le immagini e a cosa servono i css

[Jedi82]

E bravo Leron, hai centrato l'obbiettivo con quel sito, quindi mi stai dicendo che quel sito ha come layout insomma come disegno base una foto fatta con Photoshop, tagliata con lo stesso programma e poi scritto e strutturato con del codice utente? Bene, se così comincio a capire e ne sono felice perché vorrei andare a fondo a questa cosa e ti prego svelami come fare a far si che cliccando sulle voci del menu del sito da te postato la porzione della pagina che cambia è minima e solo quella centrale, come si faaaaaaa....

[Leron]

Originariamente inviato da Jedi82

E bravo Leron, hai centrato l'obbiettivo con quel sito, quindi mi stai dicendo che quel sito ha come layout insomma come disegno base una foto fatta con Photoshop, tagliata con lo stesso programma e poi scritto e strutturato con del codice utente? Bene, se così comincio a capire e ne sono felice perché vorrei andare a fondo a questa cosa e ti prego svelami come fare a far si che cliccando sulle voci del menu del sito da te postato la porzione della pagina che cambia è minima e solo quella centrale, come si faaaaaaa....

ora non ho a disposizione proprio QUEL template, ma se vai qui

http://www.zambotti.it/sito/pages/download.php

trovi da scaricare uno ZIP con il template del mio sito (la vecchia versione)

inoltre trovi anche l'immagine di fireworks che ho fatto e da cui sono partito

cmq in linea di massima ti spiego come è fatto quel template


innanzi tutto mi sono disegnato il sito con fireworks poi lo ho diviso nei pezzetti che mi servono, andando a "fette":

uno in alto per la parte superiore (il titolo e l'header blu centrale)
http://www.materiaprima.tn.it/templa...magini/top.jpg


andando verso il basso ho ritagliato ogni bottone del menu superiore
http://www.materiaprima.tn.it/templa...gini/home2.png

poi ho ritagiato ogni bottone nella sua versione "premuta"
http://www.materiaprima.tn.it/templa...gini/home1.png

poi ho ritagliato l'ombra che vedi sotto il menu e l'inizio del container dei titoli
http://www.materiaprima.tn.it/templa...sfondomain.png

poi ho ritagliato un'immagine alta solo un pixel e larga quanto la pagina per avere la pagina principale (che poi manderò ripetuta)
http://www.materiaprima.tn.it/templa...sfondomain.png


poi ho ritagliato la chiusura della pagina
http://www.materiaprima.tn.it/templa...ini/footer.png


in seguito mi sono creato l'html:

innanzi tutto creiamoci lo sfondo per il sito con quella cornice superiore che corre per tutta la pagina
ho dato un colore grigio come background al body e gli ho dato come sfondo questa immagine
http://www.materiaprima.tn.it/templa...ini/topper.png
specificando un "repeat-x" in modo che venga ripetuta all'infinito in alto

poi ho creato un div, lo ho messo centrale largo quanto il sito e come sfondo (tramite CSS, ho assegnato un ID al div e nel css ho specificato background-repeat) ho messo l'immagine alta un pixel col contenuto della pagina.
http://www.materiaprima.tn.it/templa...sfondomain.png

in questo modo ho una COLONNA centrale con lo sfondo con quel riquadro "metallico" e la pagina bianca sulla destra, in pratica una sezione del sito presa in mezzo ripetuta all'infinito dall'alto al basso

poi ho inserito in alto un div dentro quello che avevo fatto, alto 177 pixel e come sfondo quello che avevo ritagliato in cima
http://www.materiaprima.tn.it/templa...magini/top.jpg

in questo modo ho creato l'header

poi ho creato il menu, sempre inserendo delle classi ai bottoni che andassero a richiamare le foto che avevo ritagliato. questo è il suo CSS
http://www.materiaprima.tn.it/templa...rima/extra.css

poi andando verso il basso ho reato i vari div man mano che mi servivano, dandogli delle classi o degli ID e gli sfondi con le immagini che avevo creato dove mi servivano

il risultato è che tutto il sito è definito tramite un html (quello che vedi) e due css:


questo
http://www.materiaprima.tn.it/templa...prima/base.css
e questo
http://www.materiaprima.tn.it/templa...rima/extra.css



ora, più di così è impossibile spiegarsi dovrei averti davanti per potermi spiegare meglio comunque il concetto è: il template è prima di tutto codice, poi DOVE SERVONO le immagini allora te le fai e le inserisci

[Jedi82]

azzo leron non vanno i links alle immagini...ma grazie mille per la dettagliata spiegazione che devo analizzare per bene

Però perdonami ancora non capisco come fai a modificare al click di una voce del menu la sola parte centrale e non tutta la pagina...proprio il comando codice o che ne so io..oppure tu al click fai loadare una identica pagina con al centro invece del contenuto diverso?

[Leron]

Originariamente inviato da Jedi82

azzo leron non vanno i links alle immagini...ma grazie mille per la dettagliata spiegazione che devo analizzare per bene

Però perdonami ancora non capisco come fai a modificare al click di una voce del menu la sola parte centrale e non tutta la pagina...proprio il comando codice o che ne so io..oppure tu al click fai loadare una identica pagina con al centro invece del contenuto diverso?

caricare una pagina identica con contenuto diverso? vero, ma in parte

il template è UNA COSA

i CONTENUTI sono un'ALTRA cosa

i contenuti nel mio caso stanno su un database e vengono richiamati via PHP


se invece quello che ti serve è capire come è fatto l'hover del menu

è semplice

a tutto il menu c'è uno sfondo



poi sopra c'è un menu fatto così

<ul id="topmenup">
<li class="home1"><a class="menuHead" href="/pages/news.php">Home</a></li>
<li class="chisiamo"><a class="menuHead" href="/pages/chi-siamo.php">Chi siamo</a></li>
<li class="cose"><a class="menuHead" href="/pages/cose.php">cos e</a></li>
<li class="quando"><a class="menuHead" href="/pages/quando.php">Le mie foto</a></li>
<li class="partecipare"><a class="menuHead" href="/pages/per-partecipare.php">Per partecipare</a></li>
<li class="contatti"><a class="menuHead" href="/pages/contattaci.php">Contattaci</a></li>

<li class="forum"><a class="menuHead" href="http://forum.materiaprima.tn.it">forum</a></li>
</ul>

poi naturalmente via CSS definisco le azioni in caso di mouse HOVER, ad esempio questo è il bottone HOME

.home1{

	width: 80px;
}

.home1 a:hover{

	width: 80px;
	background: url(immagini/home2.png);
}

quindi gli ho detto che il bottone home1 è largo 80pixel, e nel caso di HOVER deve metterci questa immagine

[Leron]

cmq un menu lo puoi fare in millemila modi diversi, ma RICORDATI che è il CODICE che fa tutto, NON l'immagine

[Jedi82]

aiuto non ci capiamo, l'hover sopra lo so fare è semplice semplice e si si i contenuti ovvio che sono diversi, guarda davvero breve breve, quando clicchi su QUANDO nel menu ad esempio sotto bam ti si apre il testo che comincia con MATERIA PRIMA VA IN ONDA...bene e cambia solo quella parte, poi se clicchi che so su PER PARTECIPARE bam ti si apre il testo ed alcune foto, ed il tutto ad occhio risulta che i cambiamenti avvengano solo in quella parte della pagina senza refreshare tutto quanto

[Leron]

Originariamente inviato da Jedi82

aiuto non ci capiamo, l'hover sopra lo so fare è semplice semplice e si si i contenuti ovvio che sono diversi, guarda davvero breve breve, quando clicchi su QUANDO nel menu ad esempio sotto bam ti si apre il testo che comincia con MATERIA PRIMA VA IN ONDA...bene e cambia solo quella parte, poi se clicchi che so su PER PARTECIPARE bam ti si apre il testo ed alcune foto, ed il tutto ad occhio risulta che i cambiamenti avvengano solo in quella parte della pagina senza refreshare tutto quanto

queste sono le magie della cache

il codice della pagina è sempre lo stesso, poi quello che sta scritto nella "parte bianca" è un include php che va a richiamare i dati che vengono richiesti prendendoli dal database

ma il template grafico, ovvero tutto quello che sta intorno, è una sola unica pagina

[Jedi82]

AH ECCO forse svelato finalmente l'arcano Quindi appunto tu mediante codice hai deciso di selezionare un'area dinamica con un include che conosco in PHP dove ad ogni click viene popolata a seconda giusto? Bene, ma possibile che una miriade di siti usino questo sistema? Non c'è un altro metodo senza usare il php?

[Leron]

Originariamente inviato da Jedi82

AH ECCO forse svelato finalmente l'arcano Quindi appunto tu mediante codice hai deciso di selezionare un'area dinamica con un include che conosco in PHP dove ad ogni click viene popolata a seconda giusto? Bene, ma possibile che una miriade di siti usino questo sistema? Non c'è un altro metodo senza usare il php?

beh è il metodo migliore, ma puoi anche usare un normale Frame

[Jedi82]

ummm no no i frame assolutamente no....

[Dievel]

è sufficiente che usi la stessa pagina per ogni sezione, modificata solo nei contenuti.

in parole povere:
1) crea la home page completa dal punto di vista grafico coi CSS, con header, menu, corpo centrale e footer;
2) salva col nome "pippo.html"
3) apri pippo.html e inserisci i contenuti della sezione home (testo e foto ad esempio), poi salvi col nome home.html
4) riapri pippo.html e inserisci i contenuti della sezione contatti, poi salvi come contatti.html
5) ripeti la procedura per tutte le sezioni del sito

se il layout è gestito in CSS, se le immagini che usi sono in PNG24 o GIF o JPEG, se l' html è essenziale e pulito vedrai che non hai bisogno ne del php, ne dei frames


ps: @Leron: potresti dirmi come hai realizzato la galleria foto sul tuo sito? mi piace un sacco