Illustrator o Inkscape? Programmi Vettoriali a confronto

illustrator-e-inkscape
Tempo stimato di lettura: 8 minuti, 36 secondi
Pubblicato il 19 agosto 2014

Vi sarà certamente capitato di usare programmi open source ma, per chi come me lavora nel settore grafico, non è semplice adattarsi. Dopo anni di utilizzo di programmi noti, l’impatto con altre piattaforme free può diventare un ostacolo molto alto; eppure nel nostro lavoro ci ritroviamo sempre più a modificare i nostri stili di vita, le abitudini e ad imparare l’utilizzo di più programmi. Una situazione che non solo ci arricchisce professionalmente, ma ci aiuta nelle situazioni di problem solving.

Da una mia esperienza personale ho preso spunto per raccontarvi come la necessità di lavorare con un nuovo programma di grafica può diventare stimolante. Qualche mese fa inizio il mio incarico presso una nuova azienda; lo scopo è quello di rifare il look estetico grafico/web. Dopo un primo piano editoriale su cosa svolgere e quali strategie adottare per rinnovare il brand arriva il fatidico momento. Sbircio sul pc aziendale e mi accorgo fin da subito che i programmi che uso solitamente a casa non ci sono. Cosa fare? “Panicoooooo!!!!!!!!!!!”.

Ma no dai, a tutto c’è una soluzione mi sono detta 🙂  e inizio quindi ad installare i programmi free di fotoritocco e grafica vettoriale che mi servono. Premesso che io adoro e lavoro tantissimo con Adobe Illustrator, non è stato facile accettare di lavorare con il gemello free Inkscape, ma vi posso assicurare che fin dai primi giorni ho preso confidenza con le nuove tavole. Sicuramente ci sono molte differenze fra i due ma lo scopo di questo tutorial/consigli pratici sarà quello di dimostrare, a me stessa e a voi, che possiamo raggiungere lo stesso risultato anche con programmi totalmente diversi. Per farlo userò una cosa semplice ma che renderà bene il concetto che voglio spiegarvi. Ormai sapete che il logo di Webhouse è (poverino) da me utilizzato per ogni esperimento. Bene, stavolta creeremo insieme la famosa icona con la casetta con entrambi i programmi, e spero che a fine tutorial anche voi potrete dire come me che i programmi open source non sono poi così terribili.

Per prima cosa è bene chiarire alcune cose fondamentali: entrambi sono programmi che gestiscono grafica vettoriale e supportano anche elementi utili per i web designer. Ciò significa che la nostra icona Webhouse potrà essere utilizzata con lo stesso file sia per utilizzo di stampa (formato vettoriale) che per scopi web (formato pixel). Ma procediamo con ordine.

Illustrator  e Inkscape – colleghi creativi: impariamo a conoscerli

L’impatto  visivo generale  dei  due programmi è molto simile. Entrambi collocano le palette in modo ordinato e dal design pulito; questi due colleghi però hanno un “carattere” diverso e lavorare contemporaneamente è una vera impresa. Vi assicuro che nei primi giorni cercavo alcuni comandi di un programma nell’altro e finiva che non capivo più quale stavo utilizzando (ah ah ah). Le tavole a confronto ci  aiutano a conoscerli meglio e notiamo fin dall’apertura del file cosa cambia. Mentre in Illustrator dobbiamo subito inserire i parametri del nostro file, su Inkscape lo possiamo decidere una volta dentro tramite l’apposito comando modifica documento.

Schermata iniziale – Illustrator

tavola_iniziale_illustrator
Schermata iniziale – Inkscape
tavola_iniziale_inkscape

Illustrator  e Inkscape – La sfida dei “livelli”

Fin da subito ci accorgiamo che i due programmi lavorano diversamente nella gestione dei livelli; buona norma sarebbe imparare ad utilizzare la gestione di livelli separati ma, se su Illustrator non ve lo ricordate, lui lo crea in automatico, mentre su Inkscape dovete assolutamente farlo, altrimenti rischiate che se volete nascondere o eliminare un pezzo del progetto, dovete ricominciare da capo. Tenete quindi a mente questo dettaglio, così come vi mostro nella tavola 2

