부산시청 도서요약

디자인을 몰라도, 포토샵이 처음이라도 누구나 원하는 SNS 콘텐츠를 디자인할 수 있도록 도와준다. 마케터, 쇼핑몰 운영자, 블로거, 일반인 등 직업에 상관없이 누구나 하나쯤은 활용할 수 있도록 거의 모든 온라인 디자인 콘텐츠를 다루고 있다. 여러 SNS에서 활용할 수 있는 카드뉴스, 유튜브 영상의 대문이라고 할 수 있는 섬네일, 페이스북의 커버와 프로필 이미지, 블로그의 스킨과 위젯, 그리고 쇼핑몰의 상세페이지와 이벤트 배너까지 다양한 콘텐츠를 만들어 활용하고, 덤으로 자연스럽게 포토샵까지 배워 보자.

좐느의 SNS 마케팅을 위한 포토샵 디자인

기초부터 탄탄하게, 기본기 다지기
포토샵보다 디자인 기본기가 먼저
화면 레이아웃 계획 시 고려할 점
정확한 작업 사양 확인의 필요성

이미지를 제작할 때 무작정 프로그램부터 실행하는 것이 아닙니다. 표시될 화면의 비율, 정확한 작업 크기 등을 파악한 후 디자인 요소들을 어떻게 배치할지 구상하는 작업이 선행되어야 합니다. 예를 들어 포스터를 만들어야 해서 일반적인 가로로 긴 형태를 제작했는데, 알고 보니 세로로 긴 포스터가 필요했다면? 단순히 가로, 세로 크기를 바꾼다고 해결되는 문제가 아닙니다. 디자인 요소의 배치를 바꿔야하는 제법 어려운 작업입니다. 심할 때는 처음부터 다시 시작하는 것이 나을 수도 있을 정도로 요.

시선의 흐름

사람의 눈은 대상을 볼 때 왼쪽에서 오른쪽, 위에서 아래로, 왼쪽 위에서 오른쪽 아래로 보는 흐름에 익숙합니다. 웹 페이지를 위에서 아래로 내리면서 보는 것도 이런 이유고, 글을 쓰고 책을 읽는 방향도 이러한 시선의 흐름에 따른 것입니다. 그러므로 디자인을 할 때도 시선의 흐름을 잘 고려하여 텍스트 및 이미지를 배치해야합니다.

ㆍ세로형 이미지 : 세로형 이미지는 제목을 상단에 크게 배치하고, 하단에 이미지나 자세한 설명을 배치합니다. 상단에 있는 제목을 먼저보고, 자연스럽게 시선을 아래로 내려 세부 내용을 확인하는 흐름입니다.

ㆍ가로형 이미지 : 웹 배너와 같은 가로형 이미지는 다양한 방법으로 제목 및 핵심 내용을 배치할 수 있습니다. 안정감을 우선으로 생각한다면 양쪽에 이미지를 배치하고 중앙에 제목을 배치하면 좋고, 대표 이미지가 있다면 왼쪽에 이미지, 오른쪽에 제목을 배치하는 것도 좋습니다.

수많은 색상, 어떻게 쓰면 좋을까?
색상의 의미, 느낌 파악하기

색상마다 내포하고 있는 의미나 분위기가 다르고, 같은 색이라도 표현하는 방식과 상황에 따라 다른 의미로 사용되기도 합니다. 예를 들어 빨간색은 흔히 사랑, 열정의 의미로 사용하지만 위험한 상황, 불, 분노 등의 표현에 사용하기도 합니다. 또한 같은 색이라도 진하고 옅은 정도에 따라 느껴지는 감정이나 사용되는 상황이 다릅니다. 여기서는 가장 일반적으로 색상이 가지는 긍정적 의미와 부정적 의미를 확인하고 넘어 가세요.

위와 같이 색상이 가지는 기본적인 의미에 더해 유행에 따라 그 의미가 또 달라지기도 합니다. 그래서 디자인을 할 때는 트렌드를 꾸준하게 파악해야 하는 것입니다.

색상 / 명도 / 채도 / 보색 알고 가기

색상, 명도, 채도, 보색? 초중고 미술 시절 한 번쯤은 들어 본 단어입니다. 그만큼 디자인을 위한 가장 기초적인 정보라고 생각하면 됩니다. 기억을 떠올릴 수 있도록 간단히 살펴보고 넘어가세요.

