Suggerimenti per lavorare con Illustrator. Per i web designer che preferiscono Photoshop

Suggerimenti per lavorare con Illustrator. Ecco un'idea pazzesca: progetta il tuo prossimo progetto web in Illustrator. Se sei un web designer primario, è probabile che non risponderai molto bene a questo suggerimento. Illustrator non può fare tutto ciò che Photoshop può fare, giusto?

Non esattamente.

Sebbene Photoshop è diventato lo strumento di fatto web design, Illustrator è più che in grado di soddisfare le tue esigenze. Grazie ai suoi strumenti di layout, è spesso un programma migliore e più adatto per il web design.

Poiché la maggior parte dei professionisti del web design non vuole girovagare per Illustrator in cerca di prove, ho compilato un elenco di funzionalità relative al web che devi conoscere per iniziare a sperimentare con il web design in Illustrator.

Provane alcuni e ti garantisco che inizierai a utilizzare Illustrator come strumento standard nel tuo flusso di lavoro di progettazione web.

1. Per prima cosa: imposta tutte le unità su Pixel. Suggerimenti per lavorare con Illustrator

Per impostazione predefinita, Illustrator utilizza la metrica unità per dimensioni di oggetti e punti per il testo. Queste sono ottime impostazioni per la maggior parte delle situazioni di progettazione, ma per web design probabilmente vorrai vedere pixel ovunque. Quindi, prima di iniziare a lavorare su qualsiasi altra cosa, assicurati che le tue unità siano impostate correttamente.

Per impostare le unità sui pixel:

1. Apri nel menu Modifica
2. Selezionare le unità di misura dal sottomenu Impostazioni.
3. Imposta tutte le opzioni su "pixel"

2. Creare documenti utilizzando un profilo documento Web.

 

Quando vuoi iniziare a lavorare su un nuovo progetto, scorri facilmente la finestra Nuovo documento e salta alcuni dettagli importanti, come dire a Illustrator che prevedi di lavorare su un progetto web in modo da non utilizzare i colori CMYK. e bordi sfocati dell'oggetto. Ricorda solo di selezionare l'impostazione del profilo Internet nella finestra Nuovo documento e starai bene.

3. Abilita l'allineamento della griglia di pixel per gli oggetti. Suggerimenti per lavorare con Illustrator

Questa funzione ti salva la vita se hai mai avuto problemi con i bordi delle forme sfocate in Photoshop.

Allineamento griglia pixel regolerà i segmenti diritti orizzontali e verticali di un oggetto per adattarli perfettamente alla griglia di pixel, mantenendo lisci i segmenti curvi e inclinati. Il risultato sono forme nitide e perfette al pixel, qualcosa che sicuramente desideri nel web design.

Il pulsante in alto ha l'allineamento della griglia di pixel abilitato, che si traduce sempre in bordi nitidi.

Per abilitare l'allineamento della griglia di pixel a livello di oggetto:

1. Seleziona oggetto
2. Apri il pannello Trasforma (Finestra > Trasforma).
3. Seleziona la casella di controllo "Allinea alla griglia pixel" nella parte inferiore del pannello (se non la vedi, fai doppio clic sul pannello per visualizzare le opzioni)

Nota. L'allineamento della griglia pixel è abilitato per impostazione predefinita per tutti i nuovi oggetti creati utilizzando il profilo del documento Web. Tuttavia, se incolli oggetti da altri file Illustrator, dovrai regolare manualmente l'allineamento dei pixel per essi. Suggerimenti per lavorare con Illustrator

4. Attiva l'anteprima pixel.

La funzione Anteprima pixel farà sì che Illustrator si comporti proprio come Photoshop quando ridimensiona l'immagine oltre il 100%: invece di ottenere vettori perfetti ogni volta, vedrai effettivamente i pixel come se stessi lavorando con un'immagine raster.

L'attivazione dell'anteprima pixel ti farà sentire come se fossi in Photoshop.

Pensa a quanto è bello: hai tutta la potenza della grafica vettoriale a portata di mano e puoi vedere come appare il risultato a livello di pixel.

Pulito, non è vero?

Abilita o disabilita l'anteprima dei pixel

1. Apri il menu Visualizza
2. Seleziona Visualizzazione pixel.

5. Utilizzare le finestre Grafica. Suggerimenti per lavorare con Illustrator

Immagina che due videocamere siano puntate sul tuo progetto.

Una fotocamera ha un livello di zoom normale e mostra il 100% del tuo lavoro. L'altra fotocamera ha un livello di zoom del 400% ed è puntata su un'icona specifica su cui stavi lavorando.

