도움말 - 글감 수집하기 (인용)

도움말 - 부분 리뷰 작성하기

스케치 앱 튜토리얼 4편 - (총 5편)


태블릿과 모바일 Artboard 만들기

안녕하세요, 너~무 오랬만에 올립니다.

이 튜토리얼 시리즈의 4 부에서는 이전에 만든 (Desktop) 디자인을 사용하고 태블릿 (iPad Portrait) 및 모바일 (iPhone 6 Portrait) 용 대지 만들기를 진행할 것입니다.

이제 우리는 멋진 플러그인 인 Sketch Constraints를 사용하여 모바일 용 Artboard를 만드는 과정을 단순화 할 수 있지만, Sketch의 장점과 Sketch에 대해 좀 더 배우기위하여. 수작업?! 으로 해봅시다.

기초를 공부하는 것은 정말 중요한 가치가있습니다!!! 

자! 우리는 기존의 Desktop Artboard 디자인을 준비했습니다. 이제 Tablet 및 Mobile 용 디자인을 만들어야합니다.

태블릿 Artboard 만들기

시작하겠습니다 ...

자, 새로운  Artboard (A)를 만들고 Inspector 패널에서 iPad Portrait를 선택하십시오

그런 다음 계속해서 충분한 height (8000px 으로 하세요)를 만드십시요. 작업이 끝난 후 (필요하지 않은 경우) 초과분을 다듬을 수 있습니다.

Quick note to make: 우리가 만들려는 Artboard  2개 (Tablet과 Mobile)는 세로 레이아웃(Portrait layout)으로되어 있습니다. 데스크톱 Artboard용으로 설정한 그리드 가이드를 사용할 필요가 없습니다. 이는 우리가 보유하고있는 그리드 시스템이 Tablet (Portrait) 및 그 이하에서 100 % 너비로 전환했기 때문입니다.

우리가 설정해야 할 것은 device 화면의 왼쪽과 오른쪽에 대한 margin 가이드이며, device 화면의 높이(height)에 대한 빠른 가이드에도 던져 넣을 수 있습니다 (Tablet Portrait의 경우에는 대략적으로 1024px )로 스크롤하기 전에 기기 화면에 표시되는 디자인을 대략적으로 시각화 할 수 있습니다.


단축키 Ctrl + R을 사용하여 Rulers를 불러 와서 우리의 artboard에 몇 가지 가이드(guides)를 추가 할 수 있습니다.

앞서 언급했듯이 Sketch는 무한한 캔버스를 가지고 있기 때문에이 Rulers는 고정되어 있지 않으므로 자신의 원점을 설정할 수 있습니다.


이제 Rulers의 아무 곳이나 클릭하여 안내선을 추가 할 수 있으며 눈금자가 표시되어있는 동안에는 계속 보입니다. (단축키 Ctrl + R 기억하세요!).

가이드를 이동하려면 ruler 안쪽으로 그 가이드를 가져와야하며, 숫자를 기록한 상태에서 자유롭게 이동할 수 있으므로 원하는 위치에 정확하게 배치 할 수 있습니다.

또한 ruler 안쪽을 잡아 당겨서 가이드를 쉽게 제거 할 수 있으며 캔버스에서 왼쪽 또는 오른쪽으로 드래그하여 가이드를 쉽게 제거 할 수 있습니다.

이제 Tablet artboard에 3 개의 가이드를 추가하겠습니다.

첫 번째 가이드는 Artboard  왼쪽에서 20px, 다른 하나는 오른쪽에서 20px입니다. 그런 다음 세번째는 스크린 샷처럼 상단에서 1024px아래쪽에  ...

왼쪽 및 오른쪽 안내선의 경우 당신의 모든 요소가 튜토리얼 전반에 걸쳐 잘 맞을 것입니다.

지금은 태블릿 및 모바일 artboard에서 작업하면서 여러 가지 작업을 할것입니다. 데스크톱 artboard에서 요소를 복사하고 붙여 넣은 다음 수정하여 이전에 만든 심볼을 사용하고 수정합니다. 또한 새로운 레이아웃에 더 잘 부합되도록 특정 디자인 요소를 제거합니다.

