디지털콘텐츠 No.1 (주)아사달 디자인센터
내정보 SI 도메인 호스팅 디자인몰 솔루션몰 홈페이지몰 모바일 디자인센터 게임 고객지원
로그인 회원가입 장바구니 주문내역
트렌드뷰 웹강좌 자료실
배경이미지
베스트 키워드
주간 월간 연간
검색  상세검색
이벤트 디자이너를 위한 디자인 세상 아사달이 만들어갑니다.
디자인센터 보유 현황 오늘어제이번달지난달누적
웹기획
HTML 사용법
포토샵 사용법
일러스트 사용법
플래시 사용법
일러스트 만들기
일러스트 배경 만들기
일러스트 아이콘 만들기
일러스트 그래픽 만들기
편집사진 만들기
배경 편집사진 만들기
사물 편집사진 만들기
플래시 모션 만들기
플래시 스크립트 만들기
웹구성 요소 만들기
웹 페이지 만들기
비즈니스 홈페이지 만들기
생활 홈페이지 만들기
쇼핑몰 홈페이지 만들기
  - 쇼핑몰 홈페이지 제작의      이해
  - 홈페이지몰 상품 만들기
  - 맞춤형 쇼핑몰 홈페이지
     만들기
  - 쇼핑몰 홈페이지 만들기
  - 굿모닝샵 솔루션 연동하
     기
메인 페이지 만들기
Home > 디자인 센터 > 웹강좌 > 쇼핑몰 홈페이지 만들기 > 메인 페이지 만들기
메인 페이지 만들기 서브 페이지 만들기

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개 정도 추가로 배치합니다.
하단 메뉴 배경 이미지
하단 메뉴 배경 이미지 회사소개 사진모음 협력사 오시는길 이용약관 개인정보취급방침 전화상담안내 게시판문의 모바일 한국어 라인 이미지 日本語 라인 이미지 中文 라인 이미지 ENGLISH 라인 이미지 사이트맵 하단 메뉴 배경 이미지
하단 메뉴 배경 이미지
하단 메뉴 배경 이미지 사이트명 : 아사달닷컴 | 회사명 : (주)아사달 | 대표이사 : 서창녕 | 대표전화 : 1544-8442 | 팩스번호 : 02-2026-2008
사업자등록번호 : 206-81-24351 | 법인등록번호 : 110111-1940504 | 통신판매업신고 : 제18-890호 | 벤처확인번호 : 051134532200563
(우편번호 : 08507) 서울시 금천구 가산디지털1로 168 우림라이온스밸리 A동 8층 (주)아사달
(우편번호 : 153-786) 서울시 금천구 가산동 371-28번지 우림라이온스밸리 A동 8층 (주)아사달
Copyright ⓒ asadal.com All rights reserved.
인터넷 익스플로어 구글 크롬 모질라 파이어폭스
애플 사파리 오페라 넷스케이프
맨위로
디지털콘텐츠 No.1 (주)아사달