디지털콘텐츠 No.1 (주)아사달 디자인센터
내정보 SI 도메인 호스팅 디자인몰 솔루션몰 홈페이지몰 모바일 디자인센터 게임 고객지원
로그인 회원가입 장바구니 주문내역
트렌드뷰 웹강좌 자료실
배경이미지
베스트 키워드
주간 월간 연간
검색  상세검색
이벤트 디자이너를 위한 디자인 세상 아사달이 만들어갑니다.
디자인센터 보유 현황 오늘어제이번달지난달누적
웹기획
HTML 사용법
포토샵 사용법
일러스트 사용법
플래시 사용법
일러스트 만들기
일러스트 배경 만들기
일러스트 아이콘 만들기
일러스트 그래픽 만들기
편집사진 만들기
배경 편집사진 만들기
사물 편집사진 만들기
플래시 모션 만들기
플래시 스크립트 만들기
웹구성 요소 만들기
  - 버튼 만들기
  - 타이틀바 만들기
  - 메뉴 만들기(가로)
  - 메뉴 만들기(세로)
  - 배너 만들기
  - 메인비주얼만들기
  - 팝업만들기1
  - 팝업만들기2
  - 팝업만들기3
  - 팝업만들기4
웹 페이지 만들기
비즈니스 홈페이지 만들기
생활 홈페이지 만들기
쇼핑몰 홈페이지 만들기
메뉴 만들기(가로)
Home > 디자인 센터 > 웹강좌 > 웹구성 요소 만들기 > 메뉴 만들기(가로)
가로메뉴 만들기1 가로메뉴 만들기2

3. 메뉴 만들기

* 메뉴란?

사이트에서 각 페이지로 이동이 가능하도록 하는 매우 중요한 요소입니다. 따라서 시안 제작 시 메뉴 디자인 및 편의성이 중요시 되고 있으며, 디자인 제작 후 플래시로 제작하는 것이 대부분이기 때문에 플래시 구현까지 고려하여 디자인을 해야 합니다.


(1) 가로 메뉴 만들기

- 비즈니스, 교육, 커뮤니티 분야의 시안 등 보편적인 디자인 시안에서 활용도가 많은 메뉴 형태이며, 디자인 시안 전체의 질량감에 따른 안정적이고 보기 좋은 구도로 디자인하여야 합니다.


[디자인 예시]


[실전제작]


<완성된 가로형태의 메뉴>


 메뉴 File>New(ctrl+N)를 선택하여 새로운 작업창(740X110)을 엽니다.



 툴박스의 전경색에서 #3F500C 색상을 선택 후 Rounded Rectangle Tool(사각형 라운드 도형툴)을 선택합니다.



 툴박스의 Rounded Rectangle Tool(사각형 라운드 도형툴)을 이용하여 메뉴의 배경이미지를 적용합니다.



 레이어 팔레트에서 배경 이미지 레이어(Layer)를 선택하고 Layer>Layer Style>Drop Shadow를 적용합니다.



 적용값을 그림과 같이 입력하면 녹색 배경 이미지에 그림자 효과가 나타납니다.



 레이어 팔레트에서 [Ctrl]키를 누른 채 레이어의 썸네일 이미지를 클릭하여 선택영역을 생성한 후 배경 이미지에 하이라이트를 주기 위해 레이어 팔레트에 새로운 레이어(Layer)를 생성합니다.



 하이라이트 레이어(Layer)를 선택한 후 foreground color를 흰색으로 지정하고 툴 박스의 Gradient Tool을 선택합니다.



 Gradient Edit 창의 Foreground to Transparent를 선택한 후 ok 버튼을 클릭합니다.



 하이라이트를 적용하기 위해 Select>Modify>Contract를 선택 후 Contract Selection 값을 2pixels 입력합니다.



 Gradient Tool을 선택한 후 화살표 아래 화살표 방향으로 마우스를 드래그하여 하이라이트를 적용합니다.하이라이트 적용 후 다소 딱딱해 보였던 배경 이미지가 부드러운 느낌으로 바뀌었습니다.