Lär dig hur Photoshop är integrerat med Dreamweaver. Arbeta med smarta objekt i arbetsflöden med Photoshop och Dreamweaver.

Om Photoshop-integration

Du kan infoga Photoshop-bildfiler (PSD-format) på webbsidor i Dreamweaver och låta Dreamweaver optimera dem som webbklara bilder (GIF-, JPEG- och PNG-format). När du gör detta infogar Dreamweaver bilderna som smarta objekt och underhåller en aktiv anslutning till den ursprungliga PSD-filen.

Du kan även klistra in hela eller delar av en flerradig eller flersegmenterad Photoshop-bild på en webbsida i Dreamweaver. När du kopierar och klistrar in från Photoshop underhålls emellertid ingen aktiv anslutning till den ursprungliga filen. Om du vill uppdatera bilden gör du ändringarna i Photoshop, och kopierar och klistrar in igen.

Obs!

Om du använder den här integrationsfunktionen ofta kan du spara Photoshop-filerna på Dreamweaver-platsen för att lättare komma åt dem. Om du gör så, måste du se till att svepa in dem så att du inte exponerar de ursprungliga objekten, och undviker onödiga överföringar mellan den lokala platsen och fjärrservern.

I Integrera Dreamweaver med Photoshop finns en självstudiekurs om Photoshop-integration med Dreamweaver.

Om smarta objekt och Photoshop-Dreamweaver-arbetsflöden

Det finns två huvudarbetsflöden för att arbeta med Photoshop-filer i Dreamweaver: arbetsflödena Kopiera/klistra in och Smarta objekt.

Arbetsflödet Kopiera/klistra in

Med arbetsflödet kopiera/klistra in kan du välja segment eller lager i en Photoshop-fil och sedan använda Dreamweaver för att infoga dem som webbfärdiga bilder. Om du vill uppdatera innehållet vid ett senare tillfälle måste du emellertid först öppna originalfilen i Photoshop, göra dina ändringar där, kopiera segmentet eller lagret igen och sedan klistra in det uppdaterade segmentet eller lagret i Dreamweaver. Det arbetsflödet rekommenderas bara om du vill infoga en del av en Photoshop-fil (till exempel en del av en designkomposition) som bild på en webbsida.

Arbetsflödet Smarta objekt

När du jobbar med hela Photoshop-filer rekommenderas arbetsflödet smarta objekt. Ett smart objekt i Dreamweaver är en bildresurs på en webbsida som har en fungerande koppling till den ursprungliga PSD-filen (Photoshop). I designvyn i Dreamweaver markeras smarta objekt med en ikon i det övre vänstra hörnet av bilden.

Smart objekt
Smart objekt

Om webbilden (bilden på Dreamweaver-sidan) inte är synkroniserad med den ursprungliga PSD-filen upptäcker Dreamweaver att originalfilen har uppdaterats, och en av pilarna i ikonen för det smarta objektet blir röd. Om du väljer webbilden i designvyn och klickar på knappen Uppdatera från original i egenskapskontrollen uppdateras bilden automatiskt och återger alla ändringar som du har gjort i den ursprungliga Photoshop-filen.

Om du använder arbetsflödet smarta objekt behöver du inte öppna Photoshop för att uppdatera en webbild. Dessutom är uppdateringarna som du gör i ett smart objekt i Dreamweaver icke-förstörande. Det innebär att du kan ändra webbversionen av bilden på sidan utan att det påverkar den ursprungliga Photoshop-bilden.

Du kan också uppdatera ett smart objekt utan att välja webbilden i designvyn. Med resurspanelen kan du uppdatera alla smarta objekt, inklusive bilder som inte går att markera i dokumentfönstret (till exempel CSS-bakgrundsbilder).

Inställningar för bildoptimering

För både kopiera/klistra in-arbetsflödet och smarta objekt-arbetsflödet kan du ange optimeringsinställningar i dialogrutan Bildoptimering. I dialogrutan kan du till exempel ange filformat och bildkvalitet. Om du kopierar ett segment eller lager eller infogar en Photoshop-fil som smart objekt för första gången visas den här dialogrutan så att du snabbt och lätt kan skapa webbilden.

Om du kopierar och klistrar in en uppdatering av ett segment eller lager kommer Dreamweaver ihåg de ursprungliga inställningarna och återskapar webbilden baserat på dem. Samma sak gäller om du uppdaterar ett smart objekt med egenskapskontrollen. Då används samma inställningar som när du infogade bilden första gången. Du kan ändra bildinställningarna när du vill genom att markera webbilden i designvyn och klicka på knappen Redigera bildinställningar i egenskapskontrollen.

Spara Photoshop-filer

