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

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

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

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

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] 일러스트도 스크립트가 되나요?

안녕하세요. 오늘은 선택된 레이어를 화면의 중앙으로 이동시키는 포토샵 스크립트를 작성해 보겠습니다. 

와이프가 한동안 쇼핑몰 상세페이지 디자인 작업을 재택근무 형식으로 했었는데요. 옆에서 작업하는 것을 보니 가장 많이 하는 반복 작업중에 하나가 불러들인 이미지를 리터칭 한뒤 화면의 중앙으로 이동시키는 작업이었습니다. 포토샵에 기본적으로 정렬 기능이 있기는 하지만 기준이 되는 다른 개체를 함께 선택해주어야 한다든가 하는 번거로움이 있어 보이더군요. 

상세페이지 하나에 정말 어마어마하게 많은 사진이 올라가기도 하기 때문에 이런 단순 반복 작업을 빠르게 처리할 수 있게 되면 매우 효율이 높아지게 됩니다. 그래서 얼른 만들어 주었습니다. 스크립트를 실행하면 현재 레이어의 이미지가 화면의 중앙에 똭! 위치하게 말이죠.

먼저 코드를 작성하려면 포토샵 스크립트에서 제공하는 두가지 명령을 알아야 합니다.

• Layer.bounds
  return :  [LEFT_X , TOP_Y, RIGHT_X, BOTTOM_Y ]

현재 레이어의 이미지에 해당되는 영역정보를 가져오는 프라퍼티 입니다. 해당 명령을 이용하여 이미지의 좌상단 좌표와 우하단 좌표를 알수 있으며 결과 값은 배열로 리턴됩니다.

• Layer.translate(deltaX, deltaY)

이 코드는 해당 레이어를 이동시켜주는 매소드 입니다. deltaX 만큼 가로로 이동되며 deltaY만큼 세로로 이동됩니다.

자 중요한 코드는 다 알았습니다. 코딩을 해보죠.

// 포토샵의 unit 을 Pixel 로 설정한다. 유닛이 다르면 전혀 다른 결과가 나오게 된다.
preferences.rulerUnits = Units.PIXELS

var cDoc = app.activeDocument

//현재 활성화된 레이어를 cLyr 라는 변수에 저장함
var cLyr = cDoc.activeLayer

// layer.bounds
// 현재 레이어의 바운드 박스 영역 [좌측끝 X, 상단 Y, 우측 끝 X, 하단 Y] 의 순서로 배열 형태의 결과를 받는다.
var cb = cLyr.bounds

// 이미지의 넓이
var imgWidth = cb[2] - cb[0]

// 이동해야할 거리(deltaX)를 구해봅니다.
// 다큐먼트 전체의 중앙위치 - 이미지의 넓이의 반 ==> 이동해야할 이미지의 최종 좌측 끝 위치
// deltaX = 이동해야 할 이미지의 최종 좌측 끝 위치 - 현재 이미지의 좌측 끝 위치
var deltaX = (cDoc.width / 2) - (imgWidth / 2) - cb[0]

// 화면의 중심으로 이동 
// Layer.translate(deltaX, deltaY)
cLyr.translate(deltaX,0)

간단하죠?

코드안에 주석으로 설명을 남겨 두었으니 읽어 보시면 이해가 되실 것 같습니다. 

끝부분에 deltaX 를 구하기 위하여 간단한 계산이 포함되어 있습니다.

하는김에 머리도 풀 겸 몇가지 deltaX 를 구하는 계산식을 추가해 볼까요?

• 이미지를 화면 좌측 끝으로 보내기 위한 deltaX
• 이미지를 화면 우측 끝으로 보내기 위한 deltaX
• 이미지를 화면 가로 영역에 대한 비율 (%) 로 이동시켜 위치하기 위한 deltaX
• 비율로 이동할 경우 화면 바깥으로 빠져나가지 않도록 하기 위한 코드

요정도면 화면 내에서 레이어를 자유롭게 이동시킬 수 있을 것 같습니다.

코드로 한번 볼까요?

//현재 레이어의 영역을 먼저 구해봅시다.
var cb = cLyr.bounds;

// 이미지의 넓이
var imgWidth = cb[2] - cb[0];


// 이미지를 좌측 끝으로 이동하기 위한 deltaX
deltaX = cb[0] * -1 ;


// 이미지를 우측 끝으로 이동하기 위한 deltaX
deltaX = cDoc.width - imgWidth - cb[0]  // imgWidth = cb[2] - cb[0];



// 이미지의 위치를 화면 기준으로한 percent 로 입력 받아 이동하기 위한 deltaX
var psnt = 30;
deltaX = cDoc.width * psnt / 100.0 - (imgWidth / 2) - cb[0];


// 이미지가 화면 밖으로 나가지 않도록 해보자
if ((deltaX + cb[0]) < 0)
{
    // 이미지가 화면 좌측 밖으로 나간다면?
    deltaX = cb[0] * -1;
}else if ((cb[2] + deltaX) > cDoc.width)
{
    // 이미지가 화면 우측 밖으로 나간다면?
    deltaX = cDoc.width - imgWidth - cb[0];
}

세로의 경우도 조금만 응용하면 가능하겠죠?

요렇게 하면 간단한 코드로 레이어를 화면의 중앙으로 옮기는 것이 가능합니다.

이상 오늘의 스크립트 "레이어를 화면 중앙으로 가져오기" 를 마치겠습니다.

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

요렇게 만들어진 스크립트를 단축키에 등록해놓고 사용하시면 빠르게 해당 기능을 적용하는 것이 가능합니다.

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

포토샵으로 셀렉션을 지정하고 싶다면?

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

이번 강좌에서는 스크립트를 이용하여 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] - [포토샵스크립트] 매직완드 기능 스크립트로 실행하기