photoshop

[eduardolp3]

Salve a tutti,

sono alle primissime arme con photoshop nel senso

che l'unica cosa che so fare è aprire un file.

Vorrei fare questo:

creare dei titoli per un sito web (sono alle prime armi pure qua)che siano TRASPARENTI, cioè che io inserisca il file con tanto di ombra ecc., sullo

sfondo della pagina colorata o con una immagine e non mi venga fuori

quel maledetto allone bianco o addiritura il retangolo bianco su cui

ho scritto. Lo so è roba da principiante ma è da tre giorni che ci provo

e non ci riesco. Il mio PS7 è trial (inglese, non ci capisco niente) e lo sto provando per un possibile acquisto, se c'è qualcuno che mi può dire come si fà; passo dopo passo :roll: ringrazierò tanto.

Grazie

Eduardo

[Monik]

io di solito faccio cosi:

doppio click sul livello di sfondo..e si sblocca..mela+A e cancello..

ricordati in fase di salvataggio di scegliere un formato che supporti le trasparenze.. (salva per web)

[fungolao]

Purtroppo se salvi in .gif a volte sgrana un po....

Se cerchi in rewte trovi un sacco di tutorials....uno di questi e www.tutorialman.com

www.psd.it www.photoshopcafe.com .... e poi tantissimi altri...purtroppo sono in Germania e nn posso spiegarti dettagliatamente...nn ac#vendo con me il mio mac :lol: :P :P :P :lol:

Spero di averti aiutato in qlch maniera fammi sapere ciao e a presto!!!!

Ciao Monik!

[Monik]

ciao fungolao :wink:

[Windy]

http://www.pastrugni.com/main.php

:lol: Qui troverai tanti tutorial per cominciare piano piano!

[mercury]

Prova ad usare image ready...

[eduardolp3]

Grazie a tutti voi, adesso cerco di approfondire

la mia ignoranza :lol:

ciao

Eduardo

[fungolao]

CIAO WINDYYYYYYYYYYYYYYYYYYYYYYYYYYY!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Ciao Monik :pizza:

[Windy]

Originally posted by fungolao

CIAO WINDYYYYYYYYYYYYYYYYYYYYYYYYYYY!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Ciao Monik :pizza:

Ma Ciao Fungo!

[bronca]

buongiorno fungo!

[fungolao]

Ciao bello!!!!

[peciot]

ciao a tutti!!

[maur1zio]

Ciao, ci sono alcuni sistemi.

Te ne cito alcuni.

Prosegui la lettura solo se hai voglia di leggere, non sarò brevissimo.

Iniziamo dicendo che il monitor forma le immagini tramite una grande quantità di puntini luminosi, dei quali è formato lo schermo, che si possono illuminare con diverse tonalità di colore. Questi puntini vengono chiamati "pixel". Più avanti ne parlerò.

Tieni presente che per mantenere la trasparenza potrai scegliere tra 2 formati: GIF e PNG.

GIF è un formato grafico universale (la sigla significa "Graphics Interchange Format" = "formato di interscambio grafico") e quindi la tua immagine sarà correttamente visualizzata anche da utenti che usano un browser di versione datata.

PNG ("Portable Network Graphics") è un formato sviluppato in seguito, per cui non sarà riconosciuto da un browser di versione datata.

(Il browser è il software di esplorazione del Web, come Internet Explorer, Netscape ecc).

Le differenze:

GIF supporta fino a 256 colori e fino a 8 bit di profondità.

PNG supporta fino a 256 colori ma fino a 24 bit di profondità.

A PARITA' di profondità di colore (8 bit), l'immagine PNG è di dimensioni lievemente minori (in Kb) e la qualità è praticamente la stessa della GIF.

Siccome dici che non sei pratico mi permetto di darti un'idea di cosa significa. Se ho un'immagine con tante sfumature di colore, ogni singolo pixel avrà proprietà così particolari (di colore, contrasto, luminosità ecc) che per memorizzarne una definizione precisa il computer ha bisogno di una pagina di promemoria.

