Creative Cloud Extract on Creative Cloud Assetsin uusi maksuton toiminto, jonka avulla voit tarkastella PSD-tiedostoa sekä sen tasoja ja tasosommitelmia suoraan selaimella. Siitä on hyötyä erityisesti verkkosuunnittelijoille ja -kehittäjille, jotka voivat jakaa PSD-tiedostoja, purkaa suunnittelutietoja ja ladata tuotantovalmiita resursseja. Extractilla voit suorittaa PSD-tiedostolle seuraavat toiminnot verkkoselaimesta:

  • Kopioi teksti ja CSS
  • Hae värien, liukuvärien ja kirjasimien tiedot
  • Mittaa elementtien välinen etäisyys
  • Tallenna optimoidut kuvaresurssit tuotantoa varten

Jos olet PSD-tiedostoja työstävä verkkosuunnittelija tai -kehittäjä, Creative Cloud Extract yksinkertaistaa merkittävästi mallien muuntamista koodiksi sekä vähentää hankalien vaiheiden määrää ja tarpeetonta edestakaista tiedonsiirtoa.

Huomautus:

Extract antaa PSD-tiedostoihin vain lukuoikeudet, niitä ei voi muokata.

Extractin tyylitiedot

  1. Kirjaudu Creative Cloud -sivustoon.
  2. Siirry Creative Cloud -tilisi Resurssit-osaan.
  3. Lähetä PSD-tiedosto vetämällä ja pudottamalla se Tiedostot-alueelle tai käyttämällä Valitse tiedosto -toimintoa. Voit siirtyä myös aikaisemmin ladattuun PSD-tiedostoon.
  4. Avaa PSD-tiedosto Extract -näkymässä napsauttamalla sen pienoiskuvaa.
Tiedosto avautuu Extract-näkymässä

Extract-näkymässä voit tarkastella PSD-mallia selaimella. Voit tarkastella tasohierarkiaa, näyttää tasokomponentit ja viedä osan PSD-mallista uusina kuvatiedostoina. Jos napsautat jotakin elementtiä PSD-mallin esikatselussa, taso valitaan ja siitä annetaan lisätietoja. Valinnan suorittamisen jälkeen käytettävissä ovat seuraavat toiminnot:

Elementtien koordinaattien ja mittojen näyttäminen ja kopioiminen

Kun napsautat PSD-tiedostossa yksittäistä elementtiä, näyttöön ilmestyy tietopaneeli. Tässä paneelissa näkyvät elementin leveys- ja korkeusmitat, kuten myös mallin elementtitason x- ja y-koordinaatit.

Suunnitteluelementin koordinaattien ja mittojen näyttäminen kuvapisteinä (px)
Suunnitteluelementin koordinaattien ja mittojen näyttäminen prosentteina (%)

Huomautus:

Napsauta mitä tahansa arvoa, kuten W, H, X tai Y, jos haluat kopioida sen leikepöydälle.

Extractin mittoja voidaan tarkastella kuvapiste- tai prosenttiyksikköinä. Jos valittuna on yksi elementti, leveyden ja korkeuden prosenttimitat on annettu suhteessa PSD-mallin kokonaisleveyteen ja -korkeuteen. Jos valittuna on kaksi elementtiä, joista yksi on kokonaan toisen sisällä, sisemmän elementin leveys ja korkeus ilmoitetaan suhteessa ulomman elementin mittoihin.

Sisempien elementtien mitat näytetään suhteessa ympärillä olevan elementin mittoihin.

Huomautus:

Napsauta mitä tahansa arvoa, jos haluat kopioida sen leikepöydälle.

Kahden elementin välisen etäisyyden näyttäminen

Jos haluat näyttää kahden elementin välisen etäisyyden, paina vaihtonäppäintä ja napsauta elementtiä. Kahden elementin välisen etäisyyden tietämisestä on hyötyä reunukseen tai täyttöön liittyviä tietoja määritettäessä.

