웹언어/Adobe XD (17) 썸네일형 리스트형 [Adobe XD] 9강 선그리기, 테두리설정 1. 선의 옵션 설정하기 ★ 선의 단면(caps) 설정하기 - [선툴]을 선택하여 선을 그리고 옵션패널의 단면 옵션을 변경하면 위처럼 표시 ★ 테두리의 모서리(corners) 설정하기 - [사각형]툴로 사각형을 그린 후 옵션 패널의 모서리 설정 변경 ★ 테두리의 선정렬(align) 설정하기 - [사각형]을 똑같은 사이즈로 3개 그린 후 옵션패널에서 선정렬 옵션을 변경 - 패스선의 안쪽, 바깥쪽, 가운데로 처리되서 실제 사이즈가 다르게 보임 2. 점선그리기 ★ 대시와 간격을 이용한 점선 그리기 - 대시와 간격을 동일하게 처리 - 대시와 간격을 다르게 처리 ★ 단면까지 이용한 원형 점선 그리기 - 단면을 [원형단면]으로 바꾸면 원형 점선을 만들 수 있다. - [대시]를 길게 하여 라운드형 점선처리 3. 도형.. [Adobe XD] 8강 펜툴을 이용한 도형만들기 1. 펜툴사용하기 ★ 펜툴로 직선만들기 - [홈]화면에서 사용자 정의 크기로 300x300짜리 아트보드 생성 - 펜툴을 선택후 [클릭]으로 직선 생성 - 면으로 완성되지 않은채 끝내려면 [ESC]키눌러서 완료 ★ 펜툴로 곡선만들기 - 펜툴로 꾹 눌러서 드래그 - 점을 찍을 때 꾹누르고 당기면 방향선과 방향점이 나와서 곡선을 그릴 수 있다. ★ 선택툴을 이용한 곡선을 직선으로 만들기 - [선택툴]로 패스(선이나 면)를 더블클릭하면 점이 활성화 - 방향선이 있는 점을 더블클릭 - 더블클릭하면 점에 있던 방향선이 제거되면서 직선으로 변경 ★ 선택툴을 이용한 직선을 곡선으로 만들기 - [선택툴]로 패스(선이나 면)를 더블클릭하여 선의 점을 활성화 - 점에서 더블클릭하여 방향선 활성화 - 위의 그림처럼 방향선이 .. [Adobe XD] 7강 다각형 도형만들기 1. 다각형도형만들기 ★ 일반 삼각형 만들기 - [홈]화면에서 사용자 정의 크기로 300x300짜리 아트보드 생성 - [다각형도형툴]을 선택후 아트보드에 드래그 - 옵션패널에서 옵션이 3이면 삼각형 처리 ★ 다각형 모서리 둥글게 만들기 - 삼각형의 모서리 안쪽 위젯을 안쪽으로 당기거나 - 옵션패널의 둥글기 수치를 조절하면 둥글게 처리 ★ 육각형 만들기 - 옵션패널에서 각형의 숫자를 변경 ★ 별 만들기 - 옵션패널에서 5각형 처리후 별아이콘 %를 설정 2. 다각형 도형을 이용한 이스라엘 국기만들기 ★ 완성이미지 ★ 제작하기 - [홈]화면에서 사용자 정의 크기로 300x200짜리 아트보드 생성 - [사각형]툴을 선택 후 드래그 - 가로 : 300, 세로 : 30 - 채우기: 파랑색, 테두리: 체크해제 - 위.. [Adobe XD] 6강 원형 도형만들기 1. 원형만들기 - [홈]화면에서 사용자 정의 크기로 300x300짜리 아트보드 생성 - 원형도형툴을 누르고 아트보드에 드래그 - 옵션패널에서 [채우기], [테두리] 테두리 변경 - [Shift]키 누르고 드래그시 정원처리 - [Alt]키 누르고 드래그시 중점에서 도형 그리기 가능 2. 원형을 이용한 원자력발전소 아이콘 만들기 ★ 완성이미지 ★ 제작하기 - [홈]화면에서 사용자 정의 크기로 300x300짜리 아트보드 생성 - 원형 도형 선택 - 가로크기: 100, 세로크기: 250 - 아트보드 가로세로 가운데 처리 - 채우기: 체크해제 - 테두리: 주황색계열컬러, 크기 10 - 원형 도형 그리기 - 가로: 30, 세로: 30 - 테두리: 체크해제, 채우기: 같은 주황색 처리 - 둘다.. [Adobe XD] 5강 모서리둥근 사각형만들기 1. 모서리 둥근 사각형만들기 ★ 사각형 안쪽 모서리 위젯당기기 - [홈]화면에서 사용자 정의 크기로 300x300짜리 아트보드 생성 - [사각형]툴 클릭 후 아트보드에 임의적으로 드래그 후 [150x50]사이즈로 변경 - 사각형 도형에 보이는 4개의 위젯중 한개를 안쪽으로 드래그 - 드래그 한만큼 모서리 처리 ★ 옵션패널에서 모서리 둥글기를 한번에 수정 - 도형을 선택 후 옵션패널에서 모서리 둥글기를 수치로 지정 - 왼쪽 버튼을 클릭하면 4방면 모서리 모두 한번에 조정 ★ 옵션패널에서 모서리 둥글기를 4방면 각각 지정 - 오른쪽쪽 버튼을 클릭하면 4방면 모서리 모두 한번에 조정 2. 모서리 둥근 사각형을 이용한 배터리 표시 제작 ★ 완성이미지 ★ 제작하기 - [홈]화면에서 사용자 정.. [Adobe XD] 4강 사각형 도형만들기 1. 사각형만들기 ★ 기본 사각형 만들기 - 홈화면에서 [사용자 정의 크기]로 [300x300]짜리 아트보드 생성 - [사각형툴]을 클릭 후 아트보드에 임의의 사이즈로 드래그 - [사각형툴]단축키 : [r] - 옵션패널에서 채우기색상과 테두리 색상 변경, 테두리 굵기는 크기로 조정 ★ 정사각형 만들기 - [사각형툴]을 누르고 [shift] + 드래그를 하면 정사각형을 그릴 수 있다. - 옵션패널의 [채우기]나 [테두리] 옆의 스포이드를 누르고 다른 오브젝트를 클릭하면 색상을 가져올 수 있다. - 이때 [테두리] 크기는 못가져오므로 사용자가 수치를 입력 ★ 중심에서 사각형 그리기 - [사각형]툴을 누르고 오브젝트의 중심에서 [Alt] + 드래그하면 중심에서 도형을 그릴 수 있다. 2. 사각형으로 햄버거 버.. [AdobeXD] 3강 그리드 설정 1. 그리드의 종류 정사각형 그리드 레이아웃 그리드 설명 정사각형 그리드는 오브젝트 및 텍스트를 정렬하는 데 유용한 가이드 XD에서 레이아웃 그리드를 사용하여 열을 정의 - 사진 출처 : https://helpx.adobe.com/kr/xd/help/artboards-grids.html 2. 정사각형 그리드 ★ 정사각형 그리드 단축키 기능 단축키 정사각형 그리드 보이기/숨기기 [Ctrl] + ['](따옴표) ★ 정사각형 그리드 보이기 - 위에 작성한 단축키를 누르거나, 옵션패널에 있는 [그리드]-[정사각형]을 체크 ★ 정사각형 그리드 사이즈 변경 - 정사각형 크기를 조절하여 그리드 사이즈 변경 가능 ★ 정사각형 그리드 색상 변경 - 앞에 체크된 색상 박스를 누르고 색상을 변경 .. [AdobeXD] 2강 가이드 설정 - adobe XD 단축키 확인 https://helpx.adobe.com/kr/xd/help/keyboard-shortcuts.html 1. 가이드 생성하기 - 마우스 커서를 아트보드 왼쪽 혹은 오른쪽 가장자리에 올리면 가이드를 추가할 수 있게 투명한 사각형이 박스가 보임 - 마우스를 꾹눌러 드래그시 마우스 포인터 모양이(◀|▶)로 변하면서 가이드를 나타낼 수 있다. - 이때 좋은 점은 간격을 보라색으로 스마트가이드 처리로 보여준다. - 오른쪽에서는 가이드를 나타낼수 없다. 왼쪽 가장자리에서 드래그해서 오른쪽까지 드래그해야한다. - XD의 좋은 점은 스마트 가이드로 오른쪽에서도 얼마가 떨어지는 수치로 보여준다는 점이 좋다. 2. 가이드 삭제하기 ★ 첫번째 방법 -.. 이전 1 2 3 다음
