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

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

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

소개

웹 디자인을 시작하려는 사람, 스케치 앱(Sketch app)을 처음 사용하는 사람, 포토샵 (또는 유사한 프로그램) 에서 다른 프로그램으로 변경을 망설이는 사람, 또한 UI 디자인을 그저 개발의 일부분으로 생각하는 개발자등 이런분들에게 쉽게 설명해놓은 이 튜토리얼을 통하여 어떻게 스케치 앱(Sketch app) 이 동작하고, 어떻게 desktop, tablet 과 mobile에서 멋진 디자인을 만들어 낼 수 있는지 간략하게 이해할 수 있을 것 입니다.

스케치 앱 튜토리얼 1편 링크입니다.




준비

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

자! 그럼. 2편 (총5편)에서 좀 더 진도를 나가 보도록하겠습니다. (원래 계획은 총 4편으로 제작을 하려고 하였으나, 좀 더 자세히 다루기 위해 총 5편으로 제작하기로하였습니다.)

우선 확인을 해보자면, 바라건대, 당신은 다음 아래와 같은 요소들이 설치되어 있습니다 ...

그 다음은 Sketch 내부 설정 입니다...

  • Layout Guides
  • Artboard for Desktop (1400px x 7000px)

이 튜토리얼 시리즈의 2 편에서는 1편에 이어서  Desktop 템플릿의 전반부를 살펴볼 것입니다. 그래서 Header, AboutPortfolio 섹션을 다룰 것입니다.

좋습니다! 오늘도 좋은 디자인 영역을 만들어봅시다...


위에서부터 똑바로 만들어 가자.

이제 우리는 배경 이미지, 로고, 네비게이션 및 소개 글이 포함될 Header부터 작업을 시작 합시다.

자! 첫번째는, 우리는  큰 배경 이미지(Hero) 를 작업 할 것입니다.

이제 이전에 설치 한 Unsplash It 플러그인을 사용하여 Header 이미지 (및 튜토리얼 전체에서 필요한 다른 모든 이미지)를 추가하거나, 플러그인을 사용하지않고 개인적으로 실제 이미지를 사용하려는 경우 아래 예제를 통하여 배울 수 있을겁니다. (사실, 당신이 그럴 필요는 없다고 생각합니다. 플러그인을 통한 이미지들은 굉장히 좋은 이미지들 입니다.^^), 디자인에 수동으로 이미지를 추가하는 방법을 간략하게 보여줄 것 입니다.

옵션 1 : Unsplash It 플러그인을 통해 이미지 추가하기

이것은 이미지를 디자인에 빠르게 적용하는 가장 간단한 옵션입니다. 이 옵션을 통해 받게될 유일한 제한은 이미지가 플러그인에 의해 무작위로 선택된다는 것입니다. 특정 이미지 스타일을 사용하지 않고  mockup을 만들고 싶다면 멋진 이미지, 시간 절약 등 많은 도움이 될것입니다.

또한 이미지가 방금 삽입 된 레이어는 현재 Vector이므로 비트 맵 이미지처럼 작동하도록하려면 메뉴바로 이동하여 Layer > Flatten Selection to Bitmap 으로 선택 하여 클릭하면 됩니다.

옵션 2 : 수동으로 이미지 추가하기

디자인에 추가하는 이미지를 보다 잘 제어하고 싶다면 우리는 어려운 방법 밖에 없습니다. (실제로는 그렇지 않습니다만..^^;).

이미지를 수동으로 추가하는 두 가지 옵션이 있습니다.

  1. 가장 뻔한 방법 입니다. 툴바(Toolbar)에서 이미지 아이콘(Image icon)을 클릭하거나, Insert > Image ...를 클릭하십시오.
  2. 저는 때때로 이렇게 합니다.  특정 이미지 크기 세트를 원한다면, 그리고 디자인에 삽입 한 후 이미지의 크기를 조절하지 않아도 된다면. 단축키 (R)을 사용하여 직사각형-rectangle (또는 원하는 모양)을 그린 다음 Inspector (인스펙터) 패널에 Fills (채움) 옵션을 선택 합니다. Fill colour를 클릭 한 다음 Pattern Fill option을 선택하십시오.  나타나는 드롭 다운 메뉴에서 Tile to Fill로 변경 한 다음 Choose Image ...를 클릭하여 이미지를 추가하십시오. 이렇게하면 삽입 한 모양에 설정 한 크기로 이미지가 구속 됩니다. 이 이미지는 여전히 shape 레이어 안에 있으므로 비트 맵 이미지처럼 작동하려면 레이어가 선택되어 있는지 확인한 다음 메뉴 막대에서 Layer > Flatten Selection to Bitmap으로 병합합니다. 이제 레이어가 일반 이미지처럼 작동 할 수있게되고 Inspector 패널에서 색상 조정(Colour Adjustments), 자르기(cropping) 등의 작업을 수행 할 수 있습니다.

