ADOBE XD에 입문해보자! 애플공식사이트 따라잡기

모든 디자인의 기반이 되는 ADOBE XD프로그램을 입문해보려고 합니다. 기초적인 작업을 위해 오늘은 사용하는 방법을 알아보기 위해서 애플 공식 사이트를 ADOBE XD 프로그램으로 구성해보도록 하겠습니다!

애플 공식 사이트:https://www.apple.com/kr/

---

1. 기본 준비

일단 구성을 위해 기본적인 글꼴, 이미지, 배경색들이 필요합니다.

예를 들어 애플의 로고나 장바구니, 검색 표시등을 사용해야 하기 때문이죠.

EXAMPLE

2. 제작과정

1) 애플 상단에 메뉴바를 만듭니다.

임시 배치를 위해 None으로 변경

None과 None 사이를 92px로 규칙적으로 띄어줍니다. 또한 각 끝에 있는 애플 로고와 장바구니가 최대한 빈 공간을 많이 만들어야 합니다.

2) 코로나로 인한 안내 문구를 삽입합니다.

절대 이미지 그대로 삽입하지 마세요!

!"대한민국의 Apple 가로수길이 다시 영업을 시작합니다."부분은 AppleSD고딕NEOB00를 사용해주세요!

!"온라인에서 구매"만 파란색으로 강조해주세요!

3) 아이폰 SE2의 판매 홍보 내용을 표시해줍니다.

1."iPhone SE"를 AppleSD고딕NEOB00 사용 글꼴 크기 68

2."이상적. 그러나 합리적. ₩550,000부터. "를 AppleSD고딕NEOM00 사용 글꼴 크기 34

3."보상판매 시 ₩380,000부터."를 AppleSD고딕NEOM00 사용 글꼴 크기 21 회색

4."더 알아보기>","구입하기>"를 중심부 기준으로 양옆으로 배치

5.iPhone SE 사진을 중심부 기준으로 적당한 거리로 띄어주기

 

3) 스크롤 유도를 위한 "iPhone 11" 텍스트

 

1."iPhone 11"를 AppleSD고딕NEOB00 사용 글꼴 크기 68

---

결과

Copyright © 이태양 All rights reserved.

모든 프로젝트 파일공유

클릭

 

Copyright © 이태양 All rights reserved.