U kunt JPEG-, PNG- of GIF-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 op basis van een PSD-bestand is bijzonder handig wanneer u websites ontwerpt voor verschillende apparaten.

Video: Webmiddelen genereren in Photoshop CC

Video: Webmiddelen genereren in Photoshop CC
In deze video ziet u de verschillende manieren waarop u de functie voor het genereren van middelen in Photoshop CC kunt gebruiken om afbeeldingen met verschillende grootten en resoluties uit te voeren voor gebruik in andere projecten.
Chris Converse

ZieMiddelen extraheren voor het web voor het maken en genereren van webafbeeldingen met Adobe Generator.

Afbeeldingsmiddelen genereren op basis van lagen of laaggroepen

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

Afbeeldingsmiddelen genereren in Photoshop
PSD-voorbeeldbestand en de bijbehorende laaghiërarchie

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 of .gif) 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.

Opmerking:

De speciale tekens : en * worden niet ondersteund in laagnamen.

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.

Namen van afbeeldingsmiddelen in Photoshop
De namen van afbeeldingsmiddelen worden gegenereerd op basis van de namen van lagen/laaggroepen

Opmerking:

Het genereren van afbeeldingsmiddelen is ingeschakeld voor het huidige document. Als deze functie eenmaal is ingeschakeld, blijft deze steeds actief wanneer u het document weer opent. Ga naar Bestand > Genereren > Afbeeldingsmiddelen om het genereren van afbeeldingsmiddelen uit te schakelen voor het huidige document.

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:

Een webontwerp en de bijbehorende laaghiërarchie
Een webontwerp en de bijbehorende laaghiërarchie

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.
Namen van de desbetreffende lagen/laaggroepen wijzigen in Photoshop
Namen van de desbetreffende lagen/laaggroepen wijzigen in Photoshop

Wijzig de namen van de desbetreffende lagen/laaggroepen

Opmerking:

Er wordt één afbeeldingsmiddel gegenereerd op basis van de inhoud van een laag of laaggroep. De laaggroep AdventureCo Logo in de bovenstaande illustratie bevat bijvoorbeeld een vormlaag en een actieve tekstlaag. Deze lagen worden samengevoegd wanneer een afbeeldingsmiddel wordt gemaakt op basis van de laaggroep.

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

Gegenereerde afbeeldingsmiddelen in Photoshop
Gegenereerde afbeeldingsmiddelen

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.

Opmerking:

Zoals uit de illustratie blijkt, kunt u verschillende eenheden en pixels door elkaar gebruiken als u de gewenste grootte voor de uitvoerafbeelding opgeeft. Zo is 4in x 100 Rounded_rectangle_3.jpg een geldige laagnaam voor het genereren van middelen.

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.

Opmerking:

Zoals uit de illustratie blijkt, kunt u verschillende eenheden en pixels door elkaar gebruiken als u de gewenste grootte voor de uitvoerafbeelding opgeeft. Zo is 4in x 100 Rounded_rectangle_3.png een geldige laagnaam voor het genereren van middelen.

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.

Opmerking:

Zoals uit de illustratie blijkt, kunt u verschillende eenheden en pixels door elkaar gebruiken als u de gewenste grootte voor de uitvoerafbeelding opgeeft. Zo is 4in x 100 Rounded_rectangle_3.gif een geldige laagnaam voor het genereren van middelen.

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)

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:

default hi-res/

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

default hi-res/@2x

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.

default 50% lo-res/

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

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

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%

Opmerking:

Standaardschalingsfactoren worden overschreven door schalingsfactoren die voor een specifieke laag zijn opgegeven.

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.

Opmerking:

De opdracht Bestand > Genereren is niet beschikbaar als u het genereren van afbeeldingsmiddelen uitschakelt in de Voorkeuren. U kunt deze functie alleen weer inschakelen in het dialoogvenster Voorkeuren.

Veelgestelde vragen

Moet ik unieke middelnamen opgeven?

Middelnamen dienen uniek te zijn op documentniveau.

Wat is het standaard kwaliteitsniveau waarop afbeeldingsmiddelen worden gegenereerd?

JPG-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.

Kan ik in Photoshop afbeeldingsmiddelen genereren op basis van lagen met transparantie en andere effecten?

Ja. Transparantie en andere op een laag toegepaste effecten worden weerspiegeld in de middelen die op basis van die laag worden gegenereerd. Het is echter mogelijk dat deze effecten worden samengevoegd in de gegenereerde middelen.

Hoe worden afbeeldingsmiddelen gegenereerd op basis van lagen die aflopen buiten het canvas?

Middelen worden bijgesneden tot de documentgrenzen. Als een afbeelding groter is dan de documentgrenzen, maakt Generator niet de bijbehorende afbeeldingsmiddelen.

Is een komma het enige toegestane scheidingsteken tussen de namen van afbeeldingsmiddelen?

U kunt niet alleen een komma (,), maar ook het plus-teken (+) gebruiken als scheidingsteken tussen namen van afbeeldingsmiddelen. Bijvoorbeeld:

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

is gelijk aan:

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

Video: Een Edge Reflow-project maken met Photoshop Generator

Video: Een Edge Reflow-project maken met Photoshop Generator
In deze video komt aan de orde hoe u een weblay-out maakt die reageert op schermgrootten van 320 pixels tot meer dan 1000 pixels in de breedte.
Chris Converse

Dit werk is gelicentieerd onder de Creative Commons Naamsvermelding/Niet-commercieel/Gelijk delen 3.0 Unported-licentie  De voorwaarden van Creative Commons zijn niet van toepassing op Twitter™- en Facebook-berichten.

Juridische kennisgevingen   |   Online privacybeleid