개발하는 디자이너의 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] - [포토샵스크립트] 레이어 컨텐츠 영역 선택하기

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

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

이번 강좌에서는 스크립트를 이용하여 selection 을 만들어 보고 만들어진 selection 영역에 색상을 fill 하는 스크립트를 작성하여 보도록 하겠습니다. 단순한 기능이지만 알아두면 유용하게 사용될 수 있답니다.

GUI  를 하시는 분들 중에는 레이어의 영역을 가이드문서에 작성하기 위하여 별도의 레이어에 영역정보만 박스를 만들어서 컬러를 채워넣는 경우가 종종 있는데요. 이런 상황에 아주 유용하게 사용될 수 있을 듯 합니다.

먼저 이번에 사용할 개체는 

• Document.Selction
• Selection.fill

이 두가지 요소 입니다.

스크립트를 이용하여 셀렉션을 만들어 줄때 주로 사용하는 방법은 바운드 박스 영역을 설정해 주는 방법입니다.

위와 같은 형태의 사각형 영역을 선택한다고 하면 네 점에 해당되는 각 좌표를 이용하여 바운드 박스를 생성해 주어야 하는데요. 

배열 개체로 아래와 같이 입력이 되어야 합니다.

boundbox = [A, B, C, D, A]; // 다섯개의 점을 이용하여 박스를 만들어 주는 것이죠.

각 점은 [x, y] 의 형태로 구성된 좌표데이터가 입력이 되어야 합니다.

즉, 

boundbox = [ [A_x,A_y] , [B-x, B-y] , [C_x, C_y] , [D_x, D_y] , [A_x, A_y] ] ;

와 같은 형태로 입력이 되면 됩니다.

임의의 좌표를 이용하여 셀렉션을 만들어보면 아래와 같습니다.

// 현재 활성화된 다큐먼트를 cDoc 에 저장
var cDoc = app.activeDocument;
	
// 기존 설정된 선택영역이 있는 경우 해제하여줌
cDoc.selection.deselect();
	
var cSelection = cDoc.selection.select([[10,10],[50,10],[50,30],[10,30],[10,10]]);

이런 방식으로 영역을 선택하는 것이 가능한데요.

약간의 코드 수정을 하면 좀더 쉽고 유연하게 선택영역을 만드는 것이 가능합니다.

지정된 좌표를 중심으로 지정한 반경만큼 선택하는 코드

// doc 는 선택영역을 생성할 도큐먼트를, pt는 중심 좌표를, Width 는 반경을 지정
function fill_rect(doc, pt, width) 
{
	var c = width*0.5;
	
	doc.selection.deselect();
	doc.selection.select([	
	[pt[0]-c,pt[1]-c],
	[pt[0]+c,pt[1]-c],
	[pt[0]+c,pt[1]+c],
	[pt[0]-c,pt[1]+c],
	[pt[0]-c,pt[1]-c]
	]);
}

// 64,64 를 중심으로 가로세로 32 픽셀의 선택영역을 생성

fill_rect(app.activeDocument, [64,64], 32);

지정한 좌표를 기준으로 폭과 높이를 지정하여 선택영역을 생성하는 함수

// doc 는 선택영역을 생성할 도큐먼트를, pt는 중심 좌표를, Width 는 반경을 지정
function fn_fill_rect_byWidth_Height(doc, pt, width, height) 
{
	doc.selection.deselect();
	doc.selection.select([	
	[pt[0]      ,pt[1]       ],
	[pt[0]+width,pt[1]       ],
	[pt[0]+width,pt[1]+height],
	[pt[0]      ,pt[1]+height],
	[pt[0]      ,pt[1]       ]
	])
}

//[0,0]을 기준으로 가로 640, 시로 480 크기의 선택영역을 만들기

fn_fill_rect_byWidth_Height(app.activeDocument, [0,0], 640, 480);

