제품 그래픽 6 이미지를 더욱 유익하게 만드는 기법
웹 디자이너는 마케팅 기법으로 매우 교활 해졌습니다. 페이지 콘텐츠를 유혹하는 것은 항상 좋은 일이지만 방문자를 끌어 모으는 데 있어서는 가장 인기있는 미디어 형식입니다. 데모 비디오와 같은 사운드가 필요하지 않으며 몇 초 내에 중요한 정보를 신속하게 전달할 수 있습니다. 쉬운 것처럼 보일 수도 있지만 웹 사이트에 유익한 이미지를 만드는 몇 가지 주목할만한 기술이 있습니다.
여기에는 기능 레이블, 클로즈업 스크린 샷, 가격 비교 및 기타 세부 정보가 포함됩니다. 웹 디자이너는 정보 그래픽을 사용하여 새로운 앱, 소프트웨어, 비디오 게임 또는 다른 많은 제품을 모델링 할 수 있습니다! 가장 일반적으로 이러한 기술이 다양한 기술 분야에서 활용되는 것을 볼 수 있지만.
팁뿐만 아니라 훌륭한 제품 정보로 가득한 아름다운 제품 그래픽의 실례를 제공하는 아래의 아이디어를 확인하십시오..
1. 귀하의 콘텐츠를 확장하십시오
유익한 이미지는 좋은 웹 페이지 콘텐츠 대신 사용해서는 안됩니다. 대신 이미지를 사용하여 핵심 사항을 확장하십시오. 과 그들을 분명히 설명하다 귀하의 방문자. 이렇게하는 가장 좋은 방법 중 하나는 다음과 같습니다. 중요한 부분을 강조하기위한 작은 데모 제작 튜토리얼의. 몇 가지 유익한 그래픽과 스크린 샷을 통해 리더의 관심을 각 단계로 이동하는 것이 훨씬 간단합니다..
소프트웨어 자습서 (예 : Photoshop 자습서)를 시연하면 어려울 수 있습니다. 메시지를 서면으로 전달하다. 방문자는 기사에 착륙하여 잠시 후 잠정적으로 자료를 준 의식적으로 판단하기 시작합니다. Web Designer Wall에는 편리한 그래픽과 함께 CSS3 둥근 이미지를 만드는 데 대한 환상적인 튜토리얼이 있습니다. 여기에는 일부 레이블과 효과의 클로즈업 샷이 포함됩니다.
원래 기사 페이지에서이 이미지는 당신이 무엇을 만들 것인지에 대해 머리 속에 훨씬 더 선명한 그림을 추가합니다. 제작자가 작은 데모 링크를 추가했지만 데모 이미지가 포함되지 않은 이유는 무엇입니까? 제대로 레이블이 붙은 데모 샷으로 관심을 끌 가능성이 훨씬 큽니다..
하려고 노력하다 미디어 콘텐츠를 위해서만 이미지를 추가하는 것을 피하십시오. 귀하의 게시물에 이미지가없는 방법이나 추론을 설명 할 수있는 경우 여기에서 먼저 시작하십시오. 이후에만 상세한 이미지 그래픽에서 일부 포인트를 반복하는 것을 고려하면 웹 사본을 뒤돌아 볼 수 있습니다. 구체적으로 튜토리얼은 복잡성이 증가함에 따라 시각적 단서가 더 필요합니다.. 두 가지 예는 웹 사이트 데이터베이스 또는 테이블 데이터 집합 작성.
2. 주목할만한 특징을 강조하십시오
소프트웨어 / 기술의 각 조각에는 많은 기능이 있으므로 모든 단일 비트를 설명하는 것이 거의 불가능합니다. 뿐만 아니라 방문자가 정보 그래픽에 20 개 이상의 라벨을 읽는 것에 관심을 보이지 않을 가능성이 매우 높습니다.. 가장 흥미로운 기능에 충실하십시오. 과 라벨을 사용하여 좀 더 깊이있는 설명.
라벨 내용에 대한 웹 사본을 작성할 때 둔한 언어를 피하십시오 언제든지 가능할 때. 방문자가 응용 프로그램의 최신 버전을보고 있다면 색 구성표의 변경 사항에 대해별로 신경 쓰지 않아도됩니다. 이것이 일일 워크 플로에 어떤 영향을 미칩니 까? 대신 어쩌면 그들에게 유익한 것을 강조하다., 새로운 인터페이스 패널 또는 다중 사용자 연결 기능과 같은 기능을 제공합니다. 이들은 일반적으로 추상적 특징 너는 그걸로는 볼 수 없다. “찾고있는” 제품에서.
이러한 기능을 철저하게 설명하는 라벨을 사용하면 가장 풍부한 응답을 얻을 수 있습니다. 방문객들은 자신의 결정을 내릴 수있는 지적이고 성숙한 구매자로 취급 받고 있다고 느낄 것입니다. 그들이 정말로 당신의 기능을 좋아한다면, 이것은 당신의 소프트웨어 나 제품을 구매하는쪽으로 더 큰 밀어를줍니다..
다음은 Mozilla Firefox 업데이트 페이지의 예입니다..
디자이너는 점선으로 표시된 선을 사용하여 레이블과 새로운 기능을 지적했습니다. 이것은 실제로 컨테이너 내에 절대적으로 배치 된 배경 이미지입니다. div. 놀랍게도 레이블 텍스트는 모두 HTML 태그 안에 기록됩니다 (아니 단지 하나의 큰 이미지).
이 방법은 Google 크롤러 봇에게는 유용하지 않지만 일반적으로 전체 웹 페이지를 경험할 수없는 모바일 사용자에게도 유용 할 것 같습니다..
또한 파노라마 기능이 왼쪽에 어떻게 표시되는지 확인하십시오. 작은 것을 제공하다 “더 알아보기” 링크. 이것은 아마도 정보 그래픽을 만들 때 얻을 수있는 최선의 방법입니다! 동일한 페이지 내에 대체 페이지 또는 앵커가있는 경우 방문자는이 링크를 클릭하여 복잡한 기능에 대해 더 많이 이해할 수 있습니다..
유익한 그래픽은 티저 및 제품 기능을 방문자에게 쉽게 표시하는 데 사용됩니다. 따라서 그래픽 주위의 공간이 제한되어 있지만 항상 외부 페이지에서 더 많은 것을 배울 수있는 기회를 제공합니다..
3. 단순하고 눈에 거슬리지 않는 레이블
레이블 정보 제품 그래픽을 제작할 때 가장 중요한 요소입니다. 방문자는 제품, 소프트웨어, 웹 사이트, 모바일 앱 등 다양한 영역을 이해해야 할 필요가 있습니다. 불행히도 테이블과 글 머리 기호 목록은 지금까지만 사용할 수 있습니다. 제품 기능을 설명해야 할 때 선택해야하는 것이 중요합니다. 핫스팟 라벨 붙이기.
Apple 컴퓨터는 단순한 라벨 세부 정보의 가장 좋은 예일 수 있습니다. 태블릿, 랩톱 또는 악명 높은 iPhone을 살펴볼 때 그래픽에 대한 정확한 기술을 알 수 있습니다. 이들의 기능 및 기술 사양은 일반적으로 다른 대형 브랜드 컴퓨터 제조업체와 동일합니다. 그러나 그래픽 모델은 원래 제품이므로 실제 제품을 판매하고 있습니다..
프로세스를 분해 할 때 생각할 수있는 것보다 훨씬 간단하다는 점에 유의하십시오. 제품 그래픽은 전체 웹 사이트 디자인의 표준 부분 일뿐입니다. 비료 나 침대 시트 또는 트레이딩 카드를 판매하더라도 이러한 라벨링 기술을 잘 활용할 수 있습니다. 애플은 정보 그래픽이 정말 단순하지만, 그렇게하는 유일한 회사는 아니다. 시험 당신의 틈새 시장에서 기업을 위해 인터넷 검색하기 웹 사이트에 팬시 정보 라벨이나 티저 스크린이 있는지 확인합니다..
4. 동적 콘텐츠가 포함 된 이미지
일부 웹 개발자의 경우 단순히 해당 소프트웨어의 레이블이 지정된 그래픽을 만드는 것만으로는 충분하지 않을 수 있습니다. 이동하려는 고유 기능이 많이 있지만 웹 페이지의 작은 부분에 포함될 수 있습니다. 가능하다. 일련의 입문 단계를 구성하다. 소규모 제품 데모에서 방문자를 안내합니다..
Newsberry는이 예를 우아하게 보여줍니다. 그들의 홈 페이지에는 작은 미니 탐색 기능이있는 블록 영역이 있습니다. 여기에는 다른 스크린 샷과 설명 텍스트가 포함 된 5 단계의 프로세스가 포함됩니다. Newsberry가 어떤 용도로 사용되는지 알지 못하더라도 입문 내용은 사물을 매우 분명하게 설명합니다.. 일련의 슬라이드 전체에 걸쳐 몇 가지 데모 링크가 제공됩니다..
콘텐츠를 살펴볼 때 작은 슬라이드 창 안에 많은 슬라이드에 스크린 샷이 있다는 것을 알아야합니다. 이 효과는 실제로 모방하는 것이 매우 간단합니다! 너는 단지해야한다. 배경 이미지로 사용할 이미지를 찾고 내부에 맞게 스크린 샷 크기 조정. 모든 제품에서이 효과가 적용되는 것은 아니지만 웹 응용 프로그램에서 스크린을 프레임 화하는 좋은 방법입니다..
5. 스크린 샷과 제품 사진 지우기
제품에 가장 적합한 라벨과 기능을 모두 포함 할 수는 있지만 판매량을 놓치지 마십시오. 그만큼 그래픽을 위해 선택한 스크린 샷과 사진은 궁극적으로 모든 세부 정보만큼 중요합니다.. Windows 및 Mac OS X에는 키보드 단축키를 사용하여 전체 데스크탑의 스크린 샷을 찍는 방법이 있습니다. Photoshop에서이 방법을 사용하면 매우 흥미로운 기능 데모를 축적 할 수 있습니다..
제품이 너무 복잡한 경우 몇 가지 다른 이미지를 조합하다.. 위의 Tweetbot 웹 사이트의 예는 파란색 원을 사용하여 앱의 탭 동작을 나타냅니다. 많은 레이블이 포함 된 단일 스크린 샷 대신 작은 jQuery 이미지 갤러리를 사용하여 3-5 개의 서로 다른 그래픽을 결합하는 것을 고려하십시오. 이렇게하면 더 많은 기회를 얻을 수 있습니다. 제품의 다른 관점에 초점을 맞춘다. 방문객에게는 훨씬 풍부한 경험이 제공됩니다..
PC 또는 스마트 폰에서 사진을 찍을 때 사진은 항상 100 % 줌으로 저장됩니다. Photoshop과 같은 이미지 편집기는 크기를 재조정 할 수 있지만 세부적인 사항은 종종 잃어 버립니다. 그런 작은 그래픽을 어떻게 작은 웹 사이트에 넣을 수 있습니까? 가장 좋은 기술 중 하나는 확대 여기에서 응용 프로그램의 크기를 조절하고 가장 중요한 부분의 확대 된 섹션을 만듭니다. 이 기술은 실제 제품보다 소프트웨어에서 더 일반적으로 볼 수 있습니다. 아래에서 설계 프로세스를 자세히 설명했습니다..
6. "줌 렌즈"효과 만들기
Adobe Photoshop에서 돋보기 효과를 만드는 단계를 구성 할 것입니다. 다른 그래픽 편집기를 사용하는 경우 대부분 동일한 작업을 수행 할 수 있지만 메뉴와 명령은 다를 수 있습니다.
이 기술의 가장 좋은 예 중 하나는 Mac 용 앱 홈페이지입니다. 그래픽의 크기가 작아서 작은 그림자와 함께 페이지에 완벽하게 맞춰집니다. 그러나 중요한 영역 중 일부에서는 내부 내용이 훨씬 큰 원이 표시됩니다. 그들은 렌즈를 통해 빛나는 굴절 된 빛으로 나타나기 위해 흰색 내부 광선을 추가했습니다.!
보너스 : "Zoom Lens"효과 Photoshop 튜토리얼
그래픽에 사용하려는 스크린 샷을 시작하십시오. 나는 Hongkiat 홈 페이지의 빠른 화면을 찍었습니다. 저는 브라우저 창을 자르고 약 700px로 크기를 조정할 것입니다. 자신의 웹 사이트 콘텐츠 영역에 맞게 너비를 조정해야합니다. 이제이 배경 위에 새로운 레이어를 만들고 원형을 선택하면서 변화를 비례 적으로 유지합니다. 원하는 색상으로 채우기.
1 단계
원을 선택한 상태에서 레이어 패널의 채우기 %를 0 %로 변경합니다. FX 레이어 아래에 1px-2px 검정색 획과 흰색 내부 광선을 추가합니다. 흰색 조명을 줄이면 불투명도를 줄일 수 있습니다..
2 단계
여전히 선택한 서클을 배경 레이어로 이동하고 Ctrl 키를 누른 채로 유지합니다 (Mac 사용자의 경우 명령 또는 cmd 키입니다..) + c를 눌러 복사하십시오. 그런 다음 배경 위의 돋보기와 붙여 넣기 아래에 새 레이어를 만듭니다. 또는 ctrl + j를 눌러서 선택 영역 만있는 새 레이어를 복제 할 수 있습니다..
ctrl + t를 눌러 변형 도구를 엽니 다. 보유하는 동안 새로운 복제 레이어를 수평 확장합니다. 시프트 모든 것을 비례하고 대체 센터를 정지 상태로 유지하기 위해.
3 단계
Ctrl 키를 누른 상태에서 돋보기 레이어 아이콘을 클릭하여 다시 선택하십시오. 레이어 패널 (돋보기 바로 아래에있는 레이어)에서 복제 된 배경 레이어를 계속 강조 표시해야합니다. 즉 밝은 파란색 배경을 갖습니다..
현재 선택 영역을 반전하려면 Ctrl + Shift + i를 누릅니다. 지금 우리의 re-scaled screenshot에서 여분 쓰레기를 제거하기 위해 삭제를 누르십시오. 약간의 효과를 추가하려면 레이어 FX 메뉴를 끌어 작은 그림자를 추가하십시오. 또한 얇은 1px 세로선을 그릴 수 있고 액센트 필터 (Liquify Filter)를 사용할 수도 있습니다필터> 액자 화제) 작은 핸들 만들기!
결론
환상적인 제품 그래픽을 디자인하려면 기본 사항을 기억해야합니다. 방문객은 자신이 판매하려는 제품을 이해하기 만하면됩니다. 이 정보를 얻는 가장 쉬운 방법은 일련의 스크린 샷 또는 단일 세부 그래픽을 사용하는 것입니다. 레이블은이 퍼즐의 두 번째 요소 일 뿐이며 가장 중요한 기능 세트.
이 기술들을 모두 합치면 더 큰 그림을 보게 될 것입니다. 다운로드 및 구매가 급증 할 것입니다. 특히 홈 페이지에 그래픽을 전면 및 중앙에 배치하는 경우 더욱 그렇습니다. 이러한 기법은 그래픽 및 웹 디자이너가 제품 설계 분야에서 시작하는 데 적합합니다. 우리는 몇 가지 추상적 인 아이디어를 상세히 설명했지만 아래 토론 영역에서 의견을 듣고 싶습니다.!
