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

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


20회. 홈페이지 디자인 -8-


우리가 홈페이지를 돌아다니다 보면 그 홈페이지의 하단에 'Copyright ⓒ 2004 [회사명]. All rights reserved.'이렇게 써있는 것들을 마니 본 적이 있을것이다. 물론 없는 경우도 많이 있고, 하단이 아닌 왼쪽이나 오른쪽에 위치한 경우도 많다. 우리는 그 중에서 가장 보편적인 위치인 하단에 들어가는 것으로 작업을 하겠다.

먼저 지난시간 까지 작업한 '홈페이지.psd'파일을 연다.

레이어 판넬에서 하나의 set을 추가한후 이름을 'copy'로 바꿔준다. 그 다음 세로운 레이어 하나를 생성하고 이름을 'copy 배경'이라고 한다. 그리고 도구상자에서 선택툴을 클릭한후 상단에서 'Style > Fixed Size'에서 가로 800px 세로 50px를 입력한후 아래 그림과 같이 파란상자안의 위치를 선택한다.

이때 선택영역은 폭은 정확하게 맞아야 하며 높이는 버튼 아래로 어느 위치에 있든 상관이 없다.

선택영역에 '#cccccc'의 색을 칠해준다. 조금 높이가 두꺼워 보인다면 com + t를 눌러 크기를 정당하게 변경시켜준다. 필자는 아래 그림과 같이 크기를 변경시켰다.

도구상자에서 선택툴을 선택후 상단의 'Style > Normal'로 바꿔주고 아래 그림과 같이 선택후 '#9a9a9a'의 색으로 칠한다.

포토샵에서 가로 10px 세로 10px의 새로운 창을 열고 바탕을 '#cccccc'로 칠한다. 새로운 레이어 하나를 생성한후 돋보기툴을 이용하여 아래 그림과 같이 최대한 확대한다.

그러면 아래 그림과 같이 한쪽 구석에 원형의 선택툴을 이용하여 선택후 하얀색으로 칠해준다. 'com + d'를 이용하여 선택영역을 해제해준다. 다음 하얀원이 그려진 레이어를 선택후 아래그림과 같이 하여 'Layer Style' 대화상자를 연다.

좌측에 옵션중 'Inner Shadow'를 선택후 Opacity값을 40으로 주고 OK를 클릭한다. 그러면 아래와 같이 그림이 변화는 것을 볼 수 있다.

그런후 상단메뉴에서 'Edit > Define Pattern'을 선택한다.

위와 같은 대화 상자가 나타나면 'Pattern 1'이라고 써진 부분에 적당한 이름을 입력하고 OK를 클릭한다.

다시 홈페이지.PSD 작업창으로 돌아와 레이어 판넬에서 copy 배경 레이어를 선택후 com키를 누른 상태에서 다시한번 레이어를 클릭해준다. 그러면 레이어에 있는 모양이 선택영으로 둘려지는 것을 볼 수 있다. 그리고 Option 키를 누른 상태에서 선택영역에서 보여지는 부분중 상단에 진한 부분을 드래그해준다. 그러면 그 부분만 선택영역이 지워진것을 볼 수 있다.

새로운 레이어를 하나생성해준다. 그다음 상단 메뉴에서 'Edit > Fill' 한다. 그다음 Fill 대화상자가 나타나면Use를 Pattern으로 설정해주고 Custom Pattern에서 조금전에 저장한 패턴을 찾아서 설정해준다.

자 아래와 같은 결과물이 나올 것이다.

그러면 다음시간에는 텍스트를 넣고 꾸미는 법에 대해서 배워보도록 하겠다.



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