PSD-tiedoston tason tai tasoryhmän sisällöstä voi luoda JPEG-, PNG- tai GIF-muotoisia kuvaresursseja. Resurssit luodaan automaattisesti, kun tuetun kuvatiedostomuodon tunniste liitetään tason tai tasoryhmän nimeen. Voit halutessasi määrittää luotaville kuvaresursseille myös laatu- ja kokoparametrit.

Kuvaresurssien luominen PSD-tiedostosta on kätevää etenkin, kun verkkosisältöä luodaan useita eri laitteita silmällä pitäen.

Video: Verkkoresurssien luominen Photoshop CC:ssä

Video: Verkkoresurssien luominen Photoshop CC:ssä
Tässä videossa esitellään eri tapoja, joilla voit käyttää Photoshop CC:n resurssien luomista ja muodostaa kuvia eri kokoisina ja eri tarkkuuksilla muita projekteja varten.
Chris Converse

Tietoja verkkografiikan luomisesta Adobe Generatorilla saat artikkelista Resurssien erottelu verkkokäyttöön.

Kuvaresurssien luominen tasoista tai tasoryhmistä

Kuvaresurssien luomista oppii ymmärtämään, kun ajattelee PSD-tiedostoa (lataus tästä linkistä), jossa on seuraavat tasot:

Kuvaresurssien luominen Photoshopissa
PSD-esimerkkitiedosto tasoineen

Tässä tiedostossa on kaksi tasoryhmää, Nelikulmiot ja Ellipsit. Kummassakin ryhmässä on viisi tasoa.

Voit luoda tästä PSD-tiedostosta kuvaresursseja seuraavasti:

  1. Kun PSD-tiedosto on avattu, valitse Tiedosto > Luo > Kuvaresurssit.
  2. Lisää tarvittavat tiedostotunnisteet (.jpg, .png tai .gif) niiden tasojen tai tasoryhmien nimiin, joista haluat luoda kuvaresursseja. Voit vaihtaa tasoryhmien Nelikulmiot ja Ellipsit nimiksi Nelikulmiot.jpg ja Ellipsit.png ja tason Ellipsi_4 nimeksi Ellipsi_4.gif.

Huomautus:

Tasojen nimissä ei voi käyttää erikoismerkkejä : ja *.

Photoshop luo kuvaresurssit ja tallentaa ne alikansioon alkuperäisen PSD-tiedoston yhteyteen. Jos alkuperäistä PSD-tiedostoa ei ole vielä tallennettu, Photoshop tallentaa resurssit
uuteen kansioon työpöydälle.

Kuvaresurssien nimet Photoshopissa
Kuvaresurssien nimet luodaan tasojen tai tasoryhmien nimistä.

Huomautus:

Kuvaresurssien luonti on käytössä työstettävässä dokumentissa. Kun toiminto on otettu käyttöön, se on käytössä myös, kun dokumentti avataan seuraavan kerran. Jos haluat poistaa kuvaresurssien luonnin käytöstä, poista valinta kohdasta Tiedosto > Luo > Kuvaresurssit.

Useiden kuvaresurssien luominen tasosta tai tasoryhmästä

Jos haluat luoda tasosta tai tasoryhmästä useita resursseja, erota resurssien nimet pilkuin. Kun taso nimetään esimerkiksi seuraavasti, siitä luodaan kolme resurssia:

Ellipsi_4.jpg, Ellipsi_4b.png, Ellipsi_4c.png

Resurssien tallentaminen alikansioon

Tietyistä tasoista tai tasoryhmistä luodut kuvaresurssit voi tallentaa alikansioon, joka on heti dokumentin resurssikansion alla. Lisää alikansion nimi tason tai tasoryhmän nimeen, esimerkiksi:

[alikansio]/Ellipsi_4.jpg 

Verkkosisältöesimerkki

Kuvaresurssien luominen PSD-tiedostosta on kätevää etenkin, kun verkkosisältöä luodaan useita eri laitteita silmällä pitäen. Otetaan esimerkiksi seuraava verkkosivu ja sen tasorakenne:

Verkkosivu ja sen tasorakenne
Verkkosivu ja sen tasorakenne

Erotetaanpa yläreunan symboli ja Global Hotspots -kuvaruudukon ylärivi kuvaresursseiksi:

  • Lisätään kuvatiedostotunnisteet tasojen nimiin.
Tasojen tai tasoryhmien nimeäminen uudelleen Photoshopissa
Tasojen tai tasoryhmien nimeäminen uudelleen Photoshopissa

Tasojen tai tasoryhmien nimeäminen uudelleen

Huomautus:

