Questo articolo contiene una raccolta di tool grafici da usare in alternativa ai software commerciali come ad esempio Adobe Photoshop (fotoritocco), Adobe Illustrator (disegno vettoriale), Adobe Dreamweaver (creazione siti web), Adobe Flash (creazione animazioni in flash) e Adobe InDesign (creazione di Layout), sono tutti ottimi software ma purtroppo a pagamento e non tutti possono permettersi di acquistarli… soprattutto se non siete professionisti.
Editing delle foto come in Photoshop:
Inizimo con The Gimp software di fotoritocco che con pochi clic del mouse, converte qualsiasi normale foto in un opera d’arte, anche se non siete dell’umore giusto per effettuare una lenta procedura di ottimizzazione.
Per lavorare in modo efficiente con il programma, aggiungiamo alcune funzioni al dock fin dall’inizio. Clicchiamo su File/dialog nella finestra principale e selezioniamo Navigation. Viene aperta una nuova finestra; una volta qui, andiamo con il mouse su View Navigation. A questo punto, trasciniamo la finestra sul dock usando la tecnica del drag & drop. Quindi, con un solo clic, abbiamo una visione generale più ampia e possiamo zoomare sul lavoro.
Utilizzo: un tool standard che possiamo utilizzare su quasi ogni tipo di foto è la correzione del valore tonale. Andiamo a Layer/Colors/Values/Automatic e regoliamo saturazione del colore, luminosità e contrasto. Spesso è sufficiente per ottimizzare una foto. Se desideriamo lavorare di più sui colori, utilizziamo le curve di livello (Layer/Colors/Curves).
Da qui possiamo regolare la luminosità dei singoli colori. Nel menù Channel, selezioniamo i valori RGB e regoliamo la curva dei colori usando il mouse. Salviamo l’immagine completa usando la finestra picture e File/Save. Gimp non inserisce nessun formato di file. Di conseguenza, dobbiamo selezionare il formato preferito tramite File type: As per extension oppure forniamo manualmente l’estensione corretta per il nome del progetto, per esempio .gif o .tif. Gimp ottimizza le nostre foto anche direttamente per il web. A questo fine, salviamo l’immagine come .jpg e specifichiamo la qualità, ovvero il livello di compressione. Con Show Preview in picture window, possiamo visualizzare l’anteprima dell’immagine relativa al livello di compressione selezionato.
Suggerimento: WinSnap, il tool integrato per catturare le schermate, è utile e si può aprire da File/Capture/Screen Shot. Gimp cattura l’intero schermo oppure singole finestre. Possiamo anche impostare un timer che ritarda la cattura delle schermate.
Creazione grafica vettoriale come Illustrator:
Mentre Gimp è in grado di creare immagini straordinarie, Inkscape fa magie con la grafica vettoriale. Con questo tool probabilmente non possiamo creare dei dettagli finissimi, ma possiamo scalare le imagini a piacimento. Inoltre Inkscape crea le forme più varie, i percorsi le sfumature di colore. Questo programma vettoriale è assolutamente indispensabile per realizzare i loghi che devono essere stampati su grandi insegne.
Un buon esercizio per conoscere il programma è la realizzazione di un flow chart. Il tool Create object binder ci aiuta in questo. Per prima cosa progettiamo i singoli moduli del diagramma sulla superficie di lavoro e selezioniamo il tool. Quando ci si sposta su un oggetto con il mouse, al centro viene visualizzato un quadrato. Facendo un clic su di esso, colleghiamo le forme con una linea. Se spostiamo il componente, anche gli oggetti collegati vengono spostati. Il Progetto completo va salvato come file .svg .pdf, oppure in un altro formato tra quelli disponibili.
Utilizzo: La speciale caratteristica dei programmi grafici in questo articolo è che lavorano a meraviglia insieme. Una palette di colori creata in Gimp può essere importata molto facilmente in Inkscape. Ecco come: nel programma per l’editing delle foto, apriamo la scheda Color palette tramite Crtl+P e creiamo una New color palette. Selezioniamo l’area di colore dell’immagine servendosi della pipetta; il colore corrispondente viene visualizzato nella finestra di anteprima. Trasciniamo il colore nel color palette editor mediante drag & drop. Possiamo forlo con tutti i colori di cui abbiamo bisogno in Inkscape, utilizzando Save per registrare le modifiche. Il file è pronto per la copia da C:\Documents and Settings\$User\.gimp2.2\palettes a C:\All Programs\Inkskape\share\palettes. A questo punto, facendo clic sulla freccia nell’angolo inferiore destro dello schermo nel programma vettoriale, userete la palette di colori importata da Gimp.
Creazione di Layout come in InDesign:
Adesso lasceremo da parte per un po’ il pennello e useremo il programma DTP Scribus per creare degli eleganti layout, come per esempio un biglietto d’invito. Possiamo sicuramente creare degli inviti usando anche Gimp, ma Scribus offre un maggior numero di opzioni ed effetti per quanto riguarda i font.
Il tool mette a disposizione quattro layout predefiniti. Sotto File/New, scegliamo tra il lato doppio o singolo, formato verticale oppure orizzontale. È possibile personalizzare anche le impostazioni relative a dimensioni della carta, direzione o margini.
Utilizzo: un buon esercizio per i principianti consiste nel progettare un biglietto di invito che includa una foto. Per crearne uno, andiamo a Insert/Picture frame e posizioniamo un frame con il tool: le dimensioni sono irrivelanti. Per aprirlo, facciamo doppio clic su di esso. Adesso è possibile selezionare la foto. Nel menù contestuale dell’immagine selezioniamo Adjust the frame to the picture. Nel caso si vogliano ridurre le dimensioni dell’immagine, è sufficiente scalare il frame con il mouse fino alle dimensioni del layout, poi con un clic destro andiamo in Proprieties/Image/Adjust to frame. A questo punto la foto ha le stesse dimensioni del box e mantiene le proporzioni quando viene scalata un’altra volta. Scribus funziona molto bene anche con Gimp e apre il programma per l’editing delle foto dal menù contestuale mediante il programma Image Editing, sempre che sia installato. Dopo i tocchi finali, salviamo il file e facciamo clic su Update image in Scribus.
È possibile collegare la scrittura a mano libera tramite Insert Textbox. Anche qui abbiamo a disposizione il tool per importare i testi da un file Word con un clic destro. Tramite Proprietes/Text possiamo cambiare dimensioni del font, il colore e l’orientamento.
Con scribus possiamo anche creare Pdf interattivi con collegamenti ipertestuali o bookmark.
Facciamo clic su PDF/Text e disegnamo sul documento un campo con le dimensioni adatte. Facciamo doppio clic su di esso per impostare Type/External Web link e inseriamo “mailto: indirizzo email”. Anche da qui sotto Properties, si può cambiare il colore e l’aspetto del pulsante. A questo punto tutto ciò che resta da fare è File/Export/Save as PDF e il biglietto è pronto.
Adesso, quando qualcuno fa clic sul pulsante, viene aperto il suo programma di posta dal quale può inviare immediatamente una risposta.
Creazione siti web come in Dreamweaver:
Con il web editor KompoZer possiamo creare dei siti Web anche senza conoscere l’html.
Sono disponibili dei comodi add-on per il tool, come un generatore di blind-text. Installiamo l’add-on Launchy, che sarà molto utile in seguito per visualizzare i nostri nuovi siti direttamente dal browser. Personalizzarlo facendo un clic destro sull’icona relativa presente sulla barra degli strumenti. Mediante Drag & Drop trasciniamo l’icona di Launchy nella barra degli strumenti e selezioniamo Finish.
Utilizzo: adesso creeremo un semplice sito web con testo di benvenuto e immagine. Creiamo nel nostro pc una cartella dove salvare l’immagine e il sito html.
Lanciamo il programma e facciamo clic su Page Setup su Edit Page. Completiamo i campi con i nomi della pagina e navighiamo tramite Publishing-URL fino alla cartella appena creata. Cambiamo la formattazione del font da Normal Text a Heading 1. Nella finestra principale inseriamo un messaggio di benvenuto per il sito web e forniamo un’interruzione di linea. Usare Save, l’icona con il simbolo di floppy; chiamiamo il file “index”. Verrà visualizzato in site manager.
Adesso inseriamo una immagine nella pagina; ricercarla usando Graphics address. È importante attivare l’opzione URL is relative to the site address. È qui che verrà utilizzato l’add-on Launchy: quando facciamo clic sul simbolo, possiamo aprire il sito direttamente nel nostro browser con Open in Internet Explorer.
Animazione come in Flash:
Spesso i professionisti non sono soddifatti dalla creazione di un sito web statico. Qualcosa deve muoversi, magari con un piccolo ma accattivante effetto. Con il programma di animazione Synfig Studio, possiamo dare una nuova vita al nostro sito web. Dal momento che il tool è molto pesante, possiamo programmare delle animazioni fluide soltanto dopo aver acquisito un po’ di pratica. Inizieremo con l’animazione di un cerchio, che si sposta da sinistra a destra. Ulteriori tutorial sono disponibili cliccando qui.
Creiamo un nuovo progetto, apriamo File/New e forniamo nome e descrizione. Sotto Image Size specifichiamo le dimensioni dello spazio di lavoro, sotto Time/End Time inseriamo 2 secondi, confermiamo dando l’Ok.
Utilizzo: con il tool Retangle, disegnare un quadrato nero sullo spazio di lavoro. Successivamente facciamo clic sul campo del colore di primo piano e impostiamolo sul rosso.
Posizionimao un cerchio con Circle. Il tool Normal, una freccia nera su sfondo blu, viene usato per cambiare le dimensioni e posizione dell’oggetto. Per questo ci sono i “Ducks”, che sono i punti colorati in verde e ciano. Adesso provvederemo all’animazione: Facciamo clic sul pulsante verde in basso a destra per raggiungere la Animate Editing Mode.
A questo punto specifichiamo i Keyframes in cui dovrebbe accadere qualcosa. Per questo occorre una finestra di dialogo con lo stesso nome: il simbolo è una chiave. Se non è disponibile, aprirla tramite File/Dialogs/Keyframes. Con il segno più, inseriamo un’immagine chiave e andare in Timetrack. Usando il dispositivo di controllo, andiamo sul valore 1s 0f e creare un secondo keyframe. Ripetiamo la stessa operazione per il valore 2s 0f.
A questo punto, nella finestra Keyframe selezioniamo l’immagine centrale e spostiamo il cerchio con il tool Normal. Questa è la nostra piccola animazione, che potrete avviare tramite la freccia nera nell’angolo superiore sinistro. Qui, andiamo in file/Preview. Esportiamo l’animazione tramite Render, per esempio come Gif, e integrarla nel nostro sito web.
fonte: rivista Chip Dicembre 2007
Complimenti!!!! articoli sempre utili e interessanti!!!!
continua così, ormai sn un’assiduo visitatore del tuo blog!!! BRAVA!!!! ciao!!! :happy: :happy:
Prima di tutto voglio farti i complimenti perchè questo blog è interessantissimo, anch’io sono un’appassionata di tecnologia, internet e chi più ne ha più ne metta… sono una scarpa in grafica e credo il tuo tutorial su Gimp mi sarà utile :happy: Non conosco Kompozer ma mi hai incuriosita, mi sa che prima o poi lo proverò.
Ciao ciao :happy:
Benvenuti vale e oeN! ma quanti complimenti… Grazie fanno sempre piacere! :love2: sono contentissima che il mio blog vi piaccia! :hihi:
Ciao sono proprietario del sito http://www.acquisizionelavoro.it un sito che offre lavoro online ed è sempre in fase di miglioramenti cercando di offrire sempre maggiori servizi per gli utenti.
Gradirei sapere se fossi interessato ad aggiungere un link testuale nel tuo blog contraccambiando il favore inserendo il vs. sito con un link testuale in http://www.acquisizionelavoro.it/link-amici.htm o se desideri potrei segnalare il tuo sito in http://www.acquisizionelavoro.it/siti-amici.htm inserendo una breve descrizione o ancora, abbiamo una pagina dedicata ai blog http://www.acquisizionelavoro.it/imiglioriblog.htm
Attendo una tua risposta e le tue indicazioni per l’inserimento
ciao
allora io voglio fare una animazione che constente all’utente di estrarre la palette dei colori presenti in un immagine.inoltre devo ridurre il numero dei colori presenti in un immagine a scelta a venderne l’efetto visivo.lo devo fare con flash soltanto che nn so come si fa e cosa devo fare mi puo aiutare ?
http://www.miojob.net il più importante portale di lavoro dove cercare il tuo lavoro, segnalate il vostro sito in http://www.miojob.net/segnala_sito_add_url.htm
ciao!
prima di tutto complimenti per il blog è molto interessante, e gli articoli molto utili.
Sto provando gimp, inkscape e scribus + altri programmi per il web in alternativa alla creative suite adobe, volevo chiederti: ma scribus gestisce le abbondanze, pagine al vivo?
non riesco a trovarle…
sai segnalarmi una guida molto dettagliata su questo preogramma…
grazie mille in anticipo e buona notte!
ma un programma per creare Layout NON per siti web, ma per siti come Howrse, che ti diano anche l’HTML non ce ne sono vero? :angry: