내 웹 사이트에 적합한 표지 사진을 어떻게 선택합니까?


22

블로그 게시물의 시작을 포함하여 웹 페이지에 대한 헤더 및 소개를 위해 상대적으로 텍스트가 적은 대형 배경 이미지를 갖는 것이 유행이었습니다. 나는 이것에 대한 수많은 예를들 수 있지만, 내가 말하는 것을 정확히 알고 있다고 생각합니다.

효과적인 표지 / 배경 사진을 만드는 이유는 무엇입니까? 이미지를 찾거나 내 사이트의 이미지를 가져 와서 편집 할 때 무엇을 명심해야합니까?


1
이제 큰 배경 비디오를 가지는 것이 유행입니다.
user11153

1
멋지게 (I 그래서 아마도, 어떤 다른 사람을 기억 할 수없는 사이트에서 최고의 자기 대답 질문 중 하나 다 최고). :)
Dom

답변:


30

트렌드를 따라야합니까?

트렌드이기 때문에 무언가를하지 마십시오. 회사와 디자인에 가장 적합하기 때문에 사용자 경험에 적합하기 때문에 작업 을 수행 하십시오. 사이트에 큰 이미지를 추가하면 다른 옵션을 사용할 수 있다는 의미에 대해 정말로 생각하십시오. "현대"웹 사이트를 갖기 위해이 기술을 사용할 필요는 없습니다 .

웹 사이트의 배경 이미지를 선택할 때 명심해야 할 것이 많이 있습니다. 이 답변이 너무 길기 때문에 여기에 짧은 목록이 있습니다. 아래 예제를 포함하여 각각에 대해 자세히 설명합니다.

  • 이미지가 내용과 관련이 있는지 확인하십시오
  • 이미지 원하는 것을 했는지 확인하십시오.
  • 이미지가 상대적으로 고유해야합니다
  • 실물 이미지 사용
  • 이미지가 레이아웃과 작동하는지 확인하십시오
  • 이미지가 좋은 사진 및 디자인 규칙을 따르는 지 확인하십시오
  • 이미지가 색 구성표를 따르는 지 확인하십시오
  • 이미지 내 편차를 제한
  • 이미지 크기가 충분히 큰지 확인하십시오
  • 이미지를 사용할 권한이 있는지 확인하십시오
  • 사진 품질이 높은지 확인하십시오

이미지가 내용과 관련이 있는지 확인하십시오

관련이없는 사진은 해를 끼치 지 않습니다. 디자인의 다른 것과 마찬가지로 웹 사이트의 목적에 직접 맞지 않으면 제거하십시오. 나중에 무언가가 아니라 주위의 내용과 직접 관련되어 있는지 확인하십시오 . 이미지 요구는 단지 정적 이미지를이 사이트의 이해가 아니라 도움을 사용자에게 위해 일부 텍스트 또는 레이아웃으로 가져 추가 컨텍스트가 있습니다.

여기에 이미지 설명을 입력하십시오


이미지 원하는 것을 했는지 확인하십시오.

모든 이미지는 이미지의 내용과 스타일에 따라 의미가 있습니다. 브랜드뿐만 아니라 전달하고자하는 느낌에 이미지가 맞는지 확인하십시오. 이미지는 주변의 텍스트가 제공 한 내용에 대한 추가 이해를 전달해야합니다. 또한 원하는 방식으로 브랜드를 구축하는 데 도움이되도록하십시오.

여기에 이미지 설명을 입력하십시오

이미지가 시각적으로 매력적이어야한다는 것은 말할 필요도 없습니다. 이미지의 매력에 대한 자세한 내용은 다음과 같습니다.


이미지가 상대적으로 고유해야합니다

품질이 적어도 동일하면 사용자 정의 이미지가 재고 이미지보다 낫습니다. 즉, 대안이 고품질이고 적절한 한 잘 알려진 스톡 이미지를 피해야합니다. 그러나 절대적으로 독창적 인 것은 훌륭하고 적절한 이미지를 갖는 것만 큼 중요 하지 않습니다 .

여기에 이미지 설명을 입력하십시오


실물 이미지 사용

인간으로서 우리에게 큰 영향을 미치는 실제 이미지 (심지어 편집 된 버전조차도)에 관한 것이 있습니다. 우리는 진짜를보고 싶어합니다. 가능하면 콘텐츠 나 스타일에 완전히 맞지 않는 한 컴퓨터에서 생성 한 이미지보다 실제 이미지를 선택하십시오.

여기에 이미지 설명을 입력하십시오

사람들을 보여주는 것은 훨씬 더 큰 영향을 미칩니다. 올바르게 수행하면 경험이 더 현실적이고 개인적이라고 느끼게 할 수 있습니다. 제대로 수행하면 그것이 보일 수 있습니다 메신저 개인 저렴합니다. 더 자세한 내용은 여기를 참조하십시오 .

