1 Create From Scratch in Photoshop

If you have a tablet, you can simply draw the sketch by using the brush tool.

Don’t Have a Tablet?

If you don’t have a tablet, you can create the artwork in Adobe Illustrator and then imitate a hand drawing effect in Photoshop.

First draw a vector illustration. Then import it in Photoshop. Use a grungy brush and gently erase select parts of the image. Use the Blur tool to create the smug effect.

2 Scan It

The easiest way — scan the drawing and set the layer blending mode to Multiply.

Invert Color

If you want to have a white color stroke instead of black — go to menu Image > Adjustments > Invert (or press shortcut Cmd+i) and then select Screen blending mode.

Step It Up: Create Color Gradients

What if you want more than just a black or white stroke (ie. colors gradients)? Then you will have to extract the drawing from the white background. A simple way to do this is by using alpha channel.

• Copy (Cmd+C) the drawing.
• In the Channels palette, create a new channel. Then paste the drawing in the new channel.
• Invert (Cmd+i) the channel layer.

Go back to the Layers palette, create a new layer. Go to menu Select > Load Selection. In the Load Selection prompt box, select Channel: “Alpha 1″ (which is the name of the alpha channel I created earlier).

Shortcut Tip: the shortcut for loading a channel selection is Cmd + Opt + any number key (ie. 1, 2, 3). Learn more Photoshop shortcuts.

Fill Selection

With the channel selection loaded, you can fill it with any color.

Using It In The Design

For the purpose of this tutorial, I’m going to show you how to incorporate your hand drawing on a female model (the photo was purchased from iStock).

1. First, cut out the model.

2. Fill the background with some sort of light glowing gradients.

3. Paste the drawing on top of the model. Lock the layer transparency. Play around with the color gradients.

4. Duplicate the drawing in the background to add more details to the image.

All’interno di siti come Yahoo!, Google e Amazon le «eastern eggs» raggiungibili solo con procedure speciali

La pagina di David Risher su Amazon

MILANO - Quasi 24 milioni di persone hanno scaricato e installato il nuovo browser gratuito Firefox 3.
Ai più sono, tuttavia, sfuggite le personalissime e particolari frasi di benvenuto del robottino di Firefox - ben celate dagli sviluppatori del browser. Infatti, se nella barra dell’indirizzo di Firefox 3 si digita “about:robots” (in italiano: “sui robot”) sulla pagina compare l’androide di latta con gli occhi scintillanti accompagnato da un testo assurdo quanto enigmatico: “Gort! Klaatu barada nikto!: Benvenuti umani. Veniamo in pace. I robot non possono danneggiare un essere umano né, attraverso l’inazione, permettere che un essere umano venga danneggiato. I robot ne hanno viste cose che voi umani non potreste immaginarvi. I robot sono gli amici di plastica con cui è bello stare. I robot hanno scintillanti fondoschiena metallici che non dovrebbero essere baciati. E hanno un piano.” Le frasi, si è scoperto, sono tratte dalla letteratura e da alcuni film di fantascienza: “Gort! Klaatu barada nikto!”, per esempio, è una citazione dal film “Ultimatum alla Terra” del 1951.

LO JODEL DI YAHOO! - Se poi vi trovate su yahoo.com e provate a cliccare col mouse sul punto esclamativo del logo Yahoo!, ciò che sentirete è lo jodel “yahoooooooo!” cantato dall’americano Wylie Gustafson. Nel 1996, il cantante, aveva composto, per conto di una piccola impresa - che in seguito sarebbe diventata una delle più grandi e conosciute su Internet - un motivetto, simile ai canti tirolesi, utilizzando la parola “Yahoo!”, e aveva ricevuto la modesta somma di 590 dollari come compenso. La canzone è divenuta da quel giorno un vero e proprio marchio del portale Yahoo!, ed è stata utilizzata per tutti gli spot pubblicitari e le campagne radiofoniche e televisive della società. Wylie Gustafson citò, perciò, in giudizio Yahoo! per l’uso ininterrotto - dal 1996 ad oggi - da parte della società, dello jodel da lui creato. Le due parti raggiunsere in breve tempo un accordo extragiudiziario e a 12 anni di distanza la sua voce continua ancora ad allietare gli utenti del sito.

