Foto con ombra sfumata e trasparenza con PS5?

[svartalf]

Salve,
il mio problema e' questo: vorrei fare delle immagini, di piccole dimensioni (c.a 120 px x 180 px), cosi' composte:
a) una foto originale (che e' in jpg);
b) aggiunta di effetto ombra (sfumata) sui due lati della foto (che gli conferisce un aspetto tridimensionale);
c) totale trasparenza nel resto dell'immagine.

Uso Photoshop 5. Ho provato a fare una gif (copia e incolla della foto jpg in una nuova immagine con sfondo trasparente, aggiunta dell'effetto ombra sfumato dal menu "livelli" , esportazione dell'immagine in gif89a), pero' l'effetto ombra non viene sfumato, ma netto...

Ho provato a fare una immagine png, l'ombra viene sfumata pero' ci sono 2 problemi:
1) l'immagine e' troppo pesante (c.a 50 KB contro i 13-14 KB della gif);
2) Non tutti i browser la visualizzano.

Quindi vorrei sapere:

1) volendola fare in gif, come posso fare per ottenere dei bordi sfumati, mantenendo la totale trasparenza?


Oppure,volendola fare in png:

2) come posso fare per ridurre il peso dell'immagine (almeno del 50%)?

3) Quali sono esattamente i browser che non riescono a visualizzarla correttamente?

4) C'e' un modo per risolvere l'incompatibilita' con questi browser?


Grazie mille.

[Myaku]

Originariamente inviato da svartalf
1) volendola fare in gif, come posso fare per ottenere dei bordi sfumati, mantenendo la totale trasparenza?

la gif non prevede la trasparenza sfumata: con questo formato il pixel o è vuoto o è pieno.

Oppure,volendola fare in png:

3) Quali sono esattamente i browser che non riescono a visualizzarla correttamente?

4) C'e' un modo per risolvere l'incompatibilita' con questi browser?

Non è supportato da internet explorer 6 (e inferiori, mi pare). Puoi ovviare al problema usando javascript (pngfix, lo trovi in rete), oppure sul css utilizzando un "filter".
Ci sono comunque dei limiti. Utilizzando il "filter", ad esempio, non è possibile utilizzare background-repeat sull'immagine a cui applichi il filtro - ovviamente, questo sempre riferito a IE6.

[svartalf]

Ciao Myaku, ti ringrazio per la risposta.

Volevo chiederti:

Originariamente inviato da Myaku
la gif non prevede la trasparenza sfumata: con questo formato il pixel o è vuoto o è pieno.

Il mio problema e' che l'effetto ombra della foto con la gif diventa un bordo nero (di ampiezza ad es.di 10 px).
Non e' possibile far degradare questo colore nero verso un colore grigio nei pixel piu' esterni, pur mantenendo la non trasparenza su tutti i pixel dell'ombra? (ad es. primi 5 px nero, pixel 6 grigio scuro, px 7 grigio medio-scuro, px8 grigio medio, px 9 medio chiaro e px10 grigio chiaro, anche se tutti questi px non sono trasparenti)?
Credo si otterrebbe un effetto migliore rispetto al semplice bordo nero...

Non è supportato da internet explorer 6 (e inferiori, mi pare). Puoi ovviare al problema usando javascript (pngfix, lo trovi in rete), oppure sul css utilizzando un "filter".
Ci sono comunque dei limiti. Utilizzando il "filter", ad esempio, non è possibile utilizzare background-repeat sull'immagine a cui applichi il filtro - ovviamente, questo sempre riferito a IE6.

Il problema della compatibilita' riguarda solo IE 6 e inferiori, non altri browser?
Il nuovo IE 7 non ha problemi di incompatibilita'?

Per finire, usando Photoshop 5 posso in qualche modo ridurre il peso delle png?

Scusa la mia ignoranza, finora ho usato PS solo per applicazioni off-line...

Ti ringrazio di cuore,
ciao.

[Myaku]

Originariamente inviato da svartalf
Il mio problema e' che l'effetto ombra della foto con la gif diventa un bordo nero (di ampiezza ad es.di 10 px).
Non e' possibile far degradare questo colore nero verso un colore grigio nei pixel piu' esterni, pur mantenendo la non trasparenza su tutti i pixel dell'ombra? (ad es. primi 5 px nero, pixel 6 grigio scuro, px 7 grigio medio-scuro, px8 grigio medio, px 9 medio chiaro e px10 grigio chiaro, anche se tutti questi px non sono trasparenti)?
Credo si otterrebbe un effetto migliore rispetto al semplice bordo nero...

se ho ben capito, in questo caso non devi usare una sfumatura che va verso la trasparenza, ma una sfumatura piena che va da una tonalità di scuro a una di chiaro. Già sul file originale.
Considera comunque che la gif ha il limite di 256 colori, quindi il risultato potrebbe non essere comunque ottimale.

Il problema della compatibilita' riguarda solo IE 6 e inferiori, non altri browser?
Il nuovo IE 7 non ha problemi di incompatibilita'?

esatto

Per finire, usando Photoshop 5 posso in qualche modo ridurre il peso delle png?

non saprei, è una versione piuttosto datata, dovrai confidare nell'aiuto di qualche altro forumista
[comunque, 50k per una png potrebbero non essere così fuori luogo, dipende dall'immagine]

[svartalf]

Originariamente inviato da Myaku
se ho ben capito, in questo caso non devi usare una sfumatura che va verso la trasparenza, ma una sfumatura piena che va da una tonalità di scuro a una di chiaro. Già sul file originale.
Considera comunque che la gif ha il limite di 256 colori, quindi il risultato potrebbe non essere comunque ottimale.

E' proprio quello che intendevo. La qualita' non sara' eccelsa, questa soluzione la tengo come alternativa all'immagine in png.

Mi rimane solo da capire come posso ridurre il peso delle immagini (ne devo far visualizzare almeno una dozzina sulla pagina, quindi il tempo di caricamento potrebbe essere troppo lungo per chi ha connessioni analogiche).


Ti ringrazio e ti auguro una buona domenica.
Ciao