컨트롤 노브 회전을 화살표로 표현하기

컨트롤 노브 회전을 선으로 표현하는 튜토리얼입니다. gif파일 없이 정지 이미지만으로 특징을 강조하는 방법을 담았습니다. 제가 gif파일을 지양하는 이유는 ‘GIF파일을 똑똑하게 사용하는 방법’ 포스팅에 설명해두었습니다.

이 튜토리얼은 포토샵과 일러스트레이터(이하 ‘일러스트’)를 함께 사용합니다.

Table of Contents 숨기기

미리보기

노브를 돌릴 수 있는 경로를 화살표로 표시하였습니다. 일러스트레이터를 포토샵을 오가면서 작업합니다.

이 제품은 편집 컨트롤러 ‘투어박스 엘리트’입니다. 투어박스 이미지를 포토샵으로 불러왔습니다. 중앙에 있는 노브의 움직임을 선으로 표현하려고 합니다.

포토샵에서는 만들 수 있는 선의 종류에 한계가 있습니다. 때문에 포토샵에서 이미지를 복사한 후 일러스트에서 작업하고 다시 포토샵으로 가져오는 방식으로 진행합니다.

일러스트에서 Ctrl+N을 눌러 새로운 도큐멘트를 만듭니다. 최종 편집은 포토샵에서 진행할 예정이므로 대지 크기는 상관없습니다. 포토샵에서 이미지를 전체 선택(Ctrl+A) 후 복사하여 일러스트 도큐멘트에 붙여넣습니다.

포토샵에서 이미지 크기를 맞추었다면 일러스트에서 별도로 조절하지 않아도 됩니다. 300dpi로 작업해도 붙여넣을 때 자동으로 크기가 맞추어집니다.

이미지를 붙여넣은 후 이미지 밝기에 따라 위쪽 컨트롤바에서 불투명도(Opacity)를 적절히 조절해도 좋습니다. 간단한 준비를 마치면 Ctrl+2를 눌러 이미지를 잠급니다. (잠금 해제하려면 Ctrl+Alt+2를 눌러주세요.)

선을 한번 그려볼까요? 컬러 팔레트에서 원하는 선 색을 선택합니다. 면의 색은 ‘없음’으로 설정해주세요.

툴 패널에서 원 도구를 선택 후 원을 하나 그립니다. 까만 화살표(선택 도구)를 선택하고 원을 세로 축으로 찌그러뜨려 타원으로 만듭니다. 밑그림 이미지를 토대로 만들면 됩니다.

펜툴 선택 후 적절한 구간에서 선을 눌러 점을 추가해주세요.

하얀 화살표(직접 선택 도구)를 선택해서 선을 드래그하세요. delete 키를 한 번 눌러 선택한 선을 지웁니다. del키를 두 번 누르면 도형 전체가 지워지니 주의해야 합니다.

Stroke 패널에서 선의 굵기와 시작·끝부분 화살표 모양을 선택할 수 있습니다.

화살표가 만들어진 모습입니다.

데이터가 완성되면 Ctrl+A로 전체 선택 후 포토샵으로 이동하여 붙여넣습니다.

Paste 창이 뜨면 Pixels나 Smart Object를 선택합니다. 저는 픽셀을 선택했습니다. 장단점이 있으니 더 편리한 쪽으로 쓰시면 됩니다.

Pixel: 픽셀로 데이터를 변환합니다.
- 크기를 줄이면 이미지가 손상됩니다. 줄인 후 다시 늘릴 수 없습니다.
- 포토샵 파일 안에 비트맵으로 존재하므로 수정할 때 일러스트를 켜지 않아도 됩니다.
- 레이어 위에 있는 데이터만큼만 용량이 증가합니다
Smart object: 스마트오브젝트로 데이터를 불러옵니다.
- 백터 상태로 불러오기 때문에 이미지를 확대·축소하여도 깨지지 않습니다.
- 일러스트 파일을 포토샵 파일에 포함시키는 개념입니다. 작게 쓰더라도 원본 이미지 용량이 크면 psd용량도 함께 늘어납니다.
- 수정할 때 일러스트와 포토샵을 오갈 수 있습니다. 스마트 오브젝트는 수정이 용이하지만 덧대어 그리는 작업 특성상 도형만 가져올 때는 크게 의미가 없을 수 있습니다.
- 용량이 걱정된다면 스마트 오브젝트로 붙여넣은 후 마지막에 래스터화합니다. 보다 편하게 작업할 수 있습니다.

화살표의 색상과 블랜딩 모드를 바꾸어 강조하여 완성합니다.

여러 색상과 형태로 화살표를 만들어보세요.

그래픽으로 움직임을 강조하는 두 번째 튜토리얼입니다. 적절한 그래픽을 활용하면 상세페이지 내용을 더욱 와닿게 표현할 수 있습니다.

그래픽이 아닌 잔상으로 표현하려면 ‘포토샵으로 선풍기 헤드가 움직이는 범위 표현하기’ 포스팅을 참조하세요.