매력적인 히어로 페이지를 위한 7가지 방법(8)

글 안으로 보이는 세계
2024-07-10

이미지와 글을 조화롭게 배치해 보기 일곱 번째 시간입니다.

목차

1. 글과 이미지를 균등하게 배치해 보기

2. 딤드(Dimmed) 이미지와 글 레이어드

3. 이미지만으로 구성해 보기

4. 이미지 중심의 글 결합해 보기

5. 글만으로 표현해 보기

6. 글의 흐름에 이미지 결합하기


글자의 형태를 이용하여 이미지나 영상을 마스킹하는 기법입니다. 이 기법을 사용하는 가장 큰 이유는 브랜드가 전하고자 하는 핵심 메세지나 컨셉을 더 강조할 수 있기 때문입니다. 아래 이미지로 예를 들도록 하겠습니다. 

브런치 글 이미지 2

왜?

오른쪽은 바다를 호텔 이름의 형태만으로 표현하였습니다. 이렇게 표현함으로써 아름다운 바다가 주는 경험이 호텔이 추구하는 브랜드 핵심 가치라는 것을 더 컨셉추얼 하게 전달할 수 있습니다. 더 단순하게 표현하자면 아름다운 바다를 품고 있는 호텔이라는 느낌을 더 명쾌하게 전달할 수 있습니다. 


사례 1.

같은 형태의 기법으로 몇 타입을 더 제작해 보면 아래와 같습니다. 글의 형태를 그대로 사용하는 경우입니다.

숲을 품고 있는 호텔 / 야경을 품고 있는 호텔숲을 품고 있는 호텔 / 야경을 품고 있는 호텔

서술형, 섬세한 컬러를 표현한 마스크 배경서술형, 섬세한 컬러를 표현한 마스크 배경

사례 2.

글자의 일부는 빈 공간 채우기를 통하여 형태를 더 명확하게 표현할 수 있습니다.

"O"의 안쪽 빈 공간을 채우고 면적을 확보하여 마스킹한 형태“O”의 안쪽 빈 공간을 채우고 면적을 확보하여 마스킹한 형태

"A, R, O"의 안쪽 빈 공간을 채우고 면적을 확보하여 마스킹한 형태“A, R, O”의 안쪽 빈 공간을 채우고 면적을 확보하여 마스킹한 형태

마스킹 영역의 일부분이 돌출되어 있으면 더 색다른 연출이 가능합니다.마스킹 영역의 일부분이 돌출되어 있으면 더 색다른 연출이 가능합니다.

사례 3.

부분적으로 마스킹을 할 수 있습니다. 이 경우 가려진 부분의 형태를 유지한 타이포의 배열을 권장합니다. 이러한 배열은 오브젝트와 연속성을 갖게 됩니다.

자동차의 후면부의 형태를 이용한 마스킹 배열자동차의 후면부의 형태를 이용한 마스킹 배열

인물의 반쪽 형태를 이용한 마스킹 배열인물의 반쪽 형태를 이용한 마스킹 배열

이로써 히어로 이미지를 구성하는 다양한 방법에 대한 시간이 마무리되었습니다. 총 7번의 연재를 통해 아무쪼록 많은 분들께 유익한 팁이 되었기를 바랍니다. 읽어주셔서 감사합니다.

지성민님의 더 다양한 글을 더 보시려면

👉 브런치 https://brunch.co.kr/@jisungmin

포트폴리오 https://www.behance.net/sungminn

링크드인 https://www.linkedin.com/in/sungminji

조회수
82

의사는 곧 병원이다! #닥터 브랜딩 .

스타 원장님이 필요한 병원 담당자님 주목! 위픽만의 병의원 마케팅 노하우...
퍼포먼스 마케팅, 트렌드, 커머스, 브랜딩, 디자인, AI
심플, 트렌디한 디자인 아이디어 감사합니다!
그래픽이 너무 멋지고, 말을 거는 것 같아요🤓
함께 읽으면 좋아요
아티클
마케팅 디자이너가 본 피그마 업데이트 내용, 그리고 디자인 시스템 토크
디자인 업무스킬 트렌드
아티클
팀윙크 [알다] 서비스 디자이너들과의 즐거운 커피챗 후기
아티클
당신은 카페에서 무엇을 경험하나요?
공간마케팅 디자인
아티클
Adobe Firefly의 생성형 채우기(삽입)
AI 디자인 이커머스
아티클
프로덕트 디자인을 한 번도 안 해본 디자이너들의 스터디 여정
디자인 마케터
아티클
Adobe Firefly의 생성형 채우기(제거)
AI 디자인
지성민

마케터에게 제안하기

마케팅, 강연, 출판, 프로젝트 제안을 해보세요
퍼포먼스 마케팅, 트렌드, 커머스, 브랜딩, 디자인, AI