• Regolamento Macrocategoria DEV
    Prima di aprire un topic nella Macrocategoria DEV, è bene leggerne il suo regolamento. Sei un'azienda o un hosting/provider? Qui sono anche contenute informazioni per collaborare con Sciax2 ed ottenere l'accredito nella nostra community!

Guida Creare un Sito con PhotoShop e DreamWeaver

GTO

Utente Master
Autore del topic
26 Maggio 2008
2.334
0
Miglior risposta
0
Salve a tutti, in questa guida vi insegnerò a un semplice utilizzando per scegliere la e DreamWeaver per gestire il Codice. Con si possono siti di tutti i tipi e davvero eccezionali nella qualità , io vi insegnerò a farne uno semplice....
[CC].[/CC]

Per prima cosa apriamo Photoshop e facciamo FILE -> NUOVO e impostiamo le dimensioni del Documento a 1024 pixel (larghezza) e 768 pixel (altezza), questo perchè la maggior parte dei PC di oggi ha queste risoluzioni di Default.

2v00bbt.jpg
Fatto questo dobbiamo iniziare a pensare come vogliamo che sia lo sfondo del nostro sito, a me non piace fare una cosa MONOTONA con lo sfondo di un unico colore, dovrei inserire un PATTERN carino ma quelli di Default di PhotoShop fanno schifo xD perciò o ne scaricate delle migliori, o ve la create voi. Io me la creo io e la inserisco come Sfondo...


fu43k9.jpg

Ok, adesso che abbiamo impostato lo sfondo del Sito dobbiamo inserire il Blocco dove andrà inserito il Testo del Sito.
Per farlo selezioniamo lo STRUMENTO RETTANGOLO (Rettangular Tool) e creiamo l'area di testo del sito.

Logicamente potete anche dare qualche effetto a vostro piacimento.


33eqzpv.jpg

Ora, possiamo Inserire L'Header del nostro sito xD.
Scarichiamo l'immagine che vogliamo utilizzare...
Ora, con lo strumento SELEZIONA RETTANGOLARE evidenziamo l'area dove vogliamo inserire l'immagine

b5o9bb.jpg

1)FILE -> APRI e apriamo l'immagine scaricata e
trasciniamola nel rettangolo creato.

2)Clicchiamo sull'Occhio affianco al Livello dell'immagine scaricata per nasconderla.

3)Sempre avendo selezionato il Livello dell'immagine clicchiamo sul pulsante AGGIUNGI UNA MASCHERA DI LIVELLO
2h3d89k.jpg
e clicchiamo di nuovo sull'occhio per rendere il Livello VISIBILE.

4) Ora l'immagine comparirà all'interno del Riquadro che avete fatto con lo strumento SELEZIONA RETTANGOLARE e basterà che ve la spostate e regolate come volete



Ecco il risultato fino ad ora

124vqma.jpg

Ora dobbiamo inserire la barra di navigazione, il bello di PhotoShop è che i Pulsanti li creiamo noi come vogliamo con il FONT delle scritte come vogliamo, nella posizione che desideriamo e cosi via xD.
Vi faccio vedere come creare una semplice navigazione ma in questo modo potete farne come volete...

Creiamo i nostri pulsanti, io voglio crearli sotto l'header.
Non dovete fare niente di particolare, dovete solo disegnarli nella posizione che volete e come li volete.


Ecco come ho fatto io (una navigazione molto banale per darvi l'idea


2d9a13a.jpg
Ora potete aggiungere quello che volete (immagini e abbellimenti vari).
Non preoccuapatevi del TESTO perchè quello si farà successivamente in CSS con DREAMWEAVER.

Una volta completato il nostro Schema del Sito, dobbiamo farlo diventare un sito Vero e proprio... COME FARE ?


1) Selezioniamo lo STRUMENTO SEZIONE
nbugbd.jpg
e ritagliamo tutti i nostri BOTTONI LINKATI e l'Header e tutte le altre immagini o abbellimenti che avete inserito nel sito, come nell'immagine che segue


288vbzp.jpg

Fatto questo andiamo su FILE -> SALVA PER WEB E DISPOSITIVI e selezionando l'HEADER impostiamo in JPEG perchè altrimenti la qualità grafica nel sito verrebbe orrenda. Fatto questo clicchiamo
SALVA e salviamo con questi criteri :

NOME FILE : Index.htm

SALVA COME : HTML e Immagini

IMPOSTAZIONI : Predefinite

SEZIONI : Tutte le sezioni


Bene, ora PhotoShop ci salverà l' INDEX.HTM ed una cartella contenente tutte le immagini del sito.

La parte grafica è finita ma prima di iniziare ad utilizzare DreamWeaver dobbiamo fare ancora una cosa.
Non chiudete PhotoShop.

Vedete i BOTTONI linkati che avete creato ?

Bene, modificategli il colore a vostro piacimento, ve lo spiego dopo a che serve ma fatelo... nel mio caso ho cambiato il colore del testo in BIANCO


jqp7bm.jpg

Ora fate FILE -> SALVA PER WEB E DISPOSITIVI con i criteri :

NOME FILE : Quello che volete

SALVA COME : Solo Immagini

IMPOSTAZIONI : PREDEFINITE

SEZIONI : TUTTE LE SEZIONI

ed il tutto salvatelo in una posizione del PC differente dalla precedente per evitare che si sovrascrivino i FILE


Bene, ora abbiamo terminato la parte grafica del sito e siamo pronti per lavorare il codice con DREAMWEAVER ed ecco il LINK alla seconda guida ---> http://www.sciax2.it/forum/web-desi...p-dreamweaver-parte-2-a-76175.html#post804379

Per il momento è tutto, se avete problemi contattatemi pure via PM..... CIAOOOOOO
 
Ultima modifica:
*-* utilissimo sopratt x chi nn è pratico di html o nn ha voglia di scrivere, qst di photoshop non la sapevo *-*
 
Wow Bravissimo!! Se è tua Ti faccio i miei complimenti... Guida Chiara e Semplice!! E ben fatta! Linguaggio aricolato e semplice! Strumenti e dettagli evidenziati Precisamente! Io voterei per il rilievo!! OTTIMA!:bravo:
 
WoW bellissima ... però preferisco fare i sitiweb con FrontPage xD + semplice xD
 
Si, la guida l'ho fatta io xD ma non è ancora completa, adesso faccio la seconda parte !
 
Bravo per quelli che non sono molto esperti o anche per esperti che non lo sanno , visto che io sono a meta' ed non lo sapevo :emoji_slight_smile:
 
cavolo sto cercando di crearlo .. ma nn ho capito lo sfondo cm si dovrebbe mettere xD ... nn ci sto capendo nnt xD
 
in che senso lo sfondo ? che sfondo ? In PhotoShop ?
 
Grazie, ripeto, se qualcuno ha difficoltà a procurarsi DreamWeaver può contattarmi via SKYPE
 
Non per offendere o cose simili ma questa guida è praticamente scopiazzata dai video di YouTube dell'utente mirkojax , hai solo cambiato il colore e l'header , i procedimenti sono uguali a quelli che dice lui . Potevi metterere direttamente i video . Cmq bravo!
 
Haha xD !

La tecnica è quella e i procedimenti sono quelli ...

io non posso cambiarli ^^