반응형

네! 당연히 됩니다.

일러스트레이터에서 스크립트를 사용할 수 있게 되면 진정 놀라운 결과들을 만들어 낼 수 있습니다. 사람이 손으로 하기에는 정말 귀찮은 작업들을 가능하게 만들어 줍니다.

이런 이미지를 손으로 만들어 본다고 치면요. 일단 배치되는 모든 사각형의 각도도 랜덤이고, 사각형의 색상이 하나도 연속으로 동일한게 없다면요.. 머리가 벌써 아파오죠?

하지만 스크립트를 이용하면 저것보다 수백배 복잡한 것도 손쉽게 해낼 수 있답니다.

막상 해보면 일러스트야 말로 진정한 노가다 툴이 아닐 수 없습니다. 

패스 하나하나 손으로 그려야 하며 그려야 하는 패스가 정형화 된 스타일일 수록 피곤해 집니다.

 

 

 

자 그럼 일러스트 스트립트 어떻게 해야 할까요?

일단 포토샵스크립트와 동일하게 javascript 를 기반으로 동작합니다. MAC OS 에서는 apple script 를 지원하고 WindowOS 에선 VBA 도 지원하지만 공용으로 사용할 수 있는 javascript 가 적당해 보입니다. 문법도 포토샵 스크립트와 크게 다르지 않으니 일단 javascript 의 기본을 알고 계시면 금방 시작하실 수 있습니다.

 

일러스트는 기반이 벡터 그래픽이다 보니 어쩌면 스크립트라는 형식 자체가 포토샵보다 적용 가능한 부분이 많습니다. 포토샵이 이미지를 메모리에 얹어 놓고 메모리 안의 이미지를 이미지 프로세싱을 통해 변화를 주다 보니 스크립트와 같이 성능에 제약적인 개발언어로 할 수 있는게 많이 없습니다. 하지만 일러스트는 모든 데이터가 벡터 그래픽이다 보니 아주 많은 영역에 대하여 스크립트로 할수 있는 여지가 있는 것이죠.

 

먼저 extend script toolkit 을 준비하시고요. 

그 다음은 전과 마찬가지로 필요한 액션을 작성해 나가시면 됩니다. 포토샵 스크립트와 비슷 한 느낌 입니다.

var cDoc = app.activeDocument;
alert(cDoc.name)

비슷하지요? 다만 태생이 포토샵과 다르다 보니 스크립트를 작성하는 방식이 약간은 다릅니다.

포토샵은 app 안에 document 개체를 찾고 그 안에 layer 또는 Artlayer 로 접근하여 layer 안의 오브젝트의 속성을 조정하는 것이 일반적인 방식인데요. 일러스트는 app 안에 document 를 찾는 것 까지는 같지만 레이어로 접근하지 않고도 스크립트에서 바로 개체로 접근이 가능합니다.

var cDoc = app.activeDocument;
var mItem_01 = cDoc.pageItems[0]
var mItem_02 = cDoc.layers[0].pageItems[0]

 

또 레이어 안에 shape 의 종류만 해도 pageItem, pathItem, compoundPathItem, GroupItem 과 같이 다양한 개체가 있으며 그외에도 textItem 이나 다양한 개체가 존재합니다. 

또 위에서 설명드린 개체들 중 pageItem 은 모든 개체를 통털어 일컬을 수 있는 녀석이기도 합니다.

예를들면 layer 안에 두개의 groupItem 과 한개의 pathItem 이 있다고 했을때 이것은 3개의 pageItem 이 있는 것으로 처리되기도 합니다. 즉 pageItem 이라는 개념은 종류를 불문하고 어떤 하나의 속성을 갖는 개체로 정의되는 것이지요. 그래서 코딩할 때도 각각의 개체의 타입이 무엇인지 정확히 파악하여 코딩을 해야 합니다.

var cDoc = app.activeDocument;
s = cDoc.selection

