Lees in dit onderwerp hoe Photoshop is geïntegreerd in Dreamweaver. Werken met slimme objecten in Photoshop-Dreamweaver-workflows.

Over de integratie met Photoshop

U kunt Photoshop-afbeeldingsbestanden (PSD-indeling) invoegen in webpagina's in Dreamweaver en ze met Dreamweaver optimaliseren als afbeeldingen voor internet (GIF-, JPEG- en PNG-indeling). Wanneer u dit doet, voegt Dreamweaver de afbeelding in als een slim object en wordt een liveverbinding met het originele PSD-bestand onderhouden.

U kunt ook een Photoshop-afbeelding met meerdere lagen of meerdere segmenten geheel of gedeeltelijk in een webpagina plakken in Dreamweaver. Wanneer u echter vanuit Photoshop kopieert en plakt, wordt geen liveverbinding met het originele bestand onderhouden. Als u de afbeelding wilt bijwerken, brengt u de wijzigingen aan in Photoshop en kopieert en plakt u de afbeelding opnieuw.

Opmerking:

Als u deze integratiefunctie vaak gebruikt, is het misschien gemakkelijker om uw Photoshop-bestanden op te slaan op uw Dreamweaver-site, zodat u eenvoudiger toegang hebt tot de bestanden. In dat geval moet u erop letten dat u ze camoufleert zodat de originele middelen niet algemeen zichtbaar zijn en overbodige overdrachten tussen de lokale site en de externe server plaatsvinden.

Voor een zelfstudie over Photoshop-integratie met Dreamweaver gaat u naar Dreamweaver integreren met Photoshop.

Over slimme objecten en Photoshop-Dreamweaver-workflows

Er zijn twee hoofdworkflows wanneer u met Photoshop-bestanden werkt in Dreamweaver: de workflow voor kopiëren en plakken en de workflow voor slimme objecten.

Workflow voor kopiëren en plakken

Met de workflow voor kopiëren en plakken kunt u segmenten of lagen in een Photoshop-bestand selecteren en vervolgens Dreamweaver gebruiken om deze in te voegen als afbeeldingen die geschikt zijn voor gebruik op internet. Als u de inhoud later wilt bijwerken, moet u echter het oorspronkelijke Photoshop-bestand openen, de wijzigingen doorvoeren, het segment of de laag opnieuw naar het klembord kopiëren en vervolgens het bijgewerkte segment of de bijgewerkte laag in Dreamweaver plakken. Deze workflow wordt alleen aanbevolen als u een deel van een Photoshop-bestand wilt invoegen (bijvoorbeeld een gedeelte van een ontwerpcompositie) als een afbeelding op een webpagina.

Workflow voor slimme objecten

Als u werkt met volledige Photoshop-bestanden, kunt u het beste de workflow voor slimme objecten gebruiken. Een slim object in Dreamweaver is een afbeeldingsmiddel op een webpagina met een actieve verbinding met een oorspronkelijk Photoshop PSD-bestand. In de ontwerpweergave van Dreamweaver worden slimme objecten gemarkeerd met een pictogram in de linkerbovenhoek van de afbeelding.

Slim object
Slim object

Als de webafbeelding (de afbeelding op de Dreamweaver-pagina) niet is gesynchroniseerd met het oorspronkelijke Photoshop-bestand, wordt in Dreamweaver vastgesteld dat het oorspronkelijke bestand is bijgewerkt en wordt een van de pijlen van het pictogram van het slimme object rood weergegeven. Als u de webafbeelding in de ontwerpweergave selecteert en in de eigenschappencontrole op de knop Bijwerken vanuit origineel klikt, wordt de afbeelding automatisch bijgewerkt, waarbij alle wijzigingen die u in het oorspronkelijke Photoshop-bestand hebt gemaakt, worden overgenomen.

Als u de workflow voor slimme objecten gebruikt, hoeft u Photoshop niet te openen om een webafbeelding bij te werken. Daarnaast zijn alle updates die u toepast op een slim object in Dreamweaver niet-destructief. Dit betekent dat u wijzigingen kunt doorvoeren in de webversie van de afbeelding op uw pagina terwijl de oorspronkelijke Photoshop-afbeelding behouden blijft.

U kunt slimme objecten ook bijwerken zonder de webafbeelding in de ontwerpweergave te selecteren. Met het deelvenster Middelen kunt u alle slimme objecten bijwerken, inclusief afbeeldingen die niet kunnen worden geselecteerd in het documentvenster (zoals CSS-achtergrondafbeeldingen).

Instellingen voor optimalisatie van afbeeldingen

