Realizzare la grafica di un sito - Pagina 2 - Forum Per Webmaster

**Uflairer** · #11 (**permalink**) 07-03-2007, 18.00.34

Quote:

Originariamente inviata da Ludus

Il metodo quindi più ovvio è quello di creare un file (io con photoshop) di 1024x768 pixel, credo sia inutile farlo più grande, e in quel file inserire poi i vari elementi che comporranno il template del sito: header, main, footer, menu.

Ma sei il file è di 1024x768 poi quando lo pubblichi non ti compare la barra di spostamento a destra? In fondo un browser di 1024x768 ha pur sempre la barra di navigazione e il menù in alto che tolgono pixel, no?

Quindi passo a creare la grafica dell'header in un file a parte, che poi inserirò nel template. E così via per tutte la altre parti.
In questo modo posso modificare a mio piacimento colori di fondo, di testo, di link, spostare menu, ecc, senza dover andare a modificare ogni volta il css o perfino la pagina web.

Quando sono veramente sicuro che il template va bene (o quando il cliente lo ha approvato) allora comincio a scrivere il codice... e il risultato, ovviamente, dovrà essere identico alla bozza grafica.

Creo dapprima una pagina html, inserisco il doctype e la salvo.
Poi creo il file css (io utilizzo TopStyle Lite, gratuito). Quindi mi apro uno alla volta i vari file che avevo inserito nel template grafico, cominciando dall'header, e me li studio per poterli "tradurre" in div (o tabelle) e css.

Man mano che costruisco la pagina la visualizzo almeno con FF e IE e la valido.

Poi, a pagina terminata, la metto online e la visualizzo ancora, un ultimo controllo col validatore e poi posso cominciare a inserire i contenuti

Chi agisce diversamente?

Non ho capito bene una cosa: tu prima crei il layout con Photoshop e poi come lo adatti al tuo editor? Fai lo slicing e metti le immagini come sfondo?

Il_Rappo · #12 (**permalink**) 07-03-2007, 18.12.38

Quote:

Originariamente inviata da Uflairer

Non ho capito bene una cosa: tu prima crei il layout con Photoshop e poi come lo adatti al tuo editor? Fai lo slicing e metti le immagini come sfondo?

Non so cosa è lo slicing ma è sicuro cosa da niubbi

Il template lo si crea a mano, ritagli i vari pezzi che servono all'immagine e li setti con css

**Ludus** · #13 (**permalink**) 07-03-2007, 19.06.51

Quote:

Originariamente inviata da Uflairer

Non ho capito bene una cosa: tu prima crei il layout con Photoshop e poi come lo adatti al tuo editor? Fai lo slicing e metti le immagini come sfondo?

Io creo con photoshop le varie parti separate della pagina, header, menu, footer, main e quant'altro.

Poi le monto in un documento vuoto di photshop grande almeno 800x600 px. Così le vedo assemblate.

Non adatto le immagini all'editor. Le immagini le salvo poi in jpg o gif. E compilando il codice HTML e il CSS ottengo la pagina come la bozza grafica.

Neanche io so cosa sia questo slicing

Il_Rappo · #14 (**permalink**) 07-03-2007, 20.32.38

Quote:

Originariamente inviata da Ludus

Io creo con photoshop le varie parti separate della pagina, header, menu, footer, main e quant'altro.

Poi le monto in un documento vuoto di photshop grande almeno 800x600 px. Così le vedo assemblate.

Perchè li fai "smontati"?
Io la pagina la creo tutta, perfetta, coi testi giusti perfino, per mostrarla poi al cliente che se approva bene, altrimenti ciccia, problema suo che non ha gusto

Per dire, io mi trovo bene così, così ho un quadro perfetto della pagina, di come verrà e tutto, penso sia pure più veloce rispetto al tuo metodo

**Ludus** · #15 (**permalink**) 07-03-2007, 21.04.02

Quote:

Originariamente inviata da Il_Rappo

Perchè li fai "smontati"?
Io la pagina la creo tutta, perfetta, coi testi giusti perfino, per mostrarla poi al cliente che se approva bene, altrimenti ciccia, problema suo che non ha gusto

lavoro meglio sull'immagine piccola che su un file di 800x1000 pixel

Comunque prima mi faccio uno schizzo a matita, così ho già una visione dell'insieme.

Quote:

Per dire, io mi trovo bene così, così ho un quadro perfetto della pagina, di come verrà e tutto, penso sia pure più veloce rispetto al tuo metodo

Una volta montata ho anche io il quadrato perfetto

**franguzzo** · #16 (**permalink**) 07-03-2007, 21.43.49

Lo slicing è il metodo per tagliare (e succesivamente riassemblare) la pagina, che si utilizzava (in qualche caso si utilizza ancora) senza porsi il problema dell'accessibilità, del web 2.0 ecc. insomma quando c'era solo Explorer e qualche infinitesimale presenza di Netscape.
Era nato principalmente per spezzare in più parti le immagini (tipo header) troppo grandi e pesanti per i vecchi modem analogici.
Però era troppo comodo, soprattutto con Photoshop

**franguzzo** · #17 (**permalink**) 07-03-2007, 21.59.31

p.s. : Uflairer benvenuto su TPU