I NINJA DI GOOGLE READER - Anche in Google Reader, uno tra i tanti software specializzati nella aggregazione di feed da varie fonti, si nasconde una sorpresa: se entrate nel vostro account su Google Reader e provate a digitare questa combinazione di tasti in sequenza: “freccia su - freccia su - freccia giù - freccia giù - freccia sinistra - freccia destra - freccia sinistra - freccia destra - B - A”, ovvero “↑ ↑ ↓ ↓ ← → ← → B A”, il cosidetto “Konami Code”, ecco che compare improvvisamente uno strano ninja nella parte del menu.

I ninja di Google Reader

L’ARMATA DEI TEDDY-BEAR - Uno di questi originali contenuti, solitamente di natura faceta e del tutto innoqua, che i progettisti o gli sviluppatori di un software nascondono nel prodotto stesso, è presente anche in Picasa, il programma gratuito di foto di Google. Premendo contemporaneamente “Ctrl + Shift + Y” la pagina verrà invasa da orsetti di peluche, i “Teddy Thomas”. Ripetendo la combinazione ne appariranno sempre di più - una vera e proria armata. Come spiega il blog di Google, il “Teddy Thomas” appartiene al fotografo americano Noah Grey, che ha contribuito allo sviluppo di Picasa: «Un vecchio amico gli aveva regalato uno di questi peluche, che da 15 anni ha un posto importante nella sua vita».

