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

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

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

소개

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


스케치 앱 튜토리얼 1편 보기

스케치 앱 튜토리얼 2편 보기





데스크톱 디자인의 완성

오랜만 입니다!

자! 그럼. 3편 (총5편)에서 좀 더 진도를 나가 보도록하겠습니다.

좋아. 자, 여기서 여러분은 데스크 톱 디자인의 첫 부분을 만드는 것 뿐만 아니라, 여러분들이 스케치(Sketch)를 할 수 있는 방법을 찾기 시작했고, 애플리케이션의 주요 기능에 대한 몇가지 지식을 습득하기 시작했습니다.

이 튜토리얼 시리즈의 3 부에서는 데스크탑 템플리트 디자인 설계를 완료 할 것입니다. 블로그(blog) 섹션, 연락처(contact) 섹션 및 풋터(footer)를 만들예정입니다.

좋습니다! 좀 더 많은 디자인을 작업해 봅시다. ...


블로그 섹션 (Blog)

자 그럼 우리 디자인의 블로그(blog) 섹션을 만들어 봅시다.

좋아. 우리 구역을 제자리로 옮깁니다. 이전에 포트폴리오(Portfolio) 섹션에서와 같이 이전에 진행한 내용을 살펴본 후, Toolbar 텍스트(Text) 옵션에서 텍스트(Text) 스타일로 2 텍스트(Text) 스타일을 입력합니다(이러한 라벨은 다르게 표시하실 수 있습니다). 텍스트를 기호에 맞게 변경한 다음, 그리드에 정렬합니다.


이제 우리는 이 섹션에 들어가기 위해 블로그를 작성하고, 다음과 같은 것을 목표로 삼을 것입니다.

블로그 게시물 디자인

우리는 이 섹션에 4개의 블로그 포스트를 만들 예정입니다. 그래서 우리는 이전에 잘 사용했던 Unsplash It 플러그인을 사용하여 만들 것 입니다.

Grid의 12 열 모두에 걸쳐 있고 300px 높이(height)의 Rectangle (R)을 생성하십시오.

그런 다음 Alt + Drag 하여 해당 레이어(layer)를 3 번 복제(Duplicate)하십시오. 그런 다음 선택한 4 개의 도형 레이어를 모두 사용하여 Unsplash plugin Plugins > Unsplash을 실행하거나 키보드 단축키 Shift + Cmd + U를 사용하십시오.

그래서 당신의 Artboard에 아래와 같은 작업물을 가지고 있어야 합니다.


좋아. 멋져 자, 이제 타이틀생성날짜를 이 예쁜 블로그 이미지에 추가 해봅시다.

