본문 바로가기

기획/Adobe XD

[Adobe XD 기초] 원하는 크기로 많은 이미지 한꺼번에 넣어보기 'Repeat Grid'

스크린샷 이미지나 다른 이미지 파일을 xd에 불러오는 여러가지 방법이 있다. 

이미지가 있는 폴더를 열어서 drag, drop 을 하면 불러올 수 있다. 아니면, 복붙 'ctrl+c, ctrl+v'

 

애플에서 제공하고 있는 디자인 가이드를 가지고 실행해보자. 

구글의 material IO, 애플 guide는 각 사이트에서 무료로 받을 수 있다는 장점도 있지만, 안지키면 여러모로 귀찮아진다. 

1. 이미지 삽입 하기 첫번째

'ctrl+c', 'print screenshot', 다음 'ctrl+v' 또는 이미지파일 drag and drop

(주의 png, svg, jpg등 왠만해서는 다 된다. ai는 안된다. 굳이 가서 변경해주는 수고는 좀 필요하다) 

 

스크린샷. 모니터가 많을땐 'alt+스크린샷' 작업 화면만 찍어준다.
Apple에서 제공하고 있는 UI guide.
삽입된 스크린샷의 이미지는 1920 x 1040. 오른쪽 상태창에서 확인할 수 있다.

2. 원하는 크기에 맞춰서 이미지 여러개 불러오기

그럼 이제 여러개 이미지를 원하는 크기로 넣어보자. 예제파일은 아이폰 디자인 가이드 xd 파일에서 추출한 전화기 화면 그림. 원본크기, png 형식으로 추출했다. 

 

imgfilesample.zip
2.39MB

 

 

iPhon X/XS/11 Pro 의 해상도. XD 에서 'a'를 누르면 오른쪽에 가이드가 나타난다.

1. 원하는 크기로 도형을 만든다. 

375 x 743 크기의 사각형을 만들었다. 화면 상단의 정보만 빼고 노출시킬 생각이다. 임의의 크기로 넣어도 무방. 

2. 그 도형위에 이미지를 삽입한다. 

왼쪽이 원본, 오른쪽은 사각형 안에 끌어놓은파일

 

3. Repeat Grid 사용하기

 

불러오고 싶은 이미지가 많은 경우에는, 당연히 도형을 많이 그리면된다. 

그 도형을 많이 그리는데, 약 100 장을 그리려면, ctrl+c, ctrl+v 를 하거나, alt키를 누른채로 도형을 drag and drop 하는 방법도 있지만, repeat grid를 이용해서 불러오면 한결 수월해진다. 

사각형 선택 후, ctrl+r. 핸들을 가지고 10개 상자를 만들자. 
선택후 드래그하면 같은 모양이 반복되어 나타난다. 
붙여넣을 이미지들을 선택한다음, 

 

만들어놓은 Repeat Grid에 붙여넣은 모습

 

이미지가 삽입된 상태에서 핸들을 더 조절하면, 같은 이미지들을 여러장 뽑아낼 수 있다. (굳.. 굳이 그럴 필요는 없지만) 
Repeat Grid 해제 (그룹 해제; ctrl, shift, g). 개별 이미지 크기가 똑같이 375, 743으로 들어온 걸 볼 수 있다. 
사각형이 아니라, 다른 모양을 만들어서 올려도 똑같다. 마스크랑 비슷한 개념이랄까.