홈페이지에 대하여 정보를 공유하고 이야기 할 수 있는 공간입니다.

이미지와 텍스트의 조화를 위한 디자인 팁 10가지

  • LV 2 퓨리티진
  • 비추천 0
  • 추천 0
  • 조회 1747
  • 2014.10.01 09:13
971530_222901757905072_158228312_n.jpg

[1] 대비를 더한다...
"Add Contrast"

화려한 이미지 속에 얇고 가벼운 서체, 어두운 배경에 밝은 텍스트, 밝은 배경에 어두운 텍스트 등 배경과 텍스트를 대비시키면 전체적인 텍스트의 가독성을 높일 수 있습니다.

──

[2] 텍스트를 이미지의 일부분으로 만든다.
"Make Text Part of the Image"

이미지 속에 텍스트를 조화시켜 서로가 자연스럽게 이어지는 느낌을 주는 것입니다.

쉬운 방법으로는 투명도 조절을 통해 어울리게 하는 것이 있습니다.

다만, 전체적인 조화를 맞출 수 있을때만 사용하는 것을 권합니다. 색감이나 구도에 따라 텍스트가 잘 안보일 수도 있습니다.

──

[3] 시선의 흐름을 따라간다.
"Follow the Visual Flow"

이미지의 시선 흐름을 따라가는 것입니다.

이미지 속 모델이 왼쪽을 바라보고 있다면 바라보는 방향에 텍스트를, 이미지 속 카메라가 아래쪽을 향하고 있다면 아래쪽에 텍스트를 배치한다면 자연스럽게 텍스트를 주목하게끔 유도할 수 있습니다.

──

[4] 배경 이미지를 흐리게 한다.
"Blur the Image"

1번의 대비와 비슷한 개념입니다. 배경 이미지 속에 텍스트를 넣기 힘들 때 배경에 흐림 효과(Blur)를 줘보세요.
텍스트가 더 눈에 띄는 효과를 경험하실 수 있습니다.

──

[5] 도형 안에 텍스트를 넣는다.
"Put Text in a Box"

이미지의 색상, 명암 등이 다양하거나 화려하여 텍스트를 넣기 힘들 경우, 도형을 만들고 그 속에 텍스트를 넣을 경우 가독성을 높일 수 있습니다.

──

[6] 배경 속에 텍스트를 넣는다.
"Add Text to the Background"

심플한 배경 이미지일 경우 최대한 배경의 여백에 텍스트를 넣는 것이 좋습니다.
배경 여백에 있는 글자는 읽기 쉬우며 전체적으로 조화롭습니다.

──

[7] 텍스트를 크게 넣는다.
"Go Big"

아주 기본적인 부분입니다. 강조해야 할 텍스트는 크게 넣어 주목을 끌도록 해야합니다.

──

[8] 텍스트에 색상을 추가한다.
"Add Color"

강조해야 할 텍스트에 색상을 추가하는 것도 주목을 끄는 한 방법입니다.

이미지 속에서 추출한 색으로 텍스트 색상을 정해보세요. 전체적인 이미지가 상당히 흥미로워질 것입니다.

──

[9] 색을 덮는다.
"Use a Color Cast"

투명도 조절을 통해 배경 이미지를 전체적인 단일 색으로 덮고, 그 위에 텍스트를 추가하는 것도 멋진 방법입니다.

까다롭지만 매우 멋진 방법이며, 브랜드 색을 덮어 브랜드의 아이덴티티를 더욱 부가시킬 수도 있습니다.

──

[10] 심플하게
"Go Simple"

내용에 맞는 적절한 이미지와 그에 어울리는 타이포만으로도 훌륭한 작품이 나올 수 있습니다.

필요 없는 부분은 제외하고 메시지를 가장 잘 전달할 수 있는 방법을 고민해보세요.

────────────────────────────────

이미지와 텍스트를 조화하는 것은 디자이너는 물론이거니와 포트폴리오, 프레젠테이션, 보고서, 그 외 여러 일을 진행하면서 매우 중요한 요소입니다.

위 10가지만 잘 지켜도 적어도 '알아보기 힘든' 결과물은 내지 않겠죠?

정말 당연하지만 너무나도 중요한 팁입니다.

