Questo Adobe Photoshop tutorial mostra e discutere il modo di utilizzare Photoshop per la progettazione di un sito web che verrà esportato come html e l'immagine fette. Questo può poi essere portato in un html editor di programma, come Adobe Dreamweaver. Questo è un Adobe Photoshop web design tutorial che mostra come creare una intera pagina web direttamente nel Photoshop.
Abramo chaffin CreativeCow.net, Cambria, California USA
Ci sono molti modi diversi di approccio alla progettazione di un sito web. Alcuni scelgono di progettare il tutto in Dreamweaver, O fare un rapido schizzo su carta e poi costruire il loro sito, Mentre altri preferiscono un approccio di progettazione grafica e l'uso Photoshop come strumento di progettazione. Creare il tuo sito come un Photoshop rende il file prima della creazione del vostro sito in seguito molto più facile, per vari motivi,.
L'inizio di qualsiasi concetto di design è quello di ottenere una buona ispirazione da qualcosa che si può già vedere. Come un pittore diventa ispirazione dal mondo che li circonda, Un web designer sarà anche ispirazione da ciò che vedono. Talvolta si tratta di un sito esistente, Modelli di sito, O da una foto, Grafica, O il logo.
In aggiunta a una buona ispirazione è riconoscere il tuo pubblico di destinazione e la progettazione di ciò che intorno a lui più confacente. Il layout e lo stile dovrebbe essere in alcuni conformità con quanto il pubblico è già utilizzato per. La risoluzione dello schermo deve essere considerato anche nella progettazione di un sito web. La larghezza della pagina e le prime volte della pagina sono importanti per il successo del tuo sito. (la piega è l'area prima che vede il visualizzatore hanno a scorrere verso il basso la pagina.), Mentre solo accogliere grandi risoluzioni dello schermo potrebbe rendere il vostro lavoro più facile che si stanno tagliando fuori una parte del tuo pubblico. La maggior parte degli utenti del Web oggi utilizzano risoluzioni dello schermo più grande che mai e, in futuro, costruito siti web per le piccole risoluzioni dello schermo diventerà meno di un fattore, ma per ora è ancora deve essere considerato.
è anche possibile per il tuo sito per avere una larghezza flessibile in modo che si dilata e si basa su una finestra di dimensioni utenti, Questo è ottimale quando si tenta di creare un sito che ospiterà tutti. Un sito concepito per ospitare una finestra di dimensioni di almeno 750 pixel di larghezza è ottimale. La risoluzione minima utilizzata dalla maggior parte degli uomini di oggi è di 800 x 600.
La procedura di creazione del vostro sito web utilizzando Photoshop sono:
1. Utilizzo Photoshop per la progettazione l'aspetto e il layout del sito che stai voler.
2. Fetta l'immagine in Photoshop, Esportare il tranciato o immagini come uno html. Comprensione html formattazione aiuta molto per l'interpretazione come la tua immagine fetta di andare in html.
3. Creare le html in modo che corrisponda al modello Photoshop design del sito e far cadere il tranciato o utilizzare immagini in Dreamweaver per regolare il html file Photoshop creato dal vostro PSD fette.
Il design del sito in questa esercitazione sarà costruita da una immagine di Bessie nel suo pascolo.
Questo dovrebbe essere un buon sito o =
La creazione di una intestazione grafica
La prima parte della progettazione di un sito web in Photoshop è la creazione di una intestazione grafica per il tuo sito. L'intestazione grafica è la parte grafica del tuo sito, che sarà visto prima e sarà il centro per il look and feel del tuo sito. Avere finito intestazione grafica Qui.
Passi da seguire:
1. Fare clic qui a destra Per salvare l'immagine. Salvare l'immagine in una nuova cartella.
2. Aprire il file scaricato in Photoshop.
3. Ritagliare l'immagine a 745 x 320 con il logo della mucca nella parte destra della foto. Per fare ciò selezionare la cornice rettangolare strumento (m), Quindi sotto il menu a tendina scegliere stile dimensione fissa. Mettere in 745 px di larghezza e 320 px di altezza. Posizionare il tendone per creare la propria intestazione e ritagliare l'immagine (menu immagine colture).
4. Creare una piccola piuma 10 pixel in alto l'immagine. Selezionare il gradiente strumento (g), Fare clic sul gradiente in alto gradiente strumento finestra, Impostare l'ora di inizio e fine a colori bianco, Impostare l'ora di inizio e lo 0% di opacità e la fine di opacità al 100%. Fare un nuovo livello e creare e trascinare la rampa in alto a turni azienda a fare la rampa lineare.
5. "Alleggerisci il grafico con la creazione di un altro, mentre la rampa su immagine a partire da fondo e alleggerimento verso l'alto (tenere premuto shift per mantenere la rampa retta). Il punto di fine della rampa deve essere di circa 300 pixel di cui sopra l'immagine per dare un bel velo di grafica. Questo dà l'apparenza di un giorno più luminoso nella fattoria mucca.
6. Finalmente stiamo andando ad alleggerire l'intestazione grafica ancor più attraverso la creazione di un altro verticale rampa in direzione opposta a quella del precedente. Il punto di partenza dovrebbe essere anche con la parte superiore del logo della mucca ed il fondo dovrebbe essere di 1 pixel sopra il fondo del grafico.
7. Salvare l'intestazione grafico in una cartella in cui avete intenzione di creare il tuo sito web utilizzando salvare per il web (Alt + Maiusc + Ctrl + s). Salvare come jpg, Ottimizzato, A circa 70 qualità.
L'intestazione grafica è stato creato. Il grafico può essere utilizzato in modi diversi in un modello di sito. L'uso è a fondo scala e avvolgere la navigazione e corpo del testo intorno ad esso, O ridotto nelle dimensioni e impostare in un più moderno modello di layout.
Progettazione del layout di un sito web Photoshop
La progettazione del tuo sito web deve avere almeno tre parti distinte che includono elementi specifici:
1. Header
Logo aziendale
Grafica banner
Link pulsanti / per la casa, Circa, E la pagina dei contatti
2. Corpo
Zona contenuto di testo della pagina
Immagini o simboli grafici integrati con il contenuto
3. Piè di pagina
Informazioni sul copyright
Collegamenti con la politica / Condizioni di utilizzo, E torna indietro link
Durante la creazione del layout di progettazione in Photoshop assicurarsi di lasciare spazio per ulteriori navigazione, Testo, E l'espansione del sito, in futuro, o si potrebbe trovare te bisogno di ridisegnare completamente il tuo sito perché non lasciare spazio per i collegamenti a più pagine nel vostro disegno. La procedura descritta di seguito vengono utilizzati per creare il layout per la Photoshop layout sito web che può essere Scarica qui.
Passi da seguire:
1. Creare un nuovo PSD file di 745 x 600 px px e salvarlo come layout.psd
2. Luogo l'intestazione grafico nel documento. (aprire il file header (g_header.Jpg), Selezionalo (CTRL + A), Copia (Ctrl + C), Attivare il layout.PSD finestra, Incolla (Ctrl + V).)
3. Utilizzare il passaggio strumento (v) per spostare l'intestazione nella parte superiore del layout azienda passaggio a farlo scattare in posizione nella parte superiore.
4. Aprire il Logo aziendale, Copia e incolla nel tuo layout.
5. Trasformare il logo (Ctrl + T) e spostare in alto a sinistra del layout del sito.
6. Utilizzando il tipo di strumento orizzontale (t) Creare alcuni link di testo di piccole dimensioni nel cielo tra i due loghi sulla parte superiore della guida. Digitare la parola "casa", 4 spazi, "contatto", Un altro 4 spazi, E poi "su". Testo dovrebbe essere di circa 12 pt, Arial font, Usando il colore # a6ff94 per un divertimento luce di colore verde.
7. Dare al testo un dropshadow (livello stile livello dropshadow) con una distanza di 2 e un massimo di 3.
8. Posizionare il testo utilizzando il tool e spostare le frecce opportunamente accanto al logo in alto a sinistra.
9. Al di sotto del più piccolo della mucca logo creeremo alcuni grandi navigazione / immagine link:
Utilizzando il tipo di strumento orizzontale (t) di tipo "pagina 1 pagina 2 pagina 3 pagina 4" utilizzando arial, 17 pt font con testo nero. Messo a circa 4 o 5 gli spazi tra le parole per dare un po 'di spazio i pulsanti.
Creare un nuovo strato
E trascinarlo al di sotto del testo che avete appena creato
Con la cornice rettangolare strumento (m), selezionare una zona dietro la più grande navigazione.
Selezionare il secchio di vernice strumento (g) e riempire l'area selezionata del nuovo livello vuoto con (# a6ff94) il colore verde.
Fanno di questo strato di apparire come un pulsante da andare al menu di livello stile livello smusso e rilievo. Utilizzare le impostazioni predefinite premendo ok
Utilizzando un unico strumento colonna cornice eliminare una colonna di pixel tra ogni parola nel verde livello di sfondo che avete appena creato. Ciò spezzare l'ingranaggio e guardare ogni parola come un pulsante separato. Potrebbe essere necessario utilizzare lo zoom per avere diritto tra le parole.
8. Duplicare il tasto verde strato trascinandolo sul pulsante nuovo livello O vai al menu di livello Duplica livello.
9. Selezionare il tasto verde in basso e aggiungere uno strato di sfocatura di movimento per lo strato con una distanza di circa 150 pixel per andare al menù filtro sfocatura Motion sfocatura.
10. Spostare il offuscata strato basso di circa 10 pixel e l'opacità inferiore al 20%. Questo dà una sottile linea di pulsanti sotto la sua divisione per aiutare la parte superiore dal contenuto.
12. Creare un nuovo strato di base del diritto d'autore del testo che sarà lo sfondo dietro il piè di pagina di testo, Assicurarsi che il livello è selezionato.
13. Utilizzare la cornice rettangolare strumento (m) per selezionare una zona nella parte inferiore della pagina, ma solo un po 'superiore a quello del diritto d'autore del testo.
14. Utilizzare il secchio di vernice strumento (g) e riempire l'area con il colore verde (# a6ff94).
15. Piuma il bordo esterno con l'interno in stile bagliore strato (layer menu strato style interiore bagliore) impostare la modalità di miscela normale, Di colore bianco (# ffffff) e le dimensioni di 10 pixel.
Ora che abbiamo progettato una semplice, Divertimento, Nel sito Photoshop con l'intestazione e pie 'di pagina. Lo spazio bianco tra l'intestazione e il piè di pagina saranno tutti i contenuti testuali e immagini, che compila l'attuale sito web.
Affettatura immagini in Photoshop per il web
Ora che abbiamo progettato un semplice sito web con Photoshop ci fetta in pezzi e l'esportazione di pezzi come uno html file che può essere successivamente utilizzato e modificato nel Dreamweaver. Affettatura quando il tuo sito web design ricordare che ogni fetta diventerà una cella di una tabella e l'immagine in modo cercare di mantenere le fette come pochi e il più semplice possibile. Assicurarsi di inizio e di fine al di fuori del tuo fette la progettazione, ove possibile, in modo Photoshop errore, non un singolo pixel si possono avere come perdere una fetta. Aprire il sito web design abbiamo fatto in precedenza, Selezionare la fetta strumento (k) e Let's Get Started. (girare a rompersi per i migliori risultati - per visualizzare il menu snap (Ctrl + Maiusc +;), Assicurarsi scatto a strati è acceso.) Scarica il Tranciato PSD file qui.
Passi da seguire:
Creare una fetta attorno tutta la grafica. Avviare al di fuori della grafica e alla fine al di fuori della grafica. Ciò contribuirà a dire Photoshop per non creare qualche singolo pixel grafica che non vogliamo.
Fetta il piè di pagina grafica inizio e fine in grigio al di fuori del layout. Lasciare che il rompersi trovare il top del livello per voi.
Fetta l'intestazione tutti il modo in cui attraverso la cima partendo al di sopra del grafico in grigio e termina poco al di sotto del più grande navigazione. Questo dovrebbe tagliare la mucca in due (oh no! ). Che ora dovreste avere 3 fette per il vostro header parte, I tuoi contenuti, E la tua pagina.
Fetta di tutti i pulsanti, Cercare di assicurarsi che si sta per scattare la stessa posizione per ogni pulsante in modo che l'altezza dei tasti sono le stesse. Per il minore, Grandi pulsanti che si possono scattare verso il basso della campagna circostante fetta.
Tuo Photoshop web design deve essere affettato e ora pronto a salvare per il web.
Esportatori / risparmio Photoshop fette come una pagina web
Nelle versioni precedenti di Photoshop il salvataggio di una immagine a fette per il web potrebbe essere fatto solo con ImageReady, ma ora è tutto costruito in Adobe Photoshop CS3. La seguente parte del tutorial vi mostrerà come salvare il sito web design tranciato abbiamo fatto in Photoshop come uno html file con immagini associate.
Passi da seguire:
Tranciato con il grafico aperto scegliere dal menu File Salva per Web e dispositivi (Alt + Maiusc + Ctrl + s). Questo porta il salvataggio per il web e dispositivi finestra.
Sotto il menu a tendina Preset scegliere jpeg elevato per la qualità e il tipo di file. (questa è semplicemente una preferenza.)
Fare clic sul menu ottimizzata freccia per aprire il menu Modifica e fare clic su impostazioni di uscita...
Non entrare nei dettagli sulle impostazioni di uscita qui. Scegliere le impostazioni predefinite le impostazioni dal menu a tendina. Prev uso e la prossima a guardare tutte le impostazioni.
Fare clic su OK e quindi salvare. Assicurarsi che si salva in un percorso che si può individuare facilmente.
Scegliere Salva come tipo: html e le immagini (*.html )
Impostazioni: Impostazioni predefinite
Fette: Tutte le fette
Fai clic su "Salva
Congratulazioni ora hai progettato con successo un sito web con Photoshop, Tranciato è, E poi esportato con successo come html file! Ci sono alcune semplici modifiche che dovranno comunque essere fatto prima che il design può essere utilizzato come una pagina web o un sito web modello, ma che mi lascia per un altro tutorial.
Ora che abbiamo progettato un semplice sito web con Photoshop ci fetta in pezzi e l'esportazione di pezzi come uno html file che può essere successivamente utilizzato e modificato nel Dreamweaver. Affettatura quando il tuo sito web design ricordare che ogni fetta diventerà una cella di una tabella e l'immagine in modo cercare di mantenere le fette come pochi e il più semplice possibile. Assicurarsi di inizio e di fine al di fuori del tuo fette la progettazione, ove possibile, in modo Photoshop errore, non un singolo pixel si possono avere come perdere una fetta. Aprire il sito web design abbiamo fatto in precedenza, Selezionare la fetta strumento (k) e Let's Get Started. (girare a rompersi per i migliori risultati - per visualizzare il menu snap (Ctrl + Maiusc +;), Assicurarsi scatto a strati è acceso.) Scarica il Tranciato PSD file qui.
Creare alcuni link di testo di piccole dimensioni nel cielo tra i due loghi sulla parte superiore della guida. Digitare la parola "casa", 4 spazi, "contatto", Un altro 4 spazi, E poi "su". Testo dovrebbe essere di circa 12 pt, Arial font, Usando il colore # a6ff94 per un divertimento luce di colore verde.
E trascinarlo al di sotto del testo che avete appena creato
