Adobe Photoshop er et utroligt kraftfuldt værktøj, men selv det mest avancerede program kan forbedres eller tilpasses til specifikke behov. En af de mest effektive måder at gøre dette på er ved at skabe dine egne plugins. Med introduktionen af UXP (Unified Extensibility Platform) har Adobe gjort processen mere strømlinet og moderne. Denne guide vil føre dig gennem de grundlæggende trin i at skabe dit allerførste Photoshopplugin baseret på UXP.
At lære at udvikle plugins åbner en verden af muligheder. Du kan automatisere kedelige, gentagne opgaver, tilføje specialiserede filtre eller effekter, skabe nye paneler med unikke indstillinger, eller integrere Photoshop med andre tjenester og workflows. UXP tilbyder en moderne udviklingsplatform baseret på webteknologier som HTML, CSS og JavaScript, hvilket gør det mere tilgængeligt for mange udviklere.
Forudsætninger for at komme i gang
Før du kan begynde at skabe dit plugin, er der et par ting, du skal have på plads:
- Adobe Photoshop v23 eller nyere: UXP er den moderne platform for plugins i nyere versioner af Photoshop.
- UXP Developer Tool (UDT): Dette værktøj er essentielt for at skabe, indlæse og debugge dine UXP-plugins. Du kan installere både Photoshop og UDT via Adobe Creative Cloud Desktop-appen.
- Grundlæggende kendskab til HTML og JavaScript: Da UXP-plugins bygger på webteknologier, vil en forståelse af disse sprog være nødvendig for at bygge brugergrænsefladen og logikken i dit plugin.
Trin 1: Oprettelse af dit plugin
Det første skridt er at bruge UDT til at generere den grundlæggende struktur for dit plugin. UDT forenkler oprettelsen af de nødvendige filer og konfigurationer.
Åbn UXP Developer Tool, og klik på knappen "Create plugin...". En dialogboks vil poppe op, hvor du skal indtaste detaljer om dit nye plugin. Det er vigtigt at udfylde disse felter korrekt:
| Felt (Field) | Værdi (Value) | Beskrivelse (Description) |
|---|---|---|
| Plugin Name | My first plugin | Navnet på dit plugin, som det vil blive vist for brugeren i Photoshop. Vælg et beskrivende navn. |
| Plugin Id | my.first.plugin | En unik identifikator for dit plugin. Dette bør være et omvendt domænenavn for at sikre unikhed (f.eks. com.mitfirma.mitplugin). |
| Plugin Version | 1.0.0 | Den aktuelle version af dit plugin. Start med 1.0.0 og øg nummeret ved fremtidige opdateringer. |
| Host Application | Adobe Photoshop | Den applikation, dit plugin skal køre i. Vælg Adobe Photoshop. |
| Host Application Version | 23.0.0 | Den minimumsversion af Photoshop, dit plugin understøtter. Sørg for, at det matcher din installerede version eller er lavere. |
| Template | quick-layers-starter | En skabelon, der giver et udgangspunkt med grundlæggende funktionalitet. quick-layers-starter er god til at demonstrere interaktion med lag. |
Klik derefter på "Select Folder" og vælg en ny, tom mappe på din computer, hvor du vil gemme og udvikle dit plugin. UDT vil nu oprette de nødvendige filer i den valgte mappe og tilføje plugin'et til listen over plugins i UDT.
Når processen er færdig, vil du finde en række filer og mapper i din valgte mappe. De mest vigtige filer at kende til er:
icons: En mappe, der indeholder ikoner til dit plugin.index.html: Dette er indgangspunktet for dit plugin. Når plugin'et indlæses, starter det her.manifest.json: Denne fil indeholder metadata om dit plugin (navn, ID, version osv.) samt information om, hvordan plugin'et skal køre, herunder en reference tilindex.htmlsom indgangspunkt.
Udover disse vil der være andre filer som LICENSE og README.md, der er standard i softwareprojekter.
Trin 2: Kørsel af dit plugin i Photoshop
Nu hvor du har oprettet plugin'ets grundstruktur, er det tid til at se det køre i Photoshop.
Åbn Adobe Photoshop og opret et nyt dokument eller åbn et eksisterende, som du kan bruge til at teste plugin'et med. Til quick-layers-starter skabelonen er et dokument med flere lag ideelt.
Gå tilbage til UXP Developer Tool. Find dit nyoprettede plugin på listen. Klik på "•••" knappen til højre for plugin'ets række og vælg "Load". Dette vil indlæse dit plugin i Photoshop, og hvis det er et panel-plugin (som skabelonen er), vil panelet automatisk åbne.
quick-layers-starter skabelonen indeholder et simpelt panel med en knap kaldet "Populate Layers". Når du klikker på denne knap, vil panelet vise navnene på lagene i dit aktive Photoshop-dokument.
Selvom det er spændende at have et fungerende plugin, føles det måske ikke helt som dit eget, før du har tilføjet din personlige touch. Lad os tilføje yderligere information om lagene udover blot deres navne.
Adobe stiller en API Reference til rådighed, der beskriver alle de egenskaber og funktioner, der er tilgængelige på forskellige objekter i Photoshop, herunder Layer-klassen. Du kan finde mange interessante egenskaber der. Til dette eksempel vil vi inkludere lagets opacitet (gennemsigtighed), som er tilgængelig via layer.opacity.
Åbn filen index.js og rediger showLayerNames funktionen for at inkludere opaciteten:
function showLayerNames() {
const app = window.require("photoshop").app;
const allLayers = app.activeDocument.layers;
// Tilpasning: Tilføj opacitet til lagnavnene
const allLayerNames = allLayers.map( (layer) => `${layer.name} (${layer.opacity} %)` );
const sortedNames = allLayerNames.sort((a, b) => a < b ? -1: a > b ? 1: 0 );
document.getElementById("layers").innerHTML = `
<ul>${sortedNames.map((name) => `<li>${name}</li>`).join("")}</ul>`;
}Bemærk ændringen i allLayerNames.map(...) linjen. Nu tager den fat i både layer.name og layer.opacity og kombinerer dem til en streng.
Opdatering af plugin'et i Photoshop
Efter at have gemt dine ændringer i index.js, skal du opdatere plugin'et i Photoshop for at se ændringerne. I UXP Developer Tool, klik på "•••" knappen ved siden af dit plugin igen og vælg "Reload". Dette genindlæser plugin'ets filer i Photoshop.
Hvis du foretager ændringer i manifest.json filen, er en simpel "Reload" typisk ikke nok. I så fald skal du udføre en fuld genindlæsning ved først at vælge "Unload" og derefter "Load" i UDT.
For en hurtigere udviklingsproces kan du også indstille UDT til automatisk at genindlæse plugin'et, hver gang du gemmer en fil i plugin-mappen. Dette gøres ved at vælge "Watch" i plugin'ets menu i UDT.
Gå tilbage til Photoshop, og klik på "Populate Layers" knappen igen. Nu skulle du se lagnavnene efterfulgt af deres opacitet i parentes.
Yderligere Tilpasninger
Udover at ændre JavaScript-logikken kan du også tilpasse brugergrænsefladen ved at redigere index.html og styles.css (hvis du tilføjer en CSS-fil eller bruger stilen i index.html). Du kan ændre layout, farver og tilføje flere Spectrum UXP-komponenter for at opbygge en mere kompleks grænseflade.
Ikonet for plugin-panelet, når det er dock'et i Photoshops værktøjslinje, refereres til i manifest.json. Hvis du ændrer standardikonerne eller tilføjer dine egne, skal du sørge for, at filnavnet i manifest.json under "icons" stemmer overens med dine ikonfiler (f.eks. "path": "icons/mit_ikon_lys.png" for lyse temaer og "path": "icons/mit_ikon_mork.png" for mørke temaer).
Ofte Stillede Spørgsmål
Her er svar på nogle almindelige spørgsmål, når du starter med UXP-plugins til Photoshop:
Hvad er UXP?
UXP står for Unified Extensibility Platform. Det er Adobes moderne, fælles platform for at bygge plugins og udvidelser til Creative Cloud-applikationer som Photoshop, XD og InDesign. Det bruger webteknologier (HTML, CSS, JavaScript) og giver adgang til applikationens API'er.
Hvorfor bruge UXP i stedet for ældre plugin-teknologier?
UXP tilbyder en mere moderne, sikker og stabil platform. Det bygger på standard webteknologier, hvilket gør det mere tilgængeligt for et bredere publikum af udviklere. Det giver også en bedre integration med applikationens brugerflade via Spectrum UXP-komponenter.
Hvilke sprog skal jeg kende for at skabe UXP-plugins?
Du skal have et grundlæggende kendskab til HTML, CSS og JavaScript.
Hvordan tester jeg mit plugin under udvikling?
Du bruger UXP Developer Tool (UDT) til at "Load" plugin'et ind i Photoshop. UDT giver dig også mulighed for at "Reload" dine ændringer eller "Watch" mappen for automatisk genindlæsning.
Hvordan får mit plugin adgang til Photoshops funktioner?
Inde i din JavaScript-kode bruger du window.require("photoshop") til at importere Photoshop API-modulet, som giver dig adgang til dokumenter, lag, selektioner og mange andre funktioner.
Kan jeg bruge tredjeparts JavaScript-biblioteker?
Ja, du kan inkludere tredjeparts JavaScript-biblioteker i dit UXP-plugin, men du skal være opmærksom på, at UXP-miljøet har visse begrænsninger sammenlignet med en fuld browser.
Næste Skridt
Du har nu taget de første skridt og skabt dit første simple plugin til Photoshop. Du har lært at opsætte udviklingsmiljøet, oprette plugin'ets grundstruktur, køre det i Photoshop og foretage simple tilpasninger ved at interagere med Photoshops API for at hente information.
Dette eksempel viste, hvordan man *henter* information fra dokumentet (lagnavne og opacitet). Det næste naturlige skridt er at lære, hvordan du kan *ændre* dokumentet programmatisk – for eksempel oprette nye lag, ændre pixeldata, anvende filtre eller udføre andre handlinger, som du normalt ville gøre manuelt i Photoshop. Adobe UXP API'en giver rige muligheder for dette, og ved at udforske API Reference kan du opdage de mange funktioner, du kan udnytte til at bygge mere avancerede og nyttige plugins.
Fortsæt med at eksperimentere, udforsk API'en, og byg videre på den viden, du har opnået her. Mulighederne for at forbedre og tilpasse din Photoshop-workflow med UXP-plugins er enorme.
Hvis du vil læse andre artikler, der ligner Skab dit første Photoshop plugin med UXP, kan du besøge kategorien Fotografi.