Google Material Design Card Tutorial UI on Sketch App

안녕 친구, 이것은 아름다운 저녁이며 내 집을 되돌릴거야 그리고 오늘 우리는 많은 디자인에 대해 많은 디자인에 대해 이야기 할 것입니다

Google 자료실 안내서 Google 자료실 안내서 카드는 매우 유명합니다 이제 모든 웹 사이트에는 다른 카드가 많이 있습니다 다른 방법과 다른 레이아웃 그래서이 비디오에서 나는 당신을 가르 칠거야 Google 소재 카드를 만드는 방법은 간단한 단계를 따르기 만하면됩니다 내가 스케치에서 어떻게 다른 카드를 만들었는지 보여주는 예를 들어 보겠습니다 동영상으로 이동하여 스케치로 돌아가서 Google 소재 카드를 만드십시오

하지만이 전에는 몇 가지를 보여 드리겠습니다 여기를 보시려면 여기를 보시고 그냥 열어 보겠습니다 내 파일은 여기에 와우 그래서 내 Google 소재 카드를 볼 수 있습니다 예를 위해 설계되었으므로 여기서 수직 Google 자료를 볼 수 있습니다 카드를 사용하면 최소한의 모든 정보를 어떻게 표현하는지 알 수 있습니다

필요하고 정말 놀랍도록 여기에서 이미지와 이미지를 볼 수 있습니다 제목과 설명은 세로 텍스트 카드이고 다음 텍스트는 가로,보고있는 정보를보고 놀랍고 세 번째를 본다 이것은 큰 이미지입니다 여기는 큰 이미지입니다 카테고리 이름에는 제목과 그 제목에 대한 설명이 거의 없습니다

이름이 매우 아름답고 마지막 하나는 제품 카트입니다 내가 제일 좋아하는 것 중 하나는 여기에 옷, 제목 및 가격표 또는 너무 작지만 여전히 보입니다 너무 아름답구나 그래서 지금 내가 할 일을 내 포인트로 받아들이 길 바란다 이 카드들에 기초하여 나는 내가 갈 예를 당신에게 줄 예정이다

이 장바구니를 리메이크하여 예를 들어이 파일을 닫고 계속 진행하도록하겠습니다 스케치 나는 새로운 문서를 만들고있어 여기에 새로운 ID 보트를 만드는 예를 들어 보겠습니다 여기 너머에 약간의 높이가있어 그래서 내가 너를 그릴 각도를 여기에 올릴거야

그것은 당신의 키보드와 당신의 눈을 즐겁게 해주는 매우 간단합니다 예를 들어 대지 나는 500cm 높이의 코로나와 같은 너비로 고정되어 있습니다 그래서 이것은 내 카드이며 배경색도 제거합니다 그래서 대부분의 카드에서 볼 수 있습니다 항상 흰색으로 보이는 구글 메시지 그 이유는 모르겠지만 아직도 너무 예쁘다 그래서 여기에서 배경 색상을 처음부터 바꿀 것입니다

그래서 그냥 대지를 클릭하고 배경색을 좋아하고 여기를 클릭하십시오 F 1 F 2 F 5를 사용하고 있습니다이 색상 코드는 예이며 지금도 사용 중입니다 이제 장치 1 위에 카드 색상을 변경하여 다른 직사각형을 만듭니다 여기 건배는 우리를보고 제발 이 직사각형의 다른 직사각형은 400 단계 350이 될 것입니다

이 직사각형은 내가 이미지를 위해 만들었고 그래서 나는 무엇을 할 것인가? 기본적으로이 직사각형의 이미지를 매우 쉽게 알 수 있습니다 좋아, 내 이미지가 어디가는 가난한 이미지로 간다 폴더와 내 이미지를이 이미지처럼 좋아 좋아요 놀라운이 이미지를 복사하고 이 하나의 예는 매우 큰 이미지이므로 여기에 좋습니다 나 내가 크기를 조정할 수있다 나는 여기에서 이미지를 조정할 수있다 예 그리고 단지 조금 더 멋지다

이제 이미지를 선택하기 만하면이 레이어를 표시 할 것입니다 여기를 클릭하여 직사각형을 선택하고 비고를 클릭하고 이것을 단지 두 번 편집하십시오 클릭하고 필요에 따라 크기와 위치를 재설정하십시오 아주 괜찮은 것처럼 보이기 때문에 중간 정렬을 선택하면 지금도 괜찮아요 나는 내 카드를 가지고 있고 내 카드에 나는 이제 두 번째로 이미지를 뒤집었다 여기 다시 행복 건강과 같은 텍스트 또는 텍스트를 추가하려고합니다 여기에 작은 서식을 붙여 넣습니다

저는 로베르토를 좋아합니다 기본적으로 저는 항상 이 매체를 사용하여 전화를 통해 18 픽셀 크기로 변환하여 기분이 좋고 북쪽으로 20 픽셀 떨어진 36 프린터가 더 보입니다 좋은 그리고 이것은 나의 묘사이다 설명 팔은 간단하고 쉽게 만들 수있는 단락을 만듭니다 단락을 클릭하고 왼쪽 클릭을 사용하여 드래그하면 단락도 일부 서식있는 글꼴 크기를 가볍게 놀라운 변경 참조하십시오 깊이 15 픽셀로 한 번만 예

그래서 여기에 약간의 불투명도를줍니다 Iker 60 예 60 괜찮아요 그래서 당신도 볼 수있는 Google 카드를 디자인했습니다 당신은 그룹과 같은 모든 것을 조정할 수 있고 꽤 멋지다 Google 소재 카드에서 할 일을 찾을 수 있습니다

사방에 그림자를 드리 우면 그림자가 너무 멋져서 그림자 그림자가 생길 수 있습니다 너는 스케치 자원에서이 기성의 그림자를 다운로드 할 수있다 그냥이 그림자 파일을 바인딩 할 수있는 그림자 나는 이것이 이것을 다운로드한다 이것은 이것이 나의 그림자이기 때문에 근본적으로 내가 가고있는 것이다 나는이 스타일을 복사하여 디자인에 붙여 넣을뿐입니다

그래서 메인 데크에서 마우스 오른쪽 버튼을 클릭하고 붙여 넣기 만하면됩니다 이제 첫 번째 그림자를 없애고 일부 그림자를 지우는 것과 같은 조정을합니다 투명도 이제 두 번째로이 모든 섹션을 그룹화하고 이미지 이제 Google 카드 작성 방법에 대해 이해하시기 바랍니다 여기를 보시면 꽤 멋지고 청결 해 보이며 얼마나 신속하게 볼 수 있습니까? 법률 자료 카드 그래서이 비디오를 좋아한다면 내 채널을 구독하십시오 저에게 엄지와 질문이 있으시면 아래에 의견을 남기시고 고맙습니다 내 비디오를 많이 보아 주셔서 감사합니다

Sketch Web Design Course: E-commerce Checkout Page Design Part 2 of 2

저는 Skillthrive의 Hunter이고 두 부분으로 구성된 Sketch 과정의 두 번째 수업에 오신 것을 환영합니다 이번 강의에서는 체크 아웃 디자인 개념의 장바구니 섹션을 만드는 방법을 알려 드리겠습니다

또한 아직 작성하지 않았다면 다음과 같이 최종 Sketch 파일을 다운로드하십시오 Skillthrivecom의 무료 회원 설명에 참여할 수있는 링크가 있습니다 시작하려면 'T'를 눌러 텍스트 레이어를 만들고 '장바구니'를 입력하십시오

이 텍스트가 수업 1에서 만든이 텍스트 스타일로 설정되어 있는지 확인하겠습니다 텍스트 레이어를 왼쪽에서 95 픽셀, 위쪽에서 110 픽셀 이동합니다 하단은 오른쪽에있는 'Card Details (카드 세부 정보)'레이어의 하단에 맞춰져 있습니다 타원형 도구에 액세스하려면 'O'를 누르고 만들려면 드래그하는 동안 Shift 키를 누릅니다 150 픽셀의 원입니다

나는 경계를 끈 다음 무료 코스 파일로 돌아가서 하나를 드래그합니다 포함 된 시계 이미지의 여기에 와서 높이를 150 픽셀로 조정하고 원 위에 이미지를 맞 춥니 다 두 레이어를 모두 선택하고 마스크를 만듭니다 이 새 그룹의 이름을 '시청'이라고하겠습니다 위의 텍스트 레이어에서 그룹을 80 픽셀 이동합니다

텍스트 도구로 돌아가서 'Trendy Bamboo'를 제품 이름으로 입력하겠습니다 텍스트를 선택하고이 텍스트 스타일을 선택합니다 텍스트 레이어의 중심을 이미지 위에 놓고 65 픽셀 떨어진 곳으로 옮깁니다 레이어를 선택하고 Option 키를 누른 상태에서 드래그하여 복제합니다 텍스트를 선택하고 'Large'를 입력하여 시계 크기를 나타냅니다

그러면 텍스트를 다시 선택하고 가중치를 중간, 크기를 15, 문자 간격은 05입니다 또한이 텍스트 스타일을 저장 한 다음 레이어가 레이어의 맨 위가 제목의 맨 아래에 닿아 있다고 가정합니다 이제 수량 선택기로 이동합니다 먼저 가로 9 픽셀, 세로 3 픽셀의 사각형을 만듭니다

국경을 끄고 채우기가 순수한 흰색인지 확인하겠습니다 이 사각형의 이름을 '마이너스'로 지정하겠습니다 나는 사각형을 복제하여 11 픽셀 너비로 만들 것입니다 이 직사각형을 복제하여 여기에 올리면 90도 회전합니다 그런 다음 두 직사각형을 모두 선택하고 'Union'을 클릭하여 도형을 결합합니다

나는이 새로운 모양을 '플러스'라고 부를 것이다 'U'를 치면 둥근 사각형 도구로 바뀌고 둥근 사각형을 만들겠습니다 가로 60 픽셀, 세로 40 픽셀입니다 채우기를 해제하고 테두리 색상을 순수한 흰색, 두께를 1, 반지름을 8로 설정합니다 텍스트 도구로 가서 '1'을 입력합니다

텍스트는 'Large'텍스트의 글꼴과 동일해야하지만, 그렇지 않은 경우에는 저장된 텍스트 스타일을 선택하십시오 이제 숫자를 사각형 내부에 놓고 숫자와 사각형을 그룹화하고, 그룹의 이름을 '수량'으로 지정하십시오 그런 다음 둥근 직사각형의 왼쪽에 20 픽셀을 마이너스 기호로 가운데 맞추어 놓습니다 그 다음에는 더하기 기호를 반대로하십시오 마이너스, 플러스 및 수량을 그룹화하고 그룹의 '수량 선택기'이름을 지정하겠습니다

새 그룹을 제품 제목에 상대적으로 배치하고 간격을 240 픽셀 추가합니다 다음으로, 가격을 입력하고 텍스트 스타일을 제품 제목과 동일하게 변경하겠습니다 저는 텍스트를 중심에두고 그 양을 130 픽셀만큼 움직일 것입니다 22 픽셀 너비와 2 픽셀 높이의 새 사각형을 만들고, 테두리를 채우고 채우기가 순수한 흰색인지 확인하십시오 도형을 45도 회전시킨 다음 Command-D로 복제합니다

중복 된 이 아이콘을 클릭하면 가로로 뒤집습니다 그런 다음 두 직사각형을 모두 선택하고 'Union'을 클릭하여 모양을 결합합니다 모양을 '삭제'라고 이름을 정하고 가격 레이어에 가운데 놓고 110 픽셀 떨어진 곳으로 옮깁니다 마지막으로 키보드에서 'L'을 눌러 라인을 만듭니다 나는 교대를 잡고 완벽하게 직선을 만들기 위해 끌고 갈 것이다

