Come creare grafica vettoriale e quindi generare icone da loro?

Question

Per un sito Web che sto sviluppando, dovrò creare alcuni elementi grafici. Non ho ancora bloccato le dimensioni, quindi non volevo generare file di immagine (PNG, GIF, JPG) direttamente nel caso in cui cambiassi idea dopo essere andato oltre con il layout e l'interfaccia utente per vedere cosa funziona e cosa no .

Questo mi ha fatto pensare: forse dovrei generarli come grafica vettoriale (es. SVG) e quindi generare un set di file di immagini da usare sul mio sito. Non ho mai giocato con la grafica vettoriale prima d'ora, quindi quello che sto cercando è:

• Alcuni strumenti per creare (preferibilmente graficamente) alcuni grafici vettoriali in un formato accettabile;
• Un modo programmatico di creare grafica vettoriale. Ad esempio, supponiamo di avere una griglia, che non vorrei necessariamente disegnarla a mano. " Snap alla griglia " e caratteristiche simili riguarderebbero questo caso, ma non altri; e
• In qualche modo posso programmare (ad esempio come attività di compilazione) prendere un set di grafica vettoriale e generare un set di immagini e preferibilmente avere un certo controllo (ad esempio dalla riga di comando) su cose come convenzioni di denominazione, formato di output, dimensioni, ecc. Non voglio entrare in un programma e fare individualmente " Salva con nome ... " su oltre 100 file per generare le mie icone.

Che tipo di strumenti e flusso di lavoro si adatta a questa situazione?

Answer 1

Esistono approcci diversi poiché esistono diversi pacchetti di grafica vettoriale commerciale. Quelli che uso sono Adobe Illustrator, Adobe Fireworks, Adobe Photoshop. Certo, Fireworks e Photoshop sono pacchetti di grafica bitmap con supporto vettoriale.

Trovo che Fireworks abbia più tempo a che fare con i vettori perché sono "di prima classe" oggetti, mentre in Photoshop sono in realtà una combinazione di una maschera vettoriale e un riempimento colore. Il vantaggio di progettare in un pacchetto bitmap usando i vettori è molto più semplice visualizzare in anteprima il risultato rasterizzato ingrandendo il documento in modo da poter vedere i singoli pixel. Illustrator ha aggiunto un'anteprima "pixel" " modalità per raggiungere anche questo.

Tutti e tre i pacchetti dispongono di funzionalità di scripting che consentono di automatizzare attività ripetitive come multi-esportazione, denominazione, ecc. Photoshop, tuttavia, ha anche Azioni; un sistema macro semplificato che consente di registrare e riprodurre attività batch semplici.

Il modo in cui tendo a creare i miei pacchetti di icone è progettando tutte le icone all'interno di un singolo documento. Uso "gruppi" (in Illustrator) o " cartelle " (Fireworks o Photoshop) per isolare ciascuna icona l'una dall'altra, ma mi consente di mantenere non appiattiti tutti i singoli livelli che compongono l'icona.

Quando vado all'esportazione, eseguo uno script che scorre su gruppi / cartelle di livello superiore, nascondendo tutti tranne uno alla volta ed esportando i risultati in bitmap per tutte le principali risoluzioni; 16x16, 24x24, 32x32, 48x48, 128x128 e 256x256.

Ecco un'eccellente guida di stile che Microsoft ha su come per progettare icone per Vista e XP. Si concentra sull'uso di Photoshop per eseguire la maggior parte del lavoro.

Answer 2

Dai un'occhiata a Cairo e alle sue varie associazioni. In effetti, esiste persino una ricetta disponibile per trasformare un SVG in comandi del Cairo.

Answer 3

Se hai bisogno di un solido strumento gratuito per creare SVG e poi scaricarlo in immagini bitmap quando hai deciso la dimensione che ti serve, Inkscape sarebbe una buona opzione. L'interfaccia utente sembra un po 'meno raffinata di Illustrator ma funziona bene su Windows, Mac e Linux. I limiti sono che la gestione del colore è molto meno potente di Illustrator e il supporto per le tavolette grafiche sensibili alla pressione è meno efficace se non si è su una scatola Linux.