Om du har infogat en webbild och inte har sparat den ursprungliga Photoshop-filen på Dreamweaver-platsen behandlas sökvägen till den ursprungliga filen som absolut lokal sökväg. (Det gäller för både arbetsflödet kopiera/klistra in- och arbetsflödet smarta objekt.) Om till exempel sökvägen till Dreamweaver-platsen är C:\Sites\mySite och Photoshop-filen sparas på C:\Images\Photoshop kommer den ursprungliga resursen inte att ses som en del av platsen mySite. Då uppstår problem om du vill dela Photoshop-filen med någon annan i din grupp, eftersom programmet tror att filen bara är tillgänglig på en lokal hårddisk.

Om du däremot sparar Photoshop-filen på Dreamweaver-platsen skapas en platsrelativ sökväg till filen. Alla användare som har åtkomst till platsen kan då hitta rätt sökväg till filen, förutsatt att du även har gett åtkomst till den ursprungliga filen så att de kan hämta den.

I Roundtrip-redigering med Photoshop finns en videosjälvstudiekurs om roundtrip-redigering med Photoshop.

Skapa ett smart objekt

När du infogar en Photoshop-bild (PSD-fil) på sidan skapar Dreamweaver ett smart objekt. Ett smart objekt är en webbfärdig bild som underhåller en aktiv anslutning till den ursprungliga Photoshop-bilden. När du uppdaterar den ursprungliga bilden i Photoshop kan du uppdatera bilden i Dreamweaver med bara ett par klick.

  1. I Dreamweaver (design- eller kodvyn) placerar du insättningspunkten på sidan där du vill att bilden ska infogas.
  2. Välj Infoga > Bild.

    Obs!

    Du kan också dra PSD-filen till sidan från filpanelen om du lagrar Photoshop-filerna på webbplatsen. Om du gör så kan du hoppa över nästa steg.

  3. Leta reda på Photoshop PSD-bildfilen i dialogrutan Välj bildkälla genom att klicka på knappen Bläddra och navigera till den.

  4. I dialogrutan Bildoptimering som visas justerar du optimeringsinställningarna efter behov och klickar på OK.

  5. Spara den webbklara bildfilen på en plats i webbplatsens rotmapp.

Dreamweaver skapar smarta objekt baserat på de valda optimeringsinställningarna och placerar en webbfärdig version av bilden på sidan. Det smarta objektet underhåller en aktiv anslutning till den ursprungliga bilden och du meddelas när dessa två inte är synkroniserade.

Obs!

Om du senare bestämmer att du vill ändra optimeringsinställningarna för en bild som har placerats på sidorna, kan du markera bilden, klicka på knappen Redigera bildinställningar i egenskapskontrollen och göra ändringarna i dialogrutan Bildoptimering. De ändringar som görs i dialogrutan Bildoptimering används på ett ickeförstörande sätt. Dreamweaver ändrar aldrig i den ursprungliga Photoshop-filen, och återskapar alltid webbilden baserat på de ursprungliga data.

I Roundtrip-redigering med Photoshop finns en videosjälvstudiekurs om roundtrip-redigering med Photoshop.

Uppdatera ett smart objekt

Om du ändrar Photoshop-filen som det smarta objektet är länkat till, visas ett meddelande i Dreamweaver om att den webbfärdiga bilden inte är synkroniserad med originalet. I Dreamweaver markeras smarta objekt med en ikon i det övre vänstra hörnet på bilden. När den webbfärdiga bilden i Dreamweaver är synkroniserad med den ursprungliga Photoshop-filen, är båda pilarna i ikonen gröna. När den webbfärdiga bilden inte är synkroniserad med den ursprungliga Photoshop-filen blir en av ikonens pilar röd.

  1. Om du vill uppdatera ett smart objekt med det aktuella innehållet i den ursprungliga Photoshop-filen, markerar du det smarta objektet i dokumentfönstret och klickar sedan på knappen Uppdatera från original i egenskapskontrollen.

Obs!

Du behöver inte ha Photoshop installerat för att kunna uppdatera från Dreamweaver.

Uppdatera flera smarta objekt

Du kan uppdatera flera smarta objekt samtidigt genom att använda resurspanelen. Med resurspanelen kan du också visa smarta objekt som kanske inte kan markeras i dokumentfönstret (till exempel CSS-bakgrundsbilder).

  1. Klicka på fliken Resurser på filpanelen om du vill visa platsresurser.
  2. Se till att vyn Bilder är vald. Om så inte är fallet klickar du på knappen Bilder.

  3. Markera varje bildresurs på resurspanelen. När du markerar ett smart objekt visas ikonen för smarta objekt i det övre vänstra hörnet på bilden. Vanliga bilder har inte den här ikonen.
  4. För varje smart objekt som du vill uppdatera ska du högerklicka på filnamnet och välja Uppdatera från original. Du kan också Ctrl-klicka om du vill markera flera filnamn och uppdatera alla samtidigt.

