[4주차-2] UIUX 디자인 툴 Adobe XD 이미지의 활용

컬러

컬러 패널을 열어서 색상 견본을 저장할 수 있다.

드래그&드롭해서 제거할 수 있다.

 

 

투명도 조절은 두 방법이 있다.

채우기&테두리에서 조절하면 채우기 영역과 테두리 영역 겹친곳까지 모두 조절이 된다. (첫 번쩨 사각형)

불투명도에서 조절하면 겹친 영역을 제외하고 각 영역만 조절된다. (두 번째 사각형)

 

 

혼합모드

이미지에서 애플 로고만 사용하고 싶을 때

 

혼합모드를 잘 활용하면 누끼딴 것처럼 사용할 수 있다!

 

 

3D 변형

3D 변형은 최근 생긴 기능이라고 한다.

오브젝트를 클릭하고 정육면체 아이콘을 클릭하면 3D 변형이 활성화되어

오브젝트 가운데에 동그란 무언가가 생기게 된다. 저걸 조절하면

 

이런 식으로 3D화 시킬 수 있다.

우측 패널에서 숫자로 조절할 수 있다.

3D화 했던 걸 원상복구 하고 싶으면 숫자를 모두 0으로 입력하고 정육면체 아이콘을 한 번 더 클릭하면 된다.

 

 

이미지

1. 도형 안에 이미지 삽입

도형을 그리고 이미지를 드래그&드랍하면 이미지를 바로 교체할 수 있다.

도형을 더블클릭하면 도형 안의 이미지를 조절할 수 있다.

다만 종횡비가 무조건 잠금이 되고 도형의 형태를 찌그러뜨려도 이미지의 비율은 유지된다.

 

2. 도형과 이미지 마스킹

이미지 위에 원하는 모양의 오브젝트(나의 경우에는 사각형)를 올리고 두 개를 모두 선택한 뒤

모양으로 마스크 만들기를 누르면 사각형 안에 이미지가 들어가게 된다.

 

마스킹으로 만든 이미지는 종횡비 잠금이 해제가 가능해서 비율 상관없이 이미지를 조절할 수 있다.

 

단, 마스킹으로 이미지를 만든 것은 테두리 적용이 안 된다.

 

<정리>

도형 안에 이미지를 넣은 것 → 테두리 적용 O, 형태 찌그러뜨려도 안의 이미지는 비율을 유지

마스킹으로 이미지 만든 것 → 테두리 적용 X, 형태 찌그러뜨리면 안의 이미지까지 같이 찌그러짐

 

 

반복 그리드

반복하고 싶은 것들을 그룹하고 반복 그리드를 클릭한다.

 

그러면 초록색 바운딩 박스가 나타나는데 이걸 드래그하면 그룹했던 것들이 반복돼서 나타난다.

 

이미지 하나를 넣으면 모두 똑같이 반복돼서 나타나고

 

이미지를 9개 선택 후 드래그&드롭 하면 9개의 이미지가 각각 들어간다.

 

개별 이미지만 수정 가능하고, 그 외의 것들은 하나의 오브젝트가 변경되면 모두 변경된다.

 

이미지 하나만 바꾸고 싶을 때, 오브젝트 하나만 선택 후 이미지 드래그&드랍하면 된다.

 

 

스크롤 생성하기

아트보드 왼쪽 영역에 마우스를 올리면 가이드를 꺼낼수 있는 영역이 생성된다.

 

아트보드에 이미지를 만들고 스크롤 기능을 클릭해준 후 미리보기를 실행하면 스크롤 기능이 추가된 것을 볼 수 있다.

아트보드의 스크롤과는 다른 기능으로, 아트보드 내의 이너 스크롤 기능이다.

---

이미지의 활용 부분은 피그마와 차이점이 상당히 많아서 놀랐다.

특히 반복 그리드 부분은 피그마의 오토 레이아웃과 닮은 듯 닮지 않았다고 느꼈는데

UI툴을 처음 접한 것이 피그마여서 그런지, XD보단 피그마쪽이 좀 더 다루기 쉽다고 생각됐다.