ㆍ색상 : 빨강, 주황, 노랑, 파랑 등 색이 서로 구별되는 특성을 말합니다. 앞서 색상별 의미와 느낌을 표현할 때 구분한 그 색상과 같은 의미로 파악하면 됩니다. 먼셀의 20색상환이 대표적인 20개의 색상을 배치한 것입니다.

앞으로 디자인 실습을 하면서 색을 표현할 때 다음과 같이 #과 빨강, 초록, 파랑에 해당하는 십육진수를 연속으로 붙여 표현합니다.

포토샵에서 색상 피커 창을 열면 오른쪽 하단에 #을 이용한 색상 값을 입력할 수 있고, HSB, RGB. Lab, CMYK 등의 표현 방법을 선택하여 값을 설정할 수도 있습니다. 우리가 주로 다룰 SNS 마케팅 디자인은 웹에서 사용할 결과물이므로 #을 이용한 색상 값 입력 방법을 주로 사용하면 됩니다. 참고로 모든 색상 값을 외워서 사용할 필요는 없습니다. 대표적인 흰색 (#ffffff)과 검정 (#000000)만 알고, 나머지는 포토샵의 스포이드 기능으로 원하는 색상을 찍어 활용하면 됩니다.

ㆍ명도 : 색의 밝고 어두운 정도를 말합니다. 흰색에 가까울수록 명도가 높다고 표현하고, 검정에 가까울수록 명도가 낮다고 표현합니다. 명도의 높고 낮음은 상대적인 개념입니다.

ㆍ채도 : 색의 진하고 엷음을 나타내는 표현으로 원색에 가까운 색을 채도가 높다고 표현하고, 흰색이나 검정(무채색) 물감을 계속 섞어 흰색이나 검정에 가까워지면 채도가 낮다고 표현합니다.

채도가 높으면 발랄하고 화려한 느낌이며, 주목성도 좋아집니다. 하지만 눈에 띄려는 목적으로 채도가 높은 색을 과하게 사용하면 오히려 주목도는 낮아지면서, 난해하고 핵심이 없는 이미지가 될 수 있으므로 주의해야 합니다.

채도가 낮고 명도가 높은 흔히 파스텔 톤이라고 부르는 색상을 주로 사용하면 부드럽고 따듯한 느낌을 전달할 수 있습니다. 그러므로 이미지를 제작하기 전에 분위기에 맞춰 전체적으로 채도가 높은 색상을 사용할지 낮은 색상을 사용할지 혹은 무채색으로만 제작할지 결정해야 합니다.

ㆍ보색 : 색상환에서 서로 대응하는 위치의 색, 즉 서로 마주보고 있는 두 색을 보색이라 합니다. 어릴 적 20색상환과 함께 보색 조합을 외웠던 기억이 떠오르나요? 남노, 파주, 보연, 이런 식으로 말이죠. 보색을 이용하면 두 색상의 대비가 강해 눈에 띄는 결과를 얻을 수 있습니다. 꼭 서로 마주 보는 보색 조합이 아닌, 보색에 인접한 색 조합을 활용해도 유사한 효과를 얻을 수 있습니다. 보색 대비가 잘 표현된 이미지와 디자인 결과들을 살펴보면서 보색 활용의 장점을 파악해 보세요.

메인 색상과 서브 색상 계획하기

디자인에 익숙하지 않을 때 대표적으로 잦은 실수가 바로 색상 사용입니다. 디자인을 하기 전에 사용할 색상의 개수를 정하거나 정확하게 사용할 색상을 지정해야하는데, 마음에 드는 색을 무분별하게 활용하거나, 한 가지 색을 사용할 때 동일한 색이 아닌 눈대중으로 유사한 색을 선택해서 사용하곤 합니다. 이렇게 색상 규칙을 정하지 않고 작업 한 결과물은 사용된 색상이 많아져 어딘지 어수선해 보일 가능성이 높습니다.

색상 계획은 먼저 전체적인 분위기를 좌우할 메인 색상을 정하고, 보조적인 역할을 할 서브 색상을 정하는 작업입니다. 배경 등에 사용하여 전체적인 분위기를 결정할 메인 색상을 정했다면 유사 색이나 보색을 서브 색상으로 정하고, 여기에 조미료처럼 조금씩 첨가해서 사용하는 포인트 색상을 추가하면 됩니다.

