콘텐츠로 건너뛰기
Home » 20090418 :: 맥 바탕화면 스타일 핸드폰 배경 만들기

20090418 :: 맥 바탕화면 스타일 핸드폰 배경 만들기

들어가면서

예전에 ‘맥 바탕화면 스타일 바탕화면 만들기’를 포스팅한 적이 있었습니다만, 어째 워드프레스를 업그레이드하면서 예전 포스팅 몇 개를 홀랑 지워버렸었는데, 거기 끼어서 함께 날아갔나 봅니다. 포스팅 거리도 별로 없고, 지난 주에 핸드폰도 새로 사고 해서 오늘은 작은 화면에 맥 바탕화면 스타일로 배경 그림 만드는 과정을 기록해서 살짝 올려볼까 합니다. 참고로 이번에 새로 장만한 핸드폰은 스카이 프레스토입니다. 직접 찍기는 너무 귀찮고 해서 스카이 홈페이지를 링크하려 했는데, 때 마침 점검 중이군요. 이런. 소스가 별도로 필요 없는 그래픽이니 바로 시작하도록 하겠습니다. 사용 툴은 이제는 전설이 될 버전인 포토샵 7.0 입니다. 물론 그 이상 버전에서도 만들 수 있습니다.

캔버스 만들기

보통 핸드폰은 QVGA (320×240)규격에 맞춰서 만들면 되는 것으로 알고 있습니다. 물론 핸드폰마다 풀 스크린을 가득 채울 수 있는 규격은 액정의 크기나 비율에 따라 조금씩 다르겠지만, 이만하면 아이콘 네비게이션 영역을 제외한 화면을 채우는데는 무리가 없더군요. 참고로 QVGA는 Quarter VGA로, VGA의 기본크기인 640×480의 1/4 크기인 320×240 사이즈를 말합니다. Q가 들어가서 퀄리티가 좋은 VGA라는 둥 하는 이야기를 핸드폰 관련 커뮤니티에서 본 적이 있어서, 낚이거나 현혹되지 마시라고 드리는 말씀입니다. (네, 저 잘났습니다.)

먼저 포토샵을 실행한 후 새 파일을 만듭니다. (ctrl+N) 화면의 크기는 위의 그림과 같이 240×320으로 만듭니다. 
새 파일을 만들었으면 레이어를 하나 새로 생성하시고, 적당한 색상으로 레이어를 가득 채웁니다. 저는 와인 컬러 비스무레한 색상을 선택했습니다. 이 때 선택되는 색상은 조금 어두운 컬러가 좋습니다.
자, 다시 새 레이어를 만듭니다. (이번 작업은 새 레이어를 상당히 많이 띄우게 됩니다) 그리고 그라디언트 툴을 사용해서 그라데이션을 살짝 넣어줄 겁니다. 그라데이션은 새로 하나 생성하면 되는데요, 검은색만 가지고 100%~0% 투명도로 그라데이션을 만들면 됩니다.

만들어진 그라데이션으로 새 레이어에 부드럽게 아래 위로 칠해 줍니다. 뭐, 정확히 수직으로 넣을 필요는 없고, 분위기 따라서 약간 사선으로 넣어줘도 됩니다. 너무 진하다고 생각되면 여러 번 긋느니, 레이어 블렌드 모드를 overlay 등으로 변경하거나 레이어 투명도를 변경해 보세요

본격 작업

이제 본격적인 노가다 작업입니다. 새 레이어를 만들고, 펜툴을 선택하여 아래 그림과 같이 화면을 가로지르는 곡선을 그린 다음, 화면 바깥으로 찍어나가서 원래 시작점으로 돌아가서 닫힌 path를 하나 그려 줍니다.

펜 툴이 선택된 상태에서 path에 대고 마우스 오른쪽 버튼을 클릭하면 context menu가 나타납니다. 이 패스를 선택 영역으로 만들 것이니, ‘make selection’을 선택합니다. 

선택 영역 만들기(Make Selection)를 선택하면, 아래와 같이 대화상자가 나옵니다. 예전에 별도로 이 기능을 써 본적이 없다면 기본값을 그대로 사용하면 됩니다. feather 값(선택 영역 가장자리를 흐리게 만드는 값)은 0으로 주고 OK를 클릭하면 위의 path가 선택 영역이 되어 점선으로 반짝입니다.

자, 이제 그라디언트 툴을 선택해서 새 그라데이션을 만듭니다. 이번에 만들 그라데이션은 100% 흰색~0% 흰색으로 만들면 됩니다. 준비가 되었으면 새 레이어를 만들고 이 그라데이션을 선택영역 바깥에서 안쪽으로 짧게 그어서 칠해 줍니다. 대충 아래와 같이 되도록 적당하게 그려줍니다. 너무 진하게 그렸거나 너무 많은 부분을 칠해버렸다면, ctrl+Z를 눌러 몇 번 다시 해 봅니다. 뭐든 처음이 어려워서 그렇지 한 두 번 성공해보면 쉽게 할 수 있습니다.

아직 끝이 아닙니다. 다시 새 레이어를 만들고,  m 키를 눌러 선택 영역 툴로 변경한 다음, 선택 영역에 오른쪽 버튼을 클릭하여 Stroke… 를 선택합니다. 외곽선 영역을 만들어 주기 위해서입니다.

외곽선은 흰색으로, 굵기는 1px로 하겠습니다. 위치는 center로 하면 됩니다.

자 여태까지 잘 따라 하셨다면, 레이어는 모두 4개를 만들었고, 아래에서부터 배경색 > 검은 그라데이션 > 흰 그라데이션 > 외곽선 의 순서로 쌓여 있을 겁니다. 그럼 ‘흰 그라데이션’이 칠해진 레이어를 선택해서 블렌딩 모드를 ‘overlay’로 선택하고 투명도를 50%로 맞춥니다. 그리고 외곽선 레이어도 ‘overlay’로 선택하고 투명도를 80% 정도로 줍니다. 수치는 정확하게 맞추지 않아도 됩니다. 본인의 느낌에 따라 변경할 수도 있습니다. 자, 그리고 또 새 레이어를 만들고 패스를 그립니다.

반복 작업

그리고 그라데이션으로 칠하고, 새 레이어에 외곽선을 그린 후 레이어 옵션을 바꿉니다. 이런 작업을 반복하면 아래와 같은 대강의 느낌을 만들 수 있을 겁니다. 너무 많아도 번거롭고 하니, 네 개나 다섯 개 정도로 하면 적당할 듯 합니다.

완성하기 & Variation

나쁘지 않군요. 여기서 추가적으로 blur를 넣어주는 등의 효과를 넣어주어도 좋습니다. 그리고 맨 처음 만들었던 배경 레이어의 색을 다른 색으로 변경하면, 아래와 같이 다양한 느낌으로 만들 수 있습니다.

 

이제, 핸드폰으로 밀어넣어서 쓰기만 하면 됩니다. 참 쉽죠잉?

ps. 저 원래 이런 짓 잘 안하는데, 기왕 다 만들어 놓은거 만들기 귀찮으신 분들을 위해 공유합니다. 원본 psd 파일도 넣어두었습니다.