Adobe Photoshop

웹페이지를 제작하는 과정에서 퍼블리셔는 
웹디자이너가 작업한 시안을 가지고 퍼블리싱을 한다.

이때 디자이너는 여러 툴을 사용해서 시안을 만드는데 
그 중 하나가 어도비 포토샵이다.

포토샵 외에도 피그마, XD 같은 툴이 존재하지만, 
다른 툴들은 작업하기 수월하기에 비교적 어려운
포토샵을 미리 익혀두는 것이 좋다!

- 피그마, XD는 벡터 기반의 툴이며 포토샵은 픽셀 기반
- 툴끼리 겹치는 단축키나 다양한 기능들이 존재

단축키 + 팁 모음

1) Space bar

	- 스페이스 바를 누른채 마우스로 이동이 가능하다.
    

2) v

	- 선택하는 툴이며 정보를 확인하기 위해 사용된다.
    

3) m

	- 수치를 재는 툴이며 드래그를 통해 너비와 높이 계산이 가능하다.
    (보통 포토샵은 불친절해서 직접 수치를 구해야하는 경우가 많다.)

4) i

	- 색상 정보를 확인할 수 있는 툴이며 색을 카피하면 
      왼쪽 메뉴 창에 색상 정보가 나타난다.

5) ctrl + h

	- 가이드 선을 숨기는 기능이다.

6) ctrl + r

	- 좌측과 상단에 눈금자 표시하는 기능이다.

7) 가이드선 만들기

	- 위에 표시된 눈금자를 드래그 하면 가이드선이 생성된다.

8) F8

	- 정보영역보기 기능으로 수치 확인이 가능하다. 

9) alt + click

	- layers에서 alt를 누른채 눈동자 모양을 클릭하면 
      선택한 영역을 제외하고 레이아웃을 숨길 수 있다.
      (이미지의 배경 영역 확인이 어려울 경우 사용된다.)

10) c (slice tool)

	- 드래그를 통해 선택한 영역을 자를 수 있다.

11) ctrl + alt + shift + s

	- 웹 전용으로 저장하는 방법이다. 
    - 원하는 영역을 저장할 경우 png는 배경을 끄고 저장한다.
    - 여러 영역을 저장할 때는 shift를 누르고 지정한 슬라이스는 
      selected slices로 지정하고 저장한다.
      (선택된 영역은 갈색 테두리로 보여진다.)
      

12) line-height

	- 시안을 보면 행간의 크기가 정해지지 않은 경우가 있다.
      그럴경우 실제 폰트 사이즈 크기에 나누기 2를 해서 
      위아래로 여백을 주게 되면 수월하게 작업이 가능하다.

13) 모바일 시안

	- 포토샵은 픽셀 기반으로 이미지 작업이 돼서 디바이스 간의
      해상도 차이로 인해 사진의 흐릿함과 깨짐이 나타난다.
    - 위와 같은 문제 때문에 포토샵 시안인 경우 2배 확대된 시안을 
      받을 수 있다.
    - 이런 경우 이미지는 2배 확대된 상태에서 자른 뒤 저장하고 
      실제로 코딩할 때는 1/2로 줄이고 이미지 크기도 조정한다.

14) ctrl + alt + i

	- 모바일 시안을 받을 경우 리사이징이 필요하다.
      이 단축키를 사용하면 사이즈 조절이 가능해진다.

15) z & z + alt

	- 이미지를 확대시킬 수 있는 기능으로 alt를 누르면 축소도 가능하다.
    

16) dbclick

	- layers 영역에 레이아웃을 더블 클릭하면
      레이아웃의 스타일 정보가 나타난다.

17) PSD to CSS - box shadow

	- 포토샵 box-shadow를 css 소스로 변환해주는 사이트
    

Convert PSD to CSS

18) opacity

	- 이미지의 색상을 따올 때 opacity가 들어가있는지 확인해야한다.
    - opacity를 100%로 조정 후 실제 색상을 확인 필수