색상이 순수한 흰색인지, 두께가 하나인지, 길이가 1,095 픽셀인지를 확인합니다 시계 이미지에 맞춰 왼쪽으로 45 픽셀 이동하고 이름을 '디바이더'로 바꿉니다 제품 섹션의 모든 레이어와 그룹을 선택하고 Command-G로 그룹화합니다 이 그룹의 이름을 '장바구니 항목'으로 지정하고 기호로 바꿀 것입니다 나는 심볼을 복제하고 각 새로운 섹션을 서로 45 픽셀 씩 간격을두기 위해 옵션을 잡을 것입니다

재정의를 사용하면 제품 제목, 이미지, 가격 등을 동적으로 변경할 수 있습니다 원본 Symbol에 영향을주지 않고 텍스트 도구로 돌아가서 '쇼핑 계속'을 입력하겠습니다 레이어를 왼쪽 정렬하고 마지막 장바구니 항목의 아래쪽에서 45 픽셀 이동합니다 옵션을 잡고 오른쪽으로 드래그하여 텍스트 레이어를 복제하고 텍스트 레이어를 변경합니다 text to 'Subtotal :'텍스트 레이어를 다시 복제하고 총 가격을 입력합니다

이 경우에는 '$ 10797'이며 텍스트 스타일을 변경합니다 부분합 위에 레이어를 배치하고 10 픽셀 간격으로 배치합니다 부분합 및 가격 레이어를 그룹화하고 이름을 '소계'로 지정합니다 바로 정렬합니다

카트 항목으로 이동하고 하단에서 40 픽셀 이동합니다 장바구니 섹션으로 만든 모든 레이어를 그룹화하고 장바구니 이름을 지정하겠습니다 그리고 그게 다야! 우리는 프로젝트를 수출하고 세계와 공유 할 준비가되었습니다 이 Sketch 튜토리얼이 마음에 들면, 여기에서 확인하십시오 그리고이 비디오가 마음에 들면, 그것을 엄지 손가락으로 올려 구독하고 친구와 공유하십시오

나는 다음에 너를 볼거야

Sketch Web Design Course: E-commerce Checkout Page Design – Lesson One

나는 Skillthrive의 Hunter이고이 두 편의 Sketch 튜토리얼의 첫 번째 수업에 오신 것을 환영합니다 이 수업에서는 프로젝트를 시작하고 색상 팔레트의 심볼을 만들고 체크 아웃 디자인 컨셉에 대한 구매 모달

오늘 내가 만들고있는 마지막 스케치 파일을 다운로드하려면 가입 할 수 있습니다 아래의 링크에서 Skillthrive를 무료로 이용하십시오 그렇게 말하면 시작합시다 Sketch를 연 다음 키보드에서 'A'를 클릭하여 대지를 만들어 봅시다 그런 다음 대지 보드를 클릭하고 드래그하여 1920×1080 크기로 설정하십시오

아트 보드의 장바구니 이름을 지정하십시오 다음으로,이 디자인에서 사용할 색상을 보유 할 Artboards를 몇 개 만듭니다 그 후에 프로젝트에서 색상을 쉽게 제어 할 수있는 기호로 변환 할 것입니다 아트 보드 도구에 액세스하려면 'A'를 다시 누른 다음 드래그하는 동안 Shift 키를 누릅니다 180 픽셀의 사각형을 만듭니다

그런 다음 'R'을 눌러 사각형 도구에 액세스하고 직사각형을 대지로 채 웁니다 나는 경계선을 끄고 16 진수 코드 F2B632로 채우기를 설정합니다 나는 그 색상을 내 문서 색상으로 저장할 것입니다 이 대지에 'color /'라는 이름을 붙이고 그 뒤에 16 진수 코드를 붙입니다 나는 다른 Artboards와 유사한 프로세스를 수행 할 것인데, Sketch to group 이 상징들은 함께

그런 다음 화면의 16 진수 코드를 사용하여이 과정을 5 번 더 반복합니다 대지 만들기가 끝나면 레이어 목록에서 선택합니다 그런 다음 레이어 중 하나를 마우스 오른쪽 버튼으로 클릭하고 '심볼 만들기'를 선택합니다 모든 프로젝트 기호를 저장할 새 페이지를 작성하십시오 아트 보드에 직사각형을 채워 배경을 만들고 테두리를 끕니다

직사각형의 채우기를 선택하는 대신 직사각형을 색상 Symbol의 마스크로 사용합니다 따라서 '문서'로 '삽입', '색상'으로 이동하여이 색상을 선택하겠습니다 내 마우스를 직사각형 위에 놓고 클릭하여 심볼을 배치합니다 이제 배경을 채우기 위해 기호의 크기를 조정할 수 있습니다 레이어 목록에서 심볼과 사각형을 선택하고 '마스크'를 클릭합니다

그런 다음이 그룹의 이름을 '배경'으로 바꿉니다 이 배경의 색상을 변경하려면 레이어를 선택하고 여기로 올 수 있습니다 색상 중 하나를 선택하십시오 다음으로 폭이 637 픽셀, 높이가 1,080 픽셀 인 직사각형을 만듭니다 그것은 대지의 오른쪽에 있습니다

나는 경계선을 끄고 직사각형 꼭대기에 색 기호를 놓을 것이다 크기를 조정하고 직사각형을 마스크로 사용하십시오 이 레이어의 이름을 'Modal Background'로 바꿉니다 내 키보드에서 'T'를 눌러 텍스트 도구에 액세스합니다 직사각형 상단을 클릭하고 '카드 세부 사항'을 입력하기 시작합니다

텍스트를 선택하고 텍스트 설정으로 이동합니다 나는 서체를 몬트 세 라트 (Montserrat), 체중을 세미 볼드, 크기를 40, 문자 간격을 23으로 설정할 것입니다 '텍스트 스타일 없음'이라는 텍스트 설정 위에있는 상자를 클릭하고 '새 텍스트 스타일 만들기'를 클릭하겠습니다 이제는이를 참조하여 일관성을 유지하고 일관되게 유지할 수 있습니다

내 프로젝트 전체에서 텍스트 스타일 다음 섹션으로 이동하기 전에 이동 도구로이 텍스트 레이어를 선택하겠습니다 위쪽에서 120 픽셀, 왼쪽에서 95 픽셀을 배치하십시오 Option을 누르고있는 동안 레이어를 이동하여 다른 요소와의 간격을 확인합니다 다른 텍스트 레이어를 만들고 '카드 유형'을 입력하겠습니다

이 글꼴을 선택하고 텍스트 크기를 20 및 문자 간격으로 변경합니다 17로 설정하고 새 텍스트 스타일을 만듭니다 이 레이어를 '카드 세부 정보'레이어의 왼쪽에 정렬하고 하단에서 85 픽셀 이동합니다 그런 다음 코스 파일로 이동하여 세 개의 신용 카드 이미지를 가져 와서 Sketch로 드래그합니다

세 개의 레이어가 모두 선택된 상태에서 커맨드 + K를 눌러 스케일을 조정합니다 모든 세 개의 레이어는 60 픽셀에 비례합니다 첫 번째 레이어를 왼쪽 정렬하고 섹션 제목 맨 아래에서 25 픽셀 이동합니다 다음 두 레이어를 서로 60 픽셀 씩 중앙에 배치합니다 Command + G를 눌러 네 개의 레이어를 모두 그룹화하고 '카드 유형'그룹을 호출합니다

텍스트 도구로 돌아가서 '카드에 이름'을 입력하겠습니다 이 레이어를 왼쪽 정렬하고 첫 번째 그룹의 아래쪽에서 60 픽셀 이동합니다 라인 도구에 액세스하려면 'L'을 누르고 직선을 생성하려면 Shift 키를 누른 상태로 드래그합니다 라인의 길이가 365 픽셀이고 두께가 1 픽셀이고 순수한 흰색으로 설정되었는지 확인하겠습니다 또한 섹션 제목과 60 픽셀을 맞 춥니 다

그런 다음 두 레이어를 그룹화하고 그룹의 이름을 카드에 이름을 지정합니다 다음 섹션을 만들려면 '카드의 이름'그룹을 선택하고 Option 키를 누른다 60 픽셀을 드래그하여 그룹을 복제했습니다 그룹 이름을 '카드 번호'로 변경하고 일치시킬 제목을 변경하겠습니다 나는 다음 섹션을 같은 방식으로 복제 할 것이고 나는이 그룹을 'Expiry Date'라고 부를 것이다

섹션 제목을 변경하십시오 선을 53 픽셀로 단축합니다 이제 선 도구로 20 픽셀 수직선을 만들고, 이번에는 Shift 키 나는 아래로 끌고 간다 그런 다음 만료 날짜 그룹에서 해당 줄을 이동합니다 Shift-Command-R을 누르고 마우스를 사용하여 20도 회전시킵니다

그런 다음 선을 왼쪽 선의 맨 아래에 정렬하고 5 픽셀 떨어져 있는지 확인합니다 두 레이어를 선택하고 Option 키를 누른 채로 오른쪽으로 드래그합니다 또한 Shift 키를 누른 채로 선을 위아래로 움직이지 않도록 할 수 있습니다 이번에는 새로운 수익을 왼쪽의 회전 된 선의 위쪽 가장자리 자, 이제 단 하나의 추가 수익이 필요합니다

따라서이 옵션을 선택하고 Option과 이것을 같은 방법으로 정렬하십시오 5 줄 레이어를 그룹화하고 '만료 정보'그룹을 호출합니다 이 레이어를 섹션 제목의 하단에서 43 픽셀 이동합니다 다음 섹션에서는 만료 그룹의 옵션을 잡고 오른쪽으로 드래그합니다 이 그룹 및 섹션 제목을 'CVV'로 지정하겠습니다

나는 'Expiry Info'그룹에 들어가서 가장 왼쪽 하단 라인을 그룹 밖으로 끌어 올 것이다 그런 다음 그룹을 선택하고 삭제합니다 그런 다음 그룹을 위아래로 이동하지 않도록 그룹을 정렬합니다 이 모든 레이어를 선택하고 그룹화하여 '카드 세부 정보'라고합니다 폭이 638 픽셀이고 높이가 152 픽셀 인 새 사각형을 만듭니다

나는 경계선을 끄고 노란색 심벌 컬러를 사용할 것이다 레이어 이름을 '버튼 배경'으로 지정하겠습니다 텍스트 도구로 가서 'Complete Purchase'를 입력하겠습니다 텍스트를 선택하고 크기를 30으로 변경합니다 이 텍스트 레이어와 버튼 배경을 선택하고 함께 그룹화 한 다음 새 그룹 'Purchase Button'

텍스트 레이어를 가운데에 배치하고이 레이어에서 새 텍스트 스타일을 만듭니다 모달 배경, 구입 단추 및 카드 정보 그룹을 선택하고 이름을 지정합니다 'Checkout Modal'그룹 그런 다음이 그룹에서 심볼을 만들어 심볼 페이지로 보냅니다 그리고이 수업을 위해서입니다! 다음 단원에서는 장바구니를 만들 것입니다

나는 다음에 너를 볼거야!

Timeline by Anima: Web Design Animation & Export Code from Sketch

Sketch 내에서 코드로 디자인, 애니메이트 및 내보내기 나는 스킬 라이벌 (Skillthrive)의 헌터 (Hunter)이고, 이것이 가능한 방법을 보여줄 것입니다

Anima Plugin 여기에서는 새로운 전자 상거래를위한 체크 아웃 페이지를 디자인했습니다 저장 타임 라인을 사용하면 구매 버튼을 사용할 수 있습니다 정적 인 디자인, 웹에 적합한 대화 형 요소 만들기 등이 포함됩니다

먼저, 나는에 갈 것이다 내 심볼 페이지에서 체크 아웃 버튼 아트 보드를 선택하십시오 그럼 나는 Anima 패널에서이 아이콘을 클릭하면 타임 라인 옵션이 표시됩니다 와 더불어 아트 보드를 선택하면 '상호 작용 디자인'을 클릭하여 애니메이션을 시작할 수 있습니다 첫 번째 상태에서 사용자가 클릭 할 때 전환을 트리거하는 액션을 설정합니다

