[포토샵 실전] 캔버스 사이즈와 그리드 나누기

 

 

 

 

 

 

상세페이지 & 웹페이지 작업 시 캔버스크기 설정하기

---

1) 모니터와 해상도

 시대마다 기종마다 모니터의 해상도가 다르며, 그 해상도를 참고하여 작업사이즈를 유동적으로 조절 할 수 있다.

 

 

2) 일반적으로 8의 배수를 사용한다.

8X180=1440

8X160=1280

8X120=960

8X45=360

 

 

3) 웹페이지 작업 시 1920px 캔버스를 만들어서 1280px로 작업영역을 설정하는 방법도 있다.

 

 

 

4) 상세페이지는 860px 사이즈가 업계 표준이다.

 

 

 

 

 

그리드

---

1) 그리드를 그리는 이유

 컨텐츠를 일률적으로 배치하기 위해 그리드 시스템을 사용한다.  그리드를 참고하여 컨텐츠를 2개,3개,4개 등 배치할때

간격과 마진 등을 일률적으로 배치하여 효율적이고, 디자인에 안정감과 통일감을 줄 수 있다.

 

 

 

 

2) 그리드의 구성요소

Columns: 컬럼은 그리드의 열의 갯수를 뜻한다. 

                웹에서는 보편적으로 12Columns를, 모바일에서는 4Columns를 주로 사용하지만,

                 디자인에 따라 변경이 가능하다.

Gutter:  단과 단 사이의 간격을 뜻한다.

Margin: 마진은 좌우여백을 뜻한다.

 

*모바일에서는 마진 16dp을 권장한다.

 

 

 

 

 

3) 그리드 빠르게 자동으로 그리는 방법

 View메뉴 > new guide layout 을 클릭해서 

Column	12
Gutter	20px
Margin left	300px
Margin right	300px

 *마진값은 상황에 따라 조절하면 된다. 

  ex) 1920px 캔버스 중 1320px을 작업영역으로 설정할 것이라면 1920px-1320px=600px 

        즉 양쪽에 300px 씩 여백을 주면 된다.

*1320px로 많이 작업 하는 이유는 1280px로 작업 시 양쪽 맨 끝에 20px 여백을 추가하면 1320px 되기 떄문이다.

 

 

 

 

4. Lock Guides

VIEW메뉴 > Lock Guides 를 눌러 가이드가 움직이지 않도록 설정한다.