Afbeeldingsmiddelen genereren op basis van lagen

U kunt JPEG-, PNG-, GIF- of SVG-afbeeldingsmiddelen genereren op basis van de inhoud van een laag of laaggroep in een PSD-bestand. Er worden automatisch middelen gegenereerd wanneer u een ondersteunde extensie voor een afbeeldingsindeling toevoegt aan de naam van een laag of laaggroep. U kunt desgewenst ook de parameters voor kwaliteit en grootte opgeven voor de gegenereerde afbeeldingsmiddelen.

Het genereren van afbeeldingsmiddelen uit een PSD-bestand is bijzonder handig wanneer u websites ontwerpt voor verschillende apparaten.

Voor het maken en exporteren van webafbeeldingen, zie Het exporteren van bestanden in verschillende formaten vanuit Photoshop.

Als u de generator voor afbeeldingselementen beter wilt begrijpen, kunt u dit eenvoudige PSD-bestand (te downloaden via deze koppeling) gebruiken met de volgende laagvolgorde:

De laaghiërarchie voor dit bestand bestaat uit twee laaggroepen: Rounded_rectangles en Ellipses. Elk van deze laaggroepen bevat vijf lagen.

Voer de volgende stappen uit om afbeeldingsmiddelen te genereren op basis van dit PSD-bestand:

1. Zorg dat het PSD-bestand geopend is en selecteer Bestand > Genereren > Afbeeldingsmiddelen.
2. Voeg geschikte bestandsextensies (.jpg, .png, .gif of .svg) toe aan de namen van de lagen of laaggroepen op basis waarvan u afbeeldingsmiddelen wilt genereren. Wijzig bijvoorbeeld de naam van de laaggroepen Rounded_rectangles en Ellipses in Rounded_rectangles.jpg en Ellipses.png en de naam van de laag Ellipse_4 in Ellipse_4.gif.

Photoshop genereert de afbeeldingsmiddelen en slaat deze samen met het PSD-bronbestand op in een submap. Als het PSD-bronbestand nog niet is opgeslagen, slaat Photoshop de gegenereerde middelen op in een nieuwe map op uw bureaublad.

Assets genereren voor clouddocumenten

Als u met een clouddocument werkt, worden assets opgeslagen in de map Photoshop Cloud Associates:

• Windows: C:\Gebruikers\uwnaam\Documenten\Adobe\Photoshop Cloud Associates
• macOS: /Gebruikers/uwnaam/Documenten/Adobe/Photoshop Cloud Associates

Meerdere middelen genereren op basis van een laag of laaggroep

Als u meerdere middelen wilt genereren op basis van een laag of laaggroep, scheidt u de middelnamen met een komma van elkaar. De volgende laagnaam genereert bijvoorbeeld drie middelen:

Ellipse_4.jpg, Ellipse_4b.png, Ellipse_4c.png

Middelen opslaan in een submap

U kunt ervoor kiezen om afbeeldingsmiddelen die vanuit bepaalde lagen/laaggroepen zijn gegenereerd, op te slaan in een submap, direct onder de middelenmap van het document. Neem de naam van de submap op in de naam van de laag/laaggroep, bijvoorbeeld:

[submap]/Ellipse_4.jpg 

Een praktijkvoorbeeld voor webontwerp

Het genereren van afbeeldingsmiddelen uit een PSD-bestand is bijzonder handig wanneer u websites ontwerpt voor verschillende apparaten. Neem bijvoorbeeld het volgende webontwerp en de bijbehorende laagstructuur:

We gaan het pictogram bovenaan en de bovenste rij van het afbeeldingsraster Global Hotspots extraheren als afbeeldingsmiddelen:

• Voeg een extensie voor afbeeldingsindelingen toe aan de desbetreffende laagnamen.

Wijzig de namen van de desbetreffende lagen/laaggroepen

Photoshop genereert de middelen en slaat deze op dezelfde locatie op als het PSD-bronbestand.

Parameters voor kwaliteit en grootte opgeven

JPEG-middelen worden standaard met een kwaliteit van 90% gegenereerd. PNG-middelen worden standaard als 32-bits afbeeldingen gegenereerd. GIF-middelen worden met standaard alfatransparantie gegenereerd.

Als u de namen van lagen of laaggroepen wijzigt in voorbereiding op het genereren van middelen, kunt u kwaliteit en grootte aanpassen.

Parameters voor JPEG-middelen

• Voeg de gewenste uitvoerkwaliteit als achtervoegsel toe aan de naam van het middel: .jpg(1-10) of .jpg(1-100%). Bijvoorbeeld:
  • Ellipse_4.jpg5
  • Ellipse_4.jpg50%
• Voeg de gewenste afbeeldingsgrootte van de uitvoer (relatief of in de ondersteunde notaties px, in, cm en mm) als voorvoegsel toe aan de naam van het middel. De afbeelding wordt dienovereenkomstig geschaald. Bijvoorbeeld:
  • 200% Ellipse_4.jpg
  • 300 x 200 Rounded_rectangle_3.jpg
  • 10in x 200mm Rounded_rectangle_3.jpg
    

Opmerking:Vergeet niet een spatie te plaatsen tussen het voorvoegsel en de naam van het middel. Als u de grootte in pixels opgeeft, kunt u de eenheid weglaten. Bijvoorbeeld 300 x 200.

Parameters voor PNG-middelen

• Voeg de gewenste uitvoerkwaliteit als achtervoegsel toe aan de naam van het middel: 8, 24 of 32. Bijvoorbeeld:
  • Ellipse_4.png24