for (var i = 0; i < s.length; i++)
{
    var cItem = s[i];
    if (cItem.typename == "pathItem")
    {
        alert("pathItem")
    }
    else if (cItem.typename == "GroupItem")
    {
        alert("groupItem")
    }
    else
    {
        alert("another Item")
    }
 }

선택한 개체들이 어떤 종류의 개체인지 확인하는 간단한 코드 예제.

위에 열거한 개체들 중 가장 하위 개념인 pathItem 은 그안에 PathPoints 라는 Pathpoint 들의 그룹을 갖습니다. PathPoint 는 예상하신 것처럼 우리가 알고 있는 점 을 말하지요. PathPoint 안에도 anchor 와 leftDirection, rightDirection 과 같은 속성들도 구성되므로 상당히 체계적으로 코드를 작성해야 정상적으로 동작이 됩니다.

예를 들면 패스 내에 있는 하나의 점은 다음과 같이 정의 되는 것이죠.

var cDoc = app.activeDocument;
var cLyr = cDoc.layers[0]; // layer 개체
var cItem = cLyr.pageItems[0]; // pageItem 개체
var cPath = cItem.pathItems[0]; // pageItem 이 GroupItem 이라는 가정하에.. pathItem 개체
var firstPoint = cPath.pathPoints[0]; // pathPoint 개체
var cPt = firstPoint.anchor; // Array (x, y) = [x, y] 와 같은 2개 짜리 1차원 배열
var cPt_leftHandle = cPt.leftDirection; // Array (x, y) = [x, y] 와 같은 2개 짜리 1차원 배열
var cPt_rightHandle = cPt.rightDirection; // Array (x, y) = [x, y] 와 같은 2개 짜리 1차원 배열

 

일러스트는 벡터 그래픽이다 보니 자동으로 뭔가를 그리려면 벡터 연산이 필수 입니다.

중고등학교 수학을 열심히 했다면 할만 하지만 놀았다면 어려운 수준의 수학적 지식이 필요합니다. 간단한 삼각함수와 2차원 평면에서의 함수와 도형 등의 주제에 대한 이해가 조금은 필요합니다.

어쩌면 선형 대수학과 같은 고급 수학에 정통한 분들은 아주 빠르게 습득이 가능할 겁니다.

프로그래밍을 배우려면 어쩔 수 없는 부분이니 이참에 공부해 보시는 것도 괜찮습니다. 너도 예체능계를 나왔기 때문에 수학은 완전 잼병이었는데요, 막상 필요하니 하게 되더랍니다.

 

어쨌든 일러스트 스크립트 크게 어려울 것은 없으니 이번에 마음 잡고 도전해 보시기 바랍니다.

저도 본 블로그를 통해 틈틈히 요긴한 강좌를 올리도록 하겠습니다.

 

그럼 이만~

 

2019/06/12 - [DESIGN] - 일러스트 이미지 소스

 

일러스트 이미지 소스

일러스트레이터 스크립트로 만들어진 이미지 몇장 올린다. 다각형을 화면에 배치한 이미지이며 필요한 경우 마음 껏 사용해도 됨 원본 벡터 이미지도 올리니 필요하면 가져가시고 커스터 마이

diy-dev-design.tistory.com

2019/12/16 - [DEV/MAX SCRIPT] - 3DS MAX SCRIPT 강좌?? 무작정 시작하기 - 디자이너 추천

 

3DS MAX SCRIPT 강좌?? 무작정 시작하기 - 디자이너 추천

개발이라 하면 두드러기가 나는 디자이너 들이 있습니다. 아니 대부분 그렇죠. 이글을 읽고 계신 본인도 그러하다면, 그런데 스크립트로 무언가를 하고 싶다면 어쩌겠습니까.. 배워야지요. 그래

diy-dev-design.tistory.com

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

 

[포토샵 스크립트] 강좌, 무작정 따라해보기

어도비 포토샵은 자체 스크립트를 이용하여 다양한 기능을 수행할 수 있는 툴을 지원합니다. 언어는 자바 스크립트 이며 작성된 자바스크립트를 포토샵에서 실행하는 방법과 Extend Script Tool Kit

