개발하는 디자이너의 DIY 일상

코로나로 인하여 아이들이 집밖에 나가지도 못하고 집안에서 게임만 하고 있는 것을 보고 아이들을 위해 놀이거리를 하나 만들어 주어야겠다고 생각하고 시작한 동물의 숲 카드 만들기 입니다.

일단 물고기 카드를 만들려고 시작했는데 종류가 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 파일이 수정되는 경우 자동으로 이미지가 업데이트 되는 특징이 있습니다. 연결된 파일이 아닌 경우 수정이 되면 모든 이미지를 다시 가져와야 하는 불상사가 일어날 수 있습니다.

이렇게 해서 모든 이미지를 앉히고 출력도 성공적으로 마칠 수 있었습니다.

만들어진 ai 파일을 이용하여 pdf 를 만들어 보았습니다.

용량 관계상 분할 압축을 하였는데요. 다운 받으시고 압축을 해제하여 보시면 pdf 로 예쁘게 만들어져 있는 것을 보실 수 있습니다.

짧지 않은 시간이었지만 이렇게 해서 아이들이 가지고 놀 수 있는 동물의 숲 물고기 놀이 카드가 완성이 되었습니다.

아이들과 너무 재미있게 놀았기에 고생한 보람을 느낍니다.

이제 자동화를 위한 틀이 만들어 졌으므로 해산물 카드라든지, 다른 것들도 쉽게 추가 할 수 있을 것으로 생각합니다.

꼭 동물의 숲 카드 만들기가 아니더라도 포토샵을 이용하여 다양한 속성과 정보를 변경해 가면서 이미지를 제작해야 하는 경우라면 참고하실만한 레퍼런스가 되기를 바랍니다.

감사합니다.

실제 동물의 숲 카드 놀이를 하는 내용은 아래 포스트를 참고해 주세요

2021/01/02 - [DIY] - [아빠가 만든][집콕놀이] '동물의 숲' 카드 놀이 만들기

2019/12/04 - [DEV/Adobe Script] - [포토샵스크립트] Instagram 용 파노라마 사진 자르기

2019/06/10 - [DEV/Adobe Script] - [포토샵 스크립트] 강좌, 무작정 따라해보기

2019/12/13 - [DEV/Adobe Script] - [포토샵스크립트] PSD 모든 레이어 자동 저장, 하위 폴더 포함 (레이어 크기로 이미지 저장)

2020/12/17 - [DIY] - [아빠의요리] 코로나 집콕 간식 '감동란' 만들어 주기

이번 강좌에서는 포토샵 스크립트를 이용하여 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 같은 컬러 합성 기능도 조금만 손보면 사용이 가능하지만 오늘은 그냥 색상을 칠하는 부분만 소개를 드립니다.

이상으로 오늘 포스팅을 마칩니다.

포토샵 스크립트 공부에 도움이 될만한 관련된 콘텐츠 링크 올립니다.

2020/02/14 - [DEV/Adobe Script] - [포토샵스크립트] 매직완드 기능 스크립트로 실행하기

2019/11/14 - [DEV/Adobe Script] - [포토샵스크립트] 스크립트로 레이어 생성, 이동, 복사 하기

2019/09/19 - [DEV/Adobe Script] - [포토샵스크립트] 현재 레이어 이미지를 중앙으로 이동시키기

2019/06/10 - [DEV/Adobe Script] - [포토샵 스크립트] 강좌, 무작정 따라해보기

2020/01/23 - [DEV/Adobe Script] - [포토샵스크립트] 레이어 컨텐츠 영역 선택하기

이번 포스트에서는 현재 열려있는 도큐먼트를 특정 이미지 포멧으로 저장하는 기능에 대하여 알아 보겠습니다.

포토샵은 이미지를 편집하는 다재 다능한 툴이지만 자동화 툴로 사용할 생각까지는 하지 않습니다. 일반 적인 이미지 포멧을 변환해주는 툴들은 여럿 있지만 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 를 이용하여 저장하게 되므로 주의 하시면 됩니다.

옵션은 스크립트 중 어디에 적어 도 상관 없습니다. 포토샵 자바스크립트는 첫줄부터 실행되기는 하지만 모든 코드를 미리 읽어 둔후 실행하므로 위에 예제와 같이 옵션과 저장 기능이 딱 붙어 있을 필요는 없습니다. 통상 저의 경우에는 저장 옵션들을 스크립트 가장 상단에 적어두고 코드 작성을 시작하기는 합니다.

관련하여 제가 설명드리지 못한 부족한 부분은 레퍼런스를 참고하시면 되는데요. 코딩에 관심이 있으시다면 반드시 레퍼런스를 받으셔서 본인이 작성하는 코드와 관련된 설명을 보시기 바랍니다. 학원이나 강좌보다 더욱 훌륭한 선생님이 될 것 입니다.

2019/06/12 - [DEV/Adobe Script] - 포토샵 스크립트 레퍼런스, 도움말 사용하기

그럼 이만~

오늘 소개해 드릴 스크립트는 간단한 내용이지만 일반 적인 스크립트상으로 개발이 불가능하기에 경우에 따라는 아주 유용한 스크립트가 되겠습니다.

우리는 작업 중 상당한 빈도로 포토샵 레이어의 컨텐츠 영역만을 선택하여야 하는 경우가 있습니다. 

이럴때 단축키로 [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);

 물론 코드 하단에는 위에 제가 올려드린 코드가 함께 존재해야 동작이 되니 참고하세요.

이상으로 스크립트로 레이어 영역을 선택하는 방법을 소개해 드렸습니다.

감사합니다.

2020/04/02 - [DEV/Adobe Script] - [포토샵스크립트] color fill 하기

2020/02/14 - [DEV/Adobe Script] - [포토샵스크립트] 매직완드 기능 스크립트로 실행하기

2019/12/11 - [DEV/MAX SCRIPT] - 3DS MAX 스크립트로 초간단 다이얼로그 창 , UI 버튼 만들기

2019/09/03 - [DEV/Adobe Script] - [photoshop script] 포토샵 스크립트로 특정 영역 선택하기

Instagram, 요즘 가장 핫한 SNS 가 아닐까 싶습니다. 지하철에서 무심코 주변을 보니 눈에 보이는 핸드폰 화면 마다 Instagram 화면이 보이는 것을 보고 깜짝 놀랐습니다.

난 안하는데...

어쨌든 Instagram 계정을 하나 만들어 보았습니다.

전 SNS 에 취미같은 건 없고 다만 뭔가 하나 만들어 보고 싶었는데 테스트 할 공간이 바로 Instagram 이었다고나 할까.

인스타 그램에 파노라마 사진을 올리면 사진이 다 보이지도 않거니와 얇고 길에 나와 보기에 썩 좋지 않더라고 합니다. 그래서 파노라마로 길게 찍힌 사진을 Instagram에 올리기 적당하게 네모 반듯하게 자동으로 잘라주는 스크립트를 만들어 보았습니다.

