Preparare un esempio per il Web
16 giugno 2008 da · chriscoyier 3 Commenti 
Illustrazione è un bel trend nel web design. Si adatta bene il mezzo. Grandi illustratori, però, spesso non pensare in termini di rete quando fanno le loro illustrazioni. Date un'occhiata a questo cielo molto bello / illustrazione cityscape collina ho trovato su Shutterstock:
Credo che questa figura avrebbe fatto un'ottima base per un web design, ma chiaramente non è preparato per un tale compito out-of-the-box. Consente di fare un po 'di manipolazione e prepararla al web.
Get it in Photoshop
E 'fantastico che è l'illustrazione vettoriale. Questo significa che siamo in grado di rendere qualsiasi dimensione dobbiamo senza alcuna perdita di qualità. Il nostro obiettivo sarà quello di rendere questa scena sedere in alto al centro del browser, in modo da Let's Get It in Photoshop al massimo con l'area del contenuto principale del nostro sito. Dire, 960px. Fai un nuovo documento di Photoshop 960px larga e più alta di quello che deve essere per adattarsi.
Apri il tuo esempio in Adobe Illustrator e Seleziona tutto. Copiare e incollare nel vostro documento di Photoshop. Assicurati di incollarlo come oggetto avanzato. Ciò consentirà che conserva la natura vettoriale, che consente di lusso senza perdere qualità. Essa può venire troppo piccolo. Non preoccuparti lì, solo che fino a dimensioni adatte al tuo documento 960px di larghezza.
Estendere il Edges
Le finestre del browser non sono fisse ambienti di larghezza, come documenti di Photoshop sono. Abbiamo bisogno di preparare i nostri illustrazione di un aspetto piacevole, quando la finestra del browser è più ampio di 960px la nostra base. Andiamo avanti e di aumentare la larghezza tela del nostro documento di 1280px in modo da avere un certo margine su cui lavorare.
Il nostro obiettivo è quello di avere il bordo di questo fine illustrazione in qualcosa che sarà ripetibile in senso orizzontale. La persona taglio di tale documento sarà bisogno di qualcosa come questo per rendere questo lavoro di progettazione per il web. In ultima analisi, questa fetta sarà lo sfondo per l'elemento <body> della pagina web, con i nostri principali illustrazione seduta sulla parte superiore.
Prendo un piccolo frammento del bordo destro di questa illustrazione e di "galleggiare" it up su di esso il proprio nuovo livello (CTRL + J).
Ora siamo in grado di Trasformazione libera questa fetta nuovo piccolo (Command-T) ed espandere orizzontalmente fuori entrambi i lati del documento. Perché le pendenze sono stati creati Nizza e verticale, questa estensione funziona bene dal lato destro. Il lato destro, però, sembra troppo brusco, con la collina, Bush e la strada si interrompe all'improvviso.
Oscurando la transizione
Piuttosto che fare qualcosa di troppo di fantasia e tenta di unire questi due livelli insieme, let's oscura che la transizione dura mettendo un oggetto in primo piano, direttamente sopra top. Questa figura potrebbe fare con un po 'di profondità in più comunque.
Questa cassetta postale vettore farà bene.
Eliminare tutto tranne la cassetta postale per sé e incollarlo nella figura come oggetto avanzato, proprio come abbiamo messo l'illustrazione originale. Un po 'di ridimensionamento e posizionamento e abbiamo l'elemento ideale per oscurare la transizione in sfondi.
La principale zona contenuto
Il nostro esempio sta andando a fare per un colpo di testa bella e lo sfondo, ma per il contenuto effettivo del sito, avremo bisogno di un qualche tipo di grosso blocco di bianco. Lascia cadere un diritto bianco rettangolo arrotondato in cima, con un po 'di ombra per farlo fuori.
Compilando il Bottom
Con il lato orizzontale ora ben occultata, siamo in grado di compilare il colore sul resto del fondo del mockup sito web. Campionare un colore (con lo strumento Contagocce) dal fondo modo più pixel di illustrazione e poi riempire i nostri bottom-strato più vuota con questo nuovo colore.
Questa zona contenuto principale sta per essere un gioco da ragazzi per qualsiasi web designer decente per affettare.
Final Touches
Lanciare un bel po messaggio di benvenuto in alto nel cielo e abbiamo noi stessi un mockup nice looking illustrato web. Perché abbiamo pensieroso preso cura di entrambe le espandibilità orizzontale e verticale, l'espandibilità, questa illustrazione è perfetto per la conversione in markup Web reale.
Rimanete sintonizzati su CSS-Tricks dove sarà presente la conversione in una pagina web reale delle prossime settimane.
Perché l'uso di Photoshop per questo compito a tutti?
Perché non usare photoshop? Photoshop è un ottimo strumento per le immagini per il web, non per i vettori di come questa immagine, ma un bene per i layout (idea tutorial).
Grazie per il suggerimento! Photoshop is magic!