09

STYLING APPEARANCE

STYLING APPEARANCE

오브젝트의 면과 선의 색상, 그림자, 흐림 효과

오브젝트들은 각각의 특성에 맞게 속성을 가지고 있다. 그 중 외모 변경에 대해 알아 보도록 하자. 색상과 그림자 그리고 흐림 효과 까지 AdobeXD 가 지원하는 오브젝트의 속성을 알아보고 그 속성을 바꾸는 방법을 알아보도록 하자.

Opacity

마우스로 투명도 조절하기

모든 오브젝트는 투명도를 조절할 수 있다. 우측 Property Inspector 에서 외모 바꾸기 상단에 투명도 조절 바가 위치하고 있다. 0% 에서 100% 까지 투명도를 마우스로 조절하거나 수치를 입력할 수도 있다.

키보드로 투명도 조절하기

오브젝트의 투명도는 키보드로도 조절할 수 있다. 아래와 같은 키로 투명도를 조절 할 수 있으니 기억하기 바란다.

  • 0 : 100%
  • 1 ~ 9 : 각 10% 에서 90% 까지 조절
  • 01 ~ 99 : 각 1%에서 99% 까지 조절 ( 빠르게 두 숫자를 클릭하면 된다 )

마우스 + 키보드
마우스로 우측 property Inspector 의 투명도 조절바 또는 수치 입력란을 클릭해 놓고, 키보드 방향키 상, 하 로 1% 씩 투명도를 증감 할 수 있다. 

Fill

마우스로 오브젝트 면의 색상 바꾸기
img_styling_01@2x

우측 Property Inspector 에서 Fill 좌측 박스를 클릭하면 화면과 같은 색상 파레트가 나타나게 된다.

  • 색상 설정: Solid Color, Linear Gradient, Radial Gradient
  • 색상 파레트: 원하는 색상 선택
  • 색상 코드 종류: Hex. RGB, HSB
  • 색상 코드 값 입력
  • 알파값 조절
  • Color Picker
  • 중요 색상 등록 ( 현재 XD 파일에만 등록 된다 )
그라디언트 활용

자주 듣는 질문중에 하나이다. 그라디언트 적용이 가능한 지... 물론 가능하다. 솔직히 좀 잘 안 보인다. 인정! 색상 파레트 최 상단에서 선택하게 되어 있는데 글자도 작고 유심히 보지 않으면 있는지 없는지 존재감이 좀 없다. 이 부분은 추후 개선이 되지 않을까 라는 생각을 해본다.

Color Picker 를 이용한 색상 변경

우측 Property Inspector 의 Fill 우측 Color Picker 클릭하면 마우스가 스포이드로 변한다. 워크 스페이스 내의 어떤 것이든 원하는 색을 클릭하면 같은 색으로 변경이 가능하다. 물론 색상 파레트에 있는 Color Picker 도 같은 기능을 한다.

Border

외곽선 색상 변경하기
img_styling_02@2x

외곽선도 마찬가지로 우측 Property Inspector 에서 Border 좌측 박스를 클릭하면 색상 파레트가 나오게 된다. 이 파레트에서 색상을 변경할 수 있다. 그외에 아래와 같은 외모 속성을 변경할 수 있다.

  • 외곽선 굵기 변경
  • 점선 길이 설정
  • 점선 간격 설정
  • 외곽선의 중심 설정: 안쪽, 바깥쪽, 중앙
  • 외곽선 끝 지점의 설정: 바로 끝내기, 둥글게 끝내기, 굵기 만큼 여유두기
  • 외곽선의 모서리 모양: 직각으로, 둥글게, 대각선으로 

Color Picker 또한 동일 하게 사용가능하고 외곽선 자체를 보이지 않게 할 수 도 있다. 

외곽선에는 그라디언트 색상으로 설정 할 수 없다. 

Shadow

오브젝트의 그림자 만들기
img_styling_07@2x

라인과 같은 색상 파레트가 나타난다. 그림자의 색상과 알파값등을 설정할 수 있고 그림자의 상세 조건을 설정 할 수 있다. 

  • X: 그림자의 X 축 방향
  • Y: 그림자의 Y 축 방향
  • B: 그림자의 흐림 효과

