Du kan generere JPEG-, PNG- eller GIF-bilderessurser fra innholdet av lag eller laggrupper i en PSD-fil. Ressurser blir automatisk generert når du legger til en støttet bildeformatendelse til et lagnavn eller et laggruppenavn. Alternativt så kan du også spesifisere parametre for kvalitet og størrelse for den genererte bilderessursen.

Det er spesielt nyttig for webdesign til flere enheter å generere bilderessurser fra en psd-fil.

Video: Generere webelementer i Photoshop CC

Video: Generere webelementer i Photoshop CC
Denne videoen tar deg gjennom de ulike måtene du kan bruke elementgeneratoren på i Photoshop CC til å generere bilder med forskjellig størrelse og oppløsning for bruk i andre prosjekter.
Chris Converse

Hvis du ønsker informasjon om å opprette og generere webgrafikk med Adobe Generator, kan du se Trekke ut ressurser fra nett.

Generere bilderessurser fra lag eller laggrupper

Vurder en enkel PSD-fil (last ned fra denne koblingen) med følgende laghierarki, for å forstå generering av bilderessurs:

Genererte bilderessurser i Photoshop
PSD-eksempelfil og lagerhierarkiet

Laghierarkiet for denne filen har to laggrupper – Rounded_rectangles og Ellipses. Hver av disse lagergruppene inneholder fem lag.

Følg disse trinnene for å generere bilderessurser fra denne PSD-filen:

  1. Med PSD-filen åpen, velger du Fil > Generer > Bilderessurser.
  2. Legg den riktige filendelsen for formatet (.jpg, .png eller .gif) til navnene på lagene eller laggruppene du ønsker generere bildeelement fra. Du kan for eksempel endre navn laggruppene Rounded_rectangles og Ellipses til Rounded_rectangles.jpg og Ellipses.png, og laget Ellipse_4 til Ellipse_4.gif.

Merk:

Spesialtegnene : og * støttes ikke i lagnavn.

Photoshop genererer bilderessursene og lagrer dem i en undermappe ved siden av PSD-kildefilen. Hvis PSD-kildefilen ikke er lagret ennå, vil Photoshop lagre de genererte ressursene i en
ny mappe på skrivebordet.

Bilderessursnavn i Photoshop
Bilderessursnavn genereres fra lagnavn/laggruppenavn

Merk:

Generering av bilderessurs er aktivert for gjeldende dokument. Når det er aktivert, vil funksjonen forbli tilgjengelig, uavhengig av når dokumentet åpnes igjen. Fjern markeringen for Fil > Generer > Bilderessurser for å deaktivere generering av bilderessurs for det gjeldende dokumentet.

Generere bilderessurser fra et lag eller en laggruppe

Separer elementnavnene med komma for å generere flere elementer fra et lag / en laggruppe. Eksempel: Det følgende lagnavnet genererer tre ressurser:

Ellipse_4.jpg, Ellipse_4b.png, Ellipse_4c.png

Lagre innhold i en undermappe

Du kan velge å lagre bildeinnholdet som er generert fra bestemte lag/laggrupper, i en undermappe direkte under dokumentinnholdsmappen. Inkluder undermappens navn i laget/laggruppenavnet, for eksempel:

[undermappe]/Ellipse_4.jpg 

Webdesign benytter store/små bokstaver

Det er spesielt nyttig for webdesign fra flere enheter å generere bilderessurser fra en PSD-fil. Vurder følgende webdesign og lagstrukturen:

En webdesign og laghierarkiet
En webdesign og laghierarkiet

Trekk ut ikonet på toppen og den øverste raden av Global Hotspots-bilderutenettet som bilderessurser:

  • Legg til bildeformatendelse til de passende lagnavnene.
Gi nytt navn til de passende lagene/laggruppene i Photoshop
Gi nytt navn til de passende lagene/laggruppene i Photoshop

Gi nytt navn til de passende lagene/laggruppene

Merk:

En enkelt bilderessurs genereres fra innholdet av et lag / en laggruppe. Eksempel: Laggruppen AdventureCo Logo i skjermkopien ovenfor inneholder et formlag og et direkte tekstlag. Disse lagene blir slått sammen når en bilderessurs genereres fra laggruppen.

