라디에이터 등 온열기구 열기와 에어컨 등 냉방기구의 냉풍을 표현하는 포토샵 튜토리얼입니다. 공기의 움직임은 눈으로 잘 보이지 않습니다. 그래픽을 보조로 적절히 사용하면 도움이 됩니다. 제품을 더 극적으로 표현할 수 있습니다.

미리보기

라디에이터에서 나오는 열기를 그라데이션과 화살표로 표현하였습니다.

따라하기

이미지 준비하기

라디에이터 사진을 준비합니다. 저는 제벤 라디에이터 사진을 준비했습니다. (검색해보니 자사몰이 따로 없어서 스마트스토어 링크를 걸어두었습니다.)

라디에이터의 윗부분에 그래픽을 넣고 강조하기 위해 사진의 아래쪽을 과감히 잘랐습니다.

열기 그라데이션 만들기

Warp로 도형 변형하여 열기 모양 만들기

도형 툴(U)로 사각형을 만듭니다. 이 벡터 사각형을 변형하여 열기 모양을 만들게 됩니다.

Free Transform(Ctrl+T)에서 마우스 우클릭, Warp를 클릭합니다. Warp는 왜곡 기능입니다. Free Transform에서 꼭지점 위주로 직선으로 움직여 변형했다면, Warp는 이미지를 곡선으로 뒤트는 기능입니다.

위쪽 옵션바에서 Arc를 선택하고 Bend를 30으로 설정합니다.

Arc Warp를 적용하니 사각 도형이 부채꼴 모양으로 휘어졌습니다. Bend에서 값을 조절하여 부채꼴의 휘는 정도를 조절할 수 있습니다. 엔터 혹은 옵션바 끝에 있는 체크 아이콘을 눌러 변형을 마무리합니다.

다시 Free Transform(Ctrl+T) 모드에서 위쪽 옵션바에서 Fish를 선택하고 Bend를 5로 입력합니다.

Arc Warp가 적용된 도형에 다시 Fish Warp가 적용됩니다.

엔터를 누른 후 다시 Free Transform(Ctrl+T) 모드로 들어가서 위치와 크기를 적절히 수정합니다.

도형을 빨간색으로 바꿉니다. Swatches 패널에서 선택하거나 Layers 패널에서 썸네일 더블 클릭해서 변경할 수 있습니다.

Mask로 열기 그라데이션 만들기

Layers 패널 아래쪽에서 Add Layer Mask(사각형 안에 원)을 클릭합니다.

지우개(E) 툴과 브러쉬(B) 툴로 적당히 지워서 그라데이션을 표현합니다.

Mask 모드에서 브러쉬와 지우개가 반대로 적용되나요? 전경색이 흰색, 배경색이 검정색인지 확인하세요. 다르게 지정되어 있다면 D키를 눌러 색상을 원래대로 돌립니다.

레이어 혼합모드로 그라데이션을 선명하게

도형을 만들어 배경에 옅은 회색을 깔아주고 레이어 혼합 모드를 변경했습니다.

레이어 혼합모드를 변경하면 투명한 느낌을 낼 수 있습니다. 색을 섞을수록 어두워지는 감산 모드로 설정해주세요. Burn이 붙은 대부분의 혼합모드입니다. Color Burn, Linear Burn, Multiply를 자주 사용합니다.

열기 그래픽 레이어 혼합모드를 Linear Burn로 설정하니 손잡이의 명암이 선명해졌습니다. 레이어가 겹치는 부분의 색이 진해졌습니다.

화살표로 열기 방향 표현하기

화살표 도형을 추가합니다. 저는 일러스트레이터에서 만든 화살표를 가져왔습니다. (일러스트에서 도형을 만들고 가져오는 방법은 이 포스팅을 참고하세요.)

화살표 색을 노란색으로 바꾸고 여러 개 복제해서 변형했습니다. 거의 다 왔습니다!

화살표의 레이어 혼합 모드를 가산 모드로 설정합니다. 가산 모드는 감산 모드와 반대로 색이 섞일수록 밝아집니다. Screen, Lighten, Color Dodge모드를 주로 사용합니다.

닷지와 라이트 모드가 조금 다릅니다. 레이어 혼합모드 목록에서도 분리되어 있습니다. 닷지는 어떤 색을 선택하든 감산됩니다. 어두운 색을 선택하면 조금만 밝아집니다.

하지만 라이트 모드는 이미지의 색상에 따라 결과값이 달라집니다. 중간 회색을 기준으로 이미지가 밝으면 가산이 되고 이미지가 어두우면 감산이 됩니다. 적용해보고 마음에 드는 모드로 선택해주세요.

텍스트 입력하기

글자와 필요한 아이콘을 넣어서 마무리합니다.

응용하기

다르게 표현해보기

아지랑이처럼 스물스물 올라가는 열기

열을 발산한다면 지그재그 곡선을 활용해 아지랑이 느낌을 표현할 수 있습니다. 본문 그래픽보다는 정적입니다. 라디에이터도 바람보다는 열을 내는 도구이므로 아지랑이처럼 표현하는 게 더 적당합니다. 하지만 공기 순환과 관련된 내용이므로 큰 곡선을 사용했습니다. 뜨거운 ‘바람’이 나온다면 튜토리얼 본문처럼 뻗어나가는 형태로 만들면 내용 전달이 더 잘 될 수 있습니다.

열기 그래픽 색에 따라서도 느낌이 달라집니다. 본문처럼 빨간색을 사용하면 뜨거워 보입니다. 반면 응용 예제처럼 주황색을 사용하면 따뜻한 느낌을 줍니다. 뜨거운 성능을 강조하고 싶다면 빨간색을, 따뜻함과 온기를 강조하고 싶다면 주황색과 노란색을 사용해보세요. 어떤 내용을 강조하는지에 따라 그래픽 방향도 달라집니다.

에어컨 바람은 어떻게 표현할까요?

파란색을 사용해서 시원한 느낌을 주었습니다. 바람이 필요한 곳이면 어디든 응용할 수 있답니다.

공기 온도에 따른 움직임 변화를 유의해주세요

보통 뜨거운 공기는 위로 올라가고, 차가운 공기는 아래로 내려옵니다. 때문에 난로는 낮은 곳에, 에어컨은 높은곳에 설치합니다. 하지만 공기가 위로 올라가는 경우도 있습니다. 공기청정기나 서큘레이터가 대표적인 예입니다. 파란 공기 그래픽은 시원하고 상쾌한 느낌을 주기 때문에 순환 기기에도 쓰입니다. 위쪽으로 길게 뻗어나가는 그래픽 형태가 좋습니다.

공기가 움직이는 방향에 그래픽 작업을 하게 됩니다. 이 점을 숙지하고 사진을 찍을 때 공간을 확보하는 것이 좋습니다. 촬영팀과 협업하게 된다면 사진에 공간을 확보해달라고 요청해보세요.

마치며

상세페이지 그래픽을 만들기 전 제품의 기능을 파악하는 것이 중요합니다. 상세페이지 파트는 제품을 가장 잘 설명하는 부분이니까요. 실물을 직접 만져보지 않는 이상 상세페이지로 제품을 설명하게 되고, 그 설명이 구매에 영향을 끼치게 됩니다. 오늘도 제품의 기능을 상세페이지에 녹이려고 끝없이 고민합니다.😎😎

다른 포스팅 보기

• 강조해야 할 곳을 강조하기, GIF, 똑똑하게 사용해볼까?
• 돌리고 돌리고~ 컨트롤 노브 회전을 화살표로 표현해보자
• 움직이는 잔상으로 선풍기 헤드의 각도 표현하기