Novità per i web designer in Illustrator CC
Il 6 maggio Adobe ha annunciato i suoi ultimi aggiornamenti al suo software creativo. Alcuni di questi aggiornamenti hanno grandi implicazioni sul modo in cui gli utenti lavorano con i loro strumenti. In questo articolo, vorrei rivedere ciò che Adobe ha cambiato in Illustrator e in particolare in che modo influisce sui web designer.
Ovviamente ci sono diverse nuove funzionalità, come librerie AutoCAD, sovrastampa bianca, scambio proxy del riempimento e del tratto per testo, generazione automatica degli angoli, supporto indic, file di pacchetto, immagini non memorizzate, posto file multiplo, strumenti di tipo tattile, strumenti di trasformazione gratuiti e immagini in spazzole. Se sei un drogato di Illustrator, queste sono tutte funzioni utili, ma ciò su cui voglio concentrarti specificamente sono i miglioramenti fondamentali che aiuteranno chiunque a creare illustrazioni per la consegna sullo schermo.
Supporto HiDPI
Con l'avvento di display ad alta risoluzione (come MacBook Pro con display Retina), Illustrator CS6 e precedenti apparivano sfocati. Le illustrazioni e le icone sembravano pixelate e il testo sembrava anti-alias. La vera natura di Illustrator è quella di fornire immagini ricche e brillanti, quindi questa esperienza è stata meno che desiderabile. Fortunatamente Adobe ha migliorato Illustrator CC per sfruttare questi display ad alta risoluzione. Le illustrazioni avranno un aspetto migliore, il testo apparirà nitido, gli elementi dell'interfaccia utente (icone, cursori, ecc.) Appariranno più agevoli. Hanno anche apportato alcuni miglioramenti al processo di rendering. Ora sfrutta le macchine multi-core e utilizza il rendering filettato per il rendering delle opere d'arte. Dovresti vedere alcuni miglioramenti in attività come zoom, panning, copia incolla, trascina e rilascia, ecc.
Miglioramenti delle guide
Le guide sono ampiamente utilizzate nella pianificazione e nella stesura delle pagine. Creare mock-up in Illustrator usando le guide ti consente di posizionare il contenuto in modo preciso. In Illustrator CC, ci sono quattro miglioramenti alle guide:
- Facendo doppio clic su un righello si crea una guida in quella posizione specifica sul righello.
- Quando si tiene premuto Maiusc e quindi si fa doppio clic su una posizione specifica su un righello, la guida creata nel punto si aggancia automaticamente al segno (divisione) più vicino sul righello.
- Se nascondi le guide (Ctrl / Cmd +;) e poi scegli di mostrarle, le guide non vengono automaticamente bloccate come nelle versioni precedenti.
- Crea guide orizzontali e verticali in un'unica azione. Ecco come: nell'angolo in alto a sinistra della finestra di Illustrator, fai clic sull'intersezione dei Righelli e premi Ctrl (o Cmd su un Mac) e trascina il puntatore del mouse su qualsiasi posizione nella finestra di Illustrator; il puntatore del mouse diventa crocette per indicare dove è possibile creare una guida orizzontale e verticale; rilasciare il puntatore del mouse per creare le guide.
Miglioramenti alla ricerca dei caratteri
La ricerca tipo-ahead tipica cerca solo la prima parola nel nome del font, che generalmente non produce immediatamente i migliori risultati. Inoltre, la ricerca e la navigazione di un gran numero di caratteri può essere difficile. Una nuova opzione di ricerca "Cerca nome intero carattere" è stata aggiunta ai pannelli di controllo e carattere. Inoltre, l'integrazione di TypeKit per i font desktop è stata recentemente annunciata a MAX. Ciò significa che puoi facilmente progettare mock-up usando gli stessi font che intendi usare sul web.
Miglioramenti alla ricerca del colore
Trovare un colore particolare da una gamma di numerosi colori può essere dispendioso in termini di tempo e frustrante. In Illustrator CC sono state apportate modifiche per semplificare il compito di cercare e trovare un colore. La finestra di dialogo Selettore colore (fai doppio clic sul proxy Riempimento nella barra degli strumenti) ora ha un widget di ricerca nella finestra Campioni colore. Quando fai clic su Campioni colore, una barra di ricerca viene visualizzata sotto l'elenco di colori predefinito. Digitare il nome di un colore o un valore RGB (o CMYK per la stampa). Se si digita "blu", vengono visualizzati tutti i campioni di colore con la parola blu nel loro nome. Digitando R = 77 verranno visualizzati tutti i campioni di colore che hanno il colore rosso con un valore di 77 nella scala RGB. Il widget di ricerca è abilitato per impostazione predefinita.
Anche l'opzione di ricerca nel pannello Campioni è stata migliorata. Il campo non impone un completamento automatico. I caratteri che scrivi non vengono più automaticamente sostituiti con la corrispondenza colore più vicina trovata. È possibile digitare un nome di un colore o semplicemente digitare i valori di colore RGB (o CMYK per la stampa) per cercare se tale combinazione di colori esiste. Il campo Trova non è abilitato per impostazione predefinita e deve essere abilitato per la prima volta dal sottomenu del pannello.
Vale anche la pena notare che Kuler è stato trasformato in Illustrator. Pertanto, se si utilizza questo servizio Adobe per creare temi e gruppi di colori, è possibile accedere facilmente a questi contenuti direttamente all'interno di Illustrator CC.
Pannello delle proprietà CSS
Naturalmente, la più grande funzionalità per il web sono i miglioramenti apportati ai flussi di lavoro CSS e SVG. Ora, se sei un utente hardcore di Illustrator, potresti aver usato qualcosa in CS5 chiamato pacchetto HTML5, che era disponibile da AdobeLabs. Per qualsiasi motivo non è mai apparso in CS6, ma molte di queste funzionalità sono tornate con questo aggiornamento CC. Queste funzionalità ricordano ciò che è già stato reso disponibile per Photoshop CS6 tramite gli aggiornamenti di Creative Cloud e le funzionalità disponibili in Fireworks CS6.
Il pannello Proprietà CSS mostra come estrarre il CSS dal documento di Illustrator e fornisce diversi modi per farlo. Il passo fondamentale per fare tutto questo è tuttavia nominare i livelli all'interno del pannello dei livelli. Certamente Illustrator può generare CSS senza che l'oggetto abbia un nome all'interno del pannello dei livelli, ma ti stai aprendo a un modo disorganizzato e potenzialmente sciatto di generare codice. Questo è essenzialmente il modo in cui Illustrator nominerà le regole di classe che crea per te. Il CSS generato può avere prefissi del browser per Webkit, Firefox, Opera e Internet Explorer. Può catturare aspetti supportati da CSS come gradienti e angoli arrotondati.
Puoi controllare come viene generato il CSS accedendo alla finestra di dialogo Opzioni di esportazione CSS. È possibile accedere alla finestra di dialogo facendo clic sul pulsante Opzioni di esportazione CSS, che è il primo dei quattro pulsanti in basso a destra del pannello. Il pannello offre diverse funzioni per i flussi di lavoro CSS:
- Visualizza il CSS per un oggetto selezionato
- Copia il codice CSS per un oggetto selezionato
- Esporta l'oggetto selezionato in un file CSS insieme alle immagini utilizzate nei CSS
- Esporta il codice CSS per tutti gli oggetti nel documento in un file CSS
Inoltre, puoi esportare il codice CSS per tutti gli oggetti all'interno del documento andando al menu File e selezionando Esporta. Questo aprirà una finestra di dialogo e da lì puoi scegliere CSS dal menu di formattazione.
Se hai un oggetto, selezionalo e assicurati che sia nominato correttamente nel pannello Livelli. Selezionandolo, vedrai il CSS necessario per generare il disegno in un browser nel pannello delle proprietà CSS.
Codice SVG
Nelle versioni precedenti di Illustrator, dovresti salvare un documento come SVG. Qui nell'aggiornamento CC hai la possibilità di copiare qualcosa all'interno del documento, quindi vai al tuo editor HTML preferito e semplicemente esegui una copia; tutto il codice SVG verrà inserito nel documento. È un flusso di lavoro sorprendentemente piacevole. Se questo non lo fa per te, il metodo più tradizionale di salvare il documento come SVG è ancora disponibile.
Inoltre, Adobe ha aggiunto il supporto per l'esportazione di stili inutilizzati. Durante la progettazione, spesso crei più stili grafici durante la creazione di elementi grafici. Non puoi usare tutti gli stili disponibili. Quando si esportano i disegni in formato SVG, gli stili non utilizzati non vengono esportati. Inoltre, nel codice CSS esportato, gli stili grafici non hanno nomi associati e potrebbe essere difficile identificare lo stile grafico corretto.
Illustrator CC offre due funzionalità che sono state aggiunte per migliorare l'esperienza di lavoro con gli stili in formato SVG che risolvono questi problemi:
- Nome dello stile grafico. Quando si sceglie di esportare stili grafici, il nome di ogni stile viene esportato con la definizione dello stile nella nomenclatura CSS.
- Esporta stili inutilizzati. Quando esporti le immagini in formato SVG, puoi ora scegliere di esportare gli stili non utilizzati. Ciò consente a un altro designer o sviluppatore che sta importando gli stili di utilizzare gli stili grafici non utilizzati in altri elementi grafici.
Come lo userai
Questo certamente non è uno strumento per codificare pagine web complete. Quello che vedo è usare Illustrator per creare mock-up, quindi codificare manualmente la struttura in HTML e il codice di layout in CSS. Quando è necessaria un'ombra esterna, un gradiente, un motivo o anche un logo, l'utilizzo di queste nuove opzioni di estrazione e SVG di CSS sarà molto utile e sarà un grande risparmio di tempo.
Se sei interessato a saperne di più sulle nuove funzionalità di Illustrator CC, visita la pagina del prodotto di Illustrator.
Sei un appassionato di Illustrator? Quali sono le caratteristiche di Illustrator CC che ti entusiasmano di più? Fateci sapere nei commenti.