Sketch App Tutorial – Build a music app landing page in Sketch

안녕하세요, 저는 Skillthrive의 Hunter이고이 자습서에서는 음악 앱을 제작할 것입니다 스케치의 방문 페이지 수업 1에서는 두 가지 모양 레이어를 결합하여 시작합니다

함께 곡선 배경 섹션을 만듭니다 그런 다음 그라디언트를 추가하여 배경, 제목, 부제 및 탐색 다음으로, 텍스트 레이어를 윤곽선으로 전환하여 투명 텍스트가있는 버튼 만들기 및 차이 부울 연산을 사용합니다 마지막으로, 배경에 커플 악센트 서클 Sketch에서 모바일 앱 방문 페이지를 만드는 방법에 대한 첫 번째 강의에 오신 것을 환영합니다 이제 Skillthrive 회원이라면 반드시 코스를 다운로드하십시오

파일을 사용하면 나와 함께 따라 할 수 있습니다 회원이 아니면 걱정할 필요가 없습니다 절대적으로 자유롭게 가입 할 수 있습니다 설명에 링크가 있습니다 너를 데려 갈거야

등록 할 수있는이 수업의 코스 파일 오른쪽에 있습니다 내가 제일 먼저하는거야 할 일은 대지 만들기입니다 키보드에서 "A"를 클릭하면 반응 형 웹 및 드롭 다운 데스크톱 HD에서이 드롭 다운으로 이동합니다 우리는 이것을 가지고있다

데스크탑 HD 레이아웃 이 아트 보드의 이름을 변경하겠습니다 우리는 그것이 무엇인지 깨닫게 될 것입니다 '모바일 앱 방문 페이지 "우리가 먼저하고 싶은 것은 그 배경 섹션을 만드는 것입니다

그것은 약간의 곡률을 가지고 있습니다 그렇게하기 위해 우리는 실제로 경로와 모양을 만든 다음 그 두 가지를 함께 결합하십시오 우리가 제일 먼저하고 싶은 것은 직사각형을 만드는 것입니다, 그래서 우리가 키보드에서 "R"을 치면 우리는 사각형 도구에 액세스 할 것입니다 우리는 계속해서 여기에 사각형 저는 약 650 픽셀 정도를 할 것입니다

나는 국경을 끌 것이다 그리고 지금 우리는 들어올 수 있고, 우리를 선택할 수있다 우리의 펜 도구는 "V"입니다 여기에 경로를 만들 수 있습니다 할거다 여기에 대해 뭔가를 선택하십시오

사실, 내가하기 전에 나는하고 싶다 참조로 선을 만들어서 그 곡률을 잡을 수 있습니다 그래서 "L"을 치면 줄을 긋고 꼭대기까지 올라 와서 그것을 아래로 드래그하면 쉬프트가됩니다 완벽하게 똑바로 그런 다음 그 중심에 있는지 확인하십시오

귀하의 대지와 이제 우리는 펜 도구에 들어가서 그 커브 딸깍 하는 소리 그것은 조금 밖에 있다면 괜찮아요,하지만 그것을 얻으려고 여기 어딘가에서이 가장자리에 가깝습니다 를 클릭하고 와, 쉬프트, 클릭 자, 이번에는 클릭 할 때 그걸 확실히 잡아라

우리는 곡선을 만들기 위해 그 구석을 끌 수 있습니다 클릭하고 나서 그것을 밖으로 드래그하십시오 – 이제 우리는이 오른쪽 포인트와이 왼쪽 포인트를 보았습니다 이 오른쪽 지점에서 마우스를 드래그합니다 손톱을 만들기 위해 그 곡률, 우리가 할 수있는 것은이 왼쪽 지점이 그 라인에 있는지 확인하는 것입니다 우리가 방금 만든거야

얼마나 높거나 낮은가에 따라 얼마나 큰지에 달려 있습니다 커브가 있습니다 내 마우스를 잡고있는 동안 여기를 축소하려고합니다 이 시점에서 그 중심점에 있는지 확인할 것입니다 이제 너

커브가 낮 으면 커브가 실제로 커지는지 알 수 있습니다 커브가 훨씬 적습니다 그래서 나는 여기에 슈퍼 미친 아무것도 원하지 않는다 나는이 구장의 어떤 것이 좋다고 생각한다 나는 그것을 줄 지어 갈거야

내 마우스를 놓고 입력하십시오 그런 다음 선택하여 삭제하고 삭제할 수 있습니다 이 선 – 경로와 직사각형 그리고 나는 합집합을 할 수 있습니다 자, 우리는 우리가 가고있는이 멋진 모양을 가지고 있음을 알 수 있습니다 우리는 실제로 원하는 그라디언트를 만드는 것입니다

이 새로운 결합 형체가 선택되었을 때이 채우기로 넘어 가자 두 번째 상자는 선형 그래디언트입니다 색상을 설정할 수 있습니다 여기에 설정하고자하는 첫 번째 색상은 FF5E62 인 색상입니다 그런 다음 다른 색상을 선택하겠습니다

이 시점에서 나는 설정하려고합니다 ~ FF9966 이걸 조금 뽑아 낼 것입니다 이런 식 으로요 그런 다음이 주황색을 조금만 드래그하면됩니다

많이 당신이 좋아하는 자리에 올 때까지 이걸 가지고 놀아 라 원하는 경우 자신 만의 색상을 사용하십시오 내가 지금 할 일은 내가 이 그라데이션을 저장하십시오 이 그라디언트에서는 아직 그 안에있는 동안을 클릭 할 수 있습니다

여기 이걸 팔레트에 저장하려면 여기를 더하세요 이 버튼을 클릭하면 내가 이것을 추가했음을 알게 될 것이다 옆에있는 두 개의 아이콘도 볼 수 있습니다 비슷한 점은이 프로젝트에서 작업했기 때문에 가능합니다 그것들을 제거하십시오

우리가이 비디오에서 하나를 선택했는지 확인하십시오 계속해서 제목, 하위 텍스트, 버튼, 탐색기 및 로고 소리는 많이 들리지만 정말 빠를 것입니다 우리의 "T" 키보드에서 텍스트 도구를 가져와 여기 어딘가에서 클릭하십시오 아트 보드 실제로 Signika와 Open Sans를 사용하려고합니다

이 둘은 모두 무료입니다 Google의 글꼴이므로 누구나 쉽게 액세스 할 수 있습니다 Signika가 선택된 상태에서 실제로 체중을 가볍고 크기를 54로 설정하고 줄 높이를 67로 설정하고 싶습니다 그런 다음 이것을 선택하고, 색을 입히고, 여기에 색을 FA로 설정하십시오 들어가기 우리는이 팔레트에 추가 할 것이다

여기 몇 번이나이 코스에서 그런 다음 입력 할 것입니다 "당신은 이런 음악을 들어 보지 못했습니다" 이 하위 텍스트를 만들어 보겠습니다 이것이 옳은지 걱정하지 마라

이제 우리는 그것을 우리가 좋아하는 지점에 위치시킬 것입니다 다시 말하지만, 이 하나가 Sans를 엽니 다 이것을 정기적으로 설정하고, 크기를 22로 설정하고, 줄 높이는 29 그런 다음 필자 만의 필사 텍스트 인 lorem ipsum을 선택하려고합니다 여기에 붙여 넣으 려하고 이것을 클릭하겠습니다

이 점을 위로 드래그하십시오이 모서리가이 제목에 먼저 정렬되어 있는지 확인하십시오 그것이 같은 너비라고 나에게 말할 때까지 그것을 위로 드래그하십시오 그게 내가 원하는거야 우리가 할 수있는 다음 일은, 텍스트로 작업하는 동안 nav에 가서 만들 수 있습니다

다시 한번 명중하자 우리 키보드의 "T" 나는 클릭 할 것이고 실제로이 것을 변경하려고합니다 시그 니카와 나는 세미 볼드체로 설정하려고합니다 나는 높이를 돌리고 싶다

실례합니다 크기를 17로 낮 춥니 다 그런 다음 몇 가지를 입력 할 것입니다 여기에 물건 "about"을하고 나서 Enter를 누르십시오, 실례합니다, 실제로는 클릭 만하면됩니다

그러면 실제로 볼 수 있도록 확대 할 것입니다 내가하고있는 것 그냥 + 명령을 치고 확대하는 대신에 command + 2를 클릭하면 오른쪽으로 확대됩니다 조금 지나치지 만, 너는 아이디어를 얻으십시오 그런 다음 옵션을 잡고 끌 수 있습니다

나는 할 것이다 약 4 번 나는 그것을 가지고있다, 그래서 당신이 여기에 일반적인 이름을 안다 "팀" 우리는 "기능"을 사용할 수 있으며이 기능을 "다운로드"라고 명명 할 수 있습니다 이제 우리는 이것을 만들 수 있습니다

서로 약 20 픽셀 떨어져 있습니다 이제 함께 가서 그룹화 해 봅시다 나는 이것을 선택하고 싶다 레이어, 명령 "G"를 누른 다음이 "nav"을 호출하십시오 그런 다음 위에 올려 놓으십시오

하나의 제목,이 하나의 하위 텍스트를 호출,이 결합 된 레이어를 호출 배경 1 이제 우리는 그 설정을 얻었고, 우리가하고 싶은 것은 버튼 그렇게하기 위해 둥근 사각형에 올 수 있습니다 키보드에서 "U"를 치면 얻을 수 있습니다 여기서 모양을 만들 것입니다

나는 국경을 끄고, 우리의 채움에 와서 그 가벼운 팔레트를 고를거야 우리가 여기 있습니다 너비를 170으로 설정하고 높이를 40으로 설정합니다 그런 다음이 모양을 두 번 클릭하여 이것을 얻습니다 여기에서보세요

이 부분에서 실제로이 둥근 모양을 편집 할 수 있습니다 모서리 클릭하고 드래그하여 4 개의 모서리를 모두 선택합니다 이 슬라이더에서 여기까지 드래그하여 맞습니다 그래서 그들은 완벽하게 둥글게됩니다

좋아, 이제 내가하고 싶은 일은 다시 필자는 텍스트 도구를 사용하여 여기를 클릭하고 Signika를 클릭합니다 세미 굵은 글씨가 여전히 선택되었습니다 모든 대문자를 입력 할 것입니다 "다운로드" 우리는 당신이 그것을 볼 수 있도록 이것을 선택할 것입니다

색깔을 바꿔라, 그것은 중요하지 않다 색깔을 바꿀 때까지 잠시 후에 설명 할게 그런 다음 나는 이것을 중심으로 옮기고 이것을 아래쪽으로 옮길 것입니다 의견 그래,이 다운로드를 선택하면 우리가 할 수있는 일은 우리가 옳을 수 있다는 것입니다

클릭하여 개요로 변환하십시오 이것이 할 일은이 텍스트를 변환하는 것입니다 레이어를 모양 레이어로 변환합니다 우리가 그렇게하고 우리가 여기에 와서 이것을 확장한다면, 우리는이 모든 다른 길들을 볼 수 있습니다 이것은 무엇을 할 것인가? 실제로이 경로를 사용하여 여기에 차이점을 만들어 보겠습니다

우리가 이 두 가지를 모두 선택하고 차이점을 클릭하면 그 경로를 택할 것입니다 당신이 그것을 바로 볼 수 있도록 그것을 제거하십시오 이 배경에, 이것은 정말 좋은 효과입니다 그렇게해서 우리는 이 색상과 일치하도록 색상을 변경하면 실제로 색상이 변경됩니다 배경

좋아, 그렇게 잘 생겼어 이 "버튼"이라는 이름을 지으십시오 가자이 공간을 비워 보자 나는 이것을 본다

그 중 하나에서 약 29 픽셀, 그래서 어쩌면 4에서 25로 이동하십시오이 사진은 30 픽셀이므로 한 픽셀 위로 이동하십시오 알았어, 나 그것이 좋아 보인다는 생각 그리고 우리는 이러한 레이어를 선택할 수 있습니다, 명령 G, 그리고 그냥 이것을 "제목 하위 버튼"이라고 부르십시오 좋아요, 그래서 몇 가지 더 있어요 우리가하고 싶은 것들

나는 간단한 로고처럼 여기에서 만들고 싶다 지금, 나는 아니야 슈퍼 멋진 로고를 만드는 데 많은 시간을 할애 할 수 있지만 빠른 효과처럼 우리의 모습으로 나아가고 나서 삼각형 여기에 삼각형을 만들 것입니다

할거다 커맨드 +2를 조금 더 가깝게하십시오 나는 국경을 끌거야 나 채우기 FA로 갈거야 나는 회전을 치고 90을 치러 갈거야 그러면 나는 갈거야

옵션을 선택하고 드래그합니다 그런 다음이 플립을 클릭 한 다음 교대하고 그것을 훨씬 더 작게 만드십시오 좋아, 그럼 이걸 선택해 보자 두 번 클릭하고 모서리를 선택하십시오 이걸 한 픽셀 씩 위로 돌려 보겠습니다

이 두 번 클릭으로 동일한 작업을 수행하고를 선택한 다음 하나로서 모서리 보도록하겠습니다 여기서 축소하면 실제로 간단한 로고 – 그것은 요점을 가로 지른다 계속해서 이것을 선택하고 G 명령을 입력하고이 로고를 호출하면됩니다 이 그룹을 선택하면 명령 "K"

생각보다 조금 더 커 보이겠습니다 130 퍼센트를 보겠습니다 축소하자 예 어쩌면 그다지 크지 않을 수도 있습니다 Let 's just, 명령 "K", 115 나는 그것이 좋게 본다라고 생각한다 약 42 픽셀이므로 움직여 보겠습니다

최대 2 픽셀 이건 30이야,하지만 그것처럼 보이네 이것의 중심에, 그래서 아래로 이동 60 왼쪽에서 60 픽셀, 그리고 위쪽에서 30 픽셀입니다 나는이 삼각형 중심을 중심에 두었다

