"디자인의 기본, 가이드라인 그리기"
웹디자인 일을 시작한 지도 벌써 10년이 훌쩍 넘었다.
그동안 일을 하면서 가장 중요하게 생각했던 기본 중의 기본이 가이드라인 잡는 것이다.
화면의 중심, 상하좌우대칭이 잡혀야 채우기도 비우기도 비대칭 디자인 컨셉을 잡기도 하는 것.
"포토샵 따라하기"
요즘에는 워낙에 어렸을 때부터 포토샵과 친근하기에 포토샵을 사용할 줄 아는 사람들은 많다.
기본적으로 사진을 보정할 때에도 사용하고, 1인 사업자로 어떤 일을 시작하더라도 배너 하나를 만들기 위해서는 포토샵이 기본이다. 혹은 정말 간단하게 사진 사이즈 수정을 하기도 한다.
포토샵의 많은 기능 중에 오늘은 웹디자인을 위한 가장 기본적인 '가이드라인 잡는 법'을 알아보도록 한다.
티스토리 블로그를 기준으로 잡았다.
위와 같은 레이아웃으로 디자인을 할 예정이라고 생각해보자.
위에서부터 헤더 / 메뉴 / 메인 이미지 / 콘텐츠 부분이 된다.
헤더와 메뉴 사이의 공백, 메뉴와 메인 이미지, 메인 이미지와 콘텐츠 사이의 공백이 적절해야 보기에도 예쁘다.
너무 좁아도 답답해 보이고 너무 넓어도 화면이 비어 보인다.
기본 가이드라인은 상하좌우 대칭이 맞아야 디자인 요소를 비대칭으로 넣더라도 어느 위치에 넣어야 잘 조화가 되는지 알 수 있고 공백을 어느 정도 해야 적절한지 등 다양한 부분을 확인할 수 있다.
이것을 잘 맞춰서 적절하게 예쁜 디자인을 하기 위해서 가장 기본이 되는 것은 '가이드라인 잡는 것'이다.
SNS상에 돌아다니는 클라이언트들의 주문을 들어보았는지 모르겠지만, 심플하면서도 비어 보이지 않고 귀여우면서 아름답게, 화려하면서도 깔끔하게 등등 다양한 주문을 어느 정도 맞추려면 이 '가이드라인 그리는 것'이 가장 기본이 된다.
📌 포토샵 가이드라인 잡는 방법(Drag & Drop)
포토샵 화면 Ruler에서 간편하게 마우스 드래그 앤 드롭(Drag & Drop)을 통해 가이드라인을 그릴 수 있다.
✅ Document의 Ruler 설정하기
만약 Document에 Ruler가 보이지 않는다면, 상단 메뉴에서 View > Rulrers에서 Ruler를 보이도록 설정할 수 있다.
포토샵은 단축키 사용이 작업 속도를 좌우하기 때문에 단축키를 알아놓으면 좋다.
Ruler 보이고 안 보이고 설정은 Ctrl + R로 할 수 있다.
가이드라인 세로는 좌측의 Ruler에 마우스를 클릭한 후 드래그 앤 드롭(Drag & Drop)으로 그릴 수 있다.
가이드라인 가로는 상단의 Ruler에 마우스를 클릭한 후 드래그 앤 드롭(Drag & Drop)으로 그릴 수 있다.
✅ 가이드라인 드래그 앤 드롭(Drag & Drop)의 장점 및 단점
장점은 화면에서 간편하게 마우스 움직이는 것 하나로 가이드라인을 그릴 수 있다는 것이고, 단점은 정확한 수치에 맞게 가이드라인을 그리기가 힘들다는 것이다.
📌 포토샵 가이드라인 잡는 방법(메뉴 및 단축키)
더 정확한 위치에 맞는 가이드라인을 그리기 위해서는 수치를 입력하는 것이 가장 정확한 방법이다.
수치를 입력하여 가이드라인을 그리는 방법은 상단의 메뉴에서 View > New Guide에서 그릴 수 있다.
가이드라인 그리기 단축키는 Shift + Ctrl + A이다.
이렇게 가이드라인을 그릴 Position을 입력할 수 있다.
좌측에서 몇 픽셀 위치에 그릴지, 상단에서 몇 픽셀 위치에 그릴지 정확한 값을 입력할 수 있다.
📌 포토샵 가이드라인 보이지 않게 설정하기
가이드라인을 잡아놓으면 시선에 자꾸 걸려서 디자인하는 중간중간 불편할 수 있다.
이때, 가이드라인을 보이지 않게 설정할 수 있는데 상단 메뉴에서 View > Extras로 가이드라인을 보이지 않게 설정할 수 있다. 작업 속도를 위해 단축키도 알아놓도록 하자. 이 단축키는 Ctrl + H이다.
📌 포토샵 가이드라인 지우기
가이드라인을 모두 잘못 그렸거나, 삭제할 일이 생긴다면 모두 지워준다.
상단 메뉴에서 View > Clear Guides에서 가이드라인을 지울 수 있다.
이 기능은 따로 단축키가 설정되어 있지 않은데, 스스로 이 기능에 단축키가 필요하다면 단축키를 지정할 수도 있다.
(이것은 다음에 포스팅할 예정이다)
✅ 가이드라인 메뉴 및 단축키의 장점과 단점
사실 포토샵을 사용하는 많은 작업자들은 상단의 메뉴 기능을 거의 사용하지 않는다.
대게 작업할 때 이미 익힌 단축키로 사용하며 마우스는 그리는(디자인하는) 용도로만 사용한다.
굉장히 작업 속도가 향상되고 포토샵의 다양한 메뉴, 기능들을 정확하고 빠르게 활용할 수 있다.
단점은 포토샵이 익숙하지 않은 사용자들에게는 외계어와 같이 느껴진다는 것.
포토샵을 전문적으로 사용하고 싶다면 메뉴의 기능과 함께 단축키를 익히는 것이 중요하다.
✅ 파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음
'포토샵' 카테고리의 다른 글
| Adobe - 포토샵 머리카락 색상, 헤어 컬러 변경하기 (1) | 2024.04.25 |
|---|---|
| Adobe - 일러스트레이션 : 텍스트 강조 디자인 타이포그래피 num.1 (0) | 2024.04.24 |
| 포토샵 제품디자인! 목업파일에 텍스트, 그림 넣기(mock-up) (0) | 2023.03.22 |
| 포토샵으로 사진 평행 맞추기 (0) | 2023.02.08 |
댓글