Tason tai tasoryhmän sisällöstä luodaan yksi kuvaresurssi. Esimerkiksi yllä olevan kuvan AdventureCo-logo-tasoryhmä sisältää muototason ja tekstitason. Tasot yhdistetään, kun tasoryhmästä luodaan kuvaresurssi.

Photoshop luo resurssit ja tallentaa ne alkuperäisen PSD-tiedoston kanssa samaan paikkaan.

Luodut kuvaresurssit Photoshopissa
Luodut kuvaresurssit

Laatu- ja kokoparametrien määrittäminen

JPEG-resurssien oletuslaatuasetuksena on 90 %. PNG-resurssit luodaan oletusarvoisesti 32-bittisinä kuvina. GIF-resurssien luonnissa käytetään tavallista alfaläpinäkyvyyttä.

Samalla kun nimeät tasoja ja tasoryhmiä uudelleen, voit muokata luotavien resurssien laatu- ja kokoasetuksia.

JPEG-resurssien parametrit

  • Liitä haluttu laatuarvo resurssin nimeen muodossa .jpg(1–10) tai .jpg(1–100%). Esimerkki:
    • Ellipsi_4.jpg5
    • Ellipsi_4.jpg50%
  • Liitä kuvaresurssin nimen eteen sen haluttu koko joko suhteellisessa koossa tai tuetuissa yksiköissä (px, in, cm tai mm) ilmaistuna. Photoshop skaalaa kuvan arvon mukaisesti. Esimerkki:
    • 200% Ellipsi_4.jpg
    • 300 x 200 Nelikulmio_3.jpg
    • 10in x 200mm Nelikulmio_3.jpg

Huomautus: Muista lisätä välilyönti etuliitteen ja resurssin nimen väliin. Jos annat koon pikseleinä, yksikön tunnusta ei tarvitse lisätä. Esimerkiksi 300 x 200.

Huomautus:

Kuten esimerkeistä käy ilmi, voit käyttää eri yksiköitä ja pikseliarvoja samassa resurssissa määrittäessäsi sen kokoa. Esimerkiksi 4in x 100 Nelikulmio_3.jpg on resurssin luontiin kelpaava nimi.

PNG-resurssien parametrit

  • Liitä resurssin nimeen haluttu laatuarvo 8, 24 tai 32. Esimerkki:
    • Ellipsi_4.png24
  • Liitä kuvaresurssin nimen eteen sen haluttu koko joko suhteellisessa koossa tai tuetuissa yksiköissä (px, in, cm tai mm) ilmaistuna. Photoshop skaalaa kuvan arvon mukaisesti. Esimerkki:
    • 42% Ellipsi_4.png
    • 300mm x 20cm Nelikulmio_3.png
    • 10in x 50cm Nelikulmio_3.png

Huomautus: Muista lisätä välilyönti etuliitteen ja resurssin nimen väliin. Jos annat koon pikseleinä, yksikön tunnusta ei tarvitse lisätä. Esimerkiksi 300 x 200.

Huomautus:

Kuten esimerkeistä käy ilmi, voit käyttää eri yksiköitä ja pikseliarvoja samassa resurssissa määrittäessäsi sen kokoa. Esimerkiksi 4in x 100 Nelikulmio_3.png on resurssin luontiin kelpaava nimi.

GIF-resurssien parametrit

  • Liitä kuvaresurssin nimen eteen sen haluttu koko joko suhteellisessa koossa tai tuetuissa yksiköissä (px, in, cm tai mm) ilmaistuna. Esimerkki:
    • 42% Ellipsi_4.gif
    • 300mm x 20cm Nelikulmio_3.gif
    • 20in x 50cm Nelikulmio_3.gif

Huomautus: Muista lisätä välilyönti etuliitteen ja resurssin nimen väliin. Jos annat koon pikseleinä, yksikön tunnusta ei tarvitse lisätä. Esimerkiksi 300 x 200.

Huomautus:

Kuten esimerkeistä käy ilmi, voit käyttää eri yksiköitä ja pikseliarvoja samassa resurssissa määrittäessäsi sen kokoa. Esimerkiksi 4in x 100 Nelikulmio_3.gif on resurssin luontiin kelpaava nimi.

GIF-resursseille ei voi määrittää laatuparametrejä.

Monimutkaiset tasojen nimet

Kun tasoa nimetään resurssien luontia varten, sille voidaan kerralla määrittää useita resurssinimiä tarvittavin parametrein. Esimerkki:

120% Herkku.jpg, 42% Herkku.png24, 100x100 Herkku_2.jpg90%, 250% Herkku.gif

