Attenzione però non fatevi contagiare dalla “patternite” , è una malattia che colpisce un designer su 3… Il sintomo si presenta come una voglia irrefrenabile di scaricare quanti più pattern possibili e provarli tutti! Se venite colpiti dall’infezione vi ritroverete invasi da pattern che scombussoleranno voi e il vostro Photoshop. E la degenza è molto, molto lenta.

Adobe Photoshop Patterns

Felt

Paven

Checkered light emboss

Type

Diagonal Noise

Noise pattern with subtle cross lines

Fancy Deboss

Dark Brick Wall

Inflicted

crissXcross

Black linen 2

Darth Stripe

Subtle freckles

Random Grey Variations

Black Linen

Padded

Cross Stripes

Dark stripes

Handmade paper

Wine Cork

Dark denim

Paper 2

White carbon

Tactile noise

Il nuovo Twitter utilizza un layout fluido, questo significa che la finestra del browser o la risoluzione dello schermo possono influire sulla larghezza delle colonne, e di conseguenza sulla dimensione di spazio utilizzabile per lo sfondo.

Personalmente ho preso in considerazione una risoluzione di 1440 pixel di larghezza, perchè con misure inferiori è veramente difficile sfruttare il background come eravamo abituati a fare con il layout quasi in pensione.

Ci sono alcuni punti che bisogna tenere a mente quando si progetta il nuovo sfondo Twitter:

Misure nuovo layout

• Il nuovo design ha una barra sempre presente sull’header di altezza 40 pixel che occupa l’intera lunghezza della pagina web. Attenzione però, non tenetela in considerazione nel psd perchè il vostro sfondo partirà sotto di essa. Cosa invece che può interessare è che vi sono 20 pixel in altezza tra questa barra e l’inizio delle due colonne.
• La distanza a destra e a sinistra delle colonne visto che il layout è fluido può variare in base alla risoluzione e le dimensioni della finestra del browser. Comunque la spaziatura è significativamente ridotta rispetto al vecchio layout.
• La colonna a sinistra (quella principale) è sempre larga 540 pixel, infatti anche se la vediamo su uno schermo con risoluzione 640×480 rimane invariata, mentre la barra laterale può variare con una risoluzione di larghezza inferiore ai 1.130 pixel. Per risoluzioni superiori invece si fissa a 500 pixel.
• La barra sulla destra ha una trasparenza di circa il 75%, il che significa che quel che sceglieremo di utilizzare per lo sfondo si intravederà sotto questa barra e potrà influire sulla leggibilità.

Nella risoluzione 1440×900 ci sono circa 500 pixel liberi su ciascuno dei due lati, allora per sfruttarli entrambri ho creato il mio nuovo backgroud in questo modo:

Prima prova Background

Dopo vari test ho notato che le immagini usate sul lato destro davano problemi in particolare, con risoluzioni inferiori ai 1440 px dove la sidebar copriva le immagini che a causa della trasparenza si continuavano ad intravere e rendevano difficile la leggibilità.

Allora ho optato per questo nuovo background:

Seconda prova Background

Sembra che 1440 pixel sia la soluzione migliore se si vuole utilizzare del contenuto nel background e lasciare un messaggio come eravamo abituati a fare con la precedente versione.

Attualmente ho lasciato lo sfondo largo 1440 pixel ma ne ho già creato un altro nel caso preferirò mantenermi stretto e rendere compatibile il background anche per la risoluzione 1280 × 800. In questo modo su ciascun lato avremo liberi solo 112 e 113 pixel.

Background 1280px x 900 px

In rete esistono parecchi template PSD utili per creare uno sfondo per il vecchio layout Twitter, ma è difficile trovarne utili per il nuovo. Questa difficoltà l’ho riscontrata anche io ed è proprio per questo che ho deciso di scrivere questo articolo.
Infatti ho creato 2 Template PSD per le risoluzioni 1280×900 e 1440 x 900 con le varie sezioni già create, in questo modo sarà più facile creare il vostro sfondo e avrete a disposizione la base con le varie sezioni su cui lavorare già suddivise.

Se avete bisogno di una risoluzione diversa fatemelo sapere nei commenti e vedrò cosa posso fare.

Fonte 1: Mashable Fonte 2: NewTwitter

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?

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 ).

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

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.

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