주간 베스트 월간 베스트 3개월 베스트 베스트 게시물
연길시 신화서점 조선말 도서

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

연애강사 | 2014.03.27 16:17:55 댓글: 0 조회: 5539 추천: 0
분류웹 디자인 https://life.moyiza.kr/itstudy/2095346

오늘은 웹사이트를 만들 때 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 (7.09KB)


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


2. 이미지 자르기

 

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

 

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

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

 

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

 

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

 

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



==============================================================================================



share_zl  추가하시면 더 많은 자료들을 보실수 있습니다. 



추천 (0) 선물 (0명)
첨부파일 다운로드 ( 6 )
001.png | 27.9KB / 1 Download
002.jpg | 53.9KB / 0 Download
003.jpg | 83.4KB / 0 Download
Retinize It actions.atn | 7.1KB / 2 Download
005.jpg | 8.7KB / 0 Download
IP: ♡.234.♡.206
3,006 개의 글이 있습니다.
제목 글쓴이 날짜 조회
관리자
2003-09-20
11647
관리자
2003-09-20
11199
관리자
2003-09-20
20239
지구인
2010-08-27
19088
지구인
2009-09-07
13382
SOLIDH
2010-01-29
15399
엔죠라이프
2004-10-07
16507
오묘일걸
2015-03-20
6082
나나
2014-06-16
22434
농촌놈2
2014-04-30
2489
서룡국7932
2014-03-29
2738
서룡국7932
2014-03-28
2927
서룡국7932
2014-03-28
2167
서룡국7932
2014-03-28
3600
서룡국7932
2014-03-28
2581
서룡국7932
2014-03-28
3599
서룡국7932
2014-03-27
3594
서룡국7932
2014-03-27
2024
서룡국7932
2014-03-27
1516
서룡국7932
2014-03-27
2572
서룡국7932
2014-03-27
2535
연애강사
2014-03-27
4508
연애강사
2014-03-27
5539
연애강사
2014-03-04
4870
CHOSUN
2014-03-01
3323
CHOSUN
2014-03-01
2552
CHOSUN
2014-03-01
1867
특파원
2014-02-24
1975
모이자 모바일