요소들 그런 다음 상태 2에서 '어두워지는'레이어를 오른쪽으로 이동합니다 대지를 채울 때까지 전환 기간을 늘릴 것입니다 1 초로 설정하고 곡선 유형을 선형으로 변경합니다 즉, 전환이 하나 인 경우, 일정한 속도

'Play'를 클릭하여이 전환을 미리 볼 수 있습니다 전환 (Transition) '을 클릭하십시오 다음으로 세 번째 상태와 최종 상태를 추가하고 상태 2를 상태 3에 연결하는 동작, 이번에는 '타이머 설정'을 my 행사 현재 이벤트는 0으로 설정됩니다 즉, 다음 전환을 의미합니다

그것이 끝나기 바로 전에 상태로 시작하십시오 이제 상태 3을 수정하고 체크 아웃 텍스트, 노란색 배경 및 어둡기에 대한 가시성 해제 배경을 표시하고 녹색 배경에 대한 표시 여부를 성공 텍스트 두 텍스트 레이어의 애니메이션 지속 시간을 04로 연장하겠습니다 초

이 텍스트 레이어가 끝나면이 텍스트 레이어가 희미 해지기를 바랍니다 페이딩 아웃, 그래서이 곳의 시작 부분을이 곳으로 옮깁니다 끝내라 이제이 대화 형 디자인을 코드로 내보내겠습니다 하기 위해서, '코드 내보내기'를 클릭하기 만하면 타임 라인에서이 링크를 만듭니다

링크에서 요소와 상호 작용하거나 개발자에게 넘기거나 심지어 JS Fiddle 또는 CodePen에서 코드를 호스팅하십시오 그리고 그게 다야! 몇 분만에 나는 타임 라인을 사용하여 대화 형 디자인을 생성하고 코드없이 모두 내보낼 수 있습니다 스케치를 떠난다! Anima Plugin에게 기회를 줄 준비가되어 있다면, 그들은 Skillthrive 회원은 처음 3 개월 동안 15 % 할인되었습니다 에서 링크를 확인하십시오 자세한 내용은 설명을 참조하십시오

나는 다음에 너를 볼거야!

Sketch Tutorial Web Design: Team Page Design Concept

Skillthrive의 Hunter이고이 튜토리얼에서는 Sketch to Sketch를 사용합니다 웹 사이트 디자인을 위해이 팀 섹션을 만듭니다

주말이야, 그래서 나는 모자! 오늘의 튜토리얼에서 나와 함께 따라하고 싶다면, Skillthrivecom에서 무료 회원이되어 코스 파일을 다운로드하십시오 저기있다 설명의 링크를 클릭하면 등록 페이지로 이동할 수 있습니다 어울리다

그렇게 말하면 스케치에 뛰어 들어가서 오늘 시작하겠습니다 지도 시간 스케치에서 제일 먼저하고 싶은 것은 아트 보드를 만드는 것입니다 그렇게하기 위해서 키보드에서 '대문자'를 클릭하여 대지 도구를 불러옵니다 할거다 아트 보드를 만들려면 클릭 한 후 누르고 드래그하십시오

그럼 나올 수있어 여기에 너비를 1,800, 높이를 800으로 설정하십시오 대지를 '팀 섹션'과 같은 이름으로 바꿉니다 그럼 이걸로 대발 판이 여전히 선택되었습니다 배경색으로 올 수 있습니다

이것이 확실한지 확인하십시오 체크 했어 여기이 팔레트에 들어 와서 순수한 흰색 대신에 흰색 파란색을 띄게하십시오 그래서 나는 F7FAFB의 16 진수 코드를 할 수 있습니다 그런 다음 문서 색상 -이 아이콘이 닫혀 있으면이 아이콘을 클릭하면 확장하면 더하기 아이콘이 표시됩니다

그런 다음 내가 이것을 열면 항상 이것을 열 수 있습니다 파일 또는 다른 사람이이 파일을 열고 특정 색상 표를 볼 수 있습니다 나는이 프로젝트에 사용하고있다 간단히 참조 할 수 있습니다 재사용하고 싶은 색상

자 이제 여기를 축소 해 보겠습니다 아이콘 제목과 자막 부분을 만드는 데 중점을 둡니다 그래서, 나는 처음이다 해야 할 일은 아이콘을 만드는 것입니다 그래서 확대하고 'O'를 눌러 타원형 도구를 가져옵니다

나는 완전한 원형을 만들기 위해 Shift 키를 누른 다음 약 74로 만듭니다 픽셀 그럼 내가 할 일은 '심볼 만들기'를 오른쪽 클릭하는 것입니다 나는 만들거야 '심볼을 심볼로 보내기'페이지가 선택되어 있는지 확인한 다음, 이름을 바꿉니다

이 '라운드 아이콘'으로 이동 한 다음 확인을 클릭하십시오 그런 다음 스케치가 여기서 라운드 아이콘을 볼 수있는 기호 페이지가 있습니다 자, 네가 친숙하지 않다면 심볼은 무엇인가? 그들은 본질적으로 재사용 가능한 아이템이다 의사를 스케치하거나 스케치 생태계 전반에 걸쳐 예를 들어 웹 디자인 전체에서 사용하려는 원형 아이콘이 있습니다

그래서 대신 복사 및 붙여 넣기 또는 다시 디자인하면 기호로 그리고 그것은 당신이 그것을 삽입 할 수 있다는 것을 의미합니다 아이콘을 모두 변경하는 대신 모든 아이콘으로 변경하십시오 개별적으로 하나의 인스턴스 만 변경하면 전체 프로젝트 효율적으로 작업하고 빠르게 작업 할 수있는 정말 좋은 방법입니다

스케치 자, 이제 우리가 할 수있는 일은 가자 여기에서 국경을 그냥 끈다 이 타원에 그런 다음 채우기로 들어가서이 색상으로 들어가서 두 번째 오프 화이트, 그래서 16 진수 코드에 걸쳐 모든 길을 'FA'

히트 리턴 및 문서 색상에 추가해 보겠습니다 그래서 지금은 조금보기가 힘들 기 때문에,이를 해결하기 위해 우리가 할 수있는 것은 그림자를 추가하는 것입니다 그런 다음 우리는이 색으로 여기에 와서 이것을 내려 놓을 수 있습니다 20, 그러면 우리는 Y와 함께 놀 수 있습니다 어쩌면 보급이 조금 있습니다

그런 일을하십시오 그래서 0,4, 4, 그리고 마이너스 1이 내 값으로 설정되었습니다 나는 언제든지 들어 와서 그것을 바꿀 수 있습니다 가자 여기에 우리가 사용할 수있는 아이콘이 있습니다

이제는이 아이콘을 하나만 사용하려고합니다 디자인하지만,이 튜토리얼에서는 실제로 4 개의 아이콘과 심볼에서 오버라이드가 작동하는 방식을 보여줍니다 다시 한번 정말 멋지죠 Sketch에서 여기에있는 기능 그럼 코스 파일로 돌아와서 스케치 한 다음 내가 만든 '아이콘'스케치 파일을 엽니 다

그럼 내가 할 일은 이미이 디자인을 복사하는 것입니다 심볼, 그래서 Command-C 이 Sketch 파일로 이동 한 다음 내 기호 페이지 아래로 이동하십시오 Command-V를 붙여 넣으십시오 이제 오버라이드는 정말 멋진 방법입니다

비슷한 다른 종류의 참조를 사용하고 빠르게 변경하십시오 지금에 주문을 만들려면 동일한 대지의 항목을 사용해야합니다 크기 따라서 모든 대창은 30×30 픽셀입니다 그 이 '일반 사용자'를 사용할 때 Sketch는 내가 할 수있는 것을 알게 될 것입니다

'Edit'Symbol, 'Comment'Symbol 또는 'Check'Symbol으로 대체하십시오 그러니 가자 그 일을하는 방법을 보여주세요 하지만 그렇게하기 전에 저는 실제로 지금 당장 나는 다른 것을 가지고 있다고 지적한다 나는 색깔을 상징으로 사용하고있다

그리고 그 일은 내가 이걸 바꿀 때 파란색의 모든 경우가 하이라이트 색상이 변경 될 것입니다 그래서 여기에서 볼 수 있습니다 '레귤러 User '우리는이 색상 강조 기호를 사용했습니다이 기호는 이것을 참조하고 있습니다 예 이제이 색상을 변경하여 어떻게 작동하는지 보여줍니다

이제 Fill을 살펴 보겠습니다이 16 진수 코드를 파란색으로 변경해 봅시다 1BDDF2를 입력 한 다음 Return을 클릭하십시오 이제 모든 인스턴스가 표시됩니다 그것의 변화했다

우리가 이걸 실제로 움직일 필요가있는 것처럼 보입니다 우리가 간다 그리고 이것도 역시 위로 움직일 필요가 있습니다 우리는 거기에 갈 이제는 하나의 심볼 또는 색상을 변경하는 것만으로도 알 수 있습니다

Sketch에서 즉시 네 가지 항목으로 변경되었습니다 시원한! 이제 심볼을 사용합시다 다른 상징 안에 그러기 위해서 저는 Insert, Document, Regular에 들어갈 수 있습니다 여기에 정기적 인 디자인을 언급하고 있음을 명심하십시오

이것이 규칙적인 방법을 알 수 있습니다 그러면이 드롭 다운을 얻을 수 있습니까? 이것들이 너무 그룹화되어 있기 때문입니다 이 '규칙적인'규칙에 따라 따라서 '정규 / 사용자'라고 여기에서 볼 수 있습니다 'Regular / Edit'및 명명 규칙이 여기에 어떻게 설정되어 있는지 이들은이 드롭 다운 내에서 구성됩니다 그럼 이걸 버리자

'사용자'로 여기를 클릭하여 프로젝트에 집중시킬 수 있습니다 이제 우리가 해냈습니다 우리 페이지로 돌아가서 여기에 우리가 이것을 볼 수 있습니다 상징 그리고 이것은 Overrides와 같은 것들이 정말로 멋지게되는 곳입니다

이제 보시면 이 Overrides 섹션을 살펴보면 '일반 / 사용자'드롭 다운이 있으며,이 항목을 열면 나만 볼 수 있음을 알 수 있습니다 빠르게 다른 아이콘 디자인으로 전환하면 사이징과 간격은 모두 이월 될 것입니다 그게 내가 어떻게 일할 수 있는지 알 수있어 이 프로젝트가 정말로 커지면 효율적으로 자, 이제 가보겠습니다 다시 '일반 / 사용자'로 돌아가서 제목을 만든 다음 자막 섹션

키보드의 'T'를 눌러 텍스트 도구로 전환하십시오 나는 여기를 클릭하고 계속해서 'like'와 같이 입력 해 보겠습니다 최고의 전문 디자이너 " 내가 할 수있는 일은이 모든 것을 선택하는 것입니다 그것을 정당화해라

나는 서체라는 것을 쓸 것이다 Open Sans는 무료 오픈 소스 텍스트입니다 무게에 대해서는 가자 Semibold와 그 크기에 대해서는 조금 더 커 보이겠습니다 45로 설정하겠습니다

문자 간격을 2로 설정하십시오 색상으로 들어가 보겠습니다 여기에 맞춤 색상으로 설정해 보겠습니다 어두운 보라색처럼 보자 4F5163의 16 진수 코드를 사용해 봅시다

그런 다음 추가해 보겠습니다 문서 색상 그리고 나서 이걸 옮기고 에 대해 따라서 중앙에 있는지 확인하려면 여기를 클릭하십시오 하자 우리 아이콘에 대해서도 똑같은 것을하고,이 텍스트를 옮기면 20 픽셀 서로에게서

그런 다음 하위 텍스트 섹션을 추가하십시오 그럼 다시 'T'를 치자 클릭하십시오이 페이지에서 실제로 내 코스 파일에 들어가기로했습니다 'text'폴더에 'filler-text

txt'가 있습니다 그래서 나는 그것을 열어서 일부를 복사 할 수 있습니다 이 필러 Lorem Ipsum 텍스트, Command-C를 입력 한 다음 붙여 넣습니다 그런 다음 이것을 선택하고 크기를 25로 바꾸고 Regular로 설정하자 그리고 문자 간격을 1로 설정하십시오

