1. 그룹에 텍스트 고정패딩설정
- [홈]화면에서 사용자 정의 크기로 300x300짜리 아트보드 생성
- [사각형툴]로 사각형을 드래그
- 크기를 w: 150, h: 60으로 설정
- 모서리를 10으로 둥글게 처리
- 테두리 : 체크해제
- 채우기색을 변경
- 텍스트툴로 텍스트를 작성
- 글자 크기를 30으로 변경
- 글자색도 흰색으로 변경
- 사각형과 글자를 모두 선택하여 그룹으로 설정([ctrl]+[g]
- 그러고 나면 옵션패널에 패딩이 설정이 생성된다.
- 패딩의 옵션을 on처리
- 패딩설정이 완료
: 패딩을 균등하게 설정
: 패딩의 4방면을 각각 설정
- [Alt]+ 드래그를 눌러 텍스트상자를 한개 더 복제
- 아래 텍스트상자를 더블클릭 눌러 글자를 변경하면 그게 맞게 상자크기가 변경
- 크기가 자동으로 변경되는 것이 확인
2. 그룹에 이미지 고정패딩설정
- [홈]화면에서 사용자 정의 크기로 300x300짜리 아트보드 생성
- 사각형 도형을 그린다.
- w: 200, h: 200, 아트보드 가운데 정렬
- 모서리둥글기 : 20
- 테두리 크기 : 2
- 사각형도형을 복제([ctrl]+[d])
- w: 150, h: 150, 아트보드 가운데 정렬
- 테두리: 체크해제, 채우기: 임의의 색으로 변경
사진을 도형으로 드래그하여 마스크 처리
- 두개의 오브젝트를 모두 선택 후 그룹 설정([ctrl]+[d])
- 옵션패널에서 [패딩]을 활성화
- 4방면 모두 25로 자동으로 처리
- 이미지를 마스크시킨 사각형만 줄이면 그룹으로 묶인 사각형이 자동으로 크기 조절
- 패딩을 무조건 25로 처리되게 한다.
'웹언어 > Adobe XD' 카테고리의 다른 글
[Adobe XD] 17강 XD 이미지 내보내기 (1) | 2022.02.15 |
---|---|
[Adobe XD] 16강 에셋을 이용한 스타일가이드와 구성요소 (0) | 2022.02.15 |
[Adobe XD] 14강 마우스 오버 상태 활용 (0) | 2020.03.16 |
[Adobe XD] 13강 반복그리드 활용하기 (0) | 2020.03.11 |
[Adobe XD] 12강 이미지 편집하기 (4) | 2020.03.09 |