Visualizzazione dei risultati da 1 a 10 su 10
  1. #1

    salvataggio file photoshop:come?

    Usando A.Photoshop CS2 ,dopo innumerevoli tentativi di salvataggio ,sia con Image Ready che senza ,ho provato a salvare in mille modi un'immagine!
    cioè l'ho salvata in questi formati:
    • PDS,
      Gif,
      HTML/IMMAGE,
      Only IMMAGE,
      ONLY HTML

    Mi chiedo: ma come faccio a fareun salvataggio decente di un'immagine di photoshopper poterla applicare come sfondo?

    Non mi si visualizza per bene dopo Su DREAMWEAVER mi dà infatti come icona o la piuma del programma o la E di explorer!

    Dove sbaglio?

    Inoltre come si fa a rendere l'immagine più leggera! per poi essere caricata a mo" di sfondo sul web?

    Grazie per il volenteroso che vorrà rispondermi!

  2. #2
    Utente di HTML.it L'avatar di LineaPixel
    Registrato dal
    Mar 2008
    Messaggi
    1,571
    Allora, serve un po di ordine.
    Se devi salvare l'immagine per usarla come sfondo di un sito devi considerare gli unici formati grafici validi sul web: jpg, gif e png.
    Solitamente su immagini che contengono sfumature, tipo foto o grafiche abbastanza complesse cromaticamente, il formato che da la resa migliore è jpg.
    Se invece si tratta di colori netti e definiti puoi usare anche gif, ma solitamente in questi casi la scelta migliore è la prima.
    Prima di tutto imposta la dimensione dell'immagine, a seconda di quelle che sono le esigenze del tuo sito dovrai pensare a quale dimensione fa per te, chiaramente stiamo ragionando sulla dimensione in pixel, ricorda.
    Dopodichè salviamo, da Photoshop menu File->Salva per web.
    Nella finestra che ti si apre, innanzitutto in alto a sinistra seleziona la linguetta "2 immagini", questo ti permetterà di vedere l'immagine originale affiancata a quella ottimizzata con le impostazioni di salvataggio che andrai ad impostare.
    Sulla destra puoi scegliere il formato di file da creare, seleziona jpg.
    Da qui comincia il gioco sottile tra qualità e dimensione: sempre sulla destra trovi uno slider "qualità", che ti permette di diminuire il peso dell'immagine proporzionalmente alla sua qualità.
    Qui il compromesso lo puoi fare solo tu, ma grazie all'anteprima dell'immagine ottimizzata puoi renderti conto di "dove stai andando".
    In basso trovi sempre la dimensione del file e un tempo indicativo di caricamento.

    Buon lavoro!

  3. #3
    Grazieeeee...

    per la cortese risposta in tempi record


    Allora io ho provato a fare ciò che te dici e il risultato è qui, ma che te ne pare?

    E' stata inserita un'immagine di sfondo al content centrale.

    Come faccio a vedere se il peso è quello giusto, al di là dell'ottimizzazione che dò io? Cioè:lo vedo se la visualizzazione della pagina è lenta a caricare? oppure la noto subito in anteprima e basta,dividendo l'immagine in due,solo da questo o dall'effetto come ottimizzazione che rende l'immagine.?..

    Poi il discorso di ImageReady invece che suddivide l'immagine in più pezzetti, ho provato anche quello ,ma poi mi carica tutte le singole tabelle ma come faccio a collegarli insieme per poi inserirli nel file che mi interessa? anche se salvo con html e immagine non visualizza di certo l'html sai?


    Ciao

  4. #4
    Utente di HTML.it L'avatar di LineaPixel
    Registrato dal
    Mar 2008
    Messaggi
    1,571
    Dunque, l'immagine ora è di 462kB, direi che mezzo mega sia decisamente troppo per un'immagine di sfondo, non trovi?
    Inoltre il tuo div è largo 500px mentre l'immagine è 762px, vale la pena ridimensionarla, oppure, per non perderne la lunghezza, usare il comando "dimensione quadro" e portarla a 500px di larghezza.
    Credo anche tu abbia lasciato una qualità molto alta, perchè comunque ottenere quella dimensione di file con il salvataggio per web di photoshop che per di più è a bassa risoluzione (come tutte le immagini per il web) significa non avere compresso quasi per nulla.
    Prova ad abbassare la qualità e soprattutto usa l'indicatore che trovi in basso, dove ti dice la dimensione del file ottimizzato.
    Dimenticati di ImageReady, (per fortuna) sono finiti i tempi in cui si intabellavano le immagini, cosa che tra l'altra non sarebbe sfruttabile per il tuo sito.

  5. #5

    sfondo per web,ma...

    Allora ti invio queste immagini, 1 e 2 che potrebbero poi essere applicabile poi su tutto lo sfondo della pagina, ma secondo te come potrei poi esportare un'immagine grafica del genere senza renderla pesante?

    Non ho mai capito non avendo nozioni serie di grafica mio malgrado,ma che vorrei tantissimo,come si fanno gli sfondi classici 762 per 800 ad esempio! come si salvano per web e poi come si allegeriscono?

    Grazie come sempre per i tuoi preziossimi consigli.
    A buon rendere amico!

  6. #6
    Utente di HTML.it L'avatar di LineaPixel
    Registrato dal
    Mar 2008
    Messaggi
    1,571
    Allora, qui, più che nell'ambito grafico, finiamo in quello del webdesign.
    Dunque, considera che il più delle volte quelli che credi sfondi interi sono in realtà tante parti di immagini combinate a dovere.
    Cerco di spiegarti facendo riferimento alla seconda immagine che hai allegato, più che altro perchè è più semplice, ma anche l'altra si risolve nello stesso modo.
    Prima di tutto ti dico che in questo caso non esiste un solo modo di procedere, ognuno, a seconda delle proprie abitudini o manie o processi mentali, preferisce muoversi in maniera diversa, ma il risultato dovrebbe più o meno essere uguale.
    Se ci fai caso puoi dividere il layout in varie aree logiche.
    Cominciamo dalle macroaree:
    - colonna sinistra: quella del menu, dal bordo viola di sinistra
    - colonna centrale: quella compresa tra i due bordi verticali, bordi esclusi
    - colonna destra: dal bordo viola di destra

    Da questa impaginazione cerca di escludere mentalmente l'immagine del fiore grande in basso che vedremo poi come trattare.

    All'interno della colonna centrale io poi distinguerei altre tre aree:
    - intestazione: il titolo del sito in alto
    - contenuto: la parte centrale con il contenuto della pagina
    - piè di pagina: i dati personali in basso

    Come fare per ottenere delle immagini da usare come sfondi per queste aree?
    Semplice: con lo strumento sezioni di Photoshop.
    Chiaramente dovrai lavorare sul file originale con i livelli, anche perchè bisognerà disattivare quello che non ci serve.
    Innanzitutto non ci servono i testi del contenuto e della colonna destra, quelli li ricrei direttamente in html.
    Poi per ora non ci serve nemmeno il grande fiore che sta sotto.
    Per fare un buon lavoro l'ideale sarebbe crearci ora delle guide nei punti in cui dovremo definire le sezioni, in allegato trovi un'immagine fatta al volo in cui sono segnate più o meno le sezioni da creare secondo il mio punto di vista.
    Sullo strumento sezioni non mi dilungo, è abbastanza intuitivo e trovi molto materiale nella rete.
    Però stai attenta ad una cosa: visto che tutte le aree logiche si tramuteranno in tag div, si può ottimizzare il tipo di immagini che si va a salvare.
    Per esempio, la colonna sinistra ha l'immagine con i fiori che copre il bordo e che verrà tagliata in due parti dalle sezioni e per questo la useremo come normale immagine inserita nel livello, però per il bordo viola possiamo creare una semplicissima immagine di pochi pixel con un solo frammento del bordo da ripetere in verticale su tutta la lunghezza del livello, questo alleggerisce molto le immagini da caricare.
    Stessa cosa si può fare con il bordo di destra.
    Poi ricordati di impostare come colore di sfondo del livello quel rosa/lilla che hai anche tu.

    Hai capito un po' l'idea del procedimento?
    Forse non sono bravissimo a spiegare e di sicuro non posso anche darti le indicazioni su come impostare il codice delle pagine web (per tutte queste cose vado a pagamento ), ma intendevo farti entrare nell'ordine di idee del processo mentale.

    Quando poi userai il comando "Salva per web", avrai la possibilità di salvare le sezioni come immagini singole (fa tutto lui, più bello di così!) da usare nell'impaginazione. Per le immagini nel tuo caso andrà bene salvare come jpg qualità media, almeno così ad occhio.

    Buon lavoro!
    Immagini allegate Immagini allegate

  7. #7

    più salva per web o più esportazioni delle sezioni?

    Allora se ho ben capito

    Dunque, considera che il più delle volte quelli che credi sfondi interi sono in realtà tante parti di immagini combinate a dovere.
    Dovrò lavorare sui livelli e poi eliminare i fiori sottostanti che non mi servono e invece inserirli dopo in modo idoneo,e rifare uno sfondo tutto uguale sul rosa insomma.

    Quando poi userai il comando "Salva per web", avrai la possibilità di salvare le sezioni come immagini singole (fa tutto lui, più bello di così!) da usare nell'impaginazione. Per le immagini nel tuo caso andrà bene salvare come jpg qualità media, almeno così ad occhio.
    DOMANDA
    Dopo eseguirò più esportazioni e quando invece si usa esportazione? o più salva per web per ogni sezione?Oppure salva codice e immagine ?

    un grosso saluto

  8. #8
    come creo una sfera come nell'immagine sopra?premetto che uso photoshop cs 2 in inglese!

  9. #9
    Utente di HTML.it L'avatar di LineaPixel
    Registrato dal
    Mar 2008
    Messaggi
    1,571
    Quando salvi immagini per pagine web dimenticati del comando esporta.
    Salva per web dev'essere il tuo unico dio
    Da lì trovi anche le opzioni per il salvataggio delle sezioni.
    Sconsiglio di salvare il codice html, quello ti conviene farlo a parte, sfruttalo solo per salvare le sezioni che crei come immagini distinte

  10. #10

    fare una sfera

    Benissimo ,adesso ci provo a fare tutto ...ma come faccio a fare una bella sfera come nell'immagine sopra e inserire dopo delle immagini all'interno?

    conosci il programma tridimenzionale Blender?...io mi ci son persa....

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.