In het dialoogvenster Afbeelding optimaliseren kunt u optimalisatie-instellingen opgeven voor de workflow voor kopiëren en plakken en de workflow voor slimme objecten. In dit dialoogvenster kunt u de bestandsindeling en de afbeeldingskwaliteit opgeven. Als u een segment of laag kopieert of een Photoshop-bestand voor het eerst als slim object invoegt, wordt dit dialoogvenster in Dreamweaver weergegeven. Op deze manier kunt u eenvoudig de webafbeelding maken.

Als u een update kopieert en plakt naar een specifiek segment of specifieke laag, worden in Dreamweaver de oorspronkelijke instellingen opgeslagen en wordt de webafbeelding met deze instellingen opnieuw gemaakt. Ook als u een slim object bijwerkt met de eigenschappencontrole, worden in Dreamweaver de instellingen gebruikt die u hebt gebruikt toen u de afbeelding voor het eerst hebt ingevoegd. U kunt de afbeeldingsinstellingen op elk moment wijzigen door de webafbeelding te selecteren in de ontwerpweergave en vervolgens in de eigenschappencontrole op de knop Afbeeldingsinstellingen bewerken te klikken.

Photoshop-bestanden opslaan

Als u een webafbeelding hebt ingevoegd en het oorspronkelijke Photoshop-bestand niet hebt opgeslagen op uw Dreamweaver-site, wordt in Dreamweaver het pad naar het oorspronkelijke bestand herkend als een absoluut lokaal bestandspad. (Dit geldt voor zowel de workflow voor kopiëren en plakken als de workflow voor slimme objecten.) Als het pad naar de Dreamweaver-site bijvoorbeeld C:\Sites\MijnSite is en het Photoshop-bestand is opgeslagen in C:\Images\Photoshop, wordt in Dreamweaver het oorspronkelijke middel niet herkend als deel van de site met de naam MijnSite. Dit leidt tot problemen als u het Photoshop-bestand wilt delen met andere teamleden, omdat in Dreamweaver het bestand alleen wordt herkend als beschikbaar op uw lokale vaste schijf.

Als u het Photoshop-bestand opslaat in de site, wordt in Dreamweaver echter een siterelatief pad naar het bestand gemaakt. Gebruikers met toegang tot de site kunnen dan ook het juiste pad naar het bestand vaststellen, ervan uitgaande dat u het oorspronkelijke bestand ook als download aanbiedt.

Voor een videozelfstudie over conversiebewerkingen met Photoshop gaat u naar Conversiebewerkingen met Photoshop.

Een slim object maken

Wanneer u een PSD-bestand (Photoshop-afbeelding) op uw pagina invoegt, maakt Dreamweaver een slim object. Een slim object is een voor het web bruikbare afbeelding die een liveverbinding met de originele Photoshop-afbeelding onderhoudt. Wanneer u de originele afbeelding bijwerkt in Photoshop, biedt Dreamweaver u de mogelijkheid om de afbeelding met één klik op een knop bij te werken in Dreamweaver.

  1. Plaats in Dreamweaver (ontwerp- of codeweergave) de invoegpositie op de pagina waar u de afbeelding wilt invoegen.
  2. Selecteer Invoegen > Afbeelding.

    Opmerking:

    U kunt het PSD-bestand ook vanuit het deelvenster Bestanden naar de pagina slepen als u uw Photoshop-bestanden op uw website bewaart. In dat geval slaat u de volgende stap over.

  3. Zoek in het dialoogvenster Afbeeldingsbron selecteren naar het Photoshop PSD-afbeeldingsbestand door op de knop Bladeren te klikken en naar het bestand te gaan.

  4. Pas in het dialoogvenster Afbeelding optimaliseren dat verschijnt de optimalisatie-instellingen naar wens aan en klik op OK.

  5. Sla het afbeeldingsbestand, dat klaar is voor internet, op een locatie binnen de hoofdmap van uw website op.

Dreamweaver maakt het slimme object op basis van de geselecteerde optimalisatie-instellingen en plaatst een webversie van de afbeelding op de pagina. Het slimme object onderhoudt een liveverbinding met de originele afbeelding en geeft een melding wanneer beide versies niet meer synchroon zijn.

Opmerking:

U kunt altijd later de optimalisatie-instellingen wijzigen voor een afbeelding die op uw pagina's is geplaatst. Selecteer hiervoor de afbeelding, klik in de eigenschappencontrole op de knop Afbeeldingsinstellingen bewerken en breng de wijzigingen aan in het dialoogvenster Afbeelding optimaliseren. Wijzigingen die in het dialoogvenster Afbeelding optimaliseren zijn aangebracht, worden niet-destructief toegepast. Dreamweaver wijzigt nooit het originele Photoshop-bestand, en maakt de webafbeelding altijd opnieuw op basis van de originele gegevens.

