포토샵으로 광택나는 고급진 아이콘 만들기, 유리로 덮은 듯한 예쁜 아이콘 Add Glossy / Shine Effect to Icon / Photoshop CS5

포토샵으로 광택나는 아이콘 만들기, 유리로 덮은 듯한 예쁜 아이콘 Add Glossy / Shine Effect to Icon / Photoshop CS5

단순하고 평면적인 느낌의 아이콘은 싫어! 좀 더 고급진 아이콘을 내 손으로 만들어 볼 수는 없을까? 특히 모바일 앱의 아이콘으로 많이 활용되기도 하는 광택나는 아이콘을 손 쉽게 만들어볼까요?

필요한 것

• 포토샵 (Adobe Photoshop)
• 기본적인 포토샵 기술 (Basic Photoshop Skills)
  

그럼 시작해볼까요?

Step 1. 포토샵을 열고, 새 파일을 만들어 줍니다.

저는 가로 세로 길이를 각각 300 px 인 정사각형으로 만들었습니다.

Step 2. 원형 툴을 선택해서 원형 아이콘틀을 만들어 줍니다. 원형을 그려줄 때 쉬프트(Shift) 키를 누른 채로 드래그를 하면 타원이 아닌 정원(?)을 그릴 수 있죠^^

레이어 창에서 Shape 1 레이어가 생긴 것을 확인할 수 있습니다. Ctrl 키(맥은 Command 키)를 누르고 클릭을 하면 그려놓은 원이 선택됩니다.

원의 배경을 그려주기 위해서 선택 영역을 바꿔줍니다. Select 메뉴의 Inverse 항목을 선택합니다. 단축키로는 Shift + Ctrl + I (Shift + Command + I) 입니다.

원형 배경 틀을 만들기 위해 새 레이어를 추가해줍니다.

새 레이어를 추가한 후 alt + delete 혹은 ctrl + delete 를 누르면 색깔이 칠해집니다. 배경색을 칠하든 전경색을 칠하든 별로 중요하지 않습니다.

Step 3. 버튼에 사용할 이미지를 준비합니다. 인터넷에서 원하는 이미지를 구하든, 직접 그리든 편하신 대로 응용하세요^^ 저는 구글에서 페이스북 이미지를 구해보았습니다.

다운 받은 이미지를 포토샵으로 불러와서 붙여 넣었습니다. 레이어의 순서가 가장 위로 올라갔기 때문에 아까 만든 배경을 덮었습니다.

레이어의 순서를 바꿔줍니다. 페이스북 이미지를 먼저 만든 배경 이미지보다 아래쪽에 배치해둡니다.

배경이 위로 올라오니 원형 아이콘 형태가 자연스럽게 만들어졌네요. 그런데 페이스북 이미지의 위치가 뭔가 어색하지요? Ctrl + T 를 눌러서 Transform 을 이용하여 위치와 크기를 적당히 조정해 줍니다.

위치와 크기를 적당히 조정해주니 그럴듯한 아이콘 처럼 보입니다. ^^

원형 아이콘을 만들기 위해 Layer 1 (미리 만든 배경 테두리)에 마우스를 올리고 Ctrl 키를 누른 채 클릭합니다. 이후에 눈동자 표시를 눌러 레이어를 가려줍니다. 이 상태로 Layer 2 를 클릭한 뒤 delete 키를 눌러 배경을 삭제해줍니다.

여기에 배경 레이어까지 가려주면 배경이 투명해져서 그럴듯한 원형 아이콘이 만들어집니다. 어때요? 이만큼만 만들어도 그럴듯 하쥬?

(어우.. 이거 처음 강좌 아닌 강좌를 만들어보는데 생각보다 오래 걸리고 힘드네요... ㅠㅠ 잠깐 물 좀 마시고...)

Step 4. 이제 버튼에 생명력을 불어 넣어봅시다. 첫 단계로 버튼 안쪽에 그림자(Inner Shadow)를 넣어줍니다. Layer 2를 더블클릭 해주면 Layer Style 창이 뜹니다. 이 중에 Inner Shadow를 선택해 조정해줍시다.

저도 디자인 감각이 좋은 사람이 아니라 잘은 모르겠네요~ 적당히 수치를 조정해서 자신만의 디자인을 만들어보세요~ (피하기!!)

이제 두 번째 단계이자 가장 중요한 단계입니다. 버튼에 글로시(glossy)한 느낌을 주는 작업입니다. 새로운 레이어를 만들고 원형 마키 툴(Elleptical Marque Tool)을 이용하여 그림처럼 타원을 그려줍니다.

전경색을 "흰색"으로 설정하고 그래디언트 툴(Gradient Tool)의 프리셋 중에 Foreground to Transparent를 선택합니다.

조준(?)을 잘 하시고 드래그만 해 주시면 오늘의 작품 완성!!! 적당한 힘(?)으로 잘 조절해야 합니다. 몇번의 시도로 예쁘게 디자인 해 보세요~ ^^

짜잔~ 이렇게 만들어본 저만의 아이콘들이에요~

나름 괜찮지 않나요? ^^