01_Adobe XD_인터페이스 살펴보기

아래 링크에서 Adobe XD를 다운로드 하여 설치하고 인터페이스를 살펴 봅니다. https://www.adobe.com/kr/products/xd.html?promoid=PYPVQ3HN&mv=other


01_Adobe XD_인터페이스 살펴보기

02_ADOBE XD_반복 그리드 활용하기

반복되는 오브젝트를 반복 그리드 옵션을 통해 반복적으로 배치시켜 봅니다. 복제하여 배치하는 것과는 달리 그리드의 간격을 한 번에 조절할 수 있습니다.


02_ADOBE XD_반복 그리드 활용하기

03_ADOBE XD_도형의 활용과 옵션 알아보기

ADOBE XD에서 도형을 그리고 크기를 조절하고 색상과 가장자리 라인의 투명도를 조절해 봅니다. 그림자를 입력하거나 오브젝트를 흐리게 하는 효과 및 정렬과 배치에 대해 공부할 수 있습니다.


03_ADOBE XD_도형의 활용과 옵션  알아보기

04_ADOBE XD_도형 툴로 날씨 아이콘 만들기

Adobe XD에서 도형툴의 옵션을 이용해 날씨 아이콘을 제작해 봅니다.


04_ADOBE XD_도형 툴로 날씨 아이콘 만들기

05_ADOBE XD_XD에서의 펜 툴

포토샵이나 일러스트레이터에서와는 다른 사용 방법을 가진 펜 툴의 기능을 알아봅니다. 원하는 방향이나 원하는 각도로 펜 툴을 이용해 커스텀 오브젝트를 그려 봅니다.


05_ADOBE XD_XD에서의 펜 툴

06_Adobe XD_이미지의 사용방법 알아보기

이미지를 불러오고 종횡비 비율을 조절해 크기를 변경해 봅니다 . 배경 흐림효과나 오브젝트 흐림 효과에 대해서도 알아봅니다. 그리드 그룹으로 이미지를 한번에 삽입할 수 있습니다.


06_Adobe XD_이미지의 사용방법 알아보기

07_ADOBE XD_그리드 활용하기

Adobe XD에서 격자문양 그리드나 레이아웃 형태의 그리드를 만들고 등록하여 사용하는 방법을 알아봅니다.


07_ADOBE XD_그리드 활용하기

[Adobe XD 강좌] 08_ADOBE XD_프로토타입 활용하기

인터페이스를 디자인하고 두개 이상의 아트보드를 만든 후 프로토타입을 이용해 애니메이션을 적용해봅니다. 사용된 이미지는 아래 링크에서 다운로드 받으세요. https://blog.naver.com/vhekfdlfekf/221490860295 #어도비XD, #adobe XD


[Adobe XD 강좌] 08_ADOBE XD_프로토타입 활용하기

[Adobe XD 강좌] 자동 애니메이트를 이용한 패럴렉스 인터랙션_Adobe XD CC 2019

Adobe XD에서 화면을 디자인하고 프로토타입 기능을 이용해 패럴렉스 인터랙션을 만들어봅니다. 사용된 이미지는 아래 링크에서 다운로드 받으세요. https://blog.naver.com/vhekfdlfekf/221614636551


[Adobe XD 강좌] 자동 애니메이트를 이용한 패럴렉스 인터랙션_Adobe XD CC 2019

[Adobe XD 강좌]와이파이아이콘 마이크로 인터랙션

와이파이 아이콘을 그리고 프로토타입 모드에서 애니메이션을 지정해마이크로 인터랙션을 만들어봅니다. #XD, #adobe XD


[Adobe XD 강좌]와이파이아이콘 마이크로 인터랙션
< 1 2 3 >