[Adobe XD] 17강 XD 이미지 내보내기

 

 

 

 

 

 

 

 

** 제공파일을 먼저 다운받으세요. 이것을 이용해서 내보내기를 해볼게요!

이미지내보내기.xd

0.96MB

 

 

 

 

 

 

 

 

 

1. 아트보드 화면을 이미지로 내보내기

- 우리가 디자인해놓은 아트보드 전체 이미지를 내보낼 수 있습니다.

 

1) 아트보드 화면전체 내보내기

- [파일]-[내보내기]-[모든 아트보드]를 통해 내보내기를 해줍니다.

 

 

 

2) 파일포맷과 위치를 잘 선택하여 저장합니다.

- 내보내기 크기의 [1x]는 보이는대로 저장하거나, PC웹디자인을 코딩시 사용하면됩니다.

 

 

 

3) 파일을 확인해봅니다.

각각 아트보드명으로 파일명이 잘 나오는 것을 확인할 수 있습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2. 체크한 이미지만 일괄적으로 내보내기

- 우리는 [PC디자인한곳] 아트보드의 첫번째와 두번째 이미지만 내보내보도록 하겠습니다.

 

 

1) 해당 이미지를 레이어에서 내보내기처리

- 우선적으로 해당 이미지를 레이어에서 내보내기 아이콘을 눌러 체크해야합니다.

a1이미지와 a2이미지를 내보내기를 체크했습니다.

레이어패널에서 빨간색으로 체크한 부분을 체크해야 내보낼때 그 레이어만 내보냅니다.

 

 

 

 

2) 이미지 내보내기 처리

- [파일]-[내보내기]-[일괄처리]를 눌러 내보냅니다.

- 단축키는 [Shift]+[Ctrl]+[E]입니다.

- 역시 1x로 내보내주세요.

 

 

 

3) 파일 확인하기

a1.png와 a2.png로 저장이 잘 되어 있는 것을 볼 수 있습니다.

- 특히, 저장시에는 파일명이 레이어명으로 되기 때문에 레이어명을 잘 지정해놓는 것이 중요합니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3. 선택한 이미지만 내보내기

- 우리가 선택하고 있는 이미지만 내보내보겠습니다.

- 일괄적으로 보내고도 깜박하고 못내보낸 것이 있을수도, 무언가만 교체해서 내보낼 때 사용하면 좋겠죠?

- 이번에는 세번째 여자이미지만 내보내보겠습니다.

 

 

 

1) 이미지 선택해서 내보내기

- 여자이미지만 선택하여 [파일]-[내보내기]-[선택됨]으로 처리합니다.

- 단축키는 [Ctrl]+[E]입니다.

 

 

 

2) 파일 확인하기

여자이미지인 a3.png만 잘 저장됩니다.

- 역시 레이어명으로 저장되므로, 레이어명을 잘 지정해줍니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

728x90

반응형

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

4. SVG파일로 내보내기

- 우리가 XD에서 벡터로 제작하거나, 일러스트레이터에서 가져왔거나, svg파일받은 것을 다운받아 가져오기를 했다면 그 파일을 svg파일로 내보내서 확대시에도 깨지지 않는 파일로 제작할 수 있습니다.

- <img src="svg파일경로">로 처리해서 브라우저를 확대 축소해도 기본 사이즈에서 깨지지 않는 이미지를 만들 수 있습니다.

- 하지만 이미지로 만든 것을 svg파일로 만든다고 하더라도 소용없다는 점을 잘 알고 계시면 됩니다.

 

- 우리는 [원본구성요소 제작]의 플레이버튼을 svg파일로 내보내보도록 하겠습니다.

 

 

 

1) 플레이버튼 선택해서 svg파일로 내보내기

- 내보낼때 파일명을 레이어명이기 때문에 원형과 삼각형을 그룹으로 묶어 [play_btn]이라고 지정을 먼저 해주고 내보냅니다.

- [파일]-[내보니기]-[선택됨]을 누르고 파일포맷을 [svg]로 선택하면 됩니다.

그룹으로 반드시 먼저 묶고 내보내기 해주세요.

 

 

 

2) 파일 확인하기

play_btn.svg로 잘 저장된 것이 확인됩니다.

 

 

 

 

 

3) HTML로 안깨지는지 확인

- html파일로 <img>태그에 svg파일을 담아 깨지지 않는지 확인해보겠습니다.

크롬에서 [Ctrl]+[+]눌러 확인해도 안깨지는 것이 보입니다.

 

 

 

4) 이미지와 비교해보기

아래 이미지가 뭉개지는 것을 확인할 수 있는데, 잘 확인이 안되면 맨 아래완성파일을 다운받아서 확인해보세요.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

5. 모바일용이미지 내보내기

- 보통 모바일은 PC해상도가 아니라 훨씬 더 좋습니다.

- 보통 아이폰6,7,8은 @2x로 PC보다 2배정도 해상도가 좋고, 아이폰plus들은 @3x로 3배정도 해상도가 좋고, 삼성핸드폰을 쓴다면 4배정도 해상도가 더 좋죠.

- 그래서 앱디자인이라면 그에 맞는 해상도로 1, 1.5, 2, 3, 4까지 모두 이미지로 내보내야 합니다.

- 웹은 빠른 렌더링을 위해 보통 2배정도까지만 내보냅니다. 너무 이미지가 크면 구현속도가 느리기 때문입니다.

- 일단 모바일과 태블릿쪽을 디자인할때는 XD에서는 물리적 단위로 원래 사이즈로 디자인을 하지만 이미지를 가져올때는 2~4배짜리 이미지를 사용하시면 됩니다.

- 디자인은 1x로 디자인하고 내보낼때 크기를 선정하면 됩니다.

- 제가 제공하고 있는 아트보드인 [모바일용디자인한 곳]은 아이폰6,7,8사이즈를 예시로 가로폭을 375px로 작업했습니다. 그리고 이미지는 [300x210]으로 디자인했습니다. 이것을 2배로 내보내면 어떻게 되는지 볼게요!

 

 

 

 

 

 

1) 이미지 선택해서 2x로 내보내기

- a1.png가 있어 레이어이름을 [m_a1]으로 교체하고 내보내겠습니다.

레이어에서 이름을 m_a1으로 변경했습니다.

 

 

 

2) 이미지 선택해서 2x로 내보내기

m_a1.png라고 잘 처리가 되고, 이미지도 2배 크기로 저장된 것이 보입니다.

 

 

 

 

3) 아이폰크기로 다 내보내기

저장할때 옵션이 있는데 이때 iOS로 설정해보겠습니다.

- 대신 같은 이름이 나올 수 있어서 [iOS]폴더를 생성해서 해볼게요.

 

 

 

 

 

4) iOS폴더확인하기

1x~3x사이즈로 모두내보내는 것이 확인됩니다.

- 이방법은 모든이미지를 지원하는 앱개발시 사용되고, 웹은 보통 2x로만 내보내면 됩니다.

 

 

 

 

 

** 코딩한 파일까지 아래 압축파일을 받아 전부 확인해보세요@

이미지내보내기-전체파일.zip

5.35MB