Photoshop luo tästä tasosta seuraavat resurssit:

  • Herkku.jpg (JPG-kuva laatuarvolla 8 ja skaalauksella 120 %)
  • Herkku.png (24-bittinen PNG-kuva skaalauksella 42 %)
  • Herkku_2.jpg (JPG-kuva laatuarvolla 90 % ja absoluuttisessa koossa 100×100 pikseliä)
  • Herkku.gif (GIF-kuva skaalauksella 250 %).

Resurssien oletusasetusten määrittäminen

Luoduille resursseille voi määrittää koko dokumentin laajuiset oletusasetukset. Noudata seuraavia ohjeita:

  1. Luo dokumenttiin tyhjä taso.
  2. Aloita tason nimi avainsanalla default. Määritä seuraavaksi asetukset, joita haluat käyttää kaikissa dokumentista luoduissa kuvaresursseissa. Esimerkki:

default hi-res/

Kaikki kuvaresurssit luodaan hi-res-nimiseen kansioon. Esimerkki: [resurssikansio]/hi-res/Herkku.jpg.

default hi-res/@2x

Kaikki kuvaresurssit luodaan hi-res-nimiseen kansioon. Lisäksi resurssien nimien perään lisätään @2x. Esimerkki: [resurssikansio]/hi-res/Herkku@2x.jpg.

default 50% lo-res/

Kuvaresursseja pienennetään 50 prosenttia, ja ne tallennetaan lo-res-nimiseen alikansioon, joka on dokumentin resurssikansiossa. 

default hi-res/@2x + 50% lo-res/

Tasosta luodaan kaksi kuvaresurssia:

  • Hi-res-nimiseen alikansioon luodaan kuvaresurssi, jonka nimen perässä on @2x.
  • Lo-res-nimiseen alikansioon luodaan kuvaresurssi, jota on pienennetty 50 prosenttia
    .

Huomautus:

Yksittäisille tasoille määritetyt skaalauskertoimet korvaavat oletusarvoiset skaalauskertoimet.

Kuvaresurssien luonnin poistaminen käytöstä kaikissa dokumenteissa

Voit poistaa kuvaresurssien luonnin käytöstä kaikissa Photoshop-dokumenteissa muokkaamalla Oletusasetuksia.

  1. Valitse Muokkaa > Oletusasetukset > Plug-Init.
  2. Poista valinta kohdasta Ota luontitoiminto käyttöön.
  3. Valitse OK.

Huomautus:

Tiedosto-valikon Luo-kohdan komento poistuu käytöstä, kun kuvaresurssien luonti poistetaan käytöstä Oletusasetuksissa. Toiminnon voi ottaa uudelleen käyttöön vain Oletusasetukset-valintaikkunasta.

Usein esitetyt kysymykset

Onko resursseille annettava yksilölliset nimet?

Samaan dokumenttiin liittyvien resurssien nimien on oltava yksilöllisiä.

Mikä on kuvaresurssien luonnissa käytetty oletuslaatuasetus?

JPG-resurssien oletuslaatuasetuksena on 90 %. PNG-resurssit luodaan oletusarvoisesti 32-bittisinä kuvina. GIF-resurssien luonnissa käytetään tavallista alfaläpinäkyvyyttä.

Voiko Photoshopissa luoda kuvaresursseja tasoista, joilla on käytetty läpinäkyvyyttä ja muita tehosteita?

Kyllä. Läpinäkyvyys ja muut tasoon lisätyt tehosteet näkyvät tasosta luoduissa resursseissa. Tällaiset tehosteet saatetaan kuitenkin sulauttaa luotaviin resursseihin.

Kuinka kuvaresurssi luodaan tasosta, jonka osa jää piirtoalueen ulkopuolelle?

Resurssit rajataan asiakirjan rajojen mukaan. Jos kuva ei mahdu asiakirjan rajojen sisäpuolelle, Generator ei luo vastaavia kuvaresursseja.

Voiko kuvaresurssien nimien erottamiseen käyttää ainoastaan pilkkua?

Pilkun (,) lisäksi kuvaresurssien nimet voi erottaa plusmerkillä (+). Esimerkki:

42% Nelikulmio_1.png24 + 100x100 Nelikulmio_1.jpg90%

tarkoittaa samaa kuin

42% Nelikulmio_1.png24, 100x100 Nelikulmio_1.jpg90%.

Video: Edge Reflow -projektin luominen Photoshop Generatorista

Video: Edge Reflow -projektin luominen Photoshop Generatorista
Tässä videossa näytetään, kuinka voit luoda verkkoasettelun, joka sovitetaan eri kokoisiin näyttöihin 320 pikselin leveydestä yli 1000 pikselin leveyteen.
Chris Converse

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ö