Kahden elementin välinen etäisyys

CSS-koodin kopioiminen

Kun PSD-mallista on valittu elementti, kopioi elementin CSS-koodi napsauttamalla sinisessä tietopaneelissa Kopioi CSS -vaihtoehtoa. Voit myös näyttää ja kopioida CSS-koodin CSS Inspectorista.

CSS-koodin tarkasteleminen

Huomautus:

Extract tukee esikäsittelytoimintoja. Valitse Tyylit-välilehdestä, CSS-kohdan vierestä (alanuoli), jos haluat tarkastella CSS-esikäsittelytoimintojen käyttöön liittyviä asetuksia.

CSS-esikäsittelytoimintojen käytön mahdollistava asetus

Tekstin kopioiminen

Jos valitsemassasi elementissä on tekstiä, kopioi teksti leikepöydälle valitsemalla Kopioi teksti.

Valitun tekstin kopioiminen leikepöydälle

Kirjasimien, värien ja liukuvärien tietojen kopioiminen

Voit näyttää ja kopioida suunnitteluasiakirjassa (PSD) käytössä oleviin kirjasimiin, väreihin ja liukuväreihin liittyvät tiedot avaamalla Tyylit-paneelin. Tietoja tarkasteltaessa voit napsauttaa kirjasinkokoa, väriä tai liukuväriluetteloa ja kopioida sen arvon leikepöydälle.

Esimerkki liukuvärin arvosta

Kun valitset elementin, käytössä olevat teksti- ja värityylit korostetaan Tyylit-paneelissa.

Huomautus:

Adobe Typekitiin integroidun Extractin avulla voit käyttää tuhansia laadukkaita kirjasimia. Typekit-kuvake () näkyy Tyylit-paneelissa olevien Typeki-kirjasimien vieressä. Kun napsautat tätä Typekit-kuvaketta, Extract avaa Typekit-kirjasinta vastaavan sivun.

Kun löydät verkkoturvallisen kirjasimen, jota haluat käyttää, lisää se Typekitissä olevaan pakettiin ja luo siihen tuotantokoodissa linkki.

Valitun elementin kirjasin- ja väritiedot

Värimuokkaintyökalun käyttäminen

Värimuokkaintyökalun () avulla voit helposti etsiä mallissa olevan elementin värin.

  • Valitse värimuokkaintyökalu ja napsauta mitä tahansa mallin kohtaa. Värimuokkaintyökalu tunnistaa värin ja lisää sen värimallina Tyylit-paneeliin. Voit nyt helposti näyttää ja kopioida värin CSS-tiedot.
Värimuokkaintyökalu

Kuvaresurssien purkaminen

Creative Cloud Extractin avulla voit valita yhden tai useamman PSD-tiedoston tason ja purkaa kuvaresurssin. Resurssit voidaan purkaa 8-bittisinä PNG- sekä 32-bittisinä PNG-, JPG- ja SVG-kuvina.

Kuvaresurssin purkaminen

Napsauta elementin sinisessä tietopaneelissa -kuvaketta ja toimi seuraavasti:

  1. Tarkista kuvaresurssin asetukset. Valitse tarvittaessa toinen tuettu kuvamuoto (PNG, JPG tai SVG).
  2. Jos olet luomassa JPG-resurssia, säädä kuvaresurssin laatua.
  3. Valitse tarvittaessa skaalausvaihtoehto. Valitse esimerkiksi Skaalaussuhde 2×. Resurssin skaalaussuhde voi olla 0,1× - 5×.
  4. Valitse Tallenna.
  5. Etsi luotu resurssi Resurssit-paneelista. Resurssit ovat käytettävissä myös Creative Cloudin Resurssit-näkymässä olevan PSD-tiedoston viereisessä uudessa kansiossa. Luodun kansion nimi on -assets. Jos tiedoston nimi on esimerkiksi adventure.psd, resurssikansion nimeksi annetaan adventure-assets.

    Kun napsautat pienoiskuvaa Resurssit-paneelissa, resurssi ladataan paikalliseen laitteeseen.
