Extrahera för arbetsflöden från PSD till webben

Senast uppdaterad den 2 maj 2021

Creative Cloud Extrahera är en ny kostnadsfri funktion i Creative Cloud Resurser som hjälper dig att utforska PSD-filer direkt i webbläsaren, inklusive lager och lagerkompositioner. Det är speciellt användbart för webbdesigners och webbutvecklare som kan dela PSD-filer, låsa upp designinformation och hämta produktionsfärdiga produkter. Med Extrahera kan du utföra de här åtgärderna i PSD-filer i webbläsaren:

Kopiera text och CSS
Hämta information om färg, övertoningar och teckensnitt
Mäta avstånd mellan element
Spara optimerade bildresurser för produktion

Om du arbetar med PSD-filer som webbdesigner eller webbutvecklare blir arbetet från design till kod mycket enklare med Creative Cloud Extrahera. Du slipper flera jobbiga moment och onödig kommunikation.

Obs!

Extrahera är skrivskyddat och kan inte användas för redigering av PSD-filer.

Extrahera formatinformation

Logga in på Creative Cloud-webbplatsen.
Gå till avsnittet Resurser i ditt Creative Cloud-konto.
Överför en PSD-fil antingen genom att dra och släppa den i området Filer eller med alternativet Välj fil. Du kan också navigera till en PSD-fil som hämtats tidigare.
Klicka på miniatyren för PSD-filen så att den öppnas i Extrahera-vyn.

v3_extract_tab — Filen öppnas i Extrahera-vyn

I Extrahera-vyn kan du utforska PSD-filens design i webbläsaren. Du kan utforska lagerhierarkin, visa olika lagerkompositioner och extrahera delar av PSD-filen som nya bildfiler. Om du klickar på ett element i PSD-förhandsvisningen markeras ett lager och du kan se information om lagret. När du har gjort en markering kan du:

Visa och kopiera koordinater och dimensioner för element

Infopanelen visas när du klickar på ett enskilt element i PSD-filen. I panelen visas elementets bredd och höjd samt x- och y-positionen för elementets lager i designen.

coordinates-dimensions-design-element1414138130958 — Koordinater och dimensioner för ett designelement i pixelmått (px)

percentage_1414138130611 — Koordinater och dimensioner för ett designelement i procent (%)

Obs!

Klicka på valfritt värde, till exempel B, H, X eller Y, om du vill kopiera det till Urklipp.

Mått kan visas i antingen pixelvärden eller som procent i Extrahera. Om du markerar ett element är bredden och höjden i procent relativ till den totala höjden och bredden i PSD-designen. Om två element markeras och ett innesluts helt av det andra, visas det inre elementets bredd och höjd i relation till det yttre elementets mått.

parent_child_percentmeasurements1414138130688 — De inre elementens mått visas i relation till det omslutande elementets mått.

Obs!

Klicka på valfritt värde om du vill kopiera det till Urklipp.

Visa avståndet mellan två element

Skift-klicka på elementen om du vill visa avståndet mellan dem. Det kan vara bra att veta avståndet mellan element när du anger information om marginaler.

element-distance1414138130883 — Avstånd mellan två element

Kopiera CSS-kod

När ett element i PSD-designen är markerat kan du kopiera det genom att klicka på Kopiera CSS i den blå infopanelen. Du kan även visa och kopiera CSS-koden i CSS-kontrollen.

css-settings_1414138130170 — Visa CSS-koden

Obs!

Extrahera stöder preprocessorer. Klicka på (nedåtpilen) bredvid CSS på fliken Stilar om du vill se alternativen för att använda CSS-preprocessorer.

css-options — Alternativ för att använda CSS-preprocessorer

Kopiera text

Om elementet du har markerat innehåller text klickar du på Kopiera text om du vill kopiera texten till urklipp.

copy-text-para_1414138130381 — Kopiera den markerade texten till urklipp

Visa och kopiera information om teckensnitt, färger och övertoningar

Du kan visa och kopiera information om teckensnitt, färger och övertoningar i designdokumentet (PSD) genom att öppna formatpanelen. När informationen visas kan du klicka på en teckensnittsstorlek, en färg eller en övertoningsfärgruta för att kopiera värdet till urklipp.

gradient-info_1414138130476 — Exempel på färgövertoningsvärde

När du markerar ett element markeras text- och färgstilarna som används på formatpanelen.

Obs!

Extrahera är integrerat med Adobe Typekit och ger tillgång till tusentals teckensnitt av hög kvalitet. Typekit-ikonen () visas bredvid teckensnitten från Typekit på formatpanelen. Om du klickar på Typekit-ikonen öppnas sidan för teckensnittet på Typekit.

När du hittat en webbfont att använda lägger du till det i ett Typekit-paket och länkar det till din produktionskod.

v2_font-settings-current-elements1414138130537 — Information om teckensnitt och färg för det markerade elementet

Använd färgväljaren

Med färgväljarverktyget () kan du snabbt ta reda på vilken färg ett element i designen har.

Markera färgväljaren och klicka någonstans i din design. Färgväljaren identifierar färgen och lägger till den som en färgruta i formatpanelen. Sedan kan du enkelt visa och kopiera CSS-informationen för färgen.

v2_color-picker-in-context1414138131109 — Färgväljaren

Extrahera bildresurser

Med Creative Cloud Extrahera kan du markera ett eller flera lager i PSD-filen och extrahera en bildresurs. Resurser kan extraheras i formaten 8-bitars PNG, 32-bitars PNG, JPG och SVG.

v2_extract_asset1414138130754 — Extrahera en bildresurs

Klicka på -ikonen i den blå infopanelen för ett element och gör följande:

Granska bildresursinställningarna. Om det behövs kan du välja ett annat bildformat som stöds (PNG, JPG eller SVG).
Justera bildresursens kvalitet om du genererar en JPG-resurs.
Välj ett skalalternativ om det behövs. Du kan till exempel välja Skala vid 2×. Du kan skalanpassa resursen från 0,1× till 5×.
Klicka på Spara.
Den genererade resursen visas på resurspanelen. Resurserna är också tillgängliga i en ny mapp bredvid PSD-filen i Creative Cloud Resurser-vyn. Mappen skapas med namnet -assets . Om filen heter adventure.psd får resursmappen namnet adventure-assets.

Om du klickar på en miniatyrbild på resurspanelen laddas resursen ned till din dator.

assets_tab_1414138130226 — Panelen Resurser

Obs!

När du är inloggad och visar en PSD-fil i Creative Cloud Resurser har du tillgång till avancerade funktioner för resursextrahering. Varje gång du laddar ned en resurs läggs den till på panelen Resurser och i mappen .psd_assets i Creative Cloud Resurser. Du kan klicka på en miniatyrbild på panelen Resurser för att ladda ned resursen lokalt till din dator.

Panelen Resurser är inte tillgänglig om du klickar på en länk från en annan användare för att visa en PSD-fil. Du kan använda Extrahera som vanligt i det här fallet, men nedladdningen av resursen till din dator påbörjas omedelbart när du klickar på -ikonen. Du kan hitta resurserna på din lokala dator med hjälp av webbläsarens nedladdningsfunktion.

Arbeta med lager

På lagerpanelen visas alla lager och lagergrupper i PSD-designen. Eftersom Creative Cloud Extrahera är skrivskyddat sparas inga ändringar av lagren i PSD-filen.

På lagerpanelen kan du växla synlighet, markera lagerelement och extrahera resurser.

Extrahera lager eller lagergrupper som bildresurser

Du kan extrahera ett lager eller en lagergrupp i PSD-filen som en bildresurs. Gör så här:

Klicka på lagerpanelen för att visa PSD-filens lagerhierarki.

Obs!

Du kan markera flera lager i hierarkin och exportera en ny enskild bildresurs som kombinerar alla markerade lager.

Granska och navigera i lagerhierarkin.
- Klicka på mappikonen () bredvid lagergruppen om du vill expandera den.
- Klicka på ett element för att markera motsvarande lager/lagergrupp i lagerpanelen.
Markera lagret/lagergruppen som du vill extrahera som en bildresurs. Håll ned Kommando (Mac) eller Ctrl (Windows) om du vill markera flera lager. Om flera objekt är markerade extraheras de som en enskild resurs som innehåller de lager eller grupper som markerats.
Klicka på -ikonen bredvid lagret eller lagergruppen. Om du har markerat flera lager/lagergrupper klickar du på -ikonen bredvid något av de markerade lagren.
Ge den nya bildresursen ett namn.
Välj ett bildresursformat (PNG 8 Alpha, PNG 32, JPG eller SVG).
(Valfritt) Om du genererar en JPG-resurs kan du justera dess kvalitet.
Klicka på Spara.
Den genererade resursen visas på panelen Resurser. Resurserna är också tillgängliga i en ny mapp bredvid PSD-filen i Creative Cloud Resurser.

Obs!

Alternativet Återställ lager återställer lagrets synlighet till den ursprungliga inställningen i designen.

Dölj ett lager eller en lagergrupp

Om du vill dölja/visa ett lager eller en lagergrupp klickar du på ögonikonen () bredvid lagret/lagergruppen på lagerpanelen.

Arbeta med lagerkompositioner

Med Creative Cloud Extrahera kan du visa olika Photoshop-lagerkompositioner. Om du överför en PSD-fil med lagerkompositioner till Extrahera visas en popup-meny högst upp i PSD:n. Popup-menyn innehåller alla lagerkompositioner i din PSD och information om Senaste dokumentläge. Senaste dokumentläge är det sist använda läget i Photoshop innan filen sparades och överfördes till Creative Cloud. Det här läget kan vara en lagerkomposition eller inte.

