Lär dig att snabbt omvandla dina PSD-kompositioner snabbt till HTML-baserade webbdesigner för mobiler och datorer. Extrahera CSS, bilder, måttenheter, typsnitt, färger, övertoningar och annat från Photoshop direkt till Dreamweaver.

Obs!

  Typekit har bytt namn till Adobe Fonts och ingår nu i Creative Cloud och andra prenumerationer. Mer information.

Med Extrahera i Dreamweaver kan webbdesigners och utvecklare använda designinformation och extrahera webboptimerade resurser direkt i kodningsmiljön. Extrahera ger dig en komplett och fristående lösning för att extrahera formatinformation och resurser från PSD-kompositioner, vilket minskar behovet av att växla mellan Photoshop och Dreamweaver.

Med panelen Extrahera i Dreamweaver kan du extrahera CSS, bilder, typsnitt, färger, övertoningar och mått direkt till webbsidan. Förutom dessa primära funktioner i Extrahera innehåller Dreamweaver också följande unika funktioner:

extract_logo
  • Direkt åtkomst till dina PSD-filer i Creative Cloud och till de PSD-filer som delas med dig i en samarbetsmapp
  • Sammanhangsberoende kodtips för att enkelt definiera typsnitt, färger och övertoningar i din CSS
  • Möjlighet att skapa bildtaggar från PSD-lager genom att dra och släppa objekt
  • Klistra in format direkt i Live-vyn (till exempel CSS Designer och elementvisningen)

Komma igång med Extrahera

Med Extrahera i Dreamweaver kommer du åt dina PSD-filer direkt från Extrahera-panelen i Dreamweaver. I följande avsnitt finns mer information om panelen och arbetsytan Extrahera, och om hur du läser in dina PSD-filer i panelen Extrahera:

Panelen och arbetsytan Extrahera

Extrahera-arbetsytan gör att du kan arbeta effektivt med Extrahera i Dreamweaver. På den här arbetsytan visas panelen Extrahera till vänster och webbsidan visas till höger i en delad vy (Live-vyn och kodvyn). Du kan anpassa arbetsytan genom att dra, docka, komprimera och utöka paneler efter behov. Du kan också spara den anpassade arbetsytan för framtida bruk.

Obs!

Om du råkar stänga panelen Extrahera kan du öppna den igen med ett kortkommando: Ctrl+K (Windows) respektive Cmd+K (Mac OS) eller välja Fönster > Extrahera.

När du startar Dreamweaver för första gången visas en interaktiv självstudiekurs på panelen Extrahera, så att du snabbt kommer igång med arbetsflödena. Du kan växla mellan olika självstudiekurser med hjälp av listrutan högst upp på panelen.

När du är klar med självstudiekursen kan du börja använda Extrahera i Dreamweaver genom att klicka på Kom igång. På panelen Extrahera visas en miniatyrbildsvy av mapparna och PSD-filerna på ditt Creative Cloud-konto, det vill säga de filer som har överförts eller synkroniserats från din dator, eller som delas med dig i en samarbetsmapp i Creative Cloud.

Panelen Extrahera som visar PSD-filer som har sparats i Creative Cloud
Panelen Extrahera som visar PSD-filer som har sparats i Creative Cloud

Obs!

Om du vill starta självstudiekursen igen klickar du på snabbmenyn i panelens övre högra hörn och väljer Starta självstudiekurs.

Ladda upp PSD-filer till Creative Cloud

Du kan ladda upp en PSD-fil till Creative Cloud genom att klicka på ikonen Ladda upp PSD på panelen Extrahera. Om PSD-kompositionerna har utvecklats av någon annan person eller grupp kan du dela dem i Creative Cloud. Du kan sedan hämta filerna, och ladda upp dem till ditt konto antingen direkt genom att logga in på Creative Cloud eller gå via panelen Extrahera i Dreamweaver.

Öppna PSD-filer i panelen Extrahera

Klicka på miniatyrbilden av PSD-filen på panelen Extrahera. Om en uppdaterad version av PSD-filen blir tillgänglig i Creative Cloud efter att du har öppnat den, läser du in PSD-filen igen till panelen Extrahera. Det gör du genom att klicka på PSD-filens namn eller klicka på Läs in PSD igen på snabbmenyn uppe till höger. Om du vill gå tillbaka till miniatyrbildsvyn och välja en annan fil, klickar du på Creative Cloud-ikonen uppe till vänster på panelen.

Om du vill förstora vyn och ta en närmare titt på designen, ändrar du zoomnivån högst upp på panelen Extrahera eller använder Alt+/-. Använd fliken Lager eller listrutan Lagerkomposition om du vill visa eller dölja elementen i PSD-filen.

Nu kan du börja överföra PSD-kompositionen till en webbplats. 

Ange inställningar för Extrahera

Med hjälp av inställningarna för Extrahera kan du ange standardfilformatet som bilderna ska extraheras med, och även vilken standardenhet för typsnitt som ska visas på panelen Extrahera.

  1. Välj Redigera > Inställningar (Windows) eller Dreamweaver > Inställningar (Mac).

  2. Välj Extrahera i listan Kategori.

  3. (Valfritt) Ändra standardformatet som bilderna ska extraheras med.

    Extraherade bildformat i Dreamweaver CC
    Extraherade bildformat
  4. (Valfritt) Välj önskad upplösning i avsnittet Extrahera för enheter. De här inställningarna kommer att användas när du väljer att spara en bild i flera upplösningsversioner.

    • Om du vill spara versionerna med suffix klickar du på motsvarande rad under kolumnen Suffix och skriver texten. 
    • Om du vill spara flera upplösningsversioner i separata utdatamappar klickar du på motsvarande rad under kolumnen Mapp och anger relativ sökväg.
    Extrahera för enheter
    Extrahera för enheter
  5. (Valfritt) Klicka på Rensa cache om du vill radera cachelagrade data som relaterar till användningen av Extrahera.

  6. Klicka på Använd och stäng sedan dialogrutan Inställningar.

  7. Du visar ändringarna på panelen Extrahera genom att läsa in PSD-filen på nytt (snabbmenyn > Läs in PSD igen).

    Alternativet Läs in PSD igen på panelen Extrahera
    Alternativet Läs in PSD igen på panelen Extrahera

Extrahera CSS från PSD-filer

Du kan kopiera alla eller bara vissa CSS-egenskaper för element i en PSD-komposition och direkt klistra in formaten i CSS Designer, elementvisningen i Live-vyn eller i koden (en CSS-källa eller ett HTML-dokument).

Kodtipsen fylls dessutom automatiskt med CSS-egenskaperna för elementet som du markerar i PSD-kompositionen. Om du föredrar att arbeta med kod kan du använda dessa kodtips för att extrahera CSS-egenskaperna till koden.

  1. Klicka på önskad PSD-fil på panelen Extrahera (Fönster > Extrahera). Miniatyrbildsvisningen av PSD-filen utvidgas så att du tydligt ser kompositionen.

  2. Klicka på önskat element eller önskad resurs i PSD-filen. En popup-meny med en lista över elementets CSS-egenskaper visas, så att du kan markera och kopiera dem. Du kan visa bredd och höjd för det markerade elementet i bildpunkter eller procent.

    Obs! Om du väljer procent här visas även måtten i procentenheter.

    Alternativet Kopiera CSS på panelen Extrahera
    Alternativet Kopiera CSS på panelen Extrahera

    Du kopierar CSS genom att markera de egenskaper du vill kopiera och sedan klicka på Kopiera CSS. 

  3. Klistra in CSS i dokumentet med någon av följande metoder:

    • Om du vill klistra in CSS i CSS Designer högerklickar du på önskad väljare och klickar på Klistra in stilar.
    • Om du vill klistra in CSS med hjälp av Elementvisning högerklickar du på en väljare och klickar på Klistra in stilar.
    • Om du vill klistra in CSS i koden placerar du insättningspunkten vid önskad plats, högerklickar och klickar på Klistra in.

Gör så här om du vill använda kodtips för att extrahera CSS:

  1. Öppna en CSS-källa som är kopplad till dokumentet eller växla till kodvyn för ett HTML-dokument.

  2. Klicka på önskad PSD-fil på panelen Extrahera och klicka därefter på önskat element i kompositionen.

  3. Gå till dokumentet och placera insättningspunkten vid önskad plats i koden. 

  4. När du börjar skriva namnet på en CSS-egenskap visas kodtipsen som innehåller CSS-egenskaperna för det element som är markerat i PSD-kompositionen. Klicka på den CSS-egenskap som ska infogas i koden.

    Kodtips med CSS-egenskapen för ett element i en PSD-fil
    Kodtips med CSS-egenskapen för ett element i en PSD-fil
  5. Om du vill extrahera flera CSS-egenskaper markerar du önskade egenskaper på snabbmenyn på panelen Extrahera. Klicka sedan på Infoga markerad i kodtipsen.

    Infoga CSS-egenskaper gruppvis i Dreamweaver CC
    Infoga CSS-egenskaper i grupp

Kopiera text från PSD-filer

Med ett enda klick kan du infoga text eller innehåll i PSD-kompositioner på en webbsida. Du kopierar text från PSD-kompositionen på panelen Extrahera genom att markera ett textelement och klicka på Kopiera text. Texten kopieras till Urklipp. Sedan kan du klistra in texten på valfri plats.

Alternativet Kopiera text på panelen Extrahera
Alternativet Kopiera text på panelen Extrahera

Obs!

När du har extraherat texten kan du också extrahera egenskaper för texten, till exempel typsnitt och färger. Mer information finns i Extrahera typsnitt, färger och övertoningar från PSD-filer.

Extrahera bilder från PSD-filer

Du kan enkelt dra lager i dina PSD-kompositioner från panelen Extrahera exakt dit du vill ha det i Live-vyn av webbsidan. Visuella hjälpmedel i Live-vyn som ikonerna Live-stödlinjer och DOM hjälper dig dra och placera element. När du pausar kort innan du släpper elementet visas DOM-ikonen (</>). DOM-strukturen visas när du placerar markören över ikonen </> och du kan släppa elementet inuti strukturen. Om du föredrar att arbeta med kod kan du extrahera bilderna med hjälp av sammanhangsberoende kodtips. Med hjälp av kodtips kan du extrahera färger och övertoningar som bilder.

Obs!

Om din PSD-fil innehåller flera ritytor visas varje rityta som en mapp i rutan Lager. Du kan visa eller dölja mappen om du vill se eller dölja dess innehåll. Om du vill zooma in på en viss rityta Alt+klickar du bara på ritytans namn. Du kan zooma ut genom att klicka var som helst utanför ritytan och på ANPASSA.

Innan du infogar den extraherade bilden visas bildens namn i Dreamweaver, och du kan redigera namnet. Som standard sparas bilden i webbplatsens rotmapp. Om du vill spara bilden på en annan plats anger du hela sökvägen tillsammans med filnamnet.

Obs! Om du extraherar en bild till ett dokument som inte tillhör en angiven webbplats, extraheras bilden till den katalog där dokumentet finns. Om du inte har sparat dokumentet tidigare ombeds du göra det.

Du kan också spara bilden på den lokala hårddisken och anropa den på webbsidan vid en senare tidpunkt. Om du skapar en responsiv webbplats kan du spara flera upplösningsversioner av en bild för enheter med ett enda klick.

  1. På panelen Extrahera klickar du på den PSD-fil du vill hämta bilderna från.

  2. Klicka på en önskad bild i PSD-filen.

    Obs!

    Använd fliken Lager och listrutan Lagerkomposition i panelen Extrahera om du vill visa eller dölja bilderna i PSD-kompositionen. Om en bild består av flera lager kan du välja att extrahera ett enskilt lager i bilden.

    Observera att popup-menyn för kodtips finns i kodvyn till höger om arbetsytan. 

  3. Om du vill importera flera bilder håller du ned Skift, eller tangenten Kommando, och klickar på bilderna. De markerade bilderna extraheras som en enda bild.

  4. Gör något av följande:

    • Klicka på  på popup-menyn som visas när du klickar på bilden. Ange sökväg, filnamn, filformat och skalningsfaktor (i förekommande fall). Gör sedan något av följande:
      • Klicka på Spara om du vill spara bilden med upplösningen 1x. Välj Skala till och ange skalningsfaktor om du vill skalförändra bilden.
      • Klicka på Spara flera om du vill spara flera upplösningsversioner av bilden. PSD-filen behöver inte innehåller dessa versioner. Dreamweaver kan spara bilden i flera upplösningar under extraheringen.

    Du kan ange önskade upplösningsversioner och motsvarande utdatamapp i Inställningar.

    Extrahera bilder med hjälp av ikonen Extrahera resurs
    Extrahera bilder med hjälp av ikonen Extrahera resurs
    • Dra bilden till dokumentets Live-vy. Live-stödlinjerna i Live-vyn gör det enklare att placera bilden.

    När du släpper bilden visas namnet på den i Dreamweaver. Du kan inte bara redigera namnet på bilden, utan också filnamnstillägget. Spara bilden genom att klicka på Retur. Som standard sparas bilden i webbplatsens rotmapp. Om du vill spara bilden på en annan plats anger du hela sökvägen tillsammans med filnamnet.

    Möjlighet att redigera filnamn och filnamnstillägg när du drar en bild från panelen Extrahera
    Möjlighet att redigera filnamn och filnamnstillägg när du drar en bild från panelen Extrahera
    • När du klickar på bilden visas sammanhangsberoende kodtips i Dreamweaver. Placera markören vid insättningspunkten i HTML-dokumentets kodvy eller i CSS-dokumentet. När du har skrivit bakgrundsbildens egenskapsnamn eller taggen <img> visas namnet på den valda bilden i kodtipsen. Markera bilden, redigera namnet och filnamnstillägget om du vill och klicka på Retur.

    Som standard sparas bilden i webbplatsens rotmapp. Om du vill spara bilden på en annan plats anger du en egen sökväg tillsammans med filnamnet.

    Extrahera bilder med hjälp av kodtips
    Extrahera bilder med hjälp av kodtips

