La grafica grunge

Intro

Questo sito è dedicato allo stile grafico grunge. Il termine è difficilmente traducibile in italiano e serve ad indicare uno stile in cui volutamente si da alla grafica di una pagina web un aspetto consumato, usurato, invecchiato, come ho cercato di fare in questo sito.

Si parte da qualche breve premessa storica con alcuni cenni al ben più famoso genere musicale grunge. Seguono dei tutorials su varie tecniche ed “effetti distruttivi e di invecchiamento” che possono essere utilizzati per creare lo stile tipico del grunge. Il programma grafico di riferimento è Photoshop, ma è possibile produrre effetti grunge anche con altri programmi bitmap come Paint Shop Pro o The Gimp.

Il sito e stato programmato e validato in html 4.01 transitional e il codice html non contiene attributi relativi alla presentazione grafica che è creata completamente con i CSS, compreso il layout. Dal menu si possono selezionare vari stili grazie ad un switch in javascript.

Per contatti o per segnalazione di siti in stile grunge, consigli, etc: info chiocciola pixelzone punto it

 

Infoblog

2.01.06: modificata la grafica dello stile base; l'interfaccia è ritagliata dalla foto di una lastra metallica graffiata ed arrugginita e l' header è ispirato alle signatures dei forums americani. Chi vuole approfondire può fare una ricerca sui motori con i termini “grunge signature tutorial”.
12.12.05: ho aggiunto i links di altri due siti stile grunge trovati in rete. Molto interessante il sito in flash del gruppo musicale GWC; notare l'uso di strisce di nastro adesivo, clips metalliche, scansioni di carta invecchiata di vario tipo. L'utilizzo di textures di materiali vari o addirittura di foto o scansioni è caratteristico dello stile grunge.
Ho aggiunto anche una nuova skin nella quale è stata ultilizzata per la colonna laterale e il footer una texture tipo carta per imballaggi.

30.11.2005: sono state aggiunte due nuove pagine, una che approfondisce gli aspetti tecnici dei pennelli personalizzati creati con Paint Shop Pro e Gimp ed un'altra dedicata ai filtri prodotti da terze parti utili per ottenere effetti grunge.


Definizione, note storiche, esempi nel web

Il termine grunge (la u si pronuncia come una a stretta) in inglese americano significa sporcizia (grungy è l'aggettivo che ne deriva). Come già detto in grafica e web design serve ad indicare un particolare stile che tende a dare una sensazione di disordinato, consumato, sporco. Si tratta solamente di una sensazione perché la grafica grunge non è il prodotto di un lavoro sciatto ma anzi di un lavoro ancora più meticoloso di quello tradizionale.

Grunge è un termine che viene adoperato anche per indicare una corrente particolare della musica rock nato a Seattle (USA) alla fine anni '80 tanto da essere indicato anche come Seattle Sound . Questo genere si è sviluppato fino alla metà degli anni '90 ed ha avuto tra i principali protagonisti il gruppo dei Nirvana. Convenzionalmente si fa coincidere il declino di questo genere musicale con la morte di Kurt Cobain, leader dei Nirvana (1994).

Ovviamente la grafica grunge ha fatto il suo ingresso anche nel web con la realizzazione di siti di notevole impatto ed interesse.

Segnalo alcuni links di siti creati in stile grunge:

html/CSS
http://www.airios.com/blog/ attualmente inattivo

http://www.jeffsdigital.com/index.php

http://www.arcinspirations.com/trio/

http://bombedout.com/

http://www.mattbrett.com/
Flash

http://www.2advanced.com/portfolio/joshtodd/
http://www.bonfire.de/
http://www.24-7media.de/

http://www.gwcmusic.com/

http://www.fivecentstand.com/
Si noti negli esempi citati l'effetto di usura, di disordine, di erosione ed invecchiamento dato alle immagini e il largo impiego di immagini fotografiche o scansioni di materiali vari come carta, cartone etc.

Chiarito cosa si intende per stile grafico grunge, vedremo nelle pagine successive quali sono le tecniche di realizzazione dei vari effetti che lo compongono di cui la principale consiste nell'uso di appositi pennelli personalizzati di programmi per grafica bitmap come Photoshop, Paint Shop Pro, The Gimp.


Grafica vintage

Esite anche un altro stile grafico che non possiamo non citare se non altro per le analogie con lo stile grunge, la grafica vintage o retro. Vintage in inglese è un sostantivo che significa “annata”. In italiano si può tradurre con “d'epoca”. Con questo termine si indica uno stile in cui si fa uso di fonts anni 40-50, vecchie foto ed illustrazioni, clip arts anni 40-50, effetti di invecchiamento. Le analogie col grunge ci sono , almeno per quello che riguarda l'invecchiamento delle immagini, ma in grafica vintage non si usano fonts grunge e nemmeno effetti grafici distruttivi come ruggine e crepe. Mi rendo conto che la classificazione tende ad essere un pò troppo scolastica e che molte volte tra i due generi può non esserci una linea netta di demarcazione.
Dei siti che ho citato tra gli esempi uno sicuramente più vintage che grunge è: http://www.jeffsdigital.com/index.php