Esiste un numero enorme di modelli di siti Web sul Web, ma hanno uno svantaggio: non sono unici. Se il proprietario del sito non vuole che il design del suo sito venga ripetuto altrove, può ordinare un modello da un designer professionista o provare a crearlo da solo.
È necessario
Programma Adobe Photoshop
Istruzioni
Passo 1
Creare il tuo modello non è un compito così difficile come potrebbe sembrare a prima vista. Per funzionare, hai bisogno di Adobe Photoshop - ovviamente, devi avere almeno una conoscenza di base del lavoro con esso. Ma prima di avviare il programma e iniziare a creare, è necessario pensare in anticipo al design futuro. Il modo più conveniente per farlo è prima familiarizzare con almeno un centinaio di modelli già pronti, valutarne vantaggi e svantaggi. Presta attenzione alle soluzioni di successo di alcuni elementi di design. Ciò non significa che li copierai, ma è abbastanza ragionevole prendere come base alcune soluzioni belle e convenienti.
Passo 2
Sulla base dell'analisi dei modelli di altre persone e della tua creatività, dovresti avere un'idea di come apparirà il tuo sito. È meglio fare schizzi approssimativi del design futuro con matite colorate su normali fogli A4. Dovresti iniziare a lavorare con Photoshop solo dopo aver avuto un'idea chiara di cosa esattamente disegnerai.
Passaggio 3
Avvia Photoshop, crea un nuovo progetto 1200x1600, imposta uno sfondo trasparente. Attiva lo strumento Righello, se non è già attivo, per farlo premi la combinazione di tasti Ctrl + R. Abilita snap: Visualizza - Snap.
Passaggio 4
Ora dobbiamo dividere il modello con guide che mostreranno i bordi dei suoi elementi: lati, colonne, ecc. Ad esempio, vuoi dividere il modello in modo che ci sia una colonna stretta a sinistra, una colonna larga a destra a destra del modello e ci sia spazio in alto per un'intestazione. Ciò significa che hai bisogno di tre linee verticali (il bordo sinistro del modello, quello destro e la linea tra di loro) e una orizzontale, che mostra il bordo inferiore dell'intestazione. Per impostare una linea verticale, spostare il cursore sul righello sinistro sul lato sinistro, premere V e, tenendo premuto il tasto, trascinare la linea nella posizione desiderata. Fai lo stesso con le altre due linee verticali. Quelli orizzontali sono costruiti allo stesso modo, viene utilizzato solo il righello superiore.
Passaggio 5
Trova uno sfondo per il tuo modello, dovrebbe essere un piccolo motivo ripetuto. Aprilo in Photoshop, seleziona, copia. Quindi incolla nel modello tutte le volte che vuoi riempirlo con lo sfondo. Incolla è fatto in questo modo: "Modifica" - "Incolla", quindi trascina l'area di sfondo nella posizione desiderata. È ancora più veloce inserire un'immagine usando il comando Ctrl + V. Aggiungi uno sfondo per l'intestazione del sito allo stesso modo. Puoi utilizzare vari riempimenti sfumati per creare uno sfondo.
Passaggio 6
Usando lo strumento Matita, disegna i bordi del modello, concentrandoti sulle linee già tracciate (cioè sopra di esse). Hai ricevuto la base del modello più semplice, ora devi integrarlo con i dettagli necessari: pulsanti di navigazione, righe di menu, vari elementi decorativi, ecc. Per ulteriori informazioni su come creare pulsanti e altri elementi, leggere gli articoli corrispondenti su come lavorare con Adobe Photoshop.
Passaggio 7
Il template è stato creato, ora è necessario tagliarlo a pezzi per inserirli nella pagina html. Usa lo strumento Taglia per tagliare. Per trovarlo, fai clic con il pulsante destro del mouse sullo strumento Cornice e scegli Ritaglio dal menu che si apre. Ora puoi annidare il modello come desideri, quindi salvare: "File" - "Salva per Web". Nella finestra che si apre, seleziona il tipo di file: HTML & immagini, specifica il nome del file: index.htm e salvalo. Avrai un file index.htm e una cartella di immagini con immagini affettate.