이 튜토리얼의 목적을 위해, Unsplash It 플러그인을 사용하겠습니다. 하지만 디자인에 이미지를 삽입하는 다양한 옵션에 대해 더 잘 이해할수 있는 기회였다면 좋겠습니다.


Header 만들기

자! 우리는 큰 Header 이미지를 삽입했습니다 (지금은 Vector 레이어로 유지하십시오.). 혹시나,  이미지 변경을 원하는 경우 Unsplash It 플러그인을 통해 이미지를 쉽게 변경할 수 있습니다.

빠른 팁 : Ctrl + Shift + R. 신속하게 플러그인을 다시 실행하려면 (이 경우, 새 이미지의 Header에서 이미지를 신속하게 교체 가능 하겠지요) 바로 키보드 단축키가 당신의 새로운 애용품이 될 겁니다. 시도해 보세요!

이제 우리는 우리의 Header 이미지에 어두운 오버레이를 적용하기 위해 또 다른 레이어로 내려갈 것입니다. 이제 Header 이미지를 비트 맵으로 압축하여 평탄화하고 색상 조절 설정의 밝기(Brightness) 및 대비(Contrast)를 줄이면 비슷한 효과를 얻을 수 있습니다.그러나 마지막 단락에서 언급했듯이 이제 벡터 레이어로 유지하고 있으면 이미지를 마음대로 바꾸면 빨리 교체 할 수 있습니다.

그리고 오버레이 (R)에 대한 새 레이어를 만들고 모든 크기의 Artboard에 사각형(rectangle)을 그립니다. 그 레이어에 다음 치수(dimensions), 위치(positioning) 지정 및 경계(border) 설정을 지정합니다.


header 이미지 오버레이 설정

이제 Inspector 패널에서 다음 설정을 사용하여, 오버레이의 색상을 변경하고 불투명도(opacity)를 조정 해 봅시다.


오버레이의 색상 값 조정

좋습니다! 이렇게하면 텍스트 상단 (이미지의 경우 흰색, 초록색)을 이미지 상단에 배치 할 때 좋은 대비를 유지할 수 있습니다. 더 어두운 이미지를 사용하는 경우 오버레이가 필요하지 않을 수 있습니다.


메뉴바 만들기

이제 로고와 메인 네비게이션을 포함하는 메뉴바를 만들 것 입니다. 이미지 로고를 아직 가지고 있지 않은 경우 여기에서 가져옵니다.

우리 네비게이션에 4 개의 메뉴 항목들을 추가 할 시간 입니다. 이 튜토리얼 시리즈에서는 간단하게 설명 하겠습니다.

artboard에 텍스트를 추가하려면 (T)를 누르고, 텍스트에 다음 스타일 환경 설정을 입력하십시오...


텍스트 레이어에 스타일 환경 설정 추가하기

이제 텍스트 레이어를 선택한 상태에서 Alt 키를 누른 채 드래그하여 해당 레이어의 사본을 3 개 더 만듭니다. 또 다른 옵션은 선택한 레이어를 마우스 오른쪽 버튼으로 클릭하고 복제(Duplicate)를 선택하는 것입니다.


Alt + Drag로 텍스트 레이어를 쉽게 복제 할 수 있습니다.

이제 메뉴 항목이 4 개 있습니다. 각 텍스트를 더블-클릭하고, 텍스트를 다음과 같이 변경하십시오 (어쨌든이 튜토리얼의 목적을 위해) ...

  • About
  • Work
  • Blog
  • Contact

이제 모든 4 개의 메뉴 항목이 선택되었습니다. 메뉴 막대로 이동 한 다음 Type' 드롭 다운 메뉴에서 대문자(Uppercase)를 선택하십시오.


빠르게 모든 텍스트 레이어를 대문자로 만듭니다.

4 가지 항목을 선택한 상태에서, 모든 메뉴 항목이 고르게 배치되고 수직으로 정확하게 정렬되도록하십시오. 가로 세로 분포 사용 및 속성 패널(Inspector panel)에서 세로 정렬.


속성(Inspector) 패널에서 위치 도구(position tool )를 사용하여 요소를 쉽게 정렬하십시오

이제는 로고와 메뉴 항목을 한 라인으로 정렬 할 수 있습니다. 로고와 메뉴 항목을 선택하고 Inspector에서 Align Bottom을 클릭하십시오.


로고와 메뉴 항목을 아래쪽에 맞 춥니 다.

Header의 나머지 부분과 상단 바를 분리하고 네비게이션 영역(navigation area.)에 좀 더 집중을 하기 위해 구분선(divider)을 사용하십시오.