TIP 흰색과 검은 색은 무채색으로 어떤 색상에도 어울립니다. 그러므로 주요 이미지가 흰색이나 검은 색이 아니라면 텍스트 입력, 꾸밈, 강조 등에 사용하기 적합합니다.

텍스트 활용도 디자인이다
가독성

이미지에서 텍스트를 배치할 때 중요하게 고려해야 할 요소 중 하나는 가독성으로, 결과물의 크기에 따라 글꼴 크기를 조절해야 합니다. 너무 크게 배치해서 한눈에 읽히지 않아도 문제고, 커다란 현수막 디자인에 서 깨알 같이 작은 크기로 입력해도 문제입니다. 즉, 작업 결과물을 보는 사람이 전달하려는 내용을 제대로 파악할 수 있는지를 고려해야 합니다. 예시를 보면서 가독성의 개념을 파악해보세요.

ㆍ글꼴이 두꺼울 때 : 눈에 띄어 제목에 사용하면 적합하지만 본문에 사용하면 가독성이 떨어집니다.

ㆍ글꼴이 너무 얇을 때 : 세련된 느낌을 표현할 수는 있지만, 시선을 사로잡는 주목성이 떨어집니다. 두꺼운 글꼴과 함께 사용해서 포인트 요소로 활용하기에는 좋습니다.

ㆍ손글씨 느낌: 손글씨 느낌은 아기자기한 표현에는 좋으나, 본문으로 사용하기에는 가독성이 떨어지고, 읽는 이가 쉽게 피로감을 느낄 수 있습니다.

ㆍ배경과 텍스트의 명도 차이가 적을 때: 배경에 사용된 색과 텍스트 색의 명도 차이가 적을수록 아래와 같이 가독성이 떨어집니다. 배경과 텍스트는 명도와 채도 차를 명확하게 구분할수록 가독성이 좋아져서 또렷하게 보입니다.

ㆍ배경이 복잡할 때: 배경에 다양한 색을 사용했다면 가독성이 떨어질 수 있습니다. 이럴 때는 단순한 배경의 텍스트 입력 영역을 별도로 배치하거나 텍스트에 그림자, 획 등을 추가하는 방법으로 가독성을 높여야 합니다.

메인 카피와 서브 카피의 구분

영화 포스터를 보면 메인 카피에 해당하는 제목을 가장 크게 배치하고, 서브 카피에 해당하는 부제 나 감독, 주인공의 이름 등을 작게 입력합니다. 상식일 수도 있지만 중요한 내용은 가장 크게, 나머지 내용은 제목보다 작게 배치한다는 기본 규칙을 기억하면서 아래 사례를 살펴보세요.

사례는 카드 뉴스 커버 이미지입니다. 기본 규칙에 따라 메인 카피인 2020 봄꽃 축제 일정을 가장 크게 배치한 후 서브 카피 인 인생 사진 찍으러 가자~는 작게 배치한 기본 디자인을 완성하였습니다. 여기서 메인 카피와 서브 카피의 차이가 크지 않아 서브 카피의 크기를 줄여서 메인 카피를 확실하게 강조했습니다. 그런 다음 봄꽃 축제 일정을 더욱 강조하기 위해 2020의 크기와 위치를 조정하였습니다.

위 디자인의 변화에서 볼 수 있듯이 같은 위상의 카피라도 모두 동일한 크기로 배치하여 빡빡하게 디자인하는 것보다 메인 카피 중에서도 가장 중요한 문구 혹은 단어를 좀 더 강조할 수도 있습니다.

지금까지 디자인 기본기에 대해 살펴봤습니다. 굳이 외우거나 이해하려고 노력할 필요는 없습니다. 간단히 살펴봤다면 이어지는 실습을 진행하면서 이론이 어떻게 적용되는지만 생각해 본다면 그것으로 충분합니다.

포토샵이 처음이라면?
포토샵 시작을 위한 기초 다지기
포토샵 환경 설정하기

본격적인 사용에 앞서 사용자에 따라 효율적인 작업을 위해 환경 설정을 변경하고 시작하는 것이 좋습니다. 상단 메뉴에서 [편집-환경 설정-일반]을 선택하면 환경 설정 창이 열릴 것입니다.