Voor een videozelfstudie over conversiebewerkingen met Photoshop gaat u naar Conversiebewerkingen met Photoshop.

Een slim object bijwerken

Als u het Photoshop-bestand verandert waaraan het slimme object is gekoppeld, verschijnt het bericht dat de webafbeelding niet meer synchroon is met het origineel. In Dreamweaver worden slimme objecten aangeduid met een pictogram in de linkerbovenhoek van de afbeelding. Wanneer de webafbeelding in Dreamweaver synchroon is met het originele Photoshop-bestand, zijn beide pijlen in het pictogram groen. Als de webafbeelding niet meer synchroon is met het originele Photoshop-bestand, is een van de pijlen in het pictogram rood.

  1. Als u een slim object wilt bijwerken met de huidige inhoud van het originele Photoshop-bestand, selecteert u het slimme object in het venster Document en klikt u in de eigenschappencontrole op de knop Bijwerken vanuit origineel.

Opmerking:

Photoshop hoeft niet te zijn geïnstalleerd als u vanuit Dreamweaver wilt bijwerken.

Meerdere slimme objecten bijwerken

Met het deelvenster Middelen kunt u meerdere slimme objecten tegelijk bijwerken. In het deelvenster Middelen kunt u ook slimme objecten zien die u mogelijk niet kunt selecteren in het venster Document, bijvoorbeeld CSS-achtergrondafbeeldingen.

  1. Klik in het deelvenster Bestanden op het tabblad Middelen om de sitemiddelen te bekijken.
  2. Zorg ervoor dat de weergave Afbeeldingen is geselecteerd. Als de weergave niet is geselecteerd, klikt u op de knop Afbeeldingen.

  3. Selecteer elke afbeelding in het deelvenster Middelen. Wanneer u een slim object selecteert, ziet u het pictogram Slim object in de linkerbovenhoek van de afbeelding. Gewone afbeeldingen hebben dit pictogram niet.
  4. Klik voor elk slim object dat u wilt bijwerken met de rechtermuisknop op de bestandsnaam en selecteer Bijwerken vanuit origineel. U kunt ook Control ingedrukt houden terwijl u meerdere bestandsnamen selecteert als u ze allemaal tegelijk wilt bijwerken.

Opmerking:

Photoshop hoeft niet te zijn geïnstalleerd als u vanuit Dreamweaver wilt bijwerken.

Het formaat van een slim object wijzigen

U kunt het formaat van een slim object in het venster Document op dezelfde wijze veranderen als het formaat van een gewone afbeelding.

  1. Selecteer het slimme object in het venster Document en sleep de formaatgrepen om het formaat van de afbeelding te wijzigen. U kunt de verhouding tussen hoogte en breedte behouden door Shift ingedrukt te houden terwijl u sleept.
  2. Klik in de eigenschappencontrole op de knop Bijwerken vanuit origineel.

    Wanneer u het slimme object bijwerkt, wordt de webafbeelding op niet-destructieve wijze in het nieuwe formaat weergegeven, op basis van de huidige inhoud van het originele bestand en de originele optimalisatie-instellingen.

Het originele Photoshop-bestand van een slim object bewerken

Nadat u een slim object op de Dreamweaver-pagina hebt gemaakt, kunt u het originele PSD-bestand in Photoshop bewerken. Nadat u wijzigingen in Photoshop hebt aangebracht, kunt u de webafbeelding eenvoudig in Dreamweaver bijwerken.

Opmerking:

zorg ervoor dat u Photoshop als uw primaire externe afbeeldingseditor hebt ingesteld.

  1. Selecteer het slimme object in het venster Document.
  2. Klik in de eigenschappencontrole op de knop Bewerken.

  3. Breng de wijzigingen aan in Photoshop en sla het nieuwe PSD-bestand op.
  4. Selecteer in Dreamweaver opnieuw het slimme object en klik op de knop Bijwerken vanuit origineel.

Opmerking:

Als u het formaat van de afbeelding in Photoshop hebt gewijzigd, moet u het formaat van de webafbeelding opnieuw instellen in Dreamweaver. Dreamweaver werkt een slim object alleen bij op basis van de inhoud van het originele Photoshop-bestand, en niet op basis van de grootte. Als u het formaat van een webafbeelding wilt synchroniseren met het formaat van het originele Photoshop-bestand, klikt u met de rechtermuisknop op de afbeelding en kiest u Grootte van origineel herstellen.

