버튼이나 element 요소들에서 자주 쓰이는 포토샵 팁들!

버튼이나 element 요소들에서 자주 쓰이는 포토샵 팁들!

버튼이나 element 요소들에서 자주 쓰이는 포토샵 팁들!
Category
Share Story

그간 몇 번에 걸쳐서 포토샵에 대한 이야기 (팁) 들을 이야기해 왔는데요. 오랫동안 일을 해 온 관성 때문에 잘 익숙해지지 않는 것 같습니다.

요즘 한창 바쁜 시절이지만, 틈틈이 (익숙하지 않은) 테크닉을 연마해 두시면 작업속도에 많은 발전이 있으리라 기대합니다.

* 생각이 식기 전에 손으로 뽑아내기 위해서는 작업속도가 아주아주 중요합니다.

오늘은 버튼이나 element 요소들에서 자주 쓰이는 기술에 대해서 간단히 정리할까 합니다.

1. CS6에서도 벡터 마스크를

CS6 이전 버전에서는 벡터로 마스크를 할 수 있었는데, CS6부터는 왜 안될까 의아했었습니다. 그런데 단순하게…

Ctrl하고 드래그하면 되네요. ^^

스크린샷-2013-01-31-오후-9_41_36

스크린샷-2013-01-31-오후-9_42_181

이와 같은 레이어에서

Ctrl+Alt+(섬네일 드래그)를 하면

스크린샷-2013-01-31-오후-9_45_15

여전히 마스킹이 되네요. ^^
단지 ctrl 누르는 게 추가되었습니다.

스크린샷-2013-01-31-오후-9_46_30

스크린샷-2013-01-31-오후-9_46_37

2. 레이어 효과 분할

별로 필요 없는 기능일 수도 있겠지만, 디자이너에 따라서 활용도가 많이 달라지는 기능입니다. 레이어스타일을 독립된 레이어로 만들어 주는 기능입니다.

스크린샷-2013-01-31-오후-10_10_23

다음과 같은 주황색 사각형을 만들었습니다. 그리고, 여기에

스크린샷-2013-01-31-오후-10_11_11

스크린샷-2013-01-31-오후-10_11_41

gradient도 주고, 그림자도 만듭니다.

그리고,

스크린샷-2013-01-31-오후-10_12_11

layer > layer style > create layers 를 누르면,

스크린샷-2013-01-31-오후-10_13_35

다시 안돌아가진다는 경고가 뜨구요.

스크린샷-2013-01-31-오후-10_14_28

레이어가 위와 같이, 두 개의 효과가 – 두 개의 레이어로 분리됩니다.

스크린샷-2013-01-31-오후-10_15_49

이건 그림자만 자유왜곡 (ctrl+t > 우클릭 warp) 줘 본 겁니다.

* 가이드 칠 때도 가끔 효용이 있구요. 그냥 레이어패널을 더블클릭해서 얻는 단순한 효과보다 더 미세한 조정을 하고 싶을 때 유용합니다.

3. SMART GUIDE

우리의 대개의 작업은 픽셀 하나하나가 중요한 작업이지요. 저도 유난히 픽셀에 민감한 편이어서, 항상 작업을 봐 줄 때 빼놓지 않고 지적하는 부분이기도 합니다.

포토샵에서
View > Show > Smart Guide를 선택해 주면,

스크린샷-2013-01-31-오후-10_23_45

 

위와 같이, 오브젝트를 움직여줄 때마다 안내선이 나옵니다. Snap to Pixel 기능과 함께 사용할 때 최고의 성능을 발휘합니다.

일러스트에서는 이미 널리 사용하고 있습니다. 단축키는 ctrl+U.

스크린샷-2013-01-31-오후-10_40_04

* 가끔 포토샵에서 벡터 레이어 외곽선 잡는 것 때문에 성가셔 하는 분들을 봤는데요. CS6에서는 ctrl+shift+h 입니다.

CS6부터 기능이 많아지다보니, shift든 ctrl이든 하나씩 더 붙네요.

스크린샷-2013-01-31-오후-10_44_23

( 왼쪽 원처럼 검은색 실선이 둘러지는 거… 좀 성가시긴 합니다. )

** 참, 화면 크게 키우면

스크린샷-2013-01-31-오후-11_12_03

이렇게 픽셀 그리드 생기는 거 싫어하는 분들도 계시지요? 이것도 같은 메뉴에 있어요.

View > Show > pixel grid 를 꺼주시면 됩니다.

4. Layer Comp

전체적으로 – 가장 안쓰는 기능중에 하나일 겁니다. ^^
늦게 생긴 만큼, 아는 분도 많지 않고, 또한 알아도 익숙하지 않아서 손이 안가는 기능이지요.

오늘 내용 중 가장 유익한 내용일 거라 생각하는데요. ^^

history와는 다르게, 한 PSD의 다양한 상황을 저장하는 기능입니다.

다음과 같이 입력에 따라서 입력창이 바뀌는 디자인이 한 PSD에 있는 걸 예를 들지요.

스크린샷-2013-01-31-오후-10_53_37

a
이렇게 흰색으로 입력창이 흰색으로 활성화 되어있는 경우와,

b

 

d

이렇게 비활성(?) 처리된 경우를 예를 들겠습니다.

하나의 PSD 에 두 경우가 (혹은 더 많은 경우도) 있는 상황인거죠.

스크린샷-2013-01-31-오후-10_52_13

먼저 layer Comp. 패널을 열구요.
아래 오른쪽에 접힌 종이 아이콘을 눌러 추가합니다.

스크린샷-2013-01-31-오후-10_47_14

이렇게 메모도 할 수 있구요.

스크린샷-2013-01-31-오후-10_58_31

이렇게 됩니다.

이제 맨 앞의 체크박스만 누르면,
레이어들의 ‘화면상에서의 위치’, ‘눈이 켜져있음/감겨있음’, ‘레이어 스타일’을 일괄적으로 볼 수 있습니다.

이 기능이 막강한 이유는,

(1) 우리가 하는 디자인처럼, 버튼 normal/press, 화면의 접힘/펼쳐짐, 오브젝트의 화면 내 이동을 상황에 따라 정리해 볼 수 있기 때문이고,

(2) 레이어 눈을 끄고 켤 수 있기 때문이고,
(3) 무엇보다도 주석을 달 수 있어서 디자이너간 의사 전달이 쉽기 때문입니다.

오늘 내용은 모두 잊어도, 여러분들이 이 기능을 많이 활용해 주시면 감사하겠습니다.

(이런 기능은 협업자간 같이 써 줘야 시너지가 납니다.)

사실 이런 신규 기능들은, 디자이너의 관습/관성 탓에, 혹은 바쁜 업무 탓에 몸에 익히는 것이 쉽지 않습니다. 저 역시도 바쁜 와중에는 위의 기능들에 손도 안가지요. 마치 포토샵 7을 다루듯, 익숙한 기능만 쓰게 됩니다.

하지만, 젊은 여러분들은 미리미리 이런 기능들을 몸에 배개 하여 더 빠르고, 더 쉽게 디자인하기를 바랍니다.

항상 이야기하는 거지만, 디자이너도 운동선수처럼 작업자세 (왼손은 항상 ctrl,alt, shift 위에) 와 부단한 연습이 필요한 직업입니다.

화이팅!

 

– BS Kim (가치디자인그룹)[catlist name=”Design Tip” numberposts=5 excerpt=”yes” pagination=”yes” excerpt_size=”0″ title_only=”yes“]