Fastcampus - Sketch

 Sketch + Zeplin + Marvel

1. Sketch - Vector 기반이라 다양한 해상도 적용가능 + Symbol + Plugin + Works with Zeplin(개발자협업유리)

• Toolbar Customize - right click on menu bar > customize
• Delete Artboard but keep the elements inside : select artboard > Ungroup from menu bar
• move space : space bar + move
• check space between elements, artboard : click element + alt
• Draw Shape : Shift (right ratio) / Option (from center) / SpaceBar(move around)
• Text layer - click drag to set text box
• Shape - Radious to give different value to each point : Radious [0,100,0,100]
• F : fill turn on/off     B : border turn on/off
• ctrl + C : spoid
• Select shape point in sequence : tab
• Shape open path / close patch
• draw drop icon - to make asymmetrical shape, copy-paste bezier handler position
• Text on path > create curve or path and click text - drag close to path
• you can calculate inspector section numbers > 100*2 (type in like this)
• select layer above > shift + tab 
• select layer bottom > tab
• select layer and alt+cmd click-drag > allows layer to move without clicking it directly

   

 

• The designer should specify text alignment > By using text box > how long text area is (this will make Auto to fixed value in the inspector) > passing to the developer, text box should be Fixed
• Shape radius > (20,10,40,40) seperate with comma
• Mask > there are two ways to create mask. 
  • 1. Mask shape layer - image layer > select both and layer > mask > mask with selected shape
  • 2. Mask shape layer > (right click) Mask > any layer or shape above it will be masked.
  • 3. Alpha mask > Layer - mask - mask mode - alpha mask
• Layer blur effect > zoom blur / motion blur / background blur(need to unfill (uncheck fill) 
• Too much blur in one decreases sketch performance
• Style could be copy and pasted by right click > copy style or alt+cmd+C > alt+cmd+V
• ctrl + C : color picker

 

 

 

 

• 아이콘 그리기 > first set the box area > draw icon inside > make shapes into combined shape by Union > unfill (uncheck Fill) the box area shape > Group combined shape and box area(Rectangle shape layer)
• Transform 

 

 

• Ctrl + p : view as pixel mode
• thumbnail : Use mask shape with fill>patterm>choose image (you can also use as style, so alt+cmd+C and V works to chage image)
• 픽셀모드 > 이미지를 리소스로 출력해서 전달할때 이미지가 픽셀그리드에서 벗어나 깨진 레이어가 있진않은지 확인할때 요긴
• funtion + side arrow > switch between artboards
• funtion + updown arrow > switch pages

 

 

 

 

 

 

19. 스케치로 작업 효율도 높이기 - 02. 작업 효율을 높이는 기능 

 Design system 

 

• layer style - reset layer style / update layer style / detach from layer style / organize layer style
• text style
• layer with shared style applied appear as purple icon at the left menu bar
• replace text font > right top - missing fonts (click and set to replace fonts)
• replace color > menu - edit - find and replace color (alt+cmd+F)

 

 

 

 

 

20. 스케치로 작업 효율도 높이기 - 03. 리사이징, 멀티 해상도 대응

• 조건부 리사이징 > select artboard > Adjust content on resize
• iPhone tap bar height is the same in iPad > set tap bar height fixed
• automatically centered icon will stay at the centered location with equal left-right margin. So SOCIAL logo icon does not need to have pin to edge set

 

21. 스케치로 작업 효율도 높이기 - 04. 심볼-기초

 

• 심볼편집 > overrides 는 편집가능한 텍스트 레이어가 들어가는듯. 왼쪽 예시의 경우 2 와 '내용을 재정의할수 있습니다' 가 이에 해당
•  심볼 내의 심볼을 설정하여 override setting을 심볼별로 넣어줄수도 있다.
• Also, override label and sequences are set same as layer name and arrange within symbol page

 

 

• To categorize symbols with file-tree system, using Categorie1/icon. 

 

 

 

 

 

• try to make symbol templet cover as many cases as possible

 

 

 

 

 

 

 

 

 

 

 

 

 

 

22. 스케치로 작업 효율도 높이기 - 05. 심볼-심화 

 

- 실무에서 사용하는 심볼의 종류: 공통 컴포넌트(네비게이션바, 탭바, 리스트...) / 각종아이콘(심볼내 심볼) > 요런애들은 일일이 꺼내쓰기 어려우니까 심볼 적용 및 정리된 페이지 만들어두고 복붙으로 작업하면 편하다!

 

 

 

 

 

 

- 심볼 만들때 주의할 점: Line / Shadow / icon-include area box (to set consistent margin&to use override - override automatically detects same dimension as same category) > use box as background without outline and fill

 

 

 

23. 스케치로 작업 효율도 높이기 - 06. 심볼로 작업 효율 높이기