| |
4. 쇼핑몰 홈페이지 만들기 |
(1) 메인페이지 만들기 |
| 쇼핑몰의 경우 이미지 등의 효과보다는 상품 위주의 나열과 배너제작 등의 작업이 많으므로 기획을 잘 해서 작업을 해야 어색하지 않습니다 |
| [메인 페이지] |
 |
① 메뉴(Menu, Navigation) 만들기 |
| - 해상도 1024*768에 맞춰서 제작할 새로운 문서(document)를 엽니다. |
 |
- 처음으로 제작해야 할 부분으로는 로고와 내비게이션 부분입니다. 로고는 식품 쇼핑몰 시안의 특성에 맞는 심볼 이미지와 적절한 서체를 사용하여 제작하여 중앙에 배치합니다. |
 |
- 로고 우측 상단에 로그인, 회원가입, 마이페이지, 장바구니, 고객만족센터 등의 메뉴(text menu)를 배치합니다. |
 |
- 로고 좌측 상단에 일러스트 아이콘 이미지와 텍스트를 적절히 조합하여 ‘쇼핑 관련 이벤트 배너’를 제작하여 배치합니다. |
 |
- 쇼핑몰 시안의 상단 메뉴 제작을 위해 양끝 모서리가 둥근 녹색의 이미지를 제작하여 중앙에 배치합니다. |
 |
- 쇼핑몰 시안의 상단 메뉴 텍스트(쇼핑기획전, 베스트상품, 이달의 특가상품, 신상품, 커뮤니티, 회사소개)를 배치합니다. 현재 시안 메뉴에 쓰인 국문서체는 Rix고딕 M 서체입니다. |
 |
- 메뉴 우측 여백 부분에는 메뉴 색상과 구별되는 흰색 바탕으로 된‘회원할인혜택’, ‘쿠폰/이벤트’ 퀵 메뉴를 제작하여 배치합니다. |
 |
- 메뉴 하단 부분에는 쇼핑몰 내의 상품을 빠르게 검색할 수 있는 검색 창을 제작하여 배치합니다. 현재 시안 검색 창에 쓰인 영문서체는 Aharoni 서체, 국문서체는 Rix고딕 M 서체입니다. |
 |
- 메뉴 하단 좌측 부분에는 쇼핑몰 내의 상품 카테고리를 한 눈에 볼 수 있는 ‘쇼핑 카테고리 메뉴’를 추가하기 위해 배경 이미지를 제작하여 배치합니다. |
 |
- ‘쇼핑 카테고리 메뉴’배경 이미지 위에 텍스트(농산물, 축산/육류, 수산/건어물, 과일/채소/견과류, 반찬/조미/장류, 버섯/나물, 과즙/차/음료/간식, 홍삼/인삼, 곡물/잡곡/콩류, 지역특산물, 가공식품)를 배치합니다. 현재 시안 메뉴에 쓰인 영문서체는 Levenim MT 서체, 국문서체는 Rix고딕 M 서체입니다. |
 |
② 메인비주얼(Main Visual) 만들기 |
| - 메인비주얼에 사용될 식품 쇼핑몰과 관련된 자연 콘셉트 배경 이미지와 식품 이미지를 준비합니다. |
 |
- 상단 중앙에 쇼핑몰 내 제품 관련 이벤트와 정보를 보여줄 수 있는 메인 비주얼 이미지를 제작하여 배치합니다. 각각의 텍스트 버튼을 누를 때마다 이미지가 바뀌도록 플래시로 제작할 배너입니다. 박스 레이어와 배경 이미지 레이어 사이의 경계 부분에 [Alt] 키를 누른 채 마우스를 클릭하면 클리핑 그룹이 생성되면서 배경 이미지가 모두 박스 안으로 들어가게 됩니다. 이 때 이미지가 바뀌는 부분의 텍스트 버튼 부분의 배경박스는 레이어 채우기(Fill) 값을 70%로 설정하여 적용합니다. |
 |
- 메인 비주얼 이미지 우측 공간에는 식품 이미지와 텍스트를 적절히 조합한 쇼핑몰 관련 이벤트 배너를 2개 제작하여 배치합니다. |
 |
| ③ 콘텐츠(Contents) 만들기 |
- 'MD CHOICE 상품 배너'와 이달의 베스트상품, 산지직송 신상품, 특가 할인상품 배치를 위한 라인을 제작합니다. |
 |
- ‘MD’s CHOICE 상품 배너’는 타이틀 텍스트 이미지와 상품 이미지를 적절히 조합하여 제작한 후 좌측에 배치합니다. |
 |
- 활성화된 이달의 베스트상품 부분에 텍스트(상품 이미지, 상품명, 가격 정보)를 적절히 배치합니다. 메인 디자인 완성 후 솔루션으로 상품 목록을 연동해야 하는 부분입니다. |
 |
| - 동일한 방법으로 상품 이미지와 텍스트를 적절히 조합한 상품 목록 이미지를 3개 정도 추가로 배치합니다. |
 |
메인 페이지 만들기 
