Articoli Recenti

Articoli archiviati nell' Argomento "grafica"

Disegnare rapidamente un wireframe con Google Docs

24 maggio 2010

ATTENZIONE: Questo articolo è stato scritto 3 mesi 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 un anno e mezzo 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 2 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 2 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 2 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 2 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…)

Anteprima dei pennelli di Photoshop con ABRView

4 febbraio 2008

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

In rete si trovano moltissimi siti da cui scaricare gratuitamente pennelli per Photoshop: volete qualche link?

Brusheezy
Deviantart
Getbrushes
Magurno
MissM
Photoshopsupport
Vbrushes

Per utilizzare un pennello tra i tanti files .abr scaricati è necessario caricarlo attraverso le opzioni della sezione Pennelli in Photoshop, ma se volete soltanto guardarne l’anteprima, magari per ritrovare il pennello giusto invece di aprirli uno ad uno, potete ricorrere ad ABRView (via).

ABRViewer visualizza anteprima pennelli PhotoshopDisponibile sia in versione exe per Windows sia in versione jar per Mac/Linux users, ABRView è una piccola applicazione alla quale, una volta avviata, diamo in pasto una directory di pennelli e, al doppio clic sul file .abr, possiamo vedere generata l’anteprima di tutti i pennelli contenuti nel set.

Il bottone Adjust Preview Options, ci dà la possibilità di personalizzare le opzioni di visualizzazione dell’anteprima, dalla dimensione ai colori, in maniera molto semplice e veloce.

Niente male per una utility gratuita e multi-piattaforma, che potete anche vedere in azione in questo video-tutorial.

Un piccolo plugin per avere Kuler nella scelta dei colori :P

30 gennaio 2008

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

Grafici, web designers e quanti si occupano di comunicazione visiva on/offline sanno benissimo quant’è difficile trovare la giusta combinazione di colori per la realizzazione di un progetto grafico e, oltre ad affidarsi al proprio talento, sicuramente conoscono già i numerosi generatori di palettes presenti sul web.

Uno dei nostri preferiti è senza dubbio Adobe Kuler, che raccoglie migliaia di combinazioni di colori filtrabili per tags e parole chiave, ovviamente scaricabili e che, oltretutto, permette ad ogni utente di creare palettes personalizzate e salvarle nel proprio profilo.

E per rendere la selezione dei colori da Kuler ancora più agevole, vale la pena di fermarsi a scoprire Mondrianum, un piccolo plugin, attualmente in beta scaricabile solo per MacOSX 10.5 (Leopard), che aggiunge un altro modo di scegliere colori oltre a quelli offerti da Apple (ruota, cursori, tavolozze, immagini e pastelli). Mondrianum, quindi, non funziona soltanto in Photoshop, ma in tutte le applicazioni in Leopard che utilizzano i selettori di colori Apple, come iLife, iWork, etc..

Vediamo come far funzionare Mondrianum in Photoshop (via Bittbox):Installare Mondrianum plugin per MacOSX 10.5 - Leopard

1. Scarica Mondrianum e installa l’applicazione in maniera automatica, facendo doppio clic sul file dell’installer oppure manuale, trascinando Mondrianum.colorPicker in /Libreria/ColorPickers

2. In Photoshop fai click su Preferenze>Generali (mela + K) e alla voce Selettore Colore scegli Apple invece che Adobe
Selettore colore>Apple

3. Nella finestra di Photoshop, facendo click sul colore di primo piano apri il selettore colori di Apple, ai quali sarà stata aggiunta una nuova icona, quela di Mondrianum appunto
(continua…)



Web Analytics