색상에 다른 맞춤 색상을 사용합시다 여기에서도 마찬가지로 '96'과 같은 회색과 같습니다 우리 색상에 추가하십시오 팔레트도 그리고 우리가 그것을 바꿔 놓았는지 확인해 봅시다

25의 크기 우리는 거기에 간다 그 다음에 센터에 있는지 확인하십시오 또한 20 픽셀 밖에 떨어져 있지 않습니다 여기에서 축소하여 무엇을 볼 수 있습니까? 그 모습입니다 좋아, 나는 그것이 좋게 보인다라고 생각한다! 나는 실제로 들어올거야

그 기간을 털어 놓으십시오 이제 이들을 그룹화 해 보겠습니다 Command-G를 눌러 'Title & Subtitle'이라고 부르십시오 시원한! 이제 우리 코스 파일로 돌아가서 그 사람들을 데려 오자 그래서 우리가하는 일은 '사람들'아래의 코스 파일에 들어갑니다

나는이 다섯 가지를 가지고 있습니다 png는 사실 내가 찍은 사진 촬영 이미지입니다 전에 나는 실제로 이것을 카메라에서 꺼내 Photoshop에서 열어 본 다음 Photoshop에서 선택 영역과 투명한 PNG를 만들었습니다 그럼 그냥 드래그하자

이것들을 스케치로 여기에서 볼 수 있습니다 서로의 상단 그러나이 사람들이 축소되었음을 명심하십시오 그러나 우리는 그들이 실제로 얼마나 큰 지에 관한 상대적인 위치를 유지하기를 원합니다 그래서 우리가 할 수있는 것은 수평 가이드를 만들고 그 가이드를 통과 시키십시오 비슷한 점을 알고 있으므로 발목과 비슷합니다

그런 다음이를 참조로 사용하십시오 서로의 상대적 높이로 설정되어 있는지 확인하십시오 그럼 우리가 할 수있는 일 이 통치자에게 다가와서, 당신이 그것을 보지 못한다면, 당신은 '보기'에 올 수 있습니다 '캔버스'로 이동 한 다음 '눈금자 표시'가 선택 해제되어 있는지 확인하십시오 그래서 여기를 가리키면됩니다

가자 이 사람들을 주변에 배치하십시오 그래서 나는 그녀가 중심에 있기를 바란다 그래서 그런 식으로 나는 그녀가 오른쪽으로 가고 싶다

나는 이런 종류의 발의 중심으로 이동합니다 나는이 남자가 왼쪽에 있기를 바란다 그런 식으로 그, 나는 멀리 왼쪽 편에 있고 싶다 나는 중심을 지나고 싶다

이제, 나는 그를 실제로 위치시킬거야 내가 그 사람이되기를 바란다 그의 머리가 친절 해지기 바로 전에, 너도 알다시피, 측면에서 잘랐다 이 녀석에 관해서는 바로 여기 그리고 나는 실제로 그를 뒤집어 놓을 것이고 그래서 그는 그가 보이는 것처럼 보입니다 다른 방향을보고

그래서 그렇게하기 위해 나는 뒤집어서 지금 그가 좋아하는 것 같이 보이고 그걸보고있는 것처럼 보입니다 방향 그리고 그냥 조금만 움직여 봅시다 가자 그를 위로

시원한! 이제 모든 사람들이 위아래로 정렬되어 있음을 볼 수 있습니다 그들이 실제로 얼마나 키가 크지는 않습니다 그리고이 남자를 조금 움직여 보자 그의 머리가 시작되기 바로 직전에 더 많이 오른쪽에서 더 잘랐다 모서리

그런 다음이 위치를 설정 한 다음이 위치를 설정해 보겠습니다 하나는 우리가이 사람들을 중심에두고 싶은 곳으로 설정되어 있습니다 둘 다 그럼, 우리가 할 수있는 것은이 세 가지 레이어를 선택하는 것입니다 및 '가로로 분포하십시오

' '하위 픽셀에 배치'를 클릭하면 그 위치에 대해 여기에 전체가 아닌 값을 붙이십시오 그리고 그녀가 스냅하는 걸 볼 수 있습니다 제자리에 그런 다음 우리는이 사람에게 똑같은 일을합니다 3 개의 레이어를 선택하거나, 균등하게 또는 하위 픽셀로 배포하고, 지금은 우리는이 사람들을 멋지게 배치했습니다

자, 이걸 선택하십시오 사람들, Command-G, 그리고 이것을 '팀'이라고 부릅니다 그리고 나서 화살표 키를 사용하고 싶습니다 교대를 지키면서, 내가 좋아하는 곳으로 이걸 옮기는거야, 아마도 그런 식으로 이 제목 섹션을 약 30 픽셀 이동하십시오

꼭대기에서, 그래서 나는 그것 같이 보이는 무언가가 좋게 본다 이제 add-make하자 이 사람들은 왼쪽과 오른쪽에 있습니다 불투명 그래서 우리가 할 수있는 일은 '팀'에오고,이 네 사람에 대해서 저는 올 수 있습니다

이상을 선택하고 색상 조정으로 이동하십시오 그리고 포화 상태에서 저쪽으로 가져와 그런 다음 불투명도를 20까지 떨어 뜨릴 수 있습니다 가장자리에있는이 녀석들을 내려 놓을 수 있고, 10 살이되자 그게 뭔지 보자

보이는 군 그래서 좀 더 가벼워서 이걸로 10도하자 시원한! 그래서 지금 우리가 해냈다 고하자 여기에 작은 섹션을 추가하자 이것이 누구인지, 위치가 무엇인지, 어디에서 왔는지 등

그러니 가자 이 가이드를 제거하면 더 이상 필요하지 않습니다 좋습니다 확대 / 축소 여기에 'U'를 치면 둥근 사각형이 생기고 클릭 만하면됩니다 드래그하여 이런 식으로 만듭니다

여기 모퉁이에서 우리는 이것을 조정할 수 있습니다 우리가 원할 정도의 둥근 정도에 근거하여, 지금은 6으로 설정하려고합니다 Border를 끄고 Fill으로 들어가서 그 자리를 선택하십시오 off-white 'FA'가 줄 지어있다 그런 다음 그림자를 추가하여 조금 더 잘 볼 수 있습니다

Y를 높이고 흐리게 효과를 높이십시오 조금, 스프레드를 줄이고, 알파를 가져와 우리가 간다, 나는 그것이 좋게 보인다라고 생각한다 그렇다면 우리는 앞뒤로 갈 수 있습니다 센터 내 키보드 'T'를 치면 키가됩니다

텍스트 도구 여기를 클릭하고 'Sarah'와 같은 이름을 입력하십시오 이것을 선택하고 글꼴 크기를 18로 설정하십시오 규칙적으로 유지합시다 색상에 대해서는이 어두운 색상을 선택하겠습니다

그리고 가자 지금 당장 – 실제로, Regular 대신 Semibold로 설정해 보겠습니다 조금 더 대담 해져서 우리가 그 물건보다 조금 더 중요하다는 걸 압니다 우리가 그 아래에 놓기를 원합니다 그럼, 그렇게 하죠

다시 'T'를 칠거야 이 중 하나를 이것을 Regular로 변경합니다 그녀의 입장을 입력 할 수 있습니다 'UX 디자이너 '를 입력 한 다음 위치 정보를 입력하십시오 그런 다음 애틀란타 파트에서 우리가 사용했던 그 푸른 색으로 변합니다

자, 실제로 그걸 내 색으로 저장하는 것을 잊어 버렸으므로 우리가 할 수있는 일은 바로 앞으로 나아가는 것입니다 다시 16 진 코드를 입력하면 1BDDF2가됩니다 그리고 나서 가보자 이를 문서 색상에 추가하십시오 우리는 거기에 갈

그럼 가서 이것들을 밖으로 내 보냅니다 명령 -G 계속 진행하고 '이름', ' 위치' 우리는 그것을 상자 안에 놓을 수 있습니다 이 픽셀을 더 넓게 만들자

우리는 가득한 30를 얻는다 그런 다음이 전체를 그룹화하면됩니다 그걸 '콜 아웃'이라고 부르세요 내가하고 싶었던 것이 한 가지 더 있습니다

'Insert', 'Shape'및 그 다음 'Triangle' 그리고 여기에 작은 삼각형처럼 보자 보더를 끄고, 채우기 위해 들어오고, 꺼져 버리고, 둘 다 선택할 수 있습니다 이 모양들 중 'Union'이라고 말하면이 단색 모양을 만듭니다 그럼 우리는 언제든지 들어 와서 크기를 조정하십시오

그래서 그런 짓을하자 그것을 중심에 놓으십시오 나는 그것이 좋게 보인다라고 생각한다 이제 우리는 앞으로 나아갈 수 있고 움직일 수 있습니다 우리가 좋아하는 장소에서 불러 내십시오

그래서 그것이 중심에 있는지 확인하십시오 약 40 하단에서 픽셀 축소하고 그 모습을 확인해 봅시다 실제로, 위로 움직여 봅시다 아래에서 90 픽셀을 보겠습니다

내 생각에는 좋아 보인다 시원한! 그래서 거기에 내가하고 싶었던 한가지 더 있습니다 좀 더 시각적으로 재미있게 만들려면 몇 가지를 추가해야합니다 사람 주위의 타원, 중심에있는 사람 그리고 나는 그것이 단지하려고 생각하고있다

조금 더 매력적으로 보이게하십시오 그래서, 여기를 확대 할 것입니다 'O'를 눌러 타원형 도구를 가져오고 Shift 키를 누릅니다 드래그하여 원 Borde를 끄고 Fill으로 들어가서 여기에서이 색을 고르십시오

그리고 우리는 우리가 원하지만 이것들을 다시 가져올 수 있습니다 복제 옵션 보류 그러면이 크기를 조정할 수 있습니다 이걸 이쪽으로 옮겨서 이걸 만들어 보자 조금 작아 이걸 조금 더 크게 만들고 나서 내가 할 일은, 너도 알다시피, 더 많은 것을 복제해라

대신에, 같은 색을 유지하면서, 나는 할 수있다 실제로 들어가서 불투명도를 줄이십시오 약간 그래서 저는 사실이 과정을 계속하고 속도를 빠르게 할 것입니다 실시간으로보기를 원합니다

그런 다음 우리가 끝내면, 우리는이 타원으로 들어 와서 그것들을 선택할 수 있습니다, Command-G, '서클 악센트 (Circle Accents)'와 같이 호출하면됩니다

Responsive Web Design in Sketch App: Auto Layout & Flexbox Plugin

안녕하세요, 저는 Skillthrive의 Hunter입니다이 자습서에서는 와 같은 반응이 빠른 카드 레이아웃을 만드는 스케치의 자동 레이아웃 플러그인 이 하나

시작하기 전에 Anima를 다운로드하여 설치해야합니다 스케치 설명에 링크가 있습니다 그러면 다운로드 할 수있는 페이지로 이동하게됩니다 또한 원하는 경우 오늘의 과정에서 사용하고있는 Sketch 파일을 다운로드하고, Skillthrive

com에서 무료 회원이되어 즉시 액세스 할 수 있습니다 이 코스뿐만 아니라 현재 진행중인 모든 코스 파일 우리 사이트 설명에 참여할 수있는 링크가 있습니다 또한, 우리가 도착하기 전에 시작,이 실제 튜토리얼의 의도는 자동 레이아웃의 기초를 배우고 모든 것을 압도하지 마십시오 그것이 할 수있는 일

따라서 핀 고정 방법, 너비 설정 방법 및 누적 된 그룹에 대한 소개 그래서 이것은 확실히 나를 데려간 플러그인입니다 잠시 동안 실제로 편안함을 느낄 수 있으므로 배우는 것을 가져 가십시오 오늘부터 디자인에 적용하고 일부 설정을 사용하며 질문이 있으시면 언제든지 아래 의견에 물어보십시오 그래서 그걸로 Sketch에서 시작하여 오늘의 튜토리얼을 시작하겠습니다 그래서 당신은 Sketch에서이 단순한 카드 디자인을 사용하고 있음을 알 수 있습니다

