Layout dinamici

Discussioni riguardo tutti i problemi di grafica.

Moderatori: Sara_p, Kagemitsu

Layout dinamici

Messaggioda tranky » mercoledì 8 settembre 2010, 14:40

Ciao ragazzi,
ho per voi una domanda che mi frulla sempre in testa.
Ho deciso di iscrivermi qui, anche per risolvere quelli che io chiamo problemi ma che penso per voi siano stupidaggini.

Quando penso ai layout di photoshop, penso sempre a qualcosa di statico.
Faccio il mio bel layout, aggiungo gli slices, taglio lì, metto là, eccc....poi faccio la conversione in html, guardo la preview e mi godo il lavoro. Ah! Che sono contento....

Ma...se devo realizzare dei layout dinamici, cioè che si allungano verso il basso in base ai contenuti, come faccio a gestire ciò? Qual è il vostro approccio solitamente?
Supponiamo voleste realizzare una pagina in cui sono presenti dei messaggi e volete incorniciare ogni messaggio all'interno di una grafica carina ma che va ripetuta n volte per quanti sono i messaggi. E considerate che la lunghezza dei messaggi può variare e quindi occupare più o meno spazio in altezza. Come fate ad utilizzare photoshop e a consentire che questo accada? Cioè per evitare che mi fraintendiate, come fate con photoshop a realizzare delle cornici che si allungano dinamicamente. Sono sicuro che utilizzerete la proprietà "background" dei css, ma qual è la procedura che utilizzate per sfornare il tutto con photoshop?

Spero di essere stato chiaro.

tranky
tranky

Avatar utente
 
Messaggi: 28
Iscritto il: martedì 7 settembre 2010, 14:23

Re: Layout dinamici

Messaggioda antoscarface » mercoledì 8 settembre 2010, 15:40

Ciao tranky, credo di aver capito il tuo problema.

Cioè, il problema principale è come fare un box/contenitore in modo che si allunghi, spero di aver capito giusto.

E' semplice capire il meccanismo, perchè se tu hai un bordo, o uno sfondo particolare di un box o qualcosa del genere, non esporti dal photoshop tutto il box così com'è disegnato nel programma, ma lo spezzetti in più parti... devi intanto capire quali sono le parti comuni che non dovranno essere allungate, che riguardano soprattutto la parte superiore e la parte inferiore dell'elemento... la parte centrale, invece, è quella destinata ad essere allungata dinamicamente.

Un esempio pratico è l'articolo del buon Nando.

Come vedi e come ha spiegato ottimamente Nando, lo sfondo del sito sembrerebbe statico a vederlo sul photoshop, ma in realtà, per rendere "dinamico" il layout, in modo tale da allungarsi in base ai contenuti, seziona lo sfondo nelle 3 parti che ti ho spiegato prima: parte superiore, parte centrale (che verrà ripetuta verticalmente per la lunghezza dei contenuti) e la parte inferiore e sempre nell'articolo vedrai come imposta il css per ottenere questo effetto.

Questo è più o meno il meccanismo generale, ma poi tutto si riduce a ciò che ti serve e ogni circostanza ha i suoi metodi.
Spero di essermi spiegato e che ho centrato il tuo dubbio! :)

PS: scusa se mi sono dilungato.
antoscarface

Amministratore

Avatar utente
 
Messaggi: 723
Iscritto il: giovedì 21 gennaio 2010, 1:08
Località: Siracusa

Re: Layout dinamici

Messaggioda tranky » mercoledì 8 settembre 2010, 16:55

Sei stato perfetto e quella guida è fantastica.

:clap:
tranky

Avatar utente
 
Messaggi: 28
Iscritto il: martedì 7 settembre 2010, 14:23

Re: Layout dinamici

Messaggioda antoscarface » mercoledì 8 settembre 2010, 17:00

tranky ha scritto:Sei stato perfetto e quella guida è fantastica.

:clap:


Si, ti ho linkato soltanto la prima parte, ma ti consiglio di leggere anche la seconda parte ;)
antoscarface

Amministratore

Avatar utente
 
Messaggi: 723
Iscritto il: giovedì 21 gennaio 2010, 1:08
Località: Siracusa


Torna a Grafica