Share
Cosa starai creandoIn questo tutorial ti mostrerò come creare un layout blog semplice ed elegante in Photoshop. Useremo un'immagine forte above the fold (dovunque sia) con una messaggistica semplice, seguita da una tipografia molto pulita ed elegante.
Per poter seguire, avrai bisogno dei seguenti beni (disponibili gratuitamente):
Inizia creando un nuovo documento (File> Nuovo ... ) usando le impostazioni mostrate sotto. Sei libero di usare una tela di qualsiasi dimensione tu preferisca - il web non ha una larghezza fissa, dopotutto.
Assicurati che la risoluzione sia impostata su 72 pixel / polliceImpostiamo alcune guide in modo che il nostro layout abbia spazio sufficiente e un aspetto equilibrato. Non utilizzo sempre una griglia, ma l'impostazione di alcune linee guida garantirà l'accuratezza e contribuirà a definire la larghezza del nostro sito web. Vai a Visualizza> Nuova guida ... e impostare alcune linee guida. Di solito scelgo 1000px come larghezza del sito web e aggiungo alcune linee guida dagli angoli in modo che abbia spazio per respirare.
Nota: Linee guida utilizzate per questo tutorial: verticale a 100px, 285px, 445px, 600px, 605px, 765px, 925px e 1100px.
Mancia: È anche possibile utilizzare il plug-in GuideGuide Photoshop per rendere questo processo ancora più rapido.
Attenersi a questa etichetta di Photoshop manterrà le cose organizzate e facili da navigare o modificare. Creiamo tre gruppi di livelli denominati Intestazione, Contenuto, Condivisione e Piè di pagina. Per creare gruppi vai a Livello> Nuovo> Gruppo ... e dare a ciascuno un titolo come detto. Per creare rapidamente un gruppo, fai clic sull'icona.
L'area di intestazione gioca un ruolo molto importante nel coinvolgere gli utenti e assicurare che il visitatore rimanga sul sito. Per questo blog userò uno scatto accogliente di un caffè a Londra. Quando scegli un'immagine per il tuo progetto, assicurati che invii il messaggio giusto ai visitatori e soddisfi le esigenze del cliente.
Facciamo prima creare uno sfondo del blog. Dentro il Intestazione gruppo disegna qualsiasi forma di rettangolo di colore usando il Strumento rettangolo (U). Nel mio caso ho disegnato rettangoli di dimensioni 1200x600px e l'ho posizionato nella parte superiore del documento.
Ora scarica la foto del Cafe, trascinala nel documento di Photoshop e posizionala sopra il livello del rettangolo. Rinominare il livello dell'immagine in qualcosa che puoi riconoscere in seguito, nel mio caso ho usato IMG. Dopo di ciò, tieni premuto il tasto alt tasto e mouse sul livello foto fino a quando non vedi una piccola freccia rivolta verso il basso, quindi rilasciala. Hai appena creato un Maschera di ritaglio.
Ora colpisci T CMD + e ridimensiona la foto in base alle tue esigenze.
Mancia: tenere premuto Cambio chiave per trasformare proporzionalmente.
Ora abbiamo bisogno di rendere il nostro blog più oscuro e più neutro, quindi quando mettiamo la copia in cima è leggibile. Facciamo un po 'sfocare la nostra immagine andando a Filtro> Sfocatura> Sfocatura gaussiana ... e impostazione Raggio a 3 pixel. L'uso di un leggero effetto sfocatura aiuta ad eliminare i dettagli nitidi dell'immagine e consente agli occhi dei visitatori di concentrarsi su elementi più importanti, nel nostro caso il messaggio del blog.
Creiamo un nuovo livello sopra l'immagine inserita e rendiamolo a Maschera di ritaglio come mostrato nel passaggio precedente. Quindi riempilo con una sfumatura nera e riduci l'opacità al 50% in modo che la nostra immagine diventi più scura, ma è comunque abbastanza visibile.
È ora di aggiungere un logo per il nostro blog. Crea un nuovo gruppo all'interno del Intestazione raggruppa e chiamalo Logo. Per questo tutorial userò un semplice logo basato sulla tipografia. Scegli il Strumento tipo orizzontale (T), Bentham 30px dimensione carattere e scrivi il titolo del tuo blog. Si noti che la spaziatura delle lettere è più grande del solito, creando un aspetto più elegante e rendendo più semplice la lettura dei caratteri maiuscoli.
Per aggiungere enfasi facciamo un confine intorno ad esso. Scegli un Strumento rettangolo (U) e disegna un rettangolo leggermente più grande del testo.
Ora fai clic con il pulsante destro del mouse sul livello e seleziona Opzioni di fusione… applica le seguenti opzioni di tratto.
Infine imposta il livello rettangolare Riempire a 0% e hai un bel colpo 1px attorno al tuo logo fittizio.
Questo è il momento in cui aggiungiamo un messaggio del blog che riassume in cosa consiste questo blog. Scegli il Tipo orizzontale (T), 60px taglia Bentham font e scrivi un breve messaggio per i tuoi lettori. Assicurati che l'altezza della linea sia sufficientemente ampia in modo che il testo abbia spazio per respirare e abbia un aspetto equilibrato.
Per la e commerciale che ho usato Baskerville (Corsivo) come è più ornato. Per il messaggio secondario che ho usato PT Serif (Corsivo) carattere impostato su 20px in misura. Assicurati di posizionare il messaggio verticalmente nel mezzo dell'immagine dell'intestazione in modo che appaia equilibrato e lucido.
Riduci al minimo il Intestazione raggruppa facendo clic sulla piccola freccia accanto al titolo del gruppo e apri il gruppo di contenuti in modo che tutti i livelli siano organizzati e facili da navigare.
Iniziamo a creare il nostro post sul blog. Scegli il Strumento di tipo orizzontale (T) e, usando un colore scuro e un carattere abbastanza grande, scrivi il titolo del tuo post. Cerca di evitare l'uso del nero assoluto e scegli un colore più sottile, come il grigio scuro, in modo che non appaia troppo rigido. Per questo tutorial sto usando il grigio scuro # 444444 42px taglia Bentham font in maiuscolo. Posiziona l'intestazione nel mezzo del documento e lascia un bel po 'di spazio in cima in modo da attirare l'attenzione dei lettori sul titolo.
Riduci le dimensioni del carattere in giro 14px e inserisci la data del post del blog, autore, categoria, tag, posizione o qualsiasi cosa desideri, in modo che dia ai tuoi lettori una panoramica della pubblicazione. Nel mio caso ho messo la data e la posizione della voce in maiuscolo per rimanere fedele al titolo.
Un blog senza contenuti reali non vale niente, non importa quanto sia buono il design. Usando il Strumento di tipo orizzontale (T) tieni premuto il pulsante del mouse e crea un contenitore tra la seconda e penultima guida. La larghezza del contenitore tra queste linee guida dovrebbe essere 640px e l'altezza dipenderà dalla lunghezza del tuo post.
Imposta il colore dello sfondo su qualcosa di più leggero e facile per gli occhi. Nel mio caso uso il grigio più chiaro # 6f6f6f 18px PT Serif con un'altezza di linea impostata su 34px. L'altezza della linea dovrebbe essere spesso intorno 1.5 - 1.9 a seconda dello stile del carattere tipografico. Puoi facilmente calcolare l'altezza della linea moltiplicando la dimensione del font che usi per 1.9, ad esempio nel mio caso che uso 18px dimensione del carattere, quindi: 18 * 1.8 = 34.2.
Come designer devi sempre pensare alla progettazione di un ambiente dinamico, quindi includi stili per collegamenti ipertestuali o stati di passaggio del mouse per i pulsanti. Credimi, gli sviluppatori ti ringrazieranno per questo. Scegli un colore sottile che si distingua nella tua copia principale, evidenzia una delle frasi che si collegheranno altrove e cambiano colore. Nel mio caso sto usando il rosso pallido # e3514e.
Abbiamo finito con la copia principale per il post del blog e ora creeremo alcuni pulsanti di condivisione in modo che i lettori possano condividere i contenuti con la loro rete di scelta.
Riduci al minimo il Soddisfare raggruppa e apri compartecipazione gruppo in cui posizioneremo i nostri pulsanti. Scegli un Strumento rettangolo (U) e disegna un rettangolo tra la seconda e penultima guida come copia principale. Nel mio caso lo è 640x54px. Quindi fare clic con il tasto destro, selezionare Opzioni di fusione… e applicare le seguenti opzioni.
colore usato # 838383Infine, riduci il livello Riempire opzione a 0% e avrai un contenitore di contorni per le tue reti di social media.
Scegli il Strumento linea (U) e impostare la larghezza a 1px, dopo di che disegna tre linee verticali che dividono il nostro contenitore in quattro pezzi uguali. Le linee guida aiuteranno a posizionarle. Assicurati che le linee siano dello stesso colore del contorno del contenitore.
Mancia: tenere premuto Cambio chiave per assicurare che le linee funzionino perfettamente diritte.
Mancia: clic CMD +; per nascondere / mostrare le linee guida.
Infine scegli il Strumento di tipo orizzontale (T) e scrivere una copia, lasciando che la gente sappia che è per la condivisione. Nel mio caso io uso semplice CONDIVIDERE:, dopo di che ho scritto i nomi dei social network disponibili per la condivisione.
Inserire i nomi all'interno del contenitore e centrarli per trovarsi nel mezzo dei blocchi separati.
Grande! Condivisione sociale è fatto, tutto ciò che serve per finire è quello di creare un mouse sopra lo stato per il pulsante. Scegli semplicemente il Strumento rettangolo (U) e, usando lo stesso colore usato per il collegamento, disegna un rettangolo sotto uno dei nomi dei social network che coprono lo spazio diviso.
È finalmente giunto il momento di avvolgere il design del nostro blog mettendo un semplice piè di pagina con le informazioni sul copyright.
Riduci al minimo il compartecipazione raggruppa e apri il footer gruppo. Dopo di che disegnare un semplice rettangolo in basso che attraversa orizzontalmente il documento e lasciare abbastanza spazio in alto. Ho usato il grigio # 555555 e intorno 110px spazio bianco sopra la forma.
Infine scegli il Strumento di tipo orizzontale (T) e scrivere una semplice copia del copyright. Nel mio caso ho usato PT Serif 14px bianca #FFFFFF. Posiziona la tua copia nel centro del rettangolo e allinearla verticalmente.
E abbiamo finito con il layout. Congratulazioni!In questo tutorial abbiamo analizzato il processo di creazione di un layout blog molto semplice ed elegante. Ha una forte intestazione basata su immagini above the fold e usa un approccio tipografico al contenuto del blog.
Dai un'occhiata a Crea e tema un blog con Evernote Powered con Postach.io dove vedremo come costruire questo layout del blog per il browser, integrando con una piattaforma di blogging per una buona misura!
Se avete domande o pensieri, fatecelo sapere nell'area dei commenti!
Accentsconagua