Obs!

Du behöver inte ha Photoshop installerat för att kunna uppdatera från Dreamweaver.

Ändra storlek på ett smart objekt

Du kan ändra storlek på ett smart objekt i dokumentfönstret på samma sätt som med andra bilder.

  1. Markera det smarta objektet i dokumentfönstret och ändra storleken genom att dra i storlekshandtagen. Du upprätthåller bredd- och höjdförhållandena genom att hålla ned Skift medan du drar.
  2. Klicka på Uppdatera från original i egenskapskontrollen.

    När du uppdaterar smarta objekt återges webbilden igen till den nya storleken på ett ickeförstörande sätt, baserat på det aktuella innehållet i den ursprungliga filen och de ursprungliga optimeringsinställningarna.

Redigera ett smart objekts ursprungliga Photoshop-fil

När du har skapat ett smart objekt på Dreamweaver-sidan kan du redigera den ursprungliga PSD-filen i Photoshop. När du har gjort ändringarna i Photoshop kan du på ett enkelt sätt uppdatera webbilden i Dreamweaver.

Obs!

Se till att du har ställt in Photoshop som primär extern bildredigerare.

  1. Markera det smarta objektet i dokumentfönstret.
  2. Klicka på knappen Redigera i egenskapskontrollen.

  3. Gör ändringarna i Photoshop och spara den nya PSD-filen.
  4. Markera det smarta objektet igen i Dreamweaver och klicka på knappen Uppdatera från original.

Obs!

Om du har ändrat storlek på bilden i Photoshop måste du återställa storleken på webbilden i Dreamweaver. Dreamweaver uppdaterar det smarta objektet baserat enbart på innehållet i den ursprungliga Photoshop-filen, och inte på dess storlek. Om du vill synkronisera storleken på en webbild med storleken på den ursprungliga Photoshop-filen högerklickar du på bilden och väljer Återställ storlek till original.

Lägen för smarta objekt

I tabellen nedan beskrivs de olika lägena för smarta objekt.

Läge för smart objekt

Beskrivning

Rekommenderad åtgärd

Bilderna synkroniserade

Webbilden är synkroniserad med det aktuella innehållet i den ursprungliga Photoshop-filen. Bredd- och höjdattribut i HTML-koden matchar dimensionerna i webbilden.

Inga

Originalresursen ändrad

Den ursprungliga Photoshop-filen har ändrats efter att webbilden skapades i Dreamweaver.

Synkronisera de två bilderna med hjälp av knappen Uppdatera från original i egenskapskontrollen.

Dimensionerna för webbilden är annorlunda jämfört med vald bredd och höjd för HTML

Bredd- och höjdattributen i HTML-koden är inte desamma som bredd- och höjddimensionerna för webbilden som Dreamweaver skapar när bilden infogas. Om webbildens dimensioner är mindre än de valda bredd- och höjdvärdena för HTML kan bilden se pixlad ut.

Återskapa webbilden från den ursprungliga Photoshop-filen med knappen Uppdatera från original i egenskapskontrollen. Dreamweaver använder de aktuella bredd- och höjddimensionerna för HTML när bilden återskapas.

Dimensionerna för originalresursen är för små för vald bredd och höjd för HTML

Bredd- och höjdattributen i HTML-koden är större än bredd- och höjddimensionerna för den ursprungliga Photoshop-filen. Webbilden kan se pixlad ut.

Du ska inte skapa webbilder med dimensioner som är större än dimensionerna för den ursprungliga Photoshop-filen.

Det gick inte att hitta originalresursen

Dreamweaver kan inte hitta den ursprungliga Photoshop-filen som anges i textrutan Original i egenskapskontrollen.

Korrigera filsökvägen i textrutan Original i egenskapskontrollen eller flytta Photoshop-filen till den plats som anges.

Kopiera och klistra in en markering från Photoshop

Du kan kopiera hela eller delar av en Photoshop-bild och klistra in markeringen på Dreamweaver-sidan som en webbklar bild. Du kan kopiera ett enskilt lager eller en uppsättning lager för ett markerat område eller så kan du kopiera ett segment av bilden. När du gör detta skapas emellertid inget smart objekt i Dreamweaver.

Obs!