Status van slimme objecten

De volgende tabel geeft een overzicht van de diverse statussen voor slimme objecten.

Status van slim object

Beschrijving

Aanbevolen actie

Afbeeldingen gesynchroniseerd

De webafbeelding is synchroon met de huidige inhoud van het originele Photoshop-bestand. Breedte- en hoogtekenmerken in de HTML-code komen overeen met de afmetingen van de webafbeelding.

Geen

Oorspronkelijk middel is gewijzigd

Het originele Photoshop-bestand is gewijzigd nadat de webafbeelding in Dreamweaver is gemaakt.

Gebruik de knop Bijwerken vanuit origineel in de eigenschappencontrole om de twee afbeeldingen te synchroniseren.

Afmetingen van webafbeelding verschillen van geselecteerde HTML-breedte en -hoogte

De breedte- en hoogtekenmerken in de HTML-code verschillen van de breedte en hoogte van de webafbeelding die Dreamweaver bij het invoegen heeft gemaakt. Als de afmetingen van de webafbeelding kleiner zijn dan de waarden van de geselecteerde HTML-breedte en -hoogte, kan de webafbeelding worden gepixeld.

Gebruik de knop Bijwerken vanuit origineel in de eigenschappencontrole om de webafbeelding opnieuw te maken vanuit het originele Photoshop-bestand. Dreamweaver gebruikt de op dat moment opgegeven HTML-breedte en -hoogte wanneer de afbeelding opnieuw wordt gemaakt.

Afmetingen van oorspronkelijk middel zijn te klein voor geselecteerde HTML-breedte en -hoogte

De breedte- en hoogtekenmerken in de HTML-code zijn groter dan de breedte en hoogte in het originele Photoshop-bestand. De webafbeelding kan gepixeld worden weergegeven.

Maak geen webafbeeldingen met afmetingen die groter zijn dan de afmetingen van het originele Photoshop-bestand.

Oorspronkelijk middel niet gevonden

Dreamweaver kan het originele Photoshop-bestand niet vinden dat in het tekstvak Origineel van de eigenschappencontrole is opgegeven.

Corrigeer het bestandspad in het tekstvak Origineel van de eigenschappencontrole of verplaats het Photoshop-bestand naar de locatie die in het tekstvak is opgegeven.

Een selectie kopiëren en plakken vanuit Photoshop

U kunt een Photoshop-afbeelding geheel of gedeeltelijk kopiëren en de selectie als afbeelding voor internet in uw Dreamweaver-pagina plakken. U kunt één laag of een set lagen voor een geselecteerd gebied van de afbeelding kopiëren, of u kunt een segment van de afbeelding kopiëren. Wanneer u dit doet, maakt Dreamweaver echter geen slim object.

Opmerking:

Hoewel de functie Bijwerken vanuit origineel niet beschikbaar is voor geplakte afbeeldingen, kunt u het originele Photoshop-bestand wel openen en bewerken. Hiervoor selecteert u de geplakte afbeelding en klikt u in de eigenschappencontrole op de knop Bewerken.

  1. Ga in Photoshop op een van de volgende manieren te werk:
    • Kopieer één laag geheel of gedeeltelijk met het selectiekader om het gedeelte te selecteren dat u wilt kopiëren en kies vervolgens Bewerken > Kopiëren. Hiermee kopieert u alleen de actieve laag voor het geselecteerde gebied naar het klembord. Als u effecten hebt die op lagen zijn gebaseerd, worden deze niet gekopieerd.
    • Kopieer meerdere lagen en voeg ze samen met het selectiekader om het gedeelte te selecteren dat u wilt kopiëren en kies vervolgens Bewerken > Samengevoegd kopiëren. Hiermee worden alle actieve en lagere lagen van het geselecteerde gebied naar het klembord gekopieerd. Als er op lagen gebaseerde effecten gekoppeld zijn aan deze lagen, worden ze gekopieerd.
    • Kopieer een segment met de functie voor het selecteren van segmenten en kies vervolgens Bewerken > Kopiëren. Hiermee worden alle actieve en lagere lagen van het segment naar het klembord gekopieerd.

    Opmerking:

    U kunt Selecteren > Alles kiezen om snel een afbeelding te selecteren voor kopiëren.

  2. Plaats in Dreamweaver (ontwerp- of codeweergave) de invoegpositie op de pagina waar u de afbeelding wilt invoegen.
  3. Selecteer Bewerken > Plakken.

  4. Pas in het dialoogvenster Afbeelding optimaliseren de optimalisatie-instellingen naar wens aan en klik op OK.

  5. Sla het afbeeldingsbestand, dat klaar is voor internet, op een locatie binnen de hoofdmap van uw website op.

