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

 배경 이미지 위에 구분선을 주기 위해 레이어 팔레트에 새로운 레이어(Layer)를 생성합니다. Line Tools을 선택한 후 배경 이미지 위에 정확한 사선을 긋기 위해 키보드의 [Shift] 키를 누른 상태로 마우스를 드래그하여 사선을 완성합니다.



 사선에 효과를 주기 위해 Layer>Layer Style>Drop Shadow를 선택한 후 아래와 같이 값을 입력하여 효과를 적용한 후 사선 레이어(Layer)의 Fill 값을 30%로 조정합니다.



 효과가 적용된 사선을 메뉴 개수에 맞게 일정한 간격으로 복사하여 적용합니다.



 툴박스에서 Type Tool을 선택한 후 회사소개, 제품소개, 고객센터, 채용정보, 커뮤니티의 메뉴 텍스트를 입력하여 적절히 배치합니다.



 메뉴의 마우스오버 효과를 적용하기 위해 툴박스에서 Pen Tool을 선택한 후 마우스오버 효과가 적용될 회사소개 메뉴 부분에 사각모양을 만듭니다.



 Pen Tool로 만들어진 패스 팔레트에서 레이어에서 Ctrl 키를 누른 채 패스 레이어의 썸네일 이미지를 클릭하여 선택영역을 생성합니다.



 마우스오버 효과를 주기 위한 새로운 레이어(Layer)를 생성한 후 Layer>Layer Style>Drop Shadow를 아래와 같이 값을 입력하여 효과를 적용합니다.



 마우스오버 시 보이는 서브메뉴 텍스트를 아래쪽에 배치하여 가로형태의 메뉴를 완성합니다.