포토샵 플러그인 만들어보고 싶은데 다 영어 자료길래;😂
관련 자료 사이트
Adobe Developer API 관련 공식 자료
https://developer.adobe.com/photoshop/uxp/ps_reference/
Photoshop API—UXP for Adobe Photoshop
Photoshop API Introduction# With the introduction of Unified Extensibility Platform (UXP), Photoshop now runs a JavaScript engine powered by V8. UXP provides a truly native extensibility solution in Photoshop by rendering HTML markup into native controls.
developer.adobe.com
UXP API - Spectrum UXP Reference - User Interface로 가면 각종 버튼 넣는 법 Code 예시가 나와있음.
포토샵 플러그인 샘플 모음
https://github.com/AdobeDocs/uxp-photoshop-plugin-samples
GitHub - AdobeDocs/uxp-photoshop-plugin-samples: UXP Plugin samples for Photoshop 22 and higher.
UXP Plugin samples for Photoshop 22 and higher. Contribute to AdobeDocs/uxp-photoshop-plugin-samples development by creating an account on GitHub.
github.com
Adobe Spectrum : 아이콘 / 테마 등의 어도비 디자인 관련
https://spectrum.adobe.com/page/icons/
Spectrum, Adobe’s design system
Spectrum provides interface components, resources, and tools to help teams work more efficiently and to make applications more consistent.
spectrum.adobe.com
Adobe Sectrum CSS : 어도비 디자인 요소 CSS 코드
https://opensource.adobe.com/spectrum-css/get-started.html
Getting Started - Spectrum CSS
Get Started with Spectrum CSS We have a number of resources that outline how to set up Spectrum CSS for your project, as well as an introductory tutorial that’s a hands-on way to understand how our implementation works. If you’re ready to jump in, here
opensource.adobe.com
플러그인 만드는 법
1. UXP Developer Tools 설치
*영문판 밖에 없음.
2. Create Plugin 클릭
• Plugin Name: 플러그인 이름
• Plugin Id: 플러그인 아이디(띄어쓰기 안 됨), 플러그인을 공유하고 싶으면 Adobe Developer Console에서 Id를 받아야 함. 관련 설명은 밑에서 계속.
• Plugin Version: 해당 플러그인의 버전을 입력하면 됨. 처음엔 1.0.0으로 추천.
• Host Application: 포토샵용 만들 거니까 Adobe Photoshop 선택
• Host Application Version: 앱 버전 입력하는 건데 플레이스홀더에 써있는 거 그대로 입력함. 22.0.0
• Template: 처음할 때는 ps-starter 추천.
※ Plugin Id 받는 방법
1) Adobe Developer Console 접속 후 로그인
2) Create new project 클릭
3) Add Plugin 클릭 (Get started with your new project 밑에 동그라미 3개 있는데 3번째 거)
-Photoshop 클릭 후 Save
4) 상단에 PLUGIN ID가 뜸. 복사해서 UXP에서 플러그인 만들 때 붙여넣기
3. Select Folder를 클릭해 폴더 지정.
*해당 폴더에 파일들이 생길 거임. 정리하기 쉽게 새로운 폴더 만들어서 선택하는 걸 추천함.
4. VS Code 설치 https://code.visualstudio.com/ (무료)
*프로그래밍이 가능한 다른 프로그램도 괜찮음!
*VS Code는 영문인데 왼쪽 메뉴에서 확장(퍼즐 아이콘) 들어가서 'Korean Language Pack' 검색해서 설치하면 한글판 됩니다.
5. VS Code에서 3에서 만든 폴더를 열음.(단축키 Ctrl + O)
6. 이미 있는 파일들 수정하거나 추가해서 코드 작성.
플러그인 실행해서 확인하는 법
1. 포토샵에서 [편집] - [환경 설정] - [플러그인] - [개발자 모드 사용]을 체크한 뒤 확인.
※재시작해야 적용됨!
2. UXP Developer를 켬.
3. UXP Developer에서 해당 플러그인 오른쪽 ••• 클릭 후 Load를 클릭하면 포토샵에서 플러그인이 실행됨.
4. 코드를 수정해서 저장한 뒤, 플러그인을 Reload하면 확인할 수 있음.
댓글