Undolog.com

A causa dei diversi rendering tra i vari browser, che vedono sicuramente Microsoft Internet Explorer in testa, bisogna sempre ricorrere ad artifizi particolari per applicare effetti che, ormai, dovrebbero rappresentare uno standard. I pluri-discussi bordi arrotondati sono un classico esempio del “disastro” prodotto dalla completa incapacità di realizzare uno standard serio sul rendering delle pagine HTML/CSS. Esistono in rete numerosissime soluzioni che permettono di ottenere “effetti” (effetti che esonerano dall’HTML attuale come bordi arrotondati, effetti ombra, riflessioni, etc…) con patch sui fogli di stili, particolari trucchi con l’uso di div innestati, librerie Javascript, uso delle canvas, etc…
A titolo puramente didattico vorrei illustrare un’ulteriore tecnica (cross-browser) per applicare dei bordi arrotondati a delle immagini:

Demo e sorgenti

• Progetto completo su Google Code
• demo
• jquery.roundborders.js
• immagine in formato Photoshop
• immagine in formato PNG

Continua a leggere… »

Post correlati

• Internet Explorer 7 (IE7): PNG e CSS ancora lontani? (0)
• Web2.0: Gran Paradiso-Firefox 3.0 e Apollo (2)
• Resa nel ridimensionamento delle immagini sui browser (5)
• CSS3: qualcuno ha visto Internet Explorer? (3)
• Classi e ID nei CSS (3)

Adobe è lieta di invitarti agli eventi di lancio della nuova Adobe Creative Suite 4. Ti aspettiamo a Roma il 21 Ottobre e a Milano il 30 Ottobre. Per tutti i dettagli dell’incontro vai al minisito dedicato agli eventi CS4! In omaggio per tutti i partecipanti la t-shirt CS4!

Io cercherò di esserci… soprattutto per la maglietta

Post correlati

• Net Software (0)
• Web2.0: Gran Paradiso-Firefox 3.0 e Apollo (2)
• Web2.0: Adobe ci prova con Apollo? (2)
• Unobtrusive Flash Objects (1)
• Rinascono gli elementi di undolog.com (2)

Da Apple al Web 2.0 le immagini "riflesse" hanno inondato Intrenet. Spesso abusate sono tuttavia sempre di grande effetto. Saperle realizzare bene non è impresa complicata e, con un pizzoco di fantasia, si possono rendere meno "ovvie" e "scontate"... se proprio non ne potete fare a meno.

Le basi del Reflex

Prima di tutto vediamo come impostare una riflessione base. La tecnica per impostare una riflessione base, almeno quella che preferisco e che uso continuamente, è di semplice e rapida implementazione. Questo metodo permette la massima libertà di modifiche successive e mantiene la trasparenza nel caso vogliate salvare l'immagine in PNG 24 con trasparenza.