Line tool (L)을 선택한 다음 Shift 키를 누른 채로 Inspector에서 Length가 1360 인 경우 디자인 전체에 선을 그립니다.










그런 다음 테두리 설정(Borders settings)에서 다음 조정 색 및 두께(Color, and Thickness)를 조정합니다.


구분선의 테두리 스타일 설정



색상 유지하기

자!! 잠시.. 한숨돌리면서 다시 생각해 봅시다.

이제는 디자인에 색상을 추가하기 시작했습니다.이 색상을 Inspector의 색상 팔레트(Document Colors palette)에 추가하는 것이 좋습니다. 이 색상은 이 튜토리얼에서 몇 번 더 사용할 수도 있습니다. 이렇게하면 디자인 전체에서 색상을 쉽게 찾고 재사용 할 수 있으며 어느 시점에서 개발자에게 전달할 때 유용합니다.

문서 색상(Document Colors)에 색상을 저장하면 설계 전반에 걸쳐 재사용 할 수 있습니다

우리는  아름다운 라임 그린을 선택 하였습니다. 속성(Inspector)에서 색상을 클릭 한 다음, 팝업의 하단에있는 색상을 클릭하십시오. 문서 색상(Document Colors) 섹션에서 해당 색상을 팔레트에 추가하려면 (+) 기호를 클릭하십시오.

당신이 원하는 경우, header 이미지의 오버레이 색상에 대해 동일한 작업을 수행 할 수 있습니다. 작업물들을 멋지고, 체계적으로 유지합시다.

문서 색상 섹션(Document Colors section)에서 색상을 제거하려면 색상을 마우스 오른쪽 버튼으로 클릭하고 제거(Remove)를 선택하십시오. 간단하지요?^^.

자, 다시 돌아와서 ...


우리의 레이어 목록에서 대 청소를 위한 시간

이제는 Artboard에서 요소(elements)를 올바르게 정렬(align) 할 수있을뿐만 아니라, 여러 항목을 그룹화하여 항목을 체계적으로 정리할 수 있습니다. 저는 항상 제 디자인의 작은 부분을 만든 후에 요소 이름 등을 바꾸는 것을 좋아합니다. 이런 정리방법이 당신이 디자인하는 동안  많은 도움이 될껍니다. 그리고 이렇게한다면  디자인이 끝나고 난 후  직사각형68(Rectangle 68), 직사각형73(Rectangle 73), 비트 맵(Bitmap) 등의 지저분한 레이어 리스트를 남기지 않습니다. 당신의 Artboard에 무엇이 있습니까? 지저분하다면.....  그것은 결국 당신에게 큰 시간을 낭비시킬 것 입니다.

한 번에 조금씩 배워가면서 레이어 이름 바꾸기(Rename), 그룹화(Group), 재정렬. 당신도 이방법이 합리적이라는 것을 알고 있을 겁니다.

이름을 바꾸고 정기적으로 레이어를 그룹화하는 습관을 만드십시오

먼저 레이어(layers) 목록에서 일부 레이어(layers)의 이름을 바꿉니다. Cmd + R을 사용하여 레이어의 이름을 바꾸고 레이어를 빠르게 탭(Tab) 처리하고 이름을 바꿀 때까지 좌측의 이미지에서와 같이 이름을 바꿔 주세요.

그런 다음 메뉴 항목을 그룹화(group)하십시오. 레이어 목록에서 모두 선택하고 Cmd + G를 클릭 한 다음 해당 그룹의 이름을 Navigation으로 바꿉니다.

전체 상위 header 영역을 함께 그룹화하는 것이 합리적입니다 (로고, 네비게이션, 라인 / 분할선). 따라서 전체를 선택해 주시고 Cmd + G를 선택한 다음 이름을 바꿉니다.

이제 Sketch에서 (Divider + Navigation + Header Logo)와 같은 그룹 이름을 지정합니다. 어떤 경우에는 결과물에 만족하지만, 만족 못하는 경우에는 좀 더 세련되게 (예 : 로고 + 탐색) 이름으로 신속하게 바꿉니다. 이 일은 전적으로 당신의 선택에 달려 있습니다.^^

이제 우리 디자인중 최상위 header 영역을 멋지게 배치합시다. 로고 / 네비게이션 그룹을 선택하고 Alt (많이 사용하게될 단축키 입니다.) 키를 누르면 스케치의 측정 가이드(Measure guides)가 나타납니다. 이제 다음 아래 이미지와 같이 상단, 우측 그리고 왼쪽에서 40px 씩 떨어지게 그룹을 배치하려고 합니다 ...


측정 도구(Measure tool)를 사용하여 요소를 픽셀 완벽하게 정렬합니다

