Design Sphere

이전의 포스트에서 밝힌 포토샵CS3 리뷰의 잡지기고를 위해 때아닌 CS3 공부를 하고 있습니다만, 어도비의 역대 최대 패키지라는 말을 새삼 피부로 느끼고 있습니다. 어도비가 매크로미디어를 인수할 때부터 목표로 했던 플래시/드림위버와 일러스트레이어/포토샵의 연동에 플러스 알파라니(어쩌면 이 플러스 알파가 더 클지도 모릅니다)... 그야말로 디자이너를 위한 꿈의 패키지가 아닌가 싶습니다. 다른 프로그램들은 아직 제대로 구경도 못해봤지만 포토샵CS3만 해도 '와우!'라는 감탄사가 절로 나오는 기능 몇가지에 홀딱 반해버렸습니다. (백문이 불여일견이라고 글로 요략한 CS3 프리뷰 내용을 읽어볼 때와 실제로 시연해 볼때의 갭이 크더군요 ^_^ )
어디선가 'MS가 긴장해야 할 상대는 구글이 아니라 어도비'라는 글을 봤을때 저도 고개를 끄덕이기는 했지만, 이제 100% 인정해야 겠습니다. 멋져요, 어도비!

아래는 우연히 발견한 CS3 Launch Webcast 입니다.
눈요기 거리가 많으니 영어공부 한다 생각하시고 보셔도 될 것 같아서 붙여 봤습니다.

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


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












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

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

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

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

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



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


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

왼쪽에서 다른 설명없이 바로 결과물부터 보고 계십니다 ^^; - 제가 비스타를 안 써봐서 잘 모르겠지만 이렇게 큰 싸이즈의 아이콘은 대체 어떻게 써먹을 지 궁금하군요.
그럼, 순서가 바뀌었지만 설명 들어갑니다~
전부터 관심은 있었는데 기회가 없어서 아이콘 작업을 제대로 소화해 보지 못했는데요, 얼마전에 아이콘 제작 전문 프로그램인 Axialis Icon Workshop 6.0을 구한지라 오늘 짬을 한 번 내봤습니다. 어떤 아이콘을 만들까하다가 제가 이용하고 있는 블로그터인 티스토리가 떠올라서 바로 작업에 들어 갔습니다.
먼저 티스토리 소개 홈페이지에서 아이콘에 쓸 이미지를 캡쳐하고 코렐 드로우에 앉히고 벡터 작업을 한 후, eps 화일로 저장, 포토샵에서 256x256싸이즈로 불러 왔습니다. 몇번의 레이어와 필터 작업을 걸쳐 이미지와 같은 결과물이 완성 됐구요, 이것을 필터메뉴 중에 Axialis Icon Workshop 으로 보내는 명령이 있는데 이것을 실행하면 해당 프로그램이 열리고 아래와 같은 대화창이 뜹니다. 그러면 여러가지 크기/색상 옵션 중에 원하는 걸 선택합니다. 저는 XP와 비스타 용으로 생각하고 작업했기 때문에 아래와 같이 선택했습니다.  좀 황당하지만 포토샵에서 먼저 대부분의 작업을 했기 때문에 아이콘 워크샵 프로그램에서 할 일은 딱 한 가지만 남았습니다. 화일메뉴중에 저장..만 누르면 모든 작업이 끝납니다. (처음 해보는 작업인지라 이것 저것 테스트 해봤는데도 총 1시간 정도만에 완성한 듯)


변명을 좀 하자면 제가 XP만 쓰고 있기 때문에 제 컴퓨터에서는 위에 있는 256x256의 큰 이미지가 아닌 32x32의 아이콘을 보게 됐는데요(왼쪽의 이미지가 제 컴퓨터의 바탕화면에서 제 블로그의 바로가기 아이콘을 캡쳐한 모습입니다) 256x256의 크기에서는 버블안에 T 이미지가 있는 것처럼 표현을 해 봤습니다만... 48x48이하의 싸이즈로 작아지면 T의 이미지가 너무 흐리더군요. 그래서 256x256일때는 좀 튀더라도 전체를 위해서 T이미지를 강하게 재 작업했습니다.

그럼, 혹시라도 이 아이콘을 쓰실 분은 아래의 링크를 클릭해서 다운 받아 쓰시길 바랍니다. (어떻게 사용하는지는 대부분 아실 거라 믿습니다. 모르시는 분이 댓글로 요청하시면 짧게 설명 달겠습니다)

그리고 위의 작업후에 Axialis Icon Workshop의 리사이즈 기능이 궁금해서 테스트 해 봤는데요,
옆에 보이는 두 개의 이미지 중에 왼쪽이 기존 티스토리 아이콘이고 오른쪽이 제가 작업한 이미지를 리사이즈해서 만든 이미지 입니다. (200% 확대한 모습입니다 - 실제는 16x16픽셀) 제가 보기에는 오른쪽 것이 나아보여서 이것도 덧붙입니다. (기분내서 블로그 아이콘도 바꿔 봤습니다 - 제 댓글의 아이콘으로 확인하시길... ^^)

** 참, 글 다쓰고 발행 버튼 누르고 보니 중요한 걸 하나 빼 먹었네요. 위의 디자인은 모두 TNC에 아무런 허락도 받지 않고 제 마음대로 작업한 결과물입니다. 당근 저는 TNC와 아무 상관이 없구요 (예전에 TNC에서 디자이너 뽑는다고 할 때 이력서 넣었다가 미국에 있어서 안된다고 물 먹은 경험이 있긴 합니다만 ^^;; )

**** 혹시x혹시 맥유저 중에 아이콘 원하시는 분 계시면 댓글로 요청해 주세요 ^^;;
(기존 데이타가 있어서 1분만에 뚝딱 만들어질 거 같더군요)