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

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


17회. 홈페이지 디자인 -5-


이시간에는 지난회에 말한대로 왼쪽에 들어갈 홈페이지 버튼을 만들도록 하겠다. 버튼은 매우 다양한 형태로 만들 수 있다. 앞으로 몇 회에 걸쳐서 다양한 버튼 만드는 방법에 대해서 알아 보도록 하겠다.

먼저 버튼을 만들기 전에 메인상단과 구분하는 선을 넣어주도록 하겠다. 아래 그림과 같이 기존의 만든 가이드라인 아래로 원하는 두께의 경게선 만큼 새로운 가이드라인을 만들어 준다.

가이드 라인을 만들었으면 레이어판넬에서 '상단이미지set' 위에 'set'을 추가하고 이름을 '경계선'이라고 이름을 바꾸어주고 새로운 레이어를 추가한다. 레이어 이름도 '경계선'으로 바꿔준다. '경계선'레이어가 선택되어진 상태에서 기존에 만들어진 가이드라인과 새로 만든 가이드라인 사이 부분을 선택툴로 선택하고 아래 그림과 같이 '#cccccc'의 색으로 채워준다.

자 이제 본격적으로 메뉴버튼을 만들어 보도록 하겠다. 메뉴 버튼의 사이즈는 가로는 150px, 세로는 40px로 6개를 만들 것이다.

지금 현재 작업하고 있는 '홈페이지.psd'화일에서 직접 작업을 해도 되고 새로운 작업창을 만들어서 해도 된다. 이번 강좌에서는 새로운 작업창에서 작업을 하여 기존의 작업창으로 옮기는 것까지 해보도록 하겠다.

지금부터 설명하는 부분은 조금 복작합니 집중을 하고 따라해보기 바란다.

상단메뉴에서 'File > new' 클릭하여 'new'대화상자가 열리면 아래와 같이 세팅을 해준 다음에 'OK'를 클릭한다.

이렇게해서 새로운 작업창이 만들어 지면 도구상자에서 선택툴을 클릭한후 상단의 'Style'에서 'Fixed Size'를 선택후 'W : 150px, H : 40px'를 입력하고 작업창 가운데에 클릭한다. 그러면 작업창에 'W : 150px, H : 40px'가 만들어 질것이다. 그러면 아래의 그림과 같이 예전에 가이드라인을 만드는 방법대로 가로 두개, 세로 두개를 선택영역의 사각형 변에 만들어 준다.

도구상자의 도형툴에서 'Rounded Rectangle Tool'을 선택한 다음 상단의 'Radius'에 6을 입력한다. 그다음 가이드라인으 만들어진 사각형에 아래 그림과 같이 라운드 도형을 만들어 준다.

이쯤되면 도대체 필자가 모하나 하는 생각이 들것이다. 이시간에 만들고자 하는 것은 Aqua 느낌의 버튼을 만들것이다. 위에까지 작업을 했으면 레이어판넬에서 'Set'을 추가후 이름을 '버튼'이라고 만들어 준다. 그리고 레이어를 하나 추가하고 이름을 '배경'이라고 한다.

그다음 레이어 판넬 윗 부분에 레이어탭, 채널탭, 패스탭이 있는데 패스탭을 선택하면 아래 그림과 같이 'Work Path'가 보일 것이다 이 워크패스가 위에서 도형툴로 그려준 패스이다. 패스 부분을 선택영역으로 바꾸어야 하는데 방법은 패스판넬 아랫부분의 버튼 중 세번째에 있는 'Load Path as a Select'를 클릭해준다. 그러면 작업창의 패스 부분이 선택영역으로 바뀔 것이다.

다음은 레이어 판넬의 탭중 'Channels'탭을 클릭하고 채널 판넬이 보이도록 한다. 이 채널은 선택을 더욱 용이하게 하고 같은 위치의 같은 모양을 여러번에 걸쳐서 선택하고 싶을때 사용하는 툴이다. 물론 다른 방법으로도 이용이 가능하지만 이번에는 기본적인 방법에 대해서만 설명을 하도록 하겠다.

선택영역이 위의 그림과 같이 선택되어진 상태에서 채널탭의 아랫부분에 있는 버튼중 두번째 'Save Selection as channel'을 클릭하면 아래의 그림과 같이 'Alpha 1' 채널이 생성된다. 이 채널을 클릭하면 작업창의 배경이 검은 색으로 변하고 선택영역만 하얀색으로 남아있는 것을 볼 수 있다.

'아니, 내가 색을 칠하지도 않았는데 색이 칠해졌네' 하고 놀라는 분들도 있을 것이다. 놀랄것이 전혀 없다. 이것은 하얀색 부분을 어느때이든 선택할 수 있게 기억하는 장치라고 보면 된다. 당장이라도 레이어탭을 클릭하고 '배경'레이어를 선택하면 다시 원래 상태로 돌아가는 것을 볼 수 있다. 그리고 아까와 같은 선택영역을 만들고 싶다면 채널탭을 클릭하여 'Alpha 1'채널을 선택후 채널 판넬 아래 버튼중 첫번째 'Load channel as selection'을 클릭하면 된다. 그러면 선택영역이 만들어 지고 선택영역이 만들어진 상태에서 다시 원래의 모습을 보고 싶다면 '레이어탭 > 배경레이어'를 클릭하면 된다.

그러면 다음 시간에는 본격적으로 Aqua 버튼을 만들어 보도록 하겠다. 아 그리고 저장은 필수!!



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