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이고 다음에 보게 될 것입니다!