[1단계]
적당한사이즈로 새창을 하나 열어주세요.저는 가로 세로 500px 픽셀의 새창을 하나열었습니다.
그리고 툴바의 도형툴을 길게 꾸욱~누르시면 나오는 창에서 두번째 [Rounded Rectangle Tool]을 선택해주세요.
상단속성창의 선택부분과 값도 조절해주세요.
Radius값은 높은숫자로 갈수록 라운드사각형의 라운드가 더욱 둥글게됩니다. 저는 5정도로 할께요.
[2단계]
속성값조절이 끝나셨다면 도화지위에 원하는 크기의 버튼을 그려주세요.
그럼 새로운 레이어가 하나추가되면서 예제그림처럼 보이실겁니다.
지금 보여지는 버튼색은 신경쓰지마세요. 뒤에 색 조절하는부분이 나옵니다.
[3단계]
새로생긴 도형레이어를 더블클릭해주세요.
Layer Style이 뜹니다. 왼쪽 아래쪽에서 스타일 중 [Gradient Overlay]를 선택체크해주세요.
앞에 체크박스에 체크가되도 그 칸을 클릭하셔서 그림과같이 파랗게 활성이 되야 오른쪽에 해당세부설정을 할수있습니다.
그럼 오른쪽에 나타나는 그라디언트 속성값을 조절해보겠습니다.
우선, 그림과같이 설정값을 조정하신후 Gradient를 클릭합니다.
[4단계]
버튼을 입체적으로 보이게하기위한 방법중 한가지로 그라데이션이 있습니다.
버튼아래쪽은 조금어둡게 위쪽은 조금밝게 설정하기위한 방법입니다.
그럼 그라디언트 에디터창에서 첫번째 그라데이션을 선택합니다.
원하는색으로 변경하기 위헤서 아래쪽 연필모양을 클릭합니다.
아래쪽 연필모양을 클릭하면 그아래 속성이 활성되면서 컬러가보입니다. 또 컬러창을 클릭해줍니다.
컬러를 선택할수있는 창이뜨면 원하는색상으로 선택하고 OK버튼을 누릅니다.
같은방법으로 오른쪽 맨끝의 연필모양도 선택하고 컬러창이 활성되면 같은방식으로 컬러값을 지정해줍니다.
아래처럼 그라데이션색상을 지정하고난뒤 그라데이션의 가운데 마름모꼴 모양을 잡고
좌우로 드레그하면 그라데이션 영역이조정됩니다. 저는 왼쪽으로 조금더 당겼습니다.
[5단계]
그라데이션 설정이 되었으면 다음은 맨아래의 [Stroke] 를 선택합니다.
오른쪽 스트록 속성창에 보기와 같이 값을 맞춰주세요.
컬러는 내가설정한 그라데이션 값의 중간값정도면 자연스럽게 보여집니다.
[6단계]
다음은 위에서 두번째 [Inner Shadow] 를 선택해줍니다.
오른쪽 속성창의 값 역시 그림과 같이 설정해주세요.
단, 색상을 선택하실때에는 내가 선택한 버튼색상보다 밝게 선택하시면
입체적인 버튼의 반사광같은 느낌을 내실 수있습니다.
저는 주황색에서 명도와 채도를 뺀 색을 적당히 선택했습니다.
[7단계]
모든설정이 끝나면 OK버튼을 누르고 다시 버튼이있는 작업창으로 돌아옵니다.
버튼모양이 완성됐으니 왼쪽 텍스트툴을 선택해서 잘보이는 색상으로 글자를 써주면되겠죠?
이렇게해서 버튼만들기가 완성되었습니다.
레이어스타일 3가지를 활용한 입체버튼입니다.
가장 일반적이고 많이쓰이는버튼 인데 만드는 방법은 모르시던분들~
이렇게 쉽고 간단하게 클릭 몇번으로 버튼완성이 가능하답니다.^^
쇼핑몰 외 홈페이지에도 버튼디자인하실때 유용하게 쓰시길바랍니다.
포토샵 초보자 여러분 처음엔 따라하는데 시간이 좀 걸리시더라도
두번세번째는 아..이렇게 간단하구나 하실꺼에요.
모두들 내쇼핑몰을 내손으로 디자인할수있는 그날까지 힘내세요^^
'기술, 디자인 이야기' 카테고리의 다른 글
| 포토샵강좌 No.10 쉽게만드는 내쇼핑몰 버튼디자인! (0) | 2010/09/03 |
|---|---|
| 포토샵강좌 No.9 실사사진을 오일페인팅한 그림으로 효과주기! (4) | 2010/06/14 |
| 아이패드(iPad) 직접 사용해보니 (6) | 2010/04/09 |
| ★무료다운로드 2탄★ 온/오프라인 쿠폰 디자인! (8) | 2010/02/26 |
| [HTML] 메이크샵 개별디자인 이쁘고 편하게 편집하기 (7) | 2010/02/16 |
| ★무료 다운로드★ 팝업창 디자인! (27) | 2010/02/11 |


댓글을 달아 주세요