[💻] psd포토샵 시안보는법

실제 실무 psd시안보고 퍼블리싱하기!!

📌 디자이너가 주는 시안 종류

제플릿 – 여백,css,사진 다 다운받을 수 있음
Figma - 여백,css,사진 다 다운받을 수 있음
xd - 여백,css,사진도 다 다운받을 수 있음
포토샵 – 제일 많이 씀, 단점은 무거움

✏ 제작 순서

1. 디자이너에게 시안받기
2. 구현가능한지 기획문서나 디자이너 의도파악 협의
3. 이미지 크롭jpg,png , 폰트파일제공(ttf,otf) → woff,woff2,eot,svg ..등등
4. 마크업 → css까지 ->js(X)
5. 혼자 검수

📌 포토샵

자주쓰는 포토샵 단축키

v -> 선택툴
m -> 수치재는툴 (드래그로~)
v -> 폰트클릭 (- > 창- > 문자) -> 폰트정보
i -> 스포이드색카피하고 오른쪽 하단에 색정보볼수있다.

ctrl + h -> 가이드선 숨키기
ctrl + r -> 눈금자
가이드선 만들기 -> 눈금자에서 드래그

ctrl + t - > 정보영역보기(F8) 수치를 바로알 수 있다.
ctrl + alt + I -> 설정 사이즈보기

✏ 포토샵에서 사진 저장

1. 분할영역도구로 드래그해서 자를부분 만들어놓는다.

영역을 모른다면 배경레이어를 끈다(👁)

2. ctrl 누르고 클릭 선택
3. alt누르고 선택 후 드래그 (복사가됨)
4. ctrl + shift + alt + s. -> 웹용으로 저장!
5. png저장시에는 배경을끄고 저장 -> png24선택

🔑 png -> 아이콘과 로고

✏ 웹용으로 사진저장시

여러개 저장할때는 shift누르고 여러개 선택

save누르고 selected slices로 선택 되어잇는지 확인

🔑 각 영역 선택이 안된다면?

레이어로 선택되어있는지 확인

✏ 포토샵에서 사이즈보는법

V선택툴을 이용하여 선택 -> ctrl + t -> F8

⭐⭐⭐⭐⭐

📌 라인하이트 구하기

-> 한줄일 때 라인하이트가 없거나 말도 안될 때 재는법

1. 그리드선 없애기
2. m툴로 글자 사이즈 재기
3. 폰트사이즈 – 글자사이즈/2
4. 혹시나 홀수 ex)9면 위5,아래4로 해주기
5. 글자 위에 네모칸으로 사이즈 5 잡아주고 위에부터 네모칸까지 사이즈 재주면됨

• 기본적으로 line-hight를 1로 초기화 시켜놨기 때문에
  폰트사이즈 = line-hight

• 한줄일때는 높이가 폰트사이즈인거고 여러줄일때는 line-hight 를 보고해야함
• 글자 사이즈(라인하이트) 보고 글자 높이 네모로 잡아준다음 라인하이트-네모 /2