Design Sphere

그동안 저의 아이콘 제작 과정에 대해서 물어 보시는 분들이 종종 있었는데, 오늘은 제가 어떻게 이미지에 아쿠아 효과를 주는지 알아 보겠습니다.
이미 누차 말씀 드렸지만 대부분의 효과는 포토샵의 레이어 연산으로 처리합니다. 수동으로 그려가면서 효과를 주면 결과는 더 깔끔하고 반짝거릴 수 있지만, 그렇게되면 시간이 너무 많이 걸려서 여태처럼 하루에 하나 꼴로 아이콘을 공개하기는 어려웠을 겁니다.
(예! 질보다는 양을 선택한 겁니다 ^_^ )
어떤 방법으로 설명을 할까 고민을 해봤는데, 특별히 포토샵 소스 화일을 직접 제공하는 게 제일 낫겠다는 결론에 도달 했습니다. 그럼, (물론 포토샵을 가지고 계신 분 중에) 관심이 있으신 분은 아래의 화일을 다운 받으시고 압축을 푸신 후에 포토샵으로 열어 보세요.
-이번에 샘플로 제공한 것은 위에서 보신 계란후라이+스마일 이미지입니다. (제가 디자인스토어를 위해 작업한 제법 큰 화일입니다- 가로x세로가 각각 2500픽셀이 넘습니다)


그럼 포토샵에서 화일을 열어 보셨으면 다른 건 보실 게 없고 레이어 창만 보시면 됩니다.
(혹시 안 열려 있다면 F7의 단축키로 간단하게 불러 오세요) 그러면 왼쪽과 같은 레이어 창을 보실 수 있는데요.. 레이어 중에 오른쪽 끝에 원안에 f가 있는 것들은 레이어 효과를 적용했다는 뜻이구요, f옆의 작은 삼각형을 누르면 그림처럼 어떤 레이어 효과를 적용했는지 주르르 펼쳐지면서 보여줍니다.
왼쪽의 이미지에서 보시다시피 노란자에 해당하는 가운데 노란 타원 부분(Yellow 레이어)은 레이어 효과를 주기 전에는 그냥 하얀 색이었구요 거기에 노란색의 'color overlay'효과로 기본적인 노란색을 선택한 후에 추가로 6개의 레이어를 이리저리 건드려서 마무리가 됐습니다.
여기에 하나 추가 설명을 드리자면 각 레이어 효과 부분을 더블 클릭하면 자세한 수치도 수정할 수 있는데요, 'Yellow'레이어의 효과 중에 'Bevel and Emboss'를 더블 클릭하면 아래와 같은 세부 창이 또 뜹니다.












잘못 될 건 없으니까 각 수치들을 이렇게 저렇게 바꿔 보세요. 수치가 바뀔때마다 실제로 열려있는 계란 이미지가 수치에 맞춰서 바뀌니까 이렇게 저렇게 바꾸다가 자기 입맛에 맞는 모양이 나왔을 때 'OK'버튼만 누르면 됩니다.
한가지 유의할 건 effect의 수치는 이미지 사이즈와 연관되어 있다는 사실입니다. 무슨 말인고 하니..가로-세로 2500픽셀의 이미지에서 250 정도의 수치로 효과를 줬다면 그보다 작은 사이즈에서는 당연히 그보다 작은 숫자를 선택해야 동일한 효과를 얻을 수 이다는 얘기입니다.

아직도 이해가 안가신다면 제가 제공한 포토샵 화일의 이미지 사이즈를 아무것도 손대지 않은 상태에서 가로-세로 250 정도로 바꿔 보면 아래처럼 바뀝니다. (이미지는 작아졌지만 effect의 수치는 변하지 않고 그대로 있으니... ^_^)

이런 모습을 방지하시려면 나름대로의 팁이 있어야 하는데, 필요에 따라 자기가 정한 사이즈에서 레이어의 effect를 사용해 가면서 처음부터 끝까지 작업을 하고 마무리가 됐으면 그 상태로 저장. 이후에 다른 사이즈가 필요하면 레이어를 모두 하나로 'flatten' 시켜서 레이어의 효과를 모두 날려 준 후에 리사이즈를 하면 됩니다(이때 저장 잘못하면 기존 화일 날라가는 건 아시죠? Save as를 이용하세요^_^) 그래서 큰 이미지로 처음부터 작업을 시작하는 게 나은 경우가 많습니다. (큰 걸 줄이는 건 별 무리가 없는데, 작은 걸 크게 늘리면 계단현상이 따라오기 마련이니까요)

뭐 다른 분들처럼 자세한 튜토리얼을 기대하고 오셨다면 좀 실망하셨을 지도 모르지만, 원본 소스 화일(게다가 프린트용으로 써도 손색이 없는 무지 큰)을 제공했으니 사용자에 따라 제대로 하나 건지신 걸 수도 있다고 생각합니다 ^_^
이 레이어 효과에 대한 감만 제대로 잡으시면 저런 느낌의 아이콘 만드는 건 ... 누워서 떡 먹기..바로 전 단계정도 까지 쉬워졌다고 봐도 될 거 같습니다 ^_^

그냥 구경만 하다가 가면 심심하실 까봐 이 이미지의 아이콘도 제공합니다. (예전의 계란 후라이 이미지와는 조금 틀리니까..원하시는 분이 계시겠죠? ^_^)



그럼 응용은 여러분의 몫으로 남기고, 메타블로그의 추천이나 댓글이 많이 붙는거 봐서 (^_^) 다음 기회에 다른 팁을 하나 더 선보이겠습니다~


마지막으로 보너스 샷 - 위의 이미지를 적용한 디자인 스토어의 상품 구경 가기 (클릭)