illustrator_Inkscape _la sfida dei livelli
Tavola 2

Illustrator  e Inkscape – la nascita dell’icona Webhouse

Una volta impostate le tavole non dobbiamo fare altro che iniziare a realizzare le prime parti della nostra icona; entrambe le tavole hanno la misura di 100x100pixel e hanno uno sfondo bianco. In entrambi i programmi andiamo a realizzare un quadrato grigio utilizzando lo strumento selezione rettangolo/ crea rettangoli che troviamo sulla palette di sinistra e procediamo.

Abbiamo realizzato il primo elemento, ma come spesso accade non si centra alla tavola. Niente panico: in entrambi i programmi esiste lo strumento allinea alla tavola di disegno o dei singoli oggetti grafici. Fatto il primo quadrato precediamo alla stessa maniera con un secondo ma di colore bianco (per nostra comodità poiché alla fine vedrete che esso cambierà aspetto) e uno ancora più piccolo nero così come vi mostro nella tavola 3

illustrator_Inkscape_nascita icona webhouse
Tavola 3

Adesso è il momento magico in cui il quadrato nero forerà quello bianco: con entrambi i programmi basta un semplice clic ed il gioco è fatto. Selezionate entrambi gli elementi e con Illustrator nella palette elabora tracciati cliccate la seconda iconcina (sotto “meno sopra”)  su Inkscape invece dal menù superiore andate su tracciato/ differenza così come mostrato nella tavola 4

illustrator_Inkscape_allineamento elementi
Tavola 4

Illustrator  e Inkscape – Iniziano a parlare la stessa lingua

Anche se dobbiamo fare ancora qualche passaggio per arrivare al risultato finale, ci rendiamo conto che questi due colleghi possono stare sullo stesso pc e lavorare insieme. Procediamo quindi con il taglio della nostra icona. Ebbene sì, il loghetto di Webhouse se vi ricordate assomiglia a un labirinto che finisce con la freccia/casa. Per tagliare questa piccola porzione io vi consiglio di crearvi un rognoso ma utilissimo elaborato fatto di linee guida che vi aiuteranno anche nelle fasi successive. Su entrambi i programmi basta tirare dai margini dei righelli tutte le linee che vi servono, il nostro logo come noterete alla fine è composto da un articolato ma semplice suddivisione matematica delle porzioni. Nelle tavole seguenti noterete quindi che automaticamente avrete la sezione per realizzare il pezzetto del taglio.

Per comodità ho usato il nero; una volta fatto selezione l’oggetto bianco e questo nero e con gli stessi comandi dei due quadrati iniziali procedete con il taglio netto del piccolo angolo.

taglio-dell'oggetto-su-illustrator
tavola illustrator

taglio dell'oggetto su Inkscape
tavola inkscape

Stessa operazione per procedere per la parte continua del “labirinto”, ovvero l’altra striscia verso l’interno. Una volta che avete creato l’elemento stavolta dovete unirlo, e quindi con le stesse palette andrete su Illustrator per usare il comando unifica (prima iconcina) con Inkscape dal menù tracciato/unione così come  mostrato nella tavole 5 e 6


taglio-dell'oggetto-su-illustrator2
Tavola 5 – illustrator
taglio-dell'oggetto-su-Inkscape2
Tavola 6 – 
Inkscape

Illustrator  e Inkscape – l’icona inizia a prendere forma

Ecco che finalmente questi due colleghi iniziano a mostrarci come la piccola icona Webhouse sta diventando sempre più completa con dei passaggi davvero molto semplici, ma saranno in grado di reggere questa sfida? Non ci resta che proseguire e vedere cosa sono capaci di creare. Adesso arriva la fase forse più delicata, ma se siete stati attenti e bravi nel crearvi la griglia suggerita in precedenza lo farete davvero ad occhi chiusi. L’elemento che manca alla nostra icona è proprio la freccia/casa. Essa è composta da due elementi:

1° la base
2° la freccia vera e propria

Come mostrato nella tavola 7 a confronto, la base è molto semplice e sempre per comodità fatela di un colore diverso in modo che poi sarà semplice unificare gli elementi  in una fase successiva.

illustrator_inskape_confronto-logo-webhouse
Tavola 7