IL COLLABORATORE NASCOSTO DI AMAZON - Chi è David Risher? E’ stato il vice capo di Amazon, finchè nel 2002 decise di lasciare la società per andare ad insegnare nell’università di Washington. Fino ad oggi una pagina nascosta sul portale di Amazon.com ricorda il fidato collaboratore. Nella directory del sito (http://www.amazon.com/gp/site-directory/ref=gw_m_b_as), in fondo alla pagina e sotto la nota del copyright, c’è un’immagine trasparente che se cliccata rimanda al divertente sito web di congedo di Risher.

LE STRANE PAGINE 404 - Chi sbaglia a scrivere e, volendo digitare magari “corriere.it”, finisce su una pagina inesistente (come per esempio http://www.corriere.it/404) si trova davanti la sobria comunicazione “Errore: la pagina che cercate non è stata trovata.” Ciò può essere realizzato anche in maniera più criptica - e divertente.

La pagina 404 dedicata al Corriere

Come hanno fatto gli sviluppatori di videogame “3D Realms” che mostrano - grazie a un generatore di combinazioni (http://www.3drealms.com/corriere) - delle “pagine non trovate” con straniate foto di collaboratori e programmatori al lavoro, mentre bevono il caffè o mangiano una pizza, e altri particolari dei loro uffici. Le immagini sul sito “40Fnord - Page Not Found” sono poi corredate da frasi senza alcun senso: “Devi incontrare un parente morto a Hongkong e procurari un peluche…”. Umorismo da sviluppatore, appunto.

Elmar Burchia

Realizzare un sito web è un processo delicato che vede in campo due realtà molto diverse:

• Il cliente: con le sue esigenze, i suoi dubbi e il suo budget
• Gli sviluppatori: con le loro conoscenze e il loro modo di lavorare

Spesso (preticamente sempre ) il cliente non ha le competenze minime necessarie ad interagire o capire le necessità dello sviluppatore e questo crea regolarmente fraintendimenti e aspettative erronee.

Per quanto sia compito del professionista rendere semplice ed indolore lo sviluppo del progetto, è interesse del cliente fare chiarezza e acquisire le nozioni basilari per interagire con chi gli fornirà il sito web. Per questo ed altri motivi vi segnaloquesta utilissima guida per il cliente.

articolo tratto da semanticstone.net/blog

Secondo tale definizione una pagine web fruibile è:

• Possiede un interfaccia di navigazione semplice ed efficiente
• Restituisce un’esperienza soddisfacente
• Risponde alle esigenze informative del’utente

Lo scopo di questo articolo è di esprimere alcune considerazioni circa la fruibilità delle pagine web visualizzate su media differenti; su quali siano gli aspetti da considerare in fase di progettazione in modo da preservare la qualità del proprio layout e la fruibilità dei contenuti.

Il formato nella progettazione

Nella progettazione cartacea la scelta del formato è un aspetto importante che vincola gli step successivi e l’aspetto generare che il progetto assumerà. Per formato si intende la dimensione e le proporzioni del “supporto” da adottare nella realizzazione di un progetto.

Questa scelta è dettata da:

• natura e funzione della comunicazione
• vincoli tecnici legati al supporto e alle sue modalità produttive
• aspetti economici

Nel webdesign la “scelta del formato” è limitata “alla fonte” dalla dimensione dello schermo che dovrà visualizzare il progetto. La risoluzione di chi fruisce il sito web è ovviamente variabile e rende difficile per il designer proporre un esperienza uniforme a tutti gli utenti.

Oltre alla risoluzione video, di cui parleremo fra poco, si deve fare i conti con la convenzione consolidata secondo la quale la pagina web debba estendere i propri contenuti verso il basso, assumendo di fatto un formato verticale che può essere o meno estremizzato in base al tipo di progetto su cui stiamo lavorando.

In base al tipo di effetto che si intende realizzare si preferirà estremizzare la verticalità del layout oppure delocalizarlo a sinistra o a destra o ancora sfruttare tutto lo spazio disponibile magari adottando un layout fluido.

La risoluzione video

Come si può vedere da questi dati la risoluzione media di visualizzazione delle pagine è ormai assestata a 1024×768 (fonte: W3Counter). Tuttavia, con il diffondersi di dispositivi alternativi al canonico binomio desktop/laptop e il consolidarsi di tecnologie delle reti wi-fi e wimax, queste percentuali sono destinate a cambiare.

Ad oggi ci troviamo ad affrontare sostanzialmente 3 grandi gruppi di dispositivi:

• Subnetbook, portatili e sistemi desktop
• Cellulari, smarthphone e palmari
• Console e sistemi TV

I CSS e l’attributo media

Fortunatamente l’uso consapevole dell’attributo media ci permette di ottenere un certo controllo nella visualizzazione del nostro sito web.

Grazie all’attributo media possiamo servire un css specifico ad ognuno di questi gruppi. L’attributo media può accompagnare sia l’elemento <link> che l’elemento <style>.

<link type=”text/css” media=”handheld” href=”style.css” />

<style type=”text/css” media=”handheld”>
…
</style>

Il valori possibili per l’attributo media sono:

• all si applica a tutti i dispositivi di visualizzazione (comportamento di default).
• screen usato per la visualizzazione sui normali browser web.
• tv usato per la visualizzazione su schermi tv.
• handheld. usato per i palmari.
• print applicato nella stampa della pagina.
• projection usato nella visualizzaizone via proiettore.
• aural usato per i dispositivi a sintesi vocale.
• braille usato per supporti basati su braille.
• embossed. per stampanti braille.

Tuttavia per garantire l’accessibilità dei dati e l’usabilità dell’interfaccia è necessario prendere alcune precauzione nella strutturazione del nostro layout

Linee guida comuni

Se ieri le linee guida per l’accessibilità erano fondamentali per permettere agli utenti diversamente abili di accedere alle informazioni, oggi divengono doppiamente importanti perché assicurano ad una fascia sempre più ampia navigatori di accedere facilmente ai medesimi contenuti.

Contenuti ben strutturati

Preservare una buona esperienza per l’utente significa anche strutturare efficacemente i contenuti di ogni pagina. Questo diviene particolarmente importante quando ogni attività comporta uno sforzo o un costo rilevante. Chi ha provato a navigare il proprio blog con un cellulare può capire quanto diventi complicato effettuare anche le più semplici operazioni di routine come inserire un commento o passare da un post all’altro.

Ad esempio chi accede ad un contenuto tramite palmare o smarthphone apprezzerà enormemente la presenza di:

• link di navigazione locale come “vai ai contenuti”, “vai al menù pricipale” ecc.
• quicklink diretti alle azioni più comuni come ad esempio torna all’homepage, torna alla categoria, vai al prossimo articolo, salva nei bookmarks ecc.
• link a contenuti correlati interni
• link a contenuti correlati esterni
• accesso facilitato alle forme di interazione

articolo tratto da:
semanticstone.net/blog