Share
Troverai molti tutorial sul Web design e sullo sviluppo in rete? ma pochissimi tuts che ti portano dall'inizio alla fine. Un sacco di tutorial sono solo per la progettazione, e altri sono solo per la codifica. Oggi stiamo iniziando una nuova serie in cui progetteremo e svilupperemo un sito Web completo da zero; Ti porteremo dal wireframe iniziale alla progettazione completa del sito (incluse 5 pagine). Quindi codificheremo il design (in Nettuts ovviamente) e infine convertiremo questo tema XHTML completo in un tema WordPress funzionante!
Il nostro obiettivo è progettare e sviluppare un design semplice del sito con un layout moderno che sia favorevole ai sistemi CMS come WordPress. Non applicheremo alcun effetto stile selvaggio e pazzo nel nostro design (il punto qui è quello di mantenerlo semplice), ma stiamo per affrontare l'intero processo, dall'inizio alla fine, come uno studio nel layout e un uso corretto di margini e imbottitura.
Useremo il sistema a griglia 960 dall'inizio alla fine, quindi se ti sei mai chiesto come usare il sistema, ora è un buon momento per imparare! Faremo alcune deviazioni dalla norma, ma per la maggior parte utilizzeremo 960gs nelle fasi di progettazione e codifica.
Una volta che voi ragazzi / ragazze avete finito, siete invitati a personalizzare il design tutto ciò che desiderate con i vostri font, colori, stili e trame! Ricorda, questo è solo un punto di partenza - sei il benvenuto a fare il matto che vuoi quando si tratta della personalità della tua versione del design.
Una breve descrizione del corso. Potremmo suddividerlo in modo diverso una volta che avremo raggiunto la fase di codifica, ma questo dovrebbe darvi un'idea di dove stiamo andando con questa serie:
Risorse utilizzate per questo progetto
Puoi utilizzare le tue risorse se lo desideri, ma ecco l'elenco completo delle immagini e delle icone che ho utilizzato nel tutorial:
Quindi, senza ulteriori indugi, iniziamo la fase di progettazione! Questa fase di progettazione è divisa in due parti. Oggi presenteremo il wireframe utilizzando il sistema 960gs e progetteremo la homepage. Nella seconda parte (la prossima settimana), progetteremo le altre pagine di supporto.
La cosa principale che vorrete tenere traccia di oggi è come utilizzeremo due diverse varianti della 960gs (un layout di 12 colonne e un layout di 16 colonne) insieme nello stesso file. Spiegherò di più su questo in seguito, ma tieni traccia di quando usiamo ogni layout diverso in quanto giocherà un ruolo importante nella fase di codifica più tardi!
Le quattro parti secondarie di oggi sono:
Mentre lavoriamo con il sistema a griglia 960, vai avanti e prendi il sistema a griglia 960 da qui (o prendilo da 960.gs se quel link dovesse mai andare giù).
All'interno della cartella principale (ciò che hai appena scaricato da http://960.gs), vai su "templates-> photoshop" e apri "960_grid_16_col.psd" in Photoshop. Rinominare questo file in "index.psd" e salvarlo in una nuova cartella a scelta, come mostrato nell'immagine A - 1a.
Ora che abbiamo l'installazione del file a 16 colonne, vogliamo anche importare il layer guida dal file a 12 colonne.
Apri il "960_grid_12_col.psd "in Photoshop (dalla stessa cartella hai aperto il file" 960_grid_16_col.psd ". Ora sblocca il layer" 12 Col Grid "e posizionalo, quindi trascinalo sul nostro nuovo creato index.psd file come mostrato nell'immagine A - 1b e A - 1c. Sblocca anche il layer e la posizione di "grid_16_col".
Forse ti stai chiedendo "Perché dovrei usare due file griglia diversi"Dato che grid_16 non può darci tre colonne uguali, dobbiamo usare anche grid_12: il sistema 960gs è effettivamente costruito per essere usato in questo modo, quindi non causerà alcun conflitto lungo la linea. utilizzare queste due griglie nella fase di conversione XHTML.
Seleziona i livelli "griglia_12_col" e "griglia_16_col", quindi seleziona "Allinea bordi superiori" e "Allinea centri orizzontali" dal pannello delle opzioni come mostrato nell'immagine A - 1d (mentre selezioni queste opzioni, assicurati di aver attivato anche il pulsante Sposta strumento (V)). E il tuo risultato finale dovrebbe apparire come un'immagine A - 1d.
È il momento di impostare le nostre linee guida e i nostri governanti per posizionare facilmente i nostri elementi. Vai a "Modifica-> Preferenze-> Unità e righelli" o premere "Ctrl + K" per chiamare il Preferenze finestra di dialogo. Quindi seleziona la scheda "Unità e righelli". Nel riquadro "Unità e righelli" unità sottosezione, imposta "pixel" per entrambe le opzioni "Righello" e "Tipo" come mostrato nell'immagine A - 2a.
Ora seleziona la scheda "Guide, griglia e fette" e nella sua Griglia sottosezione, imposta il valore "100" e l'unità su "pixel" per l'opzione "Gridline ogni". E impostare "10" per il campo "Suddivisioni" come mostrato nell'immagine A - 2b.
Ora premi "Ctrl + Alt + C" o vai a "Immagine-> Dimensione tela" per chiamare Dimensioni della tela finestra di dialogo e modifica le impostazioni come mostrato nell'immagine A - 3.
Dato che abbiamo aumentato l'altezza della tela, ora dobbiamo selezionare e ingrandire le nostre griglie in base all'altezza del nostro documento.
Seleziona entrambi i livelli della griglia e premi "Ctrl + T" o vai a "Modifica-> Trasformazione libera" e trascina le griglie come mostrato nell'immagine A - 3b. Ora blocca entrambi i livelli della griglia e nascondi il "grid_12_col layer" come mostrato nell'immagine A - 3c.
Di default abbiamo posizionato il guide di grid_16_col come siamo partiti dal grid_16_col.psd file. Non abbiamo guide per grid_12_col, ma in realtà non ne abbiamo bisogno poiché utilizzeremo griglia_12_col solo in rare circostanze.
Puoi anche controllare le griglie e le guide del documento premendo "Ctrl +" (Visualizza-> Mostra-> Griglia) "e" Ctrl +; (Visualizza-> Mostra-> Guide) "rispettivamente come mostrato nell'immagine A - 3d.
La nostra larghezza del documento è 1020px; Quando utilizziamo il sistema a griglia 960, dovremmo usare 940px per la larghezza del nostro contenuto. Stiamo andando a deviare solo un po 'dal modello 960 usando un padding sinistro e destro di 20px (40px in totale) per la sua colonna di contenuto. Quindi la larghezza del contenuto totale sarà 980 px. Seleziona il livello Sfondo e premi "Ctrl + Backspace" o "Ctrl + F5" o vai a "Modifica-> Riempi" per chiamare Riempire finestra di dialogo, quindi selezionare l'opzione "Colore?" da "Usa". E imposta il valore su "e7e7e7" come mostrato nell'immagine A - 4a
Se hai problemi a farlo nelle vecchie versioni di Photoshop come CS4, prima "rasterizza" il file sfondo strato quindi applicare lo sfondo utilizzando il passaggio precedente.
Ora seleziona lo "Strumento rettangolo arrotondato", imposta "Raggio" su "10 px" nel Opzioni pannello e imposta il colore "Primo piano" su "f1f1f1". Disegna un rettangolo arrotondato nella misura della tavola da disegno 980 x 150 px. Dai un nome a questo livello intestazione bg e posizionare questo livello all'interno di un gruppo di livelli e nominare quel gruppo Intestazione. E organizza la palette dei livelli come mostrato nell'immagine A - 4b. E mantieni sempre gli strati della griglia sopra tutti i livelli nella tavolozza dei livelli.
Per creare un gruppo, seleziona semplicemente i layer che vuoi impostare in un gruppo (tenendo premuto il tasto Ctrl o Shift) e quindi premi "Ctrl + G" o vai su "Livello-> Raggruppa livelli". E per cambiare il nome di un gruppo o di un livello basta fare doppio clic sul suo nome predefinito, quindi diventerà un campo di testo modificabile come mostrato nell'immagine A - 4b.
Seleziona il Converti strumento punto dalla tavolozza degli strumenti Strumento Penna gruppo. Quindi "Ctrl + clic" il intestazione bg rettangolo e fare clic sui quattro angoli superiori come mostrato nell'immagine A - 4c. E cancella due punti molto alti usando Elimina lo strumento Punto di ancoraggio a partire dal Strumento Penna gruppo come mostrato nell'immagine A - 4d.
Ora il nostro intestazione bg il rettangolo dovrebbe avere un'altezza di 140 px poiché abbiamo eliminato i due punti in alto. Selezionare intestazione gruppo di livelli e livello di sfondo, quindi selezionare Allinea i bordi superiori e Allinea centri orizzontali a partire dal Opzioni tavolozza come mostrato nell'immagine A - 4e.
Applicare uno stile di livello nel intestazione bg livello usando le impostazioni mostrate nell'immagine A - 4f. Spingi questo livello 1px in alto per nascondere il bagliore superiore.
Ora ancora una volta selezionare il Strumento rettangolo arrotondato e disegnare la regione del contenuto (misura 980 x 1400 px). Nominalo bg e posizionarlo all'interno di un gruppo di livelli denominato soddisfare e applica gli stessi stili di livello di intestazione bg. Disegna un altro rettangolo (misura 980 x 570 px) chiamalo footer bg e posizionarlo all'interno di un gruppo di livelli denominato footer e applica anche gli stessi stili di livello. Elimina i due punti in basso di footer bg rettangolo usando lo stesso metodo di intestazione bg. Mantieni una distanza di 20px tra ogni sezione (ad esempio intestazione, contenuto, piè di pagina). Metti tutto come mostrato nell'immagine A - 4g.
L'inquadratura dei cavi, quindi l'aggiunta di contenuti effettivi, potrebbe consumare il nostro prezioso tempo? Quindi andremo subito ad aggiungere alcuni contenuti "reali" per questo mockup nella prossima sezione.
Seleziona il Strumento Linea quindi traccia una linea con 1px weight e 940px in lunghezza (premi e tieni premuto il tasto "Shift" mentre disegni per una linea perfetta). Posizionalo come mostrato nell'immagine B - 1a. Dai un nome a questo livello hr, riempire il suo sfondo con il colore cdcdcd e uno stile di livello come mostrato nell'immagine B - 1a.
Ora seleziona il Strumento rettangolo e disegna un rettangolo di 200 x 24 px, applica gli stili di livello e posizionalo come mostrato nell'immagine B - 1b. Imposta il suo colore di sfondo su 000000 quindi riduci la sua opacità di riempimento a 10%.
Digita il testo del collegamento rapido sul lato sinistro del nostro campo di ricerca. Seleziona il Strumento di testo dal Paragrafo riquadro e selezionare Allinea a destra il testo. Quindi digitare alcuni nomi di menu e separarli con un "|" (barra verticale). Usa l'immagine B - 1c come linea guida. Imposta il suo colore del testo su ababab. Per il campo di ricerca etichetta tipo Ricerca con il colore ababab quindi selezionare Strumento di forma personalizzata e da Forma selezionare il menu Ricerca forma quindi disegna e posiziona la forma della lente come mostrato nell'immagine B - 1c. Imposta il colore della lente di ingrandimento su f1f1f1.
Non ho intenzione di guidarti come creare questo logo in quanto non è super importante che lo si duplica perfettamente; Spero che sarai in grado di creare facilmente il tuo logo da utilizzare. Inserisci il logo esistente (o il tuo) come mostrato nell'immagine B - 2a.
Seleziona il Strumento di testo, quindi abilitare il Allinea a destra il testo a partire dal PARAGRAFO riquadro. E digita alcuni nomi di menu usando le impostazioni come mostrato nell'immagine B - 2b.
Poiché la maggior parte delle tastiere non ha il tasto ">>", prima seleziona e copia questa freccia ("), quindi incollala in Photoshop e assegna un nome a questo livello freccia. Usa lo stesso colore del colore del menu e imposta Scala orizzontalmente a 150% e selezionare freccia strato (se non già) premere "Ctrl + T" quindi ruotarlo come mostrato nell'immagine B - 2c.
Disegna un rettangolo arrotondato con raggio di 4 px con qualsiasi misura. Quindi imposta il colore di riempimento su d5d5d5, applica gli stili di livello mostrati e digita alcuni nomi di sottomenu come mostrato nell'immagine B - 2d.
Disegna un rettangolo di 940 x 338 px, quindi applica gli stili di livello come mostrato nell'immagine C - 1a. Dai un nome a questo livello cursore bdr. Posto cursore bdr nel soddisfare area come mostrato nell'immagine C - 1b.
Posiziona e seleziona un'immagine sopra il cursore bdr strato quindi Ctrl + Click cursore bdr livello per ottenere l'area dell'immagine del cursore (immagine C - 1c). Quindi vai su "Seleziona-> Modifica-> Contratto" nella finestra di dialogo Contratto imposta 1px e premi "Invio". Ora premi "Shift + Ctrl + i" o vai su "Select-> Inverse" per invocare la selezione, quindi premi il tasto "Cancella" dalla tastiera. Ora dovremmo avere un cursore di immagine perfetto come nell'immagine C - 1d.
Seleziona il Strumento ellisse e disegna un cerchio di 16 x 16 px. Applica uno stile di livello come nell'immagine C - 1e e posizionali come mostrato nell'immagine C - 1e. Raggruppa quelle cerchie e assegna un nome al loro gruppo di livelli: radio.
In primo luogo, creeremo quattro articoli promozionali a colonna. Per creare un gruppo di quattro colonne, abilitare grid_16_col. Dividi queste 16 colonne con quattro e troverai quattro colonne di uguale larghezza. Compila le tue colonne con il contenuto come mostrato nell'immagine C - 2a. Quindi, posizionare una linea con le stesse impostazioni di intestazione'S hr posizionalo secondo l'immagine C - 2a.
Quando si creano più regole di linea come le risorse umane e le VR, è solitamente importante che abbiano lo stesso stile e colore di base.
Quelle icone sono da tutorial9. Puoi scaricarli da qui.
Questa è una sezione promozionale a tre colonne. Per questo, nascondiamo il grid_16_col e mostrare grid_12_col. Usa ogni quarta colonna come una singola colonna per posizionare gli oggetti promozionali. Per prima cosa disegna un rettangolo di 300 x 140 pixel e posizionalo come mostrato nell'immagine C - 2b. Ora posiziona un'immagine sopra questo livello, quindi seleziona e ritaglia le aree dell'immagine (che vengono estratte dall'area del rettangolo inferiore) come abbiamo fatto per la sezione del cursore dell'immagine. Ora applica gli stili di livello come mostrato nell'immagine C-2b.
Aggiungiamo un po 'di testo ora. Selezionare Strumento di testo e disegna un blocco di testo come mostrato nell'immagine C - 2c e digita una certa intestazione anche digitare una breve descrizione e un testo di collegamento come mostrato nell'immagine C - 2c.
Ora crea un gruppo con questi livelli con un nome di "promo". Quindi copia e incolla il gruppo "promo" due volte, quindi raggruppa tutti e tre i gruppi "promo" con un nome promo-col-3 e posizionali e i tuoi livelli come mostrato nell'immagine C - 2d.
Selezionare Strumento rettangolo disegna un rettangolo con 940 px di larghezza e imposta la sua altezza in base alle tue necessità. Riempi questo rettangolo con 000000 colori e riduci i suoi Riempire opacità a 5% e nominalo testi bg.
Ora seleziona il Strumento di forma personalizzata a partire dal Forma menu e selezionare il Forma a triangolo. Clicca sul Vector maschera miniatura del testi bg strato. Dovresti avere una selezione della forma ora.
Abilitare Aggiungi all'area della forma (+) dal Opzioni pannello e disegna un triangolo all'interno testi bg forma. Quindi con il Elimina punto di ancoraggio strumento cancella un lato del triangolo e posizionalo come mostrato nell'immagine C - 2e.
Successivamente, applica gli stili di livello mostrati, posizionali e inseriscili con del testo come mostrato nell'immagine C - 2f.
Seleziona il Strumento rettangolo disegna un rettangolo di 940 x 40 px e chiama questo livello bar. Metti questo rettangolo all'interno di un gruppo di livelli e etichetta questo gruppo progetti recenti. Imposta il colore di riempimento del rettangolo su FFFFFF, e impostare il suo Riempire opacità a 15% quindi applica gli stili di livello al rettangolo come mostrato nell'immagine C - 2g e posiziona e posiziona alcune immagini sotto di esso con le impostazioni e la posizione mostrate come nell'immagine C - 2h e la dimensione di queste immagini è 220 x 180 px.
Per le immagini, usa le stesse tecniche e gli stessi stili di livello che abbiamo usato per promo-col-3 sezioni. D'ora in poi, usa la stessa tecnica e gli stessi stili per progettare qualsiasi immagine per questo tema nella prima parte e nella seconda parte. Perché? Perché aiuterà il nostro design ad avere uno schema di stile unificato e coerente. D'ora in poi, farò riferimento solo a questi stili e tecniche usando "applica stili di immagine" invece di ripetere tutti questi passaggi.
Nel footer gruppo di livelli crea un gruppo di livelli e nominalo superiore. All'interno di questo gruppo posiziona i contenuti e li formatta come mostrato nell'immagine D - 1a. Per il righello verticale usa lo stesso colore e lo stesso stile del righello orizzontale hr. Infine posiziona i tuoi strati come mostrato nell'immagine D - 1b.
Scarica queste icone social da wefunction e twitter bird icon da webtreats.
Ora crea il contenuto principale del footer. Compila e posiziona il contenuto come mostrato nell'immagine D - 1c. Posiziona i tuoi strati come mostrato nell'immagine D - 1d.
Seleziona il Strumento di forma personalizzata, a partire dal Forma selezionare il menu Triangolo forma e disegna un triangolo che misura 10 x 10 px. Riempi questo con il colore cdcdcd e applica un tratto dallo stile di livello come mostrato nell'immagine D - 1e, e nominare questo livello freccia in alto. Infine aggiungi del testo e posiziona gli elementi come mostrato nell'immagine D - 1f.
Ora il tuo design dovrebbe assomigliare alla nostra demo:
Questo conclude la prima parte del nostro enorme tutorial! A questo punto, abbiamo configurato con successo il framework di base per il sito e progettato la nostra homepage. Nella prossima sessione di progettazione (in arrivo la prossima settimana), progetteremo le pagine di supporto. Infine, tracceremo il progetto e lo prepareremo per XHTML e infine per la codifica di WordPress!
Accentsconagua