이 nav 알았어, 그 점을 가로 지른다 로고까지, 너는 알았다 미친 짓은 아니지만 빠른 로고를 만들었습니다 원하는 로고를 넣으십시오

아이디어를 가로 질러 가라 이제 우리가하고 싶은 것은 그 중 일부를 만드는 것입니다 여기서 불투명 한 원 정말 쉽습니다 우리가해야 할 일은 타원형 도구와 완벽한 원을 만들기 위해 교대를 유지하십시오

이제 저는 앞으로 나아갈 것입니다 여기에 우리가 원하는 색상을 선택하십시오 이제이 타원형이 매달려 있습니다 이 바깥에서 우리가해야 할 일은이 배경을 가면으로 만드는 것입니다 이 모든 것들

우리가 할 수있는 일은이 모든 것들을 명령 G로 선택한 다음, "섹션 1을 수행하십시오" 그런 다음 배경 레이어를 선택한 다음 가면을 수행하십시오 이제 우리는이 멋진 가면을 가지고 있습니다 우리는 이것을 확장하고이 타원을 아래로 이동시킬 수 있습니다 바닥

나는 그것을 선택하여 여기로 옮길 수있다 나는 불투명도를 떨어 뜨릴거야 꽤 많이 내려갔습니다 12 % 정도였습니다 나는 그것을 조금 옮길 것이다

그런 다음 옵션을 잡고 다른 옵션을 만듭니다 크기를 조절하면 꽤 작습니다 이걸 조금 더 크게 만드세요 이걸 만들자 그런 식으로

그럼 난 여기 부부를 만들 수있어 글쎄, 이건 꺼내 나는 이걸 멋지게 만들 수 있습니다 내 화살표를 사용하여 주위를 이동 한 다음 조금 더 크게 수행하십시오 여기가 좋아

나는 이들을 배치 할 곳을 너무 많이 생각하지 않는다 그들이 무작위로 배치 된 것처럼 느껴지기를 바란다 이 navbar를 왼쪽으로 약간 이동시킬 수 있습니다 단 몇 픽셀 만 가능합니다 그 가장자리에서 약 220입니다

좋아, 그래서 우리가 다루고 싶은 모든 것 이 수업 다음 강의에서 우리가 할 일은 이 빈 공간에 여기 앉아있을 모바일 UI입니다 그것으로 다음 비디오에서 보자 수업 2에서 음악 앱 인터페이스를 디자인 할 것입니다 내가 만드는 방법을 다룰거야

순환 진행 막대 및 알파 블렌딩 효과를 위해 알파 마스크를 사용하는 방법에 대해 설명합니다 이 모바일 앱 방문 페이지를 만드는 방법에 대한 두 번째 강의에 오신 것을 환영합니다 스케치 이 강의에서는 모바일 UI를 만드는 데 중점을두고 이 본문 오른쪽에 여기 살아라 내가 할 첫 번째 일은 둥근 사각형을 만들어 키보드의 "U"를 치면됩니다

우리는 둥근 사각형 도구를 얻을 것이다 나는 그것을 밖으로 끌어서 크기를 조정할 것입니다 여기 있습니다 너비를 340, 높이를 600으로 설정하고 나서 경계를 해제하고 우리가 구한 FAFAFA로 채우기를 바꿀 것입니다 이제이 배경색을 볼 수있게되었으므로 아트 보드가 있어야합니다

변경되었습니다 우리는 그것을 선택할 수 있습니다, 우리는 여기에 배경을 클릭하고 변경할 수 있습니다 FAFAFA도 마찬가지입니다 이제 그 두 가지 색상은 어울리는 이걸로 돌아가서 내가하고 싶은 일은 전화 UI 용 상태 표시 줄 코스 파일에서 나는 사용할 수있는 여기에있는 자산 인 상태 표시 줄입니다 이 스케치를 열면 파일, 당신은 우리가 이것을 볼 것이고 나는이 어두운 것을 가져올 것입니다

나는 그것을 복사해서 붙여 넣기 위해 C 명령을 할 것입니다 분명히 그것은 너무 길어요 크고이 너비가 340이라고 여기에서 볼 수 있습니다 K 명령을 사용하면 너비를 340으로 설정 한 다음이 위치를 변경할 수 있습니다 우리가 원하는 곳에

나는 이것을 옮길거야 좋아, 이제 우리는 이것을 "상태 표시 줄"로 바꾸자 이 "모바일 배경"이라고 부르십시오 이제 다음으로 넘어갈 수 있습니다 앨범 아트를 만들 예정입니다

계속해서 타원형을 만들거나 원 그래서 "O"타원형을 클릭 한 다음 Shift 키를 누른 상태로 정원 135로 내 크기를 설정 한 다음 border and under fill '이 아이콘으로 가서 여기를 선택합니다 영상 자산에는 몇 장의 앨범 표지가 포함되어 있으므로 레드 핫 칠리 페퍼스

타일 ​​대신에 채우기로 설정하고 채 웁니다 아주 좋아,이 그림자를 추가하는 대신 실제로 이것을 복제 한 다음 Gaussian blur를하십시오 앨범 1, 커맨드 C, 커맨드 V이 맨 아래 레이어에서 앨범 1을 할 것입니다

흐림 그래서 우리는 이것이 흐림임을 안다 그런 다음 나는 Gaussian으로 갈 것입니다 흐림, 그걸 켜고 그냥 5 픽셀처럼 떨어 뜨려 흐림을 준다 하지만 앨범의 실제 색상과는 약간의 차이가 있습니다

조금 생각합니다 더 좋은 모양의 우리는 앨범 1을 그룹화하여 그룹화 할 수 있습니다 이제 우리가 할 일은 실제로 주위에 고리를 만드는 것입니다 노래의 진행 상태 또는 얼마나 많은 노래가 연주되었는지 보여줍니다

그렇게하기 위해, 우리는 실제로 들어갈 수 있습니다 – 저는 실제로이 앨범을 "앨범 커버"라고 명명 할 것입니다 – 여기에있는 앨범 중 하나에 오십시오 꼭대기에있는 것을 해보 죠 명령 C, command V 나는이 그룹에서 이것을 꺼낼 것이고 나는 단지 이름을 짓 겠어 이 하나의 앨범 하나의 반지 하나

" 나는 이걸 밖으로 펴고 사실 저는 채우기를 끝내고 경계선을 켤 것입니다 이걸 스트레칭하겠습니다 조금 커 조금 컸을 수도 있습니다 좋아, 나는 그것이 보인다라고 생각한다

꽤 좋아 나는 국경을위한 색채에 들어갈거야 그리고 나는 단지 약간 밝은 회색을 골라 낼 것입니다 "EA" 잘 작동합니다 이제 이것을 복제하려고합니다

그래서 C 명령, V 명령을 실행하십시오 이 층 나는 이것을 "진보"라고 명명 할 것입니다 우리는 거기에 갈 여기서이 진행률 표시 줄에 색을 추가합니다

이것은 내가 잠시 뒤로 일부 웹 사이트에서 픽업 한 팁이며, 정말 잘 작동하기 때문에 나는 항상 사용하고있는 것입니다 우리는 여기서 할 수있는 것은 우리가 먼저 색을 볼 수 있고 그라데이션을 설정할 수 있다는 것입니다 우리가 구한이 사람에게 그러면 우리가 들어와 두께를 늘릴 수 있습니다 어쩌면 둘로

그런 다음이 아이콘 또는이 톱니 바퀴 아이콘으로 이동하여 모서리와 틈 사이에서 대시는 마술이 일어날 곳입니다 우리가하고자하는 것은이 갭 번호를 생성하는 것입니다 우리는 파생하고자합니다 수학에서이 번호 우리가 할 일은 우리가 이것의 너비는 184이므로 PI 또는 3

14를 곱하십시오 계속해서 계산기 아웃 폭은 184이고, 그 다음에 314 – 57776을 곱합니다

여기에서 1에서 57776 사이의 숫자를 입력하고 싶습니다 이 금액을 얻을 수있는 250과 같은 숫자 만 입력하면 나타납니다 채우는 우리는 300과 같은 것을 할 수 있습니다

우리는 그것을 얻습니다 우리가 원한다면 우리가 할 수있는 일 이것은 센터를 향해 더 많이 시작하는 것입니다 회전하고 회전 만하면됩니다 조금 그런 다음이 값을 280으로 낮추고 다시 회전 시키십시오

그럼 실제로 들어가서 만들 수 있어요 조금 두꺼운 나는 축소하려고합니다 나는 3 명이 정말 멋지다고 생각한다 이는 서클의 일부를 채우는 방법에 대한 간단한 팁입니다

정말 유용합니다 항상 사용하며 정말 멋지다고 생각합니다 나는 희망 그 사실을 모르는 경우에 유용하다는 것을 알게됩니다 다음으로, 나는 만들고 싶다 이런 종류의 시간이 여기 있습니다

이 서클이 있더라도 알고 싶어 할 수도 있습니다 그들이 노래에서 어디에 있는지 "T"를 클릭하고 클릭하고 이동합니다 먼저이 색상을 변경하십시오 나는 "2D"를 가로 질러 줄 것입니다

여기에 그 색을 저장하십시오 이 중 하나에서 저는 시그 니카를 할 것입니다 나는 무게를 위해 빛을 낼거야 그리고 나는 그것을 더 작게 만들거야 그런 다음 여기에 언제든지 입력하여 이와 같은 노래를 의미있게 만드십시오

136 나는이 원에서 약 10 픽셀을 이동시킬 것이다 좋아, 그럼 이제 우리가 필요해 노래의 제목과 아티스트 다시 "T"를 치고 우리가 설정할 수 있습니다

앨범, 또는 실례합니다, 제목 시그 니카를 해보 죠하지만 정기적으로 해보 죠 크기를 26로 늘려 봅시다 노래의 이름을 입력 해 봅시다

이 앨범에서 "Give it Away"는 큰 것입니다 그런 다음 다시 "T"를 칠 수 있습니다 그리고이 중 하나에 나는 Signika, 컵하지만 빛을 할거야 크기를 20으로 설정하십시오 레드 핫 칠리 페퍼스 인 밴드의 이름을 말합니다

그런 다음주고 이 멋진 공간, 아마 5 픽셀 떨어져있을 것입니다 계속해서 그룹화하십시오 나는 "노래 아티스트"를 할거야 이번에는 약 15 픽셀 정도 떨어져 있습니다 좋아, 이제 우리가 움직이기 전에 재생 막대를 사용하는 방법에 대해 알아 보도록하겠습니다

앨범 아트가 오른쪽과 왼쪽에 표시됩니다 대기열에있는 노래 또는 재생 목록에있는 노래 우리의 앨범에 오셔서 앨범 커버, 명령 C, 명령 V 그리고 나서 이것을 끌어 내십시오 가자 이 앨범으로 넘긴 다음 위에 끕니다

사실,이 두 가지를 동시에 드래그하십시오 우리가하고 싶은 것은 이전처럼 우리가 배경을 만들었던 것처럼 모든 것에 대한 가면 (mask for everything) – 우리는 이것을 위해 동일한 작업을 수행하기를 원합니다 이 모바일 UI 외부에 매달려 있습니다 우리가 할 수있는 일은 바로 이것입니다 그런 다음 선택한 그룹으로 가면을하십시오

좋아, 우리가 간다 이제 우리는 이것으로 되돌아 갈 수 있습니다 앨범 커버가 될 그룹 이 앨범은 하나입니다 할거다 여기, 상태 표시 줄을 끕니다

이걸 여기로 돌려 놓으세요 위를 드래그하십시오 이것을 "정보"라고 부르세요 이제 여기로 돌아 왔으므로,이 앨범을 그룹화하고 "앨범 표지를 남겨 둡시다" 나는 K 명령을 할 것이다

나는 그것을 조금 더 작게 만들 것이고, 그래서 그것을 확장 할 것이다 나는 그것이 좋게 보인다라고 생각한다 그것은 중심에있어, 그래서 나는 이 앨범의 중심은 이것의 가장자리에 있습니다 나는 붙잡을거야 옵션을 선택하고 이것을 드래그하여 앞으로 나아가서 똑같은 일을하십시오

어디 보자 앨범이 남았으니 이걸 확인하고 끌어 내라 커맨드 C, 커맨드 V

그런 다음이를 그룹화하여 "앨범 커버 권리"가 될 것입니다 괜찮은지 확인하십시오 우리는 왼쪽으로 나왔고 우린 옳았 어 가자 이것을 "앨범 커버 센터"로 이름을 변경하십시오

그것은 좀 더 조직적입니다 이제 우리가하고 싶은 것은 우리가 이것을 조금 만들고 싶다는 것입니다 보다보기가 어렵다 우리가해야 할 일은, 우리가 실제로 바꾸고 자하는 것입니다 앨범 아트

여기서 채우기를 변경해 보겠습니다 나는 또 다른 앨범을 가지고있다 흐림에서 나는 이것도 바꾸고 싶다 맞은 앨범에 들어가면 이것에 Gaussian blur를 추가하십시오 나는 그것이 5로 설정되었다고 생각한다

fill-let은 Green Day 앨범을합니다 이제 우리는 그것을 가지고 있습니다 우리가 도형 레이어를 만들 수 있다는 것입니다 "R"을 치면 이걸로 우리는 그것을 가려 내야 할 것입니다 Llet은 여기에 직사각형을 그으므로 우리는 테두리를 채운 다음 채우기로 들어간 다음이 그라디언트를 바로 여기로 가져옵니다

나는 갈거야 이런 식으로 센터에 이것을 설정하십시오 그것이 어떤 색깔인지는 중요하지 않기 때문에 우리는 이것을 알파 마스크로 바꿀 것입니다 그래서 그것을 사용하지 않을 것입니다 색상의 정보, 알파 또는 알파가 무엇인지에 대한 정보를 사용할 것입니다