Photoshop genererer ressursene og lagrer dem i på samme sted som PSD-kildefilen.

Genererte bilderessurser i Photoshop
Genererte bilderessurser

Spesifisere parametre for kvalitet og størrelse

JPEG-ressurser genereres som standard med en kvalitet på 90 %. PNG-ressurser genereres som 32-biters bilder som standard. GIF-ressurser genereres med grunnleggende alfakanal.

Når du gir nytt navn til lag eller laggrupper i forberedelse av ressursgenerering, kan du tilpasse kvalitet og størrelse.

Parametre for JPEG-ressurser

  • Legg til ønsket utdatakvalitet etter elementnavnet: .jpg(1–10) eller .jpg(1–100 %). Eksempel:
    • Ellipse_4.jpg5
    • Ellipse_4.jpg50%
  • Legg til ønsket utdatastørrelse for bilde (relativ eller i støttede formater: px (bildepunkter), in (tommer), cm og mm) før elementnavnet. Photoshop skalerer bilde i henhold til dette. Eksempel:
    • 200% Ellipse_4.jpg
    • 300 x 200 Rounded_rectangle_3.jpg
    • 10in x 200mm Rounded_rectangle_3.jpg

Merk: Husk å legge til et ekstra mellomrom mellom prefikset og ressursnavnet. Hvis du angir størrelsen i bildepunkter (px), trenger du ikke å angi måleenheten. Eksempel: 300 x 200.

Merk:

Du kan, som illustrert, blande forskjellige enheter og bildepunkter mens du spesifiserer ønsket bildestørrelse for utdata. Eksempel: 4in x 100 Rounded_rectangle_3.jpg er et gyldig lagnavn for ressursgenerering.

Parametre for PNG-ressurser

  • Legg til ønsket utdatakvalitet etter ressursnavnet: 8, 24 eller 32. Eksempel:
    • Ellipse_4.png24
  • Legg til ønsket utdatastørrelse for bilde (relativ eller i støttede formater: px (bildepunkter), in (tommer), cm og mm) før elementnavnet. Photoshop skalerer bilde i henhold til dette. Eksempel:
    • 42% Ellipse_4.png
    • 300mm x 20cm Rounded_rectangle_3.png
    • 10in x 50cm Rounded_rectangle_3.png

Merk: Husk å legge til et ekstra mellomrom mellom prefikset og ressursnavnet. Hvis du angir størrelsen i bildepunkter (px), trenger du ikke å angi måleenheten. Eksempel: 300 x 200.

Merk:

Du kan, som illustrert, blande forskjellige enheter og bildepunkter mens du spesifiserer ønsket bildestørrelse for utdata. Eksempel: 4in x 100 Rounded_rectangle_3.png er et gyldig lagnavn for ressursgenerering.

Parametre for GIF-ressurser

  • Legg til ønsket utdatastørrelse for bilde (relativ eller i støttede formater: px (bildepunkter), in (tommer), cm og mm) før elementnavnet. Eksempel:
    • 42% Ellipse_4.gif
    • 300mm x 20cm Rounded_rectangle_3.gif
    • 20in x 50cm Rounded_rectangle_3.gif

Merk: Husk å legge til et ekstra mellomrom mellom prefikset og ressursnavnet. Hvis du angir størrelsen i bildepunkter (px), trenger du ikke å angi måleenheten. Eksempel: 300 x 200.

Merk:

Du kan, som illustrert, blande forskjellige enheter og bildepunkter mens du spesifiserer ønsket bildestørrelse for utdata. Eksempel: 4in x 100 Rounded_rectangle_3.gif er et gyldig lagnavn for ressursgenerering.

Parametre for kvalitet er ikke tilgjengelig for GIF-ressurser.

Konstruere komplekse lagnavn

Du kan spesifisere flere ressursnavn med parametre mens du navngir et lag for ressursgenerering. Eksempel:

120% Delicious.jpg, 42% Delicious.png24, 100x100 Delicious_2.jpg90%, 250% Delicious.gif

