포토샵액션으로 이미지를 쉽게 늘리고 자르자

안녕하세요 키다리디자이너입니다.

오늘은 웹사이트를 만들 때 PSD파일에서 이미지를 쉽게 잘라내고 고해상도 디스플레이에 맞게 사이즈를 키우는 방법을 설명해 드리겠습니다.

 

 

1. 이미지파일 키우기

 

레티나와 같은 고해상도 디스플레이를 사용하는 아이폰의 경우 화면의 크기는 가로 320px이지만 실제 픽셀 밀도는 그 두배인 640px이 됩니다.

이런 디스플레이에서는 PC모니터에서는 깨끗하게 보이던 이미지들이 억지로 크기를 늘린 것처럼 깨져 보이게 됩니다.

 

픽셀 밀도가 높으면 그만큼 큰 이미지를 사용해야 합니다.

 

이런 식으로 말이죠.

 

이런 현상을 막으려면 이미지의 사이즈를 두배 크기로 만들고 HTML에는 그것의 원래 사이즈인 1/2크기로 넣어줘야만 깨끗하게 보이게 됩니다.

 

그러나 이미지가 벡터가 아닌 비트맵일 경우 포토샵에서 이미지사이즈를 그냥 두배로 키우게 되면 역시 위처럼 깨져보이게 됩니다.

그렇다고 이미지를 벡터로 다 새로 만들어야 하는 것일까?

완벽한 방법은 이미지를 새로 만드는 것이겠지만 대책은 있습니다.

 

 

위와 같이 포토샵의 이미지사이즈 조절 창에서 하단 옵션은 Bicubic으로 맞추어져 있을 것입니다. 이것을 Nearest Neighbor (preserve hard edges)로 바꿔서 사이즈를 키워주세요.

 

 

 

위 이미지들은 맨 처음 이미지를 두배로 키운 이미지입니다.

 

차이가 보이시나요?

Nearest Neighbor (preserve hard edges)는 최대한 비트맵의 도트를 그대로 살려서 키워주게 되는 반면 Bicubic은 도트의 경계가 흐려지죠.

이 이미지를 다시 50% 줄여서 사용하게 되면 깨져보이는 현상은 최대한 막을 수 있습니다.

 

이제 이 포스트의 본론으로 들어가 이 작업을 해주는 포토샵액션을 소개해 드리겠습니다.

 

 

Retinize It actions.atn

 

Retinize it 이라는 포토샵 액션인데요, 위에 설명한 작업들을 액션 실행 한번으로 쉽게 하실 수 있습니다.

 

 

 

2. 이미지 자르기

 

위 액션창에 Retinize it 위에 있는 slice it 옵션도 아주 편리한 옵션입니다.

 

포토샵으로 디자인 후 코딩을 위해 이미지를 자를 때 슬라이스툴을 이용해 미리 자를 영역을 지정해 놓는 방법을 쓰는 웹디자이너들도 많으실텐데요, 키다리디자이너는 이 방법을 별로 좋아하지 않습니다.

이 슬라이스영역을 지정하는 것조차 시간이 걸리는 작업이고 디자인이 수정된다면 이 영역도 그에 맞게 일일히 고쳐줘야 하기 때문이죠.

 

이 액션은 저 같은 사람들을 위해 레이어창에 폴더로 묶인 이미지를 따로 빼서 저장할 수 있도록 해줍니다.

 

단순히 crop툴로 자르게 되면 다른 레이어의 영향을 받거나 배경색을 그대로 보여주게 되는 반면 이 액션은 새로운 창에 해당 폴더만 빼서 레이어를 합쳐줍니다.

 

위 두 액션을 잘 이용하시면 이미지를 자르고 저장하는 작업을 좀 더 빠르고 쉽게 하실 수 있습니다.