Photoshop-bestanden gebruiken in Dreamweaver

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.

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 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 links boven aan de afbeelding.

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 zelfstudievideo over conversiebewerkingen met Photoshop raadpleegt u 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.

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.

Voor een zelfstudievideo over conversiebewerkingen met Photoshop raadpleegt u 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.

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.

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.

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.

Status van slimme objecten

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

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.

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.

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.

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.