Come costruire siti web in Photoshop

November 5

Come costruire siti web in Photoshop


Photoshop non è uno strumento di costruzione sito web, ma può rivelarsi prezioso nella pianificazione e progettazione del tuo sito web. Photoshop permette di realizzare il look and feel del tuo sito e facilmente apportare modifiche prima di costruire il sito. Costruire un sito web in Photoshop è un compito relativamente semplice, ma è probabile che prendere un sacco di tentativi ed errori prima di creare un disegno che si è soddisfatti.

istruzione

Il layout il tuo sito web con Photoshop

1 Creare un nuovo file in Photoshop. Impostare la larghezza del file a 1.024 pixel e l'altezza a 1.000 pixel.

2 Premere Ctrl R (Cmd R per Mac) per rendere i governanti visibile sul vostro nuovo file.

3 Fare clic sul righello orizzontale e trascinare verso il basso per creare una nuova linea guida orizzontale. Spostare questo orientamento a 20 pixel dalla parte superiore dell'immagine. Creare un'altra guida orizzontale e trascinarlo a 20 pixel dal basso dell'immagine.

4 Fare clic sul righello verticale e trascinarlo per creare una nuova linea guida verticale. Spostare questa linea guida per 20 pixel dalla sinistra dell'immagine. Creare un altro guida verticale e trascinarlo a 20 pixel dalla destra dell'immagine. Ora abbiamo l'inizio di un layout del sito. Queste guide ci danno margini dai bordi dello schermo e definiscono l'area in cui verrà inserito il contenuto del sito.

5 Fare clic sul righello orizzontale e trascinare un'altra guida orizzontale verso il basso per impostare il margine inferiore della testata del tuo sito web. Circa 100 pixel dalla parte superiore della pagina dovrebbe darvi lo spazio necessario. Ripetere questa operazione per impostare il bordo del piè di pagina del tuo sito web, che definisce il piè di pagina è di circa 100 pixel dalla parte inferiore dell'immagine.

6 Fare clic sul pulsante "Aggiungi un nuovo livello" nella palette Livelli. In questo nuovo livello, selezionare l'area definita per l'intestazione con lo strumento di selezione rettangolare. Selezionare un colore verde brillante dalla tavolozza di colori e riempire la selezione con esso. Ripetere questo processo per il piè di pagina e la sezione centrale, o il corpo. Utilizzare lo stesso verde per il piè di pagina, ma utilizzare un rosso brillante per il corpo. Questi non sono i colori che verrà utilizzato per il sito questi sono solo ulteriori guide da utilizzare durante la progettazione del sito web.

Ripetere questi passaggi per definire ulteriormente sezioni del sito. Ad esempio, se si desidera che le colonne nel corpo, utilizzare manuali di definire l'alto, in basso, a sinistra ea destra i confini di quelle colonne. Quindi, usare i colori brillanti sul nuovo livello per definire il layout.

Consigli e avvertenze

  • Sarebbe una buona idea per disegnare uno schizzo di ciò che volete che il vostro sito web a guardare come su un pezzo di carta zero prima di procedere a Photoshop. Guardando a come siti web con contenuti simili ai tuoi sono progettati vi aiuterà a ottenere una buona idea di ciò che si può desiderare.
  • Questa è un'istruzione di base su come lay out il sito web in Photoshop. Con quello che hai iniziato qui è possibile progettare ogni sezione del sito. Creare sfondi per l'intestazione, il corpo e piè di pagina. Un ticchettio sottile o gradiente è generalmente una buona idea. Crea il tuo logo sullo sfondo della testata. Creare un menu per la navigazione del sito. Photoshop è utile in quanto consente di regolare l'aspetto sentire come si va e che permette di creare un design elegante con relativa facilità.
  • Ricordate Photoshop è solo un primo passo verso la costruzione del sito, utile a realizzare le vostre idee visivamente. Una volta creato un disegno che ti piace, sarà necessario creare, a file minimi, HTML e CSS per creare il sito. Il design Photoshop si crea sarà una guida per quei file e sarà la fonte di elementi grafici necessari per il sito web.
  • Mentre si lavora per creare il design del sito web, ricordarsi di mantenere diversi elementi su livelli separati in modo da poter più facilmente manipolare andando avanti.