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