불투명도는 계속해서 더 쉽게 볼 수 있도록 설정하려면 이 둘은 순수한 검은 색을 가리킨다 나는 센터에있는 하나를 두 번 클릭하면 흰색으로 바꿀 것입니다 이걸 설정하려고합니다 하나는 0의 불투명도입니다 이 값을 불투명도 0으로 설정하십시오

나는 그것을 원한다 센터에서 백이되어야합니다 그래서, 이것은 백에 있습니다 우리는 이제 우리는이 두 그룹을 그룹화 할 수 있습니다 이 두 그룹을 바로 묶어 보겠습니다

우리는 이것을 "하위 앨범"이라고 부릅니다 이 직사각형을 사용할 수 있습니다 이 알파 마스크로, 그래서 이것을 선택 마스크를 클릭하십시오 마스크 아래에 레이어, 마스크, 마스크 모드가 있으며 알파 마스크가 있다는 것을 알 수 있습니다 윤곽 마스크를 선택했다면, 이것을 얻을 것입니다

우리가 원하는 것이 아닌 이상한 표정 들어 오기가 중요합니다 알파 마스크가 아닌 경우 알파 마스크로 변경하십시오 이제 당신은 볼 수 있습니다 우리가 어떻게 차가워 져서 흰색으로 점점 가파르게되는지

나는 생각한다 정말 좋네 우리가 원하는 몇 가지 더 있습니다 여기서 해 하나는 아래쪽으로 재생 버튼을 수행하는 것입니다

다시, 나는 그것들을 파일에 포함 시켰습니다 가서 여기에 끌어다 놓으십시오 재생 버튼을 약 35 픽셀로 설정합니다 계속해 보겠습니다 우리는 할 수있다

이 버튼을 27 와이드로 설정하십시오 우리는 커맨드 C, 커맨드 V 그럼 이걸 드래그해서 플립을하고 싶습니다 이제 다음 버튼이됩니다 이걸 약 15 개 옮기자

서로 떨어져있는 픽셀들 우리는 분명히 색상을 변경해야합니다 분홍색이 끔찍한 것처럼 보이기 때문에이 모든 것을 선택하고, 채우고, 여기에서 브랜드 색상을 선택한 다음 불투명도를 떨어 뜨린다 실제로, 그것은 작동하지 않을 것입니다 우리가 할 수있는 일은 실제 색상이 아닌 불투명도를 여기에 놓습니다

레이어의 불투명도, 그냥 떨어 뜨리면 좋아 보인다 우리는 이들을 선택할 수 있습니다 그룹화 – G 명령 "버튼 재생" 우리는 모바일에서도이를 움직일 수 있습니다

우리는 앞으로 나아가서 좋은 모습으로 이것을 설정할 수 있습니다 이것도 내려, 그냥 제목 Let 's do 25 let 's do 50 여기서 멋진 그림자를 추가하여 이 흰색 배경에서 전화 사이의 분리 들어 오십시오 여기에서 가면이 이름을 "모바일 배경"으로 변경하십시오 그림자를 추가하려고합니다

그림자를 보시고 색이 들어가 보겠습니다 먼저이 배경 레이어로 들어갑니다 나는 우리가 이것을 위해 어떤 색깔인지를 알 수있다 주황색 이 16 진수 코드를 복사 한 다음이 코드로 다시 돌아갑니다

선택 될 때까지 여기를 클릭하기 만하면됩니다 여기 그림자로 들어갑니다 이 16 진수 코드를 입력하십시오 난 흐리게 할거야, 그리고 난 불투명도를 꽤 낮출 것입니다 내가 원하기 때문에 10 번 해보자

정말 미묘합니다 그런 다음 Y를 늘린 다음 흐리게 증가시킬 수 있습니다 조금, 그래서 뭔가 미묘한 이것과 여기 배경 좋아요, 그래서이 수업에서 한가지 더요

여기에 정말 빠른 메뉴 바가 있습니다 우리의 둥근 직사각형 툴, 키보드의 "U", 여기에서 이것을 만들 것입니다 내가 원하는 이게이 색깔과 같아 그래서 나는 이것들을 불투명도는 14 %입니다 이것을 브랜드 컬러로 설정 한 다음 드롭 다운합니다

그러면 옵션으로 갈거야 아래로 드래그 해 나는 이걸 조금 만들거야 덜 오래 가서 이것을 그룹화하십시오

우리 모바일 아래서 움직여 보시죠 측면에서 20, 상단에서 40 나는 그것이 좋게 보인다라고 생각한다 축소 해 보겠습니다 좋아, 이제 내가 본 것을 보았으니 이 그림자, 우리는이 배경에 그림자를 추가해야합니다 다시 가자 이 마스크 또는이 백 헤더 배경에 넣고 여기에 그림자와 붙여 넣기 우리는 여전히 이것을 클립 보드에 보관해야합니다

흐림도 증가시켜야합니다 (Y 값일 수도 있습니다) 그런 다음 불투명도를 떨어 뜨려야합니다 여기도 아래로, 12 살을 좋아하니 보자

20 Y를 다시 내려 놓으십시오 – 매우 미묘합니다 너희들은 심지어 동영상에서 동영상을 볼 수는 있지만이 기능을 사용하면 배경, 그리고 조금 더 깊이 알았어, 좋은 측정을 위해서, 이것의 모서리가 전화기 가장자리까지 늘어서 있는지 확인하십시오 우리의 nav 그룹을 선택하십시오

그리고 우리는 이것을 위로부터 40으로 원합니다 이렇게하면 빠른 확인이 가능합니다 확대하면 우리가 여기 와서 가이드와 우리는 단지 "D"가 바로 여기에 있도록 이것을 옮길 수 있습니다 할거다 모든 수직 가이드를 마우스 오른쪽 버튼으로 클릭하여 제거합니다 그것은 모바일 UI를위한 것입니다! 다음 강의에서 우리가 할 일은 최종 결정을 내리는 것입니다

여기 아래로 그 말로, 나는 다음에 너를 만날거야! 강의 3에서 마지막 방문 페이지 섹션을 끝내고 제목을 추가하고 견적 카드 디자인 및 악센트 서클 배치 시작하자 Sketch에서이 모바일 앱 방문 페이지를 만드는 방법에 대한 마지막 강의에 오신 것을 환영합니다 이 맨 아래에서 작업을 시작하기에 앞서 아트 보드 조금 더 크다

이를 위해 아트 보드를 선택할 수 있습니다 너는 볼 수있어 여기 우리는 높이가 있습니다 이 높이를 높이기 위해 1,280과 같은 것 여기서 시작합시다 내가 할 첫 번째 일은 이 섹션의 내용을 설명하는 제목을 작성하십시오

텍스트 도구를 사용하려면 키보드의 "T"를 누르십시오 나는 타이핑 할거야 여기에 뭔가 "5 백만명의 사용자가 전환했습니다" 이걸 선택하겠습니다 여기가 무엇인지 설정하십시오

그건 시그 니카의 빛이야 54의 크기 2D로 색을 선택했는지 확인하고 싶습니다 그러면 우리는 이것을 287 행에 표시 할 수 있습니다 여기서 보도록하겠습니다

이 우리가 줄을 서서 우리가 그곳에 있는지 확인할 수 있도록 할 것입니다 이것을 약 90 픽셀 정도 조금 아래로 옮길 것입니다 이 응용 프로그램의 하단 이제 내가해야 할 일은 견적 카드

나는 이것을 대략 만들 것이다 380에 의해 225 나는 "U"를 칠 것이고 둥글게 될 것이다 구형 우리가 가서 거기에 380에 의해 380에 그것을 설정하자

우리는 작업을 시작할 수 있습니다 이것, 그래서 국경을 없애고 이것에 채우기를 켜 봅시다 파 우리가 실제로 이것을 볼 수 있도록 그림자를 추가하십시오 그림자를 추가 할 것입니다

실제로이 색상을 유지하십시오 우리의 본문이 무엇인지, 그래서 2D가 그렇습니다 약간의 흐림 효과를 더할 수 있습니다 그것을 조금만 움직여 라 나는 그 색깔을 통해 들어 와서 내려 놓을 것이다

불투명도를 꽤 내려 놓으십시오, 그럼 15를합시다 우리는 이것을 "견적 카드 배경"이라고 부를 수 있습니다 – 우리는 거기에 갈 실제로 시도해 보겠습니다 실제로는 견적 크기에 대해 우리가 할 부분은 약 15 인치 크기의 오픈 샌즈입니다 히트작 "T"를 시작합시다

다시 텍스트로 복사 할 수 있습니다 공개 될 수 있습니다 계속해서 이것을 Open Sans regular로 설정하고 크기를 15로 설정하십시오 여기에 와서 경계 상자를 설정해야합니다 왼쪽으로 정렬

그런 식으로 지금은 좋아 보인다 가자 앞으로 타원형을 만들고 이것은 프로필 사진이 될 것입니다 계속해 보겠습니다 대략 40 픽셀 정도입니다 국경을 끄고, 우리의 채우기에 와서, 나는 몇몇 프로필 사진을 포함했다

너희들이 사용할 수있는 것들 그래서, 이미지 1, 채우기 위해 설정하십시오 그런 다음 이 사람의 이름을 여기에 입력하십시오 우리는 Signika semi bold를 할 것입니다 다시, "T"와 여기서 이름을 짓자

모든 모자, "John Paul" 이것을 선택하면 우리가 할 것입니다 Signika 세미 볼드하고 15시에 보관하십시오 이것의 중심이지만이 프로필 사진의 바닥에 조금 내려 앉지 않습니다 5 픽셀 정도면 좋을 것 같습니다

우리를 그룹으로 묶어 놓고 우리가 부를 수 있습니다 이 "프로필 이름" 이 이름을 "견적"이라고 지정하십시오 너는 이걸 가지고있어 25 픽셀

이것을 그룹화하고 "견적 섹션"이라고 할 것입니다 계속해라 중앙에 놓고, 위쪽과 아래쪽에서 50 번, 그리고 측면에서 20 번 나는 앞으로 조금 더 키가 작게 만들어보십시오 200 번 해보십시오

다시 나는 그것이 조금 더 나은 것처럼 보이지만, 많은 공백이 없다고 생각한다 우리는이 두 그룹을 하나로 묶어서 "카드 1"을 할 수 있습니다 할거다 명령 C, 명령 V 두 번 그래서 우리는 세 장의 카드를 가지고 있습니다 카드 3은 실제로 더 내려야합니다

카드 2 필요 여기에 있고 카드 3은 조금 더 내려갈 수 있습니다 그럼 나는 견적을 동일하게 유지하는 것은 필러를위한 것일 뿐이므로 그럼 나는 이것을 바꾸려고합니다 나는 프로필에 올거야, 이것, 그리고 정말 빠르게 이미지를 변경하십시오 이름을 "Sarah Parker"로 변경하고 5로 이동하십시오 거기에서 픽셀

이것도 변경할 수 있습니다 – "Jack Miller"할 수 있습니다 그 부분을 처리합니다 내가 뭘하고 싶은지 이 카드는 우리가 앨범 표지로 여기에서했던 것처럼 비슷한 것을합니다 내가보기에 너무 희미 해지기를 바란다 이 가장자리로 사라집니다

거기에는 더 많은 카드가있어 스크롤 할 수 있습니다 우리가 전에했던 것과 비슷한 것을 해보겠습니다 사각형을 구체적으로 작성해 봅시다 이것을 이동하고 국경을 끕니다 나는 채우기에서 나오고 올 것이다

우리의 선형 그래디언트에이 것을 여기에 설정합니다 이걸로 옮기세요 이 때 포인트, 나는 이것이 알파 0에 있고 이것이 알파 100에 있기를 바란다 그럼 우리가 할 수있는 것은 카드 3과 이것을 선택하고 마스크하십시오 알파 마스크로 이미 적용된 것을 볼 수 있습니다

다시 알파 마스크가 아닌 경우 다음과 같이 보입니다 개요 마스크 너는 그걸 원하지 않아 네가 보이는 것처럼 보이면 레이어, 마스크, 마스크 모드 및 알파 마스크로 이동합니다 그런 다음 실제로 페이드 아웃하는 위치를 변경하려면 항상 마스크로 돌아온 다음 채우기로 돌아가서 이러한 그라디언트를 조정하십시오 이것을 왼쪽으로 이동하면 더 빨리 흰색이됩니다

내 생각 엔 그게 좋은 장소라고 생각해 이제 실제로 하나가 있습니다 내가하고 싶었던 것보다 더 많은 일을 수행하는 것이었다 우리가 여기서 만든이 서클들은 윤곽이됩니다 이 공간에서이 공백의 일부를 채우십시오

가자 원을 만듭니다 타원형 도구로 "O"를 누르고 교대를 유지하고 원을 만듭니다 이번에 채우기를 해제하고 색상 그라디언트로 들어가서 건너 뛸 수 있습니다 우리가 구한이 구배로

그런 다음이 두 지점을 이동할 수 있습니다 우리가 원했던 것입니다 Llet은이 카드들을 하나로 묶어서 명령 G를 on 이들 "견적 카드"를 해봅시다 우리는 서클에서이 작업을 수행하고 "액센트 서클"을 수행합니다

이 "제목 섹션 2"라는 이름으로 이동하겠습니다 얼마나 멀리 보는지 보자 이 카드는 제목에 있습니다 나는 이것을 보시면 내가 제거 할 수 있다고 생각합니다 지금 당장 -이 수직 가이드를 제거하십시오

나는 그것이 조금 올 수 있다고 생각한다 비트, 그래서 그냥 몇 픽셀을 그렇게하자 그래서, 나는 약 20 최대 픽셀 실제로이 두 가지를 모두 진행해 보겠습니다 견적 카드 및 제목 섹션 – 두 개를 모두 10 픽셀만큼 올리십시오