Resurssit-paneeli

Huomautus:

Kun olet kirjautunut sisään ja tarkastelet PSD-tiedostoa Creative Cloudin Resurssit-kansiossa, voit käyttää resurssien purkamisen lisäasetuksia. Aina kun lataat resurssin, se lisätään Creative Cloud Assetsin Resurssit-paneeliin ja .psd_assets-kansioon. Voit ladata resurssin paikallisesti tietokoneeseen napsauttamalla Resurssit-paneelin pienoiskuvaa.

Resurssit-paneeli ei ole käytettävissä, kun napsautat toiselta käyttäjältä saatua linkkiä PSD-tiedoston tarkastelua varten. Tässä tapauksessa voit käyttää Extractia normaalisti, mutta resurssien lataaminen tietokoneeseen aloitetaan heti -kuvakkeen napsauttamisen jälkeen. Voit etsiä resurssit paikalliselta levyltä selaimen lataustenhallinnalla.

Tasojen käyttäminen

Tasot-paneelissa näkyvät PSD-mallin kaikki tasot ja tasoryhmät. Koska Creative Cloud Extract on toiminto, jolla on vain lukuoikeudet, tasojen muutoksia ei tallenneta PSD-tiedostoon.

Tasot-paneelissa voit muuttaa näkyvyyttä, valita tasoelementtejä ja purkaa resursseja. 

Tasojen tai tasoryhmien purkaminen kuvaresursseina

Voit purkaa PSD-tiedoston tason tai tasoryhmän kuvaresurssina. Toimi seuraavasti:

  1. Napsauta Tasot-paneelia, jossa voit tarkastella PSD-tiedoston tasohierarkiaa.
Tasohierarkia

Huomautus:

Voit valita hierarkiasta useita tasoja ja viedä ne yhtenä uutena kuvaresurssina, joka sisältää kaikki valitut tasot. 

  1. Tutki tasohierarkiaa ja liiku siinä. 
    • Voit laajentaa tasoryhmän napsauttamalla sen vieressä olevaa kansion kuvaketta ().
    • Napsauttamalla elementtiä voit korostaa sitä vastaavan tason tai tasoryhmän Tasot-paneelissa.
  2. Valitse kuvaresurssina purettava taso tai tasoryhmä. Pidä Komento-näppäintä (Mac) tai Ctrl-näppäintä (Windows) painettuna, jos haluat valita useita tasoja. Jos valitset useita objekteja, ne viedään yhtenä resurssina, joka sisältää valitut tasot tai ryhmät.
  3. Napsauta tason tai tasoryhmän vieressä olevaa -kuvaketta. Jos olet valinnut useita tasoja tai tasoryhmiä, napsauta minkä tahansa valitun tason vieressä olevaa -kuvaketta.
  4. Anna uudelle kuvaresurssille nimi.
  5. Valitse kuvaresurssin muoto (PNG 8 Alpha, PNG 32, JPG tai SVG).
  6. (Valinnainen) Jos olet luomassa JPG-kuvaresurssia, voit säätää sen laatua.
  7. Valitse Tallenna.
  8. Etsi luotu resurssi Resurssit-ruudusta. Resurssit ovat käytettävissä myös Creative Cloudin Resurssit-näkymässä olevan PSD-tiedoston viereisessä uudessa kansiossa.

Huomautus:

Nollaa kerrokset -toiminnolla voit palauttaa mallin tasojen näkyvyyden alkuperäiseen tilaan.

Tason tai tasoryhmän piilottaminen

Voit piilottaa tason tai tasoryhmän tai tuoda sen esiin painelemalla Tasot-paneelin vieressä olevaa silmäkuvaketta ().

Tasovedosten käsitteleminen

