Con questo post, oggi voglio iniziare una breve serie di semplici tutorial per spiegare cosa sono e come si utilizzano le "Maschere" in Photoshop, uno strumento potentissimo e deella cui conoscenza un grafico professionista non può farne a meno.

La regola numero 1 quando si lavora Photoshop è: mai alterare l'immagine originale.
Questo significa fondamentalmente che nel momento in cui andiamo ad applicare un filtro ad un'immagine, è sempre meglio creare un duplicato della stessa (anche se il Photoshop Cs3 ci permette di utilizzare gli "Smart Filters" che si applicano in maniera non distruttiva), oppure, se si vuole regolare la tonalità e saturazione, i livelli o le curve di luminosità, è sempre meglio aggiungere un livello di regolazione, piuttosto che applicare queste modifiche al livello originale, il che presenta due vantaggi:

1. Le impostazioni, ad esempio di saturazione, possono essere modificate in qualsiasi momento, senza in questo modo compromettere l'immagine originale
2. Il livello di regolazione può essere cancellato, reso meno opaco o applicato secondo i diversi metodi di livello, come moltiplica, scolora ecc.

Se non sapete di cosa sto parlando, allora provate ad aprire un'immagine in Photoshop e inserire un nuovo livello di regolazione dal menu: Livello > Nuovo Livello di Regolazione > Tonalità/Saturazione e vedrete che tale livello si posizionerà sopra a quello dell'immagine, ma sarà sempre un livello indipendente e come tale potrà essere nascosto o eliminato (e presenta accanto una maschera...ma poi ne parliamo). Provate anche con le altre regolazioni.

Immaginiamo ora di voler eliminare dei pixel da un'immagine, un cielo grigio, o un ex fidanzato, bene ci sono due modi per farlo: cancellarli oppure mascherarli (nasconderli).

Quando utilizziamo lo strumento "Gomma" su aree dell'immagine, noi eliminiamo "definitivamente" i pixel e l'unica operazione che ci è consentita per tornare all'originale è quella di utilizzare la palette "storia" per tornare indietro... ma cosa succede quando gli stati della storia non ci permettono di tornare alla nostra immagine iniziale compromettendo tutto il nostro lavoro?
A questo problema c'è una ovvia soluzione: le maschere!

COSA SONO LE MASCHERE DI LIVELLO?

Immaginiamo una maschera di quelle che utilizziamo a carnevale: si presentano come un pezzo di un qualsiasi materiale con due fori attraverso i quali possiamo guardarci attorno; attenzione però soltanto quei fori ci permettono di osservare il mondo, se la maschera non li avesse noi non potremmo vedere assolutamente niente; ma se con un paio di forbici li allargassimo ancora un pò, potremmo vedere meglio e più cose contemporaneamente.
Il principio su cui si basano le maschere di livello in Photoshop è fondamentalmente lo stesso: mascherare e quindi nascondere aree o renderle visibili utilizzando, invece delle forbici, la combinazione di aree nere e aree bianche.
Su di una maschera non si utilizzano i colori, ma soltanto la scala di 256 valori di grigi:

• Le aree che sulla maschera si presentano nere nascondono i pixel dell'immagine a cui è applicata
• Le aree che sulla maschera si presentano bianche, permettono di vedere i pixel dell'immagine
• Le aree colorate con la scala di grigi, renderanno visibili i pixel con un'opacità proporzionale alla propria percentuale di luminosità, per cui un grigio 50% renderà visibili i pixel dell'immagine a cui è applicata la maschera con un'opacità del 50 %.

Nel prossimo post approfondirò l'utilizzo delle maschere di livello, per ora tenete a mente il concetto espresso all'inizio del post: padroneggiare Photoshop vuol dire utilizzare i suoi strumenti in maniera essenzialmente "non distruttiva" con tecniche specifiche, che richiedono studio e documentazione. Dal canto suo la casa produttrice Adobe ci viene incontro facilitandoci questo processo con funzionalità sempre migliori.

Stay tuned!

La serie (finora)
Le maschere: Introduzione (post corrente)
Le maschere di Livello
La maschera veloce

Molti di voi usano sicuramente il servizio di posta offerto da Google, Gmail che recentemente ha rilasciato delle nuove entusiasmanti features ad una ristretta cerchia di utenti (and growing!)
La cosa che colpisce tutti è la semplicità e la comodità di utilizzo...ma non parliamo troppo presto: guardate nel video che segue cosa significa utilizzare google mail per un gruppo di creativi Russi.




Per creare questa gigantesca interfaccia sono stati utilizzati:

- 162 metri di nastro grigio
- 45 pezzi di lego
- 32 stick di plastilina
- 18 pennelli
- 18 metri quadrati di tela
- 12 bombolette di vernice spray
- 10 litri di vernice bianca
- 4 risme di fogli
- 2 kilogrammi di porridge
- 1 stampante
- 1 asciugacapelli
- 1 scopa
- 1 sega

