티스토리 뷰

스케치앱 Sketch 3.7


스케치앱 스터디 2주차

원하는 모양을 자유자재로 만들 수 있도록 숙달시키기 위해 핀터레스트에서 맘에 드는 이미지를 골라서 따라 만들어 보았다. 내가 주로 쓰는 효과는 거의 다 만들 수 있었다. 


1. 스케치앱으로 그래픽 요소를 만들기 위해 참고할 점


원형 라인 그래프 만들기 

원형 라인 그래프를 그릴 때 패스 편집 모드로 들어가서 자르기 원하는 구간에 맞춰 앵커를 추가하고 Scissors 를 사용해 잘라내면 편하다.  [Layer - Paths - Scissors]


Outer Glow 효과 만들기

스위처를 만들 때 포토샵에서의 습관대로 Outer Glow를 찾았는데 없었다. Shadow에서 X, Y 좌표값을 0으로 하고, Blur값만 적용하면 아우터글로우 효과를 만들 수 있다. 필요한 경우 색상에서 블렌드 모드를 적절하게 바꿔준다. 다만 배경을 투명한 상태로 익스포트 할 때 블랜드 모드는 적용이 안되는 점을 고려할 것. 

아주 간단한건데 처음에 이 방법이 먼저 떠오르지 않아 다른 방법들로 삽질을 하다가 생각을 해냈다. 주변에 스케치앱 쓰는 사람들이 많아져서 이런 모래알 같은 노하우는 사탕하나 건내주듯이 나눌 수 있으면 좋겠다. 


Path Combine

Combine을 이용하면 다양한 모양의 Shape을 만들 수 있다. [Layer - Combine - Union / Subtract / Intersect / Difference]


Text Layer - Rotate 됨, Transform 안됨.

Text 레이어는 Rotate는 가능하고, Transform은 불가능 하다. Outline으로 변환하면 Transform 가능하나 그러면 글자를 변경할 수가 없으니 활용도가 떨어지는 듯. 아래 이미지에서 좌측은 Text Layer 로 카드방향에 맞춰 Rotate 했고, 우측은 Outline 변환하여 카드방향 및 기울기와 어울리게 Rotate & Transform 했다. 



2. 서체 가이드

서체 부분은 아직 다양한 테스트를 해보기 전이다. 다만 서체 가이드 보관용 Page를 별도로 만들어서 관리하면 편할 듯 하다. 



3. IconJar - 아이콘 관리 

스케치앱을 사용하기 위해 처음으로 맥OS를 접했다. 그래서 아직은 몇 개의 애플리케이션 외에 설치된 것이 없었는데 서핑 중에 보물 같은 앱을 발견했다. 아이콘 관리 애플리케이션이다. 앱 설치 후 무료 아이콘 셋을 다운로드 받아서 추가해 보았다. 이건 마치 내 노트북 전용 Iconfinder 같다. IconJar에 추가된 아이콘 파일을 대상으로 검색어를 입력해 아이콘을 찾을 수가 있다. 또한 내게 익숙한 단어를 아이콘에 태그로 붙일 수가 있다. 

화면 좌측은 폴더 개념이다. 아이콘 셋을 추가하면 자동으로 생성되는데 별도로 추가할 수도 있다. 가운데는 폴더에 담겨있는 아이콘이 보여진다. 아이콘을 선택하면 화면 우측에 태그정보가 나온다. 이곳에서 태그를 추가할 수 있다. 태그에 한글은 지원되지 않는다. 


아래는 화살표 아이콘을 검색하는 화면이다. 이렇게 기특하게 찾아준다. 완전 사랑하게 될 듯 :-)

IconJar 다운로드 http://geticonjar.com



4. Content Generator 플러그인

스케치앱 공식 홈페이지에 소개된 플러그인 중 Content Generator를 사용해봤다. 이미지와 텍스트가 배치될 그리드를 만든 후 이 플러그인을 사용해 랜덤으로 더미 데이터를 한번에 채울 수가 있다. 한글을 지원하지 않아서 텍스트 생성 기능은 활용도가 떨어지지만 이미지 생성 기능은 쓸만하다.  

아래와 같은 화면을 만들 때 아주 유용하다. 아래의 이미지와 텍스트 모두 이 플러그인을 사용해 삽입했다. 단, 심볼에는 플러그인 적용이 안된다. Shape과 Text 레이어에만 적용되는 듯. 


플러그인 메뉴 (자동 생성해주는 컨텐츠 유형)

  • Geo - Belgium, France, Germany, Netherlands, USA (5개 나라의 도시명, 지역명을 랜덤하게 삽입해준다)
  • Images - Custom, Flickr Keywords, Red faces
  • Numbers - Dollars, Percentages, Pure numbers
  • Persona - Detail(Email, Phone), Names(Female, Female&Male, Male), Photos(Female, Male, Neutral)
  • Text - Custom string, Dummy text, Enumerate, Replace text, Time ago


이미지는 플러그인에서 자체적으로 삽입해주기도 하고, Custom 메뉴를 이용하면 내가 가지고 있는 이미지를 선택해서 삽입할 수 있다. 

텍스트는 여자이름, 남자이름, 이메일, 전화번호, 미국 등 일부 국가의 도시나 지역명 등을 랜덤하게 입력할 수 있다. 또한 일정한 숫자 범위를 입력하면 범위 내의 숫자를 랜덤하게 입력해 주기도 한다. 자세한 사용법은 다운로드 페이지에서 확인할 수 있다.  


Generator로 이미지를 한번에 삽입하는 과정

이미지와 텍스트가 배치될 그리드를 만들어 내가 가지고 있는 이미지를 한번에 삽입해 보겠다. 


1. 이미지를 삽입할 Shape을 전부 선택한다. 


2. 플러그인 메뉴 Generator - Images - Custom 을 실행한다.


3. 이미지가 저장된 경로에서 필요한 만큼의 이미지를 선택한다. 


4. 짠! 한번에 삽입된다.
이미지 위에 떠있는 사람이름도 이 플러그인을 사용해서 한번에 삽입했다. 텍스트 레이어를 전부 선택한 후 Generator - Persona - Names - Female & Male 을 실행하면 된다. 


Content Generator 다운로드 및 데모 https://github.com/timuric/Content-generator-sketch-plugin
설치방법 및 간단한 사용법도 이곳에서 확인할 수 있다.