아쉽게도 포토샵의 그림자 효과처럼 훌륭한 퀄리티를 낼 수는 없다. 벡터 방식 프로그램의 한계가 아닐까 생각이 든다.

Blur

 Background Blur
img_styling_03@2x

배경 흐림 효과 라는 말은 생소할 수 있다. 단순하게 말하면 내가 선택한 오브젝트의 뒤에 있는 배경이 되는 오브젝트에 흐림 효과를 주는 것이다.
이때 오브젝트 자신을 그 흐림의 도구로 사용한다. 그러므로 원래 속성을 잃게 된다. 

  • 흐림정도
  • 밝기: - 로 갈 수록 어두워지고 + 로 갈 수록 밝아진다.
  • 효과의 투명도: 0%일때 오브젝트 본인은 속성을 나타내지 않는다. 100% 일때 오브젝트 본인의 속성을 100% 나타낸다.
Object Blur
img_styling_04@2x

오브젝트 흐림 효과는 말그대로 오브젝트 자신에게 흐림 효과를 주는 것이다. 흐림의 정도를 조정할 수 있다.

마찬가지로 포토샵 처럼 자연스럼지 않아 아쉬운 부분이 있다. 그래도 프로토 타이핑 할때 꽤 도움을 줄 수 있으니 나중에 사용해 보자.

두가지 흐림 효과의 비교
img_styling_06@2x

Background Blur 적용시

img_styling_05@2x

Object Blur 적용시

흐림 효과는 두가지로 나뉜다. 배경을 흐리게 하는 것과 자신을 흐리게 하는 것. 두가지 내용을 잘 숙지 하여 사용시 헷갈리거나 잊지 말기를 바란다.

AdobeXD의 외모 꾸미기는 비교적 단순하다. 색상, 그림자, 흐림 효과 정도이다. 블랜드 모드라던가 기타 여러 사항이 포토샵 사용자에게는 불편할 수도 있다. 블랜드 모드는 만들어 주면 좋겠다라는 생각을 하지만 분명 속도 이슈가 생길 건으로 생각된다. 실예로 빠른 속도와 퍼포먼스를 자랑하는 AdobeXD 도 과도한 그림자나 흐림 효과를 쓰면 AdobeXD 도 버벅 거리는 현상을 발견 할 수 있다. 오브젝트의 외모 변경은 거의 색상으로 이루어지고 어떻게 하면 빠르게 내가 원하는 색상을 바꿀 수 있는지 작업 하면서 숙달하기를 바란다.

AdobeXD Classes

01 . INTROAdobeXD의 대한 소개

02 . INTERFACEAdobeXD의 인터페이스 소개

03 . ARTBOARDSArtboards 에 대한 이해

04 . PANNING & ZOOMING화면 움직이기와 화면 확대 축소

05 . SHAPES도형 그리기와 활용

06 . TEXT문자 쓰기와 활용

07 . PEN TOOL펜 도구의 이용 및 활용

08 . SELECT MOVE RESIZE오브젝트 선택하기, 움직이기, 크기변경하기

09 . STYLING APPEARANCE오브젝트의 면과 선의 색상, 그림자, 흐림 효과

10 . LAYERS레이어 패널의 사용과 관리

11 . DUPLICATE오브젝트 복제의 여러가지 방법

12 . ALIGN & DISTRIBUTE객체의 정렬과 각 객체들간의 공간 분배

13 . UNION두개 이상 객체의 조합 만들기

14 . GROUPAdobeXD 에서의 그룹의 의미와 활용

15 . SYMBOLS심볼 만들기와 응용

16 . REPEAT GRID반복 그리드 사용법과 활용

17 . MASK마스크의 여러가지 사용법

18 . ASSETS PANEL에셋 패널의 사용법과 활용

logo_basic@2x

Copyright © 2018 AdobeXD.info & Bandy garnet.
All Rights Reserved.

E-mail: bandygarnet@gmail.com
Slack: adobexdclass.slack.com