1. Come sempre apriamo Phosotoshop e carichiamo l'immagine che vogliamo riflettere su un layer apposito
2. Duplichiamo il nostro layer (trascinate il layer da duplicare sull'icona ) e nominiamolo "shadow" o "reflex"
3. Dal menu "Modifica" selezionate "Trasforma" / "Rifletti verticale"
4. Trascinate il nuovo layer "reflex" sotto al layer originale e spostiamolo alla base del layer originale
5. Selezioniamo il layer "reflex" e, tenendo premuto il tasto ALT, aggiungiamo una maschera cliccando sull'icona "mask" nella tool window dei layer; il layer "reflex" dovrebbe sparire
6. Selezioniamo la maschera nel layer "reflex" e cliccate sull'icona di riempimento
7. Impostiamo una sfumatura da nero o bianco a trasparente:
8. Tracciamo la sfumatura dal centro del layer originale al centro del layer "reflex"

Continua a leggere... »

Post correlati

• Photoshop tutorial: pianeta con sole che sorge (3)
• Photoshop tutorial: icone stile web 2.0 in 3 passi (14)
• Photoshop tutorial: effetto foglio piegato (9)
• jQuery: bordi rotondi sulle immagini per sovrapposizione (0)
• I nuovi strumenti di Adobe Photoshop CS3 Extended (0)

Inauguro con questo Post una nuova sezione Eventi & iniziative, viste le numerose segnalazioni che spesso mi vengono proposte. Ovviamente segnalerò quelle inerenti ai temi di questo Blog.

"Arrivano i Guru", si terrà a Roma ad Ottobre 2008, e vede per la prima volta in assoluto, la presenza in Italia di Martin Evening, massimo esperto di digital imaging, nonchè autore di innumerevoli libri di successo su Photoshop, venduti in tutto il mondo.
Vista l'unicità dell'evento, quest'anno l'organizzazione ha ideato un "Tour" di 8 tappe, in altrettante città italiane, la cui partecipazione è TOTALMENTE GRATUITA.
Durante i vari incontri gli Adobe Guru Marianna Santoni, Claudio Marconato, Tiziano Fruet, e Davide Vasta, intratterranno i partecipanti con 5 ore di seminari di approfondimento su vari temi, dalla fotografia digitale, al design ed al Web design. Ci saranno 3 tappe che avranno luogo al Sud (Napoli, Bari, Catania), notoriamente "snobbato" da eventi di grande rilevanza. Il sito Web ufficiale è questo: http://www.arrivanoiguru.com

(segnalato da: Davide Vasta)

Post correlati

• Photoshop CS3 Extended (0)
• What is in the box? (0)
• Weebly: crea il tuo sito Online (2)
• Photoshop study: JuliusDesign logo restyling (18)
• Net Software (0)

Cayman Racing

Post correlati

• Rinascono gli elementi di undolog.com (2)
• Photoshop tutorial: pianeta con sole che sorge (3)
• Photoshop tutorial: icone stile web 2.0 in 3 passi (14)
• Photoshop study: universo frattale (3)
• Photoshop study: tv revolution (4)

Prima...

Dopo...

Post correlati

• Rinascono gli elementi di undolog.com (2)
• Photoshop tutorial: pianeta con sole che sorge (3)
• Photoshop tutorial: icone stile web 2.0 in 3 passi (14)
• Photoshop study: universo frattale (3)
• Photoshop study: tv revolution (4)

Un totale restyling al mio studio! Da gustare soprattutto la parte Lavori dove ho inserito le ultime fatiche, i prototipi e i logo-restyling

Post correlati

• Net Software (0)
• Adobe AIR: l’incompreso (0)
• Adobe AIR FAQ: tutto quello che c’è da sapere (7)
• Sviluppare applicazioni Adobe AIR con Aptana IDE (5)
• Adobe AIR 1.0, Adobe Flex 3.0 e il nuovo Adobe Open Source (0)

Pubblico questo post oggi per motivi di correttezza! Il sito MelaMorsicata.it aveva lanciato un contest per ridisegnare il loro logo. Il termine per partecipare era (è) il 15 marzo, ecco del perchè di questa attesa... non volevo in nessun modo influenzare alcunchè. Al contest si poteva inviare un solo logo o, meglio, si poteva partecipare "gareggiando" con un solo logo. Alcuni partecipanti hanno, durenate lo svolgimento del contest, reinviato varianti dei logotipi (header?) sostituendo quelli precedenti. Continua a leggere... »

Post correlati

• Rinascono gli elementi di undolog.com (2)
• Photoshop tutorial: pianeta con sole che sorge (3)
• Photoshop tutorial: icone stile web 2.0 in 3 passi (14)
• Photoshop study: universo frattale (3)
• Photoshop study: tv revolution (4)

Agli amici di Tv Revolution!

SOBRIO

PSICHEDELICO

Post correlati

• Rinascono gli elementi di undolog.com (2)
• Photoshop tutorial: pianeta con sole che sorge (3)
• Photoshop tutorial: icone stile web 2.0 in 3 passi (14)
• Photoshop study: universo frattale (3)
• Photoshop Study: targa automobilistica (0)

Adobe Photoshop è uno strumento potente e permette di realizzare effetti davvero accattivanti. Per realizzare l'effetto di piegatura di un foglio di carta, infatti, possiamo usare lo strumento di trasformazione per "piegare" - davvero - un layer. Con qualche piccolo accorgimento possiamo rendere l'effetto davvero realistico. Le immagini presentate qui di seguito in questo tutorial sono a titolo di esempio e sono state realizzate in bassa risoluzione. Per migliorare l'effetto usare una risoluzione alta, così da ridimensionare l'immagine alla fine e ottenere un antialiasing sui bordi.

Continua a leggere... »

Post correlati

• Photoshop tutorial: pianeta con sole che sorge (3)
• Photoshop tutorial: icone stile web 2.0 in 3 passi (14)
• I nuovi strumenti di Adobe Photoshop CS3 Extended (0)
• Creare un tasto fotorealistico con Photoshop (0)
• Weebly: crea il tuo sito Online (2)