Photoshop에서 가이드라인 작업에 도움을 주는 – GuideGuide

뭐랄까… 역시 제일 만만한건 포토샵이겠죠??

이미 나온지는 한참 된 거지만, Photoshop에서 페이지의 레이아웃용으로 그리드 설계나, 오브젝트를 정렬시키기 위해 사용되는 가이드 기능은 빠질 수 없는 기능이지만, 귀찮은 작업임에 틀림없습니다. 특히 규칙적인 간격의 그리드를 그려야 할 경우 반복작업에 1px차이때문에 다시 계산해야 하는 경우도 생기고, 짜증이 나기도 하는데 GuideGuide를 사용하기 시작하면서는 비교적 편안하게 작업을 하고 있습니다.

 

guideguide

아래이미지는 샘플로 만들어본 이미지입니다. 설정창에 수치만 제대로 입력하면 자동으로 가이드를 작성해주기때문에 작업이 한결 수월합니다. 아래의 수치는 상하좌우를 각각 30px씩 띄우고 그 안에 다시 가로, 세로 10등분을 시킨겁니다. 이 작업을 하나하나 룰러에서 맞추는 작업을 언제 하고 있겠습니까…수치만 제대로 입력하면 한번에 생성되는 가이드는 업무 속도를 어느정도는 개선시켜줄거라 생각됩니다.

 

extension-guideguide

 

그리고, 자동이라고는 하지만.. 무조건 정확한 사이즈로 균등하게 그려 주는건 아니라는 점을 인식해 둘 필요가 있습니다. 아래 예시처럼 960px의 캔버스에 10px로 간격을 두면서 6등분을 시키면 151, 151, 152, 152…의 수치로 가이드가 생성됩니다. 즉, 정확히 균등한 간격의 가이드를 만들기 위해선 나름대로 계산이 필요합니다. 돌다리도 두드리고 넘어가는 버릇을…

 

가이드 생성 예제

 

Adobe에선 어째서 이런 기능을 기본기능으로 지원하지 않는지 의구심이 들 정도로 인터페이스가 훌륭하다고 생각됩니다. 메뉴나 아이콘도 직관적이어서 그렇게 많은 비용(시간)을 투자하지 않아도 툴을 익힐 수 있습니다. Photoshop의 CS5, CS6, CC를 지원하고 있으며 무료이니 부담없이 사용해 보시면 좋을것 같습니다. 그리 자주 사용하는 툴은 아니지만, 가려운곳을 긁어주는 기능이라 생각됩니다.

 

GuideGuide – Download

CS4등 하위버전이 필요하신 분은 이쪽을 참고 하시기바랍니다.

(Visited 1,980 times, 1 visits today)

sapjil

서울거주의 회사원으로 DESIGN/HTML/CSS를 생업으로 하고 있는 마크업 엔지니어 입니다. 프론트엔드 엔지니어로 거듭나고자 틈틈이 JavaScript를 공부하고 있습니다. 이 블로그 SAPJIL에서는 웹 사이트 제작에 필요한, 삽질을 줄일 수 있는 정보를 공유합니다.

2 thoughts on “Photoshop에서 가이드라인 작업에 도움을 주는 – GuideGuide

  1. 안녕하세요~ 죄송한데요.. CS5버젼은 어디서 다운 받을 수 있나요? 프리 버젼 받으니 버젼이 낮아서 설치가 안된다고 나오네요 ㅠㅠ

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다