이와 같이 바운드 박스 형식을 이용하여 선택영역을 만들때 입력되는 좌표의 값을 수정해주면 원하는 형태의 선택영역을 손쉽게 만들어 낼 수 있습니다. 본인이 늘 사용하는 방식, 본인 업무에 맞는 방식으로 코드를 작성하여 사용이 가능해 지겠죠.

어도비 사이트에 가시면 레퍼런스가 배포되어 있습니다. 어도비 사이트에서 배포되는 스크립트 레퍼런스에서 Selection 개체가 어떤 프라퍼티를 갖고 어떤 메소드를 갖는지 확인해 보시면 응용할 수 있는 요소가 아주 많다는 것을 알 수 있습니다.

다음번에 또 유용한 스크립트를 가지고 다시 포스트를 올리겠습니다.

감사합니다.

스크립트를 이용하여 레이어의 컨텐츠 영역을 선택하고 싶다면?

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

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

2020/02/19 - [DEV/Adobe Script] - [포토샵스크립트] 파일을 이미지로 저장하기 save option 설정

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

안녕하세요 이번 강좌에서는 photoshop 에서 특정 위치 (x, y) 에 해당하는 픽셀의 컬러값을 가져오는 스크립트를 작성해 보겠습니다.

포토샵은 너무나 훌륭한 2D 그래픽 편집 툴임에도 불구하고 막상 스크립트에서는 비트맵 관련 정보를 컨트롤 하는것이 쉽지 않다는 치명적인 약점도 가지고 있습니다. 

오늘은 그래서 간단한 방법으로 특정 좌표에 해당하는 픽셀의 색상 값을 구하는 스크립트를 알려드리려 합니다.

Document.colorSamplers 

라는 개체를 이용하여 컬러 값을 구하는 방법을 알아보겠습니다.

// 현재 활성화된 다큐먼트를 cDoc 에 저장
var cDoc = app.activeDocument;

//1,1 에 해당하는 컬러값을 가져오기 (실제 좌표는 -1 을 한 좌표를 입력합니다)
var pointSample = cDoc.colorSamplers.add([0,0]);

// colorSamplers로 부터 얻어온 색상 값을 cColor 라는 변수에 저장
var cColor = pointSample.color

// cColor 로부터 RGB를 각각 나누어 배열에 담아줍니다.
var rgb = [cColor.red, cColor.green, cColor.blue];

//생성한 포인트 샘플러는 제거함
pointSample.remove();
    
    
// 콘솔 창에 출력
$.writeln("R:" + rgb[0] + " , " + "G:" + rgb[1] + " , " + "B:" + rgb[2])

요렇게 하면 특정 위치에 해당하는 픽셀의 좌표값을 구해오는 것이 가능합니다.

colorSamplers 개체는 별도로 레이어를 구분하여 값을 취득하는 것이 아니기 때문에 현재 어떤 레이어가 선택이 되어있건 상관 없이 값을 가져오는 것이 가능합니다.

만약 1,1 이 아닌 원하는 위치의 좌표를 언제든 입력하여 가져오기 위하여 위의 코드를 함수로 만들면 아래와 같습니다.

function fn_getColorByCoord (xx, yy) // 주어진 좌표에 해당하는 색상값 구하는 함수
{

	var cDoc = app.activeDocument;
	var pointSample = cDoc.colorSamplers.add([xx-1,yy-1]);
	var cColor = pointSample.color
	var rgb = [cColor.red, cColor.green, cColor.blue];
    
	pointSample.remove();
    
    // 결과값으로 구해진 색상값을 리턴
	return rgb
}

// 실제 함수를 사용할 때는 아래와 같이 사용
// x: 323, y: 225 위치의 색상값을 구하고 싶을 때

fn_getColorByCoord (323,225)

요렇게 함수를 정의하여 원하는 위치의 색상 값을 언제든지 구해오는 것이 가능합니다.

컬러샘플러를 이용하여 이런 것도 가능합니다.

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

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

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

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