Web用のヘッダーグラフィックを生成する方法

画像、テキスト、メニュー、ボタンに囲まれたWebページの上部に目立つように配置されたヘッダーグラフィックは、サイトの訪問者を歓迎し、Webサイトのトピックと目的をすばやく認識させます。 あなたはあなたのビジネスウェブサイトにヘッダーグラフィックを追加することを検討したかもしれませんが、あなたはグラフィックデザインスキルが足りないと感じました。 画像編集プログラムを使用してレイヤーを組み立てる方法を見つけたら、プロ並みのヘッダーグラフィックをすばやく作成できます。

ヘッダグラフィック

ヘッダーグラフィックには、テキストと背景の上に配置された1つ以上の小さな画像が含まれています。 その背景は色、グラデーション、または画像で構成されます。 Webを閲覧している間、ヘッダーグラフィックの背景がさまざまな形で表示されることがあります。 長方形や楕円形など。 あらゆる種類のグラフィックを作成するには、画像エディタを起動するか、無料のオンライン画像編集サイトにアクセスする必要があります。

背景を追加する

最近の多くの画像エディタでは、レイヤーを使用できます。 レイヤーは想像上の透明なシートで、上に物を描くことができます。 レイヤーは透明なので、それらを重ねて単一の画像を作成できます。 画像エディタがレイヤーをサポートしている場合は、ヘルプドキュメントを読んでそれらがどのように機能するかを学び、「背景」という名前のレイヤーを作成します。 その後、そのレイヤーに使用したい形を描くことができます。 エディタに組み込みの図形がある場合は、それらの図形の1つをクリックしてから、その図形を自動的に描画することができます。

背景を微調整する

色付きの背景を持つヘッダーがWebページ上の他の要素とうまく調和すると思われる場合は、エディターのバケツ塗りつぶしツールを選択して図形の背景色を変更できます。 プログラムによっては、単に「塗りつぶし」と名付けることがあります。 そのツールを使用して図形を色で塗りつぶす前に、プログラムのカラーパネルを見つけて目的の色を選択できます。 背景として図形を使用しないという選択肢もあります。 背景画像に小さな画像を貼り付けるだけです。 その画像が背景になり、その上にテキストやその他のオブジェクトを配置できます。 使用する場合は慎重に画像を選択してください。 ヘッダーグラフィックにテキストを追加する予定がある場合は、背景画像が多すぎるとテキストが読みにくくなる可能性があります。

テキストを挿入する

テキストの見出しはWeb上および印刷物で一般的です。 良いものは、ページやセクションが何についてのものかの要約を提供します。 あなたがあなたのヘッダーグラフィックにテキストを追加したいならば、考えをブレインストーミングして、そしてページ全体またはウェブサイトを説明する短い、キャッチーなフレーズを思い付いてください。 画像エディタがレイヤーをサポートしている場合は、新しいレイヤーを作成してそこにテキストを追加してから、色、フォント、配置、不透明度、境界線のスタイルなどのプロパティを変更できます。 背景とよく調和する色を選択してください。 テキストは背景レイヤーの上にある独自のレイヤーに配置されるため、背景レイヤーに影響を与えることなく、さまざまなテキストデザインを自由に試すことができます。

追加のオブジェクトを追加する

プレーンテキストと背景を含む人目を引くヘッダーグラフィックは、Web全体に表示されます。 あなたはそれらのヘッダを魅力的にするためにそれらに何かを追加する必要はありません。 追加のレイヤーを作成し、それらのレイヤーにシェイプとイメージを追加することもできます。 ブラシツールを使用して、レイヤー上に独自のデザインを描くこともできます。 あなたのヘッダグラフィックはオブジェクトを保持するためのスペースが限られているのであなたはおそらくそれらを小さくする必要があるでしょう。 レイヤーを使用すると、さまざまなオブジェクトをヘッダーの新しい場所に移動したり、他のオブジェクトの後ろに移動したりすることもできます。 これを行うには、プログラムのレイヤパネルを開き、レイヤを調べます。 それらは通常縦一列に積み重ねられた箱のように見えるでしょう。 それらを上下にドラッグして、グラフィックに表示される内容の順序を変更します。

ファイルフォーマットの選択

グラフィックの傑作を完成させたら、いくつかのフォーマットのいずれかでそれを保存することができます。 PNGファイルは最高品質ですが、PNGはJPEGやGIFよりも大きいため、ブラウザで読み込むのに時間がかかります。 ヘッダ画像が小さい場合や、ページの読み込み速度を気にしない場合は、PNG形式を選択してください。 ほんの数色しか含まない非常に単純なヘッダーがある場合や、テキストと背景以外が含まれていない場合は、代わりにGIFとして保存できます。 圧縮されたJPEGはPNGよりも小さく、高品質の画像を生成します。 あなたがWeb上で見る多くのサイトはJPEG画像を使います。 ヘッダーに写真やその他の実物そっくりのコンテンツが含まれていて、もっと大きなPNG形式を使用したくない場合は、JPEG形式を選択してください。 よくわからない場合は、形式を選択するための良い方法は、各形式で画像のコピーを保存して画像を比較することです。 ファイルサイズを確認するには、Windowsエクスプローラで画像ファイルを見つけて右クリックし、[プロパティ]を選択します。

ヘッダグラフィックを変更する

編集プログラムでファイルをネイティブ形式で保存できる場合は、画像の少なくとも1部をその形式で保存します。 これにより、後で戻って画像を簡単に更新できます。 たとえば、PhotoshopにはPSDという名前のネイティブフォーマットがあり、編集した変更を記憶し、後で中断した場所から作業を続けることができます。 これらのネイティブフォーマットファイルの1つを編集したら、コピーをJPEG、PNG、またはGIFとして保存して、これら3つのフォーマットのいずれかをWebサーバーにアップロードできるようにします。 ブラウザは、PSDやその他の種類の「ネイティブフォーマット」の画像を表示できません。

人気の投稿