Risorse per Web designer – yes WEB can

Oggi vi mostro “Pencil vs Camera” una tecnica fotografica fondata da Benjamin Heine che a me ha lasciato senza fiato. Si tratta di immagini formate dalle classica foto con l’aggiunta di alcuni particolari disegnati a matita.

L’idea molto creativa, a Ben gli venne per caso mentre stava guardando la televisione e allo stesso tempo scriveva una lettera. Volgendo la lettera verso la televisione, notò che l’immagine sul foglio e quella della televisione che si vedeva in trasparenza dietro la carta creavano un effetto molto simpatico. Fù così che capì che sarebbe stato bello creare qualcosa di simile fondendo in una sola immagine due diverse azioni. Per vedere altre opere di Ben, visitare il suo blog.

Vi confido che io sto pensando di usare questo simpatico effetto per creare il nuovo layout di questo blog o di qualche altro sito. Voi che ne dite, vi piace l’idea?

Lo volevo fare anche a Natale ma non ci sono riuscito, a Pasqua invece all’ultimo momento ce l’ho fatta.

Con le risorse vettoriali da me segnalate nella raccolta ” Icone, illustrazioni, brushes e pattern free dedicati alla Pasqua“, ho creato per gli utenti di yesWEBcan e non una cartolina per augurare una Felice e Serena Pasqua.

E’ possibile scaricare la cartolina in formato .psd

TANTI AUGURI DI UNA SERENA PASQUA A TUTTI E GRAZIE MILLE PER DARE UN SENSO A QUESTO BLOG

Non è necessario citare alcuna fonte e fatene quel che volete (sempre rispettando però i copyright degli autori delle risorse che io ho usato)

Basta già  un bel commento di auguri (ma anche un vaffa… se vi fa più piacere ).

Qual’è la differenza tra Photoshop e Illustrator?

Questa è una delle domande più frequenti che viene rivolta a noi designer, e se rispondiamo che uno è un software per grafica raster l’altro per grafica vettoriale, automaticamente scatta la domanda successiva:

Qual’è la differenza tra grafica raster e grafica vettoriale?

Nella grafica raster l’immagine è composta da un insieme di pixel (puntini), ognuno dei quali memorizza il codice del colore che lo caratterizza. Quindi l’immagine non è altro che un numero definito di puntini affiancati uno all’altro e rappresentati in una griglia rettangolare (raster). La sua struttura a mosaico la rende l’unico metodo valido per la rappresentazione delle fotografie.

Due sono gli elementi che caratterizzano un immagine raster:

• Risoluzione
  Consiste nel numero di pixel contenuti e viene ottenuta moltiplicando il numero di pixel orizzontali per quello dei pixel verticali che compongono l’immagine. Si misura in PPI (Points Per Inch).
• Profondità di colore
  La profondità consiste dalla memoria che si dedica ad ogni pixel, ovvero dal numero di bit dedicati ad ogni pixel per descrivere il colore. Maggiore è il numero di bit, maggiore è il numero di colori che è possibile descrivere.

Il difetto di questo tipo di grafica è che se ingrandiamo l’immagine i pixel diventano più grandi, visto che in numero restano costanti, causando quel tipico effetto di sfocamento molto sgradevole alla vista chiamato pixellatura.

I formati raster più comuni sono: .tiff, .jpeg, .gif, .png, .bmp, .tga

Invece nella grafica vettoriale, le informazioni vengono rappresentate tramite oggetti grafici come punti, linee, poligoni e curve, ognuno dei quali definito nella memoria da parametri matematici scritti in linguaggio PostScript o PDF.
Ogni oggetto del disegno viene memorizzato in un contenitore interno ed è indipendente, infatti può essere spostato, modificato od eliminato senza influenzare gli altri oggetti dell’immagine.
Il fatto che ogni oggetto è rappresentato (in memoria) da valori matematici modificabili (equazioni) e non da pixel, permette di ingrandire e fare qualsiasi operazione sui tracciati senza nessuna perdita di qualità. Oltre alla qualità la grafica vettoriale ha come vantaggio la maggiore compressione dei dati.

