김프(Gimp)에서 웹 버튼을 하나 만들어 봅니다.
데모
1. 200 x 100 px 흰색 캔버스 만들기
2. 사각선택도구로, 둥근모서리 2 놓고, 100x30px 선택영역을 만듭니다.
방법a. 눈금자켜고 안내선 지정해놓고, 100x30px로 만들기
보기 > 눈금자표시 & 보기 > 안내선표시 & 보기 > 안내선에 맞추기 해놓고,
눈금자에서 마우스 꾹눌러 드래그로 안내선을 100x30px 가 되도록 가져다 놓습니다.
확대를 많이 해야 정확하게 눈금이 보입니다.
여기는 50 ~ 150 x 25 ~ 55 로 100x30px로 만들었습니다.
이 상태에서 사각선택도구로 안내선의 안쪽교차영역에, 선택해주면 됩니다.
방법b. 격자로 모눈을 만든 다음, 거기에 100x30 px로 맞춥니다.
이미지 > 격자설정이나(이 이미지만 적용),
편집 > 기본설정 > 기본격자를 가로10 세로10으로 놓고(모든 이미지에 적용),
보기 > 격자표시 & 보기 > 격자에 맞추기 체크
가로 10칸 과 세로 3칸으로 사각선택영역 만듭니다.
보기 > 격자표시 & 보기 > 격자에 맞추기 모두 체크해제 하면 됩니다.
3. 레이어 추가하고, #700500 색으로 채웁니다.
4. 레이어 추가하고, 선택 > 줄이기 1px 실행한 다음,
전경색을 #ffc0c0 으로 놓고, 전경색을 투명하게 그라디언트로
CTRL 누르고 드래그해서 채워줍니다.
* 불투명도도 줄일 수 있습니다. 나중에 버튼 완성 후에 보면서 줄이는 게 더 좋습니다.
5. 다시 한번, 레이어 추가하고, 선택 > 줄이기 1px 실행한 다음,
#8a1818 색을 채우기도구로 채워줍니다.
6. 레이어 추가한 다음, 전경색을 흰색으로 놓고, 전경색을 투명하게 그라디언트로
CTRL 누르고 드래그해서 채워줍니다.
7. 바로 위 6번에서 작업한 레이어 속성을 덧씌우기나 명도 등으로 하고, Ctrl + D 로 선택영역 해제합니다.
* 150% 확대라서, 선명하지 않습니다. 확대를 100%로 하면 본래 크기로 나옵니다.
8. 완성됩니다.
* 흰색으로 글자같은 것 써주시고,
Layer effects의 Inner shadow 같은 거 넣어주시면, 좋습니다. 이 부분은 나중에 봅니다.
* 색상 > 색상-채도 에서, 버튼 색을 바꿔줄 수 있습니다.