Dreamweaver definieert de afbeelding volgens de optimalisatie-instellingen en plaatst een versie van de afbeelding die klaar is voor internet op uw pagina. Informatie over de afbeelding, zoals de locatie van het oorspronkelijke PSD-bestand, wordt opgeslagen in een ontwerpnotitie, ongeacht of u ontwerpnotities hebt ingeschakeld voor uw site. Via de ontwerpnotitie kunt u het oorspronkelijke Photoshop-bestand weer bewerken vanuit Dreamweaver.

Geplakte afbeeldingen bewerken

Nadat u Photoshop-afbeeldingen op uw Dreamweaver-pagina's hebt geplakt, kunt u het originele PSD-bestand in Photoshop bewerken. Wanneer u de methode met kopiëren en plakken gebruikt, kunt u het beste uw bewerkingen aanbrengen in het originele PSD-bestand (in plaats van in de webafbeelding zelf) en de afbeelding daarna opnieuw plakken, zodat u blijft werken met één bronbestand.

Opmerking:

Controleer of u Photoshop hebt ingesteld als primaire externe afbeeldingseditor voor het bestandstype dat u wilt bewerken.

  1. Selecteer in Dreamweaver een internetafbeelding die oorspronkelijk in Photoshop is gemaakt en ga op een van de volgende manieren te werk:
    • Klik op de knop Bewerken in de eigenschappencontrole voor de afbeelding.
    • Houd Control (Windows) of Command (Macintosh) ingedrukt terwijl u dubbelklikt op het bestand.
    • Klik met de rechtermuisknop (Windows) of terwijl u Control ingedrukt houdt (Macintosh) op een afbeelding, kies Origineel bewerken met in het contextmenu en kies Photoshop.

    Opmerking:

    Hierbij wordt ervan uitgegaan dat Photoshop is ingesteld als de primaire externe afbeeldingseditor voor PSD-afbeeldings-bestanden. U kunt Photoshop ook instellen als de standaardeditor voor JPEG-, GIF- en PNG-bestanden.

  2. Bewerk het bestand in Photoshop.
  3. Ga terug naar Dreamweaver en plak de bijgewerkte afbeelding of selectie op de pagina.

Als u de afbeelding later opnieuw wilt optimaliseren, kunt u de afbeelding selecteren en in de eigenschappencontrole op de knop Afbeeldingsinstellingen bewerken klikken.

Opties instellen in het dialoogvenster Afbeelding optimaliseren

Wanneer u een slim object maakt of een selectie vanuit Photoshop plakt, geeft Dreamweaver het dialoogvenster Afbeelding optimaliseren weer. (Dreamweaver geeft dit dialoogvenster ook weer voor elk ander type afbeelding als u de afbeelding selecteert en in de eigenschappencontrole op de knop Afbeeldingsinstellingen bewerken klikt.) In dit dialoogvenster kunt u de instellingen voor webafbeeldingen definiëren en bekijken met de juiste combinatie van kleur, compressie en kwaliteit.

Een internetafbeelding is een afbeelding die kan worden weergegeven door alle moderne webbrowsers en die er altijd hetzelfde uitziet, ongeacht het systeem of de browser van de gebruiker. In het algemeen komen de instellingen neer op een compromis tussen kwaliteit en bestandsgrootte.

Opmerking:

De instellingen die u selecteert, hebben alleen invloed op de geïmporteerde versie van het afbeeldingsbestand. Het originele Photoshop PSD- of Fireworks PNG-bestand verandert nooit.

Voorinstelling

Kies een voorinstelling die het beste aan uw vereisten voldoet. De bestandsgrootte van de afbeelding wordt gewijzigd op basis van de geselecteerde voorinstelling. Op de achtergrond wordt direct een voorvertoning weergegeven van de afbeelding waarop de instelling is toegepast.

Als u afbeeldingen bijvoorbeeld met veel helderheid wilt weergeven, kiest u PNG24 voor foto's (scherpe Details).  Selecteer GIF voor achtergrondafbeeldingen (patronen) als u een patroon invoegt dat wordt gebruikt als achtergrond voor de pagina.

Wanneer u een voorinstelling selecteert, worden de configureerbare opties voor de voorinstelling weergegeven.  Wijzig de waarden voor deze opties als u de optimalisatie-instellingen verder wilt aanpassen.

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