Articoli recenti

Articoli archiviati nell' Argomento "grafica"

Vi piacciono i web fonts di Google? Ecco come utilizzarli offline!

14 luglio 2011

ATTENZIONE: Questo articolo è stato scritto 6 mesi fa. Alcuni links e argomenti trattati potrebbero non essere più validi.

I Font di Google sono una collezione assolutamente impressionante di web font che si possono usare nelle pagine HTML senza alcuna restrizione.

Questi caratteri non sono soltanto più belli da vedere dei soliti Arial e Verdana, ma il rendering è molto più leggibile in quanto progettato specificamente per il web. Inoltre, tutti i web font di Google sono offerti con Licenza Open Font, che consente di usarli anche in progetti commerciali.

I Font di Google sono ospitati su google.com e tutto quello che si deve fare è includere poche righe di CSS (o Javascript) per incorporare uno o più di questi caratteri nelle pagine web.

Ma come fare per utilizzare i Font di Google sul nostro computer?

Niente di complicato! Poiché tutti i font di Google sono Open Source, siamo liberi di scaricarli e installarli sul computer locale. Una volta che i font vengono installati, è possibile usarli in Word, Photoshop, Open office o altri programmi, come qualsiasi tipo di carattere.

Ci sono due modi per scaricare i font di Google:

Se si desidera avere una copia di tutti i font di Google a livello locale, è sufficiente andare su googlecode.com e scaricare tutta la directory utilizzando strumenti come HTTrack o Wget. L’intera collezione pesa circa 700 MB, quindi può impiegare un po’ di tempo per il download.

L’altro approccio consigliato è il download selettivo. Aprite la directory di Google Font, scegliete il carattere (o i caratteri) preferito e aggiungeteli a una collezione. Dopo aver raccolto i font desiderati, clic sul link “Scarica la tua collezione” e si ottiene un file .zip contenente tutti i font richiesti in formato TTF.

Basta decomprimere la raccolta e, come per ogni font che si installa, trascinare i file TTF singoli nella cartella dei font.

TIP: Come sapete, se si crea una presentazione con Google Font (o altri fonts particolari) e la si invia a qualcun altro che non abbia questo carattere installato, il font non può essere visualizzato e la presentazione avrà, probabilmente, una resa molto diverso dall’originale.

Dato che i Font di Google sono Open Source, possiamo allegare una copia dei caratteri usati con la presentazione o, meglio ancora, ricordiamoci di incorporare i caratteri nel documento prima di condividerlo.

Personalizzazioni in Gmail: come creare il proprio tema

15 aprile 2011

ATTENZIONE: Questo articolo è stato scritto 9 mesi fa. Alcuni links e argomenti trattati potrebbero non essere più validi.

Finalmente Gmail ha annunciato che i propri utenti hanno la possibilità di inserire un’immagine di sfondo personale nella casella di posta.

Nonostante la scelta dei temi sia ampia, fin’ora il massimo della personalizzazione è stata la scelta delle combinazioni di colori, ma da oggi possiamo andare in Impostazioni > Temi per creare il nostro tema personale. Parliamo di tema perchè è possibile non soltanto aggiungere un’immagine di sfondo e proprio piacimento, ma si può scegliere un colore personalizzato praticamente per qualsiasi elemento dell’inbox, dal colore dei link, al box di sfondo dei messaggi, alla sidebar e così via.

Le immagini possono essere pescate dal proprio account Picasa oppure caricate dal pc: nel secondo caso, i file vengono automaticamente aggiunti nell’album Drop Box di Picasa Web. Se decidiamo di togliere le foto da Picasa, possiamo rimuoverle senza che il tema subisca cambiamenti.

Disegnare rapidamente un wireframe con Google Docs

24 maggio 2010

ATTENZIONE: Questo articolo è stato scritto circa un anno e mezzo fa. Alcuni links e argomenti trattati potrebbero non essere più validi.

Sul blog di Google Docs c’è un interessante post di Morten Just, product manager di Vodafone Danimarca, che ha sperimentato un modo estremamente produttivo di utilizzare i documenti collaborativi di Google.

La necessità professionale di condividere schemi e wireframes con team distribuiti in altre sedi europee della sua azienda era già comodamente gestita attraverso la collaborazione sullo stesso documeno di Google. Tuttavia Morten ha fatto un passo in avanti rispetto a questa interazione, preparando il terreno per velocizzare il processo di decisione e sketching dell’architettura del sito.

Wireframing kit

Wireframing kit

Dai modelli realizzati ha estratto barre di scorrimento, pulsanti e cursori, mettendoli al di fuori della tavola da disegno, pronti per essere duplicati e trascinati nel wireframe.

Ecco qualche esempio:
Wireframe pagina generica
Wireframe mobile (altri wf per iphone disponibili sul suo blog)

Per iniziare a lavorare su un wireframe
1. Apri il modello che desideri utilizzare
2. Fai clic su ‘Log in’ in alto a destra
3. Scegli File > fai una copia
4. Realizza il wireframe

Impacchettare più wireframes
Quando si hanno più wireframes singoli, può essere utile “impacchettarli” in un unico documento che può essere inviato in giro, fatto stampare, o presentato nelle riunioni.