그런 다음 따옴표 카드를 열 개 더 넣으면됩니다 너는 그것이 볼 수있다 15 꽤 괜찮아 보인다 나는 단지 부부하고 싶다고 생각한다

더 많이, 아시다시피, 정렬 여기에 우리의 제목이 정렬되어 있는지 확인합시다 점을 만들어 봅시다 카드가 왼쪽 정렬되었음을 알 수 있습니다이 정렬은 이 그림자를 숨기고있어보기가 어려웠습니다

멋져 보이네 : et는 이것이 그 가장자리에 정렬되어 있는지 확인합니다 축소 나는 이것이 조금 왼쪽에 올 수있는 것 같아요 이 모바일 UI와 탐색을 선택한 다음 이동하십시오

10 픽셀 좋아, 나는 20 이상 그것을 옮겼다 나는 이것을 조금 아래로 움직일지도 모른다 좋아, 좋아 보인다! 나는 우리가 끝난 것 같아 이 모바일 앱 방문 페이지 완료에 대해 축하드립니다

스케치에 이 비디오가 마음에 들면, 엄지 손가락을 올려주세요 구독하십시오 그리고 Skillthrive에서 무료 회원이 될 수 있다는 것을 잊지 마세요 if 당신은이 코스 파일을 다운로드하기를 원합니다 – 링크는 설명에 있습니다 다시, 나는 Skillthrive에서 사냥꾼이고 나는 다음에 너를 만날 것이다!

Sketch App Tutorial – Design a simple landing page in Sketch

이봐 요! 저는 Skillthrive의 Hunter이고이 과정에서 방문 페이지를 디자인 할 것입니다 스케치에

1 단원에서는 대지 시작과 같은 기본 사항을 다루고 모양 만들기, 텍스트 만들기, 레이어 그룹화, 그림자 추가 등이 있습니다 시작하자 안녕하세요, 저는 Skillthrive의 Hunter입니다 어떻게하는지에 대한 첫 번째 강의에 오신 것을 환영합니다 Sketch에서이 방문 페이지를 만듭니다

우리가하고 싶은 첫 번째 일은 실제로 우리가 상륙 페이지를 만들 예정인 대지를 만듭니다 이를 위해 Sketch에서 'A'를 클릭하면 대지 도구를 빠르게 그냥 여기로 나와 아트 보드를 드래그하면됩니다 또는 대지 도구를 사용하고있을 때 프리셋을 위해 여기에 드롭 다운하십시오 즉시 사용할 수있는 다른 프리셋이 있습니다

하지만 실제로 내려와 맞춤 사전 설정을 만들고 싶습니다 그렇게하면 이것을 다시 사용하고 싶습니다 그냥 대지를 만든 다음 크기를 조절할 필요가 없습니다 이 버튼을 클릭하기 만하면됩니다 우리는해야만한다

실제로 사용자 정의 크기를 생성하므로 여기로 내려갑니다 이것을 클릭하면 사냥꾼 표준과 같은 이름으로 지정됩니다 웹 페이지 너비를 1200, 높이를 700으로 설정하고 구하다 자, 이제 우리는이 커스텀 아트 보드 프리셋을 가지고 있음을 볼 수 있습니다

여기를 클릭하면 프로젝트에 추가됩니다 나는 갈거야 실제로 이름을 바꾸려면 홈페이지 1과 같은 이름을 지정하겠습니다 우리가 실제로이 대지에서 작업하기 전에, 나는 색상에 대한 참조로 사용될 셰이프 몇 개 그런 식으로 당신은 그들을 볼 수 있고 당신이 이것에 들어올 때 그들이 무엇인지에 대한 생각을 가질 수 있습니다

계획 키보드에서 "R"을 누르면 우리는 사각형도 마찬가지입니다 클릭하고 드래그 한 다음 Shift 키를 누른 상태에서 광장 이 픽셀을 200 픽셀 정도 밖으로 드래그하면됩니다 하자 국경을 벗어나면 다시 선택하겠습니다

hold 옵션 다음 밖으로 드래그하십시오 여기에 사각형을 복제 할 것입니다 먼저 채우기 색상을 우리가 사용하는 색상으로 설정해 보겠습니다 이 프로젝트에 사용할 예정입니다

여기에있는 첫 번째 것은이 검은 색이 될 것입니다 우리는 텍스트를 위해 사용할 것입니다 그럼 우리는 좋은 오렌지색을 사용하려고합니다 우리가 사용하려고하는 진한 파란색을 사용합니다 그라디언트 및 이제는 밝은 파란색을 사용하여 그라디언트에도 사용할 수 있습니다

명심해야 할 점 중 하나는 이러한 색상을 저장할 수 있다는 것입니다 팔레트에 여기에 와서이 채우기를 클릭하면 볼 수 있습니다 여기에 전 세계적인 색채가 저장되었습니다 마지막으로 내가 여기있는 네 가지 색은 우리가 이걸 위해 사용하는 색이다

계획 예를 들어 새 색상을 만들고 싶다고 가정 해 봅시다 새 채우기를 만들고이 채색을이 채우기 원한다고합시다 뭐 당신은 할 수있어오고이 더하기 기호를 클릭하면 이제 그걸 볼 수 있습니다 색상이 선택됩니다

따라서 16 진 코드를 기억하거나 입력하는 대신 그 때마다, 당신은 단지 당신이 원하는 색상을 선택하고 올 수 있습니다 나는이 텍스트를 검정색으로 사용하고 싶습니다 당신은 그것이 있다는 것을 볼 수 있습니다 우리가 지금 원하는 색으로 바뀌 었습니다 여기에 채울 필요가 없으므로 데모로 그냥 끄십시오

당신이하고 있는지 확인하십시오 프로세스 속도를 높이고 싶다면 제일 먼저 실제로 홈페이지를 만들려는 것은 다각형을 만드는 것입니다 이쪽으로 내려와 내려오고 나서 이것을 채우십시오 이를 위해 실제로는 다각형을 만들 것입니다 6면

모양을 삽입하고 다각형을 선택하십시오 나는 그냥 갈거야 클릭하고 밖으로 드래그하십시오 그런 다음 교대를 유지하고 그냥 만드십시오 어떤 크기이든간에 꽤 큰데

나는 국경을 벗어날거야 그리고 옆면에서 볼 수있다 다섯 권리 나는 앞으로 나아가고 그걸 6 개까지 뛰어 올릴거야 나는 또한 모퉁이를 약간 둥글게하고 싶습니다

그런 식으로 그들은 어려운 지점으로 오지 않을 것입니다 이렇게하려면 모양을 두 번 클릭하면됩니다 이제이 모양을 볼 수 있습니다 모서리가 선택되었습니다 와서 조정할 수 있어요

그 구석의 진원이 여기에 있습니다 이제는 매번 하나씩하고 싶지 않습니다 이는 다소 비효율적이기 때문입니다 내가 할 수있는 일은 모양을 클릭 한 다음 클릭하고 드래그하십시오 우리의 모든 모서리를 모양을 만들고 나서 우리는 넘어서서 50을 좋아하는 값을 설정할 수 있습니다

이제보실 수 있습니다 그들 모두는 동시에 바뀌었다 내가 제일 먼저하고 싶은 일 캔버스를 가득 채울 수 있도록 훨씬 더 크게 만들어야합니다 당신 비율에 비례하지 않아도됩니다 실제로 당신이 원하는 지점으로 드래그하십시오

나는 실제로 돌리고 싶어한다 이것은 조금 그렇게 그렇게하자 그렇게 빨리하려면 명령 -R과 옆으로와 아이콘 변경을 볼 수 있습니다 그것을 회전시킬 수 있습니다

계속해 다음으로 이동하십시오 이 같은 것을 그냥 더 크게 만들 수 있습니다 좋아요, 그래서 그것은 내가 가고있는 모양과 같습니다 이제 우리는 필요하다 그라디언트로 채우기 위해 원하는 색상을 얻을 수 있습니다

할 것 그 모양을 클릭하고 채우기로 이동하십시오 바로 지금, 우리는 이것을 선택하면 단색으로 채워집니다 바로 옆에있는 것은 선형입니다 그래디언트를 선택하겠습니다 여기서 우리가 할 수있는 것을 볼 수 있습니다

우리의 색상을 설정하십시오 그래서이 색상을 선택하십시오 색상을 선택하거나 사용할 16 진 코드를 설정하십시오 더 진한 16 진수 코드 여야합니다 어서 이걸로 설정하면된다

바로 여기에 그런 다음 우리는이 다음 지점으로 가서 더 약한 16 진수 코드를 사용할 수 있습니다 우리가 채우는 것처럼 우리는이 그라디언트를 실제로 저장할 수 있습니다 이제 내가 실제로 이걸 구해 주었다는 것을 알 수 있습니다 이것을 다시 클릭하면 우리가 사용하고자하는 그라디언트가 생성됩니다

이제이 그라디언트가 여기에서 출발점임을 알 수 있습니다 더 어두운 색으로 가면서 밝은 색으로 내려갑니다 내가 실제로 원하는 것 해야 할 점은 밝은 쪽을 위쪽으로 설정하고 어두운 곳을 아래로 내립니다 이리 나는 그것이 어둡기를 원하지 않는다

그래서 내가 할 수있는 것은 실제로 이것을 확장하는 것이다 조금만 더 내려 가면 어두운 곳이 더 멀어 질 것입니다 멀리, 그래서 이것은 어둡지 않을 것입니다 나는 이런 느낌이 정말 좋다고 생각한다 나는 갈거야

앞으로 나가서 Enter / Return 키를 누르면 이제 여기에 텍스트 상자가 생성됩니다 나는 실제로 두 개의 오픈 소스를 사용하고있다 코스 파일 Skilldrive에서 무료로 제공되는 회원이라면 아직 컴퓨터에 설치하지 않은 경우 다운로드하십시오 첫 번째 내가하고 싶은 것은 실제로 "T"를 치면 텍스트 도구를 가져올 것입니다

그런 다음 아트 보드 내부를 클릭하기 만하면됩니다 할거다 먼저 서체를 Bree Serif로 변경하십시오 크기를 45로 설정하고 선을 62로 설정하려고합니다 그리고 실제로 이것을 돌리고 싶습니다 네가하고 싶은 말에 실제로 말하면, "네 차례 야

온라인 비즈니스에 대한 열정 " 원하는 위치에 배치하십시오 나는 아마 이것으로 주위를 어지럽히 야 할거야 우리가 서브 텍스트와 여기에있는 모든 것을 얻은 후에 조금 더 지금 당장은 괜찮습니다

다시 T를 칠거야 새 세금 계층을 만듭니다 Open Sans에 실제로이 서체를 설정하고 싶습니다 이 크기를 17로 설정하고 다음 행을로 설정합니다 23

가중치를 설정해 봅시다 먼저 빛을 시험해 봅시다 나는 이것에 대한 더미 텍스트를 만들려고합니다 그리고 이것을 그냥 복사 할 것입니다 축소하면 텍스트가 확장됩니다

정말 멀리 이 문제를 해결하려면이 자리에 오셔서 텍스트가 상자에 들어가기 시작합니다 너는 우리의 너비가 여기에서 볼 수있다 457이므로이 너비를 457로 설정해 보겠습니다 그런 식으로 진행됩니다

그것이 잘 정렬 될 것이라는 것을 우리가 알 때 줄 지어 쉬워지기 쉽습니다 이제 우리가 할 수있는 일은 여기에 다음 요소를 만드는 것입니다 그게이 작은 모의 검색 막대와 같을거야 우리가 원하는 것을하기 위해서 우리 타원 도구로 들어가거나, 타원 모양을 만들 수 있습니다 그렇게하려면 그냥 와서 모양을 찾은 다음 타원형으로 내려갑니다

나는 끌기 위하여 실제로 갈 것이다 우리는 타원을 만들고 싶지 않습니다 둥근 사각형 도구를 사용하고 싶습니다 그것을 밖으로 끕니다 먼저 폭을 457로 설정해 보겠습니다

뿐만 아니라 국경을 해제합시다 다음을 두 번 클릭하고 우리는 다시 코너를 볼 수 있습니다 이렇게 다시 모서리를 모두 선택하고 모서리를 끝까지 위로 올립니다 이제 너는 할 수있다 왜 그것이 타원형이라고 생각하는지 보시죠

하지만 사각형이있는 둥근 사각형 도구입니다 모서리가 둥글고 둥글다 나는 실제로 갈거야 여기에 높이를 훨씬 더 작게 설정하십시오 조금이라도 55를 좋아할 것입니다

이 부분을 살펴보면 검색 창에 큰 것처럼 그래서 실제로 그것을 약간 여기서 축소하려고합니다 단지 그것이 다른 모든 것에 비해 얼마나 큰지에 대한 아이디어를 얻는 것입니다 나는 그것이 꽤 좋은 크기라고 생각한다

나는 실제로이 채우기를 순수한 흰색으로 설정하려고합니다 배경 우리가 실제로 볼 수 있도록 그림자를 추가 할 것입니다 배경 여기에서 우리는 우리의 색, X & Y, 블러 및 퍼짐을 설정할 수 있음을 알 수 있습니다

원하는 값을 얻을 때까지 여기에서이 값들을 가지고 놀아 볼 것입니다 내가 원하는 효과 색상이 들어오고 불투명도가 상당히 떨어집니다 흐림을 버리십시오 좋아, 그렇게 생각하는 것 같은데 정말 멋지다

저는 이제이 동일한 글꼴 크기 인 17 Open Sans Light를 사용할 것입니다 나는 "T"를 칠거야 여기에 '이메일 입력 '과 같이 입력하십시오 이 둥근 직사각형에 센터를 시도하고 중심에 놓습니다 이전에 생성되었습니다 이제이 두 그룹을 실제로 그룹화하여 하나의 단위처럼 행동한다 이 레이어를 선택하고 누르고 있습니다