환경 설정 창 왼쪽에는 다양한 항목이 있고, 각 항목을 선택하면 그에 따른 환경 설정 옵션이 나타납니다. 일례로 [인터페이스]를 클릭해서 선택해 보면 모양, 프레젠테이션, 옵션 영역과 하위 옵션이 표시되며, 이중 모양 영역에서 ‘색상 테마’의 네 가지 색상 중 하나를 선택해 보세요. 선택한 색상에 따라 포토샵의 색상이 변경됩니다. 책에서는 가독성을 높이기 위해 네 번째에 있는 가장 밝은 색상으로 설정한 후 설명하고 있습니다.

환경 설정에서 눈여겨볼 항목이라면 [단위와 눈금자]입니다. SNS와 같은 웹에서 사용하는 이미지는 주로 픽셀(Pixels) 단위입니다. 그러므로 ‘눈금자: 픽셀’로 설정해서 사용하는 것을 권장합니다. ‘문자: 포인트’는 기본 그대로 사용하시면 됩니다.

새로 만들기 문서 창에서 임의 템플릿을 선택한 후 [제작]을 클릭하면 선택한 템플릿에 따라 프로젝트가 시작됩니다. [웹] 탭에서 [웹 대형]을 선택한 후 [제작]을 클릭하여 프로젝트를 시작한 상태에서 패널 정리 요령을 설명하겠습니다.

포토샵을 처음 실행한 후 첫 프로젝트를 시작한 것이라면 아래와 같이 학습 패널이 함께 표시되어 많은 공간을 차지하고 있을 것입니다. 여기서 간단히 패널 정리하는 방법을 살펴보겠습니다.

ㆍ패널 축소/확장: 패널 상단에는 두 개의 삼각형이 이어져있는 [축소/확장] 아이콘이 있습니다. 이 아이콘을 클릭하면 패널을 축소하거나 다시 확장할 수 있습니다.

ㆍ패널 묶기, 이동: 패널의 상단에는 각 패널의 이름이 표시되어 있으며, 어떤 패널에는 여러 개의 패널이 그룹으로 묶여 있습니다. 이러한 패널 이름 부분을 ‘클릭&드래그’하여 다른 그룹에 묶거나 별도로 분리할 수 있습니다.

ㆍ패널 닫기: 학습, 라이브러리 등의 패널은 항상 사용하는 것이 아니므로 닫아서 작업 영역을 확보하는 것이 좋습니다. 패널 오른쪽 위에 있는 세 줄 모양의 [메뉴]아이콘을 클릭한 후 [탭 그룹 닫기] 또는 [닫기]를 선택합니다.

ㆍ패널 열기: 필요에 따라 패널을 다시 열어야 할 때는 [창] 메뉴를 이용합니다. 상단 메뉴에서 [창]을 선택한 후 하위 메뉴 중 사용할 패널을 선택하면 됩니다.

TIP [창-정돈]메뉴에서는 여러 개의 작업 창을 열어 사용 중일 때 한 화면에 어떻게 배치할지 선택할 수 있습니다.

작업 영역 저장하기

상단 메뉴 막대 아래에는 옵션 패널이 있으며, 옵션 패널의 오른쪽 끝에서 두 번째 아이콘을 클릭하면 프로젝트 종류에 따라 포토샵에서 제공하는 작업 영역을 선택할 수 있습니다. 해당 작업에 최적화 된 패널로 구성된 작업 영역이라고 할 수 있습니다. 또한 사용자에 따라 작업하기 편한 상태로 패널들을 배치했다면 현재 상태를 그대로 저장해 놓을 수 있습니다.

위와 같이 [새 작업 공간] 메뉴를 선택한 후 이름을 입력하고 저장하면 [좐느 재설정]과 같이 메뉴로 표시되며, 이후 해당 메뉴를 선택하여 언제든 저장한 상태로 되돌릴 수 있습니다.

빠른 작업을 위한 화면 확대/축소 단축키

포토샵 디자인 작업을 하다보면 이미지를 확대/축소하는 일이 빈번하게 발생합니다. 이럴 때마다 아이콘이나 메뉴를 이용하면 작업 속도가 더디어집니다. 그러므로 기본적인 이미지 확대/축소 단축키는 외워서 사용하기를 권장합니다.

ㆍCtrl + 0: 이미지를 화면에 꽉 차게 표시합니다.

ㆍCtrl + 1: 이미지를 실제 크기로 표시합니다.

ㆍCtrl + -: Ctrl을 누른 채로 -를 누를 때마다 이미지가 점차 축소됩니다.

ㆍCtrl + +: Ctrl을 누른 채로 +를 누를 때마다 이미지가 점차 확대됩니다.