Adesso passiamo alla freccia, anche qui mi sono aiutata con dei rettangoli all’interno del quadrato bianco che poi andrò ad eliminare. Anche se questa fase vi sembra molto noiosa, vedrete che è fondamentale se dovete lavorare con grafiche che utilizzano parametri geometrici di precisione. Una volta fatta la prima esperienza poi vi verrà naturale usarli e non ne potrete fare a meno.  In entrambi i programmi (come noterete dalla tavole 8 e 9) si deve usare lo strumento penna/tracciati; questo ci permette la massima precisione anche grazie alle guide che “agganciano” i nostri punti vettoriali. Riempite di colore nero e togliete il contorno dell’oggetto: ecco realizzata la nostra parte finale.

logo-webhouse_illustrator
Tavola 8 – illustrator

logo-webhouse_Inkscape
Tavola 9 – Inkscape

Non ci resta che unire ora tutti gli elementi: selezioniamoli e con il nostro strumento di fusione come per magia diventeranno tutti di un unico colore… e se provate a spostarlo, esso non è forato ed è quindi adattabile con qualsiasi colore come sfondo e modificabile a sua volta solo nei punti e nei tagli che gli abbiamo assegnato.

icona-a-confronto

Tavola 10 – logo a confronto 

Illustrator e Inkscape – La sfida è diventata una bella amicizia

Adesso possiamo davvero dirlo: questi due colleghi sono stati davvero all’altezza di realizzare lo stesso elaborato in maniera eccellente. Ma manca ancora un piccolo particolare alla nostra icona per dare un po’ di profondità o un leggero effetto flat, tanto di moda nella grafica web. Nella tavola 11 vi mostro come i due programmi su questo lavorano davvero diversamente ecco perché è bene andare con ordine:

Su Inkscape  l’effetto ombra lo realizziamo semplicemente duplicando il nostro elemento principale sempre in un nuovo livello e colorandolo momentaneamente di colore bianco. Portiamolo sotto e procediamo così (attraverso la palette dei livelli ci sono delle frecce che ci aiutano tanto – fidatevi è molto semplice). Selezionate dalla palette in basso il colore di riferimento e vi si aprirà una nuova palette dei colori. Mettiamo esattamente gli stessi parametri che io ho applicato e noterete subito un effetto molto delicato; a mano poi spostate leggermente l’ombra ed il gioco è fatto.

effetto_ombra-con-inkscape
tavola 11/ Inkscape

Su Illustrator abbiamo due modi per realizzare la nostra ombra vettoriale: o selezioniamo il nostro oggetto principale e dal menù superiore scegliamo effetto/stilizzazione/ ombra esterna mettendo i parametri che vi mostro sulla tavola sottostante, oppure, come nell’altro programma, duplichiamo il livello e, posizionandolo sotto, diamo un colore/trasparenza molto delicato. In questa maniera avremo diverse soluzioni ed effetti davvero differenti.

effetto_ombra-con-illustrator
tavola 11/ Illustrator

Illustrator e Inkscape – Tagliare il traguardo insieme

È stata una bella sfida, dobbiamo ammetterlo, ma siamo felici che questi programmi hanno tagliato il traguardo dell’elaborato vettoriale insieme e con risultati ottimali Adesso non ci resta che esportare il nostro file per il web e vedere come queste icone sono davvero uguali nel loro aspetto.

