6. 음식점 홈페이지 만들기
(1) 메인 페이지 만들기
음식 이미지를 왼쪽에 강하게 부각시키고 오렌지 색 계통을 사용하여 입맛을 돋울 수 있게 제작한 홈페이지입니다. 음식 이미지 아래에 패턴을 자연스럽게 넣고 오른쪽엔 다른 음식사진을 소개하여 산뜻하고 깔끔한 느낌을 줍니다.
[메인페이지]
① 메뉴(Menu, Navigation) 만들기
- 해상도 1024*768에 맞춰서 제작할 새로운 문서(document)를 엽니다.
- 로고(logo)는 음식점 시안의 특성에 맞는 적절한 서체를 사용하여 제작하여 왼쪽 상단에 배치합니다. 로고(logo)의 특성에 따라 색상 및 효과를 조절하여 디자인을 완성합니다.
- 오른쪽 상단에 home, sitemap, login 등의 텍스트 메뉴(text menu)를 배치합니다.
- 오른쪽 상단에 home, sitemap, login 등의 텍스트 메뉴(text menu)를 배치합니다.
-‘ASAFOOD’ 클릭 시 나타나는 서브메뉴(인사말, 음식점 소개, 요리사/직원 소개, 음식점 위치, 채용모집)를 배치합니다.
② 메인비주얼(Main Visual) 만들기
- 메인비주얼에 사용될 일러스트 이미지와 음식이미지를 준비합니다.
- 하단 내용 배경 이미지(bg)에 살짝 걸쳐서 음식 이미지를 왼쪽에 배치합니다.
- 패턴 이미지를 배경 이미지(background image)로 배치합니다.
- 오른쪽으로 다른 음식사진을 배치합니다.
※ 오브젝트 안쪽으로만 음식 사진이 보이도록 하는 클리핑 마스크(Clipping Mask)를 만들어 줍니다.
- 마지막으로 전체적인 디자인 콘셉트에 맞게 '맛있는 즐거움과 기쁨이 가득한 아사 레스토랑'이라는 슬로건을 배치하고 설명 문구를 넣어줍니다. 녹색과 노란색과 오렌지색을 이용해서 그라데이션(gradation) 효과를 주어 타이포그래피(typography)를 완성합니다.
③ 콘텐츠(Contents) 만들기
- 오렌지 계열의 색상으로 영역을 만들고 게시물이 노출되는‘NEWS & NOTICE' 게시판을 왼쪽에 배치합니다. 메인 디자인 완성 후 솔루션으로 게시판을 연동해야 하는 부분입니다.
- 'NEWS & NOTICE' 게시판 아래쪽으로 '온라인예약', ‘고객센터’배너를 제작하여 배치합니다.
- 'NEWS & NOTICE' 게시판 오른쪽에‘SPECIAL MENU’배너를 제작하여 배치합니다.
[01], [02], [03] 숫자 버튼을 누를 때마다 이미지가 바뀌도록 플래시로 제작할 배너입니다.
- 'EVENT & COUPON' 배너와 하단에 카피라이트 내용을 넣어 완성합니다.