Creative Cloud Extractin avulla voit tarkastella Photoshopin eri tasovedoksia. Jos lataat Extractiin tasovedoksia sisältävän PSD-tiedoston, näet PSD-tiedoston yläosassa ponnahdusvalikon. Tämä ponnahdusvalikko sisältää PSD-tiedoston kaikki tasovedokset ja Edellinen dokumentin tila -nimisen valikoiman. Edellinen dokumentin tila on Photoshopin viimeinen tila ennen tiedoston tallentamista ja lataamista Creative Cloudiin. Tämä tila voi olla tasovedos, mutta näin ei välttämättä ole.

Tasovedosten käsitteleminen Extractissa

Tiedostojen jakaminen

Kun tarkastelet PSD-tiedostoa Extract-välilehdessä, voit jakaa sen Creative Cloudin jakotoiminnolla. Käyttäjät, joiden kanssa jaat tiedoston, voivat purkaa siitä resursseja ja mittoja myös silloin, kun he eivät ole kirjautuneet Creative Cloudiin.

Lisätietoja on artikkelissa Tiedostojen ja kansioiden jakaminen.

Palautteen antaminen

Jos sinulla on muuta kysyttävää, haluat ilmoittaa ongelmasta tai antaa muuta palautetta, voit tehdä sen Extract for PSD -foorumissa.

Usein kysytyt kysymykset

Tukeeko Extract Photoshop Generatorin tunnisteita?

Kyllä. Siinä määrin kuin se on mahdollista, asetukset palautuvat kuvaresurssia purettaessa vastaavan tason nimessä määritettyihin Generatorin tunnisteisiin.

Voiko PSD-tiedostoa muokata Extractin avulla?

Ei. Extractilla on vain lukuoikeudet.

Onko joitakin merkkejä, joita ei tueta PSD-tiedostojen tai resurssien nimissä?

Erikoismerkkejä |, ", ?, <, >, /, \, ;, * ja : ei tueta PSD-tiedostojen tai kuvaresurssien nimissä.

Kuka voi käyttää lähettämiäni PSD-tiedostoja?

Kaikki Extractiin lähettämäsi tiedostot ovat käytettävissä vain Creative Cloud -tilisi kautta.

Jos haluat jakaa PSD-tiedoston, voit tehdä siitä julkisen ja jakaa linkin. Jos Extract-toiminto on jaon aikana käytössä, kaikki, joilla on linkki, voivat tarkastella PSD-tiedostoa Extractissa ja purkaa siitä resursseja.

Toimiiko Extract CMYK-väriavaruutta tukevien PSD-tiedostojen kanssa?

Ei. Muunna CMYK-muotoiset PSD-tiedostot RGB-väriavaruuteen, ennen kuin lähetät ne Extractiin.

Tuetaanko PSD-tiedostojen lisäksi myös muita tiedostomuotoja?

Ei. Tällä hetkellä tuetaan vain PSD-tiedostoja.

Onko Extractin käsiteltävissä olevilla PSD-tiedostoilla rajoituksia?

Extract on suunniteltu Photoshopilla luotuja PSD-tiedostoja varten. Kahta gigatavua suurempien tai yli tuhat tasoa sisältävien PSD-tiedostojen käsittelyä Extractilla ei suositella.

Miten Extractin ja Adobe Generatorin Photoshop CC -versiot eroavat toisistaan?

Generator ja Extract on molemmat suunniteltu helpottamaan suunnittelijoiden ja kehittäjien koodausprosessia. Generator purkaa kuvaresursseja Photoshop CC:ssä, kun taas Extract toimii suoraan selaimessa Creative Cloud -palveluna. Extract ei vaadi toimiakseen Photoshopin asentamista tai suorittamista.

Extractissa voit myös luoda useista tasoista yhden resurssin.

Tarvitsenko Creative Cloud -tilin Extractin käyttöä varten?

Kaikki, joilla on maksuton tai maksullinen Creative Cloud -tili, voivat ladata PSD-tiedoston Creative Cloud Assetsiin ja käyttää Extractia.