폰 app 중에는 Instagram 용 파노라마를 자연스럽게 올릴 수 있도록 잘라주는 APP 들이 있는데 PC 에 있는 사진을 올리고 싶다면 그걸 폰에 올려서 잘라서 업로드 하는게 역시 귀찮더군요. 바로 PC 에서 잘라서 올리면 좋겠다는 생각이 들어 만들어 보기로 하였습니다.

이렇게 만들려고 합니다.

• 인스타용 최적 이미지 사이즈는 1080 x 1080 이라고 한다
• 가로길이를 1080 으로 나누어 등분할 개수를 구한다. --> N.xx
• 1080으로 정확히 나누어 떨어질 리 없기 때문에 소숫점 첫자리 기준으로 반올림/내림 한다.
• 가로길이 : 1080 px x N , 세로길이 : 1080 px 로 리사이즈를 한다.
• 가로세로 1080 px 씩 좌측부터 selection 을 만들어 이미지를 복사한다.
• 새로운 1080 x 1080 짜리 document 를 만들어서 복사한 이미지를 붙인다.
• 이미지와 동일한 명칭의 폴더를 만든 후 복사한 이미지를 저장한다.

요렇게 하면 만들어 질 것 같았습니다.

먼저 테스트용 이미지는 아래와 같습니다.

대한민국의 보물 '우도' 에 자리잡고 있는 하고수동 해수욕장 되시겠습니다.

가로로 긴 이미지 인데요, 

올리면 이렇게 보이게 됩니다.

이렇게 좌우를 자를 수 밖에 없는 상황이 됩니다.

그래서 Instagram 이미지 크기에 맞게 가로로 긴 이미지를 스크립트로 자동으로 자르면 어떻게 될까요?

스크립트를 이용하여 이미지를 자동으로 아래와 같이 잘라주게 됩니다. 신기하죠?

그럼 제가 만든 스크립트로 자른 이미지를 올리면 어떻게 올라가게 될까요..

네! 바로 이렇게 됩니다 ㅋㅋ

스크립트 다운 로드는 여기서 받으세요.

자.. 제 블로그가 저런 자랑글 올리는 블로그는 아니니 이제 스크립트를 소개해 드리겠습니다.

// auto crop for instagram (panorama) 
var defUnit = preferences.rulerUnits
preferences.rulerUnits = Units.PIXELS

//JPG 파일저장용 옵션
var jpgOption = new JPEGSaveOptions();
jpgOption.qulity = 8;


var cDoc = app.activeDocument;
var cName = cDoc.name;
cName = cName.replace(".", "_"); // 현재 열린 파일명에서 . 을 _ 로 변경

var cFile = File(cDoc.fullName);
var cPath = cFile.parent; // 현재 열린 이미지의 경로를 구한다.

var cWidth = cDoc.width;
var cHeight = cDoc.height;
var divideStep = 1;

var newWidth = cWidth * (1080 / cHeight); //세로를 1080 으로 변경했을때의 가로 크기
divideStep = newWidth / 1080 ; 

if ((divideStep % 1.0) >= 0.5)
{
    divideStep = Math.ceil(divideStep); // 0.5 보다 크면 올림
    newWidth = 1080 * (divideStep);            
}
else
{
    divideStep = Math.floor(divideStep); // 0.5 보다 작으면 내림
    newWidth = 1080 * (divideStep);  
}

cDoc.resizeImage(newWidth, 1080);


var dDoc = app.documents.add(1080,1080); // 저장용 문서 만들기

for (var k = 0; k < divideStep; k++) // 가로 개수만큼
{
    app.activeDocument = cDoc;
    
    var x1 = 1080 * k;
    var x2 = 1080 * (k+1);
    var y1 = 0;
    var y2 = 1080;
    
    // 1080 x 1080 씩 선택하여 저장용 문서에 붙여 넣는다.
    cDoc.selection.select([[x1,y1], [x2,y1], [x2,y2], [x1,y2]])
    cDoc.selection.copy();
    app.activeDocument = dDoc;
    dDoc.paste();
    
    var sPath = cPath + "\\" + cName + "\\"
    var sFolder = new Folder(sPath)
    try
    {
        sFolder.create(); //파일 이름으로 폴더를 만들어 준뒤
    }catch(e){}
    
    var sFile = new File(sPath + cName + "_" + k + ".jpg");
    //파일 저장
    dDoc.saveAs(sFile, jpgOption, true, Extension.LOWERCASE);
    
}

dDoc.close(SaveOptions.DONOTSAVECHANGES);//저장용 문서 닫기
//cDoc.close(SaveOptions.DONOTSAVECHANGES); // 원래 이미지도 닫으려면 주석 풀기

// 유닛 단위를 원래대로 돌린다.
preferences.rulerUnits = defUnit

스크립트 내에 주석을 달아 놓았으니 찬찬히 보시면 이해가 되실거에요.

포토샵에 먼저 파노라마 이미지를 열어 놓은 뒤 실행하셔야 합니다.

실행은 Extend script toolkit 으로 해당 스크립트를 붙여넣기 하신 뒤 실행하셔도 되고요, 해당 스크립트를 다운 받으신 뒤 포토샵에서 스크립트 불러오기 하셔서 실행하셔도 됩니다.

스크립트 실행 방법은 아래의 포스트를 참고하세요~

https://diy-dev-design.tistory.com/47

개발 공부도 함께 하실 분은 아무래도 직접 Extend script toolkit 에 코딩을 해보시는게 좋겠죠?

아래 포스트에 코드를 이용하여 편집해보며 실행할 수 있는 방법이 소개되어 있습니다.

https://diy-dev-design.tistory.com/7

그럼 이만~

참 제 인스타는 제 블로그 이름과 같습니다.

인스타에 올린 파노라마를 직접 보시려면 아래 주소에 가셔서 확인하셔요 ㅋ. 게시글은 달랑 2개.

https://www.instagram.com/p/B5nbnenH3vD/?igshid=1pps3vkv5c1mi

그럼 진짜로 20000

포토샵의 가장 중요한 핵심 기능중의 하나가 레이어라는 구조일 것입니다. 이미지를 계층적으로 쌓아 올리고 각각의 이미지간 효과를 적용하거나 투명도등을 조절하여 완성된 하나의 이미지를 만들어 내는 것이죠. 

오늘 강좌에서는 포토샵에 레이어를 생성하고, 이름을 붙이거나, 위치를 이동하는 등의 레이어를 관리하는 기능을 소개해 드릴까 합니다.

오늘 강좌에서 다룰 내용은 아래와 같습니다.

• 이미 있는 레이어를 복제하기, 위치 조정하기, 투명도 조정하기
• 이미 있는 레이어의 순서 변경하기(이동하기)

먼저 포토샵 스크립트 작성을 위하여 extend script toolkit 을 실행합니다.