Come un chirurgo, usi la fotocamera con zoom per apportare piccole modifiche a livello di pixel all'icona, dando di tanto in tanto un'occhiata alla fotocamera con zoom al 100% per vedere come appare effettivamente nelle sue dimensioni reali.

Le finestre di copertina sono ottime quando devi lavorare con piccoli elementi come le icone: non devi ingrandire e rimpicciolire costantemente per controllare come appare il tutto.

Queste sono finestre di grafica: ti consentono di visualizzare il tuo disegno simultaneamente con diversi livelli di zoom, impostazioni di colore e altre variazioni. Questo è molto utile per il web design, soprattutto quando lavori con dettagli a livello di pixel.

Per utilizzare le finestre Grafica:

1. Apri il menu Finestra, quindi seleziona Nuova finestra. Illustrator creerà una nuova scheda con lo stesso documento in vista.
2. Vai di nuovo al menu Finestra, scegli Disponi > Sposta tutto nella finestra. Questo ti permetterà di cambiare dimensione e posizionamento delle finestre uno accanto all'altro come meglio credi.
3. Sperimenta diversi livelli di zoom nelle finestre e inizia ad apportare alcune modifiche per vedere come funziona. Suggerimenti per lavorare con Illustrator

6. Utilizza i simboli per creare rapidamente pulsanti, icone e altro.

Quante volte hai creato lo stesso (o quasi lo stesso) pulsante, icona o widget in Photoshop? Se ti piace il web design, probabilmente lo fai ogni giorno.

Illustrator può aiutarti a risparmiare tempo ed evitare questo lavoro ripetitivo con i simboli.

In sostanza, i simboli sono un insieme infinito di già pronti elementi di progettazione, che può essere aggiunto all'opera semplicemente trascinandolo e quindi modificato secondo necessità. Questo è l'ideale per pulsanti, icone e altri oggetti standard che non devono essere creati da zero.

Ma c'è un'altra ragione per cui i simboli sono potenti, ed è chiamata istanziazione.

I simboli non sono solo convenienti, ma facilitano anche l'aggiornamento degli elementi di progettazione ripetuti.

 

In sostanza, ogni volta che apporti modifiche al simbolo originale, tali modifiche si riflettono immediatamente in tutte le istanze del simbolo presenti nel tuo disegno. Hai bisogno di pulsanti più grandi sul tuo sito web? Basta cambiare il simbolo. Vuoi che i campi del modulo abbiano un aspetto diverso in ogni pagina? Basta cambiare il simbolo. Hai capito.

Suggerimento: se non vuoi che ciò accada a un'istanza specifica del simbolo as, fai clic con il pulsante destro del mouse sull'oggetto nell'illustrazione e seleziona Interrompi riferimento simbolo. Ciò lo escluderà dagli aggiornamenti automatici.

Ecco un buon video che spiega come utilizzare e manipolare i simboli:

Utilizzo dei simboli in Adobe Illustrator di AdobeTV .

Per utilizzare un simbolo esistente:

1. Apri il pannello Simboli dal menu Finestra.
2. Trascina il simbolo selezionato sul tuo lavoro

Crea un nuovo simbolo:

1. Crea un'immagine simbolo
2. Apri il pannello Simboli dal menu Finestra.
3. Trascina un'illustrazione sul pannello
4. Fare clic su OK nella finestra di dialogo per confermare.

Per modificare un simbolo:

1. Apri il pannello Simboli dal menu Finestra.
2. Fare doppio clic su un simbolo per accedere alla modalità di modifica.
3. Al termine, fare doppio clic in un punto qualsiasi all'esterno dell'immagine del simbolo per uscire dalla modalità di modifica.

7. Espandi facilmente gli oggetti con il ridimensionamento a 9 segmenti. Suggerimenti per lavorare con Illustrator

Si tratta di una funzionalità di simbologia avanzata che consente di definire quali parti di un oggetto vengono allungate durante il ridimensionamento e quali rimangono invariate.

A sinistra: un esempio di pulsante allungato con e senza l'impostazione dello zoom a 9 segmenti. A destra: l'impostazione di ridimensionamento a 9 segmenti prevede lo spostamento di 4 guide che indicano a Illustrator quali parti dell'oggetto sono protette e quali parti possono essere ridimensionate.

 

Un esempio pratico è un pulsante con gli angoli arrotondati: se vuoi allungarlo, non puoi semplicemente allungarlo orizzontalmente perché ciò distorcerebbe l'intero oggetto. Dovrai invece spostare manualmente i punti della forma. Con il ridimensionamento a 9 segmenti, l'allungamento funziona come previsto. Suggerimenti per lavorare con Illustrator

Per capire davvero come funziona, ascolta questo fantastico tutorial video di Adobe TV per aggiornarti rapidamente:

Utilizzo del ridimensionamento a 9 segmenti con simboli di AdobeTV .

8. Angoli arrotondati ovunque!

Puoi creare un rettangolo arrotondato in Photoshop, ma Illustrator ti consente di applicare un effetto angolo arrotondato non distruttivo a quasi tutti gli oggetti. Cos'è l'effetto non distruttivo? Ciò significa che puoi attivarlo, disattivarlo o modificarne le impostazioni senza influire sull'oggetto originale sottostante.

Puoi applicare l'effetto degli angoli arrotondati a quasi tutti i tipi di oggetto e regolarlo secondo necessità. Suggerimenti per lavorare con Illustrator

Per applicare l'effetto angolo arrotondato:

1. Crea un rettangolo o qualsiasi altro oggetto con angoli acuti
2. Dal menu Effetti, scegli Stilizzazione > Angoli arrotondati.
3. Inserisci un raggio d'angolo e fai clic su Anteprima per vedere come appare.
4. Fare clic su OK per applicare l'effetto.

Per modificare l'effetto degli angoli arrotondati:

1. Seleziona un oggetto con angoli arrotondati
2. Apri il pannello Aspetto dal menu Finestra.
3. Trova l'effetto Angoli arrotondati e fai doppio clic su di esso per modificarne le impostazioni oppure fai clic sull'icona a forma di occhio per attivarlo o disattivarlo.

9. Creazione di un riempimento rapido con un motivo raster. Suggerimenti per lavorare con Illustrator

I motivi di sfondo sottili sono un grande successo nel web design, ma molti designer pensano che non siano facili da applicare in Illustrator.

Devo ammettere che non è intuitivo, ma la soluzione è semplice.

Per creare un modello bitmap:

1. Posiziona un'immagine del modello sul tuo pezzo
2. Fai clic su "Inserisci" sulla barra multifunzione in alto (importante: non funzionerà senza di essa!)
3. Trascina un motivo nella palette Campioni
4. Applica un campione a qualsiasi oggetto per riempirlo con un motivo

10. Posizionamento automatico del testo attorno a immagini e oggetti.

Photoshop è noto per le sue funzionalità di modifica del testo molto basilari. Se vuoi avvolgere il testo attorno a un'immagine, devi creare due o tre cornici di testo diverse e simulare l'effetto. Suggerimenti per lavorare con Illustrator

Fortunatamente, Illustrator ti ha coperto.

Per avvolgere il testo attorno a un'immagine:

1. Seleziona l'immagine o l'oggetto attorno al quale desideri disporre il testo
2. Apri il menu Oggetto, scegli Testo a capo > Nuovo.
3. Per impostare la distanza di avvolgimento del testo, apri nuovamente il menu Contorna testo e seleziona Opzioni Contorna testo.
4. Sposta l'immagine sul testo per vedere l'effetto di avvolgimento

11. Crea ricchi effetti visivi con le impostazioni dell'aspetto degli oggetti. Suggerimenti per lavorare con Illustrator

In Illustrator, il pannello Aspetto di un oggetto funziona in modo molto simile agli effetti di livello in Photoshop: puoi aggiungere più riempimenti e tratti a un oggetto, quindi giocare con le modalità di trasferimento, l'opacità e gli effetti per ottenere risultati interessanti.

Questo testo è solo un singolo oggetto vettoriale, stilizzato utilizzando il pannello Aspetto ed effetti.

Il parco giochi è piuttosto ampio: dalle ombre esterne, alla sfocatura e al bagliore, alle texture, alla distorsione e al 3D. In questo modo puoi ricreare la maggior parte degli effetti di Photoshop mentre lavori ancora con la grafica vettoriale.

Il pannello Aspetto è potente e divertente: ti incoraggio a provarlo subito o a guardare il tutorial qui sotto per capire come funziona:

Padroneggiare il pannello Aspetto di AdobeTV .

Sei pronto per iniziare a sperimentare con Illustrator?

Creare siti web e interfacce utente utilizzando Photoshop è ormai diventata la norma e la maggior parte dei designer è soddisfatta di questa soluzione. Suggerimenti per lavorare con Illustrator

Ma solo perché Photoshop è diventato così diffuso non significa che Illustrator non abbia nulla da offrire, anzi. Con strumenti come l'allineamento della griglia dei pixel, la disposizione del testo e l'aspetto degli oggetti, è un argomento valido.

Combinato con potente strumenti di impaginazione e grafica vettoriale, suddivisione ed esportazione di immagini, Illustrator è sicuramente una scelta ovvia per i web designer che desiderano sviluppare rapidamente siti Web.