Jos jaat Extract-linkin, vastaanottajan ei tarvitse olla kirjautuneena Creative Cloud -tilille purkaakseen resursseja ja mittoja PSD-tiedostosta.

Miksi jotkin värit tai liukuvärit eivät sisälly Extractin Tyylit-paneeliin?

Useimmissa tällaisissa tapauksissa värit tai liukuvärit ovat kuvapistepohjaisia täyttövärejä, joita Extract ei tue. Jos PSD-tiedostossa käytetään tällaisia täyttövärejä, sieppaa värit värimuokkaimella ja lisää värimallit Tyylit-paneeliin.

Onko Extractissa asetettu CSS-tiedostoissa oleville liukuväreille rajoituksia?

Kyllä, CSS-tiedostoissa ei voi luoda tietyn tyyppisiä liukuvärejä ilman erikoiskonsteja. Extractilla ei tällä hetkellä voi luoda Kulma-, Peilattu-, Vinoneliö- ja Muodon murtuma -tyyppisiä liukuvärejä sisältäviä CSS-tiedostoja. Lineaarinen- ja Säteittäinen-liukuvärityypit ovat kuitenkin tuettuja.

Miksi Extractin PSD-esikatselukuva ei vastaa sitä, mitä näen Photoshopissa?

Extract-näkymän ja Photoshopin välillä voi olla kuvanmuodostuksesta johtuvia eroja. Jos huomaat tällaisia eroja, ota yhteyttä.

Ilmoita ongelmasta foorumillamme ja kerro, mitä näet. Voit myös lähettää erosta kuvan, niin yritämme ratkaista ongelman puolestasi.

Voinko käyttää Extractia mobiililaitteissa?

Mobiililaitteissa voit esikatsella PSD-tiedoston ja tarkastella joitakin tyylejä, kuten värejä, kirjasimia ja liukuvärejä. PSD-tiedostoa ei voi käsitellä samalla tavalla kuin työpöydällä.

Voinko ladata kaikki resurssit kerrallaan?

Extract ei tällä hetkellä tue kaikkien resurssien lataamista kerrallaan. Sinun on purettava ja ladattava resurssit yksitellen.

Voinko ladata mallin koko CSS-koodin kerrallaan?

Extract ei tällä hetkellä tue mallin koko koodin lataamista kerrallaan. Sinun on valittava yksittäiset kohteet ja kopioitava niiden CSS-koodi tuotantokoodiin.

Jos olet kiinnostunut tästä toiminnosta, lähetä foorumillemme viesti ja kerro, miten haluat järjestää CSS-tiedot.

Jaoin PSD-tiedostoni, mutta vastaanottaja ei näe Extract-välilehteä. Miksi?

Jos jaoit PSD-tiedoston ennen Extractin julkaisemista vuoden 2014 elokuun lopussa, PSD-tiedostossa ei ole aktivoitu Extract-välilehteä. Voit aktivoida sen seuraavalla tavalla:

Tämä toiminto aktivoi Extractin julkisesti jaettua URL-osoitetta muuttamatta.

  1. Avaa Lähetä linkki -valintaikkunassa oleva Lisäasetukset-valikko.
  2. Varmista, että Salli Extract -toiminto on otettu käyttöön.

Mitä eroa on Project Parfaitilla ja Extractilla?

Project Parfait on palvelu, jonka Adobe julkaisi beetaversiona esitelläkseen Extractissa nyt käytettävät työnkulut. Extractissa on kaikki Project Parfaitin toiminnot ja paljon muuta. Nyt kun Project Parfait on esitelty virallisesti Creative Cloudissa, mahdollisuus käyttää Project Parfait -palvelua tietojen ja resurssien purkamiseen PSD-tiedostoista päättyy. 

Mitä Project Parfaitiin ladatuille PSD-tiedostoille tapahtuu?

Jos käytit Project Parfaitia ja haluat ladata käsittelemäsi tiedostot, voit tehdä tämän vuoden 2014 loppuun asti. 

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ö