특히 얼굴은주의를 끌기 때문에 적절한 얼굴인지 확인하고 실제로 중요한 곳에만 두십시오. 때로는 책, 아이 패드, 컴퓨터 등과 같은 다른 상황에두면 도움이 될 수 있습니다. 다른 경우에는 얼굴을 자르는 것이 더 적절합니다 (의류 웹 사이트 또는 마네킹을 생각하십시오). 브랜드 / 대변인의 얼굴을 보여주는 것은 올바르게 수행하면 매우 효과적입니다. 가능하면 최대한 권장합니다.

여기에 이미지 설명을 입력하십시오


이미지가 레이아웃과 작동하는지 확인하십시오

사용자 흐름과 사이트 레이아웃은 선택한 이미지보다 중요합니다. 먼저 만드십시오. 최상의 레이아웃과 흐름에 상단에 약간의 열린 공간이 있으면 이미지 추가를 고려하십시오.

이미지의 중요한 부분이 콘텐츠에 포함되지 않도록하십시오. 시각적 지침을 사용하여 사용자가보고자하는 콘텐츠로 연결되도록하십시오 (다음 섹션에서 자세히 설명).

여기에 이미지 설명을 입력하십시오


이미지가 좋은 사진 및 디자인 규칙을 따르는 지 확인하십시오

이미지는 3 등분 법칙 , 시각 라인 활용, 주요 내용에 초점 맞추기, 피사체의 구도를 정확하게 잡기, 배경이 양호 함, 대칭 및 패턴 등을 포함한 핵심 사진 ​​규칙을 따라야합니다. 자세한 내용은 여기 를 확인 하거나 온라인에서 더 많은 리소스를 검색 하십시오 .

이러한 원칙은 이미지의 중요한 부분과 주변 환경에주의를 집중시켜 이미지의 목적을 더 많이 제공 할 것입니다.

좋은 이미지 규칙


이미지가 색 구성표를 따르는 지 확인하십시오

모든 웹 사이트는 색 구성표를 포함하여 통일 된 느낌을 가져야합니다. 먼저 색 구성표를 선택한 다음 이미지를 선택한 다음 이미지를 선택한 다음 이미지를 선택한 다음 색 구성표 ( 이와 같은 도구 가 후자를 도울 수 있음)에 관계없이 이미지 색상이 전체 색상 구성표에 맞는지 확인하십시오. 때로는 이미지를 씻고 컬러 필터를 적용하는 것이 효과적 일 수 있습니다.

설명하다


이미지 내 편차를 제한

시각적으로 바쁘게 만들지 마십시오. 이미지에 많은 색상과 객체가 있으면 텍스트 위에 텍스트를 놓고 레이아웃에 맞추기가 어렵습니다. 앞에서 말했듯이 먼저 내용을 만든 다음 이미지를 선택하십시오.

컬러 필터를 추가하기 전에 부분적으로 투명한 오버레이를 추가하거나 이미지를 어둡게하거나 흑백으로 씻어 내면 불필요한 노이즈를 줄일 수 있습니다. 또한 텍스트 뒤에 또는 요소에 배경색을 적용하여 가독성을 높일 수 있습니다.

여기에 이미지 설명을 입력하십시오

위의 이미지는 원본 이미지를 어둡게하고 가장자리에 약간의 그림자를 사용하여 노이즈를 줄입니다. 아래 이미지는 부분적으로 투명한 어두운 오버레이를 사용하여 동일한 작업을 수행하는 것 같습니다.

여기에 이미지 설명을 입력하십시오


이미지 크기가 충분히 큰지 확인하십시오

사용 된 이미지가 늘어나지 않고 각 화면을 덮을만큼 충분히 커야한다는 것은 말할 필요도 없습니다. 즉, 전체 화면 크기의 경우 최소 해상도가 1024 x 768 픽셀 인 이미지가 필요하지만 너비가 1200 픽셀 이상인 것이 가장 좋습니다. 해상도에 따라 다양한 크기의 이미지를 제공하여 더 작은 화면에 큰 이미지를로드하는 것을 절약 할 수도 있습니다 . 그러나 이미지 품질을 감추지 않으면 서 이미지로드 시간을 최적화하십시오.


이미지를 사용할 권한이 있는지 확인하십시오

사용이 허용 되지 않으면 사용하지 마십시오 . 이미지의 저작권이 무엇인지 모르는 경우 이미지를 찾으십시오. 그러나 알기 전까지는 사용하지 마십시오! 당신이하고 싶은 마지막 일은 침해에 대한 고소입니다.


사진 품질이 높은지 확인하십시오

거친 이미지를 사용하지 마십시오. 의심 스럽거나 관련없는 콘텐츠가 포함 된 사진을 사용하지 마십시오. 단순하지만 (주로) 현실로 유지하십시오. 고려하는 각 이미지의 좋은 부분과 나쁜 부분에 대해 열심히 생각하고 평범한 것을 받아들이지 마십시오.

추가 자료 :


4
좋은 대답입니다. 아마도 간결한 내용 일 것입니다. "좋은 사진이고 사이트의 요구와 목표와 관련이 있는지 확인하십시오.":)
DA01

@ DA01 나는 그 진술에 전적으로 동의하지만, 어떤 사람들은 좀 더 도움이 필요합니다 :)
Zach Saucier
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.