컴퓨터의 이미지 분류
- 비트맵
픽셀로 이미지를 표현
픽셀(pixel), 컴퓨터에서 이미지를 표현하는 최소 단위, 화소
사실적인 이미지 표현에 많이 사용
이미지를 늘였다가 줄였다가 할 경우 이미지 품질에 저하를 주고 계단현상이 나타날 수 있다.
대표적 툴 : 포토샵 - 백터
수학적인 계산을 통해 이미지를 표현
점,선,면으로 이미지 표현
이미지를 늘였다가 줄였다가 할 경우 이미지 품질에 저하를 주지 않는다.
대표적 툴 : 일러스트레이터
비트맵 파일의 종류
- jpg : 트루칼라 지원, 사진 표현에 유리
- gif : 256컬러 지원, 투명한 배경 지원, 에니메이션 지원
- png: 트루컬러 지원, 투명한 배경 지원
백터파일의 종류
- ai : Adobe illustrator 의 줄임말로, 로고 같은 인쇄매체와 디지털 그래픽에서 일반적으로 사용되는 파일
- eps: 캡슐화된 PostScript는 구형 백터 그래픽 파일이다. ai가 최신 파일 포맷에서 투명도를 지원하는 것과 달리 eps 파일은 투명도를 지원하지 않는다.
- pdf : Potable Document Format은 여러 플랫폼에서 문서를 교환하기 위해 제작되었으며, Adobe Acrobat에서 제작 및 편집가능
- svg : xml(기계 및 사람 모두 해독할 수 있고 인터넷 전반에 널리 사용되는 마크업 언어)를 기반으로 하는 "확장 가능한 백터 그래픽" 포맷이다. 인덱싱, 검색 및 스크립팅이 가능한 웹에서 유용하다.
XD의 스크롤 기능
1. 아트보드의 가로 기준으로 이미지 크기를 조절한다. 그림과 같이 나열 후 정렬한다.

2. 정렬한 이미지를 그룹화 한다.(ctrl + g)

3. 오른쪽 화면에서 스크롤그룹(shilt + alt + h) 시킨다.

XD의 반복작업
1. 사각형 도구(r) 클릭 후 아트보드에 그림과 같이 그린 후 텍스트 도구(t)를 선택 후 글씨를 적는다.

2. 오른쪽 화면에서 "반복그리드" 선택(ctrl + r)한다.

3. 마우스로 클릭 후 오늘쪽으로 늘려준다.

4. 마우스로 아래쪽으로 늘려준 후 마우스로 여백을 조절 후 줄여준다.


기초 화면 구현
1. 사각형도구(R) 선택 후 아트보드에 그려준다. 채우기 속성을 그레이로 선택하여 준다.

2. 아트보드에 그려진 사각형을 맨아래로 보내(Shif + Ctrl + {) 준다.

3. 이미지 하나를 불러와서 아트보드위에 올려 놓느다.

4. 사각형 도구(R)로 아트보드위에 그려준다.

5. 방금 그려 준 사각형은 아래로 보내(Ctrl + [) 준다.

6. 힌색 사각형 도구 크기를 불러온 이미지 크기와 맞춰준다.

7. 이미지 위에 사각형 도구(R)를 이용하여 검정색 사각형을 그려준 후 투명도(Opacity) 값을 50으로 맞춰준다.

8. 투명도늘 낮 춘 검정색 사각형 박스 위에 텍스트 도구(T)를 이용하여 글자를 넣어 준다.

9. 힌색 배경 위에 글자를 넣어준다.

10. 힌색배경, 이미지, 검정색 투명도 적용된 사각형, 글자 모두를 그룹화(Ctrl + G) 시킨다.

11. 반복 그리드(Ctrl + R)을 클릭 후 적당하게 넓혀준다.

12. 폴더에 있는 이미지를 4개를 선택하여 드래그 하여 아트보드 위에 있는 그림위에 올려 준다.

13. 폴더에 있는 4개의 그림이 아래와 같이 적용되면, 가로스크롤(Shift + Alt + H) 클릭하여 스크롤 될 영역을 설정해 주면 된다.

14. 완성된 모습

'Adobe XD' 카테고리의 다른 글
| Adobe XD의 개요 (0) | 2022.08.24 |
|---|