Big ol 'Hero Statement (제가 그들을 이렇게 부르고 싶습니다.)을 만들어 보자. 2 개의 텍스트 레이어 (T) -text layers 를 만듭니다. Hero Statement에 대해 하나의 레이어만 사용할 수도 있지만, 이 튜토리얼의 목적 상, 두 개의 레이어로 작업을 함으로써 좀 더 많은 학습을 할 수 있습니다.

첫 번째 텍스트 레이어 'We are design'에 대해 Inspector 패널에서 다음 옵션을 사용하여, 이전에 문서 색상(Document Color)으로 저장 한 색상 (과일 라임 그린 색)을 선택합니다.


Inspector에서 제목 강,약 설정

그리고 두 번째 텍스트 레이어 'Personified'의 경우 Hex (#) 색상 값(colour value)을 FFFFFF로 설정합니다.


Inspector에서 제목 설정

잘 만들었네!  멋져 보여!

이제 라인을 잘 정리해 봅시다. 레이어 가이드(Layer Guides) Ctrl + L을 켜면 가이드에 2 개의 텍스트 레이어를 빠르게 맞출 수 있습니다. 다음의 아래 이미지처럼 ...


레이아웃 가이드(Layout Guides)를 사용하면 요소를 그리드에 빠르게 붙이기 할 수 있습니다.

이제 이 2 개의 텍스트 레이어(text layer)를 Cmd + G 그룹으로 만들고 Cmd + R(rename)의 이름을 'Hero Statement'로 바꿀까요?

우리가 지금까지 만든 모든 요소들을 그룹화합시다.

  • Logo + Navigation
  • Hero Statement
  • Overlay
  • Background Image

그리고 'Header'와 같은 이름으로 바꿉니다. 그리고 Boom! 우리의 Header작업은 모두 다 끝났어!!. 계속 진행해 봅시다 ...

The About section

사람들에게 약간의 소개와 튜토리얼 시리즈 '스케치 용 콘텐츠 생성기(Content Generator for Sketch)'의 1 편에서 언급 한 플러그인(plugin) 중 하나를 가져올 시간 입니다.

또한 스타일이 적용된 텍스트(Styled Text)를 사용하여, 디자인 전체에서 텍스트 스타일(Text Styles)을 쉽게 재사용 할 수 있습니다.

Hero Statement와 같은 섹션 제목 스타일 지정 (음영 빼기)

섹션 제목에 대해 2 개의 텍스트 레이어를 작성하고, Hero Statement (음영을 제외 함)와 동일하게 스타일을 지정하십시오 (앞에서 설명한대로).

그러나, 우리가 디자인의 추가 섹션에서 이러한 텍스트 스타일을 재사용 할 때 Sketch의 Styled Text 옵션을 살펴 보는 것이 현명한 아이디어 일 것입니다.



‘Time to say’ 텍스트 레이어를 선택하고 다음 중 하나를 선택하십시오.

  • 메뉴 바(Menu bar)에서 레이어를 클릭하고 공유 스타일 만들기(Create Shared Style)를 선택하십시오.


레이어(Layer) 드롭 다운 메뉴에서 텍스트 스타일 만들기

또는

  • Inspector 패널로 이동하여 No Text Style을 클릭 후 나타난 팝업 메뉴에서 Create New Text Style을 선택하십시오.


Inspector 패널에서 텍스트 스타일 만들기


제목에 대한 관리자의 설정

어느 옵션이 당신에게 잘 맞는 옵션 인지. 이제 Inspector 패널에서 강조 표시된 필드가 표시된곳에, 새로운 텍스트 스타일에 레이블(label)을 지정할 수 있습니다. 저의 경우, 'Section Title Accent'이라고 작성 하였습니다.

그런 다음 텍스트 레이어 'Hello'에 대해 동일한 안내를 따르십시오. 저는 단순히 'Section Title'이라고 작성 하였습니다.

제목에 대한 관리자의 설정

이제 우리는 디자인 전반에 걸쳐 이러한 텍스트 스타일을 신속하게 재사용 할 수 있으며,이 과정에서 많은 시간을 절약 할 수 있습니다.
당신의 시간은 가치 있습니다, 잊지 마세요!

자! 우리는 섹션 제목 아래에 작은 텍스트 단락(small paragraph)으로 들어가서 잊어 버리기 전에 '스케치 용 컨텐츠 생성기(Content Generator for Sketch)'플러그인(plugin)을 잘 활용할 것입니다.


섹션 단락 텍스트 설정

새 텍스트 레이어 (T)-new text layer 를 만들고 다음과 같이 스타일을 지정하고 (Hex (#) colour value of 666666 색상 값 포함), 폭(Width)을 '고정(Fixed)'으로 유지합니다.
 (이렇게하면 Artboard에서 흘러 나오는 텍스트 블록이 저장되어 성가 시게됩니다.)

그리고 이전의 지침에 따라 새로운 텍스트 스타일(Text Style)로 만드십시오. 어쩌면 그것을 'Section Paragraph'와 같이 작성하면됩니다.

빠른 팁 :이 튜토리얼에서 레이아웃 가이드에 대한 키보드 단축키 Ctrl + L을 기억하십시오. 가이드가 표시되면 그리드에 요소를 빠르게 맞출 수 있습니다.

Ctrl + L은 오브젝트 간 사이의 거리를 측정하는 Alt와 함께 가장 자주 사용되는 키보드 단축키입니다. 이 단축키들도 당신 것입니다. 이 단축키들은 매우 귀중합니다.

자! 플러그인(plugin)의 일부 필러 텍스트(filler text)를 생성 할 수 있습니다. 선택한 텍스트 레이어(text layer)를 메뉴 바(Menu bar)의 플러그인(Plugin)으로 이동 한 다음 Content Generator Sketch Plugin > Text > Dummy Text > Fillerati > Generate

레이아웃 가이드(Layout Guide)가 보이면 텍스트를 끌어서 7 개의 열을 덮습니다.


레이아웃 가이드가 표시되면 텍스트 상자가 열에 고정됩니다.

Boom! 이제는 웹에서 더미 필러 텍스트(dummy filler text)를 찾는 대신 시간을 절약하지 않습니까? 플러그인(plugin)으로 제공되는 옵션이 너무 많아서 다루지 않았습니다. 좀 더 가지고 놀아 보세요. Sketch 툴킷의 필수적인 부분이 될 것입니다. 제가 보증 합니다!!!!!


마스킹 도구 사용과 아름다운 아이콘들의 사용

이제 이 About 섹션에서 Sketch의 마스킹 도구(Masking tool)를 사용하고 Entypo의 예쁜 아이콘 중 일부를 사용해 보겠습니다.

Iconjar 내부의 확성기(Megaphone) 아이콘을 잡아 당겨 Artboard에 놓은 다음 이미지로 마스킹(masking)합니다.


여기 예쁜 이미지를 만들 것입니다 ...


Iconjar 앱에 아이콘 세트를 쉽게 추가 할 수 있습니다.

희망하건대, Iconjar가 설치되어 있고 Entypo 아이콘이 안에 들어 있기를 바랍니다. 그렇지 않다면 지금 당장 그렇게 셋팅 하십시요!

설치할 수있는 Entypo에는 2 개의 폴더가 있어야합니다 (표준 아이콘 및 소셜 아이콘)

Iconjar를 설치하고 + 아이콘 추가(Add Icon)를 통해 Entypo 아이콘 세트를 응용 프로그램에 추가하면 아이콘 중 하나를 Artboard에 바로 놓을 수 있습니다.

Iconjar 창의 오른쪽 상단에있는 검색 바(search bar)를 사용하여 '확성기(Megaphone)'를 빠르게 검색하십시오. 창에 나타나면 강조(highlight) 표시 한 다음 Artboard로 끌어서 놓습니다. 얼마나 편하고 좋은 가요? 당신이 원하는 아이콘을 찾기 위해 컴퓨터를 통해 사냥을 해보세요!!

이제 디자인에 작은 아이콘이 생겼습니다. 그러나 우리는 크게 갈 것 입니다 !!! 비율(proportions)을 유지하려면 잠금을 켜고(lock on) 350 x 350px까지 만들어 가십시오.


우리는이 아이콘으로 더 커질 것입니다 !!

이제 모든 모양을 마스크(mask)로 만들 수 있습니다. 그리고 우리의 경우 메가 폰(megaphone) (당신의 폴더안에있는 레이어 목록이 아닌 shape layer가 선택되어 있어야 함)을 선택하고 메뉴 바(Menu bar)에서 Layer > Use as Mask in the Menu bar (Ctrl + Cmd + M). 마스크 위의 모든 레이어는 잘립니다.

계속해서, 아이콘을 덮는 직사각형-Rectangle (R)을 그린 다음 Unsplash It 플러그인을 실행하여 아이콘에 가려 질(mask) 이미지를 선택하십시오.


이미지 마스크에 그라디언트를 추가하면 시각적 인 감각을 조금 더 부여 할 수 있습니다.

이미지 위에 그라디언트(gradient) 레이어를 추가 했습니다. 다시 아이콘에 잘립니다. 아이콘에 시각적 감각을 더하기 만하면됩니다. 저는 당신이 그걸 가지고 놀 수있게 할 것입니다. 거칠게 가자구요!

이 섹션을 끝내고 스케치의 Symbols를 살펴보고 디자인 전반에 걸쳐 쉽게 해당 구분선(divider)을 다시 사용할 수 있도록 멋진 작은 구분선(divider)을 만들 것입니다.


꽤 예쁜 구분선(divider)가 있습니다!

그리드(grid)의 12 열(column) (레이아웃 가이드(Layout Guide)를 기억하십시오)에 걸쳐있는 선 (L)을 그립니다. 두께(thickness)를 3px로 설정 한 다음 이전에 문서 색상(Document Color)에 저장 한 라임 그린 색상(Lime Green colour)을 선택하십시오.

타원형 모양(Oval shape) (O)을 사용하면 우리 선 위에 놓을 완벽한 원을 만들 수 있습니다.


분할 자의 서클 설정


안내선(guide)을 사용하면 원을 쉽게 정렬하고, 여기에 정확하게 정렬 할 수 있습니다.

안내선을 사용하면 요소를 쉽게 정렬 할 수 있습니다.

이제 Iconjar로 돌아가서 'Infinity'아이콘을 빠르게 검색 한 다음, 끌어서 디자인에 끌어다 놓으십시오. 너비(Width)를 35px로 늘리십시오 (정확한 비율을 위해 자물쇠 아이콘을 켜 놓으십시오). 그리고 라임 그린 색상(Lime Green colour)으로 채 웁니다.


추가 한 아이콘의 크기를 늘리십시오.

생성 된 원 위에 아이콘을 놓고, 아이콘과 원 레이어를 선택하고, 신속하게 수평 정렬(Align Horizontally)을 맞추고 수직으로 정렬(Align Vertically)하여 완벽하게 일렬로 정렬 되도록 합니다.


요소가 완벽하게 정렬되었는지 다시 확인하십시오.


툴바에서 심볼 버튼에 접근

이제 우리의 구분선(divider)을 Symbol로 바꾸자. 바라 건데 당신은 구분선(divider)을 위한 요소를 함께 그룹화하고 'Section Divider'와 같은 이름을 붙이실 거죠? 캬~!

해당 그룹을 선택하여 Toolbar에서 Create Symbol를 클릭하십시오. 이제 당신의 그룹이 예쁜 보라색으로 바뀌는 것을 보게 될 것입니다 ... 그것이 ... 지금 기다리고 있습니다 ... ... 나는 그 스릴이 너무 심하다는 것을 알고 있습니다 ......... Symbol !!!  ^^

이제 Insert > Symbols로 이동하거나 Toolbar에서 Symbol icon을 클릭하고 여기에 divider symbol를 선택하여 디자인에서 나중에 이 Symbol (이 경우에는 구분선-divider)을 재사용 할 수 있습니다.

그리고 하나의 symbol에 대한 모든 편집 내용이 동일한 symbol의 모든 인스턴스를 통해 반영 된다는 것을 기억하십시오. 예를 들어 무한대 아이콘이 싫다고 생각하면 다른 아이콘으로 빠르게 전환 할 수 있으며 이를 반영하기 위해 해당 심볼의 모든 인스턴스가 변경됩니다.


보라색이라면 심볼 (Symbol) 입니다.

앞서 언급했듯이, 레이어의 이름을 바꾸고 요소를 그룹화해야하므로 레이어 목록이 정리가 잘되어 있습니다. (예 : 다음 섹션으로 이동하기 전에 제목, 텍스트, 아이콘 및 구분선을 그룹화).


The Portfolio section

이제 디자인의 포트폴리오(Portfolio) 섹션으로 넘어 갑시다.

스타일이 적용된 텍스트 요소 사용

먼저 이 섹션의 제목을 살펴 보겠습니다. 이전에 작성한 텍스트 스타일(Text Styles)을 사용합니다. 툴바(Toolbar)의 스타일있는 텍스트(Styled Text) 아이콘을 클릭하여 디자인에 쉽게 삽입 할 수 있습니다.  이름 지정 규칙을 따르기 전에 스타일이 적용된 텍스트 드롭 다운에서 'Section Title Accent'및 'Section Title'을 추가하기를 원할 것입니다.



텍스트를이 섹션에 적합한 것으로 변경하면 다음 아래와 같은 효과를 얻을 수 있습니다.


이것은 우리가 목표로하는 모습입니다.

우리 포트폴리오(Portfolio) 섹션 다음에는 Styled Text 옵션을 다시 사용하여 제목을 쉽게 만들 수 있는 섹션이 2 개 더 있습니다 (블로그 및 연락처-Blog, and Contact).  시간을 절약하는 타이틀 만들기!!!

포트폴리오 thumbnails에 대해서는  full-width Masonry Grid layout을 사용합니다. 아래 이미지와 유사 ...


우리는이 같은 섹시한 석조 격자를 만들려고합니다.

자! 섹션 제목 아래에서 Rectangle Tool 을 잡고 사각형에 여러 개의 사각형을 그리기 시작하고 직사각형을 디자인에 적용합니다 (색상을 수정하여 의미를 시각화 할 수 있습니다. 변경하지 않아도됩니다) .


직사각형 도구로 미쳐 버려!

선택한 모든 모양 레이어가 있는지 확인하십시오. Unsplash It 플러그인을 실행하십시오. Plugins > Unsplash It

또 다른 BOOM! 모든 shape 레이어는 Unsplash에서 예쁜 그림을 보여 주어야 합니다. 우리의  일을 조금 덜어 줄 것 입니다.

Placeholder images가 마음에 드시나요? 이전에 보았던 키보드 단축키 Shift + Ctrl + R을 기억하십시오. 원하는 이미지를 찾을 때까지 더 많은 이미지를 빠르게 순환시킬 수 있습니다 (또는 삽입 된 이미지가 마음에 들지 않는 shape 레이어가 있을 수도 있습니다 ^^ 그럼 다시 만드세요 ㅋ).

이제 Unsplash It 플러그인의 이미지를 유지하거나, 배경을 이 다운로드에 포함 된 이미지로 변경할 수 있습니다.

이미지 레이어는 현재 배경 이미지가 채워진 모양이므로 이미지가 더 비슷하게 작동하도록하려면 색상 조정(colour adjustments), 자르기(cropping) 등을 보다 잘 제어 할 수 있어야합니다. 한번에 각각의 shape 레이어를 선택할 수 있습니다 (모두 한꺼번에 표시 할 수있는 것은 아닙니다. 또는 큰 비트 맵을 하나만 가질 수 있습니다)이 튜토리얼의 시작 부분에서 보았던 "비트 맵에 선택 영역 병합(Flatten Selection to Bitmap)"명령을 사용하십시오. 또는 그대로 두어도 무방 합니다.. 전적으로 당신에게 달려 있습니다.

이제 우리는 header 이미지에 대해했던 것 처럼 포트폴리오 thumbnails에 대한 오버레이를 만들 것입니다. 하지만 이번에는 Sketch에서 레이어 스타일(Layer Styles)을 사용하여 동일한 스타일을 여러 요소에 신속하게 적용 할 수 있습니다.

텍스트 스타일(Text Styles) 및 심볼(Symbols)과 같이 한 곳에서 변경을 수행 할 수 있으며 해당 레이어의 모든 인스턴스에 걸쳐 복제됩니다.


최대 효과의 이미지 오버레이(overlay)

포트폴리오 thumbnails 중 하나에 Rectangle를, 그리고 여기에 표시된 설정을 적용하십시오 ...


미리보기 이미지 오버레이(overlay) 설정

Inspector의 스타일 옵션(styling options) 바로 위에있는 'No Shared Style' 드롭 다운 화면을 클릭 한 다음 'Create New Shared Style'를 클릭하고 'Thumb Overlay'와 같은 이름으로 지정하십시오 (이름을 너무 구체적으로 지정하지 마십시오. 우리 디자인의 BLOG 섹션에서 다시 사용하게 될 것입니다.)

>>ㅑ~ ! 이제 진행하던 동일한 프로세스를 따라 다른 thumbnail 이미지 각각에 대한 오버레이 레이어를 만든 다음 Inspector의 드롭 다운 메뉴에서 만든 Layer Style을 선택하십시오.

더 빠른 방법은 이미지 중 하나를 선택하고 Cmd + D를 눌러 해당 레이어를 복제(duplicate) 한 다음 해당 복제 이미지에 레이어 스타일(Layer Style)을 적용하는 것입니다. 끝!!!!!!

레이어를 반복하면서 이름을 바꾸거나 레이어 목록에서 약간 혼란 스러울 수도 있습니다.

우리가 모든 이미지에 적용한 오버레이 처리는 이유가 있습니다. 이 디자인이 개발자에게 전달 될 때 (사용자 자신 일 수도 있음)  사용자가 디자인이 온라인과 상호 작용할 때 해당 포트폴리오 이미지에 사용할 수있는 호버 상태(hover state)를 만드는 것이 좋습니다.  기본 상태(normal state)의 어두운 오버레이 및 다음 호버 상태(hover state). 다음 단락에서 보여드리겠습니다.

우리는 아래 그림과 같은 것을 만들 것입니다.


예쁜 호버 디자인 만들기. 우!

우리는 먼저 카테고리(category)와 클라이언트 이름 텍스트(client name text)에 대해 작업 할 것입니다.

2 개의 텍스트 레이어(text layers)를 생성하십시오. 하나는 category 용이고 다른 하나는 클라이언트 이름(client name) 용입니다.

카테고리 이름으로 다음 설정을 사용하십시오 ...


카테고리 이름 설정

다음 설정을 사용하여 클라이언트 이름에 대해 동일한 작업 수행 ...


클라이언트 이름 설정

그런 다음 두 텍스트 레이어에 대해 새로운 텍스트 스타일(Text Style)을 만들어 쉽게 다시 사용할 수 있습니다.

그런 다음 thumbnail의 왼쪽 하단에 두 개의 텍스트 레이어를 배치합니다 (앞의 이미지와 같이). Alt 키를 사용하여 거리(distance)를 측정(measure)하고 텍스트를 왼쪽에서 20px, 아래에서 20px 위치에 배치합니다.

이제 hover state를 위한 이미지를 빠르게 만들어 보겠습니다.

원의 상단에 놓을 Hex (#) 색상 값 FFFFFF을 가진 텍스트 레이어 (예 : 프로젝트보기) 및 Hex (#) 색상 값이 A2CB75 인 70 x 70px로 원을 만듭니다. 속성의 정렬 도구를 사용하여 올바르게 정렬되었는지 확인한 다음 모양과 텍스트 레이어를 선택하고 심볼로 바꿉니다. '프로젝트보기 버튼'과 같은 레이블을 붙이십시오.

방금 생성 한 그룹 (Symbol)과 이미지 레이어를 선택한 다음 Inspector 패널에서 Horizontally Align and Align Vertically를 사용하여 모두 보기 좋게 만듭니다.


맞춤(alignment) 도구는 스케치에서 매우 중요합니다.

우리는 이 섹션의 끝으로 가고 있습니다. 포트폴리오 이미지 아래에 버튼을 신속하게 만들어 보겠습니다. 그리고 그것을 Symbol로 만드십시오 !!


바로 거기에 하나의 예쁜 버튼이에요!


버튼에 대한 Symbol 만들기

다음과 같은 설정으로 버튼을 만드십시오. 그런 다음 버튼 내부에 텍스트를 배치하십시오 (예 : view more).

이제 Symbol로 바꾸십시오.

자, 심볼을 만들었습니다. 디자인의 다른 부분에서 Symbol 버튼을 다시 사용하고 싶다면 가능합니다. 다른 텍스트 (예 : 블로그 섹션의 'Read more' 버튼)로 다시 사용하려면 쉽게 할 수 있습니다.



Symbols의 텍스트 값을 제외하는 것은 매우 편리한 기능입니다.

일단  Symbol로 변환했습니다. 버튼에서 텍스트 레이어를 선택한 다음 Inspector 패널에서 'Exclude Text Value from Symbol'확인란을 선택하십시오.

이제 버튼의 스타일 (테두리 반경-border radius, 색상-colours 등)을 해당 Symbol의 모든 인스턴스에서 동기화 할 수 있지만 원하는대로 텍스트를 변경할 수 있습니다. 행복한 날 !!



퀵 메모. 이 프로세스를 자동화하기위한 몇 가지 훌륭한 플러그인(plugins)이 있습니다. 'Sketch Dynamic Button'과 확인 할 가치가 있는 'Sketch Relabel Button'이 있습니다.

이 섹션을 끝내려면 섹션 divider Symbol을 빠르게 가져와 봅니다. 그리고 우리는 모두 디자인의 2편에 대해 끝났습니다. 수고 하셨습니다!


Divider를 집어넣으면 지금 당장 완료됩니다!


당신이 Sketch에 대하여 좀더 알수있는 기회 였나요? Sketch 좀 더 해보시겠습니까?

이 튜토리얼 시리즈의 3 부에서는 데스크톱 화면 디자인을 마무리하겠습니다. 우리는 Sketch를 더 깊이 파고들 것이며, Part 3을 진행하면서 더 멋진 기능, 바로 가기 및 팁을 보여 드릴 것입니다. 곧 다시 만나기를 바랍니다.

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

Marc


Marc는 Themmed의 창립자이며, a new marketplace for Premium, Sketch 앱의 'Pay What You Want'리소스를 제공합니다.




Sketch와 Prototyping에 대한 지식을 향상시키고 싶습니까?

Sketch와 협력하기위한 가장 많이 팔린 가이드가 제공됩니다.

특별히 이글을 읽는 분에게만 주어지는 혜택입니다.

쿠폰 코드 MEDIUMESSENTIALS35을 사용하여 패키지 중 3 5% 할인을 받으십시오.



https://themmed.com/discover-sketch-app

이 글을 읽은 적이 있다면,
아래의 '❤'버튼을 눌러주시면 감사합니다. 진심으로 감사드립니다





3편을 기대해주세요




마치며

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

번역 도움 : @오역 유발자 ‍ ‍님께 감사드립니다. 

원본 링크 입니다.


리뷰