• Voeg de gewenste afbeeldingsgrootte van de uitvoer (relatief of in de ondersteunde notaties px, in, cm en mm) als voorvoegsel toe aan de naam van het middel. De afbeelding wordt dienovereenkomstig geschaald. Bijvoorbeeld:
  • 42% Ellipse_4.png
  • 300mm x 20cm Rounded_rectangle_3.png
  • 10in x 50cm Rounded_rectangle_3.png

Opmerking:Vergeet niet een spatie te plaatsen tussen het voorvoegsel en de naam van het middel. Als u de grootte in pixels opgeeft, kunt u de eenheid weglaten. Bijvoorbeeld 300 x 200.

Parameters voor GIF-middelen

• Voeg de gewenste afbeeldingsgrootte van de uitvoer (relatief of in de ondersteunde notaties px, in, cm en mm) als voorvoegsel toe aan de naam van het middel. Bijvoorbeeld:
  • 42% Ellipse_4.gif
  • 300mm x 20cm Rounded_rectangle_3.gif
  • 20in x 50cm Rounded_rectangle_3.gif

Opmerking:Vergeet niet een spatie te plaatsen tussen het voorvoegsel en de naam van het middel. Als u de grootte in pixels opgeeft, kunt u de eenheid weglaten. Bijvoorbeeld 300 x 200.

Parameters voor kwaliteit zijn niet beschikbaar voor GIF-middelen.

Complexe laagnamen samenstellen

U kunt meerdere middelnamen opgeven met parameters terwijl u een laag benoemt voor het genereren van middelen. Bijvoorbeeld:

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

Photoshop genereert de volgende middelen op basis van deze laag:

• Delicious.jpg (een JPEG-afbeelding met de kwaliteit 8 en geschaald naar 120%)
• Delicious.png (een 24-bits PNG-afbeelding, geschaald naar 42%)
• Delicious_2.jpg (een JPEG-afbeelding met een kwaliteit van 90% en een absoluut formaat van 100x100 px)
• Delicious.gif (een naar 250% geschaalde GIF-afbeelding)

Voorbeelden van absoluut schalen

Goede voorbeelden van absoluut schalen

• 100x80 foo.png (eenvoudig absoluut schalen)
• 80 x 100px foo.png (spaties tussen lengtes)
• 4in x100 foo.png (combinatie van lengtes met en zonder eenheden)
• 90mm x120cm foo.png (combinatie van verschillende eenheden)
• 100x? foo.png (wild card)
• ?x60in foo.png (wild card aan het begin)

Slechte voorbeelden van absoluut schalen

• 100x100foo.png (geen spatie voor bestandsnaam)
• 80x100 60% foo.png (combinatie van absoluut en relatief schalen)
• 50% 80x100 foo.png (combinatie van absoluut en relatief schalen)
• 20in cm x50cm foo.png (meerdere eenheden)
• 30nm x20 nano.png (ongeldige eenheid)

Afmetingen van meerdere bestanden specificeren en meerdere bestandsnamen scheiden

Goede voorbeelden

• Laag 1.png (spatie in bestandsnaam is toegestaan — resulteert in één bestand met de naam Laag 1.png)
• Laag 1.png,Laag 2.jpg (komma als scheidingsteken)
• Laag 1.png, Laag 2.jpg (komma gevolgd door spatie(s) als scheidingsteken)
• Laag 1.png+Laag 2.jpg (plus als scheidingsteken)
• Laag 1.png + Laag 2.jpg (plus gevolgd door spatie(s) als scheidingsteken)

Alles combineren

100% Delicious, 42% Laag 1.png24 + 100x100 Laag.jpg-90% , 250% Quux/Foo Bar Baz.gif resulteert in drie bestanden (de tekenreeks '100% Delicious' wordt genegeerd omdat het geen bestandsnaam is):

• Laag 1.png, met een schaal van 42%, als 24-bits png-bestand
• Laag.jpg, met een absolute grootte van 100x100 pixels, als jpg-bestand met 90% van de oorspronkelijke kwaliteit
• Foo Bar Baz.gif in submap Quux, met een schaal van 250%, als een gif-bestand.

Standaardinstellingen opgeven voor middelen

U kunt voor het gehele document standaardinstellingen voor de gegenereerde middelen opgeven. Voer de volgende stappen uit:

1. Maak een lege laag in het document.
2. Begin de naam van de laag met het trefwoord default. Voer nu de instellingen in die u wilt toepassen op alle afbeeldingsmiddelen die vanuit het document worden gegenereerd. Bijvoorbeeld:
   

Hiermee worden alle afbeeldingsmiddelen gegenereerd in een submap hi-res. Bijvoorbeeld [middelenmap]/hi-res/Delicious.jpg.

Hiermee worden alle afbeeldingsmiddelen gegenereerd in een submap hi-res. Voeg daarnaast het achtervoegsel @2x aan de middelnamen toe. Bijvoorbeeld [middelenmap]/hi-res/Delicious@2x.jpg.

Hiermee slaat u afbeeldingsmiddelen met een schaal van 50% op in de submap lo-res onder de middelenmap van het document 

Hiermee worden twee afbeeldingsmiddelen vanuit een laag gemaakt:

• In de submap hi-res een afbeeldingsmiddel waarvan de naam het achtervoegsel @2x heeft
• In de submap lo-res een afbeeldingsmiddel dat is geschaald met 50%
  

Het genereren van afbeeldingsmiddelen uitschakelen voor alle documenten

U kunt het genereren van afbeeldingsmiddelen globaal uitschakelen voor alle Photoshop-documenten door uw Voorkeuren te wijzigen.

1. Selecteer Bewerken > Voorkeuren > Plug-ins.
2. Schakel Generator inschakelen uit.
3. Klik op OK.

Veelgestelde vragen