Photoshopin Web-työkaluilla on helppo muodostaa verkkosivujen rakenneosia tai tulostaa täydellisiä verkkosivuja esimääritetyssä tai mukautetussa muodossa.

  • Käytä tasoja ja osia, kun suunnittelet verkkosivuja ja niiden käyttöliittymän elementtejä. (Katso Tasot ja Verkkosivujen osittaminen.)

  • Käytä tasovedoksia, kun kokeilet erilaisia sivusommitelmia tai tallennat sivun muunnelmia toiseen tiedostomuotoon. (Katso Tasovedokset.)

  • Luo päälleosoitusteksti tai painikkeen grafiikka Dreamweaveriin tai Flashiin vietäväksi.

  • Luo Web-animaatioita Animaatio-paneelin avulla ja tallenna ne sitten animoituina GIF-tiedostoina tai QuickTime-tiedostoina. Katso Ruutuanimaatioiden luominen.

  • Luo Adobe Bridgen avulla Web-valokuvagalleria ja muuta nopeasti joukko kuvia vuorovaikutteiseksi sivustoksi käyttämällä erilaisia viimeisteltyjä malleja.

Voit katsoa videon sivustojen suunnittelusta Photoshopilla ja Dreamweaverilla: Photoshopin käyttö Dreamweaverista web-kuvan parantamiseksi.

Päälleosoituskuvien luominen

Päälleosoitus on verkkosivun painike tai kuva, joka muuttuu, kun hiiriosoitin siirretään sen päälle. Päälleosoituksen luomiseen tarvitaan vähintään kaksi kuvaa: ensisijainen kuva normaalitilaa varten ja toissijainen kuva muuttunutta tilaa varten.

Photoshopissa on joukko hyödyllisiä työkaluja päälleosoituskuvien luomista varten:

  • Luo ensisijainen ja toissijainen kuva käyttämällä tasoja. Luo sisältö yhdelle tasolle, kopioi taso ja muokkaa sitä niin, että sisältö pysyy samankaltaisena ja tasot ovat kohdakkain. Päälleosoitustehostetta luodessasi voit muuttaa tason tyyliä, näkyvyyttä tai sijaintia, tehdä väri- tai sävymuutoksia tai käyttää suodintehosteita. Katso Tasojen monistaminen.

  • Tasotyylien avulla voit lisätä ensisijaiselle tasolle tehosteita, esimerkiksi väripeittoja, varjoja, hehkuja tai korkokuvia. Kun luot päälleosoitusparin, valitse, onko tasotyyli käytössä vai ei, ja tallenna kuva kummassakin tilassa. Katso Tasotehosteet ja -tyylit.

  • Tyylit-paneelin valmiiden painiketyylien avulla voit nopeasti luoda päälleosoituspainikkeita, joilla on normaali-, hiiriosoitus- ja hiiri alhaalla -tila. Piirrä perusmuoto suorakulmiotyökalulla ja lisää suorakulmion painikkeeksi muuttava tyyli, esimerkiksi Viistetty normaali. Kopioi sitten taso ja luo painikkeen muut tilat käyttämällä muita valmiita tyylejä, esimerkiksi Viistetty hiiriosoitus. Tallenna kukin taso erillisenä kuvana, jotta syntyy päälleosoituspainikejoukko.

  • Tallenna päälleosoituskuvat Web-yhteensopivassa muodossa ja kooltaan optimoituina käyttämällä Tallenna Webiä ja laitteita varten -valintaikkunaa. Katso Kuvien optimoiminen.

Huomautus:

Kun tallennat päälleosoituskuvat, noudata nimeämissääntöjä, jotta ensisijainen (osoittamattoman tilan) kuva erottuu toissijaisesta (osoitetun tilan) kuvasta.

Kun olet luonut päälleosoituskuvasarjan Photoshopilla, siirry Dreamweaveriin. Sijoita kuvat verkkosivulle ja anna Dreamweaverin lisätä JavaScript-lauseet päälleosoitustoimintaa varten.

Zoomify-vienti

Voit lähettää Webiin suuriresoluutioisia kuvia, joita katselijat voivat panoroida ja zoomata nähdäkseen lisää yksityiskohtia. Peruskokoinen kuva latautuu samassa ajassa kuin vastaavankokoinen JPEG-tiedosto. Photoshop tallentaa JPEG-tiedostot ja HTML-tiedoston, jotka voidaan lähettää Web-palvelimeen.

  1. Valitse Tiedosto > Vie > Zoomify ja määritä vientiasetukset.

    Pohja

    Määrittää taustan ja navigoinnin selaimella katseltavaa kuvaa varten.

    Tulostuskohde

    Määrittää tiedoston sijainnin ja nimen.

    Kuvan ruudutuksen asetukset

    Määrittää kuvan laadun.

    Selaimen asetukset

    Määrittää peruskuvan leveyden ja korkeuden pikseleinä katselijan selainta varten.

  2. Lähettää HTML- ja kuvatiedostot Web-palvelimeen.

Värien heksadesimaaliarvojen käsitteleminen

Photoshop voi näyttää kuvan värien heksadesimaaliarvot tai kopioida värin heksadesimaaliarvon HTML-tiedostossa käytettäväksi.

Värien heksadesimaaliarvojen näyttäminen Info-paneelissa

  1. Valitse Ikkuna > Info tai napsauta Info-paneelin välilehteä, jotta paneeli tulee näkyviin.
  2. Valitse paneelin valikosta Paneelin asetukset. Valitse Ensimmäinen värilukema- tai Toinen värilukema -ryhmän Tila-valikosta Web-väri ja valitse OK.
  3. Siirrä osoitin sen värin päälle, jonka heksadesimaaliarvot haluat nähdä.

Värin kopioiminen heksadesimaaliarvona

Photoshop kopioi värit joko HTML-värikoodeina, joihin heksadesimaalinen arvo sisältyy (color=#xxyyzz), tai pelkkänä heksadesimaalisena arvona.

  1. Tee jokin seuraavista toimista:
    • Kun pipettityökalu on valittu, siirrä osoitin kopioitavan värin kohdalle. Napsauta kakkospainikkeella (Windows) tai Ctrl-osoita (Mac OS) ja valitse Kopioi väri HTML:ään tai Kopioi värin heksakoodi.

    • Valitse piirtoväri käyttämällä Väri-paneelia, Värimallit-paneelia tai Adobe Värivalitsinta. Valitse värivalikosta Kopioi väri HTML:ään tai Kopioi värin heksakoodi.

    • Napsauta Tallenna Webiä varten -valintaikkunassa värimallia tai valitse Matta > Muu. Napsauta Adoben Värinvalitsimessa heksadesimaaliarvoa hiiren kakkospainikkeella ja valitse Kopioi.

  2. Avaa haluamasi tiedosto HTML-muokkaussovelluksessa ja valitse Muokkaa > Liitä.

Lisensoitu Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License -lisenssin mukaan.  Creative Commons -lisenssien ehdot eivät koske Twitter™- ja Facebook-viestejä.

Lakisääteiset ilmoitukset   |   Online-tietosuojakäytäntö