그리고 당연히 포토샵 어플리케이션을 열어야 겠죠. 

오늘은 제가 좋아하는 traxxas 로고를 이용하여 코드 연습을 해보겠습니다.

이 로고 이미지를 이용하여 wallpaper 를 한번 만들어 보겠습니다. 손으로 하자면 아주 귀찮을 그림을 만들어 보겠습니다.

//로고파일의 위치를 설정한다
traxxasLogo_250_File = "D:/01_works/용/DIY_HARD_RC/traxxas_LOGO_125x25.png"
var logoFile = new File(traxxasLogo_250_File);

// 포토샵에 새로운 도큐먼트를 생성한다. 크기는 1920 1080
var wallPaperPsd = app.documents.add(1920,1080,72)

// 검정색 컬러를 정의한다
var newColor = new SolidColor();
newColor.rgb.red = 0;
newColor.rgb.green = 0;
newColor.rgb.blue = 10;

// 배경색상을 검정색으로 fill 한다
wallPaperPsd.selection.selectAll();
wallPaperPsd.selection.fill(newColor);
wallPaperPsd.selection.deselect();

// 로고 이미지를 열어서 포토샵으로 복사한다. 
var logoImg = app.open(logoFile);
var newLogoLyr = logoImg.layers[0].duplicate(wallPaperPsd.layers[0], ElementPlacement.PLACEBEFORE);


app.activeDocument = logoImg;
// 로고 파일은 닫는다.
logoImg.close();

app.activeDocument = wallPaperPsd;
//복사한 레이어의 이름을 변경한다.
newLogoLyr.name = "logo_1_1";

오늘 강좌의 핵심이되는 부분은 요 부분입니다.

var newLogoLyr = logoImg.layers[0].duplicate(wallPaperPsd.layers[0], ElementPlacement.PLACEBEFORE);

logoImg 파일의 0번째 레이어를 복사하는 명령어죠. duplicate 뒤에 오는 값들은 어디에 복사할 것인지를 지정합니다. 첫번째 인자는 복제될 대상을 지정합니다. 이번 예제에서는 다른 PSD 파일 (배경화면용 이미지)의 0번째 레이어가 대상이 되었습니다. 그뒤에 오는 인자는 지정한 대상과의 관계인데요. 이번 예제에서 사용한 것은 "대상 예제의 바로 전에 위치시켜라" 라는 명령입니다.

ElementPlacement 라는 개체의 하위 옵션으로 몇가지 옵션을 지정할 수 있는데요. PS 버전이 올라가면서 옵션이 많이 다양해 졌습니다. 필요한 위치에 맞추어 넣으시면 되겠습니다.

ElementPlacement.PLACEAFTER         //cs6 - 대상개체 아래에
ElementPlacement.PLACEATEND         //cs6 - 대상개체의 제일 마지막에
ElementPlacement.PLACEBEFORE        //cs6 - 대상개체의 바로 위에
ElementPlacement.INSIDE             //cc - 대상이 폴더인 경우 폴더 안에
ElementPlacement.PLACEATBEGINNING   //cc - 대상 개체의 제일 처음에

어쨌든 요기까지 스크립트를 실행해보면 아래와 같은 그림이 만들어 집니다.

화면에 로고 이미지가 붙었죠?

요 이미지를 화면에 쫙 깔아 보겠습니다. 손으로 하려면 매우 귀찮은 작업이죠.

위에 작성한 코드를 포함하여 추가한 코드는 아래와 같습니다.

//로고파일의 위치를 설정한다
traxxasLogo_250_File = "D:/01_works/용/DIY_HARD_RC/traxxas_LOGO_125x25.png"
var logoFile = new File(traxxasLogo_250_File);

// 포토샵에 새로운 도큐먼트를 생성한다. 크기는 1920 1080
var wallPaperPsd = app.documents.add(1920,1080,72)

// 검정색 컬러를 정의한다
var newColor = new SolidColor();
newColor.rgb.red = 0;
newColor.rgb.green = 0;
newColor.rgb.blue = 10;

// 배경색상을 검정색으로 fill 한다
wallPaperPsd.selection.selectAll();
wallPaperPsd.selection.fill(newColor);
wallPaperPsd.selection.deselect();

// 로고 이미지를 열어서 포토샵으로 복사한다. 
var logoImg = app.open(logoFile);
var newLogoLyr = logoImg.layers[0].duplicate(wallPaperPsd.layers[0], ElementPlacement.PLACEBEFORE);

app.activeDocument = logoImg;
// 로고 파일은 닫는다.
logoImg.close();

app.activeDocument = wallPaperPsd;
//복사한 레이어의 이름을 변경한다.
newLogoLyr.name = "logo_def";

// 이제 화면에 로고 이미지를 가득 채워 넣자

//각 로고 간의 간격을 설정해주자
var gapWidth = 100;
var gapHeight = 100;

// 로고 이미지의 영역을 구한다. bounds 는 레이어내의 이미지 영역 정보를 가져온다
var logoBounds = newLogoLyr.bounds; //영역 정보는 [left, top, right, bottom] 순으로 들어온다.
var logoWidth = logoBounds[2] - logoBounds[0]; // 레이어의 가로 크기
var logoHeight = logoBounds[3] - logoBounds[1]; // 레이어의 세로크기

// 화면 영역내에 몇개의 로고가 들어갈 수 있는지 계산한다.
var numWidth = wallPaperPsd.width / (logoWidth + gapWidth)
var numHeight = wallPaperPsd.height / (logoHeight + gapHeight)

// 가로, 세로로 로고를 복사하여 붙여 넣는다.
for (var yy = 0; yy < numHeight ; yy++) // 세로 개수만큼 반복
{
    for (var xx = 0; xx < numWidth; xx++) // 가로 개수만큼 반복
    {
        var tmpLyr = newLogoLyr.duplicate(newLogoLyr, ElementPlacement.PLACEBEFORE);
        tmpLyr.translate(xx * (logoWidth + gapWidth), yy * (logoHeight + gapHeight))
        tmpLyr.name = "logo_" + xx + "_" + yy ;
    }    
}

로고 이미지를 가로세로로 100px 씩 간격을 띄고 화면에 꽉 채우는 스크립트가 되었습니다.

이렇게하면 아래와 같은 그림이 만들어 집니다.

네 그런데 약간 아쉬운건 로고가 약간 치우쳐져서 배치가 되었네요.

그리고 약간 단조로워 보이는 듯 합니다. 그리고 바탕화면에 사용할 그림인데 너무 강렬한 감이 있습니다.

자 코드를 좀 수정해 보겠습니다. 이제 코드가 제법 길어지므로 집중해서 보셔야 합니다.

var currentUnitValue = app.preferences.rulerUnits

// 포토샵 유닛을 픽셀로 변경
app.preferences.rulerUnits = Units.PIXELS;