이제이 사람이야 실제로 디자인에서 원하는 가장 작은 카드로 디자인되었습니다 소형 모바일 화면 용입니다 자, 저는 항상 가장 작은 것으로 시작하고 싶습니다 먼저 카드 디자인

그런 식으로 똑똑한 사람을 만들 수 있습니다 나는 작은 카드로 문제가 생기는 것에 대해 걱정할 필요가 없다 디자인 그렇게 말하면서이 카드가 어떻게 사용되었는지 보도록하겠습니다 실제로 지어졌다

따라서이 그룹으로 이동하여이를 확장하면 나는이 사건에 관한 정보 인 '정보 그룹'을 가지고있다 그리고 나서 나는 내가 이미지라는 이름의이 모양 레이어가 있습니다 이제 채우기 위해 와서 당신은 내가 이것을 이미지로 채우고 이것을 설정한다는 것을 보게 될 것입니다 옵션을 여기에 기입하십시오 그리고 이것은이 이미지를 사용하여 모양의 크기에 따라 멋지게 표시합니다

이것은 정말로 될 것입니다 스케치를 사용하기 때문에 실제 크기를 확장하고 크기를 조정할 때 중요합니다 이 이미지가 뒤에 있는지 확인하려면이 설정을 다시 참조하십시오 멋지게 표시됩니다 이제 내가 한 또 다른 사항은 여기에 채우기를 추가하는 것입니다

정말 간단한 선형 그라디언트 그리고 이것을 켜고 끄면 모든 것을 볼 수 있습니다 이 작업은 실제로 텍스트가 우리가 여기서 사용하고있는 어떤 이미지에서도 볼 수있을 것입니다 이제이 '정보 그룹'으로 이동하여이를 확장하면 우리는 두 개의 텍스트 레이어를 사용한 다음 등급 그룹을 만들었습니다 5 개의 별 모양의 레이어를 그룹화하여 뷰어, 알다시피, 이벤트에 대해 어떤 등급이든 상관 없습니다

이제 내가 원하는 또 다른 것 이 텍스트 레이어에 관해서는 여기에 언급했는데, 나는 정렬과 'fixed'를 클릭하고 'fixed height'가 선택되지 않았는지 확인했습니다 지금 'auto'또는 'fixed height'가 때때로 'auto'에있을 때 내가 실제로 시도하려고 할 때 어떤 문제를 줄 것입니다 이 텍스트를 동적으로 확장하십시오 그러니 당신이 통과하고 가지고 있는지 확인하십시오 'fixed'로 설정 한 다음 'fixed height'및 'fixed width' 선택하지 않았다

자 이제 실제로 시작하는 방법에 대해 이야기하겠습니다 자동 레이아웃 플러그인을 사용하여이 스마트 카드를이 특정 카드 레이아웃에 추가하십시오 그래서 내가 집중할 첫 번째 일은 바로이 '정보'그룹핑입니다 이제 우리가 오면 아래로 우리는 우리가 왼쪽에서 10 픽셀을 가지고 있다는 것을 볼 수있는 선택권을 가지고있다 하단에서 10 픽셀

이제 나는 그 디자인을 원한다 매개 변수,이 이벤트 카드가 얼마나 큰 지 상관없이 수행 할 수 있습니다 그래서 우리는 할 수있는 것은이 계층을 선택하는 것입니다 우리는 Anima 플러그인으로 갈 수 있습니다 make 우리가 여기에있는 왼쪽 아이콘에 있는지 확인하십시오

이것은 실제 자동 레이아웃 설정입니다 그런 다음 우리는 이것을 확장 할 수 있고 여기에 올 수 있습니다 그리고이 버튼에 대해 말하면, "이봐 요, 왼쪽에서 10 픽셀을 가져온 다음 아래쪽에서 10 픽셀을가집니다 언제나 그렇습니다 "그런 식으로, 우리가 얼마나 큰 일을 하든지간에, 항상 언급 할 것입니다

여기서 설정 한 매개 변수로 돌아갑니다 이제 내가 할 일이 또 있습니다 여기에 너비가 설정되어 있으므로 픽셀 대신 설정해 보겠습니다 85 %로 설정하십시오 그렇게하면 그것이 무엇이든간에 그 크기를 나타낼 것입니다

이벤트 카드가 무엇이든간에 그리고해야 할 또 다른 일은 내가 여기에 최소 너비가 290로 설정되어 있습니다 자, 제가 이전에 말씀 드렸듯이, 이것은 가장 작습니다 내 카드를 원한다는 것을 290으로 설정하면 실제로이 이벤트 카드를 300 픽셀보다 작게 설정하는 이유는이 이벤트 카드가 이제 왜 300 픽셀입니까? 글쎄, 우리는 10 픽셀 왼쪽에 이것과 10 + 290은 300이며 카드 300의 전체 폭을 나타냅니다 우리가 실제로 이것에 설정하려고하는 유일한 설정들 '정보'레이어이지만, 다음에 우리가 실제로하려고하는 것은 뭔가 – 스택이라고하는 것을 적용합니다 자, 스택에 익숙하지 않다면, 본질적으로 스택이란 무엇인가? 매개 변수를 해당 그룹 내의 하위 계층에 추가합니다

따라서이 정보를 확장하면 등급 '을 선택하면 여기에 네 개의 레이어가 있고 세 개의 텍스트 레이어가있는 것을 볼 수 있습니다 이 스타 등급 분류 스택을 적용하면 어떻게 될까요? 이 정보가이 4 개의 레이어에 적용될 것입니다 계속 가라 이 등급 그룹의 별표 레이어 인 여기의 레이어가 이들이 아이이기 때문에 적용된 속성을 가지지 않을 것입니다

이 등급 분류의 레이어 그래서 단지 당신이 빌드하기 시작할 때 여기에서 명심해야 할 중요한 것 스택을 만들고 디자인이 반응 적인지 확인하십시오 그럼 그냥 가자 앞서서 이것을 무너 뜨리고 '정보 및 평가'로 돌아와서 여기에 3 개의 점이있는 폴더 모양의 아이콘으로 이동합니다 누적 된 그룹을 만들 수 있습니다 여기를 클릭하겠습니다

이 레이어가 서로 위에 있기 때문에 이것이 수직이라는 것을 명심하십시오 할거다 그것들이 왼쪽으로 정렬되고 5 픽셀의 간격을 가지는지 확인하십시오 그래서 지금 우리가 얼마나 크게 만들었 든 상관없이 항상 이것들을 다시 참조 할 것입니다 이 '정보 및 등급'레이아웃의 요소에 대한 설정 이제 우리가 할 수있는 일 이 '등급'그룹으로 돌아 왔습니다 계속해 보도록하겠습니다

하나 뿐이지 만,이 요소는 내부 요소가 여기에 친척이 있거나 서로 옆에있어 가로로 상대적인 그래서 우리는 그냥 가서 레이어의 맨 위에 놓고 여기서 간격은 5로 설정됩니다 그리고 실제로, 제가 이것을 클릭하기 전에, 95와 15로 너비와 높이를 설정해 봅시다 그렇게하면, 알다시피,이 그룹은 결코 그것보다 작아지지 않을 것입니다 그리고 좋은 측정을 위해, 그냥 펼쳐서이 모든 스타 레이어를 선택하고 별이 결코 가지 않거나 더 크거나 작아지지 않도록 너비와 높이를 여기에 넣으십시오

15 x 15 픽셀보다 큽니다 그렇게 말하면 우리는 계속 나아가고 붕괴 될 수 있습니다 이것들이 있습니다 우리가 들어 와서이 카드를 펼치면 그냥 축소 시키십시오 하자 이 크기를 더 크게 만들면 텍스트가 업데이트되지 않았 음을 알 수 있습니다

그런 업데이트가있을 때까지 이것을 클릭하십시오 그럼 우리가 여기를 확대하면 알 수 있습니다 왼쪽에서 10 픽셀, 10 픽셀입니다 아래쪽, 그리고이 내부의 모든 그룹은 서로 5 픽셀이 될 것입니다 따라서 크기를 조정해야하는 경우 많은 시간을 절약 할 수 있습니다

그런 식으로 위치를 바꿀 필요가 없으며 그런 것에 대해 걱정할 필요가 없습니다 그래서 이것은 매우 편리합니다 그리고 이것이 여러분이 장기적으로 얼마나 유용하다는 것을 알기를 바랍니다 자 이제 가서 카드 Z로 돌아가 명령 -Z를 해봅시다 우리가 할 수있는 일은이 '이벤트 카드'를 선택하는 것입니다

타임스 이제 우리는 서로의 위에 3 개를 쌓아 놓았습니다 계속해서이 레이어들을 붕괴시키고, 그것을 선택하고,이 스택으로 돌아와서, 수평을 선택합시다 그래서 우리는 서로를 옆으로, 왼쪽으로 그리고 권리 우리는 이렇게 말할 수 있습니다

"이봐, 이걸 맨 위에 놓고 여기에 20 픽셀 간격을 두십시오 "이제는이 모든 것들이 각각 20 픽셀 씩 떨어져 있습니다 그런 다음이 그룹에 와서 이름을 지정하면됩니다 'row-events'를 선택하면 여기에서 몇 번 명령을 내리고이를 선택하고 다른 스택 이번에는 수직으로

우리는 이것들을 왼쪽 정렬 할 수 있습니다 그냥 20 픽셀을하고, 지금 우리는이 9 개의 카드를이 멋진 레이아웃으로 가지고 있습니다 그리고 그냥 'column-events'로 바꾸십시오 그리고 지금 우리가 들어 와서 실제로 크기를 조정하면이 모든 것이 크기에 따라 크기가 조정됩니다 여기에 설정 한 설정 중 그래서 당신은 멋지게 보입니다

그렇게하면 우리가 신속하게 설계하고 크기를 조정할 수 있습니다 필요하다 자 이제 좀 더 똑똑해 지도록하겠습니다 이 층들의 따라서 가장 먼저해야 할 일은 대도시, 그래서 여기에 아트 보드를 만들어 보겠습니다 그리고 앞으로 나아가 자

이것을 1400이나 1440과 같은 것으로 설정하면됩니다 여기에서 우리가하고 싶은 일들에 대해서 이야기하십시오 예를 들어 데스크톱 용이며 데스크톱 HD이기 때문에 우리가 할 수있는 일은 "이봐, 우리는 이 열은 고정 폭이 될 것입니다 "그래서 우리는 여기에 와서 여기를 클릭하여 고정 폭을 설정하면 픽셀 차원을 설정할 수 있습니다 하자 1,200이므로 1,200으로 크기가 조정됩니다

그런 다음 우리는 각 행에 와서 말할 수 있습니다 "이봐 요, 여기 폭은 1200 이길 원합니다 그래서 열 그룹의 전체 범위를 채울 것입니다 "그래서 그것은 왜 멋진가? 들어 와서 실제로 크기를 조정할 수 있다는 것입니다 행에있는 것들도 동적으로 크기를 조정할 것입니다

자, 예를 들어이 '이벤트 카드'를 클릭 해 보겠습니다 그냥 좀 더 크게 만드십시오 오른쪽의 크기가 조정 된 것을 볼 수 있습니다 카드를 삭제하면 카드를 삭제할 수 있습니다 뿐만 아니라 크기를 조정하려고합니다

이제 우리는 이것을 거쳐 만들어야합니다 그들이 업데이트하는지 확인하십시오 그러나 이것이 정말 멋진 방법임을 알 수 있습니다 Sketch에서 유연한 디자인을 만들 수 있습니다 그럼 그냥 계속 지키자