Extrahera mått från PSD-filer

Med hjälp av panelen Extrahera kan du på ett enkelt sätt visa och extrahera måttvärdet mellan två element i PSD-kompositionen. 

  1. Gå till PSD-filen på panelen Extrahera och klicka på önskade element genom att hålla ned Skift-tangenten eller Kommando-tangenten.

    På panelen Extrahera visas det vågräta och lodräta avståndet mellan de två elementen.

    Mått på panelen Extrahera
    Mått på panelen Extrahera

    Obs!

    Klicka på ett element och klicka sedan på procent för att visa måtten i procentenheter.

  2. Klicka på det värde som du vill kopiera till Urklipp.

  3. Klistra in värdet där du vill ha det, till exempel i CSS-egenskaperna i CSS Designer eller i koden.

Extrahera typsnitt, färger och övertoningar från PSD-filer

Med hjälp av panelen Extrahera kan du extrahera CSS-egenskaper för de typsnitt, färger eller övertoningar som används i PSD-kompositionen.

  1. Klicka på Stilar på panelen Extrahera.

  2. Utför följande åtgärder i sektionen Typsnitt om du vill extrahera typsnitt.

    1. Expandera önskad typsnittstyp.

      Om du vill ha mer information om typsnittet klickar du på ikonen Adobe Fonts ().

    2. Klicka på det format och den storlek som du vill kopiera, och klicka sedan på Kopiera CSS på popup-menyn som visas. Textelementen som använder typsnittet, formatet och storleken som du klickar på taggas.

      Obs!

      Du kan ändra enheten för typsnittet till ”em” eller ”rem” med inställningarna för Extrahera (Inställningar > Extrahera). Klicka på Läs in PSD igen på snabbmenyn uppe till höger på panelen Extrahera om du vill visa ändringarna.

      Extrahera typsnitt
      Extrahera typsnitt
    3. Klistra in CSS där du vill ha det, till exempel i koden eller i CSS Designer.

    Utför följande åtgärder i sektionen Färger om du vill extrahera färger:

    1. Klicka på önskad färgruta. Elementen som använder den valda färgen taggas.

      Obs! Du kan också välja en annan färg från PSD-kompositionen med hjälp av färgväljaren.

    2. Välj önskad färgmodell (RGB, Hex eller HSL) på snabbmenyn som visas när du klickar på färgrutan och kopiera (Ctrl+C; Cmd+C) sedan färgvärdet.

      Extrahera färger
      Extrahera färger
    3. Klistra in färgvärdet där du vill ha det, till exempel i koden eller i CSS Designer.

  3. Om du vill extrahera övertoningar klickar du på en övertoningsfärgruta i sektionen Övertoningar. Klicka på Kopiera CSS på popup-menyn. Klistra in CSS på önskad plats, till exempel i koden eller i CSS Designer.

    Leverantörsprefix som valts i inställningarna (Inställningar > CSS-format) klistras också in med övertoningarna. Om du extraherar en radiell övertoning infogas motsvarande CSS utan leverantörsprefix eftersom radiella övertoningar inte stöds.

    Extrahera övertoning
    Extrahera övertoning

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