포토샵·일러스트를 활용하여 간단하게 그래픽을 만드는 방법 튜토리얼을 포스팅했습니다. 이번에는 포토샵에 그래픽 소스를 가져와서 합성하는 방법을 간단히 알려드리려고 합니다.
미리보기
따라하기
이미지 준비하기
차량용 방향제 사진을 준비했습니다. 이 이미지에 향기가 퍼지는 모습을 그래픽으로 표현하려고 합니다.
그래픽 이미지 다운로드
향기는 공기를 타고 흐르기 때문에, 바람이 흐르는 그래픽 이미지가 필요합니다. 그래픽 이미지는 freepik에서 받으실 수 있습니다. freepik은 그래픽 소스가 많이 모여있는 사이트입니다. 비회원은 하루에 3장, 회원은 하루에 10장까지 다운로드 가능합니다.
wave air 등으로 검색해 적당한 소스를 받아주세요. 제가 사용한 소스는 이 페이지에서 받을 수 있습니다. 오른쪽 초록색 Download 버튼을 누르면 파일을 받을 수 있습니다.
압축 파일에는 eps파일과 jpg파일이 함께 있습니다. 소스 편집 없이 그대로 쓰기 때문에 jpg파일로 불러와도 됩니다. 포토샵에 jpg파일을 불러와서 선택 툴로 원하는 부분을 선택하고 복사합니다.
합성하기
소스를 붙여넣은 후 Ctrl+T를 눌러 적당한 크기와 위치로 조절합니다.
Free transform 모드에서 바로 레이어 혼합 모드를 바꾸 수 있습니다. 혼합 모드를 Screen으로 변경하면 까만 배경이 사라지고 이미지에 자연스럽게 합성됩니다.
합성한 이미지 다듬기
그래픽 소스를 바로 붙여넣었더니 작은 점들 때문에 시선이 분산됩니다. 지우개 툴로 제품 위에 올라간 그래픽을 조금씩 지워주세요.
같은 방법으로 나머지 한 쪽도 그래픽을 합성합니다.
색상 바꾸기
꽃향기를 표현하기 위해 노란색으로 그래픽 색상을 바꾸겠습니다.
Ctrl+U(Hue/Saturation)를 눌러 색상을 조절합니다. 그래픽의 색상이 왜곡된다면 Colorize에 체크하세요. 색상 왜곡을 줄일 수 있습니다.
꽃향기가 나는 그래픽이 완성되었습니다.
배경에 검정색 그라데이션을 깔아서 방향제가 돋보이게 해주고 글자를 넣어 완성합니다.
응용하기
색으로 향기 전달하기
특수한 경우가 아니라면, 향기를 표현할 때 통상적으로 쓰는 색이 있습니다. 향기의 종류와 색을 어느정도 매치해야 합니다. 향기와 색이 매치되지 않으면 그래픽을 보는 사람이 착각할 수 있습니다. 보편적으로 쓰는 색을 정리해보았습니다.
| 향 종류 | 설명 | 주 색상 |
|---|---|---|
| 시트러스 | 오렌지, 레몬, 라임 같은 상큼한 과일 종류 | 노란색 (주황색을 섞으면 오렌지, 연두색을 섞으면 라임) |
| 플로럴 | 장미 | 분홍색 |
| 들국화와 작은 꽃들 | 노란색 | |
| 라벤더 | 연보라색 | |
| 허브 | 상쾌하고 상큼함 | 민트색, 초록색 |
| 코튼 | 깨끗하고 바람이 잘 통함 | 하늘색 |
| 파우더 | 피부에 닿는 화장품 파우더의 향 | 따뜻한 베이지 |
| 초콜릿 | 쌉싸름함 | 붉은 빛을 띠는 갈색 |
| 커피 | 커피 특유의 쓴맛·신맛(산미) | 노란 빛을 띠는 갈색 |
마치며
방향제가 아니더라도 향기가 나는 제품에 이용할 수 있는 방법입니다. 디퓨저, 화장품, 아로마 오일 등에 이용할 수 있답니다.
정적인 강조 이미지를 만드는 이유는 무엇일까요? 상세페이지에서 gif파일을 되도록 사용하지 않기 위해서입니다. gif파일을 불필요한 부분에 자주 사용하면 로딩이 길어지고 시선이 분산될 수 있습니다. 꼭 필요한 곳에 집중해서 애니메이션 혹은 영상을 쓰는 게 좋습니다. 멈춰있는 사진이나 그래픽만으로도 제품의 특징을 잘 전달할 수 있어야 합니다.
다른 포스팅 보기
- GIF 범벅 상세페이지, 최선인가요? 불편했던 상세페이지 뜯어보기
- 후끈후끈 뜨끈뜨끈~ 라디에이터 열기 표현하기
- 움직이는 잔상으로 선풍기 헤드의 각도 표현하기
