Categoria: Operatore Grafico
Presentazioni
Indice
Gli Elementi Base della Grafica
Cos’è la grafica? Cosa fa un Grafico
Il termine grafica indica genericamente il prodotto della progettazione orientata alla comunicazione visiva. La comunicazione visiva è la trasmissione di un messaggio tramite un’immagine.
Allo stesso tempo un Grafico o “Graphic Designer” aiuta le persone a capire meglio le cose utilizzando lettere, immagini e colori.
Il buon graphic designer è un progettista, è un professionista che identifica un problema e cerca di risolverlo, è colui che trova un modo per far comunicare un determinato messaggio nel modo migliore possibile.
Aiutare a capire meglio le cose utilizzando lettere, immagini e colori.
I 3 “ingredienti”
I 3 ingredienti per un buon design sono: le lettere, le immagini e i colori.
La parola “lettere” al suo interno racchiude tutto il mondo della tipografia. La conoscenza, la scelta e l’abbinamento dei caratteri tipografici e dei font, l’impaginazione e la corretta gestione di testi e spazi.
Le immagini sono la manipolazione e la creazione di forme e segni tramite disegno, tramite stampa, tramite computer e moltissime altre cose. Possono essere illustrazioni, disegni, dipinti, grafiche 3d elementi vettoriali o fotografie.
I colori sono in grado di evocare emozioni e sentimenti nelle persone e possono quindi essere utilizzati come un ottimo mezzo di comunicazione, sfruttando al meglio i rispettivi significati e usandoli in modo adeguato.
Quindi cosa fa e non fa un bravo grafico?
- Non usa il font che ritiene “più bello”. Sceglie quello più funzionale al progetto a cui sta lavorando.
- Non inserisce una fotografia perché “ci sta bene”. La utilizza se vuole trasmettere un determinato messaggio o significato.
- Non usa un colore “perchè gli piace”. Crea abbinamenti che valorizzino i messaggi da trasmettere.
Le Lettere
Cos’è la Tipografia?
La tipografia è un elemento essenziale del progetto sia quando è messa in evidenza sia quando rimane sullo sfondo. L’utilizzo di lettere e simboli dell’alfabeto per trasmettere un messaggio scritto o grafico.
Può essere usata:
- come testo
- come elemento visivo
- come immagine vera e propria
Il carattere tipografico
I caratteri sono, nella grafica, nella tipografia e nell’editoria, come i mattoni nell’architettura o numeri nella matematica. Il carattere è una lettera, un segno di interpunzione o un simbolo.
Quindi, ad esempio, la lettera “A” è un carattere.
Allo stesso tempo un glifo (o simbolo) corrisponde a una forma specifica di un carattere. Ad esempio a volte la lettera A è disponibile in varie forme. A, a, a, a, sono glifi dello stesso carattere “A”. L’insieme di tutti i caratteri e glifi dell’alfabeto progettati secondo la stessa coerenza visiva e di significato, prende il nome di carattere tipografico.
Il font invece è il file, è il mezzo che permette di applicare un carattere. Per spiegarlo si può fare il paragone con la musica: se un carattere tipografico è una canzone, il font è il file .mp3 che ci permette di ascoltarla. È sbagliato quindi dire “Senti che ritornello questo mp3!”, mentre è assai più corretto dire “Senti che ritornello questa canzone!”.
Traduzione di questi termini italiano – inglese:
Carattere
Character
Glifo
Glyph
Carattere Tipografico
Typeface
Font
Font
Gli elementi di un carattere tipografico
I caratteri tipografici non sono tutti uguali, anzi, sono diversissimi Ognuno è composto in modo diverso, ha diverse caratteristiche, ha diverse dimensioni, ha diverse forme ed esprime diverse sensazioni.
Ci sono tanti caratteri diversi perché appartengono ad epoche diverse, nelle quali si avevano diverse necessità stilistiche e diverse possibilità tecnologiche.
Un carattere tipografico non è composto da lettere disposte a casaccio sulla pagina ma da griglie e strutture visive che permettono la lettura agevole del testo scritto.
L’occhio medio, ovvero la x-height (altezza della x in inglese) è l’altezza delle lettere minuscole, l’occhio è l’altezza delle lettere maiuscole comprendente anche le minuscole con aste discendenti e infine il corpo è l’altezza delle maiuscole comprendente anche accenti e caratteri speciali.
I tipi di carattere si dividono a loro volta in due macro-categorie, i serif e sans serif due termini francesi che significano “con grazie” e “senza grazie”. La differenza sostanziale tra queste due categorie di font è l’utilizzo o meno delle “grazie”, ovvero quei piccoli prolungamenti alle estremità delle aste, che derivano dalla scrittura calligrafica manuale.
I “Serif”
Solitamente, i caratteri di tipo “Serif”, si dividono in 4 categorie storiche:
- Old Style
- Transizionali
- Bodoni o DIdoniani
- Slab Serif o Egiziani
Old Style
Gli Old Style sono la prima categoria di caratteri serif, procedendo in ordine storico. Questa categoria è a sua volta divisa tra i Veneziani o Umanisti (come il Centaur) e i Garald o Romani antichi (come il Garamond). Hanno un altezza dell’occhio del font relativamente piccola (la x-height inglese), un basso contrasto tra linee spesse e sottili, aste trasversali inclinate nella “e” minuscola e un “colore” molto scuro, inteso come l’effetto generato dalla densità di inchiostro stampato su una pagina.
Transizionali
I Transizionali, dei quali il capostipite è stato il Baskerville nel 1757, è una categoria che raggruppa font recenti come il Times New Roman, il Cheltenham e il Georgia. I font Transizionali cercarono di allontanarsi dalla scrittura manuale dando maggior precisione ai segni grafici.
I Transizionali hanno forme più geometriche, un contrasto maggiore tra aste verticali e orizzontali, grazie più appiattite e un allineamento più verticale negli occhielli delle lettere.
Bodoniani
Successivamente, tra fine ‘700 ed inizio ‘800, arrivarono i “Bodoni” (che prendono nome dall’omonimo font). In inglese e francese vengono detti anche Didoniani (dal font Didot) e un po’ dappertutto sono chiamati anche Romani moderni. Proseguono nella ricerca di geometricità iniziata dai font transizionali. Hanno un passaggio molto marcato tra aste verticali e orizzontali e possiedono grazie molto fini e sottili che formano angoli retti con le aste.
Slab Serif o Egiziani
Sono stati definiti Egiziani per un motivo piuttosto stupido: all’epoca in cui apparvero (i primi decenni dell’800) l’antico Egitto era parecchio di moda. Si sono diffusi grazie alle crescenti necessità creative della pubblicità.
Sono caratterizzati da un utilizzo estremo del contrasto e dall’utilizzo di grazie perpendicolari e molto sottili, ovvero caratteristiche volte solamente a catturare l’attenzione e non a garantire leggibilità.
I “San-Serif”
La cosa più importante da dire è che non sono sempre esistiti fin dagli inizi della storia della tipografia.
I sans serif, in italiano detti caratteri a bastoni o lineari, nascono infatti in Inghilterra durante l’Ottocento. Nacquero proprio parallelamente ai font Egiziani e inizialmente vennero usati con gli stessi scopi: pubblicità e industria.
- Grotteschi
- Neo Grotteschi
- Geometrici
Grotteschi
Vengono creati tra il Diciannovesimo secolo e i primi due decenni del Ventesimo. Questi caratteri Grotteschi, sono caratterizzati da alcune peculiarità come l’asse verticale delle lettere, la forma tendenzialmente squadrata delle curve e lo scarso (ma presente) contrasto visivo.
Alcuni font Grotteschi possono essere considerati l’Akzidenz Grotesk (1896), il Franklin Gothic (1903), il Johnston Sans (1916, quello della metropolitana di Londra) e il Gill Sans (1926).
Neo Grotteschi
Hanno le stesse caratteristiche dei font grotteschi di fine ‘800 ma sono sviluppati a partire dal Secondo Dopoguerra.
Si distinguono dai classici Grotteschi per alcuni dettagli come una maggior geometricità, una g minuscola senza l’occhiello inferiore e la presenza di numerose varianti di peso, strutturate all’interno di una famiglia di font. Gli esempi più famosi sono l’Univers e l’Helvetica (entrambi degli anni ’50 e svizzeri).
Geometrici
In quegli stessi anni (anni ’20 e ’30 del Novecento), assieme a quei caratteri sans serif “Neo tradizionalisti”, nascono anche i “Geometrici”. Tra tutti i caratteri geometrici, non si può non citare il più famoso, quello che, ancora oggi, è tra i caratteri più amati: il Futura, del tedesco Paul Renner.
Il Futura viene creato nel 1928 ed è il capostipite dei caratteri sans serif geometrici in quanto è basato sulle tre forme geometriche di base: il cerchio, il quadrato e il triangolo.
Atri stili
Tra gli altri stili oltre al serif e al san-serif si possono menzionare:
Script o Handwriting
Si tratta di caratteri che sostanzialmente simulano la calligrafia e la scrittura manuale, in vari modalità diverse. Sono generalmente poco leggibili e da usare solo in casi davvero particolari.
Gotici o Blackletter
La stampa a caratteri mobili fu inventata in Germania da Johannes Gutenberg e, infatti, le prime lettere stampate sulla Bibbia di Gutenberg erano le “Blackletter” ovvero quelle di stile Gotico.
i caratteri gotici non vengono più usati da nessuna parte, se non per casi particolari o per decorazioni. Un uso che tuttavia è rimasto è quello dell’utilizzo di caratteri gotici per le testate e i loghi dei quotidiani.
Fantasia o Originali
Molti altri caratteri vengono raggruppati generalmente nel gruppone Fantasia o Originali. Una categoria che raduna tutti quei font in cui ci sono caratteri che ricordano particolari oggetti, come ad esempio il font usato per i libri e i film di Harry Potter in cui le lettere ricordano le saette. Ovviamente non sono adatti ad essere usati nei testi ma solo per titoli e in casi particolari.
Monospace
I font monospaced presentano lettere spaziate tutte alla stessa distanza e sono i caratteri delle macchine da scrivere, quelli utilizzati dalle prime stampanti per computer, e benché il loro utilizzo sia stato in molti casi sostituito con altre tipologie di caratteri, sono generalmente considerati i più leggibili dall’occhio umano, nonché i più distinguibili per quanto riguarda il riconoscimento ottico dei caratteri.
Varianti di un font
Generalmente, i file dei font sono raggruppati in famiglie di font, dove ci sono delle varianti del carattere tipografico originario.
Le varianti principali sono queste:
Peso
Varianti di peso (cioè lo spessore del carattere) che possono andare da quelle più sottili (Light, Thin, Extra-Light, ecc) a quelle più spesse (Bold, Black, Extra-Bold, Ultra, ecc) Le versioni “normali”, generalmente chiamate Roman o Regular.
Il corsivo e obliquo
Il corsivo, o italic, che è progettato con scelte ottiche ed estetiche diverse (non è semplicemente un font Regular inclinato). Anche i font corsivi hanno le loro varianti di peso (Bold Italic, Light Italic, ecc). L’obliquo, o oblique, è invece la variante inclinata, senza alcuna modifica estetica e funzionale, del font normale.
Le versioni compresse (Compresso o Esteso)
Le versioni compresse (Condensed) e allargate (Extended). Anche qui, non si tratta di un semplice font normale “stretchato” ma proprio di un diverso font, progettato perché sia più largo o più stretto.
Presentazioni
Indice
Introduzione
File e Cartelle
Il nostro computer elabora e immagazzina continuamente dati. I file servono appunto per memorizzare queste informazioni e possono essere di diversi tipi tra cui file di testo, immagini video ecc…
Per aiutare l’organizzazione dei file vengono utilizzate le cartelle. Le cartelle sono semplicemente dei contenitori possono archiviare al loro interno altre cartelle oppure file.
L’utilizzo di queste ultime è molto importante non solo per organizzare al meglio il nostro computer, ma anche per tenerlo più pulito e performante.
Estensioni
L’estensione viene delimitata dal Punto alla fine del nome del file. Esempio: i file .txt sono file di testo, i file .jpg sono file immagine. In genere se si ha installato un programma in grado di leggere il file l’icona viene modificata con l’icona del programma aiutandoci a riconoscere il tipo di file.
Ricordatevi di abilitare sempre le estensioni dopo il nome.
Software
In informatica i software sono quei programmi che consentono di modificare i dati contenuti all’interno dei file. Il più semplice è ad esempio il blocco note, che consente di modificare i file di testo .txt.
Possiamo dividere i software per la parte grafica e digitale nei seguenti modi.
Software di Testo: come word, excel, note… che consentono di modificare semplici file di testo o tabelle, in alcuni casi consento anche di applicare un aspetto grafico.
Software di Grafica 2D: esempio Photoshop, Illustrator, Indesign… questi programmi non solo consentono di modificare la parte di testuale ma anche la parte grafica.
Software di Grafica 3D: esempio 3sMax, Blender, VRay… questi sono applicativi che consentono la modellazione 3D e la renderizzazione di immagini o video.
Di seguito alcuni software del pacchetto Adobe più utilizzati e il loro scopo:
Photoshop viene utilizzato principalmente per la parte di post produzione fotografica. Esempio eliminare o spostare oggetti dalle foto, oppure cambiare i colori.
Illustrator viene utilizzato per il disegno vettoriale. Tipo i Loghi e i caratteri possono essere disegnati in illustrator. Si può utilizzare anche per l’impaginato di alcuni documenti come flyer o cartelloni.
Indesign invece viene utilizzato per l’impaginazione di documenti più complessi come libri.
Per la parte video abbiamo Premiere Pro che viene utilizzato per il montaggio ed After Effect che si utilizza per la parte di animazione.
Ultimo Adobe Xd che viene principalmente usato per la progettazione di interfacce di applicativi o web.
Shortcut
Per utilizzo corretto del computer, se la mano destra la si usa con il mouse, la mano sinistra è sul lato sinistro della tastiera pronta per attivare le shortcut.
Le shortcut sono le scorciatoie da tastiera, generalmente attivabili in combinazione con i tasti modificatore e i tasti lettera. I tasti modificatore sono ad esempio CTRL, ALT, SHIFT ecc…
Computer Grafica
Le immagini
Attualmente la maggior parte delle immagini vengono prodotte attraverso l’utilizzo di software grafici. Le immagini possono essere raster o vettoriali, entrambi i tipi hanno dei vantaggi e dei svantaggi, la cosa importante capire sempre con che tipo di immagine si sta lavorando.
La parte di elaborazione di immagini e video viene sempre fatta attraverso software di grafica.
Raster e Vettoriali
Le immagini raster sono composte da pixel colorati disposti su una griglia. L’insieme dei pixel forma l’immagine.
Mentre le immagini vettoriali sono definite da formule matematiche. Queste formule servono per comporre dei tracciati e definire le caratteristiche, come colore e spessore.
Il vantaggio delle immagini vettoriali è che essendo immagini prodotte matematicamente, non perdono qualità quando vengono aumentate di risoluzione mentre le immagini raster potrebbero sgranare. Al contrario le immagini raster sono vantaggiose per quel tipo di immagini più complesse, come fotografie, disegni o render 3D.
Esempi di alcuni formati: per le immagini raster si usa il .png o il .jpg, mentre per i vettoriali si usa .eps o .svg.
I Colori
Modello Additivo e Sottrattivo (RGB e CMYK)
I colori che vediamo tutti i giorni possono essere prodotti in due modi: attraverso la sintesi additiva o quella sottrattiva.
In campo grafico i modelli principali di riferimento sono RGB e CMYK:
RGB è un modello additivo ed composto da “Red”, “Green” e ”Blue”. Ogni colore primario rappresenta una componente della luce Bianca. Questo modello lo troviamo nei dispositivi elettronici come televisori, computer e smartphone i quali sono composti da pannelli luminosi.
I pannelli sono formati da Pixel molto piccoli ed ogni pixel è formato da tre led appunto “Red”, “Green” e ”Blue”. Se sono tutti e tre accessi il nostro occhi percepirà il bianco viceversa se sono spenti il nero.
CMYK è un modello sottrattivo ed composto da “Cyan”, “Magenta”, ”Yellow” e “Key Black”. I primi tre sono i colori primari e la loro somma produce il nero. Il “Key Black” invece sta ad indicare il la percentuale di nero. Si chiama sintesi sottrattiva perché l’insieme dei colori assorbe tutta la luce e forma il nero. Questo modello viene principalmente utilizzato nelle stampati ed è chiamato anche stampa in “quadricromia”.
Tonalità, Saturazione e Luminosità
Questi termini permettono di comunicare le informazioni sul colore.
La tonalità è ciò che consente di passare da un colore all’altro. La saturazione descrive la brillantezza del colore mentre la luminosità descrive il grado di intensità.
I Caratteri
Fonts
I fonts sono la parte visuale di tutto il testo renderizzato dal computer. I fonts sono dei file statici e ogni singolo file contiene le informazioni che definiscono le forme di ogni singola lettera, simbolo e spazio.
Esistono servizi “gratuiti” che permettono di trovare e scaricare fonts professionali. Ad esempio:
Una volta scaricato possiamo procedere all’installazione. Attenzione se il pacchetto fonts è compresso prima bisogna scompattarlo.
🪟 Come installare i fonts su Windows: selezionare la serie di fonts cliccare con il destro e dal menu a tendina cliccare su installa font.
🍏 Come installare i fonts su Mac OS: selezionare la serie di fonts e doppio click per aprire l’applicativo, una volta aperto cliccare su installa font.
Una volta installati i fonts nel proprio computer potete cancellare tutti i file scaricati. I nuovi fonts appena installati li troverete direttamente nei vari editor di testo installati sul vostro computer.
Font Family
La font family determina tutta la famiglia di un determinato font, quindi spessore, inclinazione e larghezza del carattere.
Infatti all’interno dello stesso font possiamo scegliere se utilizzare il bold (font più spesso) o l’italic (font corsivo). Per la scrittura di testi utilizzare sempre il Light o Regular. Mentre per i testi in grassetto il Bold e in corsivo Italic. Durante la fase di scrittura utilizzare il grassetto e l’italico con parsimonia.
Categorie di Font
I fonts più utilizzati sono di tipo Serif (con le grazie) e di tipo Sans Serif (senza grazie). La differenza sostanziale tra queste due categorie di font è l’utilizzo o meno delle “grazie”, ovvero quei piccoli prolungamenti alle estremità delle aste che derivano dalla scrittura calligrafica manuale.
La Riproduzione
Formati Stampa e Dpi
I formati stampa sono una classificazione che serve a standardizzare le dimensioni dei vari fogli. Possono essere prodotti partendo da misure con il sistema metrico o il sistema imperiale
Esistono diversi formati di stampa, i più usati nelle stampanti comuni sono i formati A4 e A3.
Durante la realizzazione dei file di stampa si potrà decidere la qualità, cioè i dpi.
I dpi (dot-per-inch) indicano i punti per pollice e consentono di misurare la qualità delle immagini. Il minimo per la stampa classica è di 300 dpi.
Attenzione: ricordate che per stampe tipografiche sono generalmente previsti dei rifili. Vuol dire che l’immagine deve essere più grande del formato di stampa, in questo modo le grafiche o le immagini che arrivano a bordo pagina possono essere tagliate correttamente.
Formati Video
Le dimensioni per i formati video vengono misurate in pixel e la densità di pixel utilizzata dal display in ppi.
Nei formati video standard vengono considerati quei formati più utilizzati dai dispositivi per riprodurre video come tv, monitor e proiettori. Attualmente i più diffusi sono il Full HD (1080p) e 4K.
Grafica per il Web
Il grafico per il web può svolgere diversi ruoli. Dal progettare semplici banner fino a pensare vere e proprie schermate.
La difficoltà sta nel fatto che, se per la stampa il formato lo decidiamo noi, la parte web può essere visualizzata su diversi dispositivi. Quindi tutto ciò che progettiamo dovrà tenere conto dell’orientamento degli schermi, delle dimensioni e dovrà adattarsi in base ad essi.
Altro punto fondamentale sono le ottimizzazioni. Tenete conto che i file devono essere mandati attraverso la rete e per avere la migliore esperienza possibile l’utente finale deve poterci accedere in tempi brevi. Al contrario della stampa le immagini e le grafiche devono avere il minor peso possibile.
Applicare filtri
Per applicare un filtro selezionare prima il layer sul quale si vuole applicare il filtro. Successivamente cliccare nel menu “Filtro > Galleria filtri“.
Selezionare il filtro che si vuole applicare e dal pannello di sinistra regolare le impostazioni.
Si possono aggiungere più filtri dal pannello in basso a sinistra.
Una volta completato cliccare su ok. Se il livello non è stato convertito per filtri avanzati (dal menu filtri) le modifiche saranno permanenti.
Altri Filtri
Un altro filtro utile riguarda la sfocatura. Filtro > Sfocatura > Controllo sfocatura. Consente di sfocare un immagine o una parte selezionata dell’immagine.
Opzioni di fusione
In un livello si possono applicare dei effetti aggiuntivi chiamati “Opzioni di fusione“.
Per accedere click con destro sul livello (non sull’anteprima) e selezionare “Opzioni di fusione“.
Nel pannello che ci si apre si possono selezionare diversi effetti esempio l’ombra esterna o il bagliore esterno.
Un altra opzione che si usa è sovrapposizione colore per rendere un livello tutto dello stesso colore.
N.B. Quando si clicca sulla spunta si attiva l’opzione, per poterla modificare cliccare sulla scritta dell’opzione.
Metodi dei livelli
I metodi di un livello si possono essere cambiati cliccando sul menù a tendina nel pannello livelli.
Modificando questo parametro si altera il colore del livello che va a fondersi con gli altri livelli sottostanti. Esempio se abbiamo una maglia e vogliamo posizionare al suo interno una grafica possiamo usare il metodo moltiplica sulla grafica, e la texture della maglia passerà attraverso la nostra grafica.
Esistono diversi metodi. Il miglior modo per comprenderli è testare ogni singolo metodo quando si vogliono fondere due immagini.
Maschere
Quando ci troviamo con un immagine e vogliamo scontornare o rendere trasparenti determinate parti la cosa migliore è usare le maschere.
Le maschere possono essere attivare su tutti i livelli e cartelle. Per attivare una maschera cliccare sul pulsante “Aggiungi una maschera” all’interno del pannello dei livelli.
Una volta attivata la maschera sarà tutta bianca, il che vuol dire che tutta l’immagine è visibile. Prendendo il pennello, settando i colori di default, utilizzando il nero si andrà a rendere invisibile determinate aree. Quindi di base il bianco indica visibile e nero invisibile, con le sfumature si possono controllare le diverse opacità.
La catena segnata al centro tra maschera e livello indica che i due sono legati e si muovono contemporaneamente, sia nei spostamenti sia nelle trasformazioni. Se clicchiamo sopra di essa si spegne e ciò indica che livello e maschera non sono più legati.
Può risultare utile vedere solo la maschera. Se manteniamo premuto il pulsante ALT o OPTION mentre clicchiamo su una maschera vedremo solo la sua composizione al centro dell’area di lavoro. Cliccando su un livello usciremo da questa visualizzazione.
Come visto in precedenza se abbiamo una selezione attiva e clicchiamo sul pulsante maschera, al livello verrà agganciata una maschera con la forma della nostra selezione.
Esercizi
NB. Scaricare font Poppins da google fonts.
Aggiungere Testo
Per creare un testo in Photoshop selezionare il comando “Strumento testo orizzontale“.
Nella barra superiore possiamo scegliere il carattere e la dimensione. Cliccando al centro dell’immagine comparirà il cursore che ci permetterà di scrivere. Proviamo a scegliere come font il Georgia Bold e scrivere esempio “Royal Center”.
Una volta completata la scritta si può cliccare sulla spunta nel sotto menù per confermare oppure semplicemente cambiando comando.
Nel pannello dei livelli si nota che è stato aggiunto il livello corrispondente al testo con la lettera T. Una volta creato si edita come un qualsiasi livello.
Per creare un altro testo riprendere il comando di testo e cliccare nell’area di lavoro. Questa volta scrivere per esempio “International Airports”. Per cambiare il font e la dimensione basta selezionare quello che si è scritto e modificare dal pannello nel sotto menu.
Spostandosi con il cursore verso il fondo si cliccare invio per creare una nuova riga. Scrivere esempio “Since 1972”. Confermare.
Dal pannello del menu si trovano anche i comandi per la giustificazione del testo.
Per creare un Blocco di testo si seleziona il comando “Strumento testo orizzontazle” e posizionandosi nell’area di lavoro cliccare e trascinare.
Modificare Testo
Per modificare tutto il livello di testo selezionare il livello poi con il comando testo attivo nel sotto menu si trovano gli strumenti per cambiare: Font, dimensione, colore ed altro.
Per accedere alla modifica del testo vero e proprio fare doppio clic sulla T del livello nel pannello livelli o con il comando di testo attivo cliccare direttamente sul testo nell’area di lavoro.
Delle modifiche di testo più avanzate possono essere fatte attivando i pannelli di Carattere e Paragrafo. Un modifica è per esempio togliere la sillabazione, oppure aumentare l’interlinea.
Creare Forme
Per creare una forma selezionare “Strumento Rettangolo“. Tenere premuto a lungo per vedere tutte le altre forme che si possono creare.
Nella parte sotto il menu si possono modificare colore e alcuni parametri. Cliccando e trascinando nell’area di lavoro si creerà la forma. Il livello è un livello forma e lo si riconosce dal logo in basso a destra.
Una volta creata la forma si modifica dal pannello delle proprietà sopra i livelli. Utilizzando invece la trasformazione libera le forme non perderanno le loro proprietà.
Forme Complesse
Per creare forme più complesse si usa “Strumento Penna“. Una volta selezionato spostare nel sottomenu da tracciato a forma.
Cliccare per creare su più punti una forma complessa. Si può decidere di tenere la forma aperta o chiuderla.
Per modificare le forme si usa “Strumento selezione“. La freccia nera significa che stiamo modificando e spostando la forma nel suo intero, mentre quella bianca possiamo spostare ogni singolo punto della forma.
Come aiuto durante il disegno si possono anche usare le guide. CTRL o COMMAND + R per abilitare i righelli, poi cliccare su un righello e trascinare per creare le guide. Per toglierle basta spostarle all’esterno.
Esercizio
Creare un logo utilizzando un immagine di sfondo, un icona, nome dell’attività e payoff. L’immagine deve essere coerente con sfondo e fonts utilizzati. Potete utlizzare anche forme per abbellire l’immagine.
Per le icone usare https://iconmonstr.com e una volta selezionato l’icona scegliere png per poter modificare il colore.
Strumenti pennello
Lo strumento pennello condivide con altri strumenti (esempio gomma, timbro clona, schiarisci) le impostazioni per l’utilizzo.
Le principali sono la dimensione e la durezza. La dimensione modifica il raggio del pennello mentre la durezza cambia i bordi del pennello, per renderlo più o meno sfuocato.
Aprendo il menu a tendina nel sotto menu oppure cliccando con il tasto desto al centro dell’area di lavoro, possiamo trovare svariati tipi di pennelli che differiscono per dimensione e per forma.
Per regolare la dimensione del pennello si può usare questa scorciatoia, stando al centro dell’area di lavoro si preme il tasto Alt o Option e poi si clicca e tiene premuto il tasto dx. Spostando il mouse verso destra e sinistra si regola la dimensione, mentre dall’altro verso il basso la durezza.
Nel sottomenu possiamo inoltre regolare anche l’opacità.
Se abbiamo una selezione attiva il pennello avrà effetto solo su quella selezione.
Può essere utile in alcuni casi tracciare delle linee rette, basta usare il comando Shift mentre si usa il pennello. Se si effettuano dei singoli click il programma eseguirà delle rette da un punto all’altro. Se si clicca e trascina con Shift attivo si eseguiranno delle rette orizzontali o verticali.
Colori
Per i colori nel pannello di sinistra nella parte finale troviamo due quadrati, generalmente al primo avvio sono nero e bianco. Cliccando sul nero si modifica il colore nero e viceversa sul bianco per quello bianco.
Modificando ci si aprirà una finestra per la selezione del colore. Nella barra laterale possiamo spostarci di tonalità mentre nel quadrato al centro se spostiamo il cursore da destra a sinistra modifichiamo la saturazione, mentre dall’altro al basso la luminosità. Cliccare su OK per confermare.
Al di sopra dei due cursori abbiamo una doppia freccia che ci consente di passare da un colore all’altro e un simbolo doppio quadrato che ci consente di resettare i colori bianco e nero.
Se dovesse servirci un colore all’interno della scena ci viene in aiuto “Strumento Contagocce“. Cliccando con il tasto sinistro si può campionare qualsiasi colore all’interno dell’area di lavoro.
Secchiello e Sfumatura
Un livello può essere riempito utilizzando il comando secchiello o sfumatura. Se si vuole creare un livello completamente di un colore singolo o sfumatura conviene utilizzare il comando “crea livello riempimento o regolazione” dal pannello dei layer.
Il secchiello e la sfumatura invece possono essere utilizzati per esempio per riempire selezioni. La sfumatura prende come colore base i due colori nella tavolozza altrimenti si può cambiare dal sotto menù.
Esercizio
Partendo da un foglio vuoto disegnare una sfera, cilindro e un cubo. Salvare in psd.
Comandi utili:
- Duplicare i livelli: click con destro e duplica, oppure trascinare il livello con ALT o OPTION premuto, oppure trascinare il livello sul simbolo del nuovo livello.
- Selezionare solo la parte occupata del livello: click con destro sull’anteprima e “Seleziona pixel”, oppure cliccare sull’anteprima tenendo premuto il tasto CTRL o COMMAND.
- Nel pannello dei livelli cliccando sulla cartella si possono creare cartelle e sottocartelle.
Nell’esercizio due colorare le scocche bianche del drone. Nel menu metodo nelle impostazioni del pennello scegliere il metodo “Colore”.
Comandi utili:
- Si puo usare lo strumento scurisci per rendere la scocca leggermente più scura.
- Se si esce dall’area da colore e si vuole tornare all’impostazione originale, utilizzare il pennello storia per ripristinare la foto originale.
Rimuovere oggetti di piccole dimensioni
Per rimuovere piccoli oggetti presenti nella scena si può utilizzare il “Pennello correttivo al volo” che si trova nel pannello dei strumenti. Attenzione ad utilizzare il comando giusto perché esistono di comandi simili.
Utilizzando il pannello di controllo nel sotto menu oppure cliccando con il tasto destro del mouse si può regolare la dimensione del pennello.
Una volta scelta la dimensione corretta del pennello, cliccare sulla parte da eliminare. Se è piccola basta un click, altrimenti cliccare e trascinare.
Aggiungere oggetti
Per aggiungere oggetti alla foto si può utilizzare il timbro clone.
Per clonare un oggetto selezionare per prima la parte che si vuole clonare premendo il tasto Alt o Option + Click sinistro. Ricordarsi di regolare la dimensione e la durezza del pennello timbro clone. Poi cliccare da un’altra parte dell’immagine per duplicare il contenuto selezionato precedentemente.
Dopo il primo click la posizione di clonazione si fissa, quindi per muoverla dobbiamo fare come precedentemente Alt o Option + Click sinistro.
Rimuovere oggetti di gradi dimensioni
Per rimuovere oggetti di grosse dimensioni selezionare con il lazzo, o con altri strumenti di seleziona, l’area attorno all’oggetto che si vuole rimuovere.
Nel menu superiore selezionare Modifica > Riempi. Comparirà una finestra, nel menu a tendina selezionare “in base al contenuto“. Cliccare su OK per confermare.
Deselezionare premendo Ctrl o Command + D.
Se l’immagine presenta degli artefatti dove prima era presente l’oggetto si può utilizzare il timbro clone per aggiustare e rendere l’immagine più omogenea.
In alternativa al riempimento automatico si può utilizzare “Strumento Toppa” che consente di prendere un altra porzione e sovrapporla all’oggetto che si vuole rimuovere.
Esercizio
Modificare le immagini rimuovendo oggetti. Salvare un file in psd e un esportazione in jpg delle immagini.
Esercizio 1 togliere i cavi della corrette dalla foto.
Esercizio 2 togliere i due bicchieri dal tavolo.
Esercizio 3 rimuovere bici, scritta, campanello e lampione
Esercizio 4 togliere tutto tranne le strisce pedonali al centro
Le selezioni
Le selezioni servono per isolare una parte di immagine e consentono di effettuare delle modifiche o delle regolazioni solo su quella parte di immagine.
Per iniziare a selezionare possiamo utilizzare il comando selezione rettangolare nel pannello di sx. Cliccare e trascinare per selezionare una porzione di immagine.
Diamo un occhiata alle icone presenti sotto menu. Le prime quattro icone a sx ci consentono di eseguire diverse operazioni, rispettivamente aggiungere una porzione ad una selezione attiva, sottrarne una parte, infine mantenere l’intersezione tra una selezione esistente e una seconda che stiamo creando.
Proviamo ad eseguire un luminosità e contrato sulla selezione.
Per invertire la selezione utilizzare il menu Selezione > Inverti selezione. Tutto ciò che faremo ora sarà applicata alla nuova selezione. Provare a modificare ulteriormente l’immagine.
Per deselezionare utilizzare il comando deseleziona sotto il menu seleziona.
Strumenti di selezione
Esistono diversi strumenti di selezione. Vedremo quelli che si usano più spesso.
Ricordati sempre di aver selezionato il livello sul quale andare ad effettuare la selezione.
Nel pannello di sx utilizziamo “Strumento selezione rapida“. Spostandoci nell’area di lavoro, clicchiamo e trasciniamo il cursore negli spazi che vogliamo selezionare.
Non preoccupiamoci se tutti i bordi non vengono selezionati nel modo corretto al primo colpo. Una volta selezionato possiamo rimuovere le parti in eccesso utilizzando il comando Opzione su mac e Alt su windows, clicchiamo e trasciniamo. Per le aree più complesse ci potrebbe volere qualche tentativo.
Altro comando è “Lazzo“, lo troviamo sempre nella barra dei strumenti a sx.
N.B. Nella barra degli strumenti alcuni comandi hanno un piccolo triangolo in basso a dx collegato all’icona del comando. Questo vuol dire che tendono cliccato a lungo compare un sotto menu con altri strumenti della stessa categoria. Quindi se non troviamo il lazzo proviamo ad andare nel sotto menu del comando di selezione.
Il comando lazzo funziona nel seguente modo, clicchiamo e trasciniamo per effettuare un area di selezione. Una volta mollato il click del mouse il comando chiude automaticamente la selezione.
Possiamo utilizzare i modificatori da tastiera o il pannello sotto il menu per effettuare operazioni come aggiungere o sottrarre una selezione.
Migliorare una selezione
Una volta selezionato l’area con uno dei comandi di selezione, possiamo cliccare su “Seleziona e Maschera” per migliorare la selezione.
All’interno del pannello troviamo diverse modalità di visualizzazione su “Visualizza”. Proviamo “Sovrapponi” per applicare un layer rosso che ci può aiutare nella selezione.
Sulla sinistra, come nella schermata di lavoro principale di Photoshop, troviamo un pannello di strumenti.
Possiamo usare il pennello per ampliare e ridurre la selezione. Con i modificatori da tastiera o con il pannello sotto il menu è possibile decidere se aggiungere o sottrarre alla selezione.
Esercizio
Scaricare le 4 foto esercizio nella cartella materiale.
Indicazioni generali:
- Una volta selezionato cliccare su “Seleziona e Maschera” per migliorare la selezione.
- Successivamente cliccare il simbolo di maschera nel menu dei livelli per mascherare il livello.
- Salvare tutti i file in .psd con tutti i livelli separati.
Nella prima foto scontornare edificio e aeroplano, togliere il cielo cliccando sul simbolo della maschera. Inserire al di sotto della foto un livello di riempimento (Livello > Nuovo livello di riempimento > Tinta unita).
Seconda foto scontornare la macchina ed inserire un livello di riempimento dello stesso colore dell’auto sullo sfondo.
Nella foto numero tre scontornare serpente e ramo, inserire uno sfondo nero.
Nella quarta foto del paesaggio togliere il cielo selezionando e mascherando. Scaricare da internet la foto di un altro cielo ed inserirla. Si può provare a regolare i colori per integrare meglio le due foto.
Esportare le diverse immagini in formato .jpg all’interno della cartella “Lezione 5”
Regolare luminosità e contrasto
Spesso le immagini necessitano di regolazioni, le foto potrebbero avere troppa luce o troppo contrasto, per ottenere risultati migliori è necessario un migliore bilanciamento.
Per regolare la luminosità e il contrasto assicurarsi di aver selezionato il livello che si vuole modificare. Muoversi su Immagini > Regolazioni > Luminosità/Contrasto.
Spostare il regolatore della luminosità a dx per avere l’immagine più luminosa, mentre a sx per l’immagine più scura. La regolazione è personale, quindi soggettiva.
Stessa cosa vale per il contrasto. Aumentando il contrasto le zone in ombra e in luce risulteranno meno dettagliate. Viceversa abbassando il contrasto.
Utilizzare il comando anteprima per vedere gli effetti della regolazione sull’immagine. Cliccare su ok per confermare.
Regolare la Vividezza
Per regolare la vividezza dei colori all’interno di un immagine utilizzare il pannello che si trova in Immagine > Regolazioni > Vividezza. Si aprirà una finestra con due cursori uno per regolare la vividezza e l’altro per regolare la saturazione.
Se pur simili questi due parametri hanno effetti diversi la Saturazione aumenta o diminuisce l’intensità di tutti i colori in una volta sola, mentre la Vividezza opera in modo più selettivo. Questa variabile infatti modifica prima l’intensità dei colori che non sono dominanti di quell’immagine, annullando il proprio effetto nei colori che sono già vicini alla soglia di Saturazione.
In caso si voglia aumentare l’intensità dei colori alzare la barra della vividezza.
Al termine cliccare su ok.
Tonalità e saturazione.
Per regolare questi parametri all’interno di una foto dirigersi in Immagine > Regolazioni > Tonalità/Saturazione
Nel pannello troviamo la tonalità che ci consente di uniformare con un colore, la saturazione che ci consente di avere colori più o meno intensi e infine la luminosità che ci consente di avere colori più o meno chiari.
Si possono regolare delle porzioni di immagine utilizzando il menu a tendina cambiando da composita ad un colore. Tutte le regolazioni sono relative a quel colore.
Se il colore non esiste si deve attivare la modalità manuale cliccando sul logo della mano e utilizzare il picker per selezionare il colore.
Una volta regolato cliccare su Ok.
Utilizzare i livelli di regolazione
Un altro modo per regolare un immagine è utilizzare i livelli di regolazione. Una volta creato un livello di regolazione, la regolazione avrà effetto su tutti i livelli sottostanti a quel livello.
Per creare il livello cliccare sull’icona a cerchio mezzo pieno nel pannello dei layer. Si aprirà un menu a tendina che mostra tutte le regolazioni uguali a quelle che troviamo nel menu immagine > regolazione.
Per esempio utilizziamo una regolazione bianco e nero. Una volta cliccato si aprirà una pannello chiamato proprietà che ci consentirà di regolare le proprietà del livello, in questo caso cambieremo le intensità dei colori in un effetto scala di grigio.
Una volta finito cliccare sulla doppia freccia in alto a dx per chiudere il pannello. Cliccare sull‘ icona per richiamarlo.
Il vantaggio è che la regolazione non è permanente e può essere modificata in ogni istante. Ricordate che ha effetto su tutti i layer sottostanti.
Esercizio
Scaricare il materiale.
Nella foto nominata esercizio 1 e 2 provare a regolare per livelli la luminosità/contrasto e vividezza. Salvare le due foto in .psd in modo da salvare anche i livelli.
Invece nella foto esercizio 3 e 4 utilizzare il livello di tonalità/saturazione cambiare nella foto del gatto il colore di fondo mentre in quella della macchina il colore della macchina. Salvare sempre in .psd.
Nell’esercizio 5 regolare la luminosità/contrasto e vividezza, poi attraverso la tonalità/saturazione cambiare il colore delle due case. Salvare sempre in .psd.
Nell’ esercizio 6 creare un immagine in bianco e nero. Salvare in .psd.
Introduzione ai livelli
I Layer o livelli corrispondono idealmente ad un foglio di acetato trasparente sui cui è possibile posizionare elementi diversi tra cui immagini, forme e testi.
Se il pannello layer non è visibile è possibile attivarlo nel menù superiore, clicca su Finestra > Livelli.
I Layer possono essere resi invisibile cliccando sull’icona dell’occhio.
Per muovere il contenuto di un layer all’interno dell’area di lavoro è necessario utilizzare il comando “Move Tool” nel pannello di sinistra. Il livello che si muoverà sarà quello selezionato nel pannello dei Layer.
Per muovere più livelli contemporaneamente selezionare un Layer e poi selezionare il secondo Layer con il tasto CMD o CTRL attivo. Se correttamente selezionati provando a muoverli seguiranno tutti la stessa traiettoria.
N.B. Nel sotto menu non tenere la spunta attiva sulla voce “Selez. auto”. Questo comando selezionerà automaticamente il livello in base a dove si trova il mouse.
Nozioni base sui livelli
L’ordine dei livelli nel pannello corrisponde all’ordine visibile nell’area di lavoro.
Se clicchiamo e trasciniamo un livello possiamo spostarlo sopra o sotto ad un altro livello per migliorare l’ordine all’interno dell’area.
Per creare un nuovo livello cliccare sull’icona simile ad un + in basso a dx nel pannello dei livelli. Il nuovo livello verrà inserito sopra al livello che abbiamo selezionato al momento del click. I nuovi livelli sono vuoti, quindi trasparenti.
Rinominare i livelli è una buona pratica per tenere ordine nel nostro file. Per rinominarli fare doppio click sul nome.
Per aggiustare l’opacità selezionare il livello e cliccare su opacità, poi spostando lo slider a regolare si può regolare.
Per cancellare il livello cliccare sul livello e poi cliccare sul cestino oppure con il tasto cancella sulla tastiera.
Ridimensionare i livelli.
Per ridimensionare un livello contenente un immagine o una forma andare in modifica > trasformazione libera. Oppure cliccare CMD/CTRL +T.
Cliccare su un angolo per modificare le dimensioni, per alterare le proporzioni tenere premuto il tasto SHIFT. Ricordarsi, una volta finito, di mollare prima il tasto sinistro e poi il tasto modificatore SHIFT.
Per ruotare la selezione spostarsi leggermente all’esterno, tenendo premuto SHIFT si ruoterà a step di 15 gradi.
Nel mezzo della trasformazione troveremo un punto che serve per indicare il centro. Durante le trasformazioni, se premiamo ALT, le modifiche faranno riferimento a quel punto. Il centro si può spostare trascinandolo.
Per confermare le modifiche utilizzare la spunta in alto dx, mentre il simbolo di divieto serve per cancellare.
Per modificare due immagini contemporaneamente selezionare in modo multiplo i layer e poi cliccare su trasformazione libera.
Importare le foto nell’area di lavoro
Per inserire un file all’interno dell’area di lavoro scegli File > Inserisci incorporato, oppure trascinare i file dalla cartella all’area di lavoro.
Una volta importato si attivano automaticamente le impostazioni del trasforma quindi una volta posizionato selezionare la spunta per confermare.
Una volta importato notare l’icona accanto al layer, vuol dire che l’immagine non è rasterizzata e mantiene tutte le sue proprietà.
Se si vuole modificare per esempio con un pennello il livello bisogna rasterizzare il livello. Quindi cliccare con il tasto destro del mouse sul livello e scegliere rasterizza livello.
Sbloccare il livello sfondo
Quando si crea un file da zero o si apre una foto il livello sfondo è bloccato.
Bloccato vuol dire che non può essere mosso o spostato di posizione nei livelli.
Cliccare sul simbolo del lucchetto per sbloccare. Ora possiamo spostare gli altri livelli al di sotto del livello background.
Creiamo un nuovo livello. Lo posizioniamo sotto e clicchiamo su Modica > Riempi e nel menù a tendina selezioniamo il colore bianco.
Poi andiamo nel menu Livelli > Nuovo > Sfondo da Livello per rendere il livello che abbiamo creato come Background (quindi non modificabile).
Esercizio
Creare 4 File due per la stampa e due per il web.
Formato di stampa: A4 Orizzontale.
Formato digitale: FullHD (1920X1080).
Le composizioni dovranno contenere un logo e due immagini (una grande e una piccola). Ordinare e rinominare i livelli per avere un’organizzazione migliore. L’ordine deve essere dall’alto verso il basso: Logo, Immagine grande e immagine piccola.
Salvare tutti i file in psd nella cartella Lezione 3.
Formato di stampa: esportate i file in .pdf
Formato digitale: esportare in .jpg.
Scegliere 4 tra gli argomenti seguenti:
- Apple
- Microsoft
- Lamborghini
- Disney
- Chanel
- Prada
- Kinder
- Nespresso
Alla fine del lavoro dovremmo trovare nella cartella “Lezione 3” 4 file psd, 2 file pdf e 2 file jpg.