Adskil Lagstilarter i Photoshop for Webgrafik

Photoshop er et utroligt kraftfuldt værktøj, der giver os mulighed for at skabe fantastiske visuelle effekter. En af de mest brugte funktioner er lagstilarter (Layer Styles), som hurtigt kan tilføje dybde, glød, skygger og meget mere til dine lag. Disse stilarter er utroligt praktiske, da de er ikke-destruktive og nemme at redigere. Men hvad gør du, når du har brug for at bruge et billede på nettet, og du ønsker, at visse effekter skal kunne tændes og slukkes, eller måske endda animeres med webkode (CSS)? At eksportere flere versioner af billedet – én med effekten og én uden – er ineffektivt og skaber unødvendigt mange filer. Heldigvis findes der en smart metode i Photoshop til at adskille lagstilarterne fra selve billedindholdet, så du kan eksportere effekten separat. Dette er især nyttigt for webdesignere, der ønsker at opnå større fleksibilitet og optimere deres grafiske elementer.

Hvad er Lagstilarter i Photoshop?

Inden vi dykker ned i, hvordan man adskiller dem, lad os kort genopfriske, hvad lagstilarter er. Lagstilarter er effekter, der kan anvendes direkte på et lag i Photoshop via menuen 'Lag' > 'Lagstil' eller ved at dobbeltklikke på laget i lagpanelet (uden at klikke på lagets miniature). De inkluderer populære effekter som:

• Skygge (Drop Shadow): Tilføjer en skygge bag objektet.
• Indre Skygge (Inner Shadow): Tilføjer en skygge inde i objektets kanter.
• Ydre Glød (Outer Glow): Tilføjer en glød omkring objektet.
• Indre Glød (Inner Glow): Tilføjer en glød inde i objektets kanter.
• Skråkant og Prægning (Bevel and Emboss): Giver objektet et 3D-look.
• Farveoverlejring (Color Overlay): Overlejrer laget med en solid farve.
• Forløbsoverlejring (Gradient Overlay): Overlejrer laget med et forløb.
• Mønsteroverlejring (Pattern Overlay): Overlejrer laget med et mønster.
• Streg (Stroke): Tilføjer en kant omkring objektet.

Disse stilarter er 'levende' og kan til enhver tid justeres, slettes eller deaktiveres. De påvirker kun lagets pixels baseret på gennemsigtighed eller udklipningsmasker.

Hvorfor Adskille Lagstilarter?

Som nævnt er hovedårsagen til at adskille lagstilarter ofte relateret til weboptimering og fleksibilitet. Forestil dig, at du har et ikon eller et billede, der skal have en 'hover'-effekt, hvor en glød eller skygge dukker op, når musen føres over det. I stedet for at gemme to billeder (et uden glød og et med glød) og skifte mellem dem med JavaScript, kan du gemme ét billede af ikonet (uden glød) og ét separat billede af selve gløden (på en gennemsigtig baggrund). Derefter kan du bruge CSS til at placere gløde-billedet præcist under ikonet og styre dets synlighed eller opacitet med CSS-overgange ved 'hover'.

Fordelene inkluderer:

• Fleksibilitet: Nemt at ændre effekten via CSS uden at skulle redigere billedet i Photoshop.
• Filstørrelse: Ofte mindre samlet filstørrelse, især hvis effekten genbruges på mange elementer.
• Ydeevne: Potentielt bedre ydeevne på websider, da browseren håndterer effekten.
• Genbrug: Den adskilte effekt kan genbruges på flere elementer på websiden uden at skulle eksporteres igen.

Sådan Adskiller du Lagstilarter i Photoshop

Processen for at omdanne lagstilarter til separate lag er relativt enkel. Følg disse trin:

1. Vælg laget: Klik på det lag i lagpanelet, der indeholder de lagstilarter, du ønsker at adskille. Sørg for, at laget er markeret.
2. Gå til menuen: Klik på 'Lag' (Layer) i Photoshops topmenu.
3. Find 'Lagstil': I dropdown-menuen, find 'Lagstil' (Layer Style).
4. Vælg 'Opret lag': I undermenuen for 'Lagstil', vælg 'Opret lag' (Create Layers).

Det var det! Når du klikker på 'Opret lag', vil Photoshop analysere de anvendte lagstilarter på det valgte lag og omdanne dem til et eller flere nye lag, der placeres umiddelbart over det originale lag i lagpanelet. Det originale lag vil derefter ikke længere have de adskilte lagstilarter anvendt direkte på sig.

Hvad sker der, når du klikker 'Opret lag'?

Når du bruger funktionen 'Opret lag', sker der følgende:

• Det originale lags lagstilarter fjernes.
• For hver type lagstil, der kan adskilles (f.eks. Skygge, Ydre Glød, Streg), oprettes et nyt lag.
• Disse nye lag indeholder kun den visuelle effekt af den pågældende lagstil.
• De nye lag placeres typisk i en gruppe (mappe) for at holde dem organiseret sammen med det originale lag.
• Lag som 'Farveoverlejring', 'Forløbsoverlejring' og 'Mønsteroverlejring' kan ikke adskilles på denne måde, da de dækker selve lagets indhold. Kun effekter, der typisk ligger uden for eller forskudt fra lagets pixels (som skygger, glød og streg), kan adskilles.

For eksempel, hvis dit lag havde både en 'Ydre Glød' og en 'Skygge', vil 'Opret lag' fjerne begge fra det originale lag og oprette to nye lag: et lag med kun gløden og et lag med kun skyggen. Disse nye lag vil have gennemsigtige områder overalt, undtagen der hvor effekten er synlig.

Eksportering af den Adskilte Stil

