페인트샵으로 기본 버튼을 만들어 봅니다. 3가지 사례입니다.
포토샵으로 만들기는 이쪽 : http://jjangfree.tistory.com/325
케이스 1.
데모
1. 300 x 200px 배경을 만들고, 보기 > 격자 , 안내선 / 격자에 맞춤/ 안내선에 맞춤을 모두 체크합니다.
2. 선택영역도구
특히 테두리의 경우, 더 그렇습니다.
3. 보기 > 격자 와 안내선 을 해제합니다.
4. 레이어추가하고, 선택영역안에 #d3d3d3을 채웁니다.
* 조금 더 진하게 하시려면, #c0c0c0 등의 다른 색을 쓸 수 있습니다.
5. 선택영역 > 수정 > 축소 1px 실행
6. 레이어 추가하고, 축소된 선택영역 안에, #f5f5f5 를 채웁니다.
* #ffffff 나 #ededed등 다른 색상으로도 채울 수 있습니다.
7. 선택영역 > 수정 > 축소 2px 실행
8. 레이어추가하고, 선택영역안에 전경-배경 그라데이션을 채웁니다.
* 전경색 #f5f5f5 - 배경색 #d3d3d3
* 그냥 밝은회색계열의 , 적당한 그라데이션을 넣으셔도 됩니다.
9. ctrl 을 누른 상태로, 선택영역의 아래부분을 잘라내 줍니다.
10. 레이어를 추가하고, 흰색(#ffffff)이나 #f5f5f5 를 채운 다음, 레이어 불투명도를 조절합니다.
11. Ctrl + D로 선택영역해제합니다.
12. 사후조정 : 각 레이어 마다, 곡선등으로 농도를 조절 할 수 있습니다.
ex. 테두리가 너무 연하다 싶다면, 곡선으로 어둡게 합니다.
13. 추가장식 : 글자나 모양을 넣고(#808080), 그림자를 흰색으로 넣을 수 있습니다.
* pspimage 입니다.
button1.zip
케이스 2.
데모
1. 300 x 200px 투명배경만들기
2. 전경색 흰색, 배경색 붉은 그라데이션(#e61212~#ca0101)
3. 레이어(2래스터=Raster2) 올리고, 단축키 S 누르고, 둥근직사각형 선택도구로, 버튼모양을 만듭니다.
*선택영역은 우클릭으로 이동가능하며, 가운데정렬은 선택영역편집
스크립트_제한의 가운데레이어(center layer) 실행한 다음, 선택영역편집버튼
4. 채우기도구(F) 로 버튼모양에 배경색(우클릭)을 채웁니다.
5. 여기부터는 현재모양에서 확장하는 방법과 축소시켜 처리하는 방법으로 할 수 있습니다.
축소시키는 방법으로 해봅니다.
6. 레이어(3래스터=Raster3)를 추가하고, 선택영역 > 수정(or변형) > 축소 1PX 하고, 흰색(전경색)으로 채웁니다.
7. 또 레이어를 추가(4래스터)하고, 선택영역 > 변형 > 축소 1PX 하고, 붉은 그라데이션(배경색)으로 채웁니다.
8. 글로스효과를 줍니다.
a. 선택영역이 그대로 있는 상태에서, 전경색에 퇴색된흰색 그라데이션을 선택하고,
b. 선택영역도구(S) 선택한 다음, Ctrl 버튼을 누른 상태에서(- 표시됨), 현재 선택영역의 아래쪽 부분을 제거해줍니다.
* 정확하게 반정도 잘라내려면, 사용자정의선택영역(Custom Selection) 누르고, 수학적으로 위.아래의 평균값으로 선택하면 됩니다.
c. 이제 레이어를 또 추가(5래스터)하고, 퇴색된흰색그라데이션(전경색)을 채우고, 레이어 불투명도를 55% 정도로 해줍니다.
d. Ctrl + D 눌러서 선택영역 해제합니다.
9. 안쪽의 흰색테두리처럼 보이는 부분을, 유행따라 아래쪽 부분을 잘라냅니다.
a. 3래스터(Raster3=흰색으로 채워진 레이어)를 선택하고, 선택영역도구(S)에서 직사각형선택영역으로 아래쪽을 지정합니다.
b. 선택영역 > 수정(or변형) > 페더링을 30px 정도 실행합니다. 선택영역이 넓게 퍼집니다.
c. Delete 버튼을 2번 누르고, Ctrl + D 로 선택영역해제합니다.
거의 다 된 겁니다.
10. 참고로, 가장 아래의(버튼의 가장바깥쪽 부분=2래스터=Raster2) 레이어를 선택하고,
조절 > 밝기 및 대비 >밝기/대비에서 밝기를 -20~-30정도 하시거나,
조절 > 밝기 및 대비 > 곡선을 어둡게로 해주셔도 좋습니다. 안하셔도 됩니다.
PSPIMAGE파일입니다.demo.zip
* http://www.pinoy7.com/psptutorials/interfacedesign.shtml 피노이7의 인터페이스강좌(영문)도 보시면 좋습니다.
케이스 3.
데모
1. 300 x 200px 투명배경 만들기
2. 배경색- 전경(#fff49d).배경(#fdc631) 그라데이션
3. 레이어 올리고(2래스터), 선택영역도구(S)의 직사각형으로 네모 만들기
4. 2래스터 레이어에, 채우기도구로 우클릭으로 배경색그라데이션 채우기
5. 래스터레이어 추가(3래스터)하고, 선택영역도구(S)의 직사각형으로 ctrl 누른 상태에서, 아래쪽을 잘라내 줍니다.
* 정확하게 자르려면, 사용자선택영역의 위.아래를 더해서, 2로 나눈 평균값으로 범위를 잡으면 됩니다.
6. 채우기도구로 남아있는 상단부분 직사각형부분에 전경색(#fff49b)을 채웁니다.
레이어 불투명도 40%로 합니다.
Ctrl + D로 선택영역 해제합니다.
* 전경색을 흰색(#ffffff)으로 놓고, 채우기하셔도 됩니다. 불투명도는 30%정도 하시면 됩니다.
7. 2래스터 선택하고, 선택영역을 뽑습니다.
* Ctrl + A > Ctrl + F 후 띄워진 유동레이어에 우클릭 해서, 유동레이어 삭제하시거나, 요술봉으로 투명영역 클릭후 선택영역 > 반전(shift + i) 합니다. (요술봉은 투명영역이 있을 경우엔 비추입니다. 앤티앨리어스를 못뽑습니다.)
** 위 4번에서, 선택영역 있을 때, 선택영역 > 선택영역 불러오기/저장 > 알파채널에 저장하셨다가,
지금 불러와서 사용해도 됩니다.
8. 레이어추가(4래스터)하고, 효과 > 3D효과 > 오려내기 실행
* 불투명도를 75% 정도로 하셔도 좋습니다.
오려내기에서 하는 것 보다는, 100으로 일단 해놓고, 레이어쪽에서 조정하는 게 낫습니다.
** 지금하는 오려내기나 아래 9번의 테두리크기를 2px로 잡았는데, 줄일 생각으로 비율따라 만들어서 그렇습니다.
실제 사용되는 버튼크기로 만들거면, 1px이 좋겠습니다.
9. 가장 아래 레이어 선택하고, 상단메뉴 선택영역 > 수정 > 확장 2px 정도합니다.
* 지금 하는 건 확장해서 테두리를 넣는 방법입니다.
아예 처음부터, 선택영역 >수정 >축소2px 해서, 레이어를 올려서 작업하는, 축소방식으로 하셔도 됩니다.
* 선택영역도구의 앤티앨리어스에 체크해제하시면, 작은 버튼의 경우 테두리가 더 깔끔하게 나옵니다.
6. 1래스터(처음에 만든 투명배경)에, 팔레트의 배경색 그라데이션 풀고,
채우기도구로 우클릭으로 배경색(#fdc631) 채우기
* 처음에 만들었던, 전경(#fff49d).배경(#fdc631) 그라데이션으로 채워도 됩니다.
7. 1래스터에 상단메뉴 조절 > 밝기 및 대비 > 밝기/대비를 조정해 줍니다.
* 수치는 자유입니다. 여기는 -40, -40 정도로 했습니다.
pspimage파일입니다.Image1.zip