Product Graphics 6画像をより有益なものにするための6つのテクニック
Webデザイナーは、マーケティング手法に精通しています。魅力的なページコンテンツは常に良いですが、それはあなたの訪問者をつかむことになるとメディアの最も人気のある形式です。デモビデオのようなサウンドは不要で、重要な情報をほんの数秒ですばやく伝えることができます。それは簡単に思えるかもしれませんが、ウェブサイト上で有益な画像を構築するためのいくつかの注目すべきテクニックがあります.
これらには、機能ラベル、クローズアップスクリーンショット、価格比較、およびその他の詳細が含まれます。 Webデザイナーは、情報グラフィックを使用して新しいアプリケーション、ソフトウェア、ビデオゲーム、またはその他の多くの製品をモデル化できます。最も一般的には、これらの技術はさまざまな技術分野で利用されています。.
以下のアイデアをチェックしてください。ヒントだけでなく、美しい製品グラフィックの実例が素晴らしい情報とともに詰まっています。.
1.コンテンツを拡張する
有益な画像は、良いWebページコンテンツの代わりに使用しないでください。代わりに あなたのキーポイントを拡大するために画像を使う そして 明確に説明する あなたの訪問者のために。これを行うための最良の方法の1つはです。 重要な分野を強調する小さなデモを作る チュートリアルのいくつかの有益なグラフィックとスクリーンショットを使うと、読者の興味を各ステップに沿って進めるのがずっと簡単になります。.
あなたがソフトウェアチュートリアル（例えばPhotoshopのチュートリアル）を実演しようとするとき、それは難しいかもしれません。 メッセージを文章で伝える. 訪問者はあなたの記事に着陸し、すぐに無意識のうちにほんの数秒以内に資料を判断し始めます。 Web Designer Wallには、CSS3の丸みを帯びた画像と便利なグラフィックを作成するための素晴らしいチュートリアルがあります。これはいくつかのラベルと効果のクローズアップショットを含みます.
元の記事のページでは、この画像はあなたが作成しようとしているものに向かってあなたの頭の中により明確な画像を追加します。著者は小さなデモリンクを追加しました、しかし、なぜいくつかのデモ画像も含まないのですか？適切にラベル付けされたデモショットで注目を集める可能性がはるかに高いです.
しようとする メディアコンテンツのためだけに画像を追加しないでください あなたの投稿に。あなたがイメージなしであなたの方法や推論を説明することができるならば、最初にここから始めてください。後であなたのWebコピーを振り返って振り返るのは、詳細な画像グラフィックの中のいくつかの点を再反復することを検討するべきです。具体的には 複雑さが増すにつれてチュートリアルはより視覚的な合図を必要とする. 2つの例として、Webサイトデータベースまたはテーブルデータセットの構築が挙げられます。.
2.注目すべき機能を強調する
ソフトウェア/テクノロジの各部分には非常に多くの機能があるため、すべての部分を説明することはほとんど不可能です。これだけでなく、あなたの訪問者があなたの情報グラフィックの20+ラベルを読むことに興味を持つことは非常にありそうもないです. 最も興味深い機能に固執する そして ラベルを使ってもう少し詳しく説明する.
ラベルコンテンツのWebコピーを書くとき 鈍い言葉を避ける いつでも可能なとき。訪問者があなたのアプリケーションの最新版を見ているなら、彼らは配色の変化についてあまり気にしないかもしれません。それは彼らの毎日のワークフローにどのように影響するでしょうか？代わりに多分 彼らにとって何が有益かを強調する, 新しいインターフェースパネルやマルチユーザー接続のように。これらは一般にあるべきです 抽象的な機能 それだけでは見えない “見ている” 製品で.
これらの機能を完全に説明するためのそのようなラベルを持つことは最も豊富な応答を提供するでしょう。訪問者は彼らが彼ら自身の決定をすることができる知的で成熟した買い物客として扱われていると感じるでしょう。彼らが本当にあなたの機能を好きなら、これはあなたのソフトウェアや製品を購入することへのより大きな推進力を与えます.
以下はMozilla Firefoxアップデートページの例です。.
デザイナーが点線の曲線を使ってラベルや新機能を指摘しているのがわかります。これらは実際にはコンテナ内に絶対配置された背景画像です。 div. 驚くべきことに、ラベルのテキストもすべてHTMLタグの中に書かれています（ではない 1つだけ大きな画像）.
この方法は、Googleのクローラボットだけでなく、通常はWebページ全体を表示できないモバイルユーザーにとっても便利ではないと思います。.
また、パノラマ機能が左側に表示されていることにも注目してください。 小さいを提供しています “もっと詳しく知る” リンク. これは、おそらく情報グラフィックを構築するときに習得できるベストプラクティスです。同じページ内に別のページやアンカーがある場合、訪問者はこれらのリンクをクリックして複雑な機能についてより理解することができます。.
有益なグラフィックは、訪問者にティーザーや製品の機能を簡単に表示するために使用されます。グラフィックの周りのスペースは限られていますが、 常に外部のページでもっと学ぶ機会を提供する.
3.シンプルで目立たないラベル
ラベル 有益な製品グラフィックを作成する上で本当に重要な側面です。訪問者はおそらくあなたの製品、ソフトウェア、ウェブサイト、モバイルアプリなどのさまざまな分野を理解する必要があるでしょう。残念ながら、テーブルや箇条書きリストの使用はこれまでしかできません。あなたが本当に製品の機能を説明する必要があるときそれは選ぶことが重要です ホットスポット ラベリング用.
アップルコンピュータは、おそらく単純化されたラベルの詳細の最も良い例です。あなたは、タブレット、ラップトップ、または悪名高いiPhoneを見ているとき、あなたは彼らのグラフィックの上でこれらの正確な技術に気付くかもしれません。それらの機能と技術仕様は、一般的に他の大ブランドのコンピュータ製造元と同じです。それでも彼らのグラフィックモデルは非常に手付かずのものであるため、製品は事実上自分自身を販売している。.
プロセスを細かくすると、想像以上に簡単になります。製品のグラフィックは、Webサイト全体のデザインにおける単なる標準的な部分です。肥料やシーツ、トレーディングカードを販売している場合でも、これらのラベリング技術を有効に活用することができます。そして、アップルには本当に単純化された有益なグラフィックスがいくつかありますが、それが唯一の会社ではありません。やってみる あなたのニッチでビジネスのためにグーグル 彼らが自分のウェブサイト上の任意の派手な情報ラベルやティーザースクリーンを遊ばすかどうかを確認する.
4.動的コンテンツを含む画像
Web開発者によっては、ソフトウェアのラベル付きグラフィックを作成するだけでは不十分な場合があります。あなたが行きたいがあなたのウェブページのごく一部に含まれていたいと思うユニークな機能がたくさんあるかもしれません。可能です 一連の導入手順を構築する 小さな製品のデモを通してあなたを訪問者に導きます.
Newsberryはこの例をエレガントに示しています。彼らのホームページであなたはその下に小さなミニナビゲーションがあるブロックエリアに気付くでしょう。それらは異なるスクリーンショットといくつかの付随する説明文でプロセスに沿って5つのステップを含みます。あなたがNewsberryが何のために使われているのか分からなくても、彼らは 入門的な内容は物事をはっきりと説明します. 一連のスライドを通して、いくつかのデモリンクも提供されています。.
コンテンツを移動していくうちに、小さなブラウザウィンドウ内に多くのスライドのスクリーンショットが含まれていることに気づくはずです。この効果は実際にはとても簡単に再現できます。あなたがする必要があります 背景画像として使用する画像を見つけ、内側に合わせてスクリーンショットのサイズを変更します. この効果はすべての製品でうまくいくわけではありませんが、Webアプリケーションから画面をフレーミングするのに良い方法です。.
5.スクリーンショットと製品写真の消去
あなたの製品に最適なラベルと機能をすべて含めることは可能ですが、それでも売上を見逃すことはあり得ません。の グラフィック用に選択したスクリーンショットと写真は、最終的にはすべての細かい詳細と同じくらい重要です。. WindowsとMac OS Xでは、キーボードショートカットを使ってデスクトップ全体のスクリーンショットを撮る方法があります。この方法をPhotoshopのいくつかの時間と組み合わせて使用すると、非常に興味深い機能のデモを蓄積できます。.
あなたの製品が非常に複雑であるならば、あなたは試みるべきです いくつかの異なる画像をまとめる. TweetbotのWebサイトの上記の例では、青い丸印を使ってアプリのタップ操作を示しています。多数のラベルを含む単一のスクリーンショットの代わりに、小さなjQuery画像ギャラリーを使用して3〜5種類のグラフィックを組み合わせることを検討してください。これはあなたに多くの機会を与えます 製品のさまざまな視点に焦点を当てる 訪問者がはるかに豊かな経験を提供されている間.
PCやスマートフォンから写真を撮ると、写真は常に100％ズームで保存されます。 Photoshopのような画像エディタはこれらのサイズを変更することができますが、彼らはしばしば詳細を失います。それでは、どのようにあなたはあなたの小さなウェブサイトにそのようなグラフィックを合わせることができますか？最も良いテクニックの一つは 倍率 アプリケーションを縮小し、最も重要な部分の拡大セクションを作成します。この手法は物理的な製品よりもソフトウェアで一般的に見られます - 私は以下の設計プロセスを詳しく述べました.
6.「ズームレンズ」効果を構築する
私はAdobe Photoshopで虫眼鏡効果を構築するためのステップを構築します。他のグラフィックエディタを使用している場合は、おそらく同じタスクを実行できますが、メニューとコマンドは異なります。.
このテクニックの最も良い例のひとつはThings for Macアプリのホームページにあります。グラフィックのアプリは小さく縮小されているので、小さなドロップシャドウとともに、ページにぴったり収まります。しかし、いくつかの重要な分野では、内側の内容がはるかに大きい円に気付くでしょう。レンズを通して輝く屈折した光として見えるように、彼らはさらに白い内側の輝きを追加しました!
ボーナス：「ズームレンズ」効果Photoshopのチュートリアル
スクリーンショットを撮り始めるには、グラフィックに使用します。 Hongkiatのホームページのクイックスクリーンを撮りました。私はブラウザウィンドウだけをトリミングし、約700ピクセルにサイズ変更します。あなたはあなた自身のウェブサイトのコンテンツエリア内に収まるように幅をリサイズするべきです。今度はこの背景の上に新しいレイヤーを作り、それを比例させるためにshiftを押しながら円形選択をします。好きな色で塗りつぶします.
ステップ1
円を選択したまま、レイヤーパネルの塗りつぶし％を0％に変更します。レイヤーFXの下に1px-2pxの黒のストロークと白の内側の輝きを追加します。あなたはより少ない白い照明のために不透明度を減らすことができます.
ステップ2
サークルを選択したまま背景レイヤーに移動してCtrlキーを押します（Macユーザーの場合は、commandまたはcmdキー.）+ cでコピーします。それから背景の上だが拡大円の下に新しいレイヤーを作り、貼り付けます。代わりにctrl + jを押すだけで、選択範囲だけで新しいレイヤーを複製できます。.
Ctrl + Tキーを押して変換ツールを開きます。保持しながら、新しい複製レイヤーをスケールアウトします。 シフト すべてを比例させる オルト 中心を静止させる.
ステップ3
Ctrlキーを押しながら虫眼鏡レイヤーのアイコンをクリックして、もう一度選択します。レイヤーパネルで複製された背景レイヤー（虫眼鏡のすぐ下のレイヤー）をハイライト表示する必要があります。つまり、背景が水色になります。.
現在の選択を反転するには、Ctrl + Shift + iを押します。今度はdeleteを押して、拡大縮小したスクリーンショットから余分なゴミを取り除きます。ちょっとした追加効果のために、小さいドロップシャドウを加えるためにレイヤーFXメニューを引き上げてください。細い1pxの垂直線を引いてLiquify Filterを使うこともできます（フィルター>液化）小さなハンドルを作成する!
結論
素晴らしい製品グラフィックをデザインするには、基本を覚えておく必要があります。訪問者は単にあなたがそれらを売ろうとしているものを理解したいです！この情報を入手する最も簡単な方法は、一連のスクリーンショットまたは単一の詳細図を使用することです。ラベルは、このパズルの2番目の部分に過ぎません。ここで、最も重要な機能セットの概要を説明します。.
これらのテクニックをすべて組み合わせると、全体像に気付くようになるでしょう。特にホームページの中央にグラフィックを配置すると、ダウンロード数と購入数は急増します。これらのテクニックは、グラフィックデザインやWebデザイナーが製品デザインの分野で始めるのに最適です。私たちはいくつかの抽象的なアイデアを詳しく述べました、しかし、我々は下の議論領域であなたの考えを聞くのが好きです!
