이벤트 페이지 제작

- 이벤트 페이지

 이벤트 페이지란 웹 프로모션 플랫폼의 기본적인 페이지 형태로써 특정기간 동안진행되는 고객과의 소통을 위해 제작되는 광고 디자인 페이지 입니다. 현재 진행되는 이벤트를 고격에게 알리고 홍보하기 위해 만드는 디자인 페이지입니다.

이벤트 웹 페이지를 구성할 때 고려해야 할 구성요소는 이벤트의 흥미를 끌 디자인 요소, 이벤트 소개, 이벤트의 목적, 날짜 등을 고려하여 구성해야 함

---

기본적으로 배너같은 내용이 짧은 디자인은 3등분 레이아웃을 채택하지만 웹사이트나 이벤트 페이지 상세 페이지 같은 내용이 긴 디자인은 컬럼 그리드를 사용한다.(12등분으로 나눠 놓은 그리드, 15, 16, 20등 다양하게 활용이 가능하지만 주로 12 컬럼 그리드를 쓴다.)

 

view - new guide layout에서 12를 설정해서 나눠준다.

(사이여백(gutter)은 가로 크기에 따라 변경된다.

1000 - 여백이 20 여백의 갯수는 11개 여백의 크기만 220 나머지 영역은 780 이를 12로 나누면 맞아 떨어진다.)

 

계산한 크기에 맞게 도형을 만들어 준 후

 

모두 선택(ctrl + a)하여 맨 위와 왼쪽을 맞추어 준 후 현 레이어를 11개를 복사해준다.

 

그리고 마지막 레이어를 오른쪽으로 붙여 기준점을 맞춰 준 후 전체 레이어를 선택해 간격을 맞춰주면

 

ctrl + E로 통합하여 주면 앞서 설정한 가이드 라인에 맞게 그리드가 설정이 된다. 투명도를 낮추어서 주면된다. 이는 절대 이동되어서 안되기 때문에 락을 걸어야한다.

 

여백을 맞추기에 용이하고 레이아웃을 일괄적으로 만들기 좋다. 이후 코딩으로 설정할 때에도 연산하기 편해진다.

그리고 가로 그리드(Baseline Grid)를 함께 활용하면 원하는 간격을 맞출 수 있다.

 

큰 도큐멘트 속에 작은 도큐멘트를 넣을땐 반복적인 패턴으로 넣어줄 수 잇다. 

원하는 사이즈의 도큐멘트를 원하는 픽셀크기에 맞춰 만들어준 후 (너무 작기 때문에 Hand Tool을 더블클릭하면 화면 크기에 딱맞게 확대된다.)

제일 작은 1 Pixel 의 선을 만들어 Edit - Difine Patten 을 눌러 Baseline 패턴으로 저장해주고 원하는 그리드에 패턴으로 넣어주면 Baseline이 생성된다. 

이 그리드도 기준이 되기때문에 이동되지 않도록 Lock을 걸어주고 그룹으로 설정해 그리드를 완성해 준다.

---

이벤트 페이지에 있어서 랜딩 페이지, 비주얼 영역이 가장 중요하다 (사용자의 시선을 가져오도록 하기 때문에)

 

이미지를 설정하고 변경할 때 스마트 오브젝트로 변경하면 크기를 바꾸어도 많이 깨지지 않는다. 이미지를 배치할때 그리드의 간격과 위치를 보고 사용하면 유용하다 (이미지를 원하는 칸에 클리핑하여 이미지가 튀어나가지 않도록 하면 좀 더 깔끔하게 작업이 가능하다.)

 

레이어 스타일에서 그림자, 이미지 보정등을 사용해 원하는 느낌을 설정해준다.

 

제목은 행간이 작게 되면 디자인적으로 배치할 수 있다. 위치를 보며 행간, 자간을 늘리거나 줄여 설정해 준다.

 

제목과 같은 특정한 내용은 이텔리체(기울임체)를 넣어주면 강조가 될 수 있다.(세리프체의 경우 더 강조된다.)

