포토샵 몰라도 그라데이션 하는 방법!

그라데이션 :: gradation

그림, 사진, 인쇄물 따위에서 밝은 부분부터 어두운 부분까지 변화해 가는 농도의 단계.

그라데이션이라고 하면 두 가지 이상의 컬러를 믹스하여 새로운 컬러를 표현한다고 할 수 있습니다.

두 가지 컬러를 믹스할 경우 보통 파스텔 톤으로 결과물이 나오는 경우가 많습니다.

물론 비비드한 컬러로도 표현할 수 있지만 개인적으로 그라데이션 하면 파스텔 톤이 연상되어지네요.

보기에 이뻐보이는 그라데이션 컬러도 내가 직접하면 색 조합이 엉성하거나 원했던 컬러로 안나오는 경우가 있습니다.

보통 포토샵에서 그라데이션 작업을 주로 하고 있지만

원하는 컬러 조합을 선택하기란 쉽지 않은 과정입니다.

포토샵을 잘 다루고 색 조합이 뛰어난 분들이라면 전혀 문제 될게 없겠지만 포토샵을 잘 다루지 못하지만 그라데이션 작업을 원하시는 분들을 위해 #Blend 사이트를 추천해드립니다.

Blend—Create and customize beautiful CSS3 gradients.

www.colinkeany.com

그라데이션 컬러 조합 사이트인 #Blend 메인 화면은 좌측과 우측이 반으로 나뉘어져 있습니다.

각 각 원하는 컬러를 선택하여 가운데 "Let's Blend!" 클릭하면 그라데이션이 적용되어집니다.

좌측과 우측에서 컬러를 선택하게 되면 아래 부분에 #컬로코드 가 표시가 되어 더욱 편리합니다.

우측 상단을 보시면 네모박스에 값을 왼쪽 오른쪽으로 커서를 이동하면서 각도를 조절해서 원하는 색조합을 할 수 있습니다.

우측 네모 상자 옆에 동르라미 버튼을 누르면
화면에서 가운데부터 점점 색이 변하는 그라데이션으로
표현이 되어집니다.

아쉽게도 Blend 사이트에선 이미지 저장하는 기능을
제공하진 않습니다.

Blend 사이트를 포함해 많은 그라데이션을 쉽고 빠르게
제작할 수 있는 홈페이지들이 많이 있습니다.

uiGradients - Beautiful colored gradients

uiGradients is a handpicked collection of beautiful color gradients for designers and developers.

uigradients.com

전체적으로 블랜드 홈페이지와 비슷한 화면 구성을 가지고 있는 uiGradients 는 이미지 저장이 가능하며

CSS 코드로 출력이 가능한 장점이 있습니다.

좌/우 화살표 커서를 누르면 다양한 컬러 글라데이션을 볼 수 있습니다.

또 하나의 장점은 홈페이지 왼쪽 상단에 'Show all gradients'를 클릭하면 다양한 컬러 그라데이션 샘플들이 볼 수 있어 그라데이션 색 조합에 더욱 도움이 될 것 같습니다.

요즘은 크로마키를 이용한 영상에서도 뒷 배경을 그라데이션 컬로로 표현을 하는 경우도 많습니다.

베너/썸네일/폰트 컬러 등등 다양한 용도로 사용할 수 있는 '그라데이션' 컬러를 소개해드렸습니다.

조금이나마 디자인에 도움이 되었으면 좋겠습니다.

4and20