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

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


19회. 홈페이지 디자인 -7-


지난강좌에 이어 만들어진 버튼에 텍스트를 넣는 법에 대해서 알아보도록 하겠다. 맨 처음 '홈페이지디자인' 강좌 분을 시작할때 모두 main, profile, photogallery, guestbook, links, e-mail 등 6개의 버튼을 만들기로 하였다. 그럼 지금 만들어진 하나의 버튼을 어떻게 6개로 만드는 간단한 방법에 대해서도 알아보도록 하겠다.

먼저 만들어진 버튼에 Main 이라는 글을 써보도록 하겟다. 포토샵에서 텍스트를 삽입하는 방법은 여러차례 설명을 했으니 따로 설명하지는 않겠다. 아래 그림과 같이 자신이 원하는 형태의 글씨체를 이용하여 적당한 크기와 색을 가진 글씨를 써보도록 하자.

위 그림을 보면 텍스트 밑으로 그림자가 약하게 보인다. 만드는 방법은 'MAIN'이라고 쓰여진 텍스트 레이어를 복사한다. 그다음 복사된 레이어를 원본레이어 밑으로 내린 다음에 색을 검정색으로 바꿔준다. 그다음 'opacity' 값을 10% 정도 하고 복사된 레이어를 우로 1px, 아래로 1px 옮긴다.

이번에는 만들어진 버튼을 6개로 순식간에 만들어 보도록 하겠다.

레이어팔레트에서 '버튼 Set'을 선택하고 키보드에서 'com + option'키를 조합해서 누른 상태에서 클릭드래그 한다. 그러면 신기하게도 버튼이 복사가 되는 것을 화면에서 볼 수 있다. 그리고 레이어팔레트를 보면 '버튼 copy Set'이 하나 생긴 것을 볼 수 있다. 이런 식으로 버튼을 6개 만든다.

[여기서 com + option 이라는 단축키가 나오는데 이것에 대해 잠시 설명을 하면 com을 누른 상태에서 레이어나 셋을 드래그하면 이동이 되는 것을 볼 수 있다. 이는 도구상자에서 이동툴과같은 역할을 하는 것이다. 그리고 option 키를 조합해서 누르면 복사가 된다.]

위의 그림을 보면 6개의 버튼이 만들어 졌고 버튼에는 모두 MAIN 이라는 글이 써있다. 이제는 MAIN 이라고 써있는 글을 각각의 메뉴에 맞게 바꿔 보도록 하겠다.

위 그림(좌)과 같이 '버튼 copy set'을 보면 그 밑으로 레이어가 보일 것이다. 그러면 파란색 상자가 쳐져있는 부분을 더블릭하게 되면 위 그림(우)과 같이 해당 레이어의 텍스트부분이 반전이 되는 것을 볼 수 있다. 이제 그 텍스트는 수정이 가능하다. 'PROFILE'이라고 텍스트를 넣어보자. 바꿔보니 밑에 그림자부분이 영 어색하다. 그림자 부분도 위 그림(좌)의 빨간색 상자를 더블클릭하여 텍스트를 변경해 준다.

위와 같은 방법으로 아래 그림과 같이 나머지 텍스트 들도 모두 메뉴에 맞게 바꿔준다.

이번에는 만들어진 버튼을 전에 작업하던 홈페이지 메인창으로 옮겨 보도록 하겠다.
먼저 '홈페이지.psd'파일을 연다.

버튼을 만들던 작업창을 선택하고 레이어팔레트에서 '버튼 Set'을 선택한다. 그상태에서 'com'키를 누른 상태에서 홈페이지 작업창으로 클릭드래그 한다.

홈페이지 작업창으로 버튼이 이동 된것을 볼 수 있다. 이제는 그 버튼을 우리가 원하던 위치로 옮기도록 하겠다. 옮기는 법은 역시 com + 클릭드래그로 해주면 된다.

이렇게 하나의 자리를 잡아준 다음에 나머지 버튼들도 순서에 맞게 아래 그림과 같이 이동시켜 준다.

이렇게 번튼이 완성이 되었다. 다음 시간에는 페이지 하단에 들어가는 '카피라이트'부분을 디자인 하는 법에 대해서 배워보도록 하자.



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