Se invece la mia immagine è formata da colori "standard" (cioè già presenti sulla tavolozza: non c'è bisogno di miscelarne altri per ottenerli), con contorni netti, senza sfumature, allora il computer riesce a memorizzare una descrizione molto precisa di ogni singolo pixel in uno spazio molto più ridotto: invece che una pagina, gli bastano 2 righe.

Come se io dovessi scrivere, senza tralasciare nessun minimo passaggio, la ricetta di un tiramisù oppure di un uovo sodo.

Bene, la quantità di informazioni con cui vengono descritte e memorizzate le proprietà di ogni pixel di un'immagine viene definita "profondità".

Traduco: in breve si potrebbe dire che un'immagine salvata in formato GIF verrà poi riprodotta con precisione "fino a 8", mentre la stessa immagine salvata in formato PNG sarà poi riprodotta con precisione "fino a 24".

Nel tuo caso specifico, la sfumatura fra colori diversi forse non è presente nelle scritte che prepari, ma una minore profondità potrebbe peggiorare l'effetto "a gradini" delle linee tonde che formano le varie lettere.

In ogni caso, se stai progettando qualcosa per il web, potresti essere d'accordo col concetto che "Internet è di tutti", quindi non solo di "chi ha il computer più recente". Se è così, allora ti consiglio di progettare le tue pagine in modo che siano correttamente visualizzate almeno a 800x600, perché ancora ci sono mooolte migliaia di surfer web che usano un monitor con quella risouzione; di salvare i file grafici in formato più universale possibile; di aggiungere - dove puoi - una versione alternativa in lingua inglese del testo.

Mi sto dilungando.

Torniamo al nostro argomento.

Per i motivi di cui sopra, ti consiglio di scegliere il formato GIF.

Ecco alcuni metodi.

1.scorciatoia: Photoshop 7 ha un'opzione dal menu "help" che si chiama proprio "export transparent image".

(Questa voce del menu è attiva quando hai un file aperto.)

Se fai clic su questa opzione, PS7 inizia una procedura guidata per raggiungere il tuo obiettivo.

(Zingarelli dice che "obiettivo" è una parola italiana che si può scrivere a scelta con una "b" o con due, e che il significato non cambia).

Il testo della procedura "export transparent image" è naturalm in inglese, ma abbastanza intuitivo.

PS7 propone alcuni passaggi dove puoi modificare parametri vari, ma i valori predefiniti sono quasi sempre abbastanza validi. Cliccando sempre sul tasto NEXT ti ritrovi alla finestra di salvataggio dove puoi dare un nome all'immagine e salvarla.

2.metodo classico: dal menu FILE>SAVE FOR WEB accedi ad una finestra dove puoi settare manualmente le proprietà dell'immagine.

In questo caso puoi disporre di un'anteprima dell'immagine, che cambia in tempo reale a seconda delle impostazioni che scegli.

In alto a destra, sotto i 3 pulsanti "SAVE" - "CANCEL" - "DONE" trovi "SETTINGS" (=impostazioni"). Ci sono una serie di formati prestabiliti, che corrispondono alle scelte più comuni. Puoi selezionarli anche tutti, ad uno ad uno, e controllare l'anteprima della qualità dell'immagine e la sua dimensione in Kb.

La dimensione corrisponde volta per volta alle impostazioni correnti che stai provando, ed è indicata in basso a sinistra sotto l'anteprima dell'immagine.

Non dimenticare che i soli 2 formati che mantengono la trasparenza sono GIF e PNG. Immagino che sceglerai GIF.

In ogni caso la prima delle opzioni nell'elenco è "GIF 128 DITHERED".

Significa che PS7 ti propone di salvare la tua immagine usando "fino a" 128 colori.

DITHERED (o dithering) è un attributo che troverai spesso in grafica. Si può tradurre come "agitato" e indica un valido metodo di diffusione di errore, cioè una simulazione di sfumatura che si ottiene pur senza usare troppi colori intermedi, ma mescolando in ordine sparso puntini del primo e del secondo colore in questione.

Automaticamente PS7 non userà per forza 128 colori, ma solo i necessari.

PS7 ti indica quanti colori sta realmente usando con un messaggio che trovi in basso, sotto l'anteprima dell'immagine, sulla destra.

Se la tua scritta è di un colore unico, ne userà 2: infatti "trasparente" in questo caso viene considerato come un colore.

Quindi abbiamo capito che la trasparenza viene considerata come un colore in questo momento, e per questo il dithering può ridurre di molto il solito effetto "a gradini" delle linee curve.

Vediamo velocemente le altre opzioni.

Sotto la scritta "settings" trovi alcuni parametri divisi su 2 colonne.

PRIMA COLONNA.

-formato del file (ora sarà GIF).

-algoritmo di riduzione del colore: specifica con quale criterio i colori originali dell'immagine devono essere trattati per adattarli al formato prescelto. In genere puoi scegliere "selective" e vai bene.

-algoritmo di dithering: come sopra ma riferito al dithering. In genere puoi scegliere "diffusion" ma in certi casi "noise" può dare risultati interessanti. "Pattern" è un po' più complesso da impostare.

-la casella "transparency" nel tuo caso va evidentemente selezionata.

-algoritmo dithering riferito alla trasparenza: come sopra, in genere "diffusion" va bene ecc ecc.

-la casella "interlaced" aggiunge una proprietà all'immagine: nel caso sia di dimensioni elevate, viene visualizzata molto rapidamente a bassa definizione e poi si perfeziona man mano che viene scaricata dal web.

SECONDA COLONNA.

-lossy: specifica la percentuale ammissibile di perdita di definizione in relazione alla compressione effettuata sull'immagine originale. In altre parole, per immagini a più colori, puoi variare a piacimento la riduzione della qualità per diminuire le dimensioni dell'immagine stessa.

-colors: la quantità massima di colori usati per rappresentare l'immagine.

-dither: la percentuale di dithering applicabile all'immagine.

-matte: un colore a tua scelta che verrà forzatamente mescolato al valore di trasparenza nei pixel dell'immagine. In altre parole, puoi decidere di dare un alone di sfondo alla trasparenza della tua immagine.

-amount: puoi impostare la percentuale del dithering della trasparenza, se ne hai selezionato uno nella prima colonna.

-snap web: sostituisce i colori originali con i più simili presenti sulla tavolozza di colori per web. Forza una conversione dei colori originali RGB in esadecimale. Consente dimensioni più ridotte dell'equivalente risultato ottenuto selezionando "web" invece che "selective" nella prima colonna, in "algoritmo di riduzione del colore".

Penultima nota, sotto a queste 2 colonne trovi una scheda "color table" dove puoi vedere quali e quanti colori sono attualmente in uso per rappresentare l'immagine che vedi inanteprima ed una scheda "image size" che contiene alcune informazioni.

Le dimensioni originali dell'immagine.

Le dimensioni attuali dell'immagine (modificabili).

La percentuale di ingrandimento o riduzione rispetto alle dimensioni originali.

La casella "constrain proportions" se attivata impedisce di deformare l'immagine rispetto alle proporzioni originali.

Quality: il metodo usato per ricampionare l'immagine. Puoi scegliere tra "jagged" che significa più o meno "affilato" e "smooth" che significa più o meno "morbido": il primo metodo separa più drasticamente i colori attigui, ilsecondo agevola gli effetti di sfumatura.

Ultima nota, sotto l'anteprima dell'immagine abbiamo già visto che trovi alcune informazioni. Rivediamole meglio.

A sinistra:

il formato scelto (GIF ecc),

le relative dimensioni dell'immagine (in Kb),

l'indicazione di tempo stimato per il caricamento da web con una connessione modem (il predefinito è lo standard di modem a 28Kbit per secondo).

A destra:

la percentuale di dithering applicata all'immagine,

il tipo di tavolozza colori selezionata (algoritmo di riduzione del colore),

il numero di colori realmente impiegati per rappresentare l'immagine.

Se hai impostato una percentuale di "lossy" la vedrai indicata qui.

Ancora più in basso, fuori dal riquadro di anteprima, troverai a sinistra la percentuale di zoom attualmente applicata all'immagine (modificabile).

Poi la descrizione accurata del colore, riferita al punto dove si trova il puntatore del mouse.

Poi un pulsante che consente di vedere un'anteprima direttamente nel browser predefinito del tuo computer (probabilmente vedrai l'icona di Internet Explorer oppure Netscape), così puoi verificare esattamente l'aspetto definitivo che avrà la tua immagine in una pagina web.

Poi una freccina rivolta verso il basso che ti consente di vedere questa anteprima in un browser diverso da quello predefinito, oppure in un programma di grafica diverso da PS7: purché sia installato sul tuo computer.

Secondo me mi sono dilungato aaanche troppo.

Quindi NON mi soffermo su alcuni dettagli che secondo me almeno per ora non ti servirebbero a niente: una colonnina verticale di strumenti presente in alto a sinistra a fianco del riquadro di anteprima.

Una serie di schede (original, optimized, 2-up, 4-up) che puoi trovare invece in alto, in orizzontale, al di sopra del riquadro di anteprima.

L'uso del tasto ALT in questa finestra di Photoshop.

Proseguo invece con l'ultimo metodo che ti suggerisco.

3.un duplice trucco: salva il tuo titolo come immagine JPEG (sempre dal riquadro SAVE FOR WEB).

Questo ti consente di avere un'immagine con maggior definizione e minori dimensioni rispetto ai formati "trasparenti".

Assicurati di aver creato questa immagine su uno sfondo del colore che ti piace e che vuoi usare per la tua pagina web.

Immaginiamo un azzurro: #40E1EB.

A questo punto puoi inserire la tua scritta molto bella ad alta definizione e dimensioni contenute proprio dove la volevi, e fare una brutta scoperta: l'azzurro dello sfondo e l'azzurro della pagina hanno lo stesso codice esadecimale (#40E1EB appunto) ma non sono uguali.

Questo succede perché Photoshop è lo standard mondiale per il trattamento delle immagini finalizzato alla stampa. Il monitor rappresenta tutti i colori mescolandone 3, detti "colori-base": il rosso, il verde, il blu (RGB= Red Green Blue).

Le macchine da stampa (dalla printer domestica all'offset tipografico) rappresentano invece tutti i colori partendo da una base diversa, formata da 4 colori: ciano, giallo, magenta, nero (CYMK=Cyan Magenta Yellow blacK). I due sistemi sono incompatibili, ed è per questo che dalla stampante escono sempre immagini con colori diversi da quelli che vedevamo sul monitor.

Per la precisione, ci sono dei metodi di conversione chiamati "profili colore" che possono alterare il funzionamento del monitor e della stampante in modo da rendere i risultati più simili fra loro. Purtroppo è un argomento vasto e non è il momento di parlarne.

Torniamo alla delusione HTML.

Abbiamo due sfumature diverse di azzurro e la scritta non appare come la volevamo.

Ecco perché prima ho detto "duplice trucco": c'è una soluzione.

Ancora in PS7, apro un nuovo file di dimensioni 1x1.

Un quadratino minuscolo il cui lato misura 1 pixel.

Eventualmente premo i tasti "COMANDO" (mela) e insieme lo "0" (zero) in modo che il quadratino mi appaia molto ingrandito così posso vedere quel che faccio.

Ora imposto un colore (di primo piano o di sfondo), ed uso esattamente lo stesso che avevo usato come sfondo alla mia scritta. Quindi verifico che sia #40E1EB.

Ora dal menu EDIT (modifica) scelgo FILL (riempi) e seleziono FOREGROUND COLOR se ho impostato #40E1EB come colore di primo piano, oppure BACKGROUND COLOR se l'ho impostato come colore di sfondo. Controllo che "MODE" sia "NORMAL"; la percentuale (OPACITY) sia 100% e faccio clic su OK.

Ho riempito il mio quadratino dello stesso azzurro che fa da sfondo alla scritta del mio titolo.

Ora solita procedura. SAVE FOR WEB>formato JPEG con la stessa qualità usata per salvare la scritta del titolo (quindi LOW MEDIUM oppure HIGH e poi lo stesso numero di percentuale nel campo QUALITY).

Evidentemente devo salvare questa immagine nella cartella appropriata del mio sito in costruzione, per esempio supponiamo di chiamare il file "azzurro.jpg" e di salvarlo nella cartella "pippo".

Quindi apri la tua pagina web, usando SIMPLE TEXT. Puoi anche aprirla in Explorer e poi fare clic su VISUALIZZA >SORGENTE.

Cerca il TAG che inizia con

<body

e al suo interno il testo

bgcolor="#40E1EB"

che devi sostituire con

background="pippo/azzurro.jpg"

In questo modo hai istruito il browser affinché riempia tutta la tua pagina web NON con un determinato colore (#40E1EB) ma con una determinata immagine ripetuta all'infinito ("azzurro.jpg").

Siccome l'immagine è di dimensioni piccolissime verrà caricata istantaneamente. Siccome è di forma quadrata non si vedrà nessun cenno di interruzione tra un quadratino ed il successivo. Siccome l'hai salvata in PS7, proprio come la scritta del titolo, non ci sarà nessuna differenza fra lo sfondo della scritta e lo sfondo della pagina.

In tutto questo lungo esempio ho immaginato di usare un determinato colore azzurro #40E1EB ma naturalmente tu dovrai sostituirlo con il colore che avevi scelto. Nel mio esempio ho immaginato di salvare le immagini nella cartella "pippo". Naturalmente dovrai scrivere invece di "pippo" il nome reale della tua cartella che contiene le immagini.

Se infine le tue immagini NON si trovano in una cartella separata, allora la correzione di qualche riga più indietro NON dovrà essere del tipo

background="pippo/azzurro.jpg"

ma semplicemente

background="azzurro.jpg"

e vedrai che tutto funziona.

OK ora mi sono davvero dilungato a dismisura, quindi passo e chiudo.

Spero comunque di esserti stato utile nel mio piccolo.

Non seguo molto assiduamente i forum.

Se dovessi incontrare problemi o aver qualche dubbio e pensi che ti posso essere utile contattami pure via email, dev'essere visibile da qualche parte perché iscrivendomi al forum ho scelto questa opzione.

Buon lavoro.

mau