ㆍAlt + 마우스 훨 : 휠을 위아래로 굴려서 이미지를 확대/축소할 수 있습니다.

TIP 이미지를 크게 확대한 후 원하는 위치를 확인할 때는 Spacebar를 누른 상태로 클릭&드래그하면 편리합니다.

작업을 위한 이미지 불러오기 및 저장하기
이미지 불러오기

본격적인 디자인 작업을 시작하려면 이미지 자료를 불러오거나 저장해야합니다. 먼저 이미지를 불러오는 방법입니다. 현재 상황에 따라 혹은 사용자의 편의에 따라 다음과 같은 다양한 방법 중 한 가지를 선택해서 사용하면 됩니다.

ㆍ포토샵을 이제 막 실행했을 때: 시작 화면에서 [열기] 버튼을 클릭합니다.

ㆍ상단 메뉴 막대 이용하기: [파일-열기] 메뉴를 선택합니다.

ㆍ단축키 이용하기: ‘Ctrl+0를 누릅니다.

ㆍ디자인 작업 도중 빠르게 불러오기: 이미지가 저장된 폴더를 열어 포토샵으로 드래그합니다. 이때 작업중인 화면으로 드래그하면 기존 프로젝트에 고급 개체 레이어로 불러올 수 있고, 작업 창의 탭 이름 부분으로 드래그하면 별도의 창으로 불러올 수 있습니다.

다양한 형식으로 저장하기

포토샵에서 새로운 작업을 시작한 후 처음 저장하면 기본 확장자는 PSD입니다. PSD 형식의 파일에는 포토샵에서 작업한 레이어와 같은 작업 요소가 모두 그대로 포함되어 있기 때문에 언제든 수정이 편리합니다. 하지만 이후 SNS 등에서 활용하기에는 불편함이 있습니다.

ㆍ파일 저장하기: 새로운 작업을 시작했거나 이미지를 열고 보정을 했다면 작업 결과물이 유실되지 않게 저장해야 합니다. 기본적인 저장 방법은 상단 메뉴에서 [파일-저장]을 선택하거나 단축키 Ctrl + S를 누르는 것입니다.

ㆍ다른 이름으로 저장하기: 프로젝트 작업을 진행 중에는 PSD 파일로 저장해야 이후 수정이나 관리가 편리합니다. 하지만 최종 결과물은 JPG와 같은 일반적인 이미지 파일로 저장하는 것이 좋습니다. 이렇게 이미 저장한 결과물을 다른 확장자나 이름으로 저장할 때는 상단 메뉴에서 [파일-다른 이름으로 저장]을 선택하거나 단축키 Ctrl + Shift + S를 누릅니다.

이미지 크기와 캔버스 크기
이미지 크기

포토샵에 불러온 이미지의 크기를 확인하고 크기를 키우거나 축소할 수 있습니다. 우리가 흔히 사용하는 사진과 같은 래스터(픽셀) 이미지는 원본 크기보다 축소할 때는 별다른 문제가 없습니다. 하지만 작은 이미지를 무리하게 키우면 뿌옇고 흐릿하게 보일 수 있으니 주의가 필요합니다.

상단 메뉴에서 [이미지-이미지 크기]를 선택하거나 단축키 Alt + Ctrl + l를 누르면 이미지 크기 창이 열립니다. 현재 이미지의 크기와 해상도를 확인할 수 있으며, 폭과 높이 옵션 왼쪽에 있는 링크 설정으로 원본 크기와 동일한 비율로 크기를 변경할 수 있습니다.

TIP 링크가 설정되어 있으면 폭이나 높이 중 한쪽 값을 변경할 때 나머지 값이 비율에 맞게 자동으로 변경되며, 링크를 클릭해서 해제하면 폭과 높이를 자유롭게 조정할 수 있습니다.

캔버스 크기

캔버스 크기는 이미지 크기와는 별개인 작업 영역의 크기입니다. 즉 자유롭게 디자인 작업을 할 수 있는 영역입니다. 상단 메뉴에서 [이미지-캔버스 크기]를 선택하면 현재 작업 중인 이미지 크기는 그대로 유지한 채 캔버스의 크기만 조절할 수 있습니다.

TIP 캔버스 크기를 조절할 때 기준 옵션에서 위치를 선택하면 이치를 고정된 채 캔버스의 크기가 커지거나 줄어듭니다. 아무 위치도 선택하지 않으면 중앙이 기준이 됩니다.