Creazione di un design del sito con Photoshop

Se vuoi creare la tua pagina web, capisci come creare un sito in Photoshop. Adobe Photoshop è un editor grafico. È possibile disegnare layout e i loro singoli elementi. Questo è un processo piuttosto lungo e complicato. Nel corso degli anni, i web designer hanno imparato come progettare modelli e creare pagine web su di essi. Ma un layout semplice può raccogliere qualsiasi persona. Sono necessari solo la conoscenza e la fantasia di Photoshop di base.

In Photoshop è possibile disegnare un design di un sito semplice anche per un neofita

Dalla prima volta è improbabile che tu abbia una pagina come i maestri del design. Ma puoi disegnare un servizio attraente e scomodo.

Poco sulla creazione di siti

Decodifica di alcuni termini.

  • I CSS (Cascading Style Sheets) e HTML (HyperText Markup Language) sono i linguaggi informatici utilizzati per creare risorse web. Se apri il codice sorgente di qualsiasi pagina su Internet, ci saranno tag HTML.
  • Layout: layout e installazione dei materiali dal layout, trasformandolo in un modello HTML. Dipende da come sono disposti gli oggetti, se sono belli nella composizione generale, se è conveniente leggere il testo e simili.
  • I livelli fanno parte del layout. Insieme formano il quadro generale. Ma possono essere modificati e spostati separatamente l'uno dall'altro.
  • Il corpo è il luogo in cui si trova il contenuto. Potrebbe esserci uno sfondo attorno ad esso.
  • Frame (Frame) - l'elemento della pagina. Un blocco con alcune informazioni, immagini, moduli.

Creare un sito sbalorditivo da zero può essere solo un professionista. Per fare questo, è necessario comprendere il web design e conoscere l'HTML. Dal momento che il layout finito deve ancora imporsi con competenza.

Ma ci sono modi più semplici. Esistono servizi e programmi online che convertono automaticamente .psd (formato di file Photoshop) in HTML e CSS. Devi solo assemblare correttamente il modello.

Per usare Photoshop non è necessario essere un artista e comprendere tutte le opzioni del programma. Ma se lo hai iniziato per la prima volta e non sai come inserire il testo, disegnare una forma geometrica, duplicare un livello, cambiare colore o selezionare un'area arbitraria, dovresti iniziare con qualcosa di più semplice. Per creare un layout in Photoshop, abbiamo bisogno almeno delle capacità iniziali di lavorare con l'utilità e una comprensione delle funzioni di base (come disegnare una linea, mettere una guida, selezionare un font e simili).

Anche le informazioni generali sui servizi di rete sono utili. Il sito può essere caratterizzato dai seguenti criteri:

  • Pagina singola Tutti gli elementi, i contenuti, tutti i contenuti della risorsa sono in un unico posto. Su una pagina Per visualizzare i contenuti del servizio, non fare clic sui collegamenti o aprire nuove schede. Allo stesso tempo, il sito stesso può essere arbitrariamente grande. Adatterà una piccola brochure pubblicitaria e un enorme romanzo di 600 pagine.
  • Completa. Di conseguenza, include molte pagine. Questi possono essere, ad esempio, "Casa", "Forum", "Libro degli ospiti", "Risposte alle domande più frequenti", "Contatti". Per ognuno di essi è necessario eseguire un layout. È inoltre necessaria la navigazione e una mappa del sito: una sezione separata con collegamenti a tutte le parti del servizio. In modo che l'utente possa trovare rapidamente il segnalibro di cui ha bisogno.
  • "Rubber". Cambia la dimensione in base alla risoluzione dello schermo. Allungato con la finestra del browser. Dobbiamo calcolare in anticipo come sarà il sito. Se con una larghezza di 1300 tutto viene visualizzato normalmente, quindi in 900 pixel una parte dell'articolo può "andare" oltre i bordi del fotogramma, le immagini non si alzeranno come dovrebbero e l'animazione flash chiuderà il modulo di input.
  • Fisso. Il corpo del sito non cambia le dimensioni. L'opzione più semplice e più pratica. Per rendere la pagina solida, e quando espandendo la finestra non c'era uno spazio "vuoto" ai bordi, puoi creare uno sfondo di gomma.

disposizione

In primo luogo, decidi quale progetto ti serve. Non è sufficiente semplicemente "immaginare", e quindi organizzare in Photoshop. Deve essere una visione chiara. Disegna un motivo su carta normale. Non è necessario ridisegnare ogni immagine. Abbastanza schema: alcuni rettangoli e cerchi, che convenzionalmente denotano gli elementi di una pagina web. Pensa a come saranno posizionati i fotogrammi, dove è meglio mettere un logo, dove posizionare le informazioni per i visitatori.