이해 되셨나요? 그렇지 않겠죠?  단계별로 차근차근 보여 드리겠습니다.

우리의 태블릿 Artboard로 돌아 가기 ...

그래서 우리는 전에 데스크탑 디자인했던 것처럼 artboard에 작업 할 것 입니다.

  • Header [머리글]
  • About Section [섹션 정보]
  • Portfolio Section [포트폴리오 섹션]
  • Blog Section [블로그 섹션]
  • Contact Section [섹션 문의]
  • Footer [보행인]

그럼 header를 작업해볼까요?

좋아, 데스크톱 artboard에서 header 이미지를 복사하고 Tablet artboard에 오버레이합니다.

물론 우리 새 artboard의 width는 768px 밖에되지 않으므로 이미지를 조정하고 오버레이를 약간 조정해야합니다.

먼저, 오버레이와 배경 이미지 레이어를 모두 선택하여 X와 Y 축에서 둘 다 0에 위치해야합니다.

그런 다음 두 요소의 크기를 조정하여 Tablet artboard에 올바르게 표시 할 수 있습니다.

다시 두 레이어를 선택하고 자물쇠 아이콘을 켜서 비율을 유지시키고 너비(width)를 768px (Tablet artboard)로 변경하십시오.

이제는 더 작은 화면 크기로 작업하기 때문에 디자인에서 없어져야 할 특정 요소들이 있습니다.

그리고 inspector 패널에서 오버레이의 10px border를 제거하십시오.

우리는 지금 태블릿 Artboard에 있는 다음과 같은 것들을 갖춰야합니다 ...

이제 우리는 로고와 네비게이션을 위치시킬 것입니다.

다시 한 번 logo, navigation 및 divider을  Desktop Artboard에서 Tablet Artboard로 복사하십시오.

그런 다음 모든 항목을 선택(all selected)하고 다음 설정을 사용하여 artboard에 올바르게 맞춥니다 ...

이제 방금 붙여 넣은 요소 중 일부에 대해 약간의 크기 조정을 수행 할 것입니다.

로고 이미지를 선택한 다음 크기를 줄이면서 (자물쇠를 켠 채로 유지) 133px 너비(Width)로 설정하십시오.

그리고 divider line도 길이를 728 px로 줄이십시오.

내비게이션으로 이동합니다.

우리는 네비게이션을 데스크톱 버전과 비슷하게 유지하고 텍스트 크기를 줄이고 약간 간격을 둡니다. 나중에 Mobile Artboard에서 햄버거 아이콘을 만들 예정 입니다.

모든 navigation 링크를 선택하고 point 크기를 12로 줄인 다음 각 링크 사이의 간격을 30 픽셀로 조이십시오.

그런 다음 내비게이션 링크를 가이드에 맞춰 artboard의 오른쪽 가장자리에서 20 픽셀 떨어진 위치에 놓습니다.

Image logo와 모든 navigation 링크를 선택한 다음 Inspector의 정렬 옵션에서Align Bottom을 선택하십시오.

이제 다음과 같은 화면을 만들었습니다 ...

이제 큰 머리글 메시지에 대해 'We are design personified.'

Toolbar의 Styled Text option을 사용하여 Header Title Accent (We are design)와 Header Title (Personified)을 입력하십시오.

지금 그만! 아니, MC해머가 아니야. 잠시만 멈춰!

우리가 방금 적용한 Text에는 Text Style이 붙어 있으므로, 우리가 진행하고 조정을 시작하면 (우리의 타블렛 아트 보드에 맞춰 짐) 기존의 데스크탑 아트 보드에 복제 할 것입니다. 으악!!!!

각 텍스트 레이어들을 선택한 다음 Inspector panel의 선택 메뉴에서 텍스트 스타일 없음을 선택하여 두 텍스트 레이어 모두에서 텍스트 스타일을 제거해 봅시다.

이제 우리는 크기 등을 조정할 수 있고 새로운 텍스트 스타일을 만들 수 있습니다.

