포토샵에서 아트보드, 그리드 만들기

 

안녕하세요. 머프입니다. 오늘부터 포토샵으로 웹디자인 시안 잡는 과정을 단계별로 알려 드리려고 합니다.

잘 따라오시면 웹디자인할 때 기본적인 디자인 레이아웃을 만드실 수 있습니다.

단, 여기서 말하고자 하는 내용은 디자이너가 디자인을 할 때

기본적인 디자인 틀을 잡는 방법을 알려드리는 것이며

이후 디자이너의 개인 역량인 화면에 녹아드는 감각, 감성 등은 다룰 수 없는 점은 이해해 주시기 바랍니다.

이점은 지극히 개인적인 성향이므로 이점을 다룰 수 없는 점은 양해해 주시기 바랍니다.

(이것 때문에 디자이너가 먹고사는 것 아니겠습니까 ㅎㅎㅎ)

 

 

아래는 예제 화면입니다.

예제를 토대로 비슷한 화면을 만들까 합니다.

 

자 시작해 볼까요.

아래는 포토샵 처음 실행 화면입니다.

포토샵을 실행하면 Splash screen으로 안내하게 됩니다.

 

제가 사용하는 포토샵 환경은 위에 보는 것처럼

adobe photoshop 23.2 version이며 맥용 프로그램입니다.

 

 

처음 포토샵을 실행하게 되면 이런 인터페이스의 화면을 접하게 됩니다.

 

file-new 메뉴를 선택하여 새로운 문서를 만듭니다.

 

화면 사이즈를 선택하는 화면이 나오게 되는데

오른쪽에서 witdh 1600, height 1200으로 설정하고 아래 artboards를 선택하고 create를 선택합니다.

여기서 사이즈 설정은 본인에게 맞는 화면 사이즈를 설정하시면 됩니다.

전 요즘에 위에 사이즈대로 작업을 많이 해서 1600, 1200으로 했습니다.

이점 참고하세요.

 

새롭게 가로 1600, 세로 1200 사이즈의 화면이 만들어졌습니다.

이제 디자인 작업을 할 수 있는 환경이 만들어졌습니다.

여기서 artboard를 하나 더 만들고 싶으면

 

왼쪽 tools 박스에서 artboard tool을 선택하거나 move tool을 선택해서 화면 'Artboard1'을 선택하시면 됩니다.

여기서 'Artboard1'을 더블 클릭하거나 오른쪽 layer 박스에서 이름을 더블클릭하면 이름을 수정할 수 있습니다.

 

Artboard를 선택했으면 복사할 방향으로 + 표시를 눌러서 artboard를 복사합니다.

 

위에서 보이는 것처럼 똑같은 artboard가 생성이 되었습니다.

 

여기서 복사한 dartboard의 2000픽셀 사이즈로 변경하도록 하겠습니다.

(Tip. 스크린샷에서 보이는 것처럼 2000픽셀로 변경할 때 방법으로는 +800으로 하면 2000으로 바뀝니다.)

 

서브 페이지도 작업할 수 있는 환경이 갖추어졌습니다.

이제 웹디자인 작업할 때 가장 처음에 해야 하는 그리드를 설정하도록 하겠습니다.

(Tip. 스크린샷에서 보이는 것처럼 2000픽셀로 변경할 때 방법으로는 +800으로 하면 2000으로 바뀝니다.

이부분은 나중에 artboard가 많을때 이리저리 옮기는 상황이 발생을 하면 artboard를 x,y 좌표 정렬시 유용하게 사용됩니다.)

 

상단 메뉴 View-new guide layout 선택합니다.

 

여기서 잠깐!

그리드 설정 시 위 사이트(http://gridcalculator.dk/)를 이용하시면 도움이 많이 됩니다. 그리드 설정 시 전체 폭, 칼럼 수, 거터 값, 마진 값 등 수치를 바로 볼 수 있으므로 참고하시기 바랍니다.

 

new guide layout 창에서

칼럼 수와 가로폭, 거 더 값을 입력합니다.

 

이미지에서 보는 것처럼

12칼럼의 그리드가 적용된 것을 볼 수 있습니다.

 

한번 적용된 그리드는 새롭게 다른 치수를 입력하지 않는 이상 계속 사용할 수 있으므로

새롭게 생성된 artboard에 계속 적용해서 사용하면 됩니다.

 

이제 웹디자인을 할 수 있는 기초적인 화면이 구성이 되었습니다.

다음 팁에서는 지금의 artboard를 background로 해서 상단 메뉴를 작업하도록 하겠습니다.

 

오늘도 방문 및 읽어주셔서 감사드리며

추운 날씨 건강 유의하시고 즐거운 하루 보내시길 바랍니다.

감사합니다.

 

 

포토샵에서 아트보드, 그리드 만들기 : 디자인팁