일러스트로 디자인을 하다 보면 뒤에 사진이나 이미지를 앉혀야 하는 경우가 자주 있는데 보통 한번에 컨펌이 나지 않기 때문에 place 시킬때 link 형식으로 앉히게 됩니다.
배경 이미지의 시안이 변경 될 경우 이미지만 변경하면 자동으로 일러스트에서도 변경이 되기 때문이기도 하고 또 작업하는 파일의 용량이 작아 HDD 디스크에 부담도 적기 때문이지요.
그런데!!
이걸 이제 인쇄를 넘기려면 링크된 모든 파일을 다 찾는 것도 일이고.. 보냈을때 하나라도 누락이 되었다면 사고가 나는것이죠.
그래서 embed 형식으로 변경하면 ai 파일 내에 이미지가 포함이 되서 이런 문제가 일어나지 않는데요.
place 된 이미지가 한 두개면 괜찮은데 그 숫자가 좀 많을 때는 여간 귀찮고 번거로운 일이 아닐 수 없습니다.
이렇게나 많다면 말이죠.
link 형식으로 잔뜪 place 된 이미지들
또 파일을 보낸 뒤에 누락된 개체는 없는지 확인할 동안 기다려야 되는 문제도 있겠네요.
이럴때 스크립트가 출동한다면!!!
스!
크!
립!
트!
네. 바로 스크립트라면 간단히 해결을 할 수 있습니다.
바로 스크립트를 볼까요?
var cDoc = app.activeDocument
var pItems = cDoc.pageItems
for (var k = 0; k < pItems.length; k++)
{
var cItem = pItems[k]
if (cItem.typename == "PlacedItem")
{
cItem.embed()
}
}
엥?
엄청 짧죠?
네 그런데 이게 됩니다.
위의 내용을 텍스트 에디터에 붙여 넣고 jsx 형식으로 저장합니다.
jsx 형식으로 저장된 스크립트
잘 모르시겠으면 그냥 .txt 파일로 저장한 뒤에 확장자만 jsx 로 바꾸어 주어도 됩니다.
그런 다음 일러스트에서 이 스크립트를 실행 시키면 되는데요.
간단합니다. 두가지 방법이 있는데
1. 그냥 스크립트 파일을 일러스트 창 안으로 drag and drop 한다
2. File - Script - Other Script --> 만들어 두었던 스크립트 파일 선택
간단하죠?
요렇게 하면 place 된 개체가 어느정도이냐에 따라 다르지만 많아야 많아야 1~2분이면 될거에요.
결과를 볼까요 ? Ctrl + Y 를 해서 보면 link 형식으로 place 된 개체는 X 표시가 되는 것을 알수 있는데요.
상당히 많은 link 형식의 placeItem 이 있는 화면
요렇게요.
그럼 스크립트를 실행한 ai 파일을 Ctrl + Y 해서 볼까요?
모든 placeItem 이 embed 형식으로 변경된 화면
네. 단하나의 누락 없이 모두 embed 로 변경이 되었습니다.
캬!
역시 배워야 합니다.
오늘은 이만 마치도록 하겠습니다.
다시한번 말씀 드리지만 위에 제가 소개해드린 스크립트를 메모장 등으로 옮기신 후 jsx 파일로 저장, 일러스트에서 실행하시면 됩니다.
코로나로 인하여 아이들이 집밖에 나가지도 못하고 집안에서 게임만 하고 있는 것을 보고 아이들을 위해 놀이거리를 하나 만들어 주어야겠다고 생각하고 시작한 동물의 숲 카드 만들기 입니다.
일단 물고기 카드를 만들려고 시작했는데 종류가 80 개나 되다 보니 만만치가 않았습니다.
그래서 가능하면 쉽게 빠르게 만들 수 있고 필요하면 나중에 수정하기도 쉽도록 코딩을 좀 하는 방향으로 제작 방안을 결정했습니다.
포토샵 자동화 과정이 이루어지는 전체 과정을 엿볼 수 있는 좋은 기회이니 관심 있으신 분은 주의 깊게 보시면 도움이 될 것이라 생각합니다.
어떻게 만들지?
일단 디자인을 결정해야 겠죠? 몇가지 구상 끝에 아래와 같이 만들기로 합니다.
이름과 가격, 잡히는 곳을 적고 그림자를 표시한뒤 프린트 해서 접으면 끝
만들어진 이미지를 출력하여 반으로 접어 붙이면 앞면은 물고기 그림자, 뒷면은 물고기 정보가 담겨있는 카드가 만들어 집니다.
제작은 다음과 같이 진행하기로 하였습니다.
모든 동물의 이름, 사는곳, 위치를 물고기 이미지와 함께 레이어 명에 남긴다.
배경의 타입에 맞게 배경이미지를 제작한다 (연못, 강, 바다 등)
물고기의 그림자의 크기별로 그림자 이미지를 별도로 만든다.
스크립트를 작성한다.
물고기 레이어를 탐색하면서 레이어 명을 분석한다.
레이어명에서 추출된 배경, 그림자 레이어를 on 한다
정보에 맞도록 텍스트 레이어의 내용을 변경한다
이미지를 파일로 저장한다
물고기 레이어, 배경, 그림자 레이어를 숨긴다.
요런 과정을 통하여 만들기로 합니다.
먼저 포토샵으로 자동화를 위한 데이터 파일을 제작합니다.
먼저 물고기 이미지를 취득합니다.
일단 닌텐도에서 캡쳐한 이미지와 아직 잡지 못한 물고기는 인터넷에서 구한 뒤 레이어별로 이미지를 적재합니다.
레이어의 이름은 위에서 정의한 것 처럼 물고기의 정보를 담도록 합니다.
레이어별 정보로 설정한 명칭
그 다음 물고기 그림자 세트를 shadow 라는 레이어 셋 안에 만들어 줍니다.
물고기 그림자 크기별 모양
그리고 화면 레이아웃에 맞도록 텍스트 및 텍스트 박스, 기타 디자인을 완성합니다.
텍스트 레이아웃
강, 연못, 바다 등과 같이 배경에 맞도록 상단의 배경을 레이어로 구분하여 구성합니다.
잡히는 곳에 해당하는 이미지
총 6개의 배경이 구성이 되었습니다.
각각 물고기 레이어에서 정의한 장소와 동일하게 레이어 명칭을 설정해 줍니다.
그리고 물고기 레이어, shadow, 등을 레이어 셋 (폴더)로 구성합니다.
최종 레이어 구성
일단 이렇게 하면 PSD 파일은 준비가 완료된 셈 입니다.
이제 코딩을 해볼까요?
먼저 저장할 경로와 파일 옵션을 설정해야 하는데요. 저는 출력용이므로 eps 포멧을 사용하였습니다.
var sPath = "C:\\Users\\cindy\\Pictures\\animal_tree\\eps\\"
var epsOption = new EPSSaveOptions()
epsOption.embedColorProfile = true
그 다음 현재 도큐먼트와 각 타입별 레이어 셋을 변수에 할당해 줍니다.
var cDoc = app.activeDocument;
var fLayer = cDoc.layers["fishs"].layers
var sLayers = cDoc.layers["shadow"].layers
var tLayer = cDoc.layers["text"].layers
이제 물고기 레이어 (fLayers) 를 한바퀴 돌며 저장을 할겁니다. 이때 레이어의 명칭을 parsing 해야 하는데요. 저는 _ 를 이용하여 구분자를 만들어 놓았으므로 아래와 같은 방법으로 문자열을 분리합니다.
for (var k = 0 ; k < fLayers.length; k++)//fLayer.layers.length
{
var cLyr = fLayers[k]
var tmpName = cLyr.name
var nameSet = tmpName.split("_")
}
이렇게 하면 모든 fishs 레이어 안의 레이어에 대하여 nameSet 이라는 변수에는 현재 물고기 레이어 이름을 "_" 로 구분하여 배열로 담게 됩니다.
각 반복시마다 cLyr 라는 변수는 현재 레이어를 지칭하게 되죠.
이제 각 설정들을 변경하고 필요한 레이어를 켜거나 끄는 동작을 넣어야 합니다.
for (var k = 0 ; k < fLayers.length; k++)//fLayer.layers.length
{
var cLyr = fLayers[k]
var tmpName = cLyr.name
var nameSet = tmpName.split("_")
var bglayerName = nameSet[3]
if (bglayerName == "바다(비)")
{
bglayerName = "바다"
}
//물고기 레이어 켜기
cLyr.visible = true
// 그림자 레이어 켜기
sLayers[nameSet[2]].visible = true
// BG 레이어 켜기
cDoc.layers[bglayerName].visible = true
// 텍스트 레이어 내용 변경
tLayers[0].textItem.contents = nameSet[1]
tLayers[1].textItem.contents = nameSet[3]
tLayers[2].textItem.contents = nameSet[4]
// eps 저장
var dFile = new File(sPath + nameSet[0] + "_" + nameSet[1] + ".eps")
cDoc.saveAs(dFile, epsOption, true, Extension.LOWERCASE)
// 그림자 레이어 끄기
sLayers[nameSet[2]].visible = false
//물고기 레이어 끄기
cLyr.visible = false
// BG 레이어 끄기
cDoc.layers[bglayerName].visible = false
}
현재 물고기 레이어와 각 설정에 맞는 그림자 레이어를 켜고, 배경을 켠다음 텍스트 정보를 업데이트 합니다.
그리고 저장하기로 한 파일로 저장을 하게되죠.
저장을 마치면 다시 켜주었던 레이어들은 꺼주면 한 번의 반복문이 완성되는 것이죠.
전체 코드를 보면 아래와 같습니다.
var sPath = "C:\\Users\\cindy\\Pictures\\animal_tree\\"
var pngOption = new PNGSaveOptions()
pngOption.embedColorProfile = true;
pngOption.formatOptions = FormatOptions.STANDARDBASELINE;
pngOption.matte = MatteType.NONE;
pngOption.quality = 100;
pngOption.PNG8 = false; //24 bit PNG
pngOption.transparency = true;
pngOption.interlaced = true;
var sPath = "C:\\Users\\cindy\\Pictures\\animal_tree\\"
var epsOption = new EPSSaveOptions()
epsOption.embedColorProfile = true
var cDoc = app.activeDocument;
var fLayers = cDoc.layers["fishs"].layers
var sLayers = cDoc.layers["shadow"].layers
var tLayers = cDoc.layers["text"].layers
//alert(fLayer.layers.length);
for (var k = 0 ; k < fLayers.length; k++)//fLayer.layers.length
{
var cLyr = fLayers[k]
var tmpName = cLyr.name
var nameSet = tmpName.split("_")
var bglayerName = nameSet[3]
if (bglayerName == "바다(비)")
{
bglayerName = "바다"
}
//물고기 레이어 켜기
cLyr.visible = true
// 그림자 레이어 켜기
sLayers[nameSet[2]].visible = true
// BG 레이어 켜기
cDoc.layers[bglayerName].visible = true
// 텍스트 레이어 내용 변경
tLayers[0].textItem.contents = nameSet[1]
tLayers[1].textItem.contents = nameSet[3]
tLayers[2].textItem.contents = nameSet[4]
// png 저장 - png 저장을 하려면 모드를 RGB 로 바꾸어 주어야 한다.
//var dFile = new File(sPath + nameSet[0] + "_" + nameSet[1] + ".png")
//cDoc.saveAs(dFile, pngOption, true, Extension.LOWERCASE)
// eps 저장 - eps 저장을 하려면 모드를 CMYK 로 바꾸어 주어야 한다.
var dFile = new File(sPath + nameSet[0] + "_" + nameSet[1] + ".eps")
cDoc.saveAs(dFile, epsOption, true, Extension.LOWERCASE)
// 그림자 레이어 끄기
sLayers[nameSet[2]].visible = false
//물고기 레이어 끄기
cLyr.visible = false
// BG 레이어 끄기
cDoc.layers[bglayerName].visible = false
}
이렇게 물고기 레이어만큼 반복을 한뒤 코드는 종료 됩니다.
80개 레이어를 각각 설정하고 저장하는데 1분도 채 걸리지 않습니다. ^^
자동으로 추출된 동물의 숲 카드 이미지들
출력을 위하여 eps 포멧으로 저장하긴 했지만 윈도우에서 미리보기를 위하여 png 파일로도 한번 저장해 봤습니다.
예상 하였던 것처럼 잘 저장이 되었습니다.
출력용 레이아웃 파일 제작하기
끝으로 이제 출력용으로 레이아웃을 만들어 주어야 하는데요.
일러스트 레이터에서 대지를 만들고 배치할 위치에 맞도록 가이드 선을 잡아 줍니다. 물론 png 로 저장한 뒤 파워 포인트 등으로 작업하셔도 됩니다.
그리고 이미지 하나하나 앉혀주면 됩니다.
번거로운 작업이지만 이렇게 딱 1회성 작업이 이루어지는 경우 그냥 손으로 하는게 나은 경우도 많습니다.
일러스트레이터에서 배치한 모여라 동물의 숲 카드 인쇄용 파일
여기서 중요한 것은 일러스트에서 이미지를 가져올 때 place(가져오기) 기능을 이용해야 하며 link (연결) 된 이미지로 불러와야 한다는 점 입니다.
link 된 이미지로 가져오게 되면 아래와 같이 선택 시 이미지에 X 표시가 되며 수정이 불가능한데요. 원본 eps 파일이 수정되는 경우 자동으로 이미지가 업데이트 되는 특징이 있습니다. 연결된 파일이 아닌 경우 수정이 되면 모든 이미지를 다시 가져와야 하는 불상사가 일어날 수 있습니다.
저는 저 파일을 늘상 관리를 하고 있기 때문에 사실상 문제가 되지 않는데요. 별 생각없이 사용하다보면 저녀석이 temp 폴더 안에 마구잡이로 늘어나게 됩니다.
어떤 경우에는 저 파일이 누적되어 몇십 GB 씩 차지하기도 하니 적당히 넘어갈 녀석이 아닌건 확실합니다.
일단 photoshop temp 파일은 포토샵의 특성상 막을 수 없는 파일입니다. 포토샵은 빠른 그래픽 처리를 위하여 이미지 정보 및 각종 포토샵 실행중 기록을 저 임시파일안에 저장하게 됩니다. 그러니 포토샵을 실행하고 작업을 하다보면 당연히 생기는 파일입니다. 물론 포토샵이 종료될때 해당 파일도 함께 사라지게 됩니다.
문제는 포토샵이 정상 종료 되지 않을때 입니다.
포토샵이 늘 사용하는 입장에서는 안정적인 프로그램이라고 보기는 어렵거든요. 물론 최근 CC 버전 이후로는 성능이나 안정성이나 상당히 좋아졌기는 합니다만 어쨌든 원하지 않게 컴퓨터를 비정상 종료해야 하는 경우가 포토샵이 원인이 아니더라도 언제나 발생할 수 있지 않겠습니까?
포토샵이 비정상 종료되면 해당 파일은 삭제 되지 않은 채 다음번 포토샵 실행 시 또다른 임시파일을 생성하게 됩니다.
이렇게 몇차례 반복되면 임시파일의 개수가 많아지며 C 드라이브의 용량을 많이 차지하게 됩니다.
오늘은 간단한 배치파일을 하나 만들어서 주기적으로 실행하는 것으로 해당 파일을 삭제하여 C 드라이브에 죽치고 있는 대용량 임시파일인 photoshop temp 파일을 제거하는 배치파일 스크립트를 하나 소재해 드릴까 합니다.
참고로 임시파일의 경로는 아래와 같습니다.
C:\Users\사용자\AppData\Local\Temp\
1. 메모장을 연다
2. 아래의 코드를 복사하여 메모장에 넣는다 del "C:\Users\사용자\AppData\Local\Temp\Photoshop Temp*.*"
3. c:\사용자\ 아래에 있는 본인 계정의 이름을 위 코드의 "사용자" 부분에 넣는다. 제컴퓨터의 사용자 이름은 cindy 인데요. 아래와 같이 보이게 되겠죠?
현재 사용자의 이름을 확인하여 넣어준다.
4. 해당 파일을 적당한 이름으로 저장한 뒤 맨뒤에 확장자를 .bat 로 변경한다.
5. 생각날때 마다 한번씩 더블클릭!
바탕화면에 해당 배치파일을 두고 사용중임
간단하지 않습니까?
이렇게 하면 포토샵 임시파일을 temp 폴더내에서 실행할때마다 싹 지울 수 있습니다.
참고로 temp 폴더는 photoshop 뿐만 아니라 윈도우에서 실행되는 아주 많은 프로그램들이 자주 사용하는 임시 저장공간 입니다. photoshop 외의 다른 많은 프로그램들이 임시파일을 저장하기 때문에 용량이 쉽게 차게 되는데요. 디스크 정리를 간간히 실행해 주시는 것도 좋은 방법입니다.
임시파일을 정리하는 방법은 C:\ 드라이브 에서 마우스 우클릭 --> 속성
위 사진에서 디스크 정리를 눌러 주시고요
스크롤을 내려보면 임시파일 이라는 항목이 있습니다. 저는 며칠전에 포멧을 하였기 때문에 하당 용량이 얼마 없지만 오랜시간 디스크 정리를 하지 않으셨다면 상당한 용량이 저장되어 있을 수 있습니다.
일러스트레이터에서 스크립트를 사용할 수 있게 되면 진정 놀라운 결과들을 만들어 낼 수 있습니다. 사람이 손으로 하기에는 정말 귀찮은 작업들을 가능하게 만들어 줍니다.
이런 이미지를 손으로 만들어 본다고 치면요. 일단 배치되는 모든 사각형의 각도도 랜덤이고, 사각형의 색상이 하나도 연속으로 동일한게 없다면요.. 머리가 벌써 아파오죠?
하지만 스크립트를 이용하면 저것보다 수백배 복잡한 것도 손쉽게 해낼 수 있답니다.
막상 해보면 일러스트야 말로 진정한 노가다 툴이 아닐 수 없습니다.
패스 하나하나 손으로 그려야 하며 그려야 하는 패스가 정형화 된 스타일일 수록 피곤해 집니다.
자 그럼 일러스트 스트립트 어떻게 해야 할까요?
일단 포토샵스크립트와 동일하게 javascript 를 기반으로 동작합니다. MAC OS 에서는 apple script 를 지원하고 WindowOS 에선 VBA 도 지원하지만 공용으로 사용할 수 있는 javascript 가 적당해 보입니다. 문법도 포토샵 스크립트와 크게 다르지 않으니 일단 javascript 의 기본을 알고 계시면 금방 시작하실 수 있습니다.
일러스트는 기반이 벡터 그래픽이다 보니 어쩌면 스크립트라는 형식 자체가 포토샵보다 적용 가능한 부분이 많습니다. 포토샵이 이미지를 메모리에 얹어 놓고 메모리 안의 이미지를 이미지 프로세싱을 통해 변화를 주다 보니 스크립트와 같이 성능에 제약적인 개발언어로 할 수 있는게 많이 없습니다. 하지만 일러스트는 모든 데이터가 벡터 그래픽이다 보니 아주 많은 영역에 대하여 스크립트로 할수 있는 여지가 있는 것이죠.
먼저 extend script toolkit 을 준비하시고요.
그 다음은 전과 마찬가지로 필요한 액션을 작성해 나가시면 됩니다. 포토샵 스크립트와 비슷 한 느낌 입니다.
var cDoc = app.activeDocument;
alert(cDoc.name)
비슷하지요? 다만 태생이 포토샵과 다르다 보니 스크립트를 작성하는 방식이 약간은 다릅니다.
포토샵은 app 안에 document 개체를 찾고 그 안에 layer 또는 Artlayer 로 접근하여 layer 안의 오브젝트의 속성을 조정하는 것이 일반적인 방식인데요. 일러스트는 app 안에 document 를 찾는 것 까지는 같지만 레이어로 접근하지 않고도 스크립트에서 바로 개체로 접근이 가능합니다.
var cDoc = app.activeDocument;
var mItem_01 = cDoc.pageItems[0]
var mItem_02 = cDoc.layers[0].pageItems[0]
또 레이어 안에 shape 의 종류만 해도 pageItem, pathItem, compoundPathItem, GroupItem 과 같이 다양한 개체가 있으며 그외에도 textItem 이나 다양한 개체가 존재합니다.
또 위에서 설명드린 개체들 중 pageItem 은 모든 개체를 통털어 일컬을 수 있는 녀석이기도 합니다.
예를들면 layer 안에 두개의 groupItem 과 한개의 pathItem 이 있다고 했을때 이것은 3개의 pageItem 이 있는 것으로 처리되기도 합니다. 즉 pageItem 이라는 개념은 종류를 불문하고 어떤 하나의 속성을 갖는 개체로 정의되는 것이지요. 그래서 코딩할 때도 각각의 개체의 타입이 무엇인지 정확히 파악하여 코딩을 해야 합니다.
var cDoc = app.activeDocument;
s = cDoc.selection
for (var i = 0; i < s.length; i++)
{
var cItem = s[i];
if (cItem.typename == "pathItem")
{
alert("pathItem")
}
else if (cItem.typename == "GroupItem")
{
alert("groupItem")
}
else
{
alert("another Item")
}
}
선택한 개체들이 어떤 종류의 개체인지 확인하는 간단한 코드 예제.
위에 열거한 개체들 중 가장 하위 개념인 pathItem 은 그안에 PathPoints 라는 Pathpoint 들의 그룹을 갖습니다. PathPoint 는 예상하신 것처럼 우리가 알고 있는 점 을 말하지요. PathPoint 안에도 anchor 와 leftDirection, rightDirection 과 같은 속성들도 구성되므로 상당히 체계적으로 코드를 작성해야 정상적으로 동작이 됩니다.
예를 들면 패스 내에 있는 하나의 점은 다음과 같이 정의 되는 것이죠.
var cDoc = app.activeDocument;
var cLyr = cDoc.layers[0]; // layer 개체
var cItem = cLyr.pageItems[0]; // pageItem 개체
var cPath = cItem.pathItems[0]; // pageItem 이 GroupItem 이라는 가정하에.. pathItem 개체
var firstPoint = cPath.pathPoints[0]; // pathPoint 개체
var cPt = firstPoint.anchor; // Array (x, y) = [x, y] 와 같은 2개 짜리 1차원 배열
var cPt_leftHandle = cPt.leftDirection; // Array (x, y) = [x, y] 와 같은 2개 짜리 1차원 배열
var cPt_rightHandle = cPt.rightDirection; // Array (x, y) = [x, y] 와 같은 2개 짜리 1차원 배열
일러스트는 벡터 그래픽이다 보니 자동으로 뭔가를 그리려면 벡터 연산이 필수 입니다.
중고등학교 수학을 열심히 했다면 할만 하지만 놀았다면 어려운 수준의 수학적 지식이 필요합니다. 간단한 삼각함수와 2차원 평면에서의 함수와 도형 등의 주제에 대한 이해가 조금은 필요합니다.
어쩌면 선형 대수학과 같은 고급 수학에 정통한 분들은 아주 빠르게 습득이 가능할 겁니다.
프로그래밍을 배우려면 어쩔 수 없는 부분이니 이참에 공부해 보시는 것도 괜찮습니다. 너도 예체능계를 나왔기 때문에 수학은 완전 잼병이었는데요, 막상 필요하니 하게 되더랍니다.
어쨌든 일러스트 스크립트 크게 어려울 것은 없으니 이번에 마음 잡고 도전해 보시기 바랍니다.
이번 강좌에서는 포토샵 스크립트를 이용하여 color fill 기능을 사용하는 방법을 알려 드리겠습니다.
포토샵에서 아주 많이 사용하는 기능이지만 일반적인 스크립트에서 구현이 되지 않아 답답하셨죠? 제가 올려드리는 함수를 스크립트 내에 포함 시키신 후 함수를 호출하여 사용하시면 간단하게 fillColor 기능을 사용하실 수 있습니다.
저는 Red, Green, Blue 를 각각 입력하여 Fill 할 수 있도록 개발을 하였습니다. foreground color 및 background 컬러를 이용하여 fill 할 수도 있지만 rgb 를 직접 입력하여 색상을 칠해 주는 것이 과정이 좀더 짧기 때문에 그렇게 사용합니다.
또 레이어에 알파 영역을 보호하고 실제 컬러 영역에만 Fill 할 수 있는 기능이 적용 되도록 하였습니다. 보통은 레이어 창에서 해당 기능을 활성화 하는데요. 제가 올려 드리는 스크립트를 통하여 간단히 해당 기능의 설정이 가능합니다.
function fill_color (r, g, b, prvT){
var idFl = charIDToTypeID( "Fl " );
var desc77 = new ActionDescriptor();
var idUsng = charIDToTypeID( "Usng" );
var idFlCn = charIDToTypeID( "FlCn" );
var idClr = charIDToTypeID( "Clr " );
desc77.putEnumerated( idUsng, idFlCn, idClr );
var idClr = charIDToTypeID( "Clr " );
var desc78 = new ActionDescriptor();
var idRd = charIDToTypeID( "Rd " );
desc78.putDouble( idRd, r );
var idGrn = charIDToTypeID( "Grn " );
desc78.putDouble( idGrn, g);
var idBl = charIDToTypeID( "Bl " );
desc78.putDouble( idBl, b );
var idRGBC = charIDToTypeID( "RGBC" );
desc77.putObject( idClr, idRGBC, desc78 );
var idOpct = charIDToTypeID( "Opct" );
var idPrc = charIDToTypeID( "#Prc" );
desc77.putUnitDouble( idOpct, idPrc, 100.000000 );
var idMd = charIDToTypeID( "Md " );
var idBlnM = charIDToTypeID( "BlnM" );
var idNrml = charIDToTypeID( "Nrml" );
desc77.putEnumerated( idMd, idBlnM, idNrml );
var idPrsT = charIDToTypeID( "PrsT" );
desc77.putBoolean( idPrsT, prvT );
executeAction( idFl, desc77, DialogModes.NO );
}
위의 코드를 가져가셔서 본인의 스크립트 내에 붙여 넣으신 뒤 바로 사용하시면 되는데요. RGB 각각의 색상과 투명영역을 보존하고 Fill 을 할 것인지 그냥 전체에 Fill 할 것인지를 선택할 수 있는 옵션으로 true, false 를 인자로 넣으시면 됩니다.
예를 들면 특정 레이어의 영역 내 color fill 을 하시려면 아래와 같이 하시는거죠.
var cDoc = app.actineDocument
cDoc.activeLayer = cDoc.layers[0]
fill_color(255,0,0,true) < -- 요 부분이 실제로 함수를 실행 시키는 부분입니다.
function fill_color (r, g, b, prvT){
var idFl = charIDToTypeID( "Fl " );
var desc77 = new ActionDescriptor();
var idUsng = charIDToTypeID( "Usng" );
var idFlCn = charIDToTypeID( "FlCn" );
var idClr = charIDToTypeID( "Clr " );
desc77.putEnumerated( idUsng, idFlCn, idClr );
var idClr = charIDToTypeID( "Clr " );
var desc78 = new ActionDescriptor();
var idRd = charIDToTypeID( "Rd " );
desc78.putDouble( idRd, r );
var idGrn = charIDToTypeID( "Grn " );
desc78.putDouble( idGrn, g);
var idBl = charIDToTypeID( "Bl " );
desc78.putDouble( idBl, b );
var idRGBC = charIDToTypeID( "RGBC" );
desc77.putObject( idClr, idRGBC, desc78 );
var idOpct = charIDToTypeID( "Opct" );
var idPrc = charIDToTypeID( "#Prc" );
desc77.putUnitDouble( idOpct, idPrc, 100.000000 );
var idMd = charIDToTypeID( "Md " );
var idBlnM = charIDToTypeID( "BlnM" );
var idNrml = charIDToTypeID( "Nrml" );
desc77.putEnumerated( idMd, idBlnM, idNrml );
var idPrsT = charIDToTypeID( "PrsT" );
desc77.putBoolean( idPrsT, prvT );
executeAction( idFl, desc77, DialogModes.NO );
}
요렇게 하시면 첫번째 레이어의 영역내에 255, 0 , 0 즉 red 가 채워지게 됩니다.
네번째 옵션에 true 를 주었으므로 투명 영역 안에는 당연히 칠해지지 않습니다. 딱 개체가 있는 영역만 색상이 칠해지죠.
자 color fill 어렵지 않으시죠? 사실 fill 하는 액션에서 opacity (투명도) 나 multiply, lighten 같은 컬러 합성 기능도 조금만 손보면 사용이 가능하지만 오늘은 그냥 색상을 칠하는 부분만 소개를 드립니다.
이번 포스트에서는 현재 열려있는 도큐먼트를 특정 이미지 포멧으로 저장하는 기능에 대하여 알아 보겠습니다.
포토샵은 이미지를 편집하는 다재 다능한 툴이지만 자동화 툴로 사용할 생각까지는 하지 않습니다. 일반 적인 이미지 포멧을 변환해주는 툴들은 여럿 있지만 PSD 이미지를 이용해서 특정 조건을 설정하여 이미지를 저장하려면 포토샵 밖에는 방법이 없습니다.
예를 들면 100 개의 PSD 파일을 열어서 각각 가장 최상위에 있는 또는 특정 레이어만 이미지로 저장해야 한다면 일반적인 툴로는 불가능하죠. 하지만 포토샵 스크립트를 이용하면 손쉽게 처리가 가능합니다.
오늘은 그러한 사전 조건이 완료되었다는 전제 하에 이미지로 파일을 저장하는 방법을 알아보겠습니다.
먼저 저장할 포멧을 설정
해당 포멧에 대한 상세 옵션 설정
저장할 파일 지정
파일로 저장
저장한 뒤 파일 닫기 (옵션)
요정도의 과정이 되겠습니다.
어렵지 않지만 처음 해보시는 분은 난감한 코드죠.
제가 샘플을 올려 드릴테니 가져다가 조금씩 바꿔가면서 사용하시면 됩니다.
PNG 파일 저장 옵션
var pngSaveOptions = new PNGSaveOptions();
pngSaveOptions.embedColorProfile = true; // 컬러 프로필 저장 옵션
pngSaveOptions.matte = MatteType.NONE;
pngSaveOptions.quality = 100;
pngSaveOptions.transparency = true;
pngSaveOptions.interlaced = true;
// 저장할 때는
var cFile = new File("저장될 경로 및 파일명.png")
app.activeDocument.saveAs(cFile, pngSaveOptions, true, Extension.LOWERCASE)
JPEG 저장 옵션
var JPGOpt = new JPEGSaveOptions();
JPGOpt.embedColorProfile = True
JPGOpt.quality = 5 // 0~12 , 12 is best quality
JPGOpt.formatOptions = FormatOptions.STANDARDBASELINE;
JPGOpt.matte = MatteType.WHITE
/* mattetype
MatteType.BACKGROUND
MatteType.BLACK
MatteType.FOREGROUND
MatteType.NETSCAPE
MatteType.NONE
MatteType.SEMIGRAY
MatteType.WHITE
*/
// 저장할 때는
var cFile = new File("저장될 경로 및 파일명.jpg")
app.activeDocument.saveAs(cFile, JPGOpt, true, Extension.LOWERCASE)
GIF 저장 옵션
var GIFOpt = new GIFSaveOptions();
GIFOpt.palette = Palette.LOCALSELECTIVE
GIFOpt.ForcedColors = ForcedColors.BLACKWHITE
GIFOpt.matte = MatteType.NONE
//GIFOpt.Dither = Dither.DIFFUSION
//GIFOpt.ditherAmount = 75
GIFOpt.interlaced = true
GIFOpt.colors = 256
// 저장할 때는
var cFile = new File("저장될 경로 및 파일명.gif")
app.activeDocument.saveAs(cFile, GIFOpt, true, Extension.LOWERCASE)
Targa(TGA) 저장 옵션
var TGAOpt = new TargaSaveOptions
TGAOpt.alphaChannels = true
TGAOpt.rleCompression = false // 압축여부
TGAOpt.resolution = TargaBitsPerPixels.THIRTYTWO
/* Targa Bits Per Pixels
TargaBitsPerPixels.SIXTEEN
TargaBitsPerPixels.THIRTYTWO
TargaBitsPerPixels.TWENTYFOUR
*/
var cFile = new File("저장될 경로 및 파일명.tga")
app.activeDocument.saveAs(cFile, TGAOpt, true, Extension.LOWERCASE)
BMP 저장 옵션
BMPOpt = new BMPSaveOptions();
BMPOpt.alphaChannels = true;
BMPOpt.depth = BMPDepthType.BMP_R5G6B5;
/* BMP Depth Type
BMPDepthType.BMP_A1R5G5B5
BMPDepthType.BMP_A4R4G4B4
BMPDepthType.BMP_A8R8G8B8
BMPDepthType.BMP_R5G6B5
BMPDepthType.BMP_R8G8B8
BMPDepthType.BMP_X1R5G5B5
BMPDepthType.BMP_X4R4G4B4
BMPDepthType.BMP_X8R8G8B8
BMPDepthType.EIGHT
BMPDepthType.FOUR
BMPDepthType.ONE
BMPDepthType.SIXTEEN
BMPDepthType.THIRTYTWO
BMPDepthType.TWENTYFOUR
*/
// 저장할 때는
var cFile = new File("저장될 경로 및 파일명.bmp")
app.activeDocument.saveAs(cFile, BMPOpt, true, Extension.LOWERCASE)
Save Foe Web 저장 옵션 (PNG)
var exptOpt = new ExportOptionsSaveForWeb
exptOpt.format = SaveDocumentType.PNG
// saveforweb 인 경우 COMPUSERVEGIF, JPEG, PNG-8, PNG-24, and BMP 로만 가능함
exptOpt.transparency = true
exptOpt.blur = 0.0
exptOpt.includeProfile = false
exptOpt.interlaced = false
exptOpt.optimized = true
exptOpt.quality = 100
exptOpt.PNG8 = true // png 8 비트로 저장이 필요한 경우
exptOpt.colors = 128
// 관련하여 보다 상세한 옵션은 레퍼런스를 참고 하세요.
// 저장할 때
var expFile = new File("저장할 경로 및 파일명.png")
cDoc.exportDocument (expFile,ExportType.SAVEFORWEB,exptOpt) // saveAS 가 아닙니다. 중요!
마지막에 saveForWeb 옵션을 사용해 보았는데요. 많은 분들이 웹용으로 이미지를 올리거나 할때는 이 옵션을 주로 사용하실 거라 생각합니다. 이때는 saveAs 가 아닌 exportDocument 를 이용하여 저장하게 되므로 주의 하시면 됩니다.
옵션은 스크립트 중 어디에 적어 도 상관 없습니다. 포토샵 자바스크립트는 첫줄부터 실행되기는 하지만 모든 코드를 미리 읽어 둔후 실행하므로 위에 예제와 같이 옵션과 저장 기능이 딱 붙어 있을 필요는 없습니다. 통상 저의 경우에는 저장 옵션들을 스크립트 가장 상단에 적어두고 코드 작성을 시작하기는 합니다.
관련하여 제가 설명드리지 못한 부족한 부분은 레퍼런스를 참고하시면 되는데요. 코딩에 관심이 있으시다면 반드시 레퍼런스를 받으셔서 본인이 작성하는 코드와 관련된 설명을 보시기 바랍니다. 학원이나 강좌보다 더욱 훌륭한 선생님이 될 것 입니다.
포토샵의 매직 완드는 일반적인 스크립트로는 작성이 불가능하기 때문에 scriptListner 를 통하여 추출된 코드를 응용하여 개발을 해야 합니다. scriptListner 는 포토샵에서 이루어지는 거의 모든 기능에 대하여 출력을 해주기 때문에 일반적인 스크립트로 작성이 불가능한 기능에 대하여 개발을 해야 할 때 이용하기 좋은 멋진 플러그인 입니다.
나중에 한번 따로 설명을 드리도록 하겠습니다.
복잡하게 설명할 것 없이 바로 코드 갑니다. 이런 류의 코드는 직접 짜는 것이 거의 불가능하기 때문에 그냥 복붙하셔서 사용하시는 것이 가능 좋겠습니다.
function selectbyMagicWand(_x, _y, tolnc, anti, conti,merg){
var idsetd = charIDToTypeID( "setd" );
var desc103 = new ActionDescriptor();
var idnull = charIDToTypeID( "null" );
var ref53 = new ActionReference();
var idChnl = charIDToTypeID( "Chnl" );
var idfsel = charIDToTypeID( "fsel" );
ref53.putProperty( idChnl, idfsel );
desc103.putReference( idnull, ref53 );
var idT = charIDToTypeID( "T " );
var desc104 = new ActionDescriptor();
var idHrzn = charIDToTypeID( "Hrzn" );
var idPxl = charIDToTypeID( "#Pxl" );
desc104.putUnitDouble( idHrzn, idPxl, _x );
var idVrtc = charIDToTypeID( "Vrtc" );
var idPxl = charIDToTypeID( "#Pxl" );
desc104.putUnitDouble( idVrtc, idPxl, _y );
var idPnt = charIDToTypeID( "Pnt " );
desc103.putObject( idT, idPnt, desc104 );
var idTlrn = charIDToTypeID( "Tlrn" );
desc103.putInteger( idTlrn, tolnc );
var idMrgd = charIDToTypeID( "Mrgd" );
desc103.putBoolean( idMrgd, merg );
var idAntA = charIDToTypeID( "AntA" );
desc103.putBoolean( idAntA, anti );
var idCntg = charIDToTypeID( "Cntg" );
desc103.putBoolean( idCntg, conti );
executeAction( idsetd, desc103, DialogModes.NO );
}
총 6개의 입력값을 갖는 함수로 정리를 하였습니다.
각 함수의 인자는 아래와 같은 속성을 갖습니다.
_x : 숫자 : 매직완드의 포인터 X좌표
_y : 숫자 : 매직완드의 포인터 Y 좌표
tolnc : 숫자 0 ~ 255 : tolerance, 선택된 색상 값의 확장 범위. 0 일경우 완전히 같은 색상일 경우만 선택된다.
anti : boolean : True or False 를 입력하며 경계 영역의 부드러운 처리여부
conti : boolean : True or False 를 입력하며 연속된 영역 안에서만 할 것인지 화면 전체로 할 것인지
merge : boolean : True or False 를 입력하며 현재 레이어만 대상으로 할것인지 전체 레이어로 할 것인지
바로 아래 옵션에 해당되는 옵션들 입니다.
시제 사용하실 때는 아래와 같이 사용하시면 됩니다.
// 좌상단 1,1 위치의 색상을 pick 하여 선택 영역 생성
selectbyMagicWand(0, 0, 0, false, true, true)
오늘 소개해 드릴 스크립트는 간단한 내용이지만 일반 적인 스크립트상으로 개발이 불가능하기에 경우에 따라는 아주 유용한 스크립트가 되겠습니다.
우리는 작업 중 상당한 빈도로 포토샵 레이어의 컨텐츠 영역만을 선택하여야 하는 경우가 있습니다.
레이어 영역으로 선택하기
이럴때 단축키로 [Ctrl + 레이어 썸네일 클릭] 하는 방법으로 선택영역을 만들어 내는데요. 이 기능이 javascript reference 로는 구현이 불가능 합니다.
오늘은 바로 그 스크립트로 레이어 영역 선택하는 방법를 소개해 드릴까 합니다.
코드는 아래와 같습니다.
function selectBylayer (lname) {
var idsetd = charIDToTypeID( "setd" );
var desc1 = new ActionDescriptor();
var idnull = charIDToTypeID( "null" );
var ref1 = new ActionReference();
var idChnl = charIDToTypeID( "Chnl" );
var idfsel = charIDToTypeID( "fsel" );
ref1.putProperty( idChnl, idfsel );
desc1.putReference( idnull, ref1 );
var idT = charIDToTypeID( "T " );
var ref2 = new ActionReference();
var idTrsp = charIDToTypeID( "Trsp" );
var idLyr = charIDToTypeID( "Lyr " );
ref2.putEnumerated( idChnl, idChnl, idTrsp );
ref2.putName(idLyr,lname)
desc1.putReference( idT, ref2 );
executeAction( idsetd, desc1, DialogModes.NO );
}
바로 이 코드 입니다. 자바스크립트의 문법을 이용하고는 있지만 레퍼런스에 나와있는 것과는 사뭇 다른 형태의 코드 인데요. 아마로 PS 내부에서 동작하는 방식을 자바스크립의 문법을 통하여 열거해 놓은 것이 아닐까 생각됩니다.
해당 코드를 본인의 스크립트 하단에 붙여 넣고 기능을 사용하면 되는데요.
function selectBylayer (lname) 에서 "lname" 에 해당 하는 부분에 레이어의 이름을 적어 넣으면 해당 레이어의 영역이 선택이 됩니다.
만약 선택해야 하는 레이어 이름이나 종류에 따라 아래와 같이 사용하면 됩니다.
// 선택해야 할 레이어의 이름이 "Layer 0" 이라면
selectBylayer ("Layer 0");
// 선택해야 할 레이어의 이름은 모르겠고 항상 첫번째 레이어라면
var cDoc = app.activeDocument;
selectBylayer (cDoc.layers[0].name);
// 선택해야 할 레이어가 가장 마지막 레이어라면
var cDoc = app.activeDocument;
selectBylayer (cDoc.layers[cDoc.layers.length-1].name);
블로그에 방문 주신 분께서 레이어 자동 저장 기능에 해당 레이어 크기로 이미지가 저장 되었으면 좋겠다는 의견을 주셔서 한번 만들어 보았습니다.
사실 사용하는 분마다 차이가 있을 것 같은데요. 아마 레이어의 크기로 저장되는 기능이 꼭 필요한 분도 계실 거라 생각되어 별도로 페이지를 하나 만들었습니다.
전체 스크립트는 큰 차이가 없으며 현재 레이어의 크기를 파악하고 그 크기로 저장하는 방법만 추가하면 될 것 같습니다.
아래의 내용을 추가할 계획입니다.
현재 레이어의 크기 (가로, 세로) 를 구해본다 : Layer.bounds 라는 개체를 이용
구해진 크기로 새로운 임시 도큐먼트를 생성한다 : Documents.Add( ) 이용
생성된 임시 도큐먼트에 해당 레이어를 복사하여 붙여 넣는다 : Layer.copy() // document.paste()
도큐먼트를 지정된 파일이름과 위치에 저장하고 임시 도큐먼트는 닫는다. : document.close()
기존과 동일하게 전체 크기로 저장하기 위한 옵션을 두어 선택할 수 있게 한다.
어렵지 않죠?
아래 작성된 코드를 보시죠.
var pngOption = new PNGSaveOptions()
pngOption.embedColorProfile = true;
pngOption.formatOptions = FormatOptions.STANDARDBASELINE;
pngOption.matte = MatteType.NONE;
pngOption.quality = 100;
pngOption.PNG8 = false; //24 bit PNG
pngOption.transparency = true;
pngOption.interlaced = true;
// jpg 파일 저장을 위한 설정
var jpgSaveOption = new JPEGSaveOptions()
jpgSaveOption.quality = 10;
var sType = "png" // jpg 로 파일을 저장하기를 원하는경우, png 로 저장을 하고 싶다면 "png"
var cDoc = app.activeDocument
var tempLayers = cDoc.layers
var cWidth = cDoc.width
var cHeight = cDoc.height
var cRes = cDoc.resolution
var savePath = cDoc.path + "\\"
var saveAsEachLayerSize = true
// 일단 모든 레이어를 꺼줍니다.
for (var i = 0 ; i < tempLayers.length; i++)
{
tempLayers[i].visible = false
}
// 아래의 한줄의 함수로 모든 레이어를 저장합니다.
explorerLayerSet_new(savePath, cDoc)
function explorerLayerSet_new (cPath, lSet){
var dLyrs = lSet.layers
var documentSaveType = pngOption;
if (sType == "jpg")
{
documentSaveType = jpgSaveOption
}
for (var k = 0 ; k < dLyrs.length; k++){
if (dLyrs[k].typename == "LayerSet")
{
dLyrs[k].visible = true
ePathName = cPath + dLyrs[k].name + "\\"
ee = new Folder(ePathName)
ee.create();
explorerLayerSet_new (ePathName, dLyrs[k])
dLyrs[k].visible = false
}else{
dLyrs[k].visible = true
dFile = File(cPath + dLyrs[k].name + "." + sType)
if (saveAsEachLayerSize == false)
{
cDoc.saveAs(dFile, documentSaveType,true, Extension.LOWERCASE)
}else{ // 레이어의 크기에 맞추어 파일을 저장하는 기능
// layer.bounds 를 이용하여 레이어의 크기를 얻어올 수 있다.
var cBounds = dLyrs[k].bounds
var newWidth = cBounds[2] - cBounds[0];
var newHeight = cBounds[3] - cBounds[1];
dLyrs[k].copy();
// 레이어의 크기와 동일한 도큐먼트를 하나 생성한다.
var tmpDoc = app.documents.add(newWidth, newHeight, cDoc.resolution, dLyrs[k].name, NewDocumentMode.RGB, DocumentFill.TRANSPARENT);
tmpDoc.paste();
tmpDoc.saveAs(dFile, documentSaveType,true, Extension.LOWERCASE);
tmpDoc.close(SaveOptions.DONOTSAVECHANGES);
}
if (dLyrs[k].name.indexOf("All") == -1)
{
dLyrs[k].visible = false
}
}
}
lSet.visible = false
}
기존 saveAs 부분이 변경이 되었습니다.
png, jpg 를 판단하는 부분을 위쪽으로 빼서 documentSaveType 이라는 변수에 저장 옵션을 담아 버렸습니다.
그리고 위쪽에 saveAsEachLayerSize 라는 변수를 두어 True 일 경우 레이어 크기로, False 일 경우 전체 도큐먼트 크기로 저장이 되게 하여 기존의 방식이 필요한 분들도 하나의 스크립트로 사용할 수 있도록 하였습니다.