'We are design'텍스트에 다음 설정을 추가하십시오 ...

그리고 'Personified'텍스트의 경우 다음과 같이 입력하십시오 (Type> Uppercase를 기억하십시오) ...

그리고 각 텍스트 레이어에 대해 새로운 텍스트 스타일을 만듭니다. 아마도 'Header Title Accent (Tablet)'및 'Header Title (Tablet)'과 같은 것으로 부를 수 있습니다.

이제 서로 다른 artboard에 대해 독립적으로 작동하는 별도의 텍스트 스타일이 있으며, 태블릿 디자인 전반에서 다시 할 것이며, 나중에 모바일 아트 보드에서 작업 할 때도 마찬가지입니다.

About section을 만들어 보겠습니다.

다시 말하지만, 머리글 (데스크톱 아트 보드 용으로 만든 텍스트 스타일을 사용하기를 바랍니다)과 마찬가지로 Section Title (Time to say)와 Section Title Accent (Hello)를 입력하십시오.

그리고 우리의 머리글처럼 Text Styles (No Text Style)을 제거한 다음 2 개의 텍스트 레이어에 대해 다음 설정을 만듭니다.

그리고 다음과 같이 2 개의 새로운 Text Styles을 만듭니다.

소개 텍스트 블록은 데스크탑 artboard에서 텍스트 레이어를 복사하여 붙여 넣기 만하면됩니다. 다시. 텍스트 스타일을 제거한 후 다음 설정을 해당 텍스트 레이어에 추가하십시오.