지금이 곳 여기서 언급하고 싶은 또 하나의 점은 행을 가져 와서 그것을 만드는 방법, 수평 대신에 앞으로 나아갈 수 있습니다 그들을 수직으로 쌓아 라 따라서 모바일 용으로 설계하려는 경우 그렇게 빨리 할 수 ​​있습니다 그러니 그냥 'A'를 클릭하고 새로운 여기에 대위원

이 드롭 다운의 경우, 'Apple 기기 '를 선택하고 여기에'iPhone 8 plus '를 설정하십시오 그러면 우리가 할 수있는 일은 이 그룹 중 하나에 여기에 오십시오, 여기에서 이것을 해봅시다 Command-C, 우리는 할 수있다 여기에 iPhone 그룹으로 붙여 넣기 만하면됩니다 "이봐, 수직으로하지 마

" 그리고 나서 우리는 이것을 무언가로 재조정 할 수 있습니다 우리의 최소 300 명과 같습니다 그래서 여기서 일어나는 일은 언급 한 너비를 변경하십시오, 그래서 진행하고 실제로 이것을 unclick, 이제 우리는 300으로 크기를 조정할 수 있습니다 그리고 나서 우리는 계속 진행할 수 있습니다 이것을 실제 대지로 옮기십시오

우리는 거기에 갈 이제 우리는 이 대지 크기를 확장 한 다음이 요소가 업데이트되는지 확인하고, 이제 몇 번의 클릭만으로이 멋진 모바일 레이아웃을 얻을 수 있습니다

Sketch Tutorial – Create a web design in Sketch App

안녕하세요, 저는 Skillthrive의 Hunter입니다이 자습서에서는 이 방문 페이지는 스케치에 있습니다

시작하기 전에 다음을 다운로드하십시오 코스 파일은 Skillthrivecom에서 무료 회원이됩니다 너는 즉시 얻을거야 오늘의 코스에서 우리가 만들고있는 스케치 파일뿐만 아니라 우리의 모든 현재 무료 코스

당신을 데려 갈 설명의 링크가 있습니다 가입 할 수있는 등록 페이지로 이동하십시오 일단 Sketch에 들어가면 계속 진행하십시오 A를 클릭하여 대지 도구를 불러옵니다 그런 다음 클릭하고 드래그합니다

그것은 아트 보드를 만들 것입니다하지만 제가하고 싶은 것은 너비와 이 값을 1440으로 변경하고 높이를 1617로 변경 한 다음 return 키를 누릅니다 그런 다음이 아트 보드의 이름을 방문 착륙 페이지 1로 변경하십시오 그런 다음 여기를 축소하여 우리가 원하는 이미지를 여기에 놓을 것이기 때문에 전체 대지를 보아라 배경으로 사용할 수 있습니다

그 이미지를 코스 파일에 포함 시켰습니다 당신은 여기를 볼 수 있습니다, 나는 Sketch로 드래그 할 수 있습니다 너무 크다고 크기를 결정한 다음이 값을로 내립니다 2700, 그 다음 위치를 변경하십시오

일단 네가 좋아하는이 곳에서 그것을 얻으면, 와라 가우시안 블러까지, 그 양을 50으로 늘린 다음 채우기 위해 들어온다 단색으로 채우고, 진한 보라색을 선택하고 변경하십시오 블렌딩 모드를 곱합니다 불투명도 위로 마우스를 가져 가면 계속 진행할 수 있습니다

그 전체 효과를 줄이려면 왼쪽으로 드래그하십시오 어떤 것 약 30 %가 좋아 보인다 그런 다음이 레이어를 잠글 수 있으므로 우연히 움직이지 마라 그런 다음이 화면 위로 확대 해 보겠습니다 헤더에서 작업을 시작할 수있는 섹션 첫 번째 작업은 진행입니다

앞으로 로고를 만드십시오 그렇게하기 위해, 저는 삽입, 모양, 삼각형 48 픽셀 주위에 완벽한 사각형을 만들겠습니다 나는 그것을 뒤집어서 뒤집을 것이다 나는 두께를 2로 설정하고 테두리 색상으로 들어가서 다음으로 변경하십시오

이 튜토리얼에서 사용하고자하는이 색상은 e2e1e7입니다 그런 다음 return을 클릭하십시오 나는 그 색을 덧붙일 것이다 이 플러스 버튼을 클릭하여 견본을보실 수 있습니다 이제 채우기를 해제하면 우리는이 윤곽 만 볼 수 있습니다

나는 떠나지 않을거야 일반 사각형으로, 실제로 할 일은 또 다른 삼각형 이걸 조금 더 크고 더 얇게 만드십시오 가자 이 값을 1에서 2로 올리고 방금 저장 한 색을 한 다음 채우기

그럼 저는 이것을 다음과 같이 회전 시켜서 움직일 것입니다 끝났어 그런 다음 두 가지를 모두 선택하겠습니다 삼각형을 뺀 다음 빼기 자, 네가 그 모습을 못 본다면 방망이에서 바로 원한다면, 당신이 할 수있는 것은이 결합 된 형태로옵니다

확장하면 언제든지 들어 와서 모양을 편집 할 수 있습니다 나는 이걸 만들 수있어 조금 키가 크면 스트레칭을 할 수 있습니다 어쩌면 조금 더 피부를 더 어둡게 만들 수도 있습니다 나는 그것을 조금 회전시킬 수있다

그런 모양이 좋아 보인다 나는 돌아올 수 있고 앞으로 나아갈 수있다 이 결합 된 모양의 이름을 로고로 변경하여 그 모양을 알 수 있습니다 할거다 지금 당장 거기에 남겨두면 nav 링크 작업을 시작하겠습니다 내 키보드에서 T를 눌러 텍스트 도구를 불러 올 것입니다

나는 나는 무료 글꼴 인 루빅 (Rubik) 글꼴을 사용하고있다 너희들이 그걸 가지고 있지 않다면 나는 코스 파일을 포함하고있다 무게를 중간으로, 크기를 16으로, 문자를 35로 설정합니다 그런 다음 색상은 우리가 로고에 사용했던 색상으로 설정됩니다

그런 다음 저는 우리가 이해할 수있는 몇 가지 내용을 입력 할 것입니다 프로젝트가 될 것입니다 그런 다음 alt 키를 누른 채로 이것을 클릭하십시오 약 50 픽셀로 축소됩니다 이 이름을 가격 책정으로 바꿀 것입니다

어쩌면 하나 더 할 수 있습니다 이렇게 말하면됩니다 그러면 우리는 그것들은 서로 50 픽셀입니다 이게 46이야 그래서 네 개를 왼쪽으로 움직여

우리는 앞으로 나아갈 수있다 이 그룹핑 명령 G를 선택하고이 nav 링크의 이름을 지정하십시오 이제 내가 할 수있는 일은 계속해서 데모를 얻는 것과 같은 것 그렇게하기 위해 나는 U를 치고 둥근 사각형 도구 이걸 선택하고 끌어 내십시오

저는 폭을 162로, 높이를 44로 설정하려고합니다 반지름은 단지 그 모든 것을 증가시킵니다 나는 국경에 올거야 그걸 두 가지로 만들어라 색깔에 와서 이것을 이것을 정말로 설정하십시오

시원한 파란색,이 16 진수 코드 30A8FF, 그리고 그냥 가서이 저장 미각뿐만 아니라 그러면 우리는 계속 진행하여 채우기를 해제 할 수 있습니다 그런 다음 T를 다시 눌러 텍스트 도구를 불러오고 모든 대문자를 입력하면 데모를 볼 수 있습니다 그런 다음이 위치를 변경하고 얼마나 멀리 있는지 생각해보십시오 그것은 여기에서 가장자리입니다

나는 실제로 앞으로 나아갈 것입니다 이것을 그룹화하고 데모 버튼을 호출하십시오 그럼 우리는 그것에 대한 아이디어를 얻을 수 있습니다 입니다 실제로 그것은 이미 중심에 있고 잘 보입니다

27 픽셀입니다 각면, 위에서 13면, 그리고 바닥면에서 12면 그럼 나는 갈거야 이것을 가지고 약 50 픽셀 정도 움직여 라 그럼 내가 갈 수있어

앞으로이 명령 G를 그룹화하고 탐색하십시오 이 로고를 보도록하겠습니다 나는 그것을 움직일 수 있고 그것이 중심에 있는지 확인하십시오 나는 그 모양이 좋아 보인다 이제이 두 가지를 모두 그룹화 할 것입니다 – 명령 G,이 헤더를 호출하십시오, 이 전체 그룹화를 위쪽에서 약 50 픽셀 이동하십시오

나는 센터 할 수있어 이 버튼을 클릭하면됩니다 지금 당장 걱정하지 않을거야 왼쪽과 오른쪽은이 다음 섹션에서 작업하기 전까지 정렬됩니다 그렇게 말하면 다음 섹션을 진행해 보겠습니다

내가 할 일은 비디오 섹션을 만드는 것입니다 그리고 그렇게하기 위해 나는 이 이미지에서 뒤로 드래그하면됩니다 이제 당신은 그것을 볼 수 있습니다 조금 커 나는 축소하려고합니다

저는 이것을 지금 1920 년으로 바꿀 것입니다 그런 다음 직사각형을 만들고 그 사각형을 드래그하여 크기를 조정하고 싶습니다 이 직사각형을 1920×1080으로 바꿉니다 비율은 1920×1080입니다 앞으로 나아가서 가면 저것을 들어 와서이 이미지를 움직일 수 있습니다

이 비례 내가 할 일은 폭으로 설정하는 것입니다 900의 값을 가져온 다음이 값을이 대지로 다시 드래그합니다 나는 사실 단지 클릭하고 드래그하면이 이름이 "비디오"로 바뀌어서 무엇인지 알 수 있습니다 그런 다음 여기에 놓을 것입니다

실제로이 문제에 다시 들어가십시오 그 마스크는 우리가 그것을 보지 못하도록 그 필을 끕니다 우리가 간다 좋아 보인다 다음으로해야 할 일은 여기에 텍스트를 추가하는 것입니다

다시 말하지만, 키보드에서 T를 눌러 텍스트 도구를 불러오고 싶습니다 할거다 여기를 클릭 한 다음 매체의 무게 대신이 값으로 변경하고 싶습니다 이것을 규칙적인 것으로 설정하겠습니다 크기를 40 픽셀로 설정하겠습니다 여기서 캐릭터를 7로 설정 한 다음 줄을 55로 설정합니다

그런 다음 색상은 내가 마지막으로 사용한 시간과 동일해야합니다 그럼 나는하고 싶다 모든 대문자와 같이 여기에 "최고의 라이브 스트리밍 플랫폼"을 입력하십시오 어쩌면이 부분을 조금 어둡게 만들 수도 있습니다 이 모양이 정말 마음에 들지 않습니다

계속해 보겠습니다 제목 좀 더 길거나 좋아 "가장 강력한 " 그와 같은 어떤 것이 내 의견으로는 좋아 보인다 그럼 우리가 이걸 옮길 수있어 지금 당장 지금은 포지셔닝에 대해 정말로 걱정하지 마십시오 내가 원하는 내 키보드에서 T를 치기

이것은 하위 텍스트가 될 것입니다 서브 텍스트 크기를 22로 설정하려고합니다 문자를 3으로 설정하려고합니다 그런 다음 줄을 40으로 설정하십시오 그런 다음 필러 텍스트를 입력 할 것입니다

섹션이 너비 545로 설정되어있는 것을 볼 수 있습니다 따라서이 섹션을 선택하면됩니다 545로 설정하십시오 그리고 이것을 드래그하여 약 50 픽셀 이동시킵니다 이걸로

나는 명령 G를 칠 수 있습니다이 이름을 "열 1"로 지정하십시오 이제 우리는 우리가 나아가서 이것으로 돌아갈 수 있다는 것을 알았습니다 비디오 섹션 내가하고 싶은 첫 번째 일은이 실제 이미지에 들어 있습니다

채우기로 들어간 다음 방사형 채우기를 수행 한 다음 이것을 대략 이것의 중심 이 어두운 부분을 구석으로 옮기십시오 그라디언트의 경우 실제로는 이걸 검은 색으로 바꿔야 해 그리고 나서 저는 이것을 백인 대신에 만들 것입니다 조금 더 어둡게 만들 것입니다

