은은한 브라운(brown) 계열의 색상을 사용하여 전체적으로 부드럽고 고급스러운 느낌의 기업 이미지를 나타내고자 제작한 홈페이지입니다. 인테리어에 사용되는 벽지 패턴, 인테리어 소품 사진 이미지를 사용하여 세련되고 고급스러운 느낌을 줍니다.

[메인 페이지]

① 메뉴(Menu, Navigation) 만들기

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

- 로고(logo)는 시안의 특성에 맞는 적절한 서체를 사용하여 제작하여 왼쪽 상단에 배치합니다. 인테리어 회사 이미지에 맞게 패턴 장식의 꽃 이미지와 개성 있는 폰트를 사용하여 로고 디자인을 완성합니다.

- 비즈니스 시안의 상단 메뉴의 텍스트(회사소개, 사업분야, 포트폴리오, 고객센터, 커뮤니티)를 배치합니다. 현재 시안 메뉴에 쓰인 영문서체는 Bitstream Vera Sans 서체, 국문서체는 Rix고딕 M 서체입니다.

-‘회사소개’클릭 시 나타나는 서브메뉴(CEO 인사말, 회사연혁, 경영이념, 조직도, 협력업체, 오시는 길)를 배치합니다.

- 오른쪽 상단에 회색 블럭(block)을 만들고 contact us, sitemap, faq 등의 텍스트 메뉴(text menu)를 배치합니다.

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

- 메인비주얼에 사용될 사진 이미지를 준비합니다.

- 메인비주얼 부분에 인테리어 사진과 조합할 격자무늬 배경 레이어(layer)를 만들어 줍니다.

- 격자무늬 배경 레이어 위에 인테리어 사진 이미지 레이어(layer)를 만들고 배너영역 이미지 레이어(마스크)에 겹치도록 배치한 후 alt+마우스 클릭을 이용하여 마스크 처리합니다. 레이어 스타일은 Pin Light를 선택하여 톤의 변화를 줍니다.

- level 및 contrast, brightness로 사진의 톤을 밝게 조정하고 격자무늬 중간중간에 흰색 배경의 네모박스를 채워 넣어 유리창을 통해서 보는듯한 입체감을 주도록 제작합니다. 또 shinning 효과 이미지를 추가하여 한층 더 화사하고 반짝반짝 빛나는 느낌의 인테리어 분위기를 연출합니다.

- 인테리어 사진이 채워지지 않은 오른쪽 브라운(brown) 네모 영역 위에 고급스러운 일러스트 패턴 이미지를 채워 넣습니다. 추출해 놓은 화병 이미지를 오른쪽 공간에 배치하고 MASK 효과를 이용하여 유리에 비치는 듯한 그림자 효과를 만들도록 합니다.

- 오른쪽 흰 여백부분에 브라운 계열의 색상과 어울리는 화사한 일러스트 패턴 이미지를 배치하여 메인 비주얼 이미지를 한층 더 밝게 만들어 줍니다.

- 배경이미지(background image)로 일러스트 패턴 이미지를 넣어 고급스럽고 세련된 인테리어의 느낌을 효과적으로 표현합니다.

- 마지막으로 전체적인 디자인 콘셉트에 맞게 'The Designed Place For you'라는 슬로건을 배치하고 설명 문구를 넣어줍니다. 메인 비주얼 색상과 동일한 브라운 계열의 컬러를 선택하고 텍스트 중간에 마스크 효과를 주어 타이포그래피(typograpy)를 완성합니다.

③ 콘텐츠(Contents) 만들기

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

- 'NEWS & NOTICE' 게시판 오른쪽에 'INTERIOR GALLERY' 배너를 제작하여 배치합니다.

플래시로 제작할 사진 갤러리 배너입니다.

- 'INTERIOR GALLERY' 배너 오른쪽에 작은 사이즈의 배너 2개를 제작하여 배치합니다.

- 다음 줄에도 위 아래 간격을 맞추어 배너를 제작하여 배치하고, 하단에 카피라이트(Copyright) 내용을 넣어 카피라이트 부분을 완성합니다.