Google의 Material Design 사양은 원래 플랫폼에서 일관성있는 디자인을 제안하는 방법으로 Android 플랫폼을 대상으로했습니다.
01 / 06
Adobe Experience Design CC에서 재질 디자인 카드를 만드는 방법
일단 디자이너가 그것을 통해 파고 들어가고 생각을 이해하면, Material Design은 웹 및 모바일 디자인 에서 가장 영향력있는 시각 철학 중 하나가되었습니다. 우리가 얻고있는 것을보기 위해해야 할 일은 Pinterest에서 Material Design 검색을하는 것입니다. 그러면 기기, 태블릿, 심지어 웹 사이트에 관한 수많은 예제와 실험을 볼 수 있습니다.
머티리얼 디자인의 매혹적인 측면은 앱이 모바일 기기에서 어떻게 나타나고 작동해야할지에 대한 Google의 생각이지만 모든 플랫폼에서 모든 크기의 화면에 개념이 적용되고 있습니다. Google은 사양의 첫 단락에서 "기술과 과학의 혁신과 가능성을 통해 훌륭한 디자인의 고전적인 원리를 종합하는 사용자를위한 시각적 언어를 만드는 데 어려움을 겪었습니다. 이것은 재료 디자인입니다. 이 스펙은 물질 디자인의 신조와 개발을 계속해서 발전시켜 나갈 것입니다. "
가장 일반적으로 언급되는 자료는 종이이고 Material Design의 특징은 카드입니다. 표면에 색인 카드가 있다고 생각하면 올바른 방향으로 가고 있습니다. 카드는 사진, 비디오, 텍스트 링크 등을 포함하는 요소이지만 대부분의 대화 형 디자인과 다른 점은 단일 주제에 초점을 맞추기위한 것입니다. 카드는 모서리가 둥글며 표면 위를 가리키는 희미한 그림자를 포함하며 모두 동일한 평면에 있으면 "컬렉션"이라고합니다.
이 "How To"에서 사양을 기반으로 카드를 만듭니다. 다양한 이미징 및 그리기 도구로 카드를 제작하는 대신 다른 방향에서 카드를 만들 것입니다. 우리는 현재 Macintosh 전용 공개 미리보기에 있으며 무료입니다 어도비의 체험 디자인에서 도구를 사용하려고합니다. 여기에서 다운로드 할 수 있습니다.
시작하자.
02 of 06
Adobe Experience Design CC에서 프로토 타입 대지 만들기
Experience Design CC (XD)의 시작 화면에서 Android 화면을 만드는 확실한 방법은 없습니다. XD를 열 때 사용한 것은 iPhone 6 옵션을 선택하는 것입니다. 인터페이스가 열리면 툴바 하단의 대지 도구를 선택 하고 오른쪽의 속성 패널에서 선택 항목에서 Android Mobile 을 선택합니다. 그런 다음 선택 도구로 전환 한 다음 iPhone 대지의 이름을 한 번 클릭하고 대지를 삭제합니다. 더 이상은 없어.
XD의 현재 버전에는 iPhone 6 옆에 작은 화살표가 있습니다. 클릭하면 드롭 다운 메뉴가 열립니다. 여기에서 Android Mobile 버전을 선택하면 선택한 Android Android Artboard가 인터페이스에서 열립니다.
카드를위한 적절한 화면 공간을 확보하기 위해 일반적으로 스케치 3로 이동하여 상태 막대, 탐색 막대 및 응용 프로그램 막대를 재질 디자인 템플릿에서 복사하여 대지에 붙여 넣습니다. Sketch 3.2는 머티리얼 디자인 템플릿 ( 파일> 템플릿에서 새로 만들기> 머티리얼 디자인 )을 포함하고 있고 또 다른 좋은 무료 템플릿 은 여기에서 얻을 수있는 카일 레드 베터 (Kyle Ledbetter)입니다. 스케치가없는 경우 파일> UI 키트 열기> Google 소재에 있는 XD 스티커에서 복사하여 붙여 넣을 수 있습니다. 또한 Google에서 다운로드하여 Photoshop, Illustrator, After Effects 및 Sketch에서 사용할 수 있습니다.
03 / 06
Adobe XD CC 대지에 재질 디자인 카드 추가
XD의 가장 유용한 기능 중 하나는 Apple iOS, Google Material 및 Microsoft Windows 용 UI 킷을 포함하는 것입니다. 많은면에서 "Rapid Prototyping"이라는 단어에 "Rapid"라는 단어가 추가되어 Photoshop, Illustrator 또는 Illustrator와 같은 디자인 응용 프로그램에서 일반 UI 요소를 끊임없이 다시 만들 필요가 없기 때문에 디자이너의 작업이 더 수월해집니다. 스케치.
우리가 필요한 UI 요소는 카드였습니다. 그것을 얻으려면 File> Open UI Kit> Google Material 을 선택하고 키트는 새 문서로 열립니다. 필요한 요소는 카드 카테고리에서 발견되었습니다.
우리가 좋아하는 것은 Content Blocks 스펙과 타이포그래피 스펙에 제시된 텍스트 포맷팅 및 스페이싱 스펙에 명시된 Material Design 사양을 준수한다는 것입니다.
우리가 원했던 카드 스타일은 왼쪽 하단의 스타일이었습니다. 우리는 단순히 마우스로 그것을 움직여 클립 보드에 복사했습니다. 불행히도 XD에는 열린 문서를위한 탭 인터페이스가 없습니다. 우리가하고있는 일은 열려있는 문서 창을 조금 아래로 움직여서 우리가 작업중인 것을 공개하고 그것을 선택하여 붙입니다. 열려있는 XD 문서를 신속하게 전환하는 또 다른 방법은 Command- ' 를 누르는 것 입니다.
04 / 06
Adobe Experience Design CC에서 재료 디자인 요소를 편집하는 방법
XD의 카드가 클립 보드에서 도착하면 기쁜 마음으로 작업을 시작하지 마십시오. 가장 먼저해야할 일은 카드를 구성하는 비트와 조각에 액세스해야하기 때문에 카드를 그룹 해제하는 것 입니다. 이렇게하려면 카드를 선택하고 개체> 그룹 해제를 선택 하거나 Shift-Command-G를 누릅니다.
귀하의 카드는 이제 다음 세 부분으로 구성됩니다.
- 이미지의 밝은 회색 상자.
- 텍스트의 중간 회색 상자
- 뒷 상자는 배경으로 사용됩니다.
첫 번째 단계는 밝은 회색 상자를 삭제하는 것입니다. 그것의 유일한 목적은 당신이 선택한다면 그것을 만들 수있는 이미지를위한 자리 표시 자 역할을하는 것입니다.
텍스트가있는 상자는 사실 50 % 불투명도의 어두운 회색입니다. 이 상자는 텍스트 배경으로 사용할 수 있으며 색상과 상자의 불투명도를 변경할 수 있습니다.
즉각적인 것은 아니지만 밝은 회색 상자는 재료 디자인 사양을 따르므로 상단 모서리가 2 픽셀 반올림됩니다. 이미지를 추가하는 경우이를 명심하십시오. 또한 이미징 응용 프로그램이나 XD에 추가 할 수있는 둥근 모서리가 필요합니다.
이것이 카드의 휴전 상태 인 것을 보는 것으로 그림자도 필요합니다. 명세는 2 픽셀의 카드가 놓여있는 상승이 있음을 분명히합니다. 이를 추가하려면 검정색 배경 모양을 선택하고 속성 패널에서 Y 및 B (흐림) 값을 2로 설정합니다.
05/06
Adobe XD CC의 머티리얼 디자인 카드에 이미지를 추가하는 방법
카드 크기가 344 픽셀이고 이미지 영역이 150 픽셀 ( 밝은 회색 상자의 높이의 절반) 임을 알면 Photoshop에서 이미지를 열고 이미지 크기를 크기로 자르고 Photoshop의 다른 이름으로 내보내기 대화 상자에서 @ 2x 옵션을 사용하여 저장했습니다 상자. 이미지를 Adobe XD로 가져 왔습니다.
우리는 그런 다음 페이스트 보드의 이미지 위에서 밝은 회색 상자를 드래그하고 Object> Mask With Shape를 선택했습니다 . 결과는 모양의 둥근 모서리를 픽업 한 이미지였습니다. 그런 다음 이미지를 최종 위치로 이동했습니다.
이미지를 제 위치에 놓은 다음 중간 회색 상자의 배경색을 변경하고 텍스트와 링크 텍스트의 색상을 변경했습니다.
06 년 6 월
Adobe XD CC 그리드 기능 사용
카드가 완성되면 재질 디자인 사양에 따라 적절히 배치해야합니다. 즉, 카드의 양면에 8 픽셀이 있으며 카드가 앱 바 아래 8 픽셀이어야합니다. 이렇게하려면 대지 이름을 한 번 클릭하고 속성 패널에서 Grid를 선택합니다. 그리드가 대지 위에 나타납니다.
기본 그리드 크기는 머티리얼 디자인에서 동일한 그리드 크기가되는 8 픽셀입니다. 다른 크기가 필요하면 그리드 영역에서 값을 변경하십시오. 모눈의 색을 변경하려면 색 칩을 클릭하고 결과 색 선택기에서 색을 선택하십시오.
눈금이 표시된 상태에서 카드를 클릭하고 마지막 위치로 이동하십시오.
끝내기 위해 카드를 선택하고 격자 반복 단추를 클릭 한 다음 카드 간 간격을 8 픽셀로 변경했습니다.