그런 다음 혼합 모드를 변경합니다 곱해진 다음 불투명도를 떨어 뜨리십시오 이것을 켜고 어떤 효과를 얻었는지에 대한 아이디어를 얻을 수 있습니다 나는 실제로 다시 들어가서 회색을하는 대신 실제로는 흰색으로 해 어두운 색으로 보지 않을 수도 있습니다 그러면 들어 와서 반지름 채우기를 조금 가져 와서 그 가장자리는 더 어둡다

그저 그런 종류의 것이 도움이된다는 것을 확실히합니다 이 텍스트가이 이미지에 대해 돋보이게 될 것입니다 우리가 할 수있는 일 이제 재생 버튼을 추가하십시오 그렇게하기 위해 우리는 구형 삽입, 모양 및 직사각형으로 들어가 봅시다

할거다 여기 80 픽셀 x 60 인 직사각형을 만든 다음 90도 회전시킵니다 국경에서, 나는 2로 증가시킬 것입니다 색깔로 들어가서 그것을 설정하십시오 이것은 오프 화이트, 그리고 채우기를 해제하십시오 그럼 우리가 들어올거야

실제로이 두께를 상당히 증가시킵니다 이걸 더블 클릭하면 이 모든 모서리를 선택하고 싶습니다 그런 다음이 값을 늘리십시오 5 가지를 시도해보십시오 축소하면 우리는 그 모습을 볼 수 있습니다

자, 저는 사실 저는 – 들어가서 채우기를 켜고, 다음에 설정할 것이라고 생각합니다 다시이 색으로 그렇게해서 우리는 그것을 볼 수 있습니다 좀 더 쉽게 볼 수 있습니다 좋아, 그럼 그 자리에 그냥 놓아 두자

그리고 나는 이 비디오 레이어에이 삼각형을 드롭합니다 좋아 이 비디오 레이어에서 마지막으로 할 일은이 작은 리본을 여기에 추가하는 것입니다 그것은 "Live Now"라고 말할 것입니다 그리고 그렇게하기 위해, 내가 할 일은 실제로 R 사각형 도구를 사용합니다

나는 여기에서 직사각형을 끌어낼 것입니다 너비를 174로 설정하고 높이를 55로 설정합니다 그러면 내가 할 일은 다음과 같습니다 이 직사각형을 두 번 클릭하면이 지점으로 다시 이동합니다 내가 여기서 할 수있는 일은 여기에서이 지점을 잡는 것이고, Shift를 누른 상태로 있으면 가져올 수 있습니다

이것을 조금 왼쪽으로 그런 다음이 두 가지를 모두 선택할 수 있습니다 모서리 내가 할 수있는 일은 바로 앞으로 나아가 모서리를 늘려주고 그들 조금 더 둥근 모양 그래서 당신은이 아직도 똑 바르고, 이것들은 조금 더 둥글다

그래서 나는 실제로 조금 덜 둥근 것 4와 같은 것을 시도해 봅시다 그래서 저는 그것이 좋아 보인다라고 생각해라 계속 진행하고 클릭하십시오 테두리를 끈 다음 채우기로 들어가서 정말 밝게 설정하십시오

푸른 이제 내가 할 일은이 효과를 만드는 것입니다 이 비디오를 둘러 쌉니다 그래서, 저는 실제로 R을 다시 눌러서 직사각형 도구를 가져 오십시오 나는 이것을 이와 비슷한 것으로 끌고 갈 것입니다

나는 확대하려면 여기를 클릭하십시오 그냥 경계를 해제하십시오 채우기, 나는 갈거야 이 파란색으로 설정합니다 그리고 그것을 안으로 옮기십시오

그런 다음 두 번 클릭하겠습니다 여기이 코너에 와서 그냥 쳐 지우다 그리고 지금 제가 할 수있는 일은 조금 더 어둡게 만드는 것입니다 이제 우리가 마치 작은 감싸기 효과처럼 보이는 것처럼 축소합니다 그리고 나 실제로 조금 더 어둡게 만듭니다

시원한 이제 우리가 할 수있는 일은 여기에 약간의 텍스트 자 키보드에서 T를 누르고 우리는이 텍스트를 우리가 사용했던 것과 거의 같은 것으로 설정하려고합니다 nav 텍스트 그래서 그것은 16이 될 것입니다 우리는 여기서 3 년 반을합니다

그리고 실제로 갈거야 중간 기울임 꼴로 설정하고 "Live Now"와 같이 입력하십시오 그리고 나서 그냥 이런 식으로 이것을 재배치하십시오 그래서, 이것은 우리에게 말하고 있습니다 센터,하지만 나에게 그것은 내가 오른쪽으로 올 필요가있는 것처럼 보인다

그러니 자유롭게 안구가 당신을 중심으로 보지 않는다면 좋아, 이제 우리가 할 수있는 일 그냥이 세 가지 레이어를 선택하십시오 나는 Command G로 갈거야 이 "리본"이라고 이름을 짓고 비디오 위에 가져다 놓으십시오 이제, 나는 가지 않을거야

그걸 비디오 폴더에 넣으면, 그걸 사용하면 마스크 그 가면을 벗어난 모든 것은 감추어 질 것이고 그래서 우리는하지 않을 것입니다 그걸 원해 그래서, 차가워 요 나는 그것이 좋게 보인다라고 생각한다

그리고 이제 우리는 앞으로 나아갈 수 있습니다 이것의 위치와 함께 놀아 라 그럼 이걸 보자 센터에서 – 그 것처럼 보이는 것이 좋아 보인다 나는이 이미지를 너무 멀리 바라지 않는다

내가 할 수있는 일은 그냥 진행하는거야 이 모든 레이어 인 Command G를 선택하고이 섹션의 이름을 "-1"로 지정하십시오 그리고 우리가 이것을 끝내기 전에 내가하고 싶은 다음 일은 섹션에서이 비디오에 약간의 그림자를 추가하여 제공합니다 어떤 깊이 그러기 위해서 저는 이것을 선택할 것입니다

비디오 레이어, 그림자에 와서, 나는 여기에 색상으로 들어갈거야 그냥 진한 보라색처럼 선택하십시오 그리고 우리는 여기에 흐릿해질 수 있습니다 그것을 퍼뜨려 라 그런 다음 여기에 알파를 드롭하여이 토글을 토글합니다

꺼져 정말 미묘한 것이지만 약간의 여분의 것만 제공합니다 효과 그리고 저는 실제로 그것을 55와 같은 것으로 떨어 뜨릴 것입니다 Cool

지금 우리는이 섹션 -1을 선택하고이 버튼으로 가서 그냥 가운데에 놓을 수 있습니다 그리고 그것은 우리에게 머리말을 집중시킬 우리에게 지침을 줄 것입니다 그래서 갑시다 그리고 우리는 이것이 67 픽셀임을 알 수 있습니다 왼쪽

따라서 여기에 헤더를 입력하면 67 이상으로 이동할 수 있습니다 그것이 위로부터 50인지 확인하십시오 그러면이 섹션에 올 수 있고 이걸 옮기면 이건 66이에요 좋아, 우리가 축소하면 모든 것이 정렬되어야한다 우리는 앞으로 나아갈 수있다

여기에 가이드를 만들 수도 있습니다 원한다면 이와 같은 것을 만들 수 있습니다 멋지고 똑바로 보인다 그 사람을 거기에 넣은 후에는 실제로 로고를 로고 위로 옮길 것입니다 약간

그리고 눈알 효과를 얻으십시오 여기서 마우스 오른쪽 버튼을 클릭하십시오 이 "정렬 가이드 표시"를 선택 취소하십시오 이것은 아래로 움직일 필요가있는 것처럼 보입니다 마치 그것을 보는 것처럼 보이게됩니다

몇 픽셀 만 내려와야합니다 그래서이 전체 그룹핑은 여전히 ​​50이지만, 이것은 조금 벗어난 것입니다 그것은 중심이라고 말하는 것입니다 그래서, 나는 좋아 보인다 이제 우리가 할 수있는 일은 앞으로 2 구역으로 이동! 섹션 2에서 내가 먼저 할 일은 내가 만든 랩톱 PNG를 가져 오는 것입니다

Photoshop에서 그래서 저는 Sketch 밖에서 약간의 일을해야했습니다 이 효과를 원하는 방식으로 얻으려고 하지만, 나는 무거운 짐을 다했습니다 여러분, Photoshop에 익숙하지 않다면 앞으로 나아갈 수 있습니다

코스 파일을 다운로드하고 원하는 경우이 자산을 사용하십시오 가자 여기 코스 파일에 와서이 노트북 PNG로 드래그하십시오 정말 커질 것입니다 540 픽셀로 크기를 조정 해 봅시다

축소하면 여기까지 갈 수 있습니다 우리는 그것을 우리의 대지로 끌고 갈 수있어서 이것을 다른 방향으로 향하게합니다 좋아, 이제는 더 관리가 용이 ​​해 우리가 할 일은 레이어 채우기, 일부 선형 그래디언트 및 일부 방사형 그래디언트, 혼합 변경 모드로 전환하여이 방문 페이지와 더 잘 어울립니다 그렇게 말하면서,이 랩톱 레이어를 선택하고, 채우기로하자

선형 그래디언트로 들어가서 여기서 색상을 선택하겠습니다 실제로는 어두운 보라색 그러니 축소하고 정말로 어두운 보라색처럼 선택하십시오 그런 식으로 이 16 진수 코드를 복사하고 여기에 다른 점을 만들어 붙여 넣을 수 있습니다

저것 안에 들어갈 수 있습니다 나는 이것으로 들어갈 수 있으며, 그냥 가서 붙여 넣을 수 있습니다 어쩌면 조정할 수 있습니다 조금 더 가볍게 만드십시오 그런 것

좋아, 이제 나는이 가장 왼쪽 지점에 올 수 있고 앞으로 나아가 자 실제로 알파를 0까지 줄입니다 그럼 내가 할 일은 이 그라디언트를 아래로 드래그 한 다음 여기에있는이 선에 초점을 맞 춥니 다 이 노트북의 하단 라인 내가 옮길 지 알 수있어

이 선은 조금 벗어났다 그래서 나는 생각한다 좋아 보인다 그러면 여기서와 같이이 지점으로 이동할 수 있습니다 그런 다음이 슬라이드를 밀어 올립니다

우리는이 밑 부분을 다루고 있음을 볼 수 있습니다 이제 우리가 할 수있는 것은 블렌딩 모드로 들어가서 곱해 지도록 변경하는 것입니다 그런 다음 원하는 효과를 얻을 때까지 불투명도를 상당히 낮추십시오 그래서 나는 그것을 아주 어둡게했다 이제 내가 할 수있는 것은 들어 와서 이 비행기에서 블렌딩 모드 – 랩톱 화면에서

계속해서 여기에 새 채우기를 추가하십시오 여기서 우리 선형으로 들어와 우리는 할 수 있습니다 똑같은 것 다른 어두운 보라색을 선택하겠습니다 이 16 진수 코드도 복사하십시오

어쩌면 약간 밝게 할 수도 있습니다 다른 점을 만들고 그 16 진수 코드를 붙여 넣으십시오 앞으로 나아가서 100까지의 모든 것을 크랭크하십시오 그런 다음 떨어 뜨리십시오 이 하나는 제로에요

이 사람 – 실제로이 사람을 다른 길로 가고 싶습니다 그럼 다시이 비행기에 집중해서 좀 더 자세하게 나와야 해 화면과 함께 이 그래디언트 선이 멋지게 채워지는 것을 볼 수 있습니다 이 화면에서

이 알파를 여기로 옮기고 이걸 움직일거야 아래쪽을 가리키며, 조금만 돌리면됩니다 그런 식으로 그런 다음 우리는이 값을 40 번과 같은 것입니다 따라서 이것을 켜고 끄면, 어둡게 보일 수 있습니다