Photoshop genererer følgende ressurser fra dette laget:

  • Delicious.jpg (et JPG-bilde med en kvalitet på 8, skalert til 120 %)
  • Delicious.png (et 24-biters PNG-bilde, skalert til 42 %)
  • Delicious_2.jpg (et JPG-bilde med en kvalitet på 90 %, med en absolutt størrelse på 100 x 100 px)
  • Delicious.gif (et GIF-bilde skalert til 250 %)

Angi standardinnstillinger for innhold

Du kan spesifisere standard dokumentinnstillinger som gjelder for det genererte innholdet. Følg disse trinnene:

  1. Opprett et tomt lag i dokumentet.
  2. Start navnet på laget med nøkkelordet standard. Nå kan du angi innstillingene som du ønsker å bruke på alt bildeinnhold generert fra dokumentet. Eksempel:

standard hi-res/

Genererer alt bildeinnhold i en undermappe som heter hi-res. Eksempel: [innholdsmappe]/hi-res/Delicious.jpg.

standard hi-res/@2x

Genererer alt bildeinnhold i en undermappe som heter hi-res. I tillegg er @2x lagt til innholdsnavnet. Eksempel: [innholdsmappe]/hi-res/Delicious@2x.jpg.

standard 50% lo-res/

Lagrer bildeinnhold skalert ned med 50 % i undermappen lo-res under dokumentets innholdsmappe

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

Genererer to bildeinnhold fra et lag:

  • Et bildeinnhold i hi-res-undermappen, hvis navn er tillagt @2x
  • Et bildeinnhold i lo-res-undermappen, som er skalert ned med 50 %

Merk:

Standard skaleringsfaktorer overstyres av skaleringsfaktorer angitt for individuelle lag.

Deaktivere generering av bilderessurs for alle dokumenter

Du kan deaktivere generering av bilderessurs globalt for alle Photoshop-dokumenter ved å endre Innstillinger.

  1. Velg Rediger > Innstillinger > Plugin-moduler.
  2. Fjern markeringen for Aktiver generator.
  3. Klikk på OK.

Merk:

Menykommandoen Fil > Generer er utilgjengelig når du deaktiverer generering av bilderessurser i Innstillinger. Funksjonen kan bare aktiveres på nytt i dialogboksen Innstillinger.

VANLIGE SPØRSMÅL

Må jeg spesifisere unike ressursnavn?

Ressursnavn må være unike på dokumentnivå.

Hva er standard kvalitetsnivå ved oppretting av bilderessurser?

JPG-ressurser genereres som standard med en kvalitet på 90 %. PNG-ressurser genereres som 32-biters bilder som standard. GIF-ressurser genereres med grunnleggende alfakanal.

Genererer Photoshop bilderessurser fra lag med gjennomsiktighet og andre effekter?

Ja. Gjennomsiktighet og andre effekter på et lag reflekteres i ressursen generert fra det laget. Effekter kan derimot sammenslås i den genererte ressursen.

Hvordan genereres bilderessurser fra lag som har en utfallsbredde større enn arbeidsområdet?

Innholdselementer beskjæres etter dokumentgrensene. Hvis et bilde ikke passer inn i dokumentgrensene, oppretter ikke Generator de tilknyttede bildeelementene.

Er kommaet den eneste tillatte separatoren mellom navn for bildeelement?

I tillegg til komma (,) kan du bruke symbolet pluss (+) som skilletegn mellom navn for bilderessurser. Eksempel:

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

er det samme som:

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

Video: Opprette et Edge Reflow-prosjekt fra Photoshop Generator

Video: Opprette et Edge Reflow-prosjekt fra Photoshop Generator
Denne videoen viser deg hvordan du oppretter et weboppsett som reagerer på skjermstørrelser fra 320 bildepunkter til over 1 000 bildepunkter.
Chris Converse

Dette produktet er lisensiert i henhold til Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Innlegg på Twitter™ og Facebook dekkes ikke av Creative Commons-vilkår.

Juridiske merknader   |   Regler for personvern på nettet