//로고파일의 위치를 설정한다
traxxasLogo_250_File = "D:/01_works/용/DIY_HARD_RC/traxxas_LOGO_125x25.png"
var logoFile = new File(traxxasLogo_250_File);

// 포토샵에 새로운 도큐먼트를 생성한다. 크기는 1920 1080
var wallPaperPsd = app.documents.add(1920,1080,72)

// 검정색 컬러를 정의한다
var newColor = new SolidColor();
newColor.rgb.red = 0;
newColor.rgb.green = 0;
newColor.rgb.blue = 10;

// 배경색상을 검정색으로 fill 한다
wallPaperPsd.selection.selectAll();
wallPaperPsd.selection.fill(newColor);
wallPaperPsd.selection.deselect();

// 로고 이미지를 열어서 배경화면용 포토샵으로 복사한다. 
var logoImg = app.open(logoFile);
var newLogoLyr = logoImg.layers[0].duplicate(wallPaperPsd.layers[0], ElementPlacement.PLACEBEFORE);

app.activeDocument = logoImg;
// 로고 파일은 닫는다.
logoImg.close();

app.activeDocument = wallPaperPsd;
//복사한 레이어의 이름을 변경한다.
newLogoLyr.name = "logo_def";

// 이제 화면에 로고 이미지를 가득 채워 넣자

//각 로고 간의 간격을 설정해주자. 숫자가 작을 수록 촘촘해지고 클수록 듬성듬성 붙는다.
// 포토샵 스크립트 실행 속도가 느리므로 너무 작은 숫자는 넣지 말자.
var gapWidth = 100;
var gapHeight = 100;

// 로고 이미지의 영역을 구한다. bounds 는 레이어내의 이미지 영역 정보를 가져온다
var logoBounds = newLogoLyr.bounds; //영역 정보는 [left, top, right, bottom] 순으로 들어온다.
var logoWidth = logoBounds[2] - logoBounds[0]; // 레이어의 가로 크기
var logoHeight = logoBounds[3] - logoBounds[1]; // 레이어의 세로크기

// 화면 영역내에 몇개의 로고가 들어갈 수 있는지 계산한다.
var numWidth = Math.floor(wallPaperPsd.width / (logoWidth + gapWidth));
var numHeight = Math.floor(wallPaperPsd.height / (logoHeight + gapHeight));

// 가로, 세로로 가득 찼을때 남는 공간을 계산하여 offset 을 만들어 주자
var offsetX = Math.floor(wallPaperPsd.width - (numWidth * (logoWidth + gapWidth) - gapWidth));
offsetX = offsetX * 0.5;

var offsetY = Math.floor(wallPaperPsd.height - (numHeight * (logoHeight + gapHeight) - gapHeight));
offsetY = offsetY * 0.5;

// 투명도를 조절하기 위한 값. 여기서 설정한 값에 의해 투명도가 자동으로 조절되어 아래로 내려갈 수록 투명해 진다. 
var maxOpacity = 50;
var minOpacity = 15;

// 각 단계별 투명도 변이 값을 계산하자.
var opacityStep = (maxOpacity - minOpacity) / numHeight

// 가로, 세로로 로고를 복사하여 붙여 넣는다.
for (var yy = 0; yy < numHeight ; yy++) // 세로 개수만큼 반복
{
    for (var xx = 0; xx < numWidth; xx++) // 가로 개수만큼 반복
    {
        var tmpLyr = newLogoLyr.duplicate(newLogoLyr, ElementPlacement.PLACEBEFORE);
        wallPaperPsd.activeLayer = tmpLyr; // 처음 레이어가 계속 활성화 되는 것을 막기 위하여 활성화된 레이어를 현재 복사된 레이어로 지정
        tmpLyr.translate(-logoBounds[0], -logoBounds[1]); // 복사된 레이어를 0,0 으로 이동시킴
        tmpLyr.translate((xx * (logoWidth + gapWidth)) + offsetX, (yy * (logoHeight + gapHeight)) + offsetY) // 지정된 위치로 이동
        tmpLyr.name = "logo_" + xx + "_" + yy ;
        
        tmpLyr.opacity = maxOpacity - (yy * opacityStep); // 아래로 갈 수록 투명하게
        // tmpLyr.opacity = minOpacity + (yy * opacityStep); // 위로 갈수록 투명하게 하려면 주석을 풀어 줍니다.
    }    
}
//처음에 복사한 레이어는 필요 없으니 숨겨줍니다.
newLogoLyr.visible = false;

//유닛을 스크립트 실행 이전상태로 복구함
app.preferences.rulerUnits = currentUnitValue;

이제 스크립트는 아래로 복제해 나가면서 점차 투명도를 주어 서서히 보이지 않도록 하고 있습니다. 이 투명도로 사용자가 설정한 최대값과 최소값을 이용하여 점차 변화하도록 하고 있습니다. 

간격을 조정하여 촘촘하게 배치하거나 듬성듬성 배치하더라도 의도한데로 서서히 변화가 적용될 것 입니다.

적용된 화면을 다시 볼까요?

이렇게 하면 스크립트의 일부만 수정하여 다양한 화면을 만드는 것이 가능합니다.

반복하여 붙여넣을 파일의 경로, 반복 간격, 투명화 정도를 설정하는 것으로 다른 이미지에도 동일하게 적용이 가능합니다. 본 예제에서는 1920 1080 사이즈의 이미지로 제작하였지만 다른 사이즈를 입력하여도 아마 정확하게 동작할 것입니다. 

여기에 마지막으로 화면 가운데에 좀 더 커다란 로고를 넣는다면 어떻게 해야 할까요?

직접 한번 도전해 보시면 어떨까요?

감사합니다. 그럼 이만~

레이어 위치 이동하는 스크립트는 여기에도 있었죠? ^^

https://diy-dev-design.tistory.com/46

미디어 아티스트를 꿈꾸는 디자이너라면 한번 쯤은 관심을 가져 봤을 법한 이미지 또는 영상이 있습니다. 바로 사진을 텍스트로 전환하여 이미지 프로세싱을 통해 표현하는 것인데요. 

음... 글로만은 설명이 좀 어려울 수 있겠습니다.

말하자면 이런거죠.

위의 그림을 보면 언뜻 사진처럼 보이지만 가까이서 보면 

이렇게 문자(알파벳, 숫자, 특수기호) 로 되어 있습니다.

신기하죠?

사실 사람이 이런 작업을 하는 것은 일정 사이즈를 넘어가는 순간 불가능 합니다. 하지만 스크립트를 이용하면 가능합니다.  이번에는 스크립트를 이용하여 위와 같은 그래픽을 자동으로 만드는 방법을 소개해 드릴 까 합니다. 

자 개발을 하려면 무엇을 어떻게 개발할 것인지 머리속에 잘 그려보는 것이 중요합니다.

한번 적어 볼까요?

