5. 일반/기업 홈페이지 만들기-2
(1) 메인 페이지 만들기
- 차분하고 안정적인 블루 계열의 색상을 사용하여 안정감과 신뢰감을 주는 기업 홈페이지입니다. 비주얼이 강조될 수 있는 세로 분할 구도로 구성하였으며, 상징적인 도형 이미지를 통해 기업 이미지를 강조하여 제작한 홈페이지입니다.
[메인 페이지]
① 메뉴(Menu, Navigation) 만들기
- 해상도 1024*768에 맞춰서 제작할 새로운 문서(document)를 엽니다.
- 로고(logo)는 비즈니스 시안의 특성에 맞는 적절한 서체를 사용하여 제작하여 왼쪽 상단에 배치합니다. 로고(logo)의 특성에 따라 색상 및 효과를 조절하여 디자인을 완성합니다.
- 오른쪽 상단에 회색 블럭(block)을 만들고 home, login, sitemap, contact us 등의 텍스트(text menu)를 배치합니다.
- 비즈니스 시안의 상단 메뉴의 text(회사소개, 제품안내, 고객센터, 채용정보, 커뮤니티)를 배치합니다. 현재 시안 메뉴에 쓰인 서체는 Rix고딕 B 서체입니다.
-‘회사소개’ 클릭 시 나타나는 서브메뉴(CEO 인사말, 회사연혁, 경영이념, 조직도, 협력업체, 오시는 길)를 배치합니다.
② 메인비주얼(Main Visual) 만들기
- 메인비주얼에 사용될 일러스트 이미지를 준비합니다.
- 메인비주얼 부분에 중심이 되는 화살표 일러스트 이미지를 배치합니다.
- 배경이미지(background image)를 제작하기 위해 비스듬히 기울인 회색의 원 이미지를 배치합니다.
- 지구표면을 표현하기 위해 추상적인 무늬가 들어가 있는 푸른색의 바닥 이미지를 회색 둥근 원의 영역 위에 배치합니다.
- 회색 원 배경 레이어 위에 추상적인 무늬가 들어가 있는 푸른색의 바닥 이미지가 겹치도록 배치한 후 alt+마우스 클릭을 이용하여 마스크 처리합니다. 지구표면을 표현하는 배경 이미지가 완성되었습니다.
- 좌측 상단에는 글로벌(global)적인 이미지 요소를 넣기 위해 세계지도 이미지를 배치합니다.
- 세계지도 이미지를 배경으로‘Creative BUSINESS WITH SENSITIVITY' 텍스트를 죄측 상단에 배치하여 타이포그래피(typography)를 완성합니다.
③ 콘텐츠(Contents) 만들기
- 오른쪽 여백에 사업소개, 제품문의, 인재채용의 가로 배너를 제작하여 배치합니다. 마우스를 오버하면 오른쪽 옆으로 펼쳐지도록 플래시로 제작할 배너입니다.
- 게시물이 노출되는 'What's News/Notice' 게시판을 왼쪽에 배치합니다. 메인 디자인 완성 후 솔루션으로 게시판을 연동해야 하는 부분입니다.
- 'What's News/Notice' 하단에 5개의 아이콘 배너를 제작하여 배치합니다.
- business story, company vision, web magazine 배너를 제작하여 배치합니다.
- 마지막으로 왼쪽 하단에 카피라이트(Copyright) 내용을 넣어 카피라이트 부분을 완성합니다.
|