시프트 이 것을 선택한 다음 G로 명령하고이 그룹의 이름을 짓습니다 '검색 창'과 같은 것입니다 그렇게하면 우리가 이것을 숨기고 싶으면 숨길 수 있습니다 전체 그룹을 함께 사용하면 본질적으로 이것을 정렬하는 것이 더 쉽습니다

스케치는 다음과 같이 알고 있습니다 "이봐,이 두 가지는 하나의 요소이므로, 갑시다 이 직사각형에이 텍스트를 정렬하십시오 " 여기에 중심에 있다고 표시되어 있습니다 우리가 이것을 끌어 내면 당신은 볼 수 있습니다

이 빨간 선은 중심에 있다고 말하지만, 실제로는 그걸 내미는거야 두 픽셀과 같습니다 또 다른 빠른 팁은 제가 처음에 정말 스케치했을 때 좋았던 점이었습니다 그것을 사용하기 시작했다는 것은 선택한 요소를 여기에 저장할 수 있다는 사실이었습니다 hold 옵션을 선택하면 거리가 멀어집니다

너 나 알 수있어 실제로 이것을 2 픽셀 아래로 이동 시켰고 실제로 중심에있었습니다 이 둥근 사각형의 가장자리에서 25 픽셀, 그 다음에서 16 픽셀입니다 위쪽과 아래쪽 그리고이 가장자리로부터 255 나는 그것이 정말로 보인다라고 생각한다

좋은 내가하고 싶은 다음 일은 실제로 여기에 버튼처럼 만들면됩니다 그렇게하기 위해, 내가하고 싶은 것은 실제로 이 직사각형을 복제하십시오 그렇게하려면 명령 C를 누른 다음 명령 V를 누르십시오 그리고 그것의 위에 이중화되어 있습니다

그럼 내가 할 일이 다가왔다 이걸 가지고 그냥 끌고 가세요하지만 그 크기를 계속 지켜 볼 것입니다 여기이 모양의 왼쪽 하단에 있습니다 지금은 119시 55 분에 와서 55로 55 싶습니다

그래서 난 그냥 앞으로 가서 스트레칭까지 그것은 그 번호이고 그 다음에 풀어 놓습니다 나는이 오렌지색을 채울거야 우리가 고른 색깔 그것은 내가 기억하는 것보다 조금 어둡게 보입니다 음, 그것은 올바른 색입니다 나는 그것보다 조금 더 어둡게 보일 것 같다 여기,하지만 그건 괜찮아 아, 그게 뭔지 알지? 그림자를 돌려 보자

떨어져서 우리가 간다 차가워 요 내가 할 일은 다음과 같이 추가하는 것입니다 여기 작은 아이콘

파일이 있다면 우리는이 파일을 볼 수 있습니다 봉투 PNG 및 당신이 와서 이것을 안으로 끌 수 있습니다 바로 지금이야 분명히 너무 큽니다 그러니 계속 시도해 보시고이 크기를 40으로 낮추십시오

아마도 심지어 그보다 작습니다 그러니 계속 해보고 25하십시오 가운데에 나는 alt를 잡고 그것이 15 픽셀임을 알 수있다 원안의 각면은 중앙에 있음을 의미합니다

좋아, 그렇게 우리가 그렇게 할거야 가서 보자 이 둘 사이의 간격 우리는 이것은 20 픽셀이며 실제로 작동한다고 생각합니다 이 하나는 35입니다 그래서이 검색 창을 움직여 봅시다

약 5 픽셀 아래로 그냥 내 화살을 사용해서 5 시까 지 내려갈거야 너는 40 픽셀 떨어져 있다는 것을 알 수있다 나는 멋지다고 생각한다 가자 앞으로이 세 가지 요소를 실제로 하나로 묶으십시오

이제, 나는 갈거야 실제로이 이름을 헤더 이름 인 subtext로 바꿉니다 그런 다음 검색을 접습니다 바 그런 다음이 세 개의 레이어 인 명령 G를 선택하고 왼쪽 내용 만 수행하십시오

그렇게하면 이것이 이제는 그 자체의 요소이며 중심을 중심으로 이것을 움직일 수 있습니다 그것 이 레이어를 선택한 상태에서 스냅 할 때까지이 레이어를 이동합니다 센터에 약 60 픽셀 떨어진 곳으로 옮길 것입니다

지금은 70, 그래서 나는 교대를하고 왼쪽 화살을 잡을거야 10을 뛰어 넘을거야 픽셀 그런 다음이를 확인하여 60 픽셀 떨어진 거리에서 볼 수 있습니다 나는 이것을 20 픽셀 더 늘리면 다시 움직여서 두 번 남았습니다

나는 그것이 센터를 말했지만, 단지 이것을 내려라 나는이 텍스트를 전체 요소보다 중심에 더 많은 요소가 있으므로이 요소를 아래로 이동할 수 있습니다 그냥 내가 실제로 좋아하는 것을보고 아이디어를 얻으세요 나는 생각한다 216 상단의 픽셀이 꽤 좋아 보입니다 바로 지금, 다음으로하고 싶은 일 로고를 추가하십시오

나 자신의 로고를 사용하고 있으며 코스 파일이 있다면 당신도 그것을 볼 수 있습니다 계속해서 자산, Skillthrive 로고 가져오고 높이를 31로 설정합니다 여기에서 확대하십시오 나는 그것으로부터 같은 거리를두고 싶다 이것으로 남았습니다

40 픽셀 및 상단에서 약 20 픽셀 나는 좋게 보일 것이라고 생각한다 사실, 조금 내려 놓으세요 shift 키를 누른 다음 아래쪽 화살표 키를 30으로 이동합니다 나는 그것이 좋게 보인다라고 생각한다 우리가하기 전에 내가 할 다음 일은 실제로 전화를 만들고 모든 물건은 실제로 전화를 가지고 있습니다

다시 코스 파일을 가지고 있다면, 내가 무료로 제공 한 것을 볼 수있을 것이다 훌륭한 리소스 인 SketchAppResourcecom에서 여기에 리소스를 스케치하십시오 사용할 웹 사이트

그것은 전 세계의 디자이너들로부터 무료로 제공되는 것들을 가지고 있습니다 사용할 수 있습니다 당신은 우리가이 iPhone X를 가지고 있다는 것을 볼 수 있습니다 어둡거나 가벼운 평면 마크 업 내가 실제로 할 일은 두 번 클릭하고 여는 것뿐입니다

이것이 접혀 있으면 그냥 펼쳐서이 흰색을 선택하고, 그 다음에 명령 C를 사용하십시오 저는 우리 홈 페이지 1에 들어가서 V 명령 만 들어올 것입니다 그걸 붙여 넣으 려구요 이번에는 K 명령을하고 높이까지 내려 간다 거기에 우리가 간다

그래서 여기에 와서 크기를 조정하는 대신에 우리는 비례 적으로 비율을 조정하고 모든 요소가 서로 상대적으로 축척됩니다 그런 식으로 네가 아니야 우리가 방금 얻은 것 같은 그 funkiness를 얻는 것 여기 어딘가에이 위치를 정하십시오 나는 그것을 생각한다 꽤 좋아 보인다

좀 더 작게 만들어서 앞으로 나아갈 것입니다 K 명령을 다시 실행하십시오 450을 좋아할만한 것으로 설정하십시오 당신은 당신이 그것을 설정할 것입니다 사실 이걸 아래로 옮길거야

안구 조금 다음 단원에서 우리는 올 것이다 실제로 이것을 디자인하고 있지만, 지금 당장 걱정하지 마십시오 하자 실제로 들어 와서 나머지 구성 요소를 마칩니다 가장 쉬운 방법 해야 할 일은 계속 진행하고 상단의 탐색 링크를 두드리면됩니다

텍스트 도구를 얻으려면 T를 다시 누르십시오 나는 여기를 클릭 할 것이다 흰색으로 색상을 설정하고 크기를 조금 작게 설정하고 싶습니다 14로 입력하십시오 너의 네비게이션에서 페이지까지 사용할 수있는 것들 웹 사이트

나는 "about"을 가지고있을 수도 있고 alt 나 option을 유지할 것입니다 이것을 끌어 내십시오 나는 실제로 빛에 무게가있는 대신에 갈거야, 세미 보그와 같은 무언가를 펼쳐 보도록하겠습니다 조금 더보기 쉽다 그런 다음이 것을 선택하고 다음과 같은 것을하고 싶습니다

행동 이 두 가지를 모두 선택하고 꺼냅니다 '일정', '연락처'와 같이 변경합니다 다시 복제하고 "로그인"하십시오 그럼 나는 갈거야

서로 20 픽셀 간격으로 공간을 둡니다 이걸 드래그하면 할 수 있어요 23, 20, 20 번 참조 스케치가 있다는 것을 알 수 있습니다 스케치는 또 다른 이유입니다

너무 좋았습니다 나는 그 사람들이 20 명씩 떨어져 있기를 바랐다 그래서 나는이 둘을 20 분 간격으로 띄울 때 "그는 아마 이들 중 나머지는 20 분 간격으로 배치됩니다 " 지능적으로 실제로이 모든 것을 그룹으로 묶어 보겠습니다

저는 여기로 와서 교대를 유지하고이 층들, 명령 G를 선택 할 것입니다 이것을 "탐색"이라고 부르십시오 이 "화이트"에 나는 이것을 실제로 명명하려고합니다 아이폰 그래서 조금 더 설명 내가 이걸 원해

이 로고와 같이 맨 위부터 같은 거리에 있습니다 30 4 픽셀 위로 이동하십시오 이 전화의 왼쪽에 줄이 있기를 바랍니다 그래서 여기에서 볼 수 있습니다

물었다 빨간색 마크에서 전화를 중심으로 볼 수 있습니다 30 픽셀 올라간다하지만 조금 더 올 필요가 있다고 생각한다 이 상자의 위쪽에서 30 픽셀을 측정하고 있습니다

조금 그래서 25 나는 그것이 꽤 좋게 보인다라고 생각한다

좋아 이 방문 페이지 모형에서 내가하고 싶은 것보다 더 많이 추가해야합니다 회전 목마를 나타낼 수있는 여기에있는 서클과 같은 두 가지가 있습니다 그렇게하기 위해 저는 실제로 원을 만들고 타원형 도구로 들어갈 것입니다 확대하고 여기에 서클을 그립니다

계속해서 클릭하고 드래그 한 다음 완벽하게 전환하십시오 15 또는 16 픽셀을 선호하도록 설정하겠습니다 테두리를 끕니다 실제로이 색을 약간 설정하려고합니다 밝은 흰색

그런 다음 옵션을 누른 다음 복제 할 것입니다 약 10 픽셀 떨어진이 하나 그런 다음 나는이 두 가지의 불투명도를 떨어 뜨릴 것입니다 나는 70을 좋아하지 않습니다 아마도

이 하얀 색의 불투명도를 90도 떨어 뜨릴 수 있습니다 조금 큽니다하지만 제가 할 수있는 일은 실제로 이것들을 선택하는 것입니다 커맨드 K와 나는 그것을 백분율로 축소 할 수 있습니다 계속해서 규모를 조정 해 보겠습니다

그것은 80 % 척도만큼 떨어졌습니다 미리 볼 수 있습니다 70 번 가자 나는 70이 멋지다고 생각한다 확인을 클릭하겠습니다

이들이 선택되면서 앞으로 그들을 그룹화하십시오, 그래서 G 명령하고이 "회전 목마를 지명하십시오" 가자 실제 아트 보드와 옆에서 약 40 픽셀 이동하십시오 나는 아직도 이것들이 아주 구별되지 않는다고 생각한다 그래서 앞으로 나아가 자

실제로이 두 가지로 들어가서 50 개의 불투명도를 떨어 뜨리십시오 좋아, 나는 생각한다 그들은 조금 다르다는 것을 알기가 쉽습니다 선택된 먼저 여기를 축소 해 보겠습니다

이것 좀보세요 그게 다야! 완료했습니다 첫번째 교훈, 그리고 우리가해야 할 일은 실제로이 일에 들어갑니다 전화를 걸고 사용자 인터페이스를 디자인하십시오 그 말로, 나는 다음에 너를 만날거야! 2 단원에서는 1 단원에서 배운 개념을 적용하여 iPhone 앱 사용자 인터페이스

또한 기호 사용에 대한 소개를 얻을 수 있습니다 이미지로 도형을 채우는 방법을 배웁니다 시작하자 안녕하세요, 저는 Skillthrive의 Hunter이고 이것을 만드는 방법에 대한 마지막 비디오에 오신 것을 환영합니다 스케치의 방문 페이지 이 비디오에서 우리가 집중하고 싶은 것은 실제로 전화 UI를 만듭니다

우리가하고 싶은 첫 번째 일은 전화 레이어 및이 마스크 레이어를보십시오 이 마스크 레이어 -이 기능을 켜면 전화 화면에있는 것과 같습니다 우리가 여기서하고 싶은 것은 실제로 이 마스크 레이어를 심볼로 만듭니다 기호에 익숙하지 않은 경우, 본질적으로 상징은 당신이 우리의 전화 화면을 나타내는이 마스크와 같은 객체입니다 우리가 이 대지의 복제본

각 대지에 들어가기보다는 하나의 인스턴스 만 변경하면 업데이트됩니다 모든 대지 이 프로젝트가 성장함에 따라 Sketch에서 효율적으로 작업하고 싶다면 익숙합니다 하기 위해서, 계속해서 이것을 상징으로 만드십시오 우리가 할 수있는 일은 우리가 할 수있는 일입니다

마우스 오른쪽 버튼을 클릭하면 기호 만들기를 말할 수 있습니다 우리가 원하는 것을 물어볼 것입니다 이 아이폰 화면의 이름을 "심볼 페이지로 보내기"라고 할 수 있습니다 가 선택됩니다 확인을 클릭하고 여기에이 새 페이지를 만듭니다

