키스맥 - 포토샵 강좌 매킨토시 전문 웹 매거진 웹진

  + 파일메이커 기초편
  + 4th Dimension
  + 리얼베이직
  + OS X 10.3
  + 홈페이지 만들기
  + 포토샵 강좌
  + 디카 완전정복
  + 실무로 배우는 Quark
  + MLayout
  + iPod 강좌
  + html 강좌
  + 간단매뉴얼&팁
  + 5세대 iPod 강좌
  + iTunes 한 컷 강좌
  + iPod 한컷강좌
            


18회. 홈페이지 디자인 -6-


지난 강좌에서 aqua 버튼을 만들기 위해 위 이미지 까지 작업을 하고 저장을 했다. 채널 판넬에서 Alpha 1 채널을 선택하고 아래 버튼중 'Load channel as selection'을 클릭해서 하얀부분의 선택 영역을 만든다.
그 다음 다시 레이어 판넬에서 지난 시간에 '배경'이라고 명명한 레이어를 선택한다.

그렇게 하면 하얀바탕에 위 그림과 같이 라운드의 선택영역이 보인다. 이 부분에 색을 칠하는데 오늘은 단색만을 칠하는 것이 아니라 그라데이션을 이용하여 색을 칠할 것이다.

도구상자에서 그라디언트 툴을 선택하고 상단에서 위 이미지의 파란색 테두리 부분을 클릭한다. 그러면 아래와 같은 그림이 나오는데 이에 대한 설명은 3회 강좌에서 소개한바 있으니 읽어보시기 바란다. 여기서는 아래와 이미지와 같은 방법으로 세팅을 해줄 것이다.

위는 한쪽끝은 #57B9FD의 색으로 다른 한쪽은 하얀색(#FFFFFF)으로 되어 있다. OK를 한다음에 아래 이미지의 파란색 화살표의 방향과 길이만큼 클릭드래그 한다. 그러면 선택영역 안으로 아래 그림과 같이 색이 칠해진다. 이렇게 배경이 만들어 졌다.

그러면 레이어 판넬에서 버튼 set 안에 새로운 레이어를 하나 만들고 이름을 "바"라고 고쳐준다. '바'레이어를 선택하고, 이때 작업창에 라운드된 선택영역이 남아 있는지 확인한다. 없다면 채널 판넬에서 alpha 1 채널을 다시 선택영역으로 지정해준다. 이 선택영역에 #FFFFFF의 하얀색을 칠해준다. 그다음 상단 메뉴에서 'Edit > Free Transform' 하여 크기를 아래 그림과 같이 변형시켜준다.

Enter키를 눌르면 줄어든 이미지와 그 크기에 맞는 선택영역이 나타난다. 그러면 Command + D키를 눌러 선택영역을 해지 시키고 도구상자에서 이동툴을 선택하여 아래 이미지와 같이 위치시킨다.

상단메뉴에서 'Filter > Blur > Gaussian Blur'을 클릭해서 아래와 같은 창이 나오면 Radius 값을 4.8 정도 입력한다. OK를 클릭하면 아래와 같은 결과물을 볼 수 있다.

다시 버튼 set에서 레이어를 추가하고 이름을 '테두리'라고 한다. 다시 채널 판넬에서 Alpha 1 채널을 선택영역으로 하고 '테두리' 레이어를 선택한다. 그다음 상단 메뉴에서 'Edit > Stroke'를 클릭한다 아래와 같은 상자가 나오면 세팅을 아래 그림과 같이 마추고 컬러는 배경색이 파란색 보다 조금 진한색으로 설정한다. 필자는 #098DE8의 색으로 지정했다.

OK를 클릭하면 파란색의 테두리가 만들어 진것을 볼 수 있다. 이때 테두리가 조금 진하다는 생각이 들면 레이어판넬에서 opacity 값을 조정한다.

이렇게 해서 버튼의 모양은 만들어 졌다. 다음시간에는 계속해서 텍스트를 넣는 것과 만들어진 버튼을 홈페이지.psd 작업창으로 옮기는 법에 대해서 알아보도록 하겠다.



다음글 - 19회. 홈페이지 디자인 -7-
현재글 - 18회. 홈페이지 디자인 -6-
이전글 - 17회. 홈페이지 디자인 -5-