먼저, 문서의 날짜를 기준으로 다음 설정을 사용하여 Hex (#) : 95BB6C 값을 지정하십시오 (문서 색상 표-Document Colors palette에 이미 저장되어 있어야 함).


그리고 게시물 제목 설정을 Hex (#) : FFFFFF 하세요.


이제 이 두 레이어(layers)의 텍스트 스타일(Text Styles)을 만들어 보겠습니다. 하지만 여기서 두 가지 다른 텍스트 스타일(Text Styles)을 수행 할 것입니다 (하나는 정상 상태-Normal state, 다른 하나는 호버 상태-Hover state). 다음 몇 단락에서 보여 드리겠습니다.

생성날짜 텍스트 레이어(Text Styles)를 선택한 다음 속성 패널(Inspector panel)에서 드롭 다운 메뉴에서 새 텍스트 스타일 만들기(Create New Text Style)를 선택하십시오.

이제 이 라벨에 'Post Date (Hover)'라는 라벨(label )을 지정하십시오. 그런 다음 게시물 제목 레이어(title layer)에 대해 동일한 작업을 수행하고 ‘Post Title (Hover)' 라벨(label)을 지정하십시오.


그런 다음 Alt 키를 사용하여 거리를 측정합니다. 날짜와 제목이 블로그 이미지의 왼쪽 하단에 잘 정렬되어 있는지 확인하십시오. 

아직 안됐다면.  2 개의 텍스트 레이어(text layer)가 그룹화(group)되어 있는지 확인하십시오. 'Date + Post Title'과 같은 것이 가능합니다.

이제, Alt + Drag를 사용하여 나머지 3 개의 복제본(Duplicate)을 나머지 블로그 이미지에 배치하여 해당 그룹(group)을 복제(copy)하십시오.

이제 우리가 복제(Duplicated) 한 텍스트 그룹(text group)으로 새로운 텍스트 스타일(Text Styles)을 만들 것입니다. 그러나 그들은 우리가 이전에 만든 텍스트 스타일(Text Styles)이 여전히 그들에게 적용되어 있습니다. 그것을 수정합시다.

방금 복제(Duplicated) 한 그룹(groups) 중 하나의 날짜 레이어(date layer)를 선택한 다음 속성(Inspector)의 드롭 다운에서 '텍스트 스타일 없음(No Text Style)'을 선택하십시오. 그리고 게시물 제목 레이어(post title layer)에 대해 동일한 작업을 수행하십시오.


이제 첫 번째 블로그 게시물에서 사용한 텍스트 스타일(text styles)을 제거했습니다. 이제 새 블로그 게시물을 추가 할 수 있습니다.

날짜 및 제목 레이어 (텍스트 스타일-text styles을 제거한 곳)를 모두 선택하고 Hex (#) : A5A5A5 값을 지정하십시오.


그리고 이전에 보여준 단계들을 따라야합니다. 이 2 개의 레이어(layer)에 대해 2 개의 새로운 텍스트 스타일(Text Style)을 만듭니다.

게시물 날짜(date) 레이어(layer)에 'Post Date (Normal)', 게시물 제목(title) 레이어(layer)에 'Post Date (Normal)'이라고 레이블(Label)을 지정합니다.

그런 다음 두 개의 새로운 텍스트 스타일(Text Style)을 이전에 복제(Duplicate) 한 나머지 텍스트 레이어(layer)에 추가하면 다음과 같은 효과를 얻을 수 있습니다.

나머지  3개의 텍스트 블록들이 가독성이 좋지 않아요! (원하던 결과 이지요!)

이것이 우리의 레이어 스타일이 다시 시작되는 곳입니다.

포트폴리오 항목에 대해 만든 thumb 오버레이(overlay)를 기억하십니까?

(스케치 앱 튜토리얼 2편-참조)

우리는 하단의 3 개의 블로그 게시물에서이를 다시 사용하려고합니다. 그래서 우리는 이런 식으로 끝납니다 ...



이제는 조금 더 좋아 졌습니다. 그렇죠? 

아래의 3 가지 블로그 게시물 각각에 대해 직사각형-Rectangle (R)을 그립니다. 그런 다음 방금 만든 3 개의 도형 레이어(shape layers)를 선택한 다음 속성(Inspector)의 드롭 다운에서 레이어 스타일(Layer Style)을 선택하십시오.


잘 하셨어요!

우리는 스케치 앱 튜토리얼 2편에서 포트폴리오(Portfolio) 항목에 대해 그랬던 것처럼 이제 우리는 신속하게 그래픽을 만들고,  이미지의 중심에 위치시킵니다. 

빠른 팁 : 우리는 스케치 앱 튜토리얼 2편에서 만든 'View Project'기호(Symbol)를 다시 사용할 수 있었습니다.(Exclude Text Value from Symbol를 확인하세요) 그러나 그 그래픽을 다시 만드는 법을 보여주는 것이 전혀 해가되지는 않겠지요?

70 X 70 픽셀의 원(circle)을 만들고, Hex (#) : A2CB75 로 지정합니다.

텍스트 레이어-text layer (예-View Project)에 Hex (#) : FFFFFF 지정 후
이전에 만든 원(circle) 상단에 위치 시킵니다.
**Inspector의 alignment tools을 사용하여 확실하게 align을 맞혀주세요
그리고 원(circle)과 텍스트 레이어(text layer)를 선택하시고 'Symbol'로 지정합니다. 이 Symbol의 이름(Label)은 Read Article Button’ 이라고 명명 하시면 됩니다.

방금 생성 한 그룹(Symbol)과 이미지 레이어(image layer)를 선택한 다음 Inspector 패널에서Align Horizontally  and Align Vertically를 사용하여 정렬을 시킵니다. 모두 보기 좋게 되었나요?


이 섹션은 거의 완료되었습니다.

포트폴리오(Portfolio) 섹션을 위해 생성 한 'Section Button'및 'Section Divider'기호(Symbol)를 기억하십니까?  그렇다면 그 두 기호(Symbol)를 디자인에 삽입 하십시오.


연락처 섹션

우리는 아름다운 연락처(Contact) 양식을 만들 예정입니다. 꽤 예쁘게 보일 것입니다. 아래 아름다운 디자인을 보세요.


이전 섹션에서 했던 것처럼 Toolbar의 Styled Text option에서 2 개의 텍스트 스타일(text style)로 이동하십시오. 텍스트를 원하는대로 변경 한 다음 그리드(Grid)에 align을 맞춥니다.


지도 및 위치 핀 만들기

연락처 양식(contact form)을 작성하기 전에 지도 배경(map background)과 위치 핀 아이콘(Location Pin icon)을 먼저 만들어 보겠습니다.

다운로드에서 지도 이미지를 가져올 수 있습니다.

지도 이미지를 가져왔으면, Artboard에 삽입합니다.

이제 Iconjar로 이동하여 'Location Pin'에 대한 검색을 한 다음 해당 아이콘을 Artboard로 드래그하십시오.


계속해서 아이콘의 크기를 늘린 다음 문서 색상에서 Hex (#) : 95BB6C 값을 지정하십시오.


핀 아이콘(Pin icon)을 회사의 멋진 그림자로 만들어 보겠습니다.

타원형 도구 - Oval tool (O)를 사용하여 작은 타원형(oval)을 그립니다. 나서 다음과 같은 폭(width), 높이(height) 및 색상 설정(colour setting)을 적용하십시오.


그리고 Inspector에서 Gaussian Blur를 사용하여 다음 설정(setting)을 적용하십시오 ...


이제 2 개의 레이어(layer)를 그룹(group)화하여 아이콘(icon)이 위의 레이어(layer)에 있는지 확인하십시오.


아이콘을(icon)지도 위에 놓고 곧 연락처 양식(contact form)을 추가 할 곳을 남겨 둡니다. 아래 스크린 샷(screenshot)을 가이드로 사용 하십시오.


이전에 보았던 멋진 연락처 양식(contact form)을 만들 차례입니다. 정보 섹션(About section)에서 이전에 사용한 것처럼 레이어 마스크(layer Mask)를 사용하게됩니다 (메가폰 아이콘 기억나시나요?)

연락처(contact) 세부 정보를 보유 할 컨테이너(container) 및 연락처 양식(contact form)을 작성해 보겠습니다.

사각형 도구 - Rectangle tool (R)를 사용하여 모양을 그리드(Grid)의 전체 12 열(12 columns)로 확장 한 다음, 아래 이미지에 표시된 설정을 입력하십시오.

(경계 반경-border radius을 추가하고 모양 레이어-layer에 큰 그림자-large drop shadow를 추가합니다.)


모양 레이어(shape layer)로 Ctrl + Cmd + M을 선택하여 마스크(Mask)로 변환(convert)합니다.

그런 다음 Hex (#) : 303030이고 높이(height)가 600px 인 다른 Rectangle (R)을 만듭니다.

이제 우리는이 새로운 도형 레이어(shape layer)가 우리가 처음 만든 흰색 컨테이너(white container)의 너비(width)의 절반이 되기를 바랍니다.


그래서 우리는 "하얀 컨테이너(white container)는 1160px 넓이(wide)이므로 절반은 ..........580px"가 될 수 있습니다.  이 계산은 많은 지적 능력을 사용합니다 (어쩌면 아주 작은 비트)^^;.

더 나은 방법 (또는 2 가지 방법)은 ...

* 선택한 어두운 레이어(dark layer)를 Inspector의 너비 필드(width field)로 이동하고 간단한 산수를 수행 시킬 수 있습니다. 필드에 1160/2를 입력하십시오. (약간의 부분이 거기에 있습니다) 그리고 붐!!!!! 우리는 580px 있습니다.


* 또는 너비-width (%)를 기준으로 갈 수 있습니다. 너비-width 필드에 50%를 입력하면 부모 레이어 (이 경우에는 1160 픽셀의 흰색 마스크 레이어-mask layer)를 기반으로 올바른 픽셀 값으로 자동 변환됩니다.


선택하는 것은 당신에게 달려 있습니다. 그러나 둘 중 하나는 프로젝트를 진행할 때 유용한 기능임은 확실합니다.


로고(logo) 추가 및 연락처 세부(contact details) 정보

우리의 로고(logo)와 연락처 세부 정보(contact details)를 컨테이너(container)의 왼쪽 부분에  넣어 봅시다.

아직 다운로드하지 않은 경우 여기에서 로고 이미지를 가져올 수 있습니다.


이 섹션을 설정해 보겠습니다 (이미지, 텍스트 및 색상 표시 추가).

우리의 연락처 양식(contact form)을 만들어봅시다.

아름다운 연락처 양식 만들기


연락처 양식(contact form)을 빠르게 처리해 보겠습니다.

우리는 우리 양식(form)의 일부 활성 상태(active states)를 강조 할 것 입니다. 위에서 작업했던 블로그 게시물(blog posts)의 일반(normal states) / 호버(hover states) 와 비슷한 원리로 다시 작업 할 것 입니다.

위 이미지에서 사용자가 연락처 양식(contact form)의 텍스트 필드(text fields)를 탭하면 왼쪽 아이콘이 녹색으로 강조 표시되고 텍스트 필드(text fields)가 어두워지고 현재 필드를 강조 표시하여 사용자에게 그 필드에 뭔가를 입력하고 받아 들여 졌다는것을 알릴 수 있습니다 (즉, 이메일 필드의 실제 이메일 주소).

아이콘으로 작업하기

각 텍스트 필드-text fields (이름-Name, 전자 메일-Email, 제목 줄-Subject Line, 메시지 상자-Message Box)에 해당 아이콘(icons)을 배치합시다.

계속해서 40x40 px 의 원-circle (O)을 만들고, Hex (#) : F1F1F1을 만듭니다.

이제 각 서클 사이에 20px 간격을 두고 세로(vertically)로 4 개의 서클(circles)이 필요합니다.

여기에서도  2 가지 옵션(options)이 있습니다. 보여 드리죠 ...

* Alt + Drag로 3 개의 복제(duplicate)를 만들 수 있습니다. 복제(duplicate)를 드래그 할 때 레이어 사이의 거리를 조정 합니다.

* 또는 Make Grid 옵션을 사용하십시오. 원 모양(circle shape,)을 선택한 다음 툴바(Toolbar)에서 격자 만들기(Make Grid)를 선택하고 다음 설정을 입력하십시오.


4 개의 원 모양(circle shapes)이 있습니다.  4 개의 행(rows)이 좋습니다. 각 행 사이에는 20px의 여백(Margin)이 있고, 1 개의 열(Column)만 필요합니다.

격자 만들기 도구(Make Grid tool)를 사용하는 방법을 보여 줬습니다. (여기서는 Alt + Drag를 사용하는 것보다 훨씬 쉽습니다). 그러나 많은 레이어(layer)로 작업 할 때 좋습니다.

다시 돌아와서, 첫 번째 원(circle)을 선택한 상태에서 Hex (#) : 95BB6C색상을 지정합니다.

이제 다양한 아이콘(icons)을 사용하여 해당 서클(circle)에 올려 놓을 것 입니다. Iconjar로 돌아가서 (그리고 앱의 검색 기능을 사용하여), 다음 아이콘을 찾아서 우리 디자인으로 드래그 할 것입니다 ...

* User (Name field) -  (이름 필드)

* Mail (Email field) - (이메일 필드)

* News (Subject Line field) - (제목 라인 필드)

* Pencil (Message field) - (메시지 필드)

일단이 아이콘을 Sketch로 넣어 주세요. 색상을 변경 한 다음 Inspector에서 정렬 도구(alignment tool)를 사용하여 모든 것이 멋지게 보이도록하십시오. 그리고 다음과 같은 것이 있어야합니다 ...

이제 텍스트 필드(text fields)와 메시지 상자-message box (텍스트 영역)를 빠르게 만들어 보겠습니다.

직사각형-Rectangle (R)을 그려서 너비(Width)를 370px로하고 높이(Height)를 40px로 만든 다음 이전에 아이콘에 사용한 방법 중 하나를 사용하여 3 번 복제(duplicate)합니다.

다음 설정을 추가하십시오 ...

* 모든 4 개의 모양 레이어(shape layers)에 2px 픽셀 경계 반지름(Border Radius) 추가

* 메시지 상자(message box)의 높이(Height)를 230px로 변경하십시오.

* 이름 필드(name field)에 Hex (#) : D5D5D5 색상을 지정하고 다른 필드에는 F1F1F1 지정 합니다.

* 텍스트 필드(text field)와 아이콘 사이의 거리를 10px 픽셀로 지정 합니다.


잘 하셨어요! 이제 다음과 동일하게 해야 합니다 ...


필드에 텍스트 자리 표시자(text placeholder)를 추가해 보겠습니다. 아래 이미지에 표시된 다음 설정 사용 중 ...


자리 표시 자 텍스트(name placeholder text)의 경우Hex (#) : 666666 색을 설정하고 전자 메일(email), 제목(subject line) 줄 및 메시지 상자 텍스트(message box text)의 경우 D5D5D5로 설정합니다.

그런 다음 자리 표시 자 텍스트(placeholder text )가 텍스트 필드(ext field)에 올바르게 정렬되어 있는지 확인하십시오.


Submit button 작업하기만 하면 됩니다. 그러면 모두 끝났습니다!

다음 설정으로 직사각형-Rectangle (R) 그리기 ...


그리고 다음 설정을 가진 텍스트 레이어-Text layer (T) ...


이것이 우리의 연락처 양식(contact form)이며, 연락처 섹션은 모두 완료되었 습니다.

Let’s finish up with a footer

Footer로 마무리하자

데스크톱 아트 보드(Desktop artboard)를 마무리해야합니다. 소셜 아이콘과 텍스트는 동일시 해야겠지요? 무슨 소리냐구요?

이 마지막 부분에서 만들 것입니다 ...


직사각형-Rectangle (R)을 Artboard의 전체 너비(width) 인 200px 픽셀 (Height)을 그리며 Hex (#) : 303030 색상으로 지정합니다.

이전에 Iconjar에 설치 한 Entypo (소셜 아이콘) 세트에서 Twitter 아이콘 (우리가 필요로하는 원(circle)이 없는 아이콘)에 대한 빠른 검색을 수행하고 이를 우리 디자인에 끌어다 놓습니다.

우리는 디자인에 포함 된 모든 소셜 아이콘(social icon)의 크기를 약간 늘릴 것입니다. 자물쇠(padlock)를 사용하여 비율을 유지하려면 다음 설정을 입력하십시오 (Iconjar에서 드롭 한 다른 아이콘에 대해서도 동일하게하십시오) ...


아이콘에 Hex (#) : 95BB6C 색상을 지정하십시오 (폴더가 아닌 모양 레이어( shape layer )를 선택하십시오).

이제 다음 설정을 사용하여 아이콘 옆에 텍스트를 추가 할 수 있습니다.


그런 다음 아이콘과 텍스트를 모두 선택하여 Inspector의 정렬 도구(alignment tool)를 사용하여 정리하십시오.

자, 앞으로 나아가서 다른  소셜 플랫폼 (예, Dribbble, Instagram, Medium, Vimeo)을 위해이 과정을 반복 하십시오.

아주~ 잘되고 있습니다!

소셜 플랫폼 요소(social platform element)를 추가로 만들었 으면 모든 항목을 선택하고 Inspector의 정렬 도구(alignment tool)를 사용하여 모든 것이 잘되어있고 정교한지 확인하십시오.

Footer 글에 요소를 균등하게 배치하려면 Distribute Horizontally 옵션도 사용하십시오.


소셜 아이콘(social icon) 아래에 표시 할 짧은 저작권 텍스트(short piece of copyright text)를 추가하면 다음과 같은 내용이 표시됩니다.


우리가 끝내기 바로 전에 잠깐.

Footer 아래에 여분의 Artboard의 공간이 있는 경우 (Footer 글 앞에 모든 것을 잘 정렬해 놓았습니다). 당신은 그 지방(공간)을 다듬고 싶을 겁니다.


제 경우에는 40px입니다. 따라서 레이어 목록(Layers List)에서 Artboard를 선택하십시오.


Inspector 패널로 이동하고 높이(Height) 설정에서 우리는 이전에 기억했던 것처럼 약간의 수학을 수행하고 그 픽셀을 뺍니다 ...


잘 하셨습니다.이 부분을 이렇게 마무리 하시고 오늘은 푹 쉬세요.

4편에서는... 

이 튜토리얼 시리즈의 4편에서는, 우리는 디자인을 완성하고, 태블릿과 모바일 기기용을 만들기 위해 디자인을 맡게 될 것입니다. 조만간 다시 뵙기를 바랍니다.

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

Marc


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



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

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

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





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







마치며...

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

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

원본 링크 입니다.


리뷰