20090418 : : 맥 바탕 화면 스타일 핸드폰 배경 만들 기 · Wireframe 
 20090418 : : 맥 바탕 화면 스타일 핸드폰 배경 만들 기 
 2009 - 04 - 19 2009 - 12 - 23 
 예전 에 ‘ 맥 바탕 화면 스타일 바탕 화면 만들 기 ’ 를 포스팅 한 적 이 있 었 습니다 만 , 어째 워드프레스 를 업그레이드 하 면서 예전 포스팅 몇 개 를 홀랑 지워 버렸었 는데 , 거기 끼 어서 함께 날아갔 나 봅니다 . 포스팅 거리 도 별로 없 고 , 지난 주 에 핸드폰 도 새로 사 고 해서 오늘 은 작 은 화면 에 맥 바탕 화면 스타일 로 배경 그림 만드 는 과정 을 기록 해서 살짝 올려 볼까 합니다 . 참고 로 이번 에 새로 장만 한 핸드폰 은 스카이 프레스토 입니다 . 직접 찍 기 는 너무 귀찮 고 해서 스카이 홈페이지 를 링크 하 려 했 는데 , 때 마침 점검 중 이 군요 . 이런 . 소스 가 별도 로 필요 없 는 그래픽 이 니 바로 시작 하 도록 하 겠 습니다 . 사용 툴 은 이제 는 전설 이 될 버전 인 포토샵 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 … 를 선택 합니다 . 외곽 선 영역 을 만들 어 주 기 위해서 입니다 . 
 외곽 선 은 흰색 으로 , 굵기 는 1 px 로 하 겠 습니다 . 위치 는 center 로 하 면 됩니다 . 
 자 여태 까지 잘 따라 하 셨 다면 , 레이어 는 모두 4 개 를 만들 었 고 , 아래 에서부터 배 경색 > 검 은 그 라데 이 션 > 흰 그 라데 이 션 > 외곽 선 의 순서 로 쌓여 있 을 겁니다 . 그럼 ‘ 흰 그 라데 이 션 ’ 이 칠 해진 레이어 를 선택 해서 블 렌 딩 모드 를 ‘ overlay ’ 로 선택 하 고 투명도 를 50 % 로 맞춥니다 . 그리고 외곽 선 레 이 어도 ‘ overlay ’ 로 선택 하 고 투명도 를 80 % 정도 로 줍니다 . 수치 는 정확 하 게 맞추 지 않 아도 됩니다 . 본인 의 느낌 에 따라 변경 할 수 도 있 습니다 . 자 , 그리고 또 새 레이어 를 만들 고 패스 를 그립니다 . 
 그리고 그 라데 이 션 으로 칠 하 고 , 새 레이어 에 외곽 선 을 그린 후 레이어 옵션 을 바 꿉니다 . 이런 작업 을 반복 하 면 아래 와 같 은 대강 의 느낌 을 만들 수 있 을 겁니다 . 너무 많 아도 번거 롭 고 하 니 , 네 개 나 다섯 개 정도 로 하 면 적당 할 듯 합니다 . 
 완성 하 기 & Variation 
 나쁘 지 않 군요 . 여기 서 추가 적 으로 blur 를 넣 어 주 는 등 의 효과 를 넣 어 주 어도 좋 습니다 . 그리고 맨 처음 만들 었 던 배경 레이어 의 색 을 다른 색 으로 변경 하 면 , 아래 와 같이 다양 한 느낌 으로 만들 수 있 습니다 . 
 이제 , 핸드폰 으로 밀 어 넣 어서 쓰 기 만 하 면 됩니다 . 참 쉽 죠 잉 ? 
 ps . 저 원래 이런 짓 잘 안 하 는데 , 기왕 다 만들 어 놓 은 거 만들 기 귀찮 으신 분 들 을 위해 공유 합니다 . 원본 psd 파일 도 넣 어 두 었 습니다 . 
 도구 와 팁 photoshop , 바탕 화면 
 20090415 : : 원어 데이 에서 스태들러 를 ?