웹언어/Adobe XD (17) 썸네일형 리스트형 [Adobe XD] 17강 XD 이미지 내보내기 ** 제공파일을 먼저 다운받으세요. 이것을 이용해서 내보내기를 해볼게요! 1. 아트보드 화면을 이미지로 내보내기 - 우리가 디자인해놓은 아트보드 전체 이미지를 내보낼 수 있습니다. 1) 아트보드 화면전체 내보내기 - [파일]-[내보내기]-[모든 아트보드]를 통해 내보내기를 해줍니다. 2) 파일포맷과 위치를 잘 선택하여 저장합니다. - 내보내기 크기의 [1x]는 보이는대로 저장하거나, PC웹디자인을 코딩시 사용하면됩니다. 3) 파일을 확인해봅니다. 2. 체크한 이미지만 일괄적으로 내보내기 - 우리는 [PC디자인한곳] 아트보드의 첫번째와 두번째 이미지만 내보내보도록 하겠습니다. 1) 해당 이미지를 레이어에서 내보내기처리 - 우선적으로 해당 이미지를 레이어에서 내보내기 아이콘을 눌러 체크해야합니다. 2) 이미.. [Adobe XD] 16강 에셋을 이용한 스타일가이드와 구성요소 1. Asset기능을 활용한 스타일가이드 - Asset기능은 디자인 프로토타입을 만들면서 반복적으로 작업되는 것을 미리 등록하는 것입니다. - 특히, 색상과 글자설정은 자주 쓰는 것을 등록해놓으면 편리하게 작업할 수 있습니다. 1) 예시 사이트 : 싱그러운집(https://www.shouse.garden/main/main.html) 똑똑한 식물집사를 위한 올인원 식물 플랫폼 싱그러운집 반려식물부터 플랜테리어까지 식물집사의 첫걸음, 싱그러운집 www.shouse.garden - 이런 사이트가 있다고 볼게요. 2) 컬러파악하기 - 우선적으로 메인컬러는 로고에 사용된 녹색계열입니다. (#019a3f) - 그리고 서브컬러로 오렌지 컬러를 사용했습니다. (#e05439) - 기본텍스트컬러로는 진한 회색을 사용했습.. [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. 오브젝트 병합수정 - 선택툴을 클릭 후 오브젝트를 더블클릭하면 .. 이전 1 2 3 다음
