[3분 PT] ColorPicker를 활용해서 만드는 그라데이션.

이번 주에 자유 주제로 발표할 기회가 있었는데 저는 이번에 제 Personal Brand에 관해서 정의를 해보았습니다.
그 와중에 제 사진을 넣을 페이지가 있었습니다. 
 

 
그런데 왠지 이미지와 배경간에 부조화가 느껴지지 않으신가요? 물론 디자이너분이시라면 효과적으로 처리하시겠지만
일반인이라면 그런게 조금 힘들겠지요? 저도 일반인인지라 어떻게 처리해야 될지 막막했습니다. 그래서 그동안에 배운 것 중 그라데이션 효과를 주고자 했습니다. 그럼 아래와 같이
 

줄 수 있었지요. 물론 다른 방법이 있기도 하지만 제가 사용한 방법에 대해서 잠깐 언급드리고자 합니다. 
우선 사전에 필요한 프로그램이 있습니다.

Color Picker.zip

 
바로 ColorPicker라고 하는 것인데요. 프리웨어라서 어디서든 사용가능합니다. 이 프로그램의 용도는 조금 있다가 말씀드리겠습니다. 

우선은 사진 위에 그라데이션 효과를 줄 범위를 설정합니다. 물론 글자가 앞으로 나오기 위해서는 글자 개체는 제일 앞으로 나와있어야 하겠지요.

이제 ColorPicker를 사용해야 합니다. 

이 ColorPicker라고 하는 것은 지금 화면상에 떠있는 모든 요소의 색상을 뽑아낼 수 있는 프로그램입니다. 사실 지금 화면에 나와있는 배경색은 기존에 정해져 있는 템플릿의 색상이고 당연히 디자이너가 RGB값을 적절히 배합한 결과이겠지요. 이 말은 즉, 우리도 이 색을 쓰기 위해서는

 위에 나와있는 표준색상을 쓰는것이 아니라

사용자 지정 색상을 통해서 RGB값을 직접 입력해줘야 합니다. ColorPicker는 배경의 RGB값을 알려줍니다.
우선 프로그램을 실행하면 다음과 같이 뜨는데 그중에 스포이드 모양을 선택하고 배경에 드롭해줍니다.

 그러면 RGB값이 배경의 색으로 나오겠지요.

 
자 이제 우리가 할 일은 지금 화면상에 뜬 (0,174,239)라는 값을 아까 그 네모에 적용시키면 됩니다. 물론 사전에 그라데이션을 주기로 했으니까 그라데이션 채우기로 선택해야됩니다.

우선 중지점이 처음에는 3개가 있고 저는 두개만 사용할 것이기 때문에 중간에 있는 중지점은 날려버립니다. 그리고 가장 좌측에 있는 중지점의 색을 아까 그것으로 합니다. 맨 우측에 있는 중지점은 아무색으로 선택되어있어도 상관없습니다. 어차피 이 값은 투명도를 100%으로 처리함으로써 실제로는 안보이게 됩니다.

그런데 그라데이션의 방향이 조금 그렇지요? 이건 각도를 조절하면 적절한 사이즈가 나옵니다. 물론 지금 같은 케이스는 각도가 0도 이어야겠지요.
조금 그라데이션 효과가 모자른다하면 중지점을 가운데 하나더 추가하고 투명도를 역시 조절하면 됩니다.

이렇게 테두리에 투명 그라데이션을 입혀서 조금 부드럽게 처리할 수 있습니다. 결과 영상도 잠깐 보겠습니다.

물론 화면 전환시 조금 흔적이 남기는 하지만 그래도 일반인이 할 수 있는 효과로는 가장 쉬운 효과가 아닐까 생각해보네요.

이번 포스팅에선 ColorPicker를 통해서 원하는 개체의 색을 뽑아오고 그 색을 바탕으로 테두리에 투명 그라데이션을 주는 것을 같이 해보았습니다.