김프(Gimp)에서 웹 버튼을 하나 만들어 봅니다.

 

 

데모

김프

 

 

1. 200 x 100 px 흰색 캔버스 만들기

 

2. 사각선택도구로, 둥근모서리 2 놓고, 100x30px 선택영역을 만듭니다.

    gimp 강좌 

   방법a. 눈금자켜고 안내선 지정해놓고, 100x30px로 만들기

         김프 강좌
        보기 > 눈금자표시 & 보기 > 안내선표시 & 보기 > 안내선에 맞추기 해놓고,
        눈금자에서 마우스 꾹눌러 드래그로 안내선을 100x30px 가 되도록 가져다 놓습니다.
        확대를 많이 해야 정확하게 눈금이 보입니다.
        여기는 50 ~ 150 x 25 ~ 55 로 100x30px로 만들었습니다.
        이 상태에서 사각선택도구로 안내선의 안쪽교차영역에, 선택해주면 됩니다.

   방법b. 격자로 모눈을 만든 다음, 거기에 100x30 px로 맞춥니다.

        gimp 강좌

        이미지 > 격자설정이나(이 이미지만 적용),
        편집 > 기본설정 > 기본격자를 가로10 세로10으로 놓고(모든 이미지에 적용),
        보기 > 격자표시 & 보기 > 격자에 맞추기 체크
        가로 10칸 과 세로 3칸으로 사각선택영역 만듭니다.
        보기 > 격자표시 & 보기 > 격자에 맞추기 모두 체크해제 하면 됩니다.

 

 

 

3. 레이어 추가하고, #700500 색으로 채웁니다.

   김프 버튼

 

 

4. 레이어 추가하고, 선택 > 줄이기 1px 실행한 다음,
    전경색을 #ffc0c0 으로 놓고, 전경색을 투명하게 그라디언트로
    CTRL 누르고 드래그해서 채워줍니다.

     

    김프 사용법

    * 불투명도도 줄일 수 있습니다. 나중에 버튼 완성 후에 보면서 줄이는 게 더 좋습니다.

 

 

5. 다시 한번, 레이어 추가하고, 선택 > 줄이기 1px 실행한 다음,
    #8a1818 색을 채우기도구로 채워줍니다.

   gimp 웹버튼

 

 

6. 레이어 추가한 다음, 전경색을 흰색으로 놓고, 전경색을 투명하게 그라디언트로
    CTRL 누르고 드래그해서 채워줍니다.

  

  gimp 버튼 만들기

 

 

7. 바로 위 6번에서 작업한 레이어 속성을 덧씌우기나 명도 등으로 하고, Ctrl + D 로 선택영역 해제합니다.

  gimp 버튼

  * 150% 확대라서, 선명하지 않습니다. 확대를 100%로 하면 본래 크기로 나옵니다.

 


8. 완성됩니다.

   * 흰색으로 글자같은 것 써주시고,
      Layer effects의 Inner shadow 같은 거 넣어주시면, 좋습니다.  이 부분은 나중에 봅니다.

     김프

   * 색상 > 색상-채도 에서, 버튼 색을 바꿔줄 수 있습니다.

+ Recent posts