자연 이미지와 펜션 이미지가 적절한 조화를 이루고 자연 친화적, 감성적인 느낌으로 펜션 홈페이지를 제작해 보겠습니다. 자연 속에서의 휴식과 일상생활에서 벗어난 해방감을 느낄 수 있는 자연 친화적인 색을 사용하여 편안한 느낌을 줍니다.

[메인페이지]

① 메뉴(Menu, Navigation) 만들기

- 해상도 1024*768에 맞춰서 제작할 새로운 문서(document)를 엽니다.

- 자연 친화적인 느낌을 더 하기 위해 맑은 하늘+구름 이미지와 나뭇잎 모양의 일러스트 이미지를 적절히 조합하여 배경 이미지를 제작한 후 상단에 배치합니다.

- 로고(logo)는 펜션 시안의 특성에 맞는 자연 친화적인 편집사진과 적절한 서체를 사용하여 제작하여 왼쪽 상단에 배치합니다. 현재 시안 로고에 사용된 한글서체는 Rix민들레 B체입니다. 로고의 특성에 따라 배경 패턴이나 이미지 등을 추가하여 자칫 밋밋할 수 있는 디자인을 다듬어 줍니다.

- 오른쪽 상단에 HOME, LOGIN, SITEMAP, CONTACT US 등의 텍스트 메뉴(text menu)를 배치합니다.

- 펜션 시안의 상단 메뉴의 텍스트(INTRODUCE, PREVIEW, TOUR GUIDE, RESERVATION, CUSTOMER)를 배치합니다. 현재 시안 메뉴에 쓰인 영문서체는 Segoe Print 서체입니다.

- ‘INTROUDCE’클릭 시 나타나는 서브메뉴(인사말, 펜션소개, 찾아오시는길, 사이트맵)를 배치합니다.

② 메인비주얼(Main Visual) 만들기

- 메인비주얼에 펜션과 관련된 건물 이미지와 자연 배경(나무, 잔디) 이미지를 준비합니다.

- 자연 배경 이미지(나무, 잔디, 들판)와 펜션 이미지를 적절히 조합하여 중앙에 배치합니다.

- 펜션을 포함한 자연 배경 이미지 위로 부드러운 느낌을 더하기 위해 나뭇잎 이미지와 일러스트 패턴을 조합하여 배치합니다.

- 일러스트 패턴 조합 시 자연스러운 이미지 조합을 위해 레이어 속성을 Multiply로 설정하여 적용합니다.

- 전체적인 비주얼 이미지의 느낌과 유사한 콘셉트로 폴라로이드 모양의 ‘펜션 객실 예약’ 배너를 제작한 후 일러스트 패턴 우측 부분의 적절한 위치에 배치합니다.

- ‘펜션 서비스 알아보기’, ‘여행후기 남기기’배너를 제작한 후 ‘펜션 객실 예약’ 배너 옆으로 배치합니다.

- 다른 구성 요소들과 어울리도록 슬로건 텍스트를 적절한 위치에 배치하여 메인 비주얼 이미지를 완성합니다.

③ 콘텐츠(Contents) 만들기

- 게시물이 노출되는 '공지사항' 게시판을 왼쪽에 배치합니다. 메인 디자인 완성 후 솔루션으로 게시판을 연동해야 하는 부분입니다.

- '공지사항’ 게시판 오른쪽에‘객실 미리보기’배너를 제작하여 배치합니다. [01], [02], [03] 숫자 버튼을 누를 때마다 이미지가 바뀌도록 플래시로 제작할 배너입니다.

- 우측 여백 부분에 아이콘과 텍스트를 적절히 조합한 배너를 제작하여 배치합니다. 각각의 텍스트 메뉴 클릭 시 아이콘이 바뀌도록 플래시로 제작할 배너입니다.

- 하단에 카피라이트(Copyright) 내용을 넣어 카피라이트 부분을 완성합니다.