diy-dev-design.tistory.com

 

반응형
반응형

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

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

 

말하자면 이런거죠.

 문자를 이용하여 사진을 표현한 모습

 

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

문자(글자)를 이용하여 사진을 표현한 모습

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

 

신기하죠?

 

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

 

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

한번 적어 볼까요?

 

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

 

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

 

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

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

 

[포토샵스크립트] 글자들을 밝기 순으로 배열해 보기

좀 생뚱 맞을 수도 있는데 이번에 소개해드릴 강좌는 글자의 밝기를 알아보는 스크립트를 소개해 드릴까 합니다. 글짜에 무슨 밝기가 있다는 건가 하실수 있겠는데요. 바로 이런 표현을 하기 위하여 필요한 것이..

diy-dev-design.tistory.com

 

제가 사용한 글자는 

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();

 

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

이렇게요.

 

글자로 만들어진 그림 (가로 24px)

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

글자로 만들어진 매트릭스 포스터 (가로 32px)

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

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

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

 

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

Galaxy S10 Series (1080x2280) wallpaper MATRIX RELOADED - NEO

 

Galaxy S10 Series (1080x2280) wallpaper MATRIX RELOADED - TRINITY

 

 

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

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

 

[wallpaper] Galaxy s10 series 배경화면 - MATRIX RELOADED

타이포 그래픽으로 제작한 갤럭시 S10 시리즈 배경화면 입니다. 문자의 이미지를 문자로 형상화 한 그래픽을 이용하여 배경화면을 만들어 보았는데요. 매트릭스의 경우 영화의 메인 컨셉 이미지와도 매칭되는 느낌..

diy-dev-design.tistory.com

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

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

 

[wallpaper] Galaxy S10 배경화면 '존윅'

화끈함의 끝판왕 존윅 (JOHN WICK) 배경화면을 만들어 보았습니다. 아직 3편은 보지 못하였는데요. 빨리 보고 싶은 영화 1순위에 있다고해도 과언이 아닌 영화입니다. 존윅의 처참한 상황과 분위기를 폰 배경화면..

diy-dev-design.tistory.com

 

반응형
반응형

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

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

  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 메뉴에 가보면 해당 스크립트 파일명이 아래와 같이 보이게 됩니다.

Script 메뉴 안에 추가한 스크립트가 표시된다.

 

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

 

 

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

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

키보드 단축키 설정 메뉴

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

포토샵 단축키 설정 창

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

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

네. 찾았습니다.

추가한 스크립트의 단축키가 설정되어 있지 않은 상태

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

컨트롤키 + 알트키 + / 키로 단축키를 설정한 상태

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

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

Alt + Ctrl + C 를 등록하여 하였으나 기존에 다른 기능이 사용하는 단축키라는 경고가 표시되었다

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

 

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

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

 

뎃글, 공감 은 블로그 작성자에게 큰 힘이 된답니다. 
도움이 되었다 생각되시면 클릭!!  부탁드려요~

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

 

[illustrator script] 일러스트도 스크립트가 되나요?

네! 당연히 됩니다. 일러스트레이터에서 스크립트를 사용할 수 있게 되면 진정 놀라운 결과들을 만들어 낼 수 있습니다. 사람이 손으로 하기에는 정말 귀찮은 작업들을 가능하게 만들어 줍니다.

diy-dev-design.tistory.com

 

반응형
반응형

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

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

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

이미지를 간단하게 화면의 중앙으로 이동한 모습

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

  • 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 용 파노라마 사진 자르기

 

[포토샵스크립트] Instagram 용 파노라마 사진 자르기

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

diy-dev-design.tistory.com

 

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

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

 

[포토샵스크립트] 스크립트 단축키로 실행하기

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

diy-dev-design.tistory.com

 

 

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

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

 

[photoshop script] 포토샵 스크립트로 특정 영역 선택하기

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

diy-dev-design.tistory.com

 

 

반응형

+ Recent posts