Vedi esempi di pagine su Internet. Pensa quali ti piacciono e perché. Che si tratti di una comoda disposizione di cornici, colori piacevoli o un approccio interessante al design. Copia il design di qualcun altro non ne vale la pena. È sufficiente trarre ispirazione da esso. Dopo di che puoi capire come disegnare un sito in Photoshop.

  • Crea un nuovo documento (File - Nuovo). Le dimensioni sono selezionate con il calcolo su monitor piccoli o bassa risoluzione: 1024 × 720 pixel. Questa è la larghezza della parte "informazioni" e non l'intera immagine. Se si desidera una pagina di 1100 pixel, è necessario creare un documento con una larghezza di 1300 pixel. La lunghezza, infatti, non è fissa, dipende dalla quantità di contenuti che si desidera posizionare sulla risorsa. Questi sono consigli, non regole. Puoi costruire un grande layout, se vuoi.
  • Accendi il righello. Premi Ctrl + R o vai al menu Visualizza - Righelli. Questa è una scala di misurazione. Lei appare fuori dalla foto. Senza di esso, dovrai stimare la dimensione e la distanza "ad occhio", il che non influisce molto sul risultato finale. Puoi configurare questa funzione nel menu Modifica - Impostazioni - Unità di misura e Righelli. È meglio cambiare centimetri per pixel per lavorare con un parametro e non calcolare quanti punti in un pollice.
  • Dovresti anche attivare la griglia. Visualizza - Mostra - Griglia o Ctrl + E (puoi anche disattivarlo). Questa è una specie di analogico di un notebook in una gabbia. In Photoshop, verranno visualizzate linee verticali e orizzontali. Non appariranno sul disegno stesso. Possono essere visti solo durante la modifica. Questa funzione è necessaria per organizzare in modo uniforme gli elementi del modello. Qualcuno più conveniente per lavorare con la griglia, qualcuno senza di essa. È meglio accenderlo se stai realizzando un sito per la prima volta.
  • Per configurarlo, vai su Modifica - Impostazioni - Guide, Griglia e Frammenti. Qui puoi scegliere la dimensione delle celle, nonché il colore e il tipo di linee (solido, puntinato, fuori punto).

Un esempio di design moderno del sito

  • Installa le guide. Tra loro sarà la risorsa principale del contenuto, il corpo fisso del sito. E dietro di loro - uno sfondo di gomma. Per fare ciò, fai clic su Visualizza - Nuova guida. Nella casella "Orientamento", seleziona "Verticale". Nel campo "Posizione" scrivi la distanza alla quale l'oggetto sarà dal bordo sinistro. Concentrati sulla scala del righello.
  • Sono necessarie due guide: a destra ea sinistra del corpo della pagina. La distanza tra loro deve essere al massimo di 1003 pixel per i display con una risoluzione di 1024 × 720. Puoi specificare una larghezza diversa. Ma grandi risorse sono scomode da vedere su piccoli monitor.
  • Perché 1003, non 1024? Se il sito deve scorrere verso il basso ("scorri") verso il basso, il browser avrà un dispositivo di scorrimento verticale per scorrere. La dimensione di questo cursore è di circa 21 pixel. Se non lo prendi in considerazione, apparirà una scroll orizzontale. E il visitatore della risorsa dovrà spostare la pagina a sinistra e destra per vedere tutte le informazioni.
  • Il corpo dovrebbe essere al centro della tela.