Poiché Google non ha ancora previsto un modo per importare un disegno in una presentazione, ecco un trucco utilizzando la funzione Clipboard (Appunti web ):

1. File > Nuova presentazione, per aprire una presentazione in bianco nella nuova finestra.
2. Torna al disegno e seleziona tutto.
3. Fai clic sull’icona della Clipboard > Copia nella clipboard
4. Torna alla presentazione e incolla il disegno tramite gli appunti web.

La cosa interessante è che dopo questo passaggio saremo ancora in grado di modificare il disegno importato.

Costruire un repository
Morten auspica la costruzione di una sorta di wireframe repository in Google Docs. Per ora, ha realizzato una cartella condivisa dove aggiunge stencil e altri contribuiti degli utenti; eccola:

Wireframe kit
(cartella condivisa)

Esercizi di stile

3 dicembre 2008

ATTENZIONE: Questo articolo è stato scritto circa 3 anni fa. Alcuni links e argomenti trattati potrebbero non essere più validi.

Alcune correnti artistiche sono state così esageratamente originali da resistere indisturbate allo scorrere del tempo. Non è raro che anche gli artisti digitali cerchino di imitare, o almeno di ispirarsi, ai grandi innovatori del passato, riscoprendone tratti, stili ed idee ed associandoli, ovviamente, ai nuovi strumenti digitali di cui disponiamo.

Un caso originale è quello di Román Cortés, uno sviluppatore decisamente creativo che ha realizzato un programmino per trasformare le nostre foto in quadri di autori dallo stile inconfondibile.

testing Arcimbolder

testing Arcimbolder

Avete presente l’Arcimboldo, padre di quelle famose teste un po’ grottesche realizzate mixando frutta e verdura? Per non parlare delle pennellate di Van Gogh!

Bè, Arcimbolder vi permette proprio di emulare l’originalità di questi artisti senza il minimo sforzo: scaricare il programmino, lanciatelo e dategli un pasto una foto qualsiasi; scegliete la risoluzione da ottenere, lo sfondo e il “pacchetto” di stile artistico da applicare. In pochi secondo ha inizio un’attività di rendering dell’immagine che, lentamente, la trasforma secondo lo stile del pittore scelto. In qualsiasi momento è possibile bloccare il rendering e salvare un’istantanea della foto generata, per poi riprendere il procedimento di trasformazione (video su YouTube).

L’otput è davvero impressionante, provare per credere!

Arcimbolder è attualmente rilasciato per Windows XP e Vista, e nonostante vi sia in programma una release per MacOSX (e anche di altri pacchetti di stili), siamo riusciti ad utilizzarlo grazie a Crossover Mac.

(via emob)

Non ti piace la nuova favicon di Google? Proponi la tua!

9 giugno 2008

ATTENZIONE: Questo articolo è stato scritto circa 3 anni fa. Alcuni links e argomenti trattati potrebbero non essere più validi.

Non sono state poche le critiche mosse in questi ultimi giorni alla nuova favicon scelta da Google: sarà perchè ogni cambiamento è sempre un po’ destabilizzante o semplicemente perchè abbiamo bisogno di tempo per abituarci a riconoscere tra i tabs aperti la nuova iconcina (non molto visibile, questo c’è da dirlo).

Tuttavia Google, attento ai feedback dei suoi milioni di utenti, anche stavolta lascia aperta la possibilità di contribuire a realizzare una favicon migliore: fino al 20 giugno 2008 infatti, è possibile inviare a Google un’immagine non più grande di 16 x 16 px che incorpori almeno una delle lettere del brand e che sia facilmente identificabile da qualsiasi dispositivo di fruizione (web, mobile).

la famiglia di nuove icone di GoogleGoogle infatti ha attraversato un processo di redesign delle favicon per creare una “famiglia” di icone che si adattassero meglio all’iPhone e ad altri dispositivi mobili, mantenendo ben riconoscibile e coordinata l’identità di marca (vedi foto via Googleblog).

Questo il form da compilare per inviare la propria favicon.

E sempre in tema di feedback, Google sta chiedendo aiuto ai suoi utenti anche attraverso un altro strumento, la scheda Labs che è comparsa da Gmail Labsqualche giorno nelle impostazioni di Gmail. Il laboratorio è una specie di “palcoscenico” per i numerosi impiegati di Google che, nel loro famoso 20% di tempo dedicato a progetti indipendenti, hanno sviluppato nuove funzioni di Gmail ancora in beta.

L’idea di Google è di consentire agli utenti di attivare a scelta queste nuove opzioni, testarle ed inviare il proprio feedback, in base al quale Google poi deciderà quali applicazioni saranno integrate in Gmail di default.

Attualmente non ci sono funzioni davvero utili, se non i links veloci o qualche espediente grafico interessante. Ci dispiace, ma giocare a Snake in Gmail non è nelle nostre priorità; avremmo sicuramente preferito altro, come ad esempio la notifica di lettura dei messaggi…

E voi, qual è la funzione di cui sentite più la mancanza in Gmail?