Siete ancora convinti che Gmail sia così semplice da utilizzare?

Se siete dei webdesigner alle prima armi e vi state perdendo fra le centinaia di definizioni che lo standard Css mette a disposizione, allora potete facilitarvi il lavoro (almeno parlando di stile applicato al testo) con questo utile disponibile online.

CSS Type Set è un'applicazione creata per assistere i neosviluppatori Css nello styling dell'oggetto font in una pagina web (credetemi però che è molto utile anche ai più esperti).
L'interfaccia, semplice ma efficace, è sviluppata in AJAX e permette di impostare le caratteristiche per il nostro testo in modo visuale (come faremmo ad esempio con un text editor), generando nel riquadro sinistro l'anteprima del nostro testo, e in quello destro il codice Css da inserire nel nostro foglio di stile (immagine in basso).


Comodo no?
ENJOY IT!!

Links:
Css typeset website

Se siete alla ricerca di un logo, o state cercando l'ispirazione giusta per crearlo, allora potete affidarvi all'esperienza di chi, prima di voi, ha creato dei marchi per grandi aziende, e che siamo abituati a vedere intorno a noi tutti i giorni.
In rete sono disponibili diversi siti che forniscono l'elenco dei loghi in vettoriali dei maggiori marchi mondiali, che possono essere scaricati in formato vettoriale.
Eccone 7 tra i più importanti:

Best Brands of the World

Logo Types 101 - Un Database si oltre 80,000 Loghi Vettorializzati

Logotypes.ru

Logotypes gratuiti su Designer.am

Image Corporate

AllFreeLogo (Richiede la registrazione)

Vectorportal - Una collezione di loghi sportivi e stendardi governativi e militari

Tutti noi creativi conosciamo bene l'importanza che ricopre la giusta scelta del font quando realizziamo un lavoro di grafica.
Ogni font è studiato per adattarsi ad uno specifico contesto semantico della scena in cui stiamo lavorando.
I trend moderni tendono a suggerire tipologie di font molto essenziali ed equilibrati nelle loro forme.
I loghi del web 2.0 sono un esempio tipico di come il font occupi un ruolo fondamentale se non esclusivo nel processo di creazione.
Il web mette a disposizione centinaia di font gratuiti, ma spesso la loro qualità è mediocre se non addirittura scadente; i caratteri presenti nei set a volte non sono disegnati proporzionalmente fra di loro e il kerning non è applicato in modo corretto. Inoltre spesso mancano di varianti (italic, bold ecc).
Anch'io ho avuto la sfortuna in passato di intallare un pacchetto di 600 fonts gratuiti presi da e-mule di cui ne ho utilizzato soltanto l'1% (e mi trovavo ogni volta a scorrerli tutti per trovare quello giusto).
Fortunatamente ho trovato un post in cui vengono segnalati 40 fonts (gratuiti attenzione) di eccellente qualità e ideali da utilizzare per il design professionale e la realizzazione di loghi.
Eccone alcuni raffigurati nell'immagine di esempio:


Belli, no?
Ok li trovate tutti (catalogati) visitando il sito www.smashingmagazine.com
ENJOY IT!!!

Se avete la necessità di vettorializzare un logo o un'immagine, ma non avete abbastanza tempo per farlo "a manina" utilizzando i classici strumenti offerti dai software, allora vale la pena di provare questa applicazione che sfrutta un algoritmo molto specializzato per tracciare le vostre immagini raster, il tutto comodamente online.

VECTOR MAGIC
Ci sono state varie discussioni su questo programma online, dove ci si chiedeva se potesse competere con in tradizionali vettorializzatori presenti all'interno di software come Illustrator.

Ecco quali sono i risultati ottenuti da alcuni test effettuati su loghi e immagini:

Risultati sulle Fotografie

Nell'immagine in basso si possono osservare i risultati ottenuti vettorializzando un'immagine di un fiore processandola prima a "qualità media" e poi in "alta qualità". E' evidente che nel secondo caso il software ha vettorializzato molti più particolari creando un'immagine più nitida, e naturalmente più grande in termini di dimensioni

Credo che comunque i risultati siano buoni in entrambi i casi, nel senso che l'immagine processata a media qualità ha una caratteristica apparenza stilizzata, che in alcuni casi può essere il risultato che si cerca, mentre la seconda risulta essere più fotorealistica (che senso ha vettorializzare una foto che si desidera utilizzare in maniera... fotorealistica??).

Le opzioni messe a disposizione da Vector Magic per modificare i risultati ottenuti sono molteplici e molto sofsticate, considerando che si tratta di un'applicazione online

Risultati sui Loghi

La vettorializzazione di loghi è molto utile quando abbiamo poco tempo a disposizione e i nostri clienti ci forniscono delle immagini a bassa risoluzione che dovranno essere utilizzate per lavori di stampa

Quando processiamo un logo in Vector Magic, abbiamo a disposizione un paio di opzioni in più rispetto all'immagine:

anche se il software riconosce automaticamente che tipo di immagine stiamo per processare, possiamo suggerire all'applicazione se le forme al suo interno presentano o meno un alias, se l'immagine sorgente è ad alta, media o bassa risoluzione (se parliamo di jpg intendiamo immagini con livelli di compressione diversi, che in alcuni casi generano sfocature o artifacts) e se è composta da più o meno di 12 colori.

La giusta combinazione di questi elementi influenzerà il risultato finale.

Ho fatto una prova utilizzando un'immagine fornita dal sito stesso e l'ho processata a bassa, media e alta risoluzione; ecco i risultati che ho ottenuto (cliccate sull'immagine per ingrandirla):

In questo caso, l'immagine di partenza era abbastanza grande (300 x 300px) da mettere in evidenza tutti i dettagli da vettorializzare, infatti i risultati sono molto simili tra di loro, tranne che in zone più ricche di particolari come l'occhio. Nel complesso un risultato soddisfacente.

Ho eseguito lo stesso procedimento utilizzando la stessa immagine ma scalata a 150 x 150 px e questo è il risultato restituito:


Come potete osservare, il risultato è pessimo: tranne che per la versione in high resolution, dove si sono conservati in maniera soddisfacente i capelli del soggetto in tutto gli altri casi i dettagli sono scomparsi o si sono deteriorati.
Nulla da rimproverare al software, anche volendo tracciare i dettagli manualmente sarebbe molto difficile ricostruire l'immagine originale.
Ricordate comunque che per avere risultati eccellenti è necessario utilizzare immagini con risoluzioni di almeno 300ppi, e per lo più non dovremmo utilizzare queste immagini per stampe di grandi dimensioni, evitando di mettere in evidenza dettagli fuori luogo.

Link: www.vectormagic.com

Oggi voglio riportare, per la gioia di webmaster e di chi ne sta intraprendendo la carriera, una lista di layout e templates di alta qualità e soprattutto interamente realizzati in CSS (tableless per intenderci). I template possono essere usari liberamente per scopi commerciali, anche se è buona norma dare un'occhiata alla licenza, dal momento che è probabile che cambi nel tempo.

CSS Layouts

• Layout Gala- Un set di 40 layouts professionali in Css, tutti con una ottima compatibilità con i browser.
  
  
  



• CSS Layouts - un'altra grande collezione di layout CSS
  
• Dynamic Drive CSS Layouts – layout a 2 colonne, 3 colonne, fisso, fluido...
• Nice and Free CSS Layouts – 12 CSS layouts gratuiti
  .
  
• Strictly CSS – 10 css layouts.
• Maxdesign - Una vasta gamma di layout di pagine in CSS, a 2 o 3 colonne, gratis da utilizzare
• CSSplay - Stu Nicolls presenta decine di layout professionali gratuiti. Importante leggere le note di copyright prima del loro utilizzo.
• ThreeColumnLayouts, by CSS Discuss - Collezione di templates a 3 colonne.
• CSS Intensivstation - Layouts and templates Css per il CMS Flux..
• CSS Tinderbox - Templates CSS/XHTML che i web designers/developers possono utilizzare come base per i loro progetti.
• Jimmy Lin - 8 semplici templates CSS/XHTML.
• Little Boxes - 16 Layouts
  
  
• Ruthsarian - CSS layouts a menu a tendina basati su CSS.
• Mitchbryson – 8 layouts.
• TJK Design - 8 layouts.
• csscreator - Generatore di layout CSS.
  

CSS Templates

• Open Source Web Design - OSWD - più di 2000 templates gratuiti per tutti i gusti.
  
  
• Open Design Community – centinaia di templates XHTML e CSS.
• Ex-Designz - Al momento sono presenti più di 330 templates XHTML-CSS.
• Solucija - 24 Templates.
• Free CSS Templates - Un altra collezione con più di 240 templates.
  
  
• Effex-Media - Website Templates realizzati da Web Designers, tutti gratuiti.
  
• Dezinehub - Templates di siti e loghi gratuiti.
• Free Website Templates – Templates gratuiti by Andreas Viklund. Gratis per qualsiasi utilizzo senza alcuna limitazione.
• Free Templates Online - Risorsa online di templates gratuiti.
• Free Layouts - Templates web, flash e per blog gratuiti
  
  
• FreeWebsiteTemplates -Website templates gratis.
• Interspire - Templates per siti, newsletter e loghi, tutto naturalmente gratis
• Mollio - Templates in CSS/HTML. I Templates sono rilasciati secondo 3 diverse licenze: Creative Commons, GPL and CPL .
• Zymic - Templates di siti web gratuiti.
• Open web design - Web designs gratis.
• CSS Design Templates - Templates con licenza "Creative Commons Attribution 2.5 "
  
  
• cssfill - CSS layouts & templates. Leggere la sezione info prina di utilizzare questi templates.
• TemplateWorld - Templates W3C-compliant con licenza Creative Commons Attribution 2.5 .