Når du har adskilt lagstilen til et nyt lag, kan du eksportere dette nye lag individuelt. Dette gøres typisk ved at skjule alle andre lag (klik på øje-ikonet ved siden af lagene i lagpanelet) undtagen det lag, der indeholder den adskilte stil. Derefter kan du bruge 'Fil' > 'Eksporter' > 'Eksporter som...' (File > Export > Export As...) eller 'Gem til web (ældre)' (Save for Web (Legacy)).

For webbrug er det vigtigt at gemme med gennemsigtighed. PNG-formatet (især PNG-24) er ideelt til dette, da det understøtter fuld alfakanal-gennemsigtighed. Sørg for at vælge 'Gennemsigtighed' (Transparency) i eksportindstillingerne.

Du vil ende med to (eller flere) filer: én fil med dit originale indhold (uden stilen) og én (eller flere) filer med de adskilte stilarter på en gennemsigtig baggrund.

Praktisk Anvendelse: Eksemplet med Ydre Glød

Lad os tage brugerens eksempel med en 'Ydre Glød' på billeder i et quizspil. I stedet for at eksportere hvert billede to gange (med og uden glød), kan du:

1. Design dit billede eller ikon i Photoshop.
2. Tilføj den 'Ydre Glød' som lagstil.
3. Dupliker laget (højreklik på laget > 'Dupliker lag').
4. På duplikatlaget, brug 'Lag' > 'Lagstil' > 'Opret lag'. Dette skaber et nyt lag med kun gløden.
5. Skjul det originale lag (uden gløden).
6. Eksporter gløde-laget som en PNG-fil med gennemsigtighed.
7. Skjul gløde-laget og vis det originale lag (uden gløden).
8. Eksporter det originale lag som en PNG- eller JPG-fil (afhængig af indholdet og behov for gennemsigtighed).

Nu har du to filer: ikon.png og ikon_gloe d.png. På din webside kan du vise ikon.png og bruge CSS til at placere ikon_gloe d.png præcist over eller under ikonet. Med CSS og JavaScript kan du nemt styre, hvornår ikon_gloe d.png skal vises (f.eks. ved 'hover' eller når et svar er korrekt). Dette er langt mere effektivt og giver bedre kontrol end at skifte mellem to store billedfiler.

Sammenligning: Bagt Stil vs. Adskilt Stil

Som tabellen viser, er adskilte stilarter især fordelagtige, når du arbejder med grafik til web, hvor interaktion og fleksibilitet er vigtige.

Vigtige Overvejelser

Det er vigtigt at bemærke, at ikke alle lagstilarter kan adskilles med funktionen 'Opret lag'. Som nævnt kan overlejringsstilarter (farve, forløb, mønster) typisk ikke adskilles, da de erstatter eller blander sig med lagets farver. Desuden kan visse komplekse kombinationer af stilarter eller indstillinger give uventede resultater, når de adskilles. Det er altid en god idé at tjekke de nyoprettede lag for at sikre, at de ser ud, som forventet.

Husk også på, at de adskilte stil-lag er rasteriserede billeder af effekten. De er ikke længere dynamiske lagstilarter, der kan justeres via dialogboksen. Hvis du har brug for at ændre effekten efter adskillelsen, skal du enten redigere det nye stil-lag direkte (hvilket kan være svært) eller gå tilbage til dit originale Photoshop-dokument, justere lagstilen på det originale lag og gentage processen med 'Opret lag'.

Ofte Stillede Spørgsmål

Kan jeg adskille flere lagstilarter på én gang fra det samme lag?

Ja, når du bruger 'Opret lag', vil Photoshop forsøge at adskille alle adskillelige stilarter på det valgte lag til individuelle nye lag.

Hvilke lagstilarter kan ikke adskilles?

Typisk kan 'Farveoverlejring', 'Forløbsoverlejring' og 'Mønsteroverlejring' ikke adskilles til nye lag med denne funktion, da de direkte påvirker lagets farver i stedet for at tilføje en 'effekt' rundt om eller under det.

Kan jeg bruge denne teknik til print?

Teknikken med at adskille lagstilarter er primært relevant for web eller digitale medier, hvor gennemsigtighed og separat billedhåndtering er mulig. Til print indbages alle effekter typisk i det endelige billede (f.eks. TIFF eller PDF).

Bliver det originale lag ændret?

Ja, lagstilarterne fjernes fra det originale lag, når de adskilles. Det originale lag vender tilbage til sit udseende uden de adskilte stilarter.

Er der en genvej til at adskille lagstilarter?

Nej, der er ikke en standardtastaturgenvej for 'Opret lag'. Du skal navigere via menuen 'Lag' > 'Lagstil' > 'Opret lag'. Du kunne dog oprette en brugerdefineret genvej, hvis du bruger funktionen meget.

Konklusion

At kunne adskille lagstilarter i Photoshop er en værdifuld færdighed, især for dem, der arbejder med design til web og digitale platforme. Det giver en effektiv måde at håndtere visuelle effekter på, øger fleksibiliteten i din arbejdsgang og kan bidrage til at optimere filstørrelser og ydeevne på dine websider. Ved at omdanne stilarter som 'Ydre Glød' eller 'Skygge' til separate, gennemsigtige billeder, åbner du op for muligheder for interaktion og animation, der ville være langt mere besværlige at opnå med traditionelt 'bagte' billeder. Næste gang du designer elementer med lagstilarter til web, overvej da, om adskillelse af stilarterne kunne forbedre dit projekt.

Hvis du vil læse andre artikler, der ligner Adskil Lagstilarter i Photoshop for Webgrafik, kan du besøge kategorien Photoshop.