개발하는 디자이너의 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] - 포토샵 스크립트 레퍼런스, 도움말 사용하기

그럼 이만~

이번 포스트에서는 매직완드를 스크립트로 실행하는 방법을 설명 드리겠습니다.

포토샵의 매직 완드는 일반적인 스크립트로는 작성이 불가능하기 때문에 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) 

참고로 x, y 좌표 값은 -1 한 값을 입력하시면 됩니다.

사용하시면서 궁금하신 내용이 있으시면 뎃글 남겨주세요~

감사합니다.

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

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

이럴때 단축키로 [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] 포토샵 스크립트로 특정 영역 선택하기

안녕하세요. 제가 포토샵 스크립트를 이용하여 PSD 파일내의 모든 레이어를 자동으로 하위폴더 구조를 유지하며 저장할 수 있는 스크립트를 만들어서 올렸었는데요. 바로 아래 링크에서요.

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

블로그에 방문 주신 분께서 레이어 자동 저장 기능에 해당 레이어 크기로 이미지가 저장 되었으면 좋겠다는 의견을 주셔서 한번 만들어 보았습니다.

사실 사용하는 분마다 차이가 있을 것 같은데요. 아마 레이어의 크기로 저장되는 기능이 꼭 필요한 분도 계실 거라 생각되어 별도로 페이지를 하나 만들었습니다.

전체 스크립트는 큰 차이가 없으며 현재 레이어의 크기를 파악하고 그 크기로 저장하는 방법만 추가하면 될 것 같습니다.

아래의 내용을 추가할 계획입니다.

• 현재 레이어의 크기 (가로, 세로) 를 구해본다      : 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 일 경우 전체 도큐먼트 크기로 저장이 되게 하여 기존의 방식이 필요한 분들도 하나의 스크립트로 사용할 수 있도록 하였습니다.

이렇게 해서 버전 3 가 되었네요. 좋은 의견 주신 '포도' 님께 감사드립니다.

이전의 레이어 자동 저장 스크립트 포스트와 레이어 관련하여 공부할 만한 포스트를 링크 합니다.

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

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

공감은 작성자에게 큰 힘이 된답니다. 아시죠? ^^

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

좀 생뚱 맞을 수도 있는데 이번에 소개해드릴 강좌는 글자의 밝기를 알아보는 스크립트를 소개해 드릴까 합니다. 

글짜에 무슨 밝기가 있다는 건가 하실수 있겠는데요. 

바로 이런 표현을 하기 위하여 필요한 것이죠.

각 단위 글자에 밝기를 분석하여 이미지의 픽셀에 매칭해보려는 것 입니다.

이렇게 하기 위하여 필요한 것이 글자의 밝기를 분석해서 어떤 글자가 가장 밝고 어떤 글자가 가장 어두운 글자인지 알아야 하는 것이죠.

정확히는 글자가 어둡다기 보다는 단위면적에 동일한 크기로 글자를 표시했을때 어두운 영역이 가장 많은 글자가 가장 어두운 글자가 되겠습니다.

제가 사용할 글자는 총 85 개로 알파벳 대소문자 및 특수기호들 입니다.

일단 생각나는데로 적은 글자는 abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890[}±.:,/~';*-=+!@?>\#$%^& 입니다.

이 글자들을 분석하여 어떤 글자가 가장 밝고 어떤 글자가 가장 어두운지 찾아내야 합니다.

먼저 아래와 같이 준비를 해놓겠습니다.

• Photoshop 에 10 x 10 짜리 다큐먼트를 하나 만든 뒤 텍스트 메뉴로 글자를 하나 입력한다.
• 폰트는 Consolas (무료), 사이즈는 10 pt 

그다음 스크립트를 이용하여 분석을 진행해보겠습니다.

다큐먼트의 텍스트 아이템의 글자를 위에 준비된 글자로 하나씩 바꿔가면서 전체 픽셀의 밝기를 모은 뒤 배열에 저장하고 저장된 배열의 값을 작은 수에서 큰수로 재배열을 해주면 되겠습니다. 

개념 적으론 별거 없죠?

코드를 보시죠. 주석을 잘 따라 읽어 보시면서 봐주세요.

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

var letVals = [];

var cDoc = app.activeDocument;

// 컬러샘플러가 이미 있을 수 있으니 제거 해준다.
cDoc.colorSamplers.removeAll();

// pointSample 라는 컬러 샘플러를 하나 생성해 주자. 
// pointSample 라는 개체를 이용하여 컬러를 수집할 예정임.
var pointSample = cDoc.colorSamplers.add([1,1]);

// 미리 주어진 문자열을 하나씩 분석하여 밝기와 해당 글자를 배열에 저장해 주자.
for (var k=0; k < cCount; k++)
{
    cLtr = ltrSet.charAt(k);
    cDoc.layers[0].textItem.contents = cLtr;
    cBrt = getImageBrightness(); // 아래쪽에 글자의 밝기를 구하는 함수를 이용하여 밝기 분석
    letVals.push([cBrt, cLtr]);  // 구해진 밝기를 해당 문자와 함께 배열에 저장함
}

// 저장된 배열을 밝기 순으로 재정렬한다.
letVals.sort(arrayfn_chkBrt);

//finalLtrSet 라는 변수에 재배열된 글자를 순서대로 적어 준다.
for (var k=0; k < cCount; k++)
{
    finalLtrSet += letVals[k][1]
}

//밝기 순으로 재정렬 된 글자들 출력
$.writeln(finalLtrSet)