**Uflairer** · #18 (**permalink**) 15-03-2007, 10.13.49

Intanto ringrazio Franguzzo per il benvenuto (sono un pò in ritardo...

) e rispondo alla domanda principale. Io faccio più o meno come Il Rappo, soltanto che su Photoshop il layout lo metto tutto insieme. Poi vado su Dreamweaver e inizio a fare a cazzotti col Css

... metto i testi e ho la mia pagina completa dove però gli sfondi creati con Photoshop spesso non vanno bene (considerando anche il test multibrowser...)
Quindi inevitabilmente torno su Photoshop per adattare le immagini agli sfondi delle varie sezioni.

Ora chiedo a voi esperti: ma non avete problemi quando elaborate il vostro Css per il vostro Firefox o il vostro Ie6 (lo so ci sono rimasto solo io ma il Wga...

) e poi con altri browsers gli sfondi vi diventano troppo lunghi o troppo corti?

**Ludus** · #19 (**permalink**) 15-03-2007, 10.28.36

Quote:

Originariamente inviata da Uflairer

Intanto ringrazio Franguzzo per il benvenuto (sono un pò in ritardo...

) e rispondo alla domanda principale. Io faccio più o meno come Il Rappo, soltanto che su Photoshop il layout lo metto tutto insieme. Poi vado su Dreamweaver e inizio a fare a cazzotti col Css

... metto i testi e ho la mia pagina completa dove però gli sfondi creati con Photoshop spesso non vanno bene (considerando anche il test multibrowser...)
Quindi inevitabilmente torno su Photoshop per adattare le immagini agli sfondi delle varie sezioni.

Ora chiedo a voi esperti: ma non avete problemi quando elaborate il vostro Css per il vostro Firefox o il vostro Ie6 (lo so ci sono rimasto solo io ma il Wga...

) e poi con altri browsers gli sfondi vi diventano troppo lunghi o troppo corti?

Ciao Uflairer,

che tu faccia come Il Rappo, che mette tutto insieme, o come me, che creo le varie parti separate (header, menu laterali, menu orizzontali, footer, ecc.) non ha importanza. Ognuno trova il sistema che gli è più congeniale.

Vorrei capire cosa intendi per "adattare" le immagini agli sfondi.

Ad esempio, ho creato un header, che prevede una larghezza di 750px e un'altezza di 100px su cui ci andrà del testo.
Nel css scriverò:

codice:

#header{width:750px;
height:100px;
margin: 0px auto;
background-image: url(img/header.jpg); background-repeat: no-repeat;}

e poi:

codice:

<div id="header">testo</div>

Ovviamente poi andranno inserite le regole per il testo, ecc.

In questo modo avrai un div centrale, a cui sarà applicata un'immagine di fondo di 750x100 pixel, lo sfondo non viene ripetuto.

Chiaramente dovrai curare la compatibilità fra i browser, perché magari IE avrà bisogno di una regoletta in più.

**Uflairer** · #20 (**permalink**) 15-03-2007, 10.53.40

Quote:

Originariamente inviata da Ludus

Ciao Uflairer,

che tu faccia come Il Rappo, che mette tutto insieme, o come me, che creo le varie parti separate (header, menu laterali, menu orizzontali, footer, ecc.) non ha importanza. Ognuno trova il sistema che gli è più congeniale.

Vorrei capire cosa intendi per "adattare" le immagini agli sfondi.

Ad esempio, ho creato un header, che prevede una larghezza di 750px e un'altezza di 100px su cui ci andrà del testo.
Nel css scriverò:

codice:

#header{width:750px;
height:100px;
margin: 0px auto;
background-image: url(img/header.jpg); background-repeat: no-repeat;}

e poi:

codice:

<div id="header">testo</div>

Ovviamente poi andranno inserite le regole per il testo, ecc.

In questo modo avrai un div centrale, a cui sarà applicata un'immagine di fondo di 750x100 pixel, lo sfondo non viene ripetuto.

Chiaramente dovrai curare la compatibilità fra i browser, perché magari IE avrà bisogno di una regoletta in più.

Sì, certo, ma tu hai fatto l'esempio con l'header che è la parte più semplice da "tarare".

Il problema è quando per es. nella sezione dei contenuti dove ci possono essere elementi la cui distanza viene calcolata in modo diverso dai vari browsers. In questo modo lo sfondo scelto per quella sezione non si adatterà precisamente a tutti i browser...
Oppure per evitare il problema dichiari quando possibile anche l'altezza dei vari box?

Strumenti della discussione
Visualizza la versione stampabile Invia questa pagina tramite email
Modalità di visualizzazione
Modalità lineare Passa al modo ibrido Passa alla modalità elencata

Discussioni simili
Discussione	Ha iniziato questa discussione	Forum	Risposte	Ultimo messaggio
Tutorial di grafica: segnalazioni e commenti	Gio	Grafica	25	11-06-2008 12.49.50
Grafica 3D: segnalazioni e commenti	FabioTS	Grafica	1	19-03-2007 17.52.51
Regole Grafica	Ludus	Grafica	0	06-03-2007 13.08.20
Grafica 3D	Ludus	Grafica	0	18-02-2007 14.17.09
Tutorial di grafica	Ludus	Grafica	0	09-02-2007 10.24.27