전체 글 (431) 썸네일형 리스트형 [Adobe XD] 15강 그룹에 고정된 패딩설정 1. 그룹에 텍스트 고정패딩설정 - [홈]화면에서 사용자 정의 크기로 300x300짜리 아트보드 생성 - [사각형툴]로 사각형을 드래그 - 크기를 w: 150, h: 60으로 설정 - 모서리를 10으로 둥글게 처리 - 테두리 : 체크해제 - 채우기색을 변경 - 텍스트툴로 텍스트를 작성 - 글자 크기를 30으로 변경 - 글자색도 흰색으로 변경 - 사각형과 글자를 모두 선택하여 그룹으로 설정([ctrl]+[g] - 그러고 나면 옵션패널에 패딩이 설정이 생성된다. - 패딩의 옵션을 on처리 - 패딩설정이 완료 : 패딩을 균등하게 설정 : 패딩의 4방면을 각각 설정 - [Alt]+ 드래그를 눌러 텍스트상자를 한개 더 복제 - 아래 텍스트상자를 더블클릭 눌러 글자를 변경하면 그게 맞게 상자크기가 변경 - 크기가 .. [Adobe XD] 14강 마우스 오버 상태 활용 1. 마우스 오버 상태 만들기 ★ 마우스 오버시 글자색 변경 - [홈]화면에서 사용자 정의 크기로 300x300짜리 아트보드 생성 - 옵션 패널에서 구성요소 옆의 [+]아이콘을 클릭 - 그럼 기본상태로 바뀌면서 구성요소 마스터 내부로 들어가게 된다. - 이때 [+]아이콘을 또 누르면 [마우스 오버상태]창이 뜬다. - [마우스 오버상태]의 구성요소가 생성된다. - 이때 아트보드의 글자를 더블클릭해서 글자색상을 변경 - 다시 구성요소 상태를 기본상태로 변경 - [플레이]버튼을 누르면 프로토타입상태로 마우스를 올리면 색상이 바뀌는 것을 확인할 수 있다. ★ 마우스오버시 이미지크게 처리 - [홈]화면에서 사용자 정의 크기로 300x300짜리 아트보드 생성 - 사각형 도형을 w: 150, H: 115로 제작 - .. [Adobe XD] 13강 반복그리드 활용하기 - [img.zip]파일을 첨부 - 이미지는 모두 pixabay에서 가져온 무료 이미지입니다. https://pixabay.com/ko/ 1. 사각형 반복그리드 처리 ★ 사각형 반복 그리드 처리 - [홈]화면에서 사용자 정의 크기로 300x300짜리 아트보드 생성 - 사각형 도형을 그린 후 옵션패널에서 크기와 위치 설정 - 가로: 80, 세로: 80, X축: 10, Y축 10 - 옵션 패널에서 [반복 그리드]버튼 클릭 - [반복그리드]가 설정되면 오른쪽과 아래쪽에 녹색의 위젯이 생성 - 저 부분은 드래그하면 반복그리드가 설정 - 반복그리드 위젯을 드래그시 여백이 보임 - 여백을 드래그하면 여백도 조정 가능 ★ 반복그리드에 이미지를 한번에 마스크처리 - 제공된 이미지에서 [cat01.jpg]부터 [cat0.. [Adobe XD] 12강 이미지 편집하기 - [img.zip]파일을 첨부 - 이미지는 모두 pixabay에서 가져온 무료 이미지입니다. https://pixabay.com/ko/ 1. 이미지 삽입과 도형효과 ★ 이미지 삽입 - [홈]화면에서 사용자 정의 크기로 300x300짜리 아트보드 생성 - [내컴퓨터]에서 아트보드로 드래그 - 혹은 [햄버거버튼]-[가져오기]를 통해서도 가져올 수 있다. - 아트보드보다 큰 이미지를 바운딩박스로 크기 조절 ★ 사진에 테두리 넣기 - 테두리를 핑크색으로 처리하고 크기를 5로 변경 - 모서리둥글기 설정을 변경하여 모서리도 둥글게 설정 가능 ★ 사진에 도형효과 넣기 - 옵션패널에서 그림자를 체크 - x : 그림자의 x축 위치 이동 - y : 그림자의 y축 위치 이동 - b : 그림자의 번짐 정도 처리 - 색상아이.. [Adobe XD] 11강 그라디언트 채우기 1. 그라디언트 채우기 ★ 단색을 선형그라디언트로 변경 - [홈]화면에서 사용자 정의 크기로 300x300짜리 아트보드 생성 - 사각형 도형툴을 선택 후 아트보드에 드래그 - 옵션패널에서 테두리 크기를 10으로 설정 - 채우기 색상 아이콘을 클릭 후 [단색]을 클릭하여 선형 그레이디언트 클릭 - 선형그라디언트를 선택하면 기본 흑백 그라디언트로 처리 - 아트보드에는 그라디언트 방향을 조절할 수 있는 위젯 생성 - 색상에는 그라디언트바로 색상 픽커 선택 가능 - 첫번째 컬러픽커를 선택 후 색상을 변경 - 두번째 컬러 픽커를 클릭하여 색상 선택 - 그라디언트바의 가운데를 클릭하면 컬러픽커를 추가할 수 있다. - 반대로 저 픽커를 밖으로 빼면 컬러픽커를 삭제할 수 있다. - 위젯을 드래그하여 그라디언트 방향이나.. [Adobe XD] 10강 오브젝트의 병합 1. 오브젝트 병합하기 ★ 오브젝트 추가 - 원형 도형을 한개 그리고 선택툴로 복제([alt]+[드래그]) - 오브젝트 [추가]버튼을 누르면 두개의 면이 한개로 합쳐짐 ★ 오브젝트 빼기 - 원형 도형을 한개 그리고 선택툴로 복제([alt]+[드래그]) - 오브젝트 [빼기]버튼을 누르면 아래쪽 면만 남고 나머지 면은 빠짐 ★ 오브젝트 교차 - 원형 도형을 한개 그리고 선택툴로 복제([alt]+[드래그]) - 오브젝트 [교차]버튼을 누르면 두면이 겹친 부분만 남고 전부 사라짐 ★ 오브젝트 오버랩제외 - 원형 도형을 한개 그리고 선택툴로 복제([alt]+[드래그]) - 오브젝트 [오버랩제외]버튼을 누르면 두면이 겹친 부분만 남고 전부 사라짐 2. 오브젝트 병합수정 - 선택툴을 클릭 후 오브젝트를 더블클릭하면 .. [Adobe XD] 9강 선그리기, 테두리설정 1. 선의 옵션 설정하기 ★ 선의 단면(caps) 설정하기 - [선툴]을 선택하여 선을 그리고 옵션패널의 단면 옵션을 변경하면 위처럼 표시 ★ 테두리의 모서리(corners) 설정하기 - [사각형]툴로 사각형을 그린 후 옵션 패널의 모서리 설정 변경 ★ 테두리의 선정렬(align) 설정하기 - [사각형]을 똑같은 사이즈로 3개 그린 후 옵션패널에서 선정렬 옵션을 변경 - 패스선의 안쪽, 바깥쪽, 가운데로 처리되서 실제 사이즈가 다르게 보임 2. 점선그리기 ★ 대시와 간격을 이용한 점선 그리기 - 대시와 간격을 동일하게 처리 - 대시와 간격을 다르게 처리 ★ 단면까지 이용한 원형 점선 그리기 - 단면을 [원형단면]으로 바꾸면 원형 점선을 만들 수 있다. - [대시]를 길게 하여 라운드형 점선처리 3. 도형.. [Adobe XD] 8강 펜툴을 이용한 도형만들기 1. 펜툴사용하기 ★ 펜툴로 직선만들기 - [홈]화면에서 사용자 정의 크기로 300x300짜리 아트보드 생성 - 펜툴을 선택후 [클릭]으로 직선 생성 - 면으로 완성되지 않은채 끝내려면 [ESC]키눌러서 완료 ★ 펜툴로 곡선만들기 - 펜툴로 꾹 눌러서 드래그 - 점을 찍을 때 꾹누르고 당기면 방향선과 방향점이 나와서 곡선을 그릴 수 있다. ★ 선택툴을 이용한 곡선을 직선으로 만들기 - [선택툴]로 패스(선이나 면)를 더블클릭하면 점이 활성화 - 방향선이 있는 점을 더블클릭 - 더블클릭하면 점에 있던 방향선이 제거되면서 직선으로 변경 ★ 선택툴을 이용한 직선을 곡선으로 만들기 - [선택툴]로 패스(선이나 면)를 더블클릭하여 선의 점을 활성화 - 점에서 더블클릭하여 방향선 활성화 - 위의 그림처럼 방향선이 .. 이전 1 ··· 50 51 52 53 54 다음