브러쉬를 사용해 마스크 레이어를 사용할 수도 있지만 폴리곤 라쏘 툴을 사용해 원하는 영역을 선택해준 후 - Alt + Del 혹은 Ctrl + Del 를 사용해 블랙이나 화이트를 채워 사용할 수 있다. (점선은 Ctrl + D를 사용해 해제 할 수 있다.

from center 를 누르면 정가운데 도형이 생성된다. 이 기능은 맞추어 제작할때 활용하면 좋다.

shift 를 누르고 돌리면 15도 씩 돌아간다.

도형을 줄일때 Shift 를 누르고 조절하면 (각각 가운데 점을 기준으로) 반대되는 쪽은 유지되고 누른 점쪽의 크기만 줄일수 있다.

convert point tool를 선택하고 도형을 누르면 방향키를 꺼내 직선을 곡선으로 변경할 수 있다.

방향키를 원하는 만큼 꺼내준 후 Alt 를 누르고 이동하면 각각 방향키를 이동 시킬 수 있고, 원하는 비율에 맞게 설정하면 된다.

 

이를 활용해 하나의 이미지로 만들어 스마트 오브젝트화 해준 후

ctrl + t - 우클릭 - Skew(기울기 설정) - 가운데 점 눌러서 이동(기준을 설정) - 원하는 만큼 기울여준다.

다양한 크기로 설정하고 만들어 배치한다.

 

이미지와 글자를 정렬로 맞춰 준 후 리본의 모양을 만들기 위해 복사 하는데 이때 Alt + shift를 눌러 옆으로 옮겨준 후 Shift 를 누른상태로 줄이면 길이는 맞춘 상태에서 줄일 수 있다. 하나는 뒤의 뾰족한 리본면 하나는 리본이 이어지는 면으로 만들어 줄거기 때문에 하나를 더 복사해준다.

Add Anchor Point Tool 을 선택하고 변경하고자 하는 면에서 가운데를 눌러 곡선 방향키를 생성해 shift 누르고 방향키 눌러 (그냥 방향키를 눌러도 되지만 shift를 누르면 일정하게 5픽셀씩 들어간다.) 원하는 만큼 넣어준다.

Convent Point Tool을 선택해 가운데 점을 한번 클릭해주면 곡선이 직선으로 변경되면서 리본의 모양이 만들어진다.

 

뾰족해진 리본의 면을 이동시킨 후 미리 복사해놓았던 연결부분 색상을 어둡게 만들어 주고

 

Path 변형툴 (Direct Selection Tool)을 선택해 변형하고 뾰족하게 만들어 두었던 리본의 모양과 이어준다. (이때 알맞게 되도록 shift 를 누른상태로 이동시켜야 한다.)

그리고 레이어 순서를 알맞게 조정해주면 리본이 완성 된다. (이때 뒤에있는 리본의 색을 살짝 진하게 만들어 주면 좀 더 자연스러운 리본의 모양이 된다.)

혹시나 길이가 마음에 들지 않아 변경하게 될 경우 Shift를 사용해 일정한 픽셀로 옮겨 준 후 Path 수정툴을 사용해 변경해주면 된다.

 

반대편에도 똑같이 만들어 주기 위해 복사 해준후 Ctrl + T로 변형툴로 선택해준 후

 

상단에 중심을 맞추는 기능을 눌러 원하는 중심축으로 이동시켜 주고 맞지 않는 부분은 방향키로 맞추어도 괜찮다.

 

스마트 오브젝트화 하여 하나로 만들어 준다.

만들어진 리본에 패턴 무늬를 넣기 위해 사이즈에 맞게 새로운 캔버스를 생성해준다.(20Pexl 색 / 20Pexl 여백을 위해 40 Pexl 로 하여 만들어준다.) 도형툴에서 Pixel 모드로 하여 그리면 포토샵버전의 도형그리기가 된다. 앞서 지정하였던 크기에 맞춰서 도형을 만들어주고 (1 pexl 정도는 차이가 크진 않기 때문에 원하는 약간의 차이정돈 괜찮다.)

 

패턴으로 저장해준 후 / 레이어 스타일 - patten overlay 에서 만들어 둔 패턴을 선택해 넣어준다.

(패턴의 간격, 크기, 색, 블렌드 모드를 활용한 명암조절도 가능하다)

그림자를 넣어주고 (이때 배경색을 추출해 비슷한 계열의 어두운색으로 넣어주면 자연스럽다.) 이미지와 글자를 링크해 디자인이 흐트러지지 않도록 설정해주고, 앞서 제작한 제목을 그리드를 이용해 간격과 여백을 맞춰준다.

 

작업이 완료된 레이어는 그룹화 하여 정리해주는것도 중요하다 (작업하다보면 레이어가 많아진다.)

 

이전에 만들어 둔 별을 Effect - Color Overlay 하여 색을 넣어주고 (스마트 오브젝트화 하였기 때문에 효과를 사용해 색을 넣는다.) 내용을 채워준다.

 

내용의 중요성 (사용자에게 전달하고자 하는 우선순위)에 맞게 폰트의 굵기와 크기를 조절해주고, 이미지를 원근감과 중요하게 설정하고자 하는 순으로 (혹은 주조색을 기준으로?) 배치해준다.

 

 

그림자를 만드는 또 다른 방법으로 그림자를 만들고자 하는 레이어를 하나 복사해주고 Image - Adjustments - Hue/Saturation 으로 흑백으로 만들어 주고

(차후 수정이 필요없는 이미지는 lmage를 사용해 보정해주면 된다. /  레이어 효과를 사용한 Hue는 본래 이미지를 유지한 상태로 효과를 넣을수 있다)

 

위 효과를 사용해 그림자로 만들어 Ctrl + T 하여 크기를 조절해주고 (뜨는 창은 이제 수정하면 돌이킬수 없다고 알려줌)

이후 Fiter - Blur - Gaussian Blur 를 넣어 자연스러운 그림자를 넣어준다.

 

원근감에서 오는 그림자도 함께 표현해 좀 더 이미지가 입체적으로 보이도록 해준다. 

(이때 바닥의 그림자보다 진하거나 커지게 되면 부자연스러워 보인다.)

 

같은 양식으로 작업을 하기 위해 완료한 폴더를 복사(Ctrl + J)하고 Ctrl + Shift로 드래그 하여 같은 위치에서 이동이 되도록 하고 내용을 수정해준다.

(수업 도중 놓치면서 캡쳐 화면이 많지 않다.)

right_img 폴더를 비우고 선택한 후 가져오고자 하는 이미지의 폴더를 Ctrl + 끌어당기기 하면 선택하였었던 폴더 안으로 들어간다.

이미지를 원하는 대로 배치 후 자르고자 하는 부분을 Select 한 후 마스크 레이어를 넣어주면 원하는 부분만 남게 된다.

 

Ctrl + T 로 이미지 수정 상태로 만들어 준 후 이미지의 중심축을 뒤집어 주고자 하는 위치로 움직여 우클릭 - Flip Vertical 을 선택해 뒤집어 준 후

 

뒤집어 놓은 이미지의 폴더에 마스크 레이어를 씌워 Gradiant를 흑백으로 넣어 주면 은은하게 비친 그림자가 만들어진다.

---

 

글자옆 다른 글자로 전환하는 기능 끄는 법

---

 

아래도 마찬가지로 이미지를 배치하고 넣어준다. (이미지가 위 사진과 같이 튀어나와 있거나 할 경우 클리핑 마스크를 사용해주면 깔끔하게 이미지를 넣어줄 수 있다.)

---

추가 내용

 - 이미지와 내용을 배치할때 앞서 만들었던 그리드의 칸과 수에 맞게 넣어 균형있게 배치하고 넣어주는 것이 중요하다.

 - 본문의 내용이 서로서로 다르다는 것을 사용자에게 알려주기 위해 박스를 사용하거나 이미지와 본문 사이를 일정하게 띄워준다.

---

결과물