• 알파벳, 숫자, 특수기호를 이용하여 밝기 순으로 문자를 배열하는 작업을 한다. --> A
• 도큐먼트를 사진을 분석이 가능한 최소 크기로 리사이즈 한다.
• 분석작업이 용이하도록 흑백으로 전환 한다.
• 각 픽셀의 밝기를 조사한다.
• 각 픽셀의 밝기에 대응되는 A 의 문자열을 찾아 변수에 저장한다.
• 다시 이미지 사이즈를 축소된 사이즈 * 글자크기 로 리사이즈 한다.
• 이미지에 텍스트 레이어를 추가한다.
• 텍스트 레이어에 아까 저장하였던 텍스트 변수의 값을 이용하여 글자를 표시한다.
• 글자의 문자 간격과 줄간격을 설정한다.
• 아! 글자는 모노타입 폰트를 설정한다. 폰트 간격이 pixel 처럼 일정해야 하므로.
  • 여기서 나는 Consolas 라는 모노타입 폰트를 10 pt 로 적용하였다.
• 뒤에 이미지에 해당되는 배경을 숨겨주면 완료!

좀 장황하지만 위의 과정이 있어야만 표현이 가능하다는 것을 알 수 있습니다.

우선 문자열을 매번 이미지를 글자로 표현해 볼때 마다 분석을 하는 것은 불필요하므로 별도 스크립트를 이용하여 재배열을 해야 하는데요, 아래 포스트의 내용을 먼저 참고하시면 도움이 되겠습니다.

https://diy-dev-design.tistory.com/55

제가 사용한 글자는 

abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890[}±.:,/~';*-=+!@?>\#$%^&

인데요. 밝기 순으로 정렬을 해보면 아래와 같습니다.

.-':,;>^!~Lci/*1l?zC+±tsr2=JIT}[x75FvZ3eSYEfukjnayKoPXV9h6qdRp4bAG$8wDUO&%#Bg0mHQMWN@

순서가 뒤죽박죽이 되었죠? 제일 왼쪽이 가장 밝은 픽셀, 오른쪽이 어두운 픽셀에 매칭될 문자 입니다.

총 85개의 숫자인데요. 이미지의 픽섹의 밝기값을 0 ~ 100 사이의 밝기값으로 구한 뒤 x0.85 를 해주면 85 단계 정도로 리스케일이 됩니다. 그런 다음 각각의 리스케일 된 밝기를 저 글자의 해당 되는 위치의 글자로 표현해 주면 되는겁니다.

그럼 이미지를 준비해 볼까요? 

네. 유명한 영화 매트릭스의 주인공인 네오 포스터 입니다.

이제 코드를 짜보겠습니다. 주석을 달아 놓았으니 한줄 한줄 따라 적어 보시면서 읽어 보시면 됩니다.

코딩이 익숙치 않은 분은 좀 어려울 수도 있겠는데요. 기본적으로 for 를 이용한 반복 문이나 배열의 내용을 넣고 꺼내는 등의 기본적인 코딩이 가능하시면 크게 어려울 것은 없습니다.

var lset = ".-':,;>^!~Lci/*1l?zC+±tsr2=JIT}[x75FvZ3eSYEfukjnayKoPXV9h6qdRp4bAG$8wDUO&%#Bg0mHQMWN@@"

var cDoc = app.activeDocument

cDoc.colorSamplers.removeAll();


//현재 다큐먼트를 복제
dDoc = cDoc.duplicate();
var pointSample = dDoc.colorSamplers.add([1,1]);

// 이미지의 가로 사이즈를 정해준다.
var imageWidth = 24;
// 이미지의 세로사이즈는 가로사이즈에 맞추어 비율에 맞게 자동으로 구한다.
var imageHeight = Math.floor(dDoc.height * (imageWidth / dDoc.width));

// 이미지를 리사이즈 한다.
dDoc.resizeImage(imageWidth, imageHeight);
// 흑백으로 전환. 모드가 변경되는 것은 아니고 컬러만 흑백으로 변경하게 된다.
dDoc.layers[0].desaturate()

//밝기가 저장될 배열을 생성
var brightArray = [];

// 이미지의 모든 필셀의 밝기를 배열에 저장함
for (var yy = 0; yy < imageHeight ; yy++)
{
    for (var xx = 0; xx < imageWidth; xx ++)
    {
        pointSample.move([xx,yy]);
        brightArray.push(Math.floor(85 - pointSample.color.hsb.brightness * 0.85))
    }
}

// 글자를 10pt 로 표시할 것이므로 이미지의 가로 세로 픽셀 수 x 10 한 만큼의 크기로 리사이즈를 한다.
dDoc.resizeImage(imageWidth * 10, imageHeight * 10, 72, ResampleMethod.NEARESTNEIGHBOR);

//이전의 유닛 단위를 미리 저장해 놓는다.
var rulerUnits = app.preferences.rulerUnits;
// 유닛을 포인트로 변경한다.
app.preferences.rulerUnits = Units.POINTS;

// 레이어를 하나 만들어 준뒤 텍스트 레이어로 정해준다.
var aLyr = dDoc.artLayers.add();
aLyr.kind = LayerKind.TEXT;
aLyr.name = "myTxt";

var cTxtItem = dDoc.artLayers["myTxt"].textItem;
cTxtItem.font = "Consolas";
cTxtItem.useAutoLeading = false
cTxtItem.size = 10;
cTxtItem.leading = 10.0;
cTxtItem.tracking = 445; // 몇차례 테스트 후 얻어진 값
cTxtItem.position = [0,0];

var cid = 0;
var ct = "";

for (var yy = 0; yy < imageHeight ; yy++)
{
    for (var xx = 0; xx < imageWidth; xx ++)
    {
        ct += lset.charAt(brightArray[cid]); // 저장된 배열의 값에 해당되는 글자를 가져옴
        cid++;
    }
    ct += "\r"; // 가로행이 끝나면 리턴을 입력하여 줄바꿈을 해준다.
}
cTxtItem.contents = ct; // 텍스트 아이템의 내용을 수집한 문자열로 입력한다.
cTxtItem.leading = 10.0;

//저장해 두었던 유닛으로 설정을 되돌린다.
app.preferences.rulerUnits = rulerUnits;
pointSample.remove();

이렇게 하고 실행을 해보면 글자로 만들어진 그림이 표시됩니다.

이렇게요.

가로를 32px 로 하면 아래와 같이 됩니다.

코드의 imageWidth 의 값을 변경하면 그에 해당하는 디테일의 이미지가 만들어 집니다. 24px 에 비하여 32px의 이미지가 좀더 디테일한 것을 알 수 있습니다. 다만 포토샵의 colorSampler 가 색상을 취득하는 과정이 매우 속도가 느려서 좀 큰 해상도로 하게 되면 상당히 오래 걸려야 표시가 되더군요. 

아무래도 포토샵이 실시간으로 이미지를 프로세싱하기에는 역부족인 듯 합니다만 포토샵 스크립트로도 이런 작업이 가능하구나 정도로 이해하시면 좋을 것 같습니다. 