I formati vettoriali più comuni sono: .cdr, .fh .ai, .pdf

Youdesign, ideato da Francesco Caruccio e Stefano Toppi, si occupa di trasformare i design Photoshop o Gimp realizzati da professionisti del web in codice XHTML e CSS.
Conosco alcuni freelance che svolgono questa funzione per alcune web agency, ma un team specializzato come quello di YouDesign è una sorta di esperimento in Italia, mentre in altri paesi il servizio è ormai diffuso da qualche anno. Ecco un esempio.

Intanto su ItalianWebDesign, è partito il contest dove sono messe in palio gratuitamente 3 pagine xhtml / css + 3 effetti Javascript del valore complessivo di 410 €. Partecipare è molto semplice, ecco il link del contest.

Leggendo i commenti al contest, viene criticato il fatto che il servizio sia rivolto a professionisti, mentre sarebbe più giusto rivolgerlo ai profani del web. Personalmente non sono assolutamente d’accordo. Ben venga che il servizio sia di supporto a Web Designer che invece di impiegare il loro tempo a creare il codice preferiscono concentrarsi sul design, o perchè no, a visual designer che magari non hanno conoscenze di codice Html, ma almeno conoscenze grafiche. Non credo invece sia la cosa migliore rivolgere il servizio a persone che magari masticano un pò di Photoshop e si improvvisano web designer. Approfittiamo del servizio per migliorare il web in Italia e non per peggiorarlo, perchè è l’ultima cosa di cui abbiamo bisogno.
E voi? Cosa ne pensate?

In bocca al lupo, Francesco.

In seguito all’articolo che ho pubblicato ieri, mi è arrivata una mail di un lettore che diceva “si le risorse sono belle, ma come faccio ad installarle?”. Sul sito c’è anche il tutorial ma è in inglese e per chi ha poca dimistichezza con la lingua può essere difficile. Allora vi ho preparato dei minitutorial che mostrano come installare le risorse vettoriali su Photoshop.

Installazione Brushes:

• Copiate il file .abr che avete scaricato nella cartella brushes del Photoshop. Per trovare la cartella dovete procedere in questo modo: Risorse del computer->(c) Disco Locale-> Programmi-> Adobe-> Adobe Photoshop-> Presets (predefiniti)-> Brushes (pennelli).
• Una volta copiato il file possiamo aprire Adobe Photoshop e selezionare lo strumento pennello, poi andiamo nella tavolozza con le opzioni e premiamo per aprire il selettore di pennelli predefiniti


installazione-brushes




• Ora clicchiamo sul triangolino in alto a destra e selezioniamo load brushes (carica pennello)


installazione brushes



• A questo punto vi si aprirà la cartella contenente i brushes, selezionate quello che desiderate caricare ed il gioco è fatto.
  

  installazione-brushes

Installazione patterns
L’installazione dei patterns è molto simile a quella dei brushes, ma spiegheremo passo-passo anche questa.

• Copiate il file .pat che avete scaricato nella cartella brushes del Photoshop. Per trovare la cartella dovete procedere in questo modo: Risorse del computer->(c) Disco Locale-> Programmi-> Adobe-> Adobe Photoshop-> Presets (predefiniti)-> Pattern
• Una volta copiato il file apriamo Adobe Photoshop e prendiamo lo strumento secchiello, poi andiamo nella tavolozza con le opzioni, selezioniamo pattern e premiamo per aprire il selettore di pattern predefiniti


installazione-pattern




• Ora clicchiamo sul triangolino in alto a destra e selezioniamo load pattern (carica pattern)


installazione-pattern




• A questo punto, come per i brushes, vi si aprirà la cartella contenente i pattern, selezionate quello che desiderate caricare ed ecco i vostri pattern pronti all’uso.
  

  installazione-pattern

Il procedimento è lo stesso anche per sfumature, forme e per tutte le risorse disponibili per Photoshop. In realtà esiste un metodo ancora più veloce per installarli, basta semplicemente trascinare i file all’interno del Photoshop, ma vi consiglio per iniziare di usare i metodi tradizionali