라는 기호 여기에 iPhone이라는 새로운 기호가 있음을 알 수 있습니다 화면 예를 들어 우리가 돌아 가면 무슨 일이 일어날 지 보여 주자 우리는이 전화를 복제했고 우리는 그것을 여기에서 새로운 대지로 뽑았습니다

새로운 대지를 만들어이 대지로 드래그하자 아트 보드 이제 우리는 두 가지 경우가 있습니다 가는 대신 각 대지에 넣고 변경하면 기호에서 할 수있는 것은 만들 수있는 것입니다 여기 하나가 바뀐다

배경을 바꾸자 업데이트 된 것을 볼 수 있습니다 두 휴대폰 용 예를 들어, 그런 일이 일어나기를 원하지 않는다고 가정 해 봅시다 자, 명령 Z를 쳐서 회색으로 돌아가 보자

여기에 오면 두 번 클릭하고 "질량" 여기에 iPhone 화면이라는 드롭 다운이 있습니다 이는 상징 이제 자물쇠를 풀거나 묶어 두지 않으려는 경우 이것으로 들어 와서 상징에서 분리라고 말할 수 있습니다 우리가 기호를 입력하고 채우기 색상을 변경하면 해당 색상이 변경 될 것임을 알 수 있습니다 그것은 여전히 ​​상징에 묶여 있지만, 우리는 그 상징으로부터 단절된 상징이 아닙니다

상징 – 그래서 스케치를 할 때 정말 중요한 개념 이죠 기호가 작동하는 방식을 이해하기 시작합니다 가자 이 대지를 지우면 Z를 다시 실행하고 삭제하도록 명령 할 것입니다 아트 보드

실제로이 작업을 해봅시다 페이지, 나는 우리의 상징에 가고 이것에 종사하기 위하여 다만 시작하고있다 제일 먼저하고 싶은 것은 프로필 이미지를 만들고 싶다는 것입니다 우리 소스 파일에서 나는 당신이 끌어 들일 수있는 우리 자산에 여기에 프로필 그림을 가지고 있습니다 65 픽셀 × 65 픽셀 크기로 조정 해 보겠습니다

앞서 여기에 대한 좋은 장소를 찾아 내십시오 이런 식으로 항상 움직일 수 있습니다 그럼 T를 치자 텍스트 도구 나는 실제로이 색을 우리가 가지고있는이 어두운 색으로 설정하려고합니다

브랜드 색상을 골라 내고 이것을 열어 sans를 엽니 다 일반 글꼴 크기 10으로 설정합니다 그런 다음 일반 이름을 입력하고, "존 파커" 이것을 대략 10 픽셀 또는 5 픽셀로 만듭니다 윤곽

우리가 옵션을 잡으면 5 픽셀이라는 것을 알 수 있습니다 이 프로필의 하단 그런 다음 T를 다시 눌러 텍스트 도구와이 도구를 구하십시오 실제로 크기를 8로 줄이십시오 이것을 대신 설정하십시오

일반, 빛에 그것을 설정하자 이것은 단순한 종류의 정보처럼 될 것입니다 섹션 "Photoshop 및 일러스트 레이터"와 같은 것을 입력 해 봅시다 이들 이 강사가 다루는 주제가 될 수 있습니다

가자 이것을 중심에두고 실제로 옮겨라 이걸로 플러시하십시오 이 텍스트 상자에 맞는지 확인할 수 있습니다 이제 다른 요소를 추가해 보겠습니다

어쩌면 우리는 추종자를 원하고 Instagram 또는 지저귀다 다시 한번 T를 치고 여기에 새로운 것을 만들어 보자 실제로 이것을 동일한 서체로 설정하십시오 세미 볼드와 실제로 이것을 12 개까지 늘려 보겠습니다 다음과 같이 숫자를 입력 할 수 있습니다

435 그리고 나는 다시 T를 칠 수있다 semibold 대신 이것을 설정해 보겠습니다 다시 규칙적인 것으로 설정하십시오 크기를 10으로 설정하고 입력 해 봅시다 "추종자들"

저는 이것을 실제로 함께 그룹화 할 것입니다 먼저, 명령 G를 실행하고이 추종자를 호출하십시오 계속 팔로어를 집중 435 당신은 그것이 꼭 있어야한다는 것을 볼 수 있습니다 실제로는 실제로 이상한 지금

축소하고 거기서 시도해 봅시다 좋아, 그렇게 될거야 뿐만 아니라 그것을 플러시 수 있습니다 나는 실제로 가서 추종자들을 내릴지도 모른다 우리가 여기서 열거 하던데 ~ 그래, 그럼 이걸로 크기를 줄이자

10으로하고 그것을 다시 언급하십시오 알았어 이제 내가 할 수있는 일이 너무 평평 해 이 추종자를 복제하는 것입니다 이 층을 선택하겠습니다

명령 C, 명령 V를 누르고 다음을 수행하십시오 이걸 옮기고 가자 앞으로이 번호를 변경하십시오 123을 알고 다음을이 번호로 변경하십시오 그것이 123 인 중앙에 있는지 확인하십시오

둘 다 21211이에요 이러한 문제를 지나치게 눈 감아 주도록하십시오 이것은 대략이다 측면에서 29 픽셀 215

217 나는 이것에 대한 아이디어를 얻으려면 축소하려고합니다 나는 실제로 가져올지도 모른다 이것들은 조금 더 많아서, 오른쪽으로 시프트해서 오른쪽으로 시프트하십시오 가서 G를 명령하십시오 나는 "stats"라고 이름을 지어서 괜찮을 거라고 생각합니다

저는 사실 이것을 한 픽셀처럼 움직일 것입니다 그것은 닮았다 그것은 오른쪽으로 조금 올 필요가 있습니다 그래서 그냥 조금씩 움직이기를 원합니다 끝났어

지금은 중심에있는 것처럼 보입니다 어쩌면 한번 더 움직여 여기에 우리가 가진이 새로운 요소를 볼 수 있습니다 이제 우리가하고 싶은 일 몇 가지 요소 만 추가하면됩니다 나는 실제로 가서 시작하려고합니다

이들 중 일부를 그룹으로 묶어서이 세 가지를 선택하고 G 명령을 실행 해 봅시다 이 이름을 "프로필"과 같이 지정하십시오 그렇게하면 프로파일 섹션이됩니다 우리는 이것이 어떻게 간격을 두 었는지에 만족합니다 그래서 우리가 이것을 움직이고 싶다면 우리는 단지 이 세 가지 요소를 하나로 합치려는 이유입니다

이 카드를 만들어 봅시다 그렇게하기 위해 우리는 들어올 수 있습니다 실제로 둥근 사각형을 다시 수행하십시오 계속해서 너비를 175 여기에서 국경을 끄고 전진하고 복제 할 것입니다

이 세 번처럼 나는이 두 요소를 실제로 움직일 것입니다 이것을 서로 약 15 픽셀 이동시킨 다음 한 번 더 복제하십시오 그것은 꽤 좋아 보인다 이것들을 채우기 위해 영상

이 작업에는 여러 가지 방법이 있지만 내가하고 싶은 한 가지 방법은 실제로 채우기로이 아이콘을 선택하십시오 그런 다음 이미지를 선택하고 당신은 당신이 사용할 수 있고 열린 것을 클릭 할 수있는 당신을위한 몇 가지 이미지가 있음을 알게 될 것입니다 여기에 적용 할 것입니다 그리고 지금은 너무 큽니다 우리는 할 수있는 것은 실제로 이것에 와서 채우기 만하면됩니다

이미지를이 섹션에 추가하십시오 이것들을 계속 진행해 봅시다 다시 실제로 우리 페이지 1로 돌아가서 이것이 무엇을 보이기 시작하는지 봅시다 꽤 멋지다 그 효과가 그 심볼 페이지가 이제 적용되어 여기에 옮겨졌습니다

내가하고 싶은 몇 가지 더 있습니다 내가 실제로하고 싶은 한 가지는 내가 원하는 것이다 이 흰색 배경에있을 기호로 돌아가서 이것을 순수한 흰색으로 바꿔라 그래도 우리가 이렇게하면 순수한 흰색 배경과 흰색 전화, 그래서 우리가 할 수있는 것은 우리의 기본 계층에 여기에 와서 이 채우기를 변경하십시오

우리는 색상을 약간 오프셋 할 수 있습니다 따라서 F2F2F2 16 진수 코드입니다 마지막으로 할 일은 그냥 복사하는 것입니다 이 16 진수 코드를 여기에있는이 술집에 적용하면됩니다 새로운 iPhone 10에 다시 채워 넣고 붙이면됩니다

정상으로 보입니다 당신이하고 싶은 다음 것은 작은 마음을 추가하는 것입니다 그런 다음 시간과 같은 이유로 전화 구성 요소 중 일부를 여기에 추가하십시오 너의 셀룰라 전화 서비스를위한 신호 및 재료 당신이 내가 다른 스케치 리소스를 가지고있는 것을 본 코스 파일 iPhone X 노치 오버레이라는 무료입니다

이걸 열어 보겠습니다 나는 이걸 끌어 놓을거야 여기에 우리가 사용할 수있는 몇 가지 노치가 있음을 알 수 있습니다 순수한 흰색을 사용하고 싶습니다 그래서이 것을 선택하고 나는 우리의 상징에 와서 여기에 붙여 넣을 것입니다

너무 컸다는 것을 알 수 있습니다 그래서 우리가 할 수있는 일은 당신이 우리의 대지에 들어온 것입니다 너비가 201 인 것을 볼 수 있습니다 그래서 우리가 원하는 넓이입니다 상태 표시 줄은 그렇게하기 위해 K 명령을 명중 시키면 비율에 비례하여 너비를 201로 설정하고 확인을 클릭하십시오

그럼 우리가 할 수있는 일 이것을 우리가 원하는 곳으로 옮기십시오 우리가 우리 페이지로 돌아 가면 그 변화가 이어졌다 내가하고 싶은 또 하나의 일은 우리가이 사람을 따라 가고 싶으면 좋아 우리의 상징과 다시 자산에 나는 두려운 마음을 가지고있다 어서 드래그하세요

이걸로 축소 해 봅시다 우리가 실제로 볼 수 있도록 채우기를 변경하십시오 그것 이 항목을 선택하고 15 픽셀로 스케일을 내립니다 바로 지금 당신은 심장의 바닥이 이 프로필 사진의 맨 위에는이 카드들과 같은 거리에 있습니다

그래서 그것은 좋고 중심에있다 페이지로 돌아가서 그 내용을 봅시다 보이는 것처럼, 좋아, 나는 그것이 정말로 좋게 보인다라고 생각한다 한 가지 더 있어요 나는이 일을하고 싶다

그리고 그것은 최후의 그림을 퇴색시키는 것이다 떨어져서 그것이 계속되는 혼합 인 것처럼 그것은 본다 그렇게하기 위해, 여기에서 직사각형을 만드는 것입니다 난 그냥 해요 직사각형을 만들려고합니다 나는 그것을 더 작게 만들고 그것을 끌 것이다

실제로 국경을 끄고 채우기 위해 나는에 들어갈 것입니다 구배 나는 이것을 설정하려고합니다 – 실제로 이것을 조금 더 크게 만들고 싶습니다 나는 그것을이 꼭대기에 원하는 그라데이션에서이 밑색을 원한다 순수한 흰색

나는 다음 것을 순수한 흰색으로하고 싶지만 불투명도를 설정하고 싶다 0으로 우리가 할 수있는 일은 이것을 연장 할 수 있다는 것입니다 이걸 움직여 이런 종류의 효과를줍니다

다른 지점을 여기에 설정하고 순수한 흰색이지만 어쩌면 조금 증가시킬 수도 있습니다 그런 것 이제 너는 그 말의 의미를 알 수있을거야 테이퍼 오프 효과 우리 페이지로 돌아와서 효과가 적용됩니다

이걸 감싸기 전에 내가하고 싶은 한가지 더 있습니다 이것은 우리가 만든이 다각형에 그림자를 추가하는 것입니다 하기 위해서 그냥 그림자로 들어가면 멋진 미묘한 그림자가 추가되었음을 알 수 있습니다 나는이 값들을 가지고 장난하고있다 그래서 나는 실제로 흐릿함을 켜고 그것을 집어 넣을 것입니다

그런 식으로 그 모양을 조금 더 깊게 만듭니다 배경 – 조금 더 멋지게 보입니다 내 의견 다시 말하지만, 어떤 아이디어가 있으면 아이디어를 얻기 위해 축소하려고합니다 최종 변경 사항

이 레이어를 10 픽셀 위로 가져 와서 움직일 수도 있습니다 이것은 약 10 픽셀 이상이되었습니다 이제 모든 것들이 어떻게되는지 아이디어를 얻으실 수 있습니다 정렬 차갑고, 그게 다야! 이 방문 페이지에서 일하는 축하해

스케치에 Sketch를 처음 사용하는 경우 어떻게 보았 으면합니다 이것으로 정말 쉽게 프로토 타입을 만들 수 있으며 왜 그렇게 많은 사람들이 가지고 있습니까? 포토샵과 일러스트 레이터에서 이것을 전환했습니다 포토샵 자체가있다 현재 경쟁자이거나이 경쟁자 인 Adobe XD입니다

나는하지 않는다 XD는 아직 스케치가 어디에 있는지는 모르겠지만, 미래에는 아마도 그것이 나 일 것입니다 그것도 튜토리얼을해라 다시 한 번 말씀 드리지만 이것을 볼 시간! YouTube에서 YouTube를 팔로우하지 않은 경우해야합니다 그것도 Skilldrive의 무료 회원이됩니다

다시, 나는 Skillthrive에서 사냥꾼이다 그리고 나는 다음에 너를 볼거야!

Designing a landing page in Sketch – Tutorial

– 새로운 웹 디자인 자습서 비디오에 오신 것을 환영합니다 이걸로, 너를 내 과정으로 데려다 줄거야

