Preciosa gráfica para una orquesta
Me recuerda un poco la campaña de Audi. Realizada por Euro RSCG Switzerland.
Explore Posterous
Search posterous
Search all posts and users. Type a name, type a favorite song title, whatever! See what comes up.
More posterous blogs
Here are posterous posts filed under grafica...
Riviste d’Italia e Nord-America
Tre mesi vissuti in Canada lasciano un segno come le riviste che ho letto e che mi sono portata dietro. Da questo bagaglio è nata una discussione piacevole con un’amica esperta di fotografia. E ho scoperto che…
Tra il mondo dell’editoria italiana e nord-americana ci sono tante differenze.Tralasciamo le considerazioni al limite della politica, che in questi tempi possono costare carriere, smentite e denuncie. Prima cosa: le riviste del nord-America sono fatte per essere lette.
Bella scoperta? Io non la darei tanto per scontata. Quello che intendo io è che c’è molto da leggere, che lo scritto segue una logica e che anche riviste, che tradizionalmente da noi, sono più da sfogliare che da leggere hanno da offrire molto. Vanity Fair è una rivista vera in nord-America. Ricordo un articolo sul furto della Gioconda (certo non un articolo di attualità) lungo cinque pagine stampate in due colonne con carattere piccolo. Ma anche le riviste di cucina, come le ottime Gourmet e Bon Appetite, accanto alle ricette riportano articoli approfonditi. Seconda cosa: la grafica è diversa.
A parte lo strepitoso Wired che offre una grafica veramente articolata, che cambia da sezione a sezione e che in parte riprende lo stile dei comics d’
autore. Certo, non si sono fumetti ma mi è parso di notare richiami di vario genere.
A parte ancora la mia rivista preferita, The New Yorker, la cui grafica è un’
omaggio allo stile, all’amarcord e all’ironia, dicevo che a parte di tali casi le care riviste di cucina non scherzano.
Gourmet e Bon Appetite si distinguono rispetto ai nostri Sale & Pepe e la Cucina Italiana per una grafica e fotografia diversa. Le riviste degli altri, Gourmet e Bon Appetite, sembrano quasi uscite dagli anni Settanta. Perché?
Perché la foto non è incentrata su un dettaglio o sul solo cibo. Le foto cercano di rappresentare la situazione: come una tavolata di amici (che per chi è curioso, per gli editori dovrebbe evocare la Toscana la foto che vedete allegata) o la tavola col cibo. Manca l’attitudine di mettere a fuoco perfetto il soggetto principale e di sfuocare il resto. Attitudine diverse per gente diversa?
Che ne pensate? Notate qualche differenza vedendo le foto?
Una sbirciatina al nuovo sito Nike+ ovvero Nike Running
sono entrata da qui http://nikerunning.nike.com/nikeos/p/nikeplus/en_US/plus/#//runs/history/216295111/ e ho dato una sbirciatina al nuovo sito. come avevano annunciato qualche settimana fa un po' alla volta arriverà anche la versione italiana.
la novità che mi intriga di più è l'introduzione dei livelli. io sono al livello Orange per adesso, ovvero una schiappa :)
ma oggi dovrebbe arrivare l'omino UPS per consegnare lo sportband e quindi ricomincerò presto la mia carriera di runner!
Come creare bottoni liquidi con Photoshop
Come creare bottoni liquidi con Photoshop
I bottoni liquidi sono bottoni speciali che tramite gli stili CSS e un unico file immagine (.png), ci permetto di creare bottoni che possono avere una larghezza infinita ('liquidi', appunto) e oltretutto possono essere personalizzati molto semplicemente in base all'attributo CSS background-color.Questo fa si che si risparmi tempo, fatica, e ottimizzeremo il download della pagina web. Inoltre, avendo 1 sola immagine per tutti i nostri bottoni, se un domani volessimo modificarne l'aspetto ci impiegheremmo un attimo! L'articolo è molto dettagliato quindi ho preferito suddividerlo in due post separati. Nella Prima parte vedremo come creare la Base con Photoshop; nella seconda tratteremo il modo in cui interagire con i CSS.
Come creare Bottoni Liquidi con Photoshop
Aprite Photoshop, e creare un nuovo documento vuoto le dimensioni di 350x300 px
Nei tool, seleziona un lo strumento rettangolo arrotondato con l'opzione Livelli Forma . Se vuoi puoi specificare una dimensione fissa come vedi qui sotto, io ho utilizzato 180x46 px con angolo arrotondato di raggio 10. Rinominate questo Livello come BASE.
Adesso andremo a colorare il bottone con una sfumatura che prenderemo utilizzando le fusioni. Selezionate il livello base, click con il tasto destro e selezionate opzioni di fusione e fate click su sovrapposizione sfumatura. Scegliamo 2 colori simili tra loro, come ad esempio un giallo chiaro e un giallo leggermete più scuro. Per esempio io ho scelto i gialli #ffae00 e #d48200 vi consiglio anche di utilizzare la scale al 150%.
Adesso selezioniamo il livello smusso e variamo le Opzioni di Fusione. specificando Dimensione:1 , Posizione Interno, colore : bianco
Otterremo un risultato così:
Adesso selezioniamo il livello smusso e creiamo una cartella premendo Ctrl + G selezionate lo Strumento Sfumatura (tasto G) . selezionate il gruppo e fai click su aggiungere maschera di livello che trovi nella palette livelli in basso. e metti l'opacità a 75%
Arrivati a questo punto fate click tenendo premuto Ctrl sulla miniatura del livello Base. Trascinate una guida a metà del pulsante. Dal menù Seleziona -> Modifica -> Contrai ... e specificate 1 Px. selezionate lo strumento selezione rettangolare e tenendo premuto il tasto alt "eliminate" la parte al di sotto della guida (ed eliminate successivamente la guida stessa).
A questo punto create un nuovo livello che chiameremo Fade e riempite la selezione partendo dal basso verso l'alto con lo strumento sfumatura utilizzando una sfumatura che da dal bianco al trasparente. Modificarte ilriempimento dell'immagine a 40%. Otterrete questo risultato ( deselezionate la selezione ovviamente ):
Questo rappresenta un'ottima base per creare bottoni liquidi. Adesso non ci resta che vedere come creare un vero e proprio Liquid Botton che con un semplice cambio di colore di background ci permetta di creare infiniti pulsanti. Per prima cosa rendete visibile il livello sfondo. Poi selezionate il livello Base e modificate le opzioni di Fusione deselezionando l'opzione di sfumatura e diminuite il livello di riempimento del livello mettendolo a 0%. Ecco cosa otterrete:
Tenendo premuto Ctrl fate clic sulla miniatura della maschera vettoriale in modo da selezionare il pulsante. Create un nuovo livello che chiameremo Gradiante e create una sfumatura con li strumento sfumatura dal nero al trasparente partendo dall'alto verso il basso.
Adesso utilizzando il comando selezione inversa (Crtl+ Shift + I) creiamo un nuovo livello e creiamo una maschera di bianco in questo modo:
Ecco ora l'effetto del nostro bottone è pronto! adesso dovremo solo ritagliarlo e utilizzalo nei nostri css. ecco come ottenere le tre immagini che ci servono:
Se volete potete scaricare qui tutti gli esempi che ho creato.
Per il lato del codice vi rimando a questo altro nostro post che vi chiarirà come costruire un bottone http://www.kgo.it/blog/2009/06/risorse-web/web-layout-bottoni-css-liquidi-a-risparmio-energetico/
Posted via email from Kgo
Come creare bottoni liquidi con Photoshop
Come creare bottoni liquidi con Photoshop
I bottoni liquidi sono bottoni speciali che tramite gli stili CSS e un unico file immagine (.png), ci permetto di creare bottoni che possono avere una larghezza infinita ('liquidi', appunto) e oltretutto possono essere personalizzati molto semplicemente in base all'attributo CSS background-color.Questo fa si che si risparmi tempo, fatica, e ottimizzeremo il download della pagina web. Inoltre, avendo 1 sola immagine per tutti i nostri bottoni, se un domani volessimo modificarne l'aspetto ci impiegheremmo un attimo!
L'articolo è molto dettagliato quindi ho preferito suddividerlo in due post separati. Nella Prima parte vedremo come creare la Base con Photoshop; nella seconda tratteremo il modo in cui interagire con i CSS.
Come creare Bottoni Liquidi con Photoshop
Aprite Photoshop, e creare un nuovo documento vuoto le dimensioni
di 350x300 px
Nei tool, seleziona un lo strumento rettangolo arrotondato con l'opzione Livelli Forma . Se vuoi puoi specificare una dimensione fissa come vedi qui sotto, io ho utilizzato 180x46 px con angolo arrotondato di raggio 10. Rinominate questo Livello come BASE.
Adesso andremo a colorare il bottone con una sfumatura che prenderemo utilizzando le fusioni. Selezionate il livello base, click con il tasto destro e selezionate opzioni di fusione e fate click su sovrapposizione sfumatura. Scegliamo 2 colori simili tra loro, come ad esempio un giallo chiaro e un giallo leggermete più scuro. Per esempio io ho scelto i gialli #ffae00 e #d48200 vi consiglio anche di utilizzare la scale al 150%.
Aggiungiamo adesso un po' di ombra . Fate clic sulla casella di controllo Ombra Interna e inserite l'Opacità al 25% Distanza 0px, e taglia a 10px.
Tenendo premuto Ctrl sulla tastiera fate click sul livello Base sulla Miniatura del livello. Vedrete il pulsante selezionato con la classica seghettatura di Photoshop. Dai andate su Seleziona -> Modifica -> Contrai ... e specificate 1 Px. questo vi permette si diminuire la selezione di un pixel. Ora creiamo un nuovo livello con Ctrl + Shift + N che chiameremo Smusso. Dopo che il livello è stato creato premete su 'Ctrl' + 'Canc' che riempirà il livello con il colore di sfondo che avete utilizzato e specificate il riempimento a 0%.
Adesso selezioniamo il livello smusso e variamo le Opzioni di Fusione. specificando Dimensione:1 , Posizione Interno, colore : bianco
Otterremo un risultato così:
Adesso selezioniamo il livello smusso e creiamo una cartella premendo Ctrl + G selezionate lo Strumento Sfumatura (tasto G) . selezionate il gruppo e fai click su aggiungere maschera di livello che trovi nella palette livelli in basso. e metti l'opacità a 75%
Arrivati a questo punto fate click tenendo premuto Ctrl sulla miniatura del livello Base. Trascinate una guida a metà del pulsante. Dal menù Seleziona -> Modifica -> Contrai ... e specificate 1 Px. selezionate lo strumento selezione rettangolare e tenendo premuto il tasto alt "eliminate" la parte al di sotto della guida (ed eliminate successivamente la guida stessa).
A questo punto create un nuovo livello che chiameremo Fade e riempite la selezione partendo dal basso verso l'alto con lo strumento sfumatura utilizzando una sfumatura che da dal bianco al trasparente. Modificarte ilriempimento dell'immagine a 40%. Otterrete questo risultato ( deselezionate la selezione ovviamente ):
A questo punto avete creato tutti i livelli che vi servono e potete sbizzarrirvi nel cambiare colori sfumature e riempimenti. Notate che andando in Opzioni di Fusione del livello base e cambiando i colori della sfumatura il bottone manterrà i vari effetti di luce e trasparenze.
Questo rappresenta un'ottima base per creare bottoni liquidi. Adesso non ci resta che vedere come creare un vero e proprio Liquid Botton che con un semplice cambio di colore di background ci permetta di creare infiniti pulsanti. Per prima cosa rendete visibile il livello sfondo. Poi selezionate il livello Base e modificate le opzioni di Fusione deselezionando l'opzione di sfumatura e diminuite il livello di riempimento del livello mettendolo a 0%. Ecco cosa otterrete:
Tenendo premuto Ctrl fate clic sulla miniatura della maschera vettoriale in modo da selezionare il pulsante. Create un nuovo livello che chiameremo Gradiante e create una sfumatura con li strumento sfumatura dal nero al trasparente partendo dall'alto verso il basso.
Adesso utilizzando il comando selezione inversa (Crtl+ Shift + I) creiamo un nuovo livello e creiamo una maschera di bianco in questo modo:
Ecco ora l'effetto del nostro bottone è pronto! adesso dovremo solo ritagliarlo e utilizzalo nei nostri css. ecco come ottenere le tre immagini che ci servono:
Se volete potete scaricare qui tutti gli esempi che ho creato.
Per il lato del codice vi rimando a questo altro nostro post che vi chiarirà come costruire un bottone http://www.kgo.it/blog/2009/06/risorse-web/web-layout-bottoni-css-liquidi-a-risparmio-energetico/
Elenco dei font ’sicuri’ e compatibili per il web
Una delle problematice principali di quando si sviluppa un nuovo sito web, è il font da utilizzare.
I font più belli spesso non sono presenti su tutti i computer dei nostri potenziali visitatori, quindi bisogna scegliere in base alla compatibilità, piuttosto che alla bellezza grafica del font (non possiamo chiedere ai nostri visitatori di installare il font che noi abbiamo scelto…)
Anche se questo problema dovrebbe essere risolto dai CSS 3.0, attualmente bisogna calibrare la scelta molto attentamente!
Ho trovato su internet questo breve ma esauriente elenco dei font più compatibili, suddivisi anche per sistemi operativi (linux e le sue varie distribuzioni cominciano ad avere una fetta di utenti sempre più consistente
Non sorprende che i più compatibili siano anche i più utilizzati: Trebuchet MS, Verdana, Arial, Georgia.. naturalmente i font che non sono in elenco sono da sconsigliare vivamente!
10 Effetti Grafici Javascript per migliorare l’aspetto del vostro sito
Ultimamente mi è saltato all’occhio questo articolo che commenta 10 effetti grafici javascript per migliorare con pochi click l’aspetto del vostro sito web.
Alcuni di questi sono ormai molto famosi (come GreyBox, l’ennesimo clone di LightBox).
Altri invece sono molto originali, e non di poco conto: Instant permette ad esempio di applicare ‘on the fly‘ un effetto polaroid molto bello a qualunque immagine; MooTable invece permette di ordinare un elenco tabellare di dati in base alle colonne (ad esempio per nome in ordine alfabetico) direttamente da javascript.. cosa che normalmente era d’obbligo riaggiornare la pagina.
Altri effetti degni di nota:
- FancyForm: Fantastico effetto per cambiare completamente l’aspetto standard dei form (moduli), come ad esempio le checkbox o i radiobutton.. molto molto bello
- ImageMenu: Menu con effetto slide
su immagini, con possibilità di personalizzare due eventi del mouse
(apertura e chiusura della scheda)… menu come questi erano possibili
solo in flash, fino a qualche annetto fà
- TJPZoom 3: avete bisogno di aggiungere un effetto zoom alle vostre foto? Questo vi salverà la vita.. ideale per siti dove le immagin ricoprono un ruolo fondamentale
10 Effetti Grafici Javascript per migliorare l’aspetto del vostro sito
Ultimamente mi è saltato all’occhio questo articolo che commenta 10 effetti grafici javascript per migliorare con pochi click l’aspetto del vostro sito web.
Alcuni di questi sono ormai molto famosi (come GreyBox, l’ennesimo clone di LightBox).
Altri invece sono molto originali, e non di poco conto: Instant permette ad esempio di applicare ‘on the fly‘ un effetto polaroid molto bello a qualunque immagine; MooTable invece permette di ordinare un elenco tabellare di dati in base alle colonne (ad esempio per nome in ordine alfabetico) direttamente da javascript.. cosa che normalmente era d’obbligo riaggiornare la pagina.
Altri effetti degni di nota:
- FancyForm: Fantastico effetto per cambiare completamente l’aspetto standard dei form (moduli), come ad esempio le checkbox o i radiobutton.. molto molto bello
- ImageMenu: Menu con effetto slide
su immagini, con possibilità di personalizzare due eventi del mouse
(apertura e chiusura della scheda)… menu come questi erano possibili
solo in flash, fino a qualche annetto fà
- TJPZoom 3: avete bisogno di aggiungere un effetto zoom alle vostre foto? Questo vi salverà la vita.. ideale per siti dove le immagin ricoprono un ruolo fondamentale
Artisti, fotografi e designer nella Graduate Directory 2009 per Wallpaper.com
Una rassegna dei migliori achitetti, fotografi, designers, grafici, etc. freschi di laurea nella personale Graduate Directory di Wallpaper.com.
http://www.wallpaper.com/content/feature/graduate-directory-2009/
