포토웍스) 배너 Banner (web)

홍보용 현수막 (Banner) 디자인의 개념 및 효과

 홍보는 글, 그림, 음성 등 다양한 시청각 매체를 동원해 다수의 소비자에게 상품, 또는 서비스 등의 존재를 알리고 판매를 촉진하는 역할을 한다. 다양한 홍보 매체 중 배너는 인터넷 사용자가 급속히 증가하면서 홈페이지에 띠 모양으로 만들어 노출시키는 웹 배너와 천, 종이 등으로 만들어 옥외에서 사용되는 현수막,  X-배너가 있습니다. 배너 광고는 짧은 시간 동안 작은 공간에 많은 정보를 담아 전달하므로 주목성과 가독성에 높은 주의를 두고 디자인되어야 한다.

 

디자인의 특징 및 표현법: 가독성이 뛰어난 폰트, 한 눈에 담을 수 있는 정보 전달

 

 배너는 광고, 홍보에 목적이 있으므로 주목성을 위한 레이아웃 작업에 기초를 두며, 활용처에 맞는 정확한 사이즈와 공간 활용 정보 전달을 위한 주제 선정이 필요하다.

 

 

적재적소 홍보 배너 만들기 Web Banner

웹배너 특징

픽셀로 이루어져 있고 공간이 작은편이다. 그래서 글씨가 많이 들어가지 않고 작업 시간이 길지 않다. 해상도는 72로 유지한다. 확대를 하거나 모니터의 해상도가 높을 때도 있어 150으로 해도 좋다. 레이아웃 배치나 디자인은 한계가 있을 수 있다. 그래서 폰트를 신경써야 하고 어떻게 사람 작은 공간안에 사람들에게 주목 받을 수 있을지 고민해야 한다.

 

 

01 웹 배너 배경 만들기

1. [W: 750px, H: 135px, 72ppi]의 새로운 작업 화면을 만든다.

※포털사이트 네이버의 메인 배너 사이즈. 웹 사이트라는 특성상 배너 사이즈는 달라질 수 있음에 유의한다. 

 

2. 배경으로 사용할 파일을 불러와 배치한다. 

 

3. 원하는 색상과 위치를  변경하고 꾸며준다.

좌우반전 해주고 같은 색상을 넣어주기 위해 fx를 alt 누른상태에서 넣어주었다. 그리고 불투명도 50으로 통일.

 

4. 사각형 도형툴을 이용해 테이블을 만들어준다. path가 합쳐지는 것을 방지하기 위해 enter. 이어서 원을 만들어 사각형 모서리에 배치해준다.

※ 일러스트레이터에서는 pathfinder라는 기능을 활용해 벡터 오브젝트를 합치거나 나눌 수 있다. 포토샵은 pathfinder 기능이 없어 벡터를 다루기에 불편함이 없다. 이를 해결하기 위해 '레이어 병합' 기능을 활용하는데, 병합된 레이어는 하나의 레이어로 보이지만 패스는 관리할 수 있다. 또한 [path selection tool]을 이용해 패스를 선택한 후, 옵션 바에서 패스 속성을 변경할 수도 있다. 만약 위와 같은 방법으로 처리하기 힘들 경우에는 '일러스트레이터'에서 벡터 작업을 한 뒤 복사한 후 '포토샵'으로 가져오는 방법도 있다.

 

5. [path selection tool]을 이용해 원 패스를 모두 선택하고 옵션 바의 [path operation]에서 [subtract front shape]를 선택해 사각형에서 원을 빼낸다. 이어서 [merge shape components]를 선택해 도형을 하나로 합친다.

 

6. 패턴을 넣을 파일을 불러와 define pattern 등록해준다. 그리고 만들어 둔 사각형 레이어에 pattern overlay로 알맞게 설정하여 패턴을 적용시키고 마무리 해준다.

 

 

02 사진 배치하고 그림자 연출하기

가지고 올 사진을 펜툴을 이용해 누끼를 따준다. 이미지를 패스로 선택하고 ctrl+enter 선택 영역으로 전환하여 이미지를 가져온다. 크기에 맞게 배치해주고 알맞게 스타일을 적용해준다.

 

03 텍스트를 이용해 정보 전달하기

알맞는 폰트와 색감을 아는 것이 매우 중요!!

 

 

완성!!!