v3_extract-layer-comps1414138131029 — Arbeta med lagerkompositioner i Extrahera

Dela filer

Om du visar en PSD-fil på fliken Extrahera kan du dela den med delningsfunktionen i Creative Cloud. Användarna du delar filen med kan extrahera resurser och mått från den även om de inte är inloggade på Creative Cloud.

Mer information finns i Dela filer och mappar.

Lämna feedback

Om du har frågor, feedback eller vill rapportera ett problem kan du göra det på vårt forum om Extrahera för PSD.

Frågor och svar

Ja. När du extraherar en bildresurs blir inställningarna som standard de Generator-taggar som angetts i motsvarande lagernamn (om det är möjligt).

Nej. Extrahera är skrivskyddat.

Specialtecknen |, ", ?, <, >, /, \, ;, * och : kan inte användas i PSD-filnamn eller bildresursnamn.

Alla filer du överför till Extrahera kan endast nås via ditt Creative Cloud-konto.

Om du vill dela en PSD-fil kan du göra den offentlig och dela länken. Om alternativet Extrahera är aktiverat när du delar kan alla som får länken visa din PSD-fil i Extrahera och extrahera resurser från den.

Nej. Konvertera PSD-filer med CMYK-färgmodellen till RGB-färgmodellen innan du överför dem till Extrahera.

Nej. För närvarande stöds endast PSD-filer.

Extrahera är utformat för PSD-filer som skapats i Photoshop. Du bör inte använda Extrahera med PSD-filer som är större än 2 GB eller har fler än 1 000 lager.

Både Generator och Extrahera är utformade för att förenkla arbetet för designers och utvecklare i arbetsflödet från komposition till kod. Generator extraherar bildresurser inom Photoshop CC, medan Extrahera används direkt i webbläsaren som en Creative Cloud-tjänst. Extrahera kan användas även om Photoshop inte körs eller är installerat.

I Extrahera kan du även skapa en enskild resurs från flera lager.

Alla som har ett kostnadsfritt eller ett betalt Creative Cloud-konto kan överföra en PSD-fil till Creative Cloud Resurser och använda Extrahera.

Om du delar en Extrahera-länk behöver mottagaren inte vara inloggad på ett Creative Cloud-konto för att kunna extrahera resurser och måttvärden från din PSD-fil.

I de flesta fall rör det sig om färger och övertoningar som är pixelbaserade fyllningar som Extrahera inte stöder. Om du använder den typen av fyllningar i din PSD-fil kan du använda färgväljaren för att lägga till färgerna i färgrutor på formatpanelen.

Ja. Vissa typer av övertoningar kan inte genereras i CSS utan vissa åtgärder. För närvarande ger Extrahera inte korrekta CSS för övertoningstyperna Vinkel, Speglad, Diamant och Formspricka. Övertoningstyperna Linjär och Radiell stöds däremot.

Det kan finnas skillnader i återgivningen i Extrahera-vyn jämfört med visningen i Photoshop. Om du ser skillnader är vi tacksamma om du rapporterar dem till oss.

Skriv gärna om detta på vårt forum och beskriv vad du ser. Allra bäst är om du postar en bild som visar skillnaden så ska vi försöka lösa problemet åt dig.

På mobila enheter kan du se en förhandsvisning av din PSD-fil och visa vissa stilar, till exempel färger, teckensnitt och övertoningar. Du kan inte interagera med PSD-filen på samma sätt som på datorn.

För närvarande går det inte att ladda ned alla resurser från Extrahera på samma gång. Du måste extrahera och ladda ned varje resurs för sig.

För närvarande stöder inte Extrahera nedladdning av all CSS-kod för en design på samma gång. Du måste markera enskilda objekt och kopiera deras CSS till din produktionskod.

Om du är intresserad av den här funktionen kan du skriva på vårt forum och beskriva hur du vill att CSS-utdatafunktionen ska fungera.

Om du delade en PSD-fil innan Extrahera släpptes augusti 2014 har PSD-filen inte Extrahera-fliken aktiverad. Gör så här för att aktivera den:

Med det här alternativet aktiveras Extrahera utan att din delade URL ändras.

Öppna Avancerade alternativ i dialogrutan Skicka länk.
Kontrollera att Tillåt Extrahera är aktiverat.

Project Parfait lanserades som en betaversionstjänst från Adobe med de arbetsflöden som nu finns i Extrahera. Extrahera har alla funktioner i Project Parfait samt ytterligare funktioner. Nu när Project Parfait officiellt ingår i Creative Cloud upphör möjligheten att extrahera information och resurser från PSD:er.

Om du använde Project Parfait och vill ladda ned filer du arbetat med kan du göra det fram till slutet av 2014.

Få hjälp snabbare och enklare

Ny användare?