Sketch를 사용하여 방문 페이지 디자인 이미 익숙하지 않다면, 스케치는 Mac 용 디자인 소프트웨어입니다 디지털 디자인, 내가 디자인에 사용하는 것입니다 내가 일하고있는 모든 웹 사이트 이전에 Sketch 101이라고 부르는 비디오를 만들었습니다 그 비디오에서 나는 모든 기본 사항을 밟았다 도구가 작동하는 방법, 모든 다른 패널이 의미하는 것, 그리고 당신이 어떻게 모든 도구와 것을 사용하는지

이미 소프트웨어에 익숙하지 않다면, 먼저 동영상을 확인하는 것이 좋습니다 정말 좋은 소개가 될거야 그리고 익숙해 질 것입니다 그래서 당신은 어디에 물건을 클릭하는지 안다 이 비디오에서 나는 그것을 똑바로 다이빙하고 싶다

방문 페이지를 만드는 데 사용하는 것까지 Sketch를 열어 본 적이 없다면, 그런 다음 기본 비디오를 먼저 확인하십시오 그렇지 않으면 들어 가자 Sketch로 들어가기 전에, 나는 단지 주목하고 싶었다 내 웹 디자인 프로세스가 시작되지 않는다는 것 컴퓨터에서; Sketch에서 시작하지 않습니다 실제로 펜과 종이로 시작합니다

이런 식으로보고 나는 언제나 웹 사이트를 와이어 프레임하고 싶다 들어가서 컴퓨터에서 디자인하기 전에 일단 상자를 만들면 그리고 당신은 레이아웃 그리드에 물건을 정렬하고 있습니다 그런 것들, 당신은 일을 너무 완벽하게하는 것에 집중하는 경향이 있습니다 아이디어를 최우선으로 생각하는 것보다 그래서 보통 종이와 샤 키즈 조각 당신이 볼 수 있듯이 정말로 저에게 도움이됩니다

웹 사이트를 와이어 프레임하기 위해 드로잉을 잘 할 필요는 없습니다 이것은 오늘날 우리가 설계하게 될 것의 대략적인 개요입니다 글꼴의 방문 페이지를 디자인 할 예정입니다 내가 지금 만들고있는 것이고 결국 판매 될 것입니다 잘하면 나중에 올해

그래서 내가 와이어 프레임을 사용하여 어떤 정보를 생각했는지 내 글꼴에 대해 사람들에게 줄 필요가있다 그리고 제가 팔려고하는 다른 패키지들, 모든 방문 페이지에는 주요 목표가 있어야합니다 분명히이 방문 페이지에서 주요 목표는 사람들이 글꼴을 구입하도록하는 것입니다 따라서 여러분이 스케치에 뛰어 들기 전에 방문 페이지를 조롱하는 순간부터 그 페이지의 내용에 대해 먼저 생각하십시오 그리고 어떤 정보가 그것에 가야하는지, 실제로 와이어 프레임 형식으로 그렇게하는 데 도움이됩니다

좋아, 이제 그 말은 끝났어 Sketch로 들어가 봅시다 좋아요, 그래서 여기에 새 문서를 만들었습니다 그 안에 데스크탑 HD 아트 보드가 있습니다 대지를 만들려는 경우, 삽입하고 거기에 삽입하십시오

가장 먼저하고 싶은 일 어떤 형태의 디자인이라도 실제로 그리드가 설정됩니다 당신은 디자인을하기 때문에 일할 것입니다 당신은 규칙을 깨기 전에 규칙을 알고 싶습니다 특히 웹 디자인에서 그리드 작업 그것이 만들어 질 때 정말 유용합니다 내가 작업하는 대부분의 사이트는 부트 스트랩 그리드를 사용합니다

그래서 저는 Sketch에서 그 것을 흉내 내고 싶습니다 여기에서 control + l을 사용하여 레이아웃 격자를 켭니다 12 개의 열이있는 설정이 있음을 알 수 있습니다 이것은 부트 스트랩 그리드의 너비입니다 기본으로 설정했기 때문입니다

여기 내 그리드 설정입니다 스크린 샷을 찍어 복사하려는 경우 Sketch가 정말 편리합니다 특정 격자가있는 경우입니다 당신은 항상 당신 자신이 사용하는 것을 발견합니다 그런 다음이 기본 설정 버튼을 클릭하면됩니다

어떤 새로운 대지 에나있을거야 그리고 당신이 만드는 문서 좋아, 그럼 내가 먼저해야할 일 기본적으로이 모형의 디지털 버전을 만듭니다 그래서 나는 회색 상자를 본질적으로 만들거야 물건을 올바른 곳에두기

그 자리 표시 자 텍스트를 얻기 위해 방금 사용한 것 InVision이 만든 Craft라는 플러그인입니다 내가 좀 더 자세하게 들어갈거야 나중에, 그래도 걱정하지 마라 그래서 제가 조롱 한 것은 헤더 공간입니다 나는 내가 어떤 종류의 사진을 가질 것이라는 것을 알고있다

제목과 버튼을 아마 그것에 대한 행동 촉구와 함께 다음 섹션에서는 글꼴에 대한 약간의 배경 정보 몇 가지 특수 기능에 대한 세부 정보 아시다시피, 특별한 부분이 있습니다 그런 다음 페이지를 끝내고 섹션을 만들고 싶습니다 내가 제공 할 패키지가 다르기 때문에 나는이 카드들에 대해 어떻게 될지 잘 모르겠다 아직 여기에서 우리는 그것을 함께 해결할 것입니다 그리고 마지막 비트는 단지 작은 사진 일뿐입니다

내 웹 사이트와 그런 것들에 대한 몇 개의 링크가 있습니다 보시다시피, 저는이 와이어 프레임을 만들었습니다 기본적으로 직사각형과 텍스트 상자를 사용하여 이 와이어 프레임을 약간 깔끔하게 디지털 버전으로 만들 수 있습니다 당신이 또한 볼 수 있듯이, 그리드에 집착하려고 했어 내가 누워있는 모든 작은 것들에 대해서, 나중에 도움이 될 것 같아서 그래서 내가이 상자들을 만들 때, 여기에는 이미지 나 스크린 샷 등이 포함됩니다

그것을 전체 칼럼에 올렸습니다 이제 우리는 디지털 와이어 프레임 재미있는 부분에 들어갈 시간입니다 고 충실도 실물 크기 모형 만들기 나는 이것을 통해 걷고 싶었다 이것은 내 정확한 웹 디자인 프로세스이기 때문에 디자인은 단순한 비주얼이 아님을 기억해야합니다

그리고 그것이 어떻게 끝을 보는지 전체 과정입니다 계획과 사고에 들어가는 정보 구조와 그런 것들에 대해서, 이 와이어 프레임을위한 시간을 가져라 정보가 어디로 갈 것인지 정말로 생각해 정말 중요합니다

이 고 충실도 실물 크기 모형 실습을 할 때, 나는 위에서 아래로 일하는 경향이있다 그래서 그것이 우리가 할 일입니다 먼저이 헤더 섹션의 디자인을 다루겠습니다 그래서 내가 여기 일러스트 레이터로 오면, 내 글꼴 미리보기입니다 내가 계속 노력하고있어

그것은 분명히 끝나지 않았습니다 지금 당장은 그 이미지를 그려내는 모습입니다 내 iPad에서, 그리고 할 일이 많이있다 그것을 실제로 사용하게 될 실제 폰트로 바꾸려면, 하지만 그래,이게 내가 지금 부름을 생각하고있는거야 나는 아직 확실하지 않다

하지만 지금은 이걸로 갈거야 이 방문 페이지를 만들기 위해 그래서 내가 할 일은이 편지들을 복사하는 것 뿐이야 Sketch로 가져 오십시오 스케치에 대한 정말 좋은 점은 Illustrator에서 복사하여 붙여 넣을 수 있습니다 때로는 상황이 조금 좋아 지지만, janky가 좋은 단어와 같다고 말할거야

설명하기 위해, 솔직히 말해서, 이런 일을하고 클리핑 마스크에 넣습니다 때로는 그 모양이 보이지 않을 수도 있습니다 그래서 가끔은 그냥 들어가서 정리할 때가 있습니다 그 클리핑 마스크를 치워 버려 그래서이 사람은 본질적으로 페이지의 제목이 될 것입니다

나는 많은 공간을 차지하지 않기를 바란다 아마 밑에있는 텍스트 줄과 그 다음에 버튼이있을 것입니다 나는 Sketch 101 비디오에서 이것을 언급했다 하지만이 소프트웨어에 대해 내가 좋아하는 것은 여기에있는이 패널은 당신이 작업하고있는 어떤 것이라도 적응합니다 당신이 선택한 것은 무엇이든 마찬가지입니다

여기이 사람을 클릭하면 분명히이 글꼴을 바꿀 수는 없다 왜냐하면 그건 텍스트가 아니기 때문에 저에게 보여주지 않습니다 그리고 나는 그것을 정말로 좋아합니다 나는 그것이 가장 유용한 정보를 만든다고 생각한다 너에게 명백하게 편집 할 수있는 것들 쉽게 접근 할 수 있습니다

이 버튼을 약간 둥근 모서리에 여기에 붙이고 싶습니다 나는 그것이 보이는 방식을 정말로 좋아하기 때문에, 그리고 그렇게하기 위해서, 나는 사각형 안으로 들어갈 것입니다 여기서 반경을 5 픽셀로 변경하십시오 그리고 나는 사진을 배경으로하고 싶다 왜냐하면 나는 그것이 더 역동적이 될 것 같아서

사용하려는 정확한 사진이있는 경우, 이 사각형을 드래그하여 마스크로 사용할 수 있습니다 실제로 어떻게하는지 보여 드리죠 내가 여기이 이미지를 잡고 떨어 뜨렸다면 내 캔버스에, 분명히 그것은 초대형으로 나타납니다 사진이 그보다 훨씬 크기 때문입니다 이제 직사각형을 사용하려면 어떤 모양을 실제로 마스크로 사용하고, 너는 2 개의 품목을 선정하고 가면 가야한다

위의 그룹에서 편집 한 내용은 그 사각형 모양에 국한되어, 하지만 그걸 잠시 꺼두겠습니다 내가 너에게 다른 것을 보여주고 싶어서 여기에 다른 직사각형을 그 으시면 갈 수 있어요 그룹과 함께 가져와 우리는 거기에 갈

그래서 제가 전에 간략하게 언급 한이 Craft 플러그인 InVision에 의해 설계되었으며 이는 본질적으로 설계를 채우기위한 것입니다 콘텐츠가 포함 된 그게 내가 생각할 수있는 가장 좋은 설명이다 콘텐츠 복제와 같은 작업도 수행합니다 내가 실제로 사용하지 않는 다른 것들 그러나 이것은 제가 가장 많이 사용하는 부분입니다 기본적으로, 여기의 모든 섹션은 예제 컨텐츠를 가져옵니다

디자인에 넣으십시오 따라서 대개는 이것을 사용하지 마십시오 최종 결과 당신이 확실하지 않을 때 실물 크기의 무대에있는 것입니다 텍스트가 정확히 무엇일까요? 그것은 내가 여기와 여기에서 한 것입니다

그러나 당신이 할 수있는 것은 그것으로 웹을 탐색하는 것입니다 상자에 삽입 할 사진을 찾습니다 그래서 Unsplash로 향하게하고, 지금, 예를 들면, 나는이 이미지를 발견했다 내가해야 할 일은 클릭 만하면됩니다 공예품은 내 직사각형에 그 사진을 채울 것이고, 이제 채우기에있는 내용입니다

당신이 여기에서 볼 수 있습니다 그래서 당신이 일을 조롱 할 때 꽤 편리합니다 웹에서 이미지를 가져 오는 좋은 방법입니다 분명히 권한이 있는지 확인해야합니다 디자인에서 원하는 사진을 사용하는 방법 당신이 그들을 인터넷에 살고 있다면, 다행스럽게도 Unsplash는 크리 에이 티브 코 몬즈, 그래서 나는 그것을 많이 사용하는 경향이있다

나는 내 제목을 백인으로 만들거야 그래서 나는 모든 조각을 골라서 흰색으로 만듭니다 스케치 내에서 텍스트 스타일을 설정하고, 이것은 이것을 텍스트 스타일로 저장한다는 것을 의미합니다 그래서 나는 내려올 수 있었고, 이걸로 거의 사용하자 그래서 당신은 그것을보아야합니다

나는 그것을 여기에서 적용 할 수있다 그래서 제가 사용하는 경향이 있습니다 예를 들어 ConvertKit 웹 사이트에서 일할 때, 나는 세트 스타일을 많이 가지고있다 나는 이미 내가 사용해야한다는 것을 알고있다 나는이 버튼을 만들 것이라고 생각한다

나는 그것이 보라색이되기를 정말로 원한다 그래서 우린 사진을 바꿀거야 이것은 내가 당신과 공유 할 수있는 또 다른 좋은 팁을 가져옵니다 이 색상 표는 여기에 있습니다 이 전역 색상 및 문서 색상을 참조하십시오

처음 Sketch를 열면 Sketch가 열리지 않습니다 이 전역 색상은 ConvertKit 색상 팔레트입니다 그것은 내가 보통 일하는 것인데, 그래서 저는 그것들을 모든 새로운 스케치 파일에 나타나도록 설정했습니다 여기 내 YouTube 채널 브랜딩 색상, 그래서 저는이 문서에있는 바로 여기에 그들을 설정했습니다 나는 스케치 팔레트 (Scetch Palettes)라는 플러그인을 통해 그렇게했습니다

여기 팔레트를로드하면됩니다 색상 팔레트 관리에 대한 전체 비디오를 작성했습니다 하나를 만들고 파일을 저장하는 방법에 대해 설명합니다 그리고 다른 것들은 그래서 그것은 당신이 흔들릴 수 있도록 카드에 링크 될 것입니다 스케치는 벡터 기반 소프트웨어입니다