È stata dura, ma da oggi posso dirvi che questi due “colleghi” non sono poi così tanto diversi. Certo, ognuno ha il suo carattere e si sa che nella sfida c’è chi vuole vincere e primeggiare, ma noi creativi dobbiamo essere bravi a raggiungere i nostri obbiettivi in qualsiasi posto di lavoro ci troviamo e soprattutto utilizzando qualsiasi programma. Non vi resta che cimentarvi pure voi e, credetemi, che con la pratica vi leverete tantissime soddisfazioni. Oggi io posso dirvi che con entrambi i programmi ho realizzato il nuovo logo dell’azienda, template per il sito web e tanto altro materiale creativo.

  • Giacomo

    Ottimo articolo per tutti quegli scettici che per punto preso considerano soltanto i programmi Adobe.
    Utilizzo inkscape e altri programmi Open fin da quando ho iniziato i miei studi e carriera nella grafica e web, direttamente su Linux.
    C’è da dire però che l’assenza di investimenti nei programmi open source si fà sentire. Molto spesso mancano strumenti od opzioni avanzate che si trovano invece in programmi PRO.
    Quello che ho sempre constatato però che, per chi fà web, li strumenti di base bastano e avanzano ed anzi, ho trovato inkscape sempre più intuitivo di illustrator.

    ps: il filtro ombra esterna esiste anche su inkscape, crea allo stesso modo una sfumatura vettoriale ma può essere impostata in modo preciso con dei cursori.
    Una cosa che manca su inkscape oer la quale i grafici pubblicitari potrebbero soffrirne la mancanza è la gestione della quadricromia.
    Per quanto si possano impostare i colori in CMYK la gestione del colore in fase di stampa non esiste.

    • Carmen Molinelli

      @Giacomo, hai ragione in giro ho trovato molto scetticismo sull’utilizzo di Open Source ma alla fine come ho raccontato nell’esperienza diretta prima o poi ci si deve cimentare. Inkscape di certo è più semplice per chi si vuole avvicinare alla grafica professionale ma ammetto che Illustrator lo trovo più completo anche per l’interazione con gli altri programmi di foto ritocco e impaginazione. Per quanto riguarda il CMYK non l’ho mai usato per la fase di stampa mentre su AI ho gestito alla perfezione i vari profili anche nelle più complesse macchine tipografiche. Avrò un motivo in più per approfondire l’argomento dei due programmi. Grazie e continua a seguirci 🙂

  • La Deħ

    io non ho mai usato questo illustrator (manco sapevo della sua esistenza) ma uso da svariati anni Inkscape e mi trovo davvero bene.

    • Carmen Molinelli

      @la_de:disqus si può sempre iniziare a conoscere Illustrator, sul sito trovi diversi tutorial e spero che possano tornarti utili 😉

  • Caterina

    Tutorial molto interessante! Peccato per le immagini veramente piccole… 🙁

  • iMM

    Complimenti! ottima analisi attraverso un mini tutorial. Soprattutto per l’imparzialità e l’oggettività descrittiva (che è rara in un mondo di fun boy a prescindere). Purtroppo però la tua analisi è veritiera per il mondo web design e prestampa-digitale. In quel contesto sì i 2 si equivalgono: uso da 25 anni AI per lavoro e negli ultimi 3 anni mi son affezzionato a inkscape trovandolo più semplice e intuitivo, Senza nulla togliere alla professionalità dei non citati Coral draw e defunto Freehand i due al top che se la giocano sono proprio Ai e inkscape. Peccato che inkscape è sprovvisto di un supporto CMYK e Pantoni essendo nativamente progettato per lavorare in RGB. Questo fà si che venga tagliato fuori tutto quel settore produttivo e di professionisti (come me) più dediti alla serigrafia-tipografia, non utilizzabile in fase esecutiva, pro ed è un peccato lo tengo per studi iniziali o campo web. Quindi attenta! se un giorno un tuo logo o lavoro lo vuoi portare in tipografia devi come minimo riaprirlo su Ai o altro programma PRO e riattribuirgli tutte le forze colore che volevi e poi risalvarlo. Comunque hai saputo anche affermare una cosa importante che spesso quelli che pensano di essere professionisti non capiscono: non è il programma che usi che fa di te un professionista, ma le tue conoscenze riguardo (in questo caso) al saper come si lavora e le tecniche della grafica vettoriale. Tanto che, come hai giustamente descritto, se cambi stazione o ti trovi davanti nuovi software (dopo un’ovvio iniziale e momentaneo smarrimento) saprai poi sempre cosa fare e come farlo… il resto son solo orpelli o abitudini che ci viziano!

  • iMM

    dimenticavo un consiglio visto che apprezzi l’open source: per lavori non troppo complessi a sfumature o filtri particolri SCRIBUS, equivalente per sommi capi a indesign, riapre perfettamente il formato usato da inkcsape e non solo (svg) dove potergli riattribuire anche solo e tinte in cmyk o pantoni… ti capitasse di nuovo di dover usufruire solo di programmi open…

Shares