Plaats in Dreamweaver (weergave Ontwerp
of Code) het invoegpunt op je pagina waar je
de afbeelding wilt invoegen.
Laatst bijgewerkt op
27 apr. 2021
Lees in dit onderwerp hoe Photoshop is geïntegreerd in Dreamweaver. Werken met slimme objecten in Photoshop-Dreamweaver-workflows.
Over de integratie met Photoshop
Notitie
De Photoshop-integratiewerkstromen zijn stopgezet in Dreamweaver 21.0 en latere versies.
Je kunt Photoshop-afbeeldingsbestanden (PSD-formaat) invoegen in webpagina's in Dreamweaver en Dreamweaver laten optimaliseren als webklare afbeeldingen (GIF-, JPEG- en PNG-formaten). Wanneer je dit doet, voegt Dreamweaver de afbeelding in als een Smart Object en behoudt een live verbinding met het oorspronkelijke PSD-bestand.
Je kunt ook alles of een deel van een meerlagige of meervoudig gesegmenteerde Photoshop-afbeelding plakken in een webpagina in Dreamweaver. Wanneer je kopieert en plakt vanuit Photoshop, wordt er echter geen live verbinding met het oorspronkelijke bestand onderhouden. Om de afbeelding bij te werken, breng je wijzigingen aan in Photoshop en kopieer en plak je opnieuw.
Notitie
Als je deze integratiefunctie vaak gebruikt, wil je misschien je Photoshop-bestanden opslaan in je Dreamweaver-site voor eenvoudigere toegang. Als je dit doet, zorg er dan voor dat je ze verbergt om blootstelling van de oorspronkelijke assets te voorkomen, evenals onnodige overdrachten tussen de lokale site en de externe server.
Voor een zelfstudie over Photoshop-integratie met Dreamweaver leest u Dreamweaver integreren met Photoshop.
Over slimme objecten en Photoshop-Dreamweaver-workflows
Er zijn twee hoofdworkflows voor het werken met Photoshop-bestanden in Dreamweaver: de kopieer/plak-workflow en de Smart Objects-workflow.
Kopiëren/plakken-workflow
De kopieer/plak-workflow laat je segmenten of lagen selecteren in een Photoshop-bestand en vervolgens Dreamweaver gebruiken om ze in te voegen als webklare afbeeldingen. Als je de content later wilt bijwerken, moet je echter het oorspronkelijke Photoshop-bestand openen, je wijzigingen aanbrengen, je segment of laag opnieuw naar het klembord kopiëren en vervolgens het bijgewerkte segment of laag plakken in Dreamweaver. Deze workflow wordt alleen aanbevolen wanneer je een deel van een Photoshop-bestand wilt invoegen (bijvoorbeeld een sectie van een ontwerpcomp) als een afbeelding op een webpagina.
Slimme-objectenworkflow
Bij het werken met complete Photoshop-bestanden raadt Adobe de Smart Objects-workflow aan. Een Smart Object in Dreamweaver is een afbeeldingsasset geplaatst op een webpagina die een live verbinding heeft met een oorspronkelijk Photoshop (PSD)-bestand. In Dreamweaver Design-weergave wordt een Smart Object aangegeven door een pictogram in de linkerbovenhoek van de afbeelding.
Wanneer de webafbeelding (oftewel de afbeelding op de Dreamweaver-pagina) niet meer synchroon is met het oorspronkelijke Photoshop-bestand, detecteert Dreamweaver dat het oorspronkelijke bestand is bijgewerkt en toont een van de pijlen van het Smart Object-pictogram in rood.Wanneer je de webafbeelding selecteert in Design-weergave en klikt op de knop Bijwerken vanaf origineel in de Property inspector, wordt de afbeelding automatisch bijgewerkt en worden eventuele wijzigingen weergegeven die je hebt aangebracht in het oorspronkelijke Photoshop-bestand.
Wanneer je de Smart Objects-workflow gebruikt, hoef je Photoshop niet te openen om een webafbeelding bij te werken. Bovendien zijn eventuele updates die je aanbrengt in een Smart Object in Dreamweaver niet-destructief. Dat wil zeggen, je kunt de webversie van de afbeelding op je pagina wijzigen terwijl je de oorspronkelijke Photoshop-afbeelding intact houdt.
Je kunt ook een Smart Object bijwerken zonder de webafbeelding te selecteren in Design-weergave. Het Assets-paneel laat je alle Smart Objects bijwerken, inclusief afbeeldingen die mogelijk niet selecteerbaar zijn in het documentvenster (bijvoorbeeld 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 zelfstudievideo over conversiebewerkingen met Photoshop raadpleegt u Conversiebewerkingen met Photoshop.
Een slim object maken
Wanneer je een Photoshop-afbeelding (PSD-bestand) invoegt in je pagina, creëert Dreamweaver een Smart Object. Een Smart Object is een webklare afbeelding die een live verbinding onderhoudt met de oorspronkelijke Photoshop-afbeelding. Wanneer je de oorspronkelijke afbeelding bijwerkt in Photoshop, geeft Dreamweaver je de optie om de afbeelding in Dreamweaver bij te werken met één klik op een knop.
Selecteer Invoegen > Afbeelding.
Notitie
Je kunt het PSD-bestand ook naar de pagina slepen vanuit het deelvenster Bestanden als je je Photoshop-bestanden opslaat in je website.In dat geval slaat u de volgende stap over.
Zoek in het dialoogvenster Afbeeldingsbron selecteren naar het Photoshop PSD-afbeeldingsbestand door op de knop Bladeren te klikken en naar het bestand te gaan.
Pas in het dialoogvenster Afbeelding optimaliseren dat verschijnt de optimalisatie-instellingen naar wens aan en klik op OK.
Sla het webklare afbeeldingsbestand op op een locatie binnen de hoofdmap van je website.
Dreamweaver maakt het Smart Object gebaseerd op de geselecteerde optimalisatie-instellingen en plaatst een webklare versie van de afbeelding op je pagina.Het Smart Object houdt een live verbinding met de oorspronkelijke afbeelding en laat je weten wanneer de twee niet synchroon lopen.
Notitie
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 zelfstudievideo over conversiebewerkingen met Photoshop raadpleegt u Conversiebewerkingen met Photoshop.
Een slim object bijwerken
Als je het Photoshop-bestand wijzigt waaraan je Smart Object gekoppeld is, stuurt Dreamweaver je een melding dat de webklare afbeelding niet synchroon loopt met het origineel.In Dreamweaver worden Smart Objects aangegeven met een pictogram in de linkerbovenhoek van de afbeelding.Wanneer de webklare afbeelding in Dreamweaver synchroon loopt met het oorspronkelijke Photoshop-bestand, zijn beide pijlen in het pictogram groen.Wanneer de webklare afbeelding niet synchroon loopt met het oorspronkelijke Photoshop-bestand, wordt een van de pijlen van het pictogram rood.
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.
Notitie
Je hoeft Photoshop niet geïnstalleerd te hebben om de update uit te voeren vanuit Dreamweaver.
Meerdere slimme objecten bijwerken
Je kunt meerdere Smart Objects tegelijk bijwerken met het deelvenster Elementen.Het deelvenster Elementen laat je ook Smart Objects zien die mogelijk niet selecteerbaar zijn in het documentvenster (bijvoorbeeld CSS-achtergrond afbeeldingen).
Klik in het paneel Bestanden op het tabblad Assets om site assets te bekijken.
Zorg ervoor dat de weergave Afbeeldingen is geselecteerd. Als de weergave niet is geselecteerd, klikt u op de knop Afbeeldingen.
Selecteer elke afbeelding in het deelvenster Middelen. Wanneer je een Smart Object selecteert, zie je het Smart Object-pictogram in de linkerbovenhoek van de afbeelding.Gewone afbeeldingen hebben dit pictogram niet.
Klik voor elk Slim Object dat je wilt bijwerken met de rechtermuisknop op de bestandsnaam en selecteer Bijwerken van origineel.Je kunt ook Control+klikken om meerdere bestandsnamen te selecteren en ze allemaal tegelijk bij te werken.
Notitie
Je hoeft Photoshop niet geïnstalleerd te hebben om de update vanuit Dreamweaver te maken.
Het formaat van een slim object wijzigen
Je kunt het formaat van een Smart Object in het documentvenster wijzigen, net zoals bij elke andere afbeelding.
Selecteer het Slim Object in het document-venster en sleep de formaatgrepen om het formaat van de afbeelding te wijzigen.Je kunt de verhoudingen van breedte en hoogte behouden door de Shift-toets ingedrukt te houden terwijl je sleept.
Klik in de eigenschappencontrole op de knop Bijwerken vanuit origineel.
Wanneer je het Slim Object bijwerkt, wordt de webafbeelding non-destructief opnieuw weergegeven in het nieuwe formaat, gebaseerd op de huidige content van het oorspronkelijke bestand en de oorspronkelijke optimalisatie-instellingen.
Het oorspronkelijke Photoshop-bestand van een slim object bewerken
Nadat je een Slim Object op je Dreamweaver-pagina hebt gemaakt, kun je het oorspronkelijke PSD-bestand in Photoshop bewerken.Nadat je je wijzigingen in Photoshop hebt gemaakt, kun je de webafbeelding eenvoudig bijwerken in Dreamweaver.
Notitie
Zorg ervoor dat je Photoshop hebt ingesteld als je primaire externe afbeeldingseditor.
Selecteer het slimme object in het venster Document.
Klik in de eigenschappencontrole op de knop Bewerken.
Breng de wijzigingen aan in Photoshop en sla het nieuwe PSD-bestand op.
Selecteer in Dreamweaver opnieuw het slimme object en klik op de knop Bijwerken vanuit origineel.
Notitie
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 toont de verschillende statussen voor Smart Objects.
|
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 uit Photoshop kopiëren en plakken
Je kunt een hele of gedeeltelijke Photoshop-afbeelding kopiëren en de selectie in je Dreamweaver-pagina plakken als een webklare afbeelding.Je kunt een enkele laag of een set lagen voor een geselecteerd gebied van de afbeelding kopiëren of je kunt een segment van de afbeelding kopiëren. Als je dit doet, maakt Dreamweaver echter geen Smart Object aan.
Notitie
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.
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 de kaderfunctie 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.
Notitie
U kunt Selecteren > Alles kiezen om snel een afbeelding te selecteren voor kopiëren.
Plaats in Dreamweaver (Design- of Code-weergave) het invoegpunt
op je pagina waar je de afbeelding wilt invoegen.
Selecteer Bewerken > Plakken.
Pas in het dialoogvenster Afbeelding optimaliseren de optimalisatie-instellingen naar wens aan en klik op OK.
Sla het webklare afbeeldingsbestand op in een locatie binnen de hoofdmap van je website.
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 je Photoshop-afbeeldingen in je Dreamweaver-pagina's hebt geplakt, kun je het oorspronkelijke PSD-bestand bewerken in Photoshop. Bij het gebruik van de kopieer/plak-workflow raadt Adobe aan om altijd je bewerkingen te maken in het oorspronkelijke PSD-bestand (in plaats van in de web-klare afbeelding zelf), en vervolgens opnieuw te plakken om single sourcing te behouden.
Notitie
Zorg ervoor dat je Photoshop hebt ingesteld als je primaire externe editor voor afbeeldingen voor het bestandstype dat je wilt bewerken.
Selecteer in Dreamweaver een webklare afbeelding die oorspronkelijk in Photoshop werd gemaakt en doe een van de volgende dingen:
- Klik op de knop Bewerken in de eigenschappencontrole voor de afbeelding.
- Houd Control (Windows) of Command (Macintosh) ingedrukt terwijl je dubbelklikt op het bestand.
- Klik met de rechtermuisknop (Windows) of Control-klik (Macintosh) op een afbeelding, kies Origineel bewerken met in het contextmenu en kies vervolgens Photoshop.
Notitie
Dit gaat ervan uit dat Photoshop is ingesteld als de primaire externe afbeeldings-editor voor PSD-afbeeldingsbestanden. Je kunt ook Photoshop instellen als de standaard-editor voor JPEG-, GIF- en PNG- bestandstypen.
Bewerk het bestand in Photoshop.
Keer terug naar Dreamweaver en plak de bijgewerkte afbeelding of
selectie in je 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.
Notitie
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. Een directe voorvertoning van de afbeelding met de toegepaste instelling wordt weergegeven op de achtergrond.
Als u afbeeldingen bijvoorbeeld met veel helderheid wilt weergeven, kiest u PNG24 voor foto's (scherpe Details). Selecteer GIF voor achtergrondafbeeldingen (patronen) als je een patroon invoegt dat zal fungeren als achtergrond van de pagina.
Wanneer u een voorinstelling selecteert, worden de configureerbare opties voor de voorinstelling weergegeven.Als je de optimalisatie-instellingen verder wilt aanpassen, wijzig dan de waarden voor deze opties.
Prachtige websites ontwerpen in Dreamweaver
Ontwerp, codeer en beheer dynamische websites in een krachtige alles-in-één tool.