Queste sono fasi preparatorie del lavoro. Come creare un layout in Photoshop dipende dalla tua immaginazione e dal tuo gusto. Pertanto, ulteriori saranno solo raccomandazioni generali di natura tecnica.

  • Innanzitutto, il tuo layout ha bisogno di uno sfondo. Può essere reso indipendente o scaricato dalla rete. Ci sono molte risorse con trame gratuite. Non mettere sul sito immagini che sono soggette a copyright. Non prendere uno sfondo luminoso o contrastante. È meglio non utilizzare trame con un gran numero di piccoli dettagli accattivanti. Distaccheranno il visitatore dal corpo della pagina.
  • Se apri semplicemente il disegno in Photoshop, sarà in una nuova scheda e non verrà aggiunto al layout. Evidenzia l'intero sfondo. Per fare ciò, hai bisogno della scorciatoia da tastiera Ctrl + A o dello strumento Selezione (si trova nel pannello di sinistra). Copialo e incollalo nel modello.
  • Anche questa opzione è disponibile se si fa clic su Modifica - Incolla.

  • Un nuovo livello apparirà nell'elenco in basso a destra. Cliccaci sopra con il tasto destro del mouse per vedere le possibili azioni. Nel menu "Opzioni livello", puoi cambiare il suo nome. In "Impostazioni overlay" sono le impostazioni di base dell'immagine. Puoi renderlo splendente, rilievo, lucido, tratto, sfumatura. Se selezioni un'opzione, le modifiche verranno immediatamente visualizzate in Photoshop. C'è un set di stili già pronti. Quindi, dalla trama standard, vengono create soluzioni di design originali. E non disegnare nulla in più.
  • Il pulsante "Filtri" si trova nella barra dei menu. Lì troverai una varietà di imitazioni (pastello, acquerello, matite), stili, trame, schizzi, luci, sfocatura.
  • Puoi scegliere uno sfondo semplice. Il colore dipende dalle tue preferenze personali. Ma è meglio non renderlo nero o velenoso. Biancheria da letto adatta e tonalità tenui o freddo trasparente (ad esempio, grigio chiaro, blu pallido).
  • Dopo le trame è possibile raccogliere il sito stesso. Qui hai la libertà di creare.
  • Per aggiungere una forma (linea, quadrato, ovale), fare clic sul pulsante corrispondente a destra. Avrà l'aspetto e il nome dell'oggetto che è attualmente selezionato per il disegno. Ad esempio, "Ellipse Tool", "Polygon Tool". In Photoshop, il numero di forme è limitato. Ma possono essere trovati su Internet, scaricati e installati tramite il menu Modifica - Imposta gestione. Nel campo Tipo, specifica quale collezione di oggetti stai caricando.
  • In diverse versioni del programma, queste figure sono chiamate in modi diversi. O con un pulsante sotto forma di un piccolo triangolo nero (è sulla destra), o con un'icona a forma di ingranaggio, o con l'elemento "Forma del punto" (si trova sotto la barra dei menu). Gli oggetti possono essere combinati, raggruppati, creare composizioni di essi.
  • Per creare una cornice di testo, fare clic sul pulsante sotto forma di una lettera maiuscola "T". Quindi seleziona il luogo in cui posizionare i personaggi, fai clic qui e digita ciò che ti serve.
  • Ogni elemento è meglio mettere su un livello separato. Quindi sarà più comodo spostarsi e modificare, senza "toccare" l'intero sito. Per aggiungere questo oggetto, vai su Livelli - Nuovo.

  • Per proiettare un'immagine in un'area preselezionata, prima selezionala, quindi apri Modifica - Incolla speciale. Ci saranno le opzioni "Inserisci invece" e "Inserisci all'esterno".
  • È possibile trasferire parte di una foto in un nuovo livello. Per fare ciò, selezionalo, fai clic destro su di esso e seleziona "Taglia su un nuovo livello".
  • Con forme, didascalie e immagini sono disponibili le stesse opzioni come con lo sfondo: effetti, filtri e così via.
  • In Photoshop ci sono ancora molti strumenti per disegnare: pennelli, penne, matite.

Puoi creare una risorsa di qualità anche da semplici oggetti geometrici.

Ci sono risorse con layout gratuiti. Caricali in Photoshop e modificali se necessario. È più facile e veloce che disegnare da zero.

Come trasformare un layout in un file html?

Hai capito come creare un sito in Photoshop e hai progettato il tuo primo layout. Cosa fare dopo? Dopotutto, non può semplicemente caricare sull'hosting.

Può essere dato al programmatore che realizzerà un modello html di alta qualità. Ma c'è un'altra opzione. Usa i servizi per convertire il file PSD in HTML e CSS.

  • Convertitore Psd2Html. Servizio online a pagamento Converti rapidamente il formato Photoshop nel modello di pagina web. Con questa risorsa, anche da un layout di scarsa qualità, puoi creare un sito decente.
  • Panda HTML.
  • PSDCenter
  • 40 Dollar Markup.

costruttori

I layout possono anche essere raccolti su siti speciali. Di solito c'è un'interfaccia chiara e intuitiva. Devi semplicemente assemblare un modello da varie parti. Alcuni elementi sono disegnati meglio in Photoshop. Quindi ottieni il design originale. Nonostante sia stato creato sul costruttore.

In Photoshop non disegnare solo. Raccoglie i layout per i siti. Nella maggior parte dei casi, questo è fatto dai maestri. Ma un modello semplice può rendere qualsiasi persona. È necessaria solo la conoscenza di base di Photoshop.