참고로 이런류의 작업을 아주 빠르게 수행할 수 있는 툴도 있습니다. cycling74 라는 회사의 MAX 라는 툴이고요. JITTER 라는 툴이 MAX 와 함께 설치되면 영상 처리를 아주 빠른 속도로 할 수 있습니다. 실시간 영상도 위와 같이 표현이 가능할 정도로요. 포토샵에서도 이런게 되는구나 정도로 보시면 될 것 같습니다.

이렇게 만들어진 텍스트 이미지를 이용하여 제 휴대폰 배경화면을 하나 만들어 봤습니다.

좀 더 매트릭스의 텍스트 이펙트가 살아있는 배경화면은 아래 페이지에서 다운 로드 받으세요~

https://diy-dev-design.tistory.com/56

존 윅 폰 배경화면 (간치 철철)

https://diy-dev-design.tistory.com/58

이번 강좌에서는 좀 재미있는 코드를 소개해 드릴까 합니다.

바로 엑셀 VBA 를 이용하여 포토샵 자동화 하기! 

오~~ 이게 되냐구요? 네 ! 됩니다.

사실 스크립트나 자동화 작업을 통하여 어떤 일을 할 것인가를 찾아내는 것이 실제 코드를 작성하는 것보다 훨씬 어려운 일이랍니다. 막상 어느 정도 개발을 할 수 있게 되면 생각보다 많은 것을 할 수 있다는 것을 알게되죠.

자 오늘은 그런 의미에서 새로운 문을 한번 열어 보겠습니다.

포토샵은 크게 세가지 스크립트 언어를 지원합니다. 바로 JavaScript, Apple Script (맥에서 만 가능), Visual Basic (윈도우에서만 가능) 요렇게 세가지 입니다. 엑셀은 기본적으로 비주얼 베이직 에디터를 포함하고 있기 때문에 포토샵 스크립트인 비주얼 베이직 버전의 개발이 가능한 것이죠. 

비주얼 베이직 버전의 포토샵 스크립트도 많은 기능을 지원합니다. 자바스크립트 버전과 거의 동일합니다. 오히려 코딩 관점에서는 더 간단하기도 합니다.

 재미없는 이야기는 집어 치우고 바로 코드로 실습을 해보시죠.

엑셀을 켜고 Alt + F11을 눌러 비주얼 베이직 에디터 창을 열어줍니다. 그리고 Sheet1 페이지를 더블클릭해서 코딩을 위한 창을 하나 만든다음 아래의 내용을 입력해주세요.

Sub usingPhotoshop()

    Dim psApp As Object
    
    Set psApp = CreateObject("Photoshop.Application")
    
    psApp.Documents.Add

End Sub

물론 컴퓨터에 당연히 포토샵이 설치가 된 상태여야 겠죠?

F5 키를 눌러보면 쨔짠~ 아래와 같이 포토샵이 자동으로 켜지고 곧이어 새창이 하나 만들어 집니다.

신기 하신가요?

제가 제 블로그에서 포토샵 스크립트도 틈틈히 올리고 있는데요. 해당 카테고리에는 대부분 자바스크립트 기준의 스크립트를 올리고 있습니다. 사실 해당 카테고리에 올린 모든 내용은 VBA 로도 작성이 가능하답니다.

코드를 조금더 올려볼까요?

Sub usingPhotoshop()

    Dim psApp As Object
    Dim psdDoc
    
    Set psApp = CreateObject("Photoshop.Application")
    
    psApp.Documents.Add
    
    Cells(1, 1).Value = "Document Name"
    Cells(1, 2).Value = "가로"
    Cells(1, 3).Value = "세로"
    
    Set psdDoc = psApp.activeDocument
    
    Cells(2, 1).Value = psdDoc.Name
    Cells(2, 2).Value = psdDoc.Width
    Cells(2, 3).Value = psdDoc.Height
        
End Sub

 조금 길어졌지만 뭐 한줄 한줄 읽어 보면 어려울 것이 없습니다. 처음 짜시려면 막막하시겠지만 막상 짜놓은 코드를 읽어보면 간단합니다. 자꾸 이렇게 만들어진 코드를 보는 것이 중요합니다. 자꾸 보면서 따라 코딩을 하다보면 눈에 익게 되고 그 다음엔 손에 익게되죠. 일단 익숙해 지면 쉽게 자신만의 코드 작성이 되기 시작합니다.

내용을 보면 이렇습니다.

• 포토샵 어플리케이션이 될 변수와 PSD 다큐먼트를 지정할 변수를 선언해준다.
• photoshop.application 이라는 오브젝트를 생성한다 --> 이때 포토샵이 실행됨
• 실행된 포토샵에 새로운 다큐먼트를 추가한다.
• 엑셀 시트의 멘위 세줄에 각 항목의 이름을 기입한다.
• 현재 포토샵에서 활성화된 창을 변수에 담아준다.
• 활성화된 창의 이름과 가로 길이, 세로 길이를 두번째 줄에 차례로 입력해준다.

요런식이 되겠습니다. 간단하죠?

자 그럼 반대로 엑셀에서 지정한 이름과 크기로 포토샵 도큐먼트를 세팅해 볼까요? 아마 실제로는 이게 더 유용하겠죠?

코드는 이렇게 작성해 보겠습니다.

• 포토샵으로 새로운 다큐먼트를 만들어 준다
• 가로세로 크기를 지정한 크기로 Resize 한다
• 지정한 이름의 PSD 파일로 저장한다.

간단하죠? 코드를 볼까요? 아까랑 별반 차이가 없습니다.