Tipografia creativa per tutti

14 aprile 2008

ATTENZIONE: Questo articolo è stato scritto circa 3 anni fa. Alcuni links e argomenti trattati potrebbero non essere più validi.

Fontstruct è una di quelle applicazioni web a dir poco addictive, che uniscono all’aspetto puramente creativo dei caratteri tipografici un lato “sociale” fatto da gallerie di font votabili e scaricabili a costo zero.

Fontstruct è infatti un sito dove, dopo essersi registrati, si ha a disposizione una tavola da disegno in Flash ed una molteplicità di strumenti per creare un font personale, cominciando da zero oppure da alcune forme di base messe a disposizione. Ogni tool ha la sua corrisponente scorciatoia da tastiera, dunque l’utilizzo di righe, penne, gomma e così via è assolutamente semplice ed usabile.

I set di caratteri creati si possono tenere privati oppure si sceglie di renderli pubblici (con l’attribuzione di una licenza Creative Commons) ed inserirli nella galleria dei font che possono essere votati, commentati, esportati in True Type e scaricati dagli altri utenti; i font possono essere anche utilizzati come base di partenza per una nuova elaborazione o modifica secondo i nostri gusti.

Ovviamente una buona leggibilità passa per fonts chiari e semplici, ma se state cercando spunti per un logotipo o un progetto che richiede una vena creativa, Fontstruct è una buona base di partenza, anche perchè finalmente possiamo trovare qualche font originale e non i soliti caratteri che popolano le più famose gallerie in rete (es. DaFont & co).

via WebNova

Soddisfatti della versione Express di Photoshop?

31 marzo 2008

ATTENZIONE: Questo articolo è stato scritto circa 3 anni fa. Alcuni links e argomenti trattati potrebbero non essere più validi.

Non è la prima volta che parliamo di applicazioni web based per l’editing delle immagini, vista la crescente esigenza degli utenti di gestire con facilità gli scatti digitali e, d’altra parte, l’ampia scelta di servizi gratuiti che consentono tali modifiche.

Homepage di Photoshop ExpressStavolta ad entrare in campo è nientemeno che Adobe la quale, come annunciato, ha da poco lanciato Photoshop Express, ovvero la versione web di uno dei più famosi software di photo editing in commercio.

Di recensioni se ne trovano a bizzeffe, quindi andiamo subito al sodo.

COSA CI PIACE
- interfaccia intuitiva e semplice da utilizzare (es. drag & drop);
- tutti i tools per il fotoritocco di base (rotazione, ridimensionamento, conversione colori, occhi rossi, esposizione, etc…);
- effetti “speciali”: ad es. Pop Color blocca il colore di sfondo di un’immagine e consente di modificare la tonalità del soggetto, così da farlo risaltare in maniera personalizzata; Sketch disegna le immagini come schizzi a matita, Distort realizza varie deformazioni;
- modifiche reversibili, ovvero la manipolazione delle immagini non è definitiva e in ogni momento si possono rimuovere l’effetto o il cambiamento applicati;
(continua…)

Effetti sulle immagini [for dummies]

5 marzo 2008

ATTENZIONE: Questo articolo è stato scritto circa 3 anni fa. Alcuni links e argomenti trattati potrebbero non essere più validi.

Non sono una novità i tools per aggiungere piccoli ritocchi o effetti alle immagini sul web: oggi ne segnaliamo alcuni trovati su killerstartups sempre attuali, quali appunto lo stile polaroid, semplice e dall’effetto gradevole, le note in stile Flickr, ovvero l’aggiunta di baloon segnaletici alle immagini, il riflesso, ovviamente sempre attraverso applicazioni online (niente da scaricare e installare insomma!).

EFFETTO POLAROID

Instantizer consente di caricare un’immagine selezionandola dal proprio hard disk, aggiungere una descrizione e scegliere i gradi per la rotazione della foto: l’immagine generata è una polaroid con relativo link per la condivisione o il download (valido 24h).

Photo-notes realizza praticamente la stessa cosa, con in più l’opzine di scelta del colore del testo scritto e un piccolo modulo di invio via mail della polaroid creata.

Leggermente più dettagliato Polaroid-o-nizer, che offre la sceta del colore di sfondo dell’immagine, l’inserimento delle coordinate xy, tuttavia non permette di fare l’upload delle immagini ma solo di inserire l’URL di foto già caricate online.

NOTE STILE FLICKR

Questo effetto si ottiene con un pizzico di impegno in più, grazie al servizio Taggify (via puntogeek). Dopo essersi registrati, si ha la possibilità di modificare un widget di Taggify secondo le proprie preferenze di colori e proprietà e copiare/incollare il codice generato nel body del proprio blog. Si deve anche trascinare sulla barra dei segnalibri un bookmarklet di Taggify.

Effettuata correttamente questa procedura, quando si pubblica un’immagine a cui si vuole aggiungere una etichetta in sovraimpressione, basta cliccare il widget per aprire l’editor di Taggify ed inserire le informazioni da aggregare alla foto, che saranno visibili a tutti i navigatori del sito (vedi la demo).
(continua…)