그런 다음 새 Text Style을 만들고 새 label을 지정합니다 (예 : Section Paragraph (Tablet).

이제 복사하여 Megaphone icon, 데스크톱에서 태블릿 artboard로 붙여 넣은 다음 크기 (200 x 210px)를 줄이고 텍스트와 정렬하십시오.

마지막으로,이 섹션을 끝내기 위해 거기에 dividers 중 하나를 가져와 봅시다.

이제 Desktop artboard 용으로 만든 Symbol divider을 위치시킵니다.

예~.  잘 어울린다!

아니면 아닐 수도 있구.... ㅠㅠ

그것을 수정합시다.

선택한 Tablet artboard에 방금 배치 한 Symbol을 사용하면 (즉 데스크탑 디자인의 Symbol에 영향을 미치지 않습니다.) Inspector의 선택 메뉴에서 Duplicate Symbol을 선택하십시오.

그런 다음이 새 Symbol의 이름을 바꾸십시오. 예: Section Divider (Tablet).

이제 서로 독립적으로 작동하는 2 개의 Symbols, Desktop용 1 개, 타블렛 디자인영 1 개가 있습니다.

신사 숙녀 여러분, Sketch에서 매우 편리한 Scale tool를 소개합니다.

이제 아트 보드의 너비 (양쪽 여백 2opx margin을 제외한 양)가 728px이므로 Symbol를 선택한 상태에서 Toolbar의 Scale icon을 클릭하고 너비 필드에서 728px를 선택합니다 (다른 모든 필드는 이 입력), 그리고 얍! 비례하여 모든 것이 적용됩니다.

이제 좋아 보이네 ...

포트폴리오 섹션입니다! 제가이 파트의 앞부분에서 설명한 지침 중 일부를 따르면서, 당신이 그것을 통해 작업 할 수있을 거라고 생각합니다.

사실, 당신에게 젊은 Skywalker에 대한 믿음이 너무 많아서 첫 번째 포트폴리오 item을 설정하는 방법을 보여줄 것이고 나머지는 함께 실행할 수 있습니다. 스케치가 너와 함께하기를 ...

따라서 이전에 작성한 2 개의 새로운 Text Styles을 화면에 생성하고 이에 따라 텍스트를 변경하십시오.

이제 우리의 포트폴리오 프로젝트 items에 있습니다..

우리가 계속 진행하기 전에 간단히 여기에서 간단히 언급 좀 하겠습니다.

데스크톱에서 태블릿 artboard로 이미지를 가져올 수있는 몇 가지 방법이 있습니다. 이전 튜토리얼 (Unsplash plugin etc ...)에서 내가 보여준 것들 중 일부는 현재의 이미지가 비트 맵이라고 가정 할 것이므로 간단한 복사 및 붙여 넣기를 진행하고 Scale tool 로 손봐줍니다.

그래서 당신은 데스크탑 아트 보드에 현재 다음과 같은 것이 작성되어 있어야합니다...

이 튜토리얼에서는 좀 더 빠르게 진행합니다. 우리는 Tablet artboard에 단 4 개의 포트폴리오 아이템을 떨어 뜨릴 것입니다.

또한 모든 항목에 텍스트가 표시되도록 (hover 없이) Tablet / Mobile 사용자를 위해 디자인을 약간 조정하고이를 보완하기 위해 어두운 오버레이를 추가하고 일부 호버 요소를 제거합니다. 왜냐하면 우리는 터치 장치를 알고, 마우스를 가져 가면 항상 적용되지는 않기 때문입니다.

먼저,  첫 번째 프로젝트 이미지를 copy & paste 하여  넣은 다음 Scale 도구를 사용하여 너비를 728px로 늘려 타블렛 artboard에 적절하게 맞 춥니 다.

참고 사항 : 이전에 본 것처럼 Inspector 패널을 통해 이미지 크기를 조정할 수 있습니다. 그러나 나는 그런 식으로 수시로 정확하게 숫자를 반올림하지는 않는다는 것을 알게되고, 여기에서 .5px와 .5px를 제거하기 위해 숫자를 수동으로 조정해야합니다. Scale은 프로세스 속도를 높이고 매 순간 실행됩니다.

이제 우리의 이미지를 덮을 Rectangle (R)을 그린 다음 이전 튜토리얼에서 만든 Shared Style을 사용하여 Thumb Overlay를 추가하십시오.

And now drop in the 2 Text Styles we created for the Desktop artboard.
이제 데스크톱 artboard 용으로 만든 2 개의 Text Styles을 사용하십시오.

하나는 Category Title 용이고 다른 하나는 Client Name 용입니다.


이전처럼 태블릿 디자인에서 너무 작아 보였으므로 앞에서와 마찬가지로 두 텍스트 레이어에서 Text Styles (No Text Style) 을 먼저 제거하므로 변경 사항이 데스크톱 디자인에 영향을 미치지 않습니다.

그리고, 다음 설정을 추가하십시오 ...

그런 다음, 새 Text Styles을 작성하고 이에 따라 label을 지정하십시오 (예 : Category Title (Tablet) 및 Client Name (Tablet).

모든 것을 잘 정렬하세요! 가자~~!!!!

자아아아아~. 정신을 다시한번 차려야 할 때입니다!

Text StylesShared Styles이 이미 있으므로 기억해 두십시오.그리고 이것을 Zip파일 화 할수있습니다.

자, 위에서 보았던 단계에 따라 방금 만든 프로젝트 항목 아래에 3 개의 프로젝트 항목을 추가로 만들었습니다.

다시 오신 것을 환영합니다!!!!

그래서 우리는 다음과 같은 것이 만들어져 있어야합니다 ...^^

이 섹션을 마치기 위해 우리는 두 개의 Symbols을 사용합니다. 이전 튜토리얼에서 만든 button symbol과 이전 section divider.

Blog section(블로그 섹션)의 경우 section heading의 2 가지 Text Styles을 먼저 생성 한 다음 그에 따라 텍스트를 바꿉니다.

그리고 우리의 포스트 발췌 부분을 위해, 우리는 project items을 더 일찍 수정 한 것과 비슷한 방법을 사용할 것입니다.

따라서 첫 번째 블로그 발췌 부분에서 Desktop Design의 이미지를 복사하여 붙여 넣은 다음 Scale tool을 사용하여 이미지 폭(width)을 728px로 줄이십시오.

그런 다음 이미지 상단에 Rectangle (R)을 그려서 Thumb Overlay 스타일을 적용합니다.

우리의 포스트 발췌 일자와 제목에 대해서는 데스크톱 artboard용으로 만든 2 개의 Text Styles (이것들은 마우스 오버 스타일이었습니다)에 포함됩니다.

해당 Text Styles을 제거하고 다음 설정을 추가하고 이에 따라 label을 지정한 다음 2 개의 새 스타일을 만듭니다.

이제 나가서, 이 섹션에 3 개의 게시물 발췌록을 추가하고button Symbol 및 divider 을 드롭하면 잠시 뒤에 다시 보게 될 것입니다.


좋다!!  너 돌아 왔어.

Contact section에서 우리는 레이아웃을 상당히 조정하여 미학적, 기능적으로  Tablet (Portrait) 스크린에 더 적합하게 만들 것입니다.

다음과 같은 것이 우리가 목표로하는 것입니다...

먼저, section title과 contact details을 artboard의 왼쪽에 추가 할 수 있습니다.

Contact 세부 정보 텍스트에 대해 다음 설정을 사용하십시오...

그런 다음 데스크톱 아트 보드에서 contact 양식을 복사하여 붙여 넣은 다음 연락처 세부 정보 옆에 배치하십시오.

지도를 동일하게 처리하고 Scale을 사용하여 768px 너비로 조정하십시오.지도는 artboard의  전체 너비(full-width)입니다.

그런 다음 마지막으로 핀 (지도 아이콘) 아이콘을 복사하여 붙여넣고 아이콘과 그림자를 선택한 상태에서 40px 너비로 크기를 조정 한 다음지도에 배치합니다.

자! 이제 Footer로 타블렛 아트 보드를 마무리합시다!

이제 더 나가기 전에.

바탕 화면 artboard에서 전체 footer (background, social icons, copyright text, etc…)를 선택하고 Symbol로 변환하고 footer(데스크탑)과 같은 label을 붙입니다.

이제 Tablet artboard로 돌아가 방금 만든 새 Symbol을 삽입하십시오.

물론 당연히 우리 artboard에 어울리지 않을 것입니다.

그래서 우리는 약간의 수정을 통하여 팁 - 탑을 찾아야합니다!

참고 사항 : 이 전체 요소에서 Scale tool를 사용할 수는 있지만, 약간의 조정은 여기에서 완벽하게 작동 할 것이며 아이콘 크기와 간격을 조금 더 제어 할 수 있습니다.

먼저 Symbol (레이어 목록 또는 아트 보드의 요소 자체)에서 마우스 오른쪽 버튼을 클릭하고 Detach from Symbol를 선택합니다.

그런 다음 계속 진행하고 어두운 배경의 너비를 줄이면 (그 레이어 만 선택됨) 768px 너비로 유지되고 높이는 200px로 유지됩니다.

그런 다음 모든 아이콘이 태블릿 footer에 잘 맞을 수 있도록 소셜 아이콘의 간격을 좁 힙니다.

이런걸 목표로 하고 있습니다.

모든 내용이 멋지게 보이고 선택한 모든 footer 요소를 사용하여 Symbol로 변환하고 footer (태블릿)과 같은 label을 지정합니다.

우리가 타블렛 디자인을 끝내기 전에.

artboard의 아래쪽에있는 초과 픽셀을 제거합니다.

제 경우에는 906px였습니다. 어떻게 된거야?

따라서 다시 약간의 수학을 사용하면 (그리고 레이어 목록에서 선택된 artboard) 곧 해결할 수 있습니다 ...

그리고 우리는 모두 타블렛 아트 보드 용으로 완성되었습니다. 잘 하셨어요!

모바일 아트 보드 만들기

태블릿 디자인에서와 마찬가지로 모바일 아트 보드에서 특정 요소를 제거하고 navigation을 '모바일 친화적'으로 바꿀 것입니다.

또한 기존의 Symbols, Text Styles 등을 사용하여 스타일을 제거하고 모바일 아트 보드를 조정 한 다음 다시 새 assets에 패키징하는 과정을 반복합니다.

계속 진행하여 Inspector에서 iPhone 6 option을 선택하여 새로운 Artboard (A)를 만듭니다.

Artboard의 높이를 약 5000 픽셀로 높이십시오.

그리고 Rulers (Ctrl + R)를 사용하여 artboard에 3 개의 안내선을 추가하십시오.

좌측에서 20px, 우측에서 20px, 상단에서 667px.

오버레이를 가로 질러 복사하고 태블릿 artboard에서 header image를 가져온 다음  Scale tool를 사용하여 너비를 375 픽셀로 줄인 다음 artboard에 맞 춥니다.


그런 다음 스타일이 지정된 텍스트에서 Tablet artboard 용으로 만든 Header Title Accent 및 Header Title 스타일을 가져옵니다.

Inspector 패널에서 두 레이어의 Text Styles (No Text Style)을 제거하십시오 (따라서 우리는 타블렛 디자인의 스타일에 영향을주지 않습니다).

이제 각 텍스트 레이어에 대해 다음 설정을 추가하십시오.

이 2 개의 텍스트 레이어에서 Shadows을 제거하려면 메모를 만드십시오. 미적 관점에서 볼 때 Shadows는 데스크톱 및 태블릿 기기에서 효과적이지만 모바일 화면 크기로 이동할 때 약간 혼란스럽고 불필요합니다.

그리고 2 개의 새로운 Text Styles을 만듭니다. 'Header Title Accent (모바일)'및 'Header Title (모바일)'과 같은 항목에 Label을 지정합니다.

네비게이션 바의 경우 Rectangle tool를 사용하여 다음 설정으로 레이어를 그린 다음 Tablet artboard에서 사용한 로고를 복사하여 붙여 넣습니다.

이제 Mobile navigation icon을 추가해 보겠습니다. 맛있는! 햄버거 시간이야. 

IconJar 앱을 다시 시작한 다음 Menu 아이콘을 드래그 앤 드롭하십시오.

아이콘 색상을 조정 한 다음 로고와 메뉴 아이콘을 수직으로 맞춥니다.

그리고 우리는 모두 모바일 header를 완료하였습니다.

About section으로 이동하여, 심플하게 유지합니다. 메가폰 아이콘을 제거합니다.

또한, 우리는 가장 기본적인 section divider을 제거 할 것입니다 ... 라인, 심플한 (심플한 아이콘이 필요합니다).

이제 Tablet artboard 용으로 만든 2 개의 Text Styles에서 section title을 생성합니다. 위해 각 텍스트 레이어 (No Text Style)에서 스타일을 제거한 후 다음 설정을 추가하십시오.

그런 다음 2 개의 새로운 Text Styles을 만들고 이에 맞게 label을 지정하십시오.

소개 텍스트를 위해, 나는 당신을 앞당기고 스스로 해결하도록 할 것입니다.

이 튜토리얼에서 언급 한 단계를 따르면이 문제를 해결할 수 있습니다. 너 지금 Text Style의 슈퍼 스타야!

다음과 같은 것을 목표로 삼으십시오.

이제 section divider에 대해 간단히 설명 하겠지만 색상이있는 간단한 1px 행으로 되돌려 놓았습니다. 예. 간단합니다.

Line tool (L)로 그 작업을 수행하고 Hex (#) value of A2CB75값을 지정하십시오.

이제 이것은 조금 지나치게 잔인한 것처럼 보입니다 (그리고 Shared Style을 사용하여 쉽게 1px 라인을 그릴 수 있습니다). 그리고, 이것을 Symbol으로 만드십시오.

Portfolio section 으로 옮깁니다.

About section에 대해 작성한 Text Styles 을 생성하고 적절하게 단어를 변경하십시오.

포트폴리오 섹션의 프로젝트 항목의 경우, 진행하고 첫 번째 프로젝트의 오버레이 및 이미지를 복사하여 붙여 넣습니다 (Tablet artboard에서).

그런 다음 이전에했던 것처럼 Scale 도구를 사용하여 두 요소 (오버레이, 이미지)의 너비를 335 픽셀로 줄이면 가이드 사이에 잘 ​​맞습니다.

그런 다음 해당 가이드 내에서 올바르게 정렬하십시오.

이제 Category 및 Client Name에 대해 Tablet artboard 용으로 만든 Text Styles을 사용할 수 있습니다.

그리고 이전에했던 것처럼, 일단 artboard 위에 생성 하면 styles (No Text Style)을 제거하고 아래에서 변경 한 다음 2 개의 new styles을 만듭니다.Category Title (Mobile)및 Client Name (Mobile).

이제 끝났어.

Text Styles Shared Styles이 이미 갖추어져 있으므로 Tablet artboard와 마찬가지로이 작업을 수행 할 수 있습니다.

자, 방금 만든 프로젝트 아래에 앉아서 더 많은 프로젝트 항목을 3 개 만들면 곧 다시 보게 될 것입니다


돌아 오신 것을 환영합니다.

이제 다음과 같은 것을 준비해야합니다 ...

button와 divider Symbols를 빠르게 놓으면 포트폴리오 섹션이 모두 포장됩니다.

일 잘 끝났어!

블로그 섹션에서 먼저 title Text Styles을 생성하고 단어를 변경하면 섹션 제목이 그대로 유지됩니다.

이제 우리는 포스트 발췌- post excerpts 부분으로 넘어갈 것입니다.

우리는 모바일 아트 보드에서 포스트 발췌 이미지를 조금 다르게 다루어야 할 것입니다.

데스크톱에서와 마찬가지로  타블렛 artboard로 복사하고 이미지 전체를 복사하여 붙여 넣은 다음 오버레이 한 다음 Scale tool를 사용할 수 있습니다.

그러나 우리는 발췌 이미지에 가로 방향 포맷을 사용하기 때문에 Scale tool를 적용하면 다음과 같은 결과가 발생합니다 ...

좁은 화면 크기 (iPhone 6 Portrait)이므로 이미지 크기를 줄이면 이미지의 높이가 너무 짧아서 텍스트를 배치해야합니다.

이제, 이 문제를 해결할 수있는 여러 가지 방법이 있지만, 그중 한 가지 방법을 보여줄 것입니다.이 과정에서 Sketch의 또 다른 편리한 기능을 보여줄 수 있습니다.

Sketch를 사용하는 사람들에게는 항상 새로운 것이 있습니다!

따라서 첫 번째 블로그 발췌본의 Tablet artboard, 오버레이 및 이미지에서 복사하여 붙여 넣기 ...

두 레이어를 왼쪽 가이드에 맞춥니다.

그런 다음 오버레이 레이어를 잡아서 width를 줄이므로 가이드 안쪽에 위치 시킵니다 ( 높이가 줄어들지 않을경우, Inspector에서 자물쇠가 열려 있는지 확인합니다).

이제 이미지 레이어를 선택하여 가이드 사이에 보이는 이미지 부분에 만족할 때까지 가로 방향으로 이동하십시오.

그런 다음 이미지 레이어를 두 번 클릭하면 Bitmap Editing tools가 Inspector panel에 나타납니다.

Selection tool를 사용하여 안내선 사이의 이미지 영역을 선택하십시오.

Crop 도구를 클릭하여 선택한 영역으로 이미지를 자릅니다.

편집이 끝나면 이미지 바깥 쪽 아무 곳이나 클릭하고 Finish Editing을 눌러 종료하십시오.

앞에서 언급했듯이이 문제를 해결하는 방법은 여러 가지가 있지만 간단히 Bitmap Editing tools의 기능을 보여주는 방법입니다.

post date 및 post title의 경우 태블릿 디자인 용으로 만든 Styled Text 를 드롭합니다.

text styles을 제거하십시오.

그런 다음 텍스트 레이어에 대해 다음 설정을 추가하십시오.

Label을 지정한 다음 2 개의 새 Text Styles.로 다시 패키지하십시오.

자, 앞서 살펴본 방법 중 몇 가지를 따르면서 방금 만든 프로젝트 항목 아래에 3 가지 프로젝트 항목을 추가로 만들 수 있습니다.

그리고 당신은 다음과 같은 것으로 끝내야합니다 ...

그런 다음이 섹션을 완성하기 위해 button과 divider  Symbol을 놓습니다.

Contact section으로 옮깁니다.

이 화면 크기로 UX를 향상시키기 위해 contact form을 약간 변경하면 간단합니다.

먼저 title을 입력 한 다음 contact details를 입력하십시오 (모바일 화면 크기에 맞게 조정).

Contact form을 통해 다음을 목표로 삼을 것입니다 ...

앞에서 언급 한 것처럼 contact form을 작은 화면 크기로 볼 때 UX (User Experience)를 향상시키기 위해 form fields의 왼쪽에있는 rounded icons을 놓고 check 및 cross icons을 사용합니다 그 자리에서 사용자는 여전히 양식과 상호 작용할 때 from으로부터 유사한 피드백을받을 수 있습니다.

따라서 타블렛 아트 보드의 contact form을 복사하여 붙여 넣기하십시오.

Rounded icons을 제거한 다음text fields width를 줄이고 textarea을 370px에서 335px로 줄이면 가이드 사이에 잘 ​​맞습니다.

예제를 문자 나 픽셀로 따라 가려면 text fields의 색상과 labels을 가지고 놀 수 있습니다.

IconJar에서 Check, and Cross 아이콘을 검색하십시오.

Artboard에 끌어다 놓고 원하는대로 색상을 조정 한 다음 fields 안에 올바르게 정렬하십시오.

이 섹션을 완성하기 위해 지도 및 핀 아이콘을 추가하고 비트 맵 편집 도구 (Crop)와 Scale tool를 함께 사용합니다.

Tablet artboard에 지도와 핀아이콘을 복사하여 붙여넣습니다.

참고 사항 : 우리는 한 장의 artboard에서 다른 artboard로 모든 artboard를 하나의 창에 붙여 넣기 만하면됩니다.하지만 다음 프로젝트에서 시작할 때 Symbol을 만들 때, 프로세스를 훨씬 더 구체화 할 것입니다. 그러나 당신은 이미 그것을 알고있었습니다!

먼저 맵의 높이를 250px (자물쇠를 닫은 상태로 유지)로 낮추고 대지에서 올바르게 배치 한 다음 Bitmap Editing tools로 아트 보드에 맞게 자릅니다.

핀 아이콘 (map marker)의 경우 icon과 drop shadow가 모두 선택되어 있는지 확인한 다음 크기 Scale tool를 사용하여 너비를 30 픽셀로 줄인 다음지도에 올바르게 배치합니다.

Contact section은 모두 포장되어 있습니다.

지금은 footer 뿐이며 모두 완료되었습니다!

우리는 다음을 목표로하고 있습니다 ...

Tablet artboard에 대해 만든 footer Symbol를 놓습니다.

Symbol을 선택하고 Inspector의 선택 메뉴에서 Duplicate Symbol을 선택하십시오.

그리고이 새로운 Symbol로 이름을 바꾸십시오.
예: Footer (Mobile).

어두운 배경 레이어의 크기를 375px (너비) 및 350px (높이)로 조정합니다.

그런 다음 소셜 링크를 세로로 정렬하고 copyright 텍스트의 너비를 줄여 artboard 내에서 올바르게 배치합니다.

이전에 제가 보여준 것처럼, artboard의 아래쪽에있는 과도한 픽셀을 잘라내어 주면됩니다.

이어질 튜토리얼 5 부에서는 ...

이 튜토리얼 시리즈의 마지막 부분에서는 멋진 Zeplin 앱을 사용하여 디자인을 쉽게 준비하고 개발자에게 전달할 수있는 방법을 보여 드리겠습니다.

이 글을 읽어 주셔서 감사합니다.
Marc

이 글은 Marc Andrew @ Themmed의 Sketch App Tutorial Series: Part 1 of 5.을 번역한 글입니다. 전문 번역가가 아니라 오역이 있을 수 있으니 참고 바랍니다. 원문은 아래에서 확인 하실 수 있습니다.

번역 도움 : 

@오역 유발자 ‍ ‍ 님께 감사합니다.



리뷰