Sub usingPhotoshop()

    Dim psApp As Object
    Dim psdDoc
    
    Set psApp = CreateObject("Photoshop.Application")
    
    psApp.Documents.Add
    
    Cells(1, 1).Value = "Document Name"
    Cells(1, 2).Value = "가로"
    Cells(1, 3).Value = "세로"
    
    Set psdDoc = psApp.activeDocument
    
    psdDoc.ResizeImage CInt(Cells(2, 2).Value), CInt(Cells(2, 3).Value), 72, 4
      
    psdDoc.SaveAs ("d:\" & Cells(2, 1).Value & ".psd")
    
End Sub

윗쪽까지는 다 동일하고요. 아래 두줄이 다릅니다.

바로 ResizeImage 라는 명령이 들어갔고요. 그 아래에는 다큐먼트의 이름이 되는 PSD 파일을 저장해주는 코드 입니다.

VBA 에서는 문자열을 합칠때 + 기호가 아닌 & 를 사용하는 것 알고 계시죠??

요렇게 하면 아래와 같이 만들어 진답니다. 사이즈 확인을 위하여 이미지 리사이즈 창을 통해 정보를 띄워 놓았습니다.

사실 이런 간단한 코드도 처음 작성하는 분에게는 막막하기만 합니다.

VBA 는 익숙치 JavaScript 나 C, C++, Java 와는 다른 좀 특이한 문장 형태를 갖고 있기 때문에 더 어렵게 느껴질 수 있습니다. 하지만 VBA 의 장점이라 할 수 있는 실시간 오류 리포팅 기능이 있지 않겠습니까? 코드 작성 중 잘못된 문법은 허용이 되지 않죠. 바로 경고창으로 알려 줍니다. 경고 창이 뜨지 않도록 잘 맞춰주면 코드가 완성이 됩니다.

그리고 ResizeImaze 뒤에 Cells(2,1).value 는 알겠는데 그 뒤에 오는 72 와 4 라는 숫자는 뭘까요?? 각각의 값은 위 이미지에서 볼 수있는데요. 바로 리사이즈시 사용하는 Resolution 정보와 아래 resample 옵션인 Bicubic 에 해당하는 옵션입니다. 

이런건 어떻게 알아내냐구요? 바로 레퍼런스죠. 

먼저 다큐먼트 개체로 진입합니다. 그다음 리사이즈를 해야 하니 resize 라는 용어 근처를 찾아봐야겠죠? 

자 ResizeImage 라는 명령을 찾았습니다. 바로 위에는 ResizeCanvas 라는 명령도 보이네요. 어쨌든 ResizeImage 아래에 어떤 옵션들을 적어야 하는지 설명이 되어 있습니다.

• ResizeImage
  • Width (숫자, 더블형 - 소수)
  • Height (숫자, 더블형 - 소수)
  • Resoluton (숫자, 더블형 - 소수)
  • ResampleMethode (PsResampleMethod)

위에 3개의 옵션은 아시겠죠? 입력해야 하는 데이터의 자료형 입니다. 소수라고 정의 되어 있으니 12.5 이런 값으로 입력이 가능합니다. 그런데 맨 아래는 뭔지 잘 모르시겠죠? 파란색으로 링크 표시가 있으니 클릭해서 들어가 보겠습니다.

이미지를 인터폴레이션 즉, 보간하기 위한방법이라고 나와있군요. 각 숫자별로 보간 방법이 나와 있구요. 일반적으로 포토샵에서 기본으로 설정되어 있는 옵션은 Bicubic 이며 4번에 해당됩니다. 제가 사용한 코드에 4 로 입력하였으니 Bicubic 으로 보간이 된 셈입니다. 

막간을 이용하여 간단하에 각 옵션을 설명 드리자면, (이번 기회에 알아두셔도 좋겠네요.)

• psNoResampling - 보간하지 않음
• psNearestNeighbor - 픽셀경계면의 색상을 섞지 않음 (지글지글거리게 됩니다. 안티 앨리어싱이 안먹은 느낌?)
• psBilinear - 리니어하게 보간을 합니다. 선형보간이라 하는데 그냥 평범한 보간 법이라 보시면 됩니다.
• psBicubic - 선형 보간에서 하나의 축을 더하여 보간을 한 것으로 좀더 자연스러운 보간이 됩니다. (추천)
• psBicubicSharper - bicubic 을 기본으로 하며 좀더 선명한 이미지를 얻을 수 있습니다.(축소할 때 추천)
• psBicubicSmoother - bicubic 을 기본으로 하며 좀더 부드러운 이미지를 얻을 수 있습니다. (확대할 때 추천)

요렇게 필요한 옵션으로 리사이즈를 하시면 됩니다. 보통 Bicubic 으로 하지만 저는 필요에 따라 옵션을 바꾸며 사용합니다. psNearestNeighbor 같은 경우는 어떨때 사용할까요? 3D 텍스처용 맵을 만들어 놓고 리사이즈가 필요할때 해당 옵션을 이용하여 alpha 채널을 리사이즈하면 알파채널 경계 영역이 흐릿해지는 현상을 막을 수 있습니다.

강좌가 좀 딴길로 샜습니다. ^^

끝으로 조금더 컨트롤 하는 예제를 보여드리고 마무리 하겠습니다.

• 지정한 크기와 이름을 갖도록 설정하고 싶다.
• 엑셀에서 배경 색상을 지정하고 싶다.
• 텍스트 레이어를 만들어서 추가하고 싶다.

요정도만 해볼까요?

코드를 작성해보면 아래와 같습니다.

Sub usingPhotoshop()

    Dim psApp As Object
    Dim psdDoc
    Dim bgColor
    Dim fontColor
    Dim cellColor
    Dim txtLayer
    
    Set psApp = CreateObject("Photoshop.Application")
    
    psApp.Documents.Add
    
    Set psdDoc = psApp.ActiveDocument
    
    psdDoc.ResizeImage CInt(Cells(2, 2).Value), CInt(Cells(2, 3).Value), 72, 4
    
    '셀 색상을 HEX 값으로 받아오기'
    cellColor = Right("000000" & Hex(Cells(2, 4).Interior.Color), 6)
    
    'bgColor 라는 SolidColor 개체를 만들어서 Hex -> DEC -> Doble 로 변환하여 적용하기'
    Set bgColor = CreateObject("Photoshop.SolidColor")
    bgColor.RGB.HexValue = cellColor
    
    bgColor.RGB.red = CDbl(WorksheetFunction.Hex2Dec(Right(cellColor, 2)))
    bgColor.RGB.green = CDbl(WorksheetFunction.Hex2Dec(Mid(cellColor, 3, 2)))
    bgColor.RGB.blue = CDbl(WorksheetFunction.Hex2Dec(Left(cellColor, 2)))
    
    '화면 전체 선택한 뒤 색상 칠하기'
    psdDoc.Selection.SelectAll
    psdDoc.Selection.Fill bgColor
    
    '폰트 색상용 색상 개체 만들어 색상 설정하기'
    cellColor = Right("000000" & Hex(Cells(2, 5).Interior.Color), 6)
    
    Set fontColor = CreateObject("Photoshop.SolidColor")
    fontColor.RGB.red = CDbl(WorksheetFunction.Hex2Dec(Right(cellColor, 2)))
    fontColor.RGB.green = CDbl(WorksheetFunction.Hex2Dec(Mid(cellColor, 3, 2)))
    fontColor.RGB.blue = CDbl(WorksheetFunction.Hex2Dec(Left(cellColor, 2)))
    
    '텍스트 레이어 추가해주기'
    Set txtLayer = psdDoc.artlayers.Add
    txtLayer.kind = 2
    txtLayer.Name = "my Text"
    
    '만들어진 텍스트 레이어에 텍스트 추가하기'
    Set txtItem = psdDoc.artlayers("my Text").textitem
    txtItem.Font = "MalgunGothicBold"
    txtItem.Size = 36
    txtItem.Color = fontColor
    txtItem.contents = Cells(2, 6).Value
    
    'PSD 파일로 저장하기'
    psdDoc.SaveAs ("d:\" & Cells(2, 1).Value & ".psd")
    
End Sub

와우 엄청 길어졌네요. 순서대로 주석을 읽어 보시면 내용은 이해가 되실텐데요. 새로운 명령어 들이 많이 나왔죠? 한번 실습한다 생각하시고 따라서 코딩을 해보신 다음 찬찬히 생각해보시면 이해가 되실거에요. 좀 생소한 코드도 있기는 하지만 어렵지는 않습니다. 실행해보면 아래와 같이 됩니다.

샘플 코드 만드는데 생각했던 것보다 오려걸렸네요. 꼭 필요하신 분에게 도움이 되었으면 합니다.

위에 저는 단순히 한줄만 제가 필요한 내용을 엑셀에 기재하여 PSD 파일을 만들었지만 저런 조건들이 이제 수백개가 되어도 자동으로 모두 만들 수 있는 여건이 되었습니다. 반복 문을 조금 응용하면 되겠죠?

이미지를 엑셀로 붙여넣은 포스트 기억나시나요? 해당 이미지를 열어서 셀 크기로 저장한뒤 다시 붙여 넣는 것도 가능하겠고, 여러 이미지를 하나의 포토샵에 레이어로 추가하는 것도 가능하겠으며 이미지에 파일명을 텍스트로 추가하는 것도 역시 쉽게 가능할 것 같습니다.

어렵다고 생각 마시고 바로 도전해 보시기 바랍니다.

엑셀로 포토샵 자동화 가능?

네. 쌉가능입니다. ㅋ

안녕하세요. 오늘은 자신이 작성하였거나 웹에서 다운로드 받은 스크립트를 간단하고 빠르게 실행하는 방법을 알려드리겠습니다. 

우선 스크립트를 실행하는 방법은 몇가지가 있는데 다음과 같습니다.

1. Extend Script Toolkit 으로 열어서 실행하기
2. Photoshop menu-> File -> Script -> Browse.. 로 jsx 파일 열어서 실행하기
3. 프리셋 폴더에 넣어놓고 Photoshop menu-> File -> Script -> 선택하여 실행하기
4. 2번의 과정을 액션으로 기록하여 액션 단축키로 실행하기
5. 3번의 과정을 단축키로 등록하기

요렇게 다섯가지 정도가 대표적인 방법이라 볼 수 있겠습니다.

스크립트를 실행하기까지의 번거로움은 번호 순으로 점점 빠르고 편해진다고 볼 수 있겠습니다.

1번 Extend Script Toolkit 으로 열어서 실행하기 의 경우 스크립트를 직접 작성하는 분들은 매우 익숙한 방법일텐데요. target application 을 선택한뒤 F5 키 또는 실행 버튼을 이용하여 스크립트를 실행하는 방법 입니다. 스크립트 실행시 필요에 따라 코드를 수정해 가면서 실행할 수 있기 때문에 빠르지는 않지만 자주 사용하는 방법입니다.

2번 Photoshop menu-> File -> Script -> Browse.. 로 jsx 파일 열어서 실행하기의 경우 저는 잘 사용하지 않는데요. 코딩이 익숙치 않거나 extend script tool kit 을 아얘 접해보지 않은 분이라면 2번의 과정으로 실행이 가능합니다.

4번은 2번의 과정을 액션으로 기록하여 실행하는 방법으로 간단하게 반복해서 실행을 할 수 있는 방법입니다. 다만 스크립트파일의 위치가 변경되거나 의도치 않게 해당 파일이 수정되면 문제가 발생될 여지가 있습니다.

3번과정 부터는 이제 자세하게 설명을 드리겠습니다.

먼저 자주 사용하게 될 스크립트 파일 (jsx 파일)을 준비한뒤 아래의 폴더에 복사해서 넣어 주세요.

스크립트 파일을 포토샵 설치 폴더 내 프리셋 폴더에 복사해 넣습니다. 경로는 다음과 같습니다.

C:\Program Files\Adobe\Adobe Photoshop CS6 (64 Bit)\Presets\Scripts

해당 폴더에 실행할 스크립트 (저는 이전 강좌에서 만들었던 moveToCenter.jsx) 파일을 복사해서 넣습니다.

만약 이때 포토샵이 켜져 있는 상태였다면 껏다가 다시켜주어야 하고 아니라면 포토샵을 실행해 봅시다.

포토샵을 실행한 뒤 File -> Script 메뉴에 가보면 해당 스크립트 파일명이 아래와 같이 보이게 됩니다.

이제 해당 메뉴을 선택하게 되면 바로 스크립트가 실행이 되게 됩니다.

그럼 좀더 빠른 실행을 위하여 단축키로 등록하는 방법을 알아 보겠습니다.

아래와 같이 상단 메뉴바에서 Edit -> keyboard shortcut 메뉴로 진입합니다.

그러면 단축키 설정을 할 수 있는 창이 표시됩니다.

설정 방법은 간단 합니다. 단축키를 등록할 기능이 어디에 있었죠? 네. 바로 File -> script -> moveToCenter 였죠?

동일하게 찾아가봅니다. File 부분을 눌러 확장시켜서 아래로 드르륵드르륵 내리다보면 원하는 녀석이 보일겁니다. 

네. 찾았습니다.

저는 Ctrl + Alt + / 로 단축키를 설정해 보겠습니다.

이렇게 하고 OK 를 누르게 되면 다음부터는 "Ctrl + Alt + /" 키를 누르게 되면 현재 선택된 레이어가 화면의 중앙으로 이동이 되게 됩니다. 아주 빠르게 실행이 가능하죠. 

그런데 만약. 본인이 설정한 단축키가 기존에 이미 할당이 되어있는 경우가 있을 수 있습니다. 그런경우 아래와 같이 경로창이 표시됩니다.

아래쪽에 경고 마크와 표시된 내용을 읽어 보면 이런 내용입니다. "Alt + Ctrl + C' 는 이미 사용중인 단축키 라는 겁니다.  Canvas Size 를 조정하는 기능에 대한 단축키라는군요. 만약 Accept 를 누르게 되면 기존 단축키는 사라지고 현재 적용한 기능에서 해당 단축키가 동작을 하게 됩니다. 기존 기능이 자주 사용하는 기능이어서 변경되면 안된다면 다른키를 찾아 보면 됩니다. 저처럼 평소 사용하지 않던 키들 중에 Ctrl, Alt 키를 조합하며 찾다보면 경고창이 없는 비어있는 단축키 조합을 발견하게 되어 등록하여 사용하면 되고요. 기존에 사용하는 단축키이지만 내가 사용하지 않는 기능이라면 과감히 Accept 를 눌러 변경해주면 됩니다.

자 이제 유용한 스크립트를 빠르게 동작하는 방법을 알아 보았습니다.

업무 시간을 1초라도 줄일 수 있다면 도전해보는 것은 어떨까요?

2020/12/03 - [DEV/Adobe Script] - [illustrator script] 일러스트도 스크립트가 되나요?