Design Sphere

계속 미루던 두번째 아이콘 제작 노하우를 공개 합니다. 부제를 달았듯이 아쿠아 효과 쉽게 적용하는 방법이며 제대로 이 방법을 따라하시면 앞으로는 1초만에 아쿠아 효과를 적용 할 수 있습니다
(정말입니다! ^_^ )

먼저 두가지 준비물이 필요한데요, 하나는 포토샵입니다. 이게 없으면 시작조차 불가능합니다만..그냥 심심풀이로 아래의 플래시 화일을 구경해 보셔도 될 듯 합니다 ^_^;;
그리고, 두번째 준비물은 지난 번에 공개한 사칙연산 아이콘 압축 화일에 들어있는 포토샵 화일입니다. 따로 챙기시기 귀찮으실테니 제가 다시 올려 드리죠 ^_^

4개의 포토샵 화일이 들어있는데 압축 풀어서 아래의 플래시 동영상의 소스로 쓰시면 됩니다.

그리고, 마지막으로 오늘의 하이라이트인 따라하기 동영상입니다.
캡션으로 자세한(?!) 설명을 넣었으니 모르는 부분이 있으면 적절히 일시정지 버튼을 눌러가면서
보시기 바랍니다. 전체 플레이 시간은 2분이 약간 넘는 짧은 화일이지만 만드는데
제법 시간이 걸렸습니다(그래서 제가 애용하는 대중을 상대로 협박하기를 또 써먹어야 겠네요)
저에 대한 응원과 격려는 댓글이나 추천 버튼으로 해 주세요!
제 기분이 좋아지면 다음에는 제가 애용하는 수십개의 스타일 묶음으로 보답하겠습니다
(이게 무슨 뜻인지는 아래 동영상을 제대로 이해하시면..압니다 ^_^ )

아래 플래시 화일은 약 4.5메가로.. 제법 크기때문에 여러분의 회선 상태에 따라
조금 기다리셔야 할 수도 있습니다. -플레이 버튼을 눌러야 시작합니다~
(상하 높이도 640픽셀이나 돼서 보시는 데 좀 불편할 지도 모르겠네요 ^_^;;)

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


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












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

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

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

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

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



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


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