조금 더 축소 할 수 있습니다 너무 어둡습니다 가자 여기에 이걸 넣고 이것을 50까지 떨어 뜨려 봅시다

이제 우리가 토글하면 이 켜고 끄기, 우리는이 멋진 효과를 볼 수 있습니다 나 지금 갈거야 여기에 하나 더 채우면 방사형 채우기가됩니다 나는 내려갈거야 이 점을 이것을 좋아하는 것으로 옮기십시오

이 시점에서 여기를 선택하겠습니다 어둠 이 밝은 점에서 나는 정말로 밝은 보라색을 선택할 것입니다 이건 내가 원한 색깔이 아니야 그런 식으로 해봅시다

어쩌면 조금 더 밝게 만들고 화면으로 변경하십시오 너는 이걸 움직일 수있어 주위에 5 % 정도의 불투명도를 떨어 뜨릴 필요가 있습니다 자, 우리가 이것을 켜고 끄면, 당신은 그것을 우리에게주는 것을 볼 수 있습니다 약간의 밝기가 여기 있습니다

우리는 화면을 여기에 놓을 것이기 때문에 반사 될 것입니다 현실적인 효과를 좀 더 낼 것입니다 그래서 우리가 원했던 것입니다 이 랩톱 PNG에 채우기를 추가하여 더 많은 것을 제공합니다 현실적인 모습

이제 우리가 할 수있는 일은 여기서이 스크린을 만드는 것입니다 시간을 절약하기 위해 여기서 이미지를 사용하려고합니다 이 동영상에는 있지만 원하는 모든 이미지를 사용할 수 있습니다 하기 위해서 관점에서 보면, 우리는 Magic Mirror 플러그인을 사용할 것입니다 Magic Mirror 플러그인이 무엇인지 모르는 경우 링크에 설명이 포함되어 있지만 정말 멋진 플러그인이므로 직사각형과 같은 도형을 만든 다음 해당 도형에 대지를 미러링합니다

내가 할 일은 먼저 진행하고 아트 보드를 만드는 것입니다 키보드에서 A를 클릭하고이 대지를 1440×900으로 설정하겠습니다 그런 다음이 아트 보드의 이름을 "랩톱 화면"으로 지정하겠습니다 그런 다음이 레이어로 들어가서이 띄우지 않은 이미지를 선택하겠습니다 커맨드 C와 커맨드 V를 붙여서 붙여 넣으십시오

이 대지에 맞게이 크기를 조정하십시오 이제 내가 할 수있는 것은 이것을 선택하는 것이다 대위를 치고 나서 이걸 다가와 Magic Mirror를 설치하면 여기 작은 패널 "아트 보드에 포함"을 클릭하면됩니다

Magic Mirror에 저장하십시오 그게 훨씬 더 의미가있을거야 여기에 직사각형을 만든 다음이 아트 보드를 비뚤어지게 만듭니다 가자 앞으로 여기에 직사각형을 만듭니다 그래서 나는 R 키보드를 치려고합니다

그려 보자 사각형을 꺼내서 실제로 이것을 설정하려고합니다 1440을 2로 나눠 봅시다 여기에 900을 2로 나눈 높이를 설정하십시오 그거야

이 대지와 같은 비율을 우리에게줍니다 나는 국경을 끄고 싶다 나는 이것을이 랩톱으로 끌고 갈 것이고 나는 그것을 꽤 크기를 조정할 것이다 작은 – 그보다 조금 크다 그런 다음이 버튼을 두 번 클릭하면 이 컴퓨터 화면에 맞는 영역으로이 지점을 이동하십시오

최소한이 튜토리얼에서는 좋아 보이는 것이 좋다 이것으로 레이어를 선택하면 지금 할 수있는 것은이 Magic Mirror 패널로옵니다 지금 당장 아트 보드를 선택하지 않았지만이 드롭 다운으로 들어가면 랩톱 화면을 선택할 수 있으며이 사각형에 미러링 될 것입니다 그래서 그들은 그것을 Magic Mirror라고 부릅니다 그거 정말 멋지다

우리는 들어갈 수 있고 이 채우기를 끄려면 약간의 회색이 있음을 알 수 있습니다 그 이미지 주위 이제 우리는이 멋진 화면을 볼 수 있습니다 이 노트북에 효과 분명히 그것은 너무 밝습니다

그래서 내가 할 일은 여기서 채우고 난 다음에 갈거야 방사형 이걸 진한 보라색으로 만들어 보겠습니다 이것을 조금 더 밝게 만들어 봅시다 들어 오셔서 번식하십시오

이 값을 30으로 떨어 뜨리거나 50까지 올릴 수 있습니다 당신은 그것을 아주 어둡게하고 싶습니다, 그리고 실제로 조금만 늘리십시오 어쩌면 60 세까지 될 수 있습니다 이제 우리가 할 수있는 일은 ~하고 싶습니다 이 화면이 나타나는 것처럼 보이는 곳에이 효과를 만듭니다

이 하나에서 떨어져 내가 할 일은 커맨드 C, 커맨드 V입니다 그걸 만들거야 실수로이 채우기를 사용하도록 설정 했으므로 아직도 꺼져 있었다 이제 내가 할 수있는 일은 이걸 꺼놓은 것 같아

사실 어둡지 않고, 그냥 이것을 위치로 옮깁니다 어쩌면 조금 더 크게 만들 수 있습니다 알았어 그런 종류의 효과가 이런 종류의 효과를 준다 노트북의 – 정말 멋진 효과입니다

이제 우리가 실제로 가져올 수있는 일 이 효과는 우리가 원하는 곳에서 더 가까이오고있는 이러한 선을 만듭니다 랩탑에서 – 시청자에게 이런 생각을하게합니다 이것에서 벗어나 그렇게하기 위해 키보드의 V를 눌러서 벡터 도구를 불러 오십시오 나는 확대 할거야

여기에서 이 코너를 클릭 한 다음 여기를 클릭하십시오 랩톱에서 하나의 가장자리에 그냥 return을 클릭하십시오 그럼 나는 갈거야

국경으로 와서 두께를 2로 돌린다 이 톱니 바퀴 아이콘으로 들어 가세요 이 둥근 끝을 클릭하면 모서리가 사각형이 아닌 둥근 모양이됩니다 그런 다음 색으로 들어가서 선형 그래디언트로 들어가서 주위를 이동하십시오 이 중 하나에 색을 설정하려고합니다

밝은 보라색처럼 그래서 축소하면 색상을 여기에 지정할 수 있습니다 자유롭게 생각해보십시오 나는 그와 같은 것이 좋다고 생각합니다 커맨드 C를 클릭하고 여기에 붙여 넣기를합니다

이번에는 알파를 0으로 떨어 뜨린 다음 다른 지점을 만들겠습니다 그런 다음 알파를 조금 가져 오십시오 축소했는지 알 수 있습니다 이 효과는 시청자가 약간의 아이디어를주는 데 도움이됩니다 여기에 무슨 일이 일어나고 있는지

이 경로를 선택하겠습니다 할거다 명령 C, 명령 V를 사용하여 복제하십시오 나는 교대를 유지하고 나서 그것을 움직일 것이다 이 구석까지 여기를 확대 해 보겠습니다

어쩌면 이걸 움직일 수도 있습니다 나는 Command V, Command V를 한 번 더 명령 할 수 있으며 한 번 더이 명령을 움직일 수 있습니다 그런 다음 그 구석으로 스트레칭하십시오 여기서 축소하면 이 멋진 축소 효과를주는 방법에 대한 아이디어를 얻을 수 있습니다 이제이 섹션에 약간의 텍스트를 추가해 보겠습니다

우리를 구해주기 위해 우리는 여기서 C 커맨드, 커맨드 V를 1 열에 올리겠습니다 섹션 2 밖으로 드래그 한 다음이 이름을 열 2로 바꿉니다 아래로 드래그하십시오 우리는 여기서 다른 것을 말할 수 있습니다 이것을 크기를 조정합시다

조금 더 작게 만들어 보겠습니다 여기에 머리글을 30으로 설정합니다 문자를 6으로 설정하고 줄을 50으로 설정합니다 그런 다음 모든 대문자로 "실시간 재생을 0으로 입력 할 수 있습니다 잠깐 "그런 다음이 섹션을 조금 작게 만들려고합니다

그 중 일부는 삭제하십시오 이것은 438입니다이 폭을 438로 설정해 보겠습니다 이 중 일부를 삭제하십시오 그럼 우리가 이걸 옮길 수있어

바로 지금 내 똑똑해 가이드가 켜져 있지 않으므로 여기를 마우스 오른쪽 버튼으로 클릭하여 정렬 가이드를 표시하면 그걸 되돌릴 수있을거야 계속해서 약 40 개를 설정하십시오 서로 픽셀 나는이 텍스트를 가져올 것이라고 생각한다

조금씩, 그래서 열 1로 돌아가 봅시다 그리고 저는 가고 있습니다 이것을 오른쪽으로 조금 넘기고 섹션 1에 들어가십시오 그런 다음 다시 언급하십시오 이제는 122 쪽입니다

바로 거기에 있습니다 나는 그것이 조금 더 멋지게 보인다라고 생각한다 내가 지금 할 수있는 것은 올 것이다 이 "데모 받기"버튼에 넣습니다 나는 Command C에 갈거야

나는 이것을 선택하고 싶다 "붙여 넣기"하십시오 그런 다음이 버튼을 아래로 드래그하십시오 나는 확대 할 것이다 이 이름을 "자세히 알아보기"로 바꾼 다음이 문제에 착수 할 것입니다

직사각형을 만들고 조금 더 넓게 만듭니다 그런 다음 다시 언급하십시오 그런 식으로 여기를 축소하면 약 40 개가 있는지 확인할 수 있습니다 이 열을 칼럼 2에 떨어 뜨리십시오

이제는이 모든 것들이 함께 움직입니다, 이쪽이 아직 122 쪽인지 확인하십시오 이 노트북 섹션을 정리해 보겠습니다 가자 Command G는 이러한 경로에,이 무릎 노트북 라인 이름, 이 이름을 "laptop screen"으로 바꾸고 이름을 "laptop screen expanded"로 변경하십시오 계속해서이 모든 레이어를 얻으십시오, 명령 G, 우리는이 랩탑이라고 부를 수 있습니다 우리는 그것이 무엇인지 압니다

나는 왼쪽으로 움직여서 움직일거야 이 이상, 어쩌면 조금 아래로 이동합니다 어쩌면 섹션 1을 올린 다음 명령 G를 선택하십시오 이것을 "섹션 2"라고 부르 자 상단에 섹션 1 가져 오기 그리고 이걸 옮겨서 이걸 움직여 봅시다

어쩌면 움직일 수도 있습니다 노트북은 조금 오른쪽으로 돌아갑니다 우리가해야 할 마지막 일 계속해서이 부분을 탐색기의 머리글 (헤더)에 가져 오십시오 내부에 조금씩 가져 와서이 새로운 텍스트 레이어와 정렬됩니다 나는이 가이드를 왼쪽으로 조금 끌고 갈 것이다

그래서 우리가 이것을 줄이는 데 도움이 될 것입니다 오른쪽도 똑같이하십시오 이제 우리는 할 수있다 이 헤더 층으로 들어 가라 나는이 아이콘을 클릭하여 조금 확대 할 것입니다

이를 확장하면 로고를 클릭하고 왼쪽으로 옮길 수 있습니다 나는 바로 저기에 대해 할 것이고, 그 다음 nav 섹션을 클릭하고, 움직일 것이다 왼쪽으로도 그것이 바로이 튜토리얼의 내용입니다 코스 마무리에 축하해! 당신이 그것을 좋아한다면, 그것을 엄지 손가락으로 올려라

구독 해주세요! 그리고 잊지 마세요, 당신은 여전히 오늘의 과정에서 완성한 Sketch 파일을 무료 회원이 다운로드 할 수 있습니다 다시 한 번, 나는 Skillthrive의 Hunter이고 다음에 보게 될 것입니다!