Funktionen Uppdatera från original kan inte användas för inklistrade bilder, men du kan fortfarande öppna och redigera den ursprungliga Photoshop-filen genom att markera den inklistrade bilden och klicka på knappen Redigera i egenskapskontrollen.

  1. Gör något av följande i Photoshop:
    • Kopiera hela eller delar av ett enskilt lager genom att använda markeringsramen för att markera den del som du vill kopiera och välj sedan Redigera > Kopiera. På så sätt kopieras endast det aktiva skiktet för det markerade området i Urklipp. Om du har skiktbaserade effekter kopieras de inte.
    • Kopiera och slå samman flera lager genom att använda markeringsramen för att markera den del som du vill kopiera och välj sedan Redigera > Kopiera sammanslagna. Detta slätar ut och kopierar alla markerade områdens aktiva och nedre skikt till Urklipp. Om du har skiktbaserade effekter som är kopplade till några av dessa skikt kopieras de.
    • Kopiera ett segment genom att använda verktyget Markera segment för att markera segmentet och välj sedan Redigera > Kopiera. Detta slätar ut och kopierar alla aktiva och nedre lager i segmentet till Urklipp.

    Obs!

    Du kan välja Markera > Alla för att snabbt markera en hel bild för kopiering.

  2. I Dreamweaver (design- eller kodvyn) placerar du insättningspunkten på sidan där du vill att bilden ska infogas.
  3. Välj Redigera > Klistra in.

  4. I dialogrutan Bildoptimering som visas justerar du optimeringsinställningarna efter behov och klickar på OK.

  5. Spara den webbklara bildfilen på en plats i webbplatsens rotmapp.

Dreamweaver definierar bilden enligt optimeringsinställningarna och placerar en webbklar version av bilden på sidan. Information om bilden, t.ex. platsen för den ursprungliga PSD-källfilen, sparas i en Design Note, oavsett om du har aktiverat Design Notes för webbplatsen eller ej. Med Design Note kan du gå tillbaka till att redigera den ursprungliga Photoshop-filen från Dreamweaver.

Redigera inklistrade bilder

När du har klistrat in Photoshop-bilder på Dreamweaver-sidorna kan du redigera den ursprungliga PSD-filen i Photoshop. När du använder arbetsflödet för kopiera/klistra in bör du alltid redigera den ursprungliga PSD-filen (och inte den webbfärdiga bilden), och sedan klistra in den igen så att du upprätthåller en enda källa.

Obs!

Kontrollera att du har angett Photoshop som primär extern bildredigerare för den filtyp som du vill redigera.

  1. I Dreamweaver väljer du en webbklar bild som ursprungligen skapades i Photoshop och gör något av följande:
    • Klicka på Redigera i bildens egenskapskontroll.
    • Tryck på Ctrl (Windows) eller Kommando (Macintosh) och dubbelklicka på filen.
    • Högerklicka (Windows) eller Ctrl-klicka (Macintosh) på bilden och välj Redigera original med på snabbmenyn och välj sedan Photoshop.

    Obs!

    Detta förutsätter att Photoshop är angivet som primär extern bildredigerare för PSD-bildfiler. Du kan även ange Photoshop som standardredigerare för filtyperna JPEG, GIF och PNG.

  2. Redigera filen i Photoshop.
  3. Gå tillbaka till Dreamweaver och klistra in den uppdaterade bilden eller markeringen på sidan.

Om du någon gång vill optimera om bilden kan du markera den och klicka på knappen Redigera bildinställningar i egenskapskontrollen.

Ange alternativ i dialogrutan Bildoptimering

När du skapar ett smart objekt eller klistrar in en markering från Photoshop visas dialogrutan Bildoptimering i Dreamweaver. (Den här dialogrutan visas i Dreamweaver även för andra typer av bilder om du markerar bilden och sedan klickar på Redigera bildinställningar i egenskapskontrollen.) Med den här dialogrutan kan du definiera och förhandsvisa inställningar för webbfärdiga bilder med hjälp av rätt blandning av färg, komprimering och kvalitet.

En webbklar bild är en bild som kan visas i alla moderna webbläsare och som ser likadan ut oavsett vilket system eller vilken webbläsare som användaren har. I allmänhet är resultatet av inställningarna en kompromiss mellan kvalitet och filstorlek.

Obs!

Vilka inställningar du än väljer påverkas endast den importerade versionen av bildfilen. Den ursprungliga Photoshop PSD- eller Fireworks PNG-filen bevaras alltid orörd.

Förinställning

Välj en förinställning som passar för dina krav. Bildens filstorlek ändras utifrån den förinställning som du väljer. Bilden förhandsvisas omedelbart i bakgrunden med den inställning som används.

Välj till exempel PNG24 för foton (hög detaljskärpa) för bilder som måste visas med stor tydlighet.  Välj GIF för bakgrundsbilder (mönster) om du infogar ett mönster som ska fungera som bakgrund på sidan.

När du väljer en förinställning visas de alternativ som kan ställas in i förinställningen.  Ändra de här värdena om du vill anpassa optimeringsinställningarna vidare.

Denna produkt är licensierad enligt en Creative Commons Erkännande-Ickekommersiell-Dela Lika 3.0 Unported-licens  Twitter™- och Facebook-inlägg omfattas inte av villkoren i Creative Commons-licensen.

Juridiska meddelanden   |   Onlinesekretesspolicy