Share
In questo tutorial, creerai un sito Web in stile organico con Adobe Illustrator. Questo tutorial mostra come creare grafica vettoriale illustrativa e applicarla ai layout di Web design. Iniziamo!
Un po 'di tempo fa ho scritto un tutorial intitolato Use Adobe Illustrator per creare un layout di un sito web pulito che è stato accolto con molta fanfara con opposizione altrettanto notevole. Quel tutorial è stato diretto alle persone appena iniziate in Illustrator. Alla fine è arrivato anche alla prima pagina di Digg.
Per sistemare le cose con il piede giusto lasciatemi prendere un momento per sottolineare l'ovvio ... questo design del sito può essere creato anche in Photoshop! Tuttavia, lo scopo di questo tutorial avanzato è spiegare come utilizzare Adobe Illustrator per progettare un sito Web. Consentitemi anche di distinguere il design dalla codifica front-end. Mentre ti mostrerò come progettare il sito Web in Illustrator, questo potrebbe essere portato avanti (con l'uso di standard XTHML / CSS) per rendere la funzione di progettazione.
Senza ulteriori indugi, ecco come creare un sito Web di paesaggi verdi in Adobe Illustrator.
È possibile trovare i file di origine nella directory denominata "origine" che è inclusa nei file scaricati. Potresti desiderare di esaminarli brevemente prima di iniziare.
Crea un nuovo documento con una larghezza di 1160 px e un'altezza a tua scelta. Imposta la Modalità colore su RGB. Puoi lasciare gli effetti raster a 300ppi alti poiché il nostro design non utilizza molto gli effetti raster.
Preferisco lavorare con un browser in background, così posso avere una migliore idea di come sarà il design finale una volta completato.
Le proporzioni delle schermate del browser non sono le stesse del documento 1160px, quindi dovrai semplicemente utilizzare lo Strumento selezione diretta (A) e fare clic e trascinare sull'area evidenziata in rosso. Quindi, utilizzando di nuovo lo strumento Selezione diretta (senza deselezionare nulla), fai clic su uno dei punti selezionati e trascina tutto sulla riga nera sulla destra, che è la dimensione del documento.
Un sito web con una larghezza di 960 px o inferiore funzionerà bene per la maggior parte dei visitatori di un sito web. Il nostro documento è impostato su larghezza 1160 px per compensare le persone con monitor più grandi che potrebbero allungare la finestra del browser più aperta. Lo spazio tra le guide verticali blu misura 960 px e rappresenta l'area in cui tutti i tuoi contenuti principali dovrebbero rimanere in mezzo. Qualunque cosa al di fuori di queste guide ha il potenziale di non essere visibile per alcuni visitatori.
Questo passaggio è essenziale per la creazione di un sito leggibile. Assicurati di sapere come appare il sito web quando viene visualizzato allo zoom al 100%. Non è necessario lavorare con lo zoom al 100%, ma è necessario essere a conoscenza di come appare il sito Web quando viene visualizzato alla dimensione effettiva (100%). Per cambiare lo zoom puoi fare clic nell'angolo in basso a sinistra della finestra del documento.
Il primo passo è creare le dolci colline. Disegna un'ellisse usando lo strumento Ellisse (L).
Duplica l'Ellisse e le sovrapponi.
Unisci le due forme nel Pathfinder usando l'opzione Sottrai dalla forma. Duplica la forma, rendila un po 'più piccola e spostala verso destra e verso il basso come mostrato sotto.
Seleziona entrambe le forme e vai su Oggetto> Miscela> Opzioni di fusione. Seleziona Passi specificati dal menu a discesa, inserisci un valore e fai clic su OK.
Vai a Oggetto> Miscela> Crea. Puoi regolare la miscela se non sei soddisfatto dei risultati andando su Oggetto> Miscela> Opzioni di fusione ...
Vai a Oggetto> Distorsione busta> Crea con Warp ... Seleziona Arco dal menu a discesa e cambia i cursori per creare un arco piacevole. Clicca OK quando hai finito.
Per manipolare ulteriormente le forme, è necessario estenderle andando su Oggetto> Espandi. Clicca OK.
Ora che la tua forma è espansa puoi farla sembrare più una collina. Usando lo strumento Penna (P) disegna un'altra forma che segue il contorno delle strisce.
Per prima cosa usa il Pathfinder per tagliare le aree delle colline che sono extra. Disporre le forme una sopra l'altra e dargli una sfumatura gradevole.
Posiziona la collina leggermente sovrapposta alla guida blu. Ciò suggerirà che le colline continuino a spostarsi più a sinistra quando il sito web viene visualizzato con una dimensione media del browser.
Fai altre colline usando la stessa tecnica. Prova a regolare la spaziatura e la dimensione delle forme e dell'arco per creare una piccola varietà.
Disegna una semplice forma ad arco che diventerà una strada sulle colline. Dagli un gradiente grigio troppo sottile.
Di seguito ho variato il capovolgimento orizzontale delle colline per dare una piccola variazione al pezzo. Notare inoltre che sia la collina sulla sinistra che la collina sulla destra si estendono appena oltre la guida blu.
Ora creeremo il cielo. In definitiva, questo è impostato in modo che quando viene codificato utilizzando XHTML / CSS il cielo si ripeterà indefinitamente su entrambi i lati sinistro e destro, indipendentemente dalla dimensione dello schermo del browser..
Crea un gradiente di colore chiaro e posizionalo dietro le colline.
A volte trovo più efficace mettere a punto una sfumatura andando a Modifica> Colori> Ricolora grafica ... Ora potrai selezionare ogni colore (cerchio superiore) e spostare il cursore per ottenere solo il colore che stai cercando (cerchio in basso). Le modifiche apportate sono visualizzabili in tempo reale, prima di premere OK, quindi assicurati che la finestra di dialogo Colore dinamico non copra l'oggetto che stai ricolorando.
Successivamente aggiungeremo piccoli dettagli alle colline e alle strade. Ho deciso di costruire alcune macchine a blocchi. Quando sono suddivisi nelle loro forme più semplici, le auto sono molto facili da creare. Inizia disegnando la forma base della tua auto. Usa questa forma come guida.
A seconda dell'aspetto che stai cercando, potresti non dover rendere tutto perfettamente simmetrico. Le macchine che sto creando sono un po 'estrose, quindi le forme hanno una qualità arbitraria. Quindi, disegnare sul tetto.
Disegna i cofani, il parabrezza e il paraurti.
Disegna il lato della macchina.
Disegna le finestre e un paio di ellissi per le ruote. Questo è tutto!
Duplica la macchina e cambia il colore per mescolarla. Il fatto che l'auto sia arcuata aiuta anche ad adattarsi bene alla strada ad arco.
Usando lo strumento Penna disegna una forma di uccello di base. Duplica e capovolgi la stessa forma per creare rapidamente un volume di uccelli.
Creeremo le nuvole nel cielo disegnando prima un rettangolo usando lo strumento Rettangolo (M).
Usando lo strumento Warp (Shift + R), deforma il rettangolo fino a farlo sembrare più simile a una nuvola. Potrebbe essere più semplice deformare il rettangolo in modo più completo se si regola la dimensione dell'area di curvatura. Realizzalo facendo doppio clic sullo strumento o tenendo premuto Opzione + Maiusc, quindi fai clic e trascina per modificare la dimensione.
Dopo aver terminato di creare la forma complessiva del cloud, potresti notare che deformare un oggetto tende a dargli un'abbondanza di punti aggiuntivi. Questi punti aggiuntivi rendono la forma più complessa di quanto abbiamo bisogno di essere. Semplifica il numero di punti della forma andando su Oggetto> Percorso> Semplifica. Regola la precisione della curva fino a quando la forma diventa più liscia.
Usando lo Strumento selezione diretta, puoi regolare punti e nodi per riflettere in modo più accurato qualsiasi forma tu stia cercando di creare.
Usa lo Strumento matita (N) per disegnare una forma di montagna casuale. A causa della natura continua del disegno con lo strumento matita, a volte è più difficile chiudere il percorso quando hai finito di disegnare la forma. Per chiudere facilmente un percorso, tieni premuto il tasto Opzione prima di terminare.
Gli oggetti che sono più lontani dallo spettatore non hanno bisogno di tanti dettagli. Crea edifici unendo rettangoli semplici usando il Pathfinder.
Archi l'edificio andando su Oggetto> Distorsione busta> Crea con Warp ... Seleziona Arco dal menu a discesa e inserisci i valori che ti stanno bene.
Ecco come dovrebbe essere la tua opera d'arte al momento. Come puoi vedere, man mano che l'oggetto si allontana diventano più leggeri. Usa questa conoscenza quando crei il tuo layout. Questo aiuta davvero a dare al design una qualità naturale.
Usando lo Strumento Stella disegna un triangolo. Per regolare il numero di punti che una stella ha utilizzato le frecce su e giù mentre si disegna la forma. Mentre stai disegnando la forma, una volta che ha 3 punti, tieni premuto il tasto Maiusc per rendere la base del triangolo perfettamente orizzontale.
Disegna un'ellisse e uniscila con il bordo inferiore del triangolo.
Dare alla forma una sfumatura verde.
Usa piccoli triangoli all'interno dell'area dell'albero principale per dargli un po 'più di dettaglio. Usa un rettangolo per la base dell'albero.
Duplica e modifica le dimensioni degli alberi per creare una foresta.
Regola l'opacità di un'ellisse per creare un'ombra stilizzata per ogni albero.
Ancora una volta, usando lo strumento Pencil disegna una forma organica per creare una roccia.
Deseleziona la forma della roccia principale e disegna altre forme anomale che diventeranno muschio e ombre. Usa il Pathfinder per dividere le forme e liberarti degli avanzi superflui.
Questo è ciò che dovresti lasciare.
Posiziona le rocce a caso in tutto il disegno e dona loro un'ombra come hai fatto per gli alberi.
Creare una forma foglia utilizzando lo strumento Penna.
Dare alle foglie variazioni di colore aggiungerà al suo realismo. Usando lo strumento Matita (N), disegna una forma simile alla mia in basso. Usa la tavolozza Pathfinder e dividi le foglie in sezioni. Elimina le forme rimanenti che non fanno parte della foglia.
Seleziona ciascuna sezione della foglia e dagli un leggero cambiamento di colore per simulare la luce che colpisce ogni parte della foglia.
Disegna un'ellisse molto stretta che diventerà il gambo della foglia.
Usa lo strumento Warp per modellare l'ellisse in qualcosa di più naturale.
Dare alle foglie e ai gambi un viraggio per rompere la monotonia delle foglie. Vai a Modifica> Colori> Regola bilanciamento colore ... quindi sposta i cursori a tuo piacimento.
Metti le foglie in un mazzo nell'angolo del disegno.
Aggiungi il titolo dei siti alla sezione superiore. Se il tuo titolo sarà scritto usando un font standard come Helvetica, hai praticamente finito con questo passo. Se il tuo titolo non usa un font di sistema, sentiti libero di migliorarlo con effetti come un'ombra esterna o un bordo smussato, ad esempio.
Questo è l'aspetto dell'intestazione completata del sito web. Osserva come viene mantenuto il contenuto principale tra le guide blu che misurano 960 px di larghezza.
Crea la sezione del contenuto principale del sito. Ho deciso di creare un tema amico della terra in modo che il blu fosse una scelta adatta per questo progetto.
Usando lo strumento matita crea una forma alta ghiacciolo.
Dai al ghiacciolo un bagliore interno per aggiungere profondità ad esso andando a Effetto> Stilizzazione> Bagliore interno ... Disegna simili forme di ghiacciolo più piccole e posizionale sotto la forma più grande. Non devi dare a queste altre forme bagliori interni.
Usa lo strumento Pencil per creare delle piccole pietre per aggiungere interesse alla cascata.
Useremo un pennello a dispersione per creare una massa di bolle. Disegna un'ellisse e trascinala nella tavolozza Pennelli. Seleziona Nuovo pennello di dispersione e premi OK. Se la palette dei pennelli non è visibile, vai a Finestra> Pennelli.
Imposta le dimensioni, la spaziatura e la dispersione in modo casuale e regola i cursori. È importante regolare entrambi i triangoli nero e grigio in modo che le forme siano abbastanza casuali.
Con lo strumento penna selezionato, fai clic sul pennello a dispersione appena creato e traccia una linea. Cambia il peso della linea per variare la dimensione dei cerchi o fai doppio clic sul pennello scatter per altre opzioni.
Per modificare ulteriormente i cerchi, espandi semplicemente la linea andando su Oggetto> Espandi aspetto.
Usa lo strumento Penna per disegnare alcune forme di pesce.
Posiziona la roccia che hai disegnato in precedenza nella parte inferiore della pagina per creare un piè di pagina.
Usa il pennello a dispersione che hai usato per le bolle per creare una trama per il piè di pagina. Per rendere la texture confinata all'interno dell'area del rettangolo del rettangolo semplicemente disegnare un rettangolo sopra la forma della bolla, selezionare le bolle e il rettangolo e premere Comando + 7 per creare una maschera. In alternativa, utilizzare le aree di forma Intersect nel Pathfinder per eliminare le bolle al di fuori dell'area del rettangolo.
La mia navigazione può essere facilmente riprodotta usando i CSS. Tienilo a mente quando crei anche il tuo. Qualsiasi testo che utilizza un carattere che non è un font di sistema dovrà essere un'immagine. Ora è consuetudine e preferibile usare i CSS ogni volta che è possibile e non le immagini.
Crea alcuni elementi che possono migliorare il layout utilizzando forme semplici.
Ho deciso che voglio che l'immagine sia inserita all'interno del testo. Per fare ciò seleziona l'oggetto che sarà inserito e vai su Oggetto> A capo automatico> Crea. Torna a Oggetto> A capo automatico> Opzioni a capo di testo per regolare lo spazio tra gli elementi e il testo.
Rendi i campi di input del modulo usando un rettangolo, arrotondando gli angoli, dandogli un tratto esterno e infine un riempimento sfumato sottile. Tutti questi effetti sono facilmente modificabili facendo doppio clic su ciascun effetto nella palette Aspetto.
Crea un pulsante disegnando nuovamente un rettangolo, dando agli angoli arrotondati una leggera sfumatura e un'ombra esterna.
Aggiungi altri elementi per completare il tuo design.
Questo è il design finale. Notare come tutte le informazioni critiche sono mantenute all'interno delle guide blu. Il piè di pagina ripeterà anche usando CSS.
Hai appena imparato a creare un sito Web di paesaggi verdi in Adobe Illustrator. I design di siti Web in stile vettoriale possono impostare un sito a parte conferendogli un aspetto unico. Inizia con il tuo design e guarda cosa puoi inventare! L'immagine finale è sotto o puoi vedere una versione più grande qui.
Accentsconagua