* 원문: http://designmodo.com/design-type-photo/
 

추천 0 비추천 0

트위터 페이스북 구글플러스 싸이공감 네이트온 쪽지 구글 북마크 네이버 북마크
추천수 베스트
게시물이 없습니다.
조회수 베스트
게시물이 없습니다.
댓글수 베스트
게시물이 없습니다.
홈페이지 이야기 게시판 게시물 목록
번호 제   목 이름 날짜 조회
52 블로그 상단노출법 LV 7 제리 11-18 853
51 Wordpress와 우리나라 현실 1 LV 10 꽃사슴 11-09 781
50 키워드 광고 안할수도 없고 , 하기도 그렇고! LV 10 꽃사슴 11-09 648
49 홈페이지 방문객과 실시간 상담 하는 방법 LV 10 꽃사슴 11-09 688
48 무료홈페이지 Best 3 1 LV 10 꽃사슴 11-09 675
47 카페 만들기 - 이왕 할거면 제대로 만들자! LV 10 꽃사슴 11-09 625
46 홈페이지제작-기본은 알자! (필요성,개발단계,바이럴) 시리즈 1편 LV 9 꽃사슴 11-08 728
45 블로그 활성화 , 정말 어떻게 해야 할까요? LV 9 꽃사슴 11-08 688
44 카페 활성화 - 왜 힘든걸까? LV 9 꽃사슴 11-08 695
43 홈페이지 구축 - 기본 개념은 알고 만들자! LV 9 꽃사슴 11-08 811
42 똑똑한 회사 홈페이지 구축 방법 LV 9 꽃사슴 11-08 677
41 홈페이지 제작 시 고려사항 1 LV 9 xoxo 10-31 794
40 ios & Android 디자인 할 때 참고할만한 자료 LV 5 퓨리티진 10-28 762
39 무료 고퀄리티 사진 웹사이트 10개 LV 4 퓨리티진 10-21 845
38 에이전시 산업의 과거, 현재, 그리고… 미래[퓨즈 허재남대표] LV 3 퓨리티진 10-16 1517
37 33가지 신선하고 아름다운 포트폴리오 디자인 LV 3 퓨리티진 10-16 1155
36 polygon background tutorial - using triangulator LV 3 퓨리티진 10-16 2014
35 아이콘 디자인 레퍼런스하기 좋은 웹사이트 LV 3 퓨리티진 10-16 8862
34 웹디자인을 위한 이미지 소스 관련 웹사이트 모음 LV 5 망고ㅇ 10-16 909
33 윈도우 탐색기 레이아웃 변경하기 LV 5 망고ㅇ 10-16 1445
32 추천하는 디지털 메모장 LV 5 망고ㅇ 10-16 822
31 140만개가 넘는 벡터(vector) 파일 무료 다운로드 LV 5 망고ㅇ 10-16 2410
30 구글이 만든 iOS용 프레젠테이션 툴 LV 5 망고ㅇ 10-16 854
29 멋진 음식점 웹디자인 22개 LV 3 퓨리티진 10-13 1127
28 qr 코드로 홈페이지 홍보 LV 4 제리 10-10 1075
27 수채화 느낌에 웹사이트 25개 LV 3 퓨리티진 10-08 1517
26 워드프레스로 홈페이지를 제작할때 도움이 될 서비스를 소개합니다. LV 3 퓨리티진 10-08 1026
25 패럴렉스 스크롤링 웹사이트 베스트 20 LV 2 퓨리티진 10-07 3220
24 반응형 웹사이트 50개 LV 2 퓨리티진 10-06 1288
23 반응형웹의 단점과 현실 LV 2 퓨리티진 10-02 2025
22 홈페이지 만드실수 있으신분 계십니까? LV 3 김또취 10-01 1056
21 이미지와 텍스트의 조화를 위한 디자인 팁 10가지 LV 2 퓨리티진 10-01 1748
20 모바일 홈페이지 LV 2 제리 09-29 1214
19 홈페이지제작 : 리복 무브 + LV 3 옹옹옹222 09-27 1466
18 디지털 콘텐츠 플랫폼 : 블로그 서비스별 비교 총정리 LV 4 꽃사슴 09-23 1410