// 구해진 최종 결과 문자 셋 가장 좌측이 밝은색, 가장 우측이 어두운 색 되시겠습니다.
//var lset = ".-':,;>^!~Lci/*1l?zC+±tsr2=JIT}[x75FvZ3eSYEfukjnayKoPXV9h6qdRp4bAG$8wDUO&%#Bg0mHQMWN@"

pointSample.remove();

// 배열의 순서를 재정렬 하기 위한 함수. 배열의 첫번째 값을 비교하여 작은수를 앞으로 보낸다.
function arrayfn_chkBrt(a,b)
{
    if (a[0] > b[0])
    {
        return -1;
    }
    else if (a[0] < b[0])
    {
        return 1;
    }
    else
    {
        return 0;
    }
    
}

// 이미지의 모든 픽셀의 밝기를 더한뒤 전체 픽셀수로 나누어 평균 값을 구한다. 10 x 10 으로 고정함 
function getImageBrightness()
{
    var cDoc = app.activeDocument

    var brightAll = 0;

    for (var yy = 0; yy < 10; yy++)
    {
        for (var xx = 0; xx < 10; xx++)
        {
            pointSample.move([xx,yy]);
            brightAll += pointSample.color.hsb.brightness;            
        }
    }
    brightAll = brightAll / 100
    
    return brightAll;
}

 요렇게 하면 주어진 글자들을 이용하여 밝기 순으로 재정렬 된 문자열을 받을 수 있습니다. 

중간에 제가 주석으로 해놓은 부분이 최종적으로 $.writeln() 을 통해 출력해본 결과 입니다.

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

이렇게 구해진 문자열을 이용하여 실제이미지에 매칭하는 작업을 하면 됩니다.

이번 강좌에서는 조금 생소한 코드들이 좀 나왔습니다. 바로 colorSampler 와 배열을 재정렬할때 사용한 배열 함수 입니다. 

colorSampler 는 바로 포토샵의 스포이드 (color picker) 기능과 같습니다. 

바로 요녀석인데요. 특정 픽셀의 컬러를 가져오는 기능을 수행합니다. 

우측에 보면 HSB , RGB, Lab, CMYK, 그리고 Hex 값으로 출력된 컬러 정보가 보여지는데요. colorSampler 역시 완전히 동일 합니다. 

레퍼런스에 보면 아래와 같이 나와 있고요

이 녀석의 프라퍼티 부분을 보면 SolidColor 라는 정보를 color 라는 프라퍼티를 통해 접근이 가능한 것을 알 수 있습니다. 한번 Solid Color 부분으로 가볼까요?

링크를 타고 들어가 보면 아래와 같이 Solod Color 에 대하여 나와있습니다.

여기에 보면 위에 소개해 드렸던 cmyk, gray, hsb, lab, rgb 등의 프라퍼티를 이용할 수 있는 것을 알 수 있습니다. 제가 이번 스크립트에서 픽셀의 밝기를 받아온 것은 바로 hsb (hue, saturation, brightness) 를 이용한 것입니다. 

pointSample.move([xx,yy]);
pointSample.color.hsb.brightness;

이렇게 컬러샘플러의 위치를 필요한 곳으로 이동시키고 필요한 값을 얻어오는 것이죠.

다른 하나는 바로 배열을 재배열 하는 함수 입니다.

Array.sort ( sort function ) 인데요. 바로 sort function 에 해당하는 함수를 사용자가 만들 수 있다는게 특징입니다.

일반적으로 sort (정렬) 이라 하면 숫자가 낮은것에서 높은것으로 또는 높은 것에서 낮은 것으로 정렬 되는 것을 상상 할 수 있겠지만 별도의 정렬 함수를 이용하면 아주 새로운 정렬 규칙을 만들어 내는 것이 가능합니다.

저는 배열의 각 인자들이 두개의 값을 갖는 또다른 배열이기 때문에 배열 인자의 내부 값중 첫번재 (밝기) 를 이용하여 정렬을 한 것이죠. 첫번째 인자는 미리 계산해 두었던 글자들의 밝기 값이기 때문에 해당 값을 이용하여 정렬을 해주면 글자가 가장 밝은 글자부터 가장 어두운 글짜까지 순차적으로 정렬이 되는 것 입니다.

제가 만든 문제셋 말고 본인이 직접 문자셋을 준비하여 정렬된 순차적 문자열을 구해보시는것도 좋을 것 같습니다. 알파벳은 문자가 헐렁하여 아주 어두운 픽셀에 적용되었을 때 효과가 덜한 듯 합니다.

제가 구해보니 알파벳 중 W N @ 가 가장 어두운 글자였으나 한글이라면 "뚫" 이런 글자도 가능하지 않습니까? 또 한글이나 영문이 아니더라도 문자표에 가보시면 ᵺ ▓ ■ 이런 문자들도 있으니 더 어두운 색상 표현에 유리할 수 있습니다. 전 85 글자여서 0 ~ 255 인 밝기 값을 3으로 나누어 사용하였는데요. 이렇게 다양한 글자를 이용한다면 0~255 까지의 글자로 표현도 가능할 것입니다.

한번 도전해 보세요. 궁금하신 부분이나 잘 안되는 것은 질문해주시면 답변 드리겠습니다.

그럼 이만~

본 스크립트는 아래 포스트에서 실제 어떻게 적용되는지 확인할 수 있습니다.

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

해당 스크립트를 이용하여 제작한 핸드폰 배경화면

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