[제작가이드]레이더 아이콘

'드래곤볼'이라는 만화를 봤더라면 이런 레이더 모양이 익숙할지도 모른다. 먼저 중요한점을 말하자면 빛느낌을 내야하므로 블랜딩모드에 익숙해야한다.  레이더 아이콘을 만들어보자.

01.가로세로 512px의 캔버스를 만든다.

02.위의 그림처럼 미리 그어놓은 가이드라인의 중심을 기준으로 400px의 둥근쉐이프를 만든뒤, Subtract옵션을 이용하여 도넛모양의 쉐이프를 만든다.(레이더아이콘의 가장 밖의 테두리가 될 부분이다)

▼4가지 레이어 스타일

03.위의 테두리 레이어에 적용할 4가지 레이어 스타일을 적용 시킨다.

레이어스타일이 들어가면 위와같이 볼록한 형상의 외곽을 나타낼 수 있다.

04.레이더안쪽의 배경이 될 원형 쉐이프를 만들고, 아래 그림과 같이 Gradient Overlay를 입힌다.

중요한 것은 Gradient Overlay창에서 도형부분을 클릭하면 기준점을 잡을 수 있다.

05.밝은 갈색의 브러쉬로 위의 그림처럼 안쪽영역을 선택해놓고 5% 브러쉬로 색을 더 칠한다.

06.같은 방법으로 링쪽에 비치는 색깔을 나타내기위하여 레이어에 마스크를 입히고 같은 브러쉬로 색을 칠한다.

▲향후 레이어가 많아지므로 그림과 같이 그룹으로 묶어놨다.

07.다음은 레이더의 기본 라인을 그을 차례다. 쉐이프툴을 이용하여 아주얇은 라인을 하나 만들고, 그 라인레이어를 그룹을 지어서 그룹은 속성을 Color Dodge, 라인레이어는 투명도만 70%로 주면 위의 그림처럼 빛나는듯한 라인을 얻을 수 있다.(마찬가지로 하나더 복사하여 command + T를 이용하여 세로 라인 레이어도 만든다)

▲다시 말하자면 그룹(inside폴더)은 블랜딩모드를 Color Dodge, 라인레이어는 Nomal에 투명도만 70%를주면 위와같은 효과를 나타낼 수 있다.

라인레이어(가로,세로)에 추가적으로 0.5단위의 아주 약한 Gaussian Blur를 준다.

08.안쪽의 원형링을 만들 차례다. 그림과 같이 가이드라인을 보며 정원을 하나 만들고 아래의 레이어 스타일을 적용 시킨다.

▲안쪽링 레이어의 3가지 레이어 스타일

09.ring레이어에 레이어스타일을 적용하면 위와 같은 효과를 볼 수 있으며 레이어 스타일을 주기전에 Fill부분을 0%로 주고 작업을 하면 도형의 색상과 관계없이 오로지 레이어 스타일만 보여지므로 더 편하게 레이어스타일을 조절할 수 있다.(원하는 만큼 서로다른 크기의 링을 복사하여 위치시킨다)

10.레이더의 객체가 될 빛을 표현해야 한다. 빈레이어를 하나 만들고 흰색의 10%브러쉬로 크기를 조절해가며 내가 원하는 부분에 클릭을 계속한다.(단, 이 레이어 역시 Color Dodge의 블랜딩 모드가 적용되어있는 inside폴더안에 속해있음을 잊지말자)

눈금자모양등도 추가하여 안쪽의 객체를 채워 넣는다면 위의 그림과 비슷할것이다.

11. 다음은, 레이더 막대가 지나간 부분을 표현하기 위해 1번째 그림과 같이 펜(Pen)툴을 이용하여 도형을 그리고 2번째 그림과 같이 Gradient Overlay를 적용하고 Screen모드와 Fill 0%를 적용한다.

12.제일 밖의 테두리와 레이어안쪽 배경 사이의 빈 공간(검정색)에 테두리를 줄 차례이다. 위의 그림상의 대략 5px정도 두깨의 테두리를 만들고 아래의 레이어스타일을 적용 시킨다.

▲out_ring레이어의 레이어스타일

스타일을 적용하면 위의 그림과 같을 것이다.

13.이제 마지막으로 표면에 글로우 효과를 줄 차례이다. 선택영역을 이용하여 그림과 같이 선택영역을 잡고 그라데이션(흰색 - 투명도0%)으로 위와 같이 나타낸다.

▲end_glow레이어의 그라디언트 창

Gaussian Blur도 적용 시킨다.

이렇게 하여 완성된 레이더 아이콘이다. 아무래도 빛을 표현해야 레이더 다운 모습을 볼 수 있기에 블랜딩 모드의 Color Dodge를 잘 이용하여야 하며 레이어의 그룹관리를 확실히 해야 한다. 그렇지 않으면 이런씩의 레이어가 유난히 많은 아이콘은 나중에 혼돈아닌 혼돈이 올 수도 있기 때문이다.

Hue/Saturation을 이용하면 쉽게 다른색상의 레이더 아이콘도 만들 수 있다.

radar icon.psd