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)'와 같이 호출하면됩니다