그러나 실제로 할 수있는 것에 얼마나 놀랐을까요? 그것에서 이미지 조작 그래서 나는이 짙은 보라색을 만들거야 그래서 저는 그 뒤에있는 사각형의 색깔을 바꾸고 있습니다 이제 이미지 자체에서 내가 할 수있는 일 색상 조정을 선택하고 채도를 낮추고, 그래서 이미지를 흑백으로 만들고, 이제 불투명도를 낮출 수 있습니다 보시다시피 그 뒤에있는 자주색입니다

내 레이아웃을 끄도록하면 더 잘 볼 수 있습니다 그게 컨트롤이고, 기억 해요 이것이 우리가 현재 향하고있는 것입니다 그 간격은 약간 벗어 났지, 그렇지? 그걸 정리 해보자 그리고 여기에 간격에 관한 약간의 비밀이 있습니다

나는 Sketch에서 완벽하게 그것을 얻는 것을 결코 성가 시게하지 않는다 실제로 사람들은 종종 저에게 묻습니다 Sketch를 가져 와서 모든 코드를 내보낼 수 있다면 갑자기 웹 사이트가 생겼습니다 내가 아는 한, 그것이 작동하는 방식이 아닙니다 특정 항목의 CSS를 내보낼 수 있습니다

내가 그것을하는 것이 아니라, 그래서 나는 그것이 어떻게 작동하는지 완전히 모릅니다 그러나 스케치의 요지는 끝나지 않습니다 작동하는 웹 페이지로; 그것은 디자인 도구입니다 웹 페이지를 설계 한 다음 나중에 작성하십시오 그것을 구축하는 것에 대해 생각할 때입니다

뭔가를 찾고 있다면 그것은 단지 하나의 모든 일을합니다 어쩌면 당신은 Webflow, 그러나 나는 확실히 시작하는 것이 좋습니다 첫 페이지 디자인하기 네가 좀 더 자유로울 수 있다고 생각하기 때문에 사물을 움직이고 창의력을 발휘하십시오 정확히 어떻게 구축 될지 걱정하기 전에

좋아, 우린 그걸로 지금 떠날거야 그것은 어떤 종류의 헤더입니다 이 섹션에서는 여기에 내가 할 일이 무엇인지 생각해 보겠습니다 내 글꼴 몇 조각 가져와 됐어

이 벡터 가져 오기 작업이 완료되었습니다 내가 말하고 있었던, 클립 루트에서 숨기는 경향이있는 경우, 그래서 내가 그 j를 끌어 내면 저기, 우리는 그것을 봅니다 나는이 직사각형을 약간 편집 할 것이다 그래서 저는 아주 창백한 회색을 사용하고 모서리를 둥글게 할 것입니다 다시 정렬 도구 만 사용하면됩니다

그들을 중간에 앉히기 Sketch에서 베끼고 붙이기를위한 팁 이 블록에 여기에 정기적으로 붙여 넣으려고하면 명령 + v로 이동하면 보시다시피, 스타일은 그대로 유지됩니다 자동으로 같은 스타일을 유지하기 때문에 텍스트 블록이 이미 있었기 때문입니다 따라서 스타일을 적용하여 텍스트를 복사하려는 경우, 나는 + alt + shift + v 명령을 써야한다

많은 캐릭터들, 그러나 그것은 일을 끝내게합니다 좋아요 여기 사진을 넣고 싶습니다 위와 똑같은 치료법을 사용할 것입니다 그래서 이미지를 빨리 대체 할 수있는 팁을 보여 드리겠습니다

만약 내가이 블록을 여기 복사해서 가져 오면, 우리는 그 회색 상자를 제거 할 것입니다 내가 이걸 줄이면 내가 할거야 그래서 그것은 실제로 당신을 화면에 보여줄 것입니다, 거기에 우리는갑니다, 이동 이미지 바꾸기, 거기에 우리가 간다 이제 그 이미지가 다른 이미지가 있었던 장소에 있습니다 그리고 그것은 내가 가지고있는 것과 똑같은 스타일링을 유지합니다

정말 편리합니다 분명히, 나는 아마 나의 진짜 글꼴을 더 사용할 것이다 이 디자인 내에서,하지만 지금은, 실제로는 제대로 존재하지 않습니다 그래서 저는 대신 다른 글꼴을 사용하고 있습니다 봐, 난 그냥 그것을 집어서 레이어를 정리 해요

그것을 주변에서 움직인다 당신은이 Move Forward / Move Backward를 가지고 갈 수도 있고, 그러나 나는 그들을 움직이는 것이 더 쉽다는 것을 안다 보시다시피, 저는 제가가는 것처럼 레이어의 이름을 지정하지 않습니다 많은 사람들이 확실히 물건을 쉽게 찾을 수 있기 때문에 솔직히 말해서, 내가 뭔가를 가지고 일하기를 원할 때, 나는 그것을 클릭하기 만하면 알 수있다 그것은 어떤 계층인가? 그러나 네, 만약 당신이 더 조직되기를 원한다면, 레이어 이름을 지정하는 것이 좋습니다

내가 만든 버튼을 복사 할거야 그것을이 그룹들로 가져와라 좋아, 이제 내가이 페이지의 맨 아래에있다 그리고 저는 아마도 버튼이 자주색이되기를 바라고 있습니다 바닥 글이 보라색이 아니길 바래요

왜냐하면 나는 이것들이 가장 눈길을 끄는 링크처럼 보이기를 원하기 때문에, 당신이 클릭하기를 바라는 것들, 그래서 저는 이것을 아마 검은 색으로 바꿀 것입니다 우리는 거기에 갈 버튼이 훨씬 더 돋보이는 것 같지 않니? 이 박스들은 여기 모서리를 둥글게하고 싶다 버튼과 일치하지만 둥근 싶지 않아 당신이 볼 수 있기 때문에 모퉁이의 모든, 이 두 사람이 합류했습니다

예를 들어,이 모든 것에 5 픽셀 반경을 넣으면, 나는이 이상한 노치를 여기에서 얻을 것이다 나는 그것을 원하지 않는다 그래서 그 대신에, 내가 뭘 할거야 이 직사각형을 더블 클릭하십시오 이 작은 앵커 포인트가 어떻게 생겨나는지 알겠습니까? 나는 교대를 잡고 그 세 명 모두를 클릭 할 것이다

나는 둥글게되고 싶다 그런 다음 5 픽셀을 입력합니다 클릭하면 클릭 수를 볼 수 있습니다 그 모서리는 둥글고, 이것도 똑같이있어 그것은 내가 원했던 바로 그 것이다

그리고이 한 모퉁이에 대해서도 똑같이 할 것입니다 이 상자와이 두 모서리에 이 세 가지는 내가 제공하는 주요 패키지입니다 내 폰트 용 그래서 나는 어떤 아이콘을 가지고 싶다 나는 생각한다

그들을 대표합니다 제 폰트의 경우, 실제 폰트 조각을 얻습니다 이건 내가 여분의 벡터를 제공 할거라고 생각해 그것으로, 당신의 디자인에 도움이 될 것입니다 그리고 나는 그들을 아직 만들지 않았습니다, 그래서 예로서, 나는 단지 가지고 간다

나는이 사람을 여기에서 추측하고 그것을 한쪽으로 돌릴 것이다 그리고 나는 이것을 여기에서 사용하고 작은 아이콘을 가정 할 것이다 둘 사이에, 그래서 나는 그것이 윤곽선이되고 싶다 그래서 내가 할 수있는 일은 그것을 오른쪽 클릭하는 것입니다 윤곽선으로 변환하고 거기로 이동하십시오

이제 그것은 모양입니다 이 마지막 도구는 명사 프로젝트라는 도구를 사용할 것입니다 명사 프로젝트는 아이콘을 갈 수있는 좋은 장소입니다 나는 그들과 이야기했다 그래서 여기에이 데스크탑 Mac 앱이 있습니다

나는 단지 뭔가를 찾고 그것을 조사 할 수 있습니다 클릭 만하면 Sketch로 드래그 할 수 있습니다 그리고 지금 그것은 벡터입니다 그러나 그들은 또한 웹 버전을 가지고있다 당신이 지불하지 않고 아이콘을 다운로드 할 수있는 곳, 당신은 디자이너에게 크레딧을 주어야합니다

여기에 이걸 추가하는 아이디어 이 패키지를 사용하면, 너는 물건을 더 얻을거야 그래서 상자가 더 크고, 그것이 더 많은 아이콘이있는 이유입니다 왜 그것이 더 높은 가격인지 사람들에게 설명 할 것입니다 가격에 관해서는, 나는 아직 내가 무엇을 청구하는지 모르겠다

에 자리 표시자를 추가하겠습니다 그리고 나는 가격을 자주색으로 만들거야 왜냐하면 그것은 그들의 마음 속에서 연결되기 때문입니다 지금 구매를 클릭하면 그들은 그 가격을 지불 할 것입니다 헤더가 있다는 것을 알 수 있습니다

슈퍼 눈길을 끄는 이미지와 멋진 큰 버튼이 있습니다 버튼이 너무 커서 정직하지 못할 수도 있습니다 하지만 이봐, 지금은 괜찮아 그리고 나는 그 물건에 관한 텍스트 블록을 가지고있다 몇 가지 추가 정보와 정보가 있습니다

그런 다음 부제목이 있습니다 다른 꾸러미에 대해 말할 것 인, 당신이 얻을 수있는 것 그리고 나는 여기에 나의 패키지를 가지고있다 마지막으로 내가하고 싶은 일은 그 스케이트 보드 이미지를 만드는 것입니다 백그라운드에서 조금 더 서서, 그래서 나는이 상자들을 선택할거야

제 패널을 다시 가져와 내가하는 일을 볼 수있게하십시오 Sketch에서 전체 상자의 불투명도를 변경할 수있었습니다 자주색 경계선의 불투명도가 변경됩니다 나는 그 위에있다 또는 채우기의 불투명도를 변경할 수 있습니다

그래서 저는 그것들을 90 %, 아마도 80 % 만들 것입니다 가자 85 이제 우리는 그들 뒤에있는 스케이트 보드를 조금 더 볼 수 있습니다 오는 동안, 그리고 그 질감의 좀 더 가져온다 마지막으로 내가 추가하고 싶은 것은 그림자입니다

여기에 내 제목에, 그냥 배경에서 조금 더 돋보이게하는 것입니다 그림자 옵션을 틱하십시오 그런 다음 여기에서 그걸 가지고 놀 수 있습니다 나는 일반적으로 내 그림자가 바로 뒤에서 오는 것을 좋아한다 그리고 조금 더 흐려집니다

그리고 만약 내가 이것을 토글하면, 당신은 그것을 추가하는 것이 정말로 도움이된다는 것을 알 수 있습니다 그 텍스트를 좀더 앞으로 가져 와서 돋보이게하십시오 그래서 나는 여기에서도 같은 것을 할 수 있다고 생각합니다 그래서 우리는 그것을 가지고 있습니다 그것은 꽤 간단합니다

아마 내가 지금까지 디자인 한 것 중 가장 좋은 것은 아니지만, 하지만 디자인 팁을 얻는 데 도움이되기를 바랍니다 도중에 Sketch에서 방문 페이지를 디자인하는 방법을 살펴 보겠습니다 만약 질문이 있다면 이 방문 페이지 디자인 과정에 대해 의견 아래에 그들을 아래로 두십시오 나는 물건을 매우 빨리 지나친 것 같습니다

그리고 몇 가지 물건을 훑어 보았습니다 그러니 제발, 두려워하지 말고 물어보십시오 Sketch에 대한 더 많은 동영상을 계획 중입니다 앞으로도 마찬가지입니다 벡터 도구로 할 일을 많이 보여주고 싶습니다

스케치에서 모양 만들기, 아이콘 만들기, 모바일 대응 레이아웃 및 이와 유사한 작업과 관련하여, 그게 너에게 관심이 있다면, 의견 아래에서 아래로 알려주세요 이 비디오에 엄지 손가락을 올려주세요 이 튜토리얼은에 투표했다 내 Patreon에 가입 한 사람들이 그것은 정말로 흥미 롭다 그들은 Sketch에 관한 튜토리얼을보고 싶었습니다

방문 페이지를 디자인하는 방법을 알고 싶어했습니다 그래서 그것이 제가 한 이유입니다 나는 스케치 파일을 보낼거야 Learning by Doing의 모든 후원자에게 또는 디자인 팀 멘토링 계층 그것은 보상 중 하나이기 때문입니다 자산에 액세스 할 수 있습니다

내 동영상에서 만드는 다행히도 파일을 열면 도움이 될 것입니다 그것을 살펴보고 내가 어떻게 물건을 세우는 지 지켜보십시오 자신을 위해 무언가를 디자인하기위한 기초로 사용하십시오 당신이 원한다면; 나는 상관하지 않는다 당신이 아직 Patreon이 아니고 당신이 하나가되고 싶다면, 그 링크는 patreon

com/charlimarie입니다 또한, 통보 받기를 원한다면 이 글꼴이 결국 판매를 위해 생방송으로 갈 때, 앞으로이 비디오를보고 있다면, 누가 알 겠어, 아마 이미, 나도 몰라 그러나 charlimariecom/font로 가면, 거기에 등록하면 등록 할 수 있습니다 또는 그것이 미래라면, 글꼴은 이미 판매용으로있을 수 있습니다

좋아, 모두들 나와 고착 해줘서 고마워 이 의심 할 여지없이 긴 비디오를 통해 보시다시피 가볍게 크게 바뀌 었습니다 내가 얘기하고있는 동안, 여기는 영국에서 밤이되었습니다

알았어 나는 일하러 가서 일할거야 지켜 줘서 고마워 다음에 너를 볼거야 안녕

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으로 크기를 조정할 수 있습니다 그리고 나서 우리는 계속 진행할 수 있습니다 이것을 실제 대지로 옮기십시오

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