포토샵 가이드라인 설정 쉽고 빠르게 guideguide 플러그인

포토샵 가이드라인 설정을 쉽고 빠르게 도와주는 guideguide 플러그인이 있는데요. 가이드 라인이 있어야 디자인 레이아웃을 쉽게 하도록 도와주는 그리드 시스템을 적용할 수 있습니다. 그리드 시스템은 보통 화면을 12개의 칼럼(세로줄)으로 나누는 화면 설계 시스템을 말합니다.

포토샵 가이드라인 플러그인을 다운로드 받기 위해 guideguide.me 를 방문합니다. 회원 가입 없이 무료로 다운받을 수 있는데요. 다운받은 파일을 더블클릭하면 어도비 확장 매니저가 설치 된 후 guideguide가 설치됩니다.

설치가 끝난 후 포토샵을 실행하고 창 - 확장 - guideguide 메뉴를 클릭하면 우측에 패널 화면이 나타납니다. 사용법은 간단한데요. ① 좌측선 ② 세로 중심선 ③ 우측선 ④ 가이드 지우기⑤ 상단선 ⑥  가로 중심선 ⑦ 하단 선 그리기 입니다. 

포토샵 가이드라인을 그린 후 [Make grid] 버튼을 클릭하면 실제로 가이드라인이 적용됩니다. 패널 상단 마진은 숫자로 입력하면 되는데요. 좌측, 우측, 상단, 하단 각각 2mm의 마진을 설정해 보았습니다. 아래 이미지를 보면 지금까지 설정한 가이드라인을 볼 수 있습니다.  

 

그 아래 보이는 설정은 열(column) 또는 줄(row) 개수대로 가이드라인을 그려주는 설정입니다. 아래 보이는 이미지는 열 넓이, 줄 높이, 열과 열 사이 간격(gutter), 줄과 줄사이 간격(gutter)입니다. 그 아래 설정은 열, 줄, 거터의 중심선을 그려주는 설정입니다.

열의 넓이 = { 문서 전체 넓이 - (거터 x 개수) } / 열의 개수 인데요. 전체 화면 960px 에 적용하면 좌, 우 여백 각각 10px, 컨텐츠 영역 940px, 12개 열 각 60px, 열 간격 20px 의 그리드 시스템이 적용됩니다. 대형 웹사이트 대부분이 그리드 시스템을 사용합니다.