ウェブページのバナーは、私たちにとって馴染み深いものです。通常、バナーはウェブページの上部に表示され、会社名とロゴが表示されます。また、広告の形で表示されることもあります。商業ウェブサイトのバナーは、多くの場合、会社名と広告を表示する機能を持っています。 Web バナーには、Web サイトを訪れるユーザーを引き付けるために、必要な情報が含まれており、興味深く魅力的なデザインになっている必要があります。さて、それではウェブバナーの作り方をお教えしましょう。
ステップ 方法1方法 1/6: Photoshopで作成 {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/94\/Make-a-Banner-Step-1-Version-4.jpg\/v4-460px-Make-a-Banner-Step-1-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/94\/Make-a-Banner-Step-1-Version-4.jpg\/v4-728px-Make-a-Banner-Step-1-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":828,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 1新しいファイルを作成します。 バナーのサイズを設定します。通常、Web ページのバナーには標準サイズがあります。 [1] このガイドでは、468 x 60 ピクセルの「全幅バナー」を例として使用します。注: 上記のサイズは標準サイズですが、必ずしもこれに従う必要はありません。必要に応じてサイズを変更することもできます。 2背景レイヤーを塗りつぶします 。 Web ページのスタイルに一致する色を選択して、背景レイヤーを塗りつぶします。前景色をクリックしてカラーピッカーを表示し、塗りつぶします。 ペイント バケットを選択して、選択した色で背景レイヤーを塗りつぶします。 3 新しいレイヤーを作成します 。 テキストとロゴを目立たせるために、このレイヤーはより彩度の高い色で塗りつぶす必要があります。このレイヤーは、元のレイヤーのサイズに比例し、中央に配置する必要があります。新しいレイヤーで、元のレイヤーよりも少し小さい範囲を選択し、選択した色で塗りつぶします。 選択範囲を中央に配置します。レイヤー全体を選択するには、Ctrl+A (PC) または Command+A (Mac) を押します。 次に、レイヤー メニューで、「レイヤーを選択範囲に合わせて整列」-「垂直中央」を選択し、レイヤーを選択して、「レイヤー」-「レイヤーを選択範囲に合わせて整列」-「水平中央」をクリックします。こうすることで、新しいレイヤーが元のレイヤーの真ん中に配置されます。 {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/75\/Make-a-Banner-Step-4-Version-4.jpg\/v4-460px-Make-a-Banner-Step-4-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/75\/Make-a-Banner-Step-4-Version-4.jpg\/v4-728px-Make-a-Banner-Step-4-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":828,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 4ロゴを追加します。 ロゴ ファイルを開いてコピーし、編集中のバナー ファイルに直接貼り付けます。ロゴが新しいレイヤーとして表示されます。必要に応じて、レイヤーのサイズを変更します。 Ctrl+T (PC) または Command+T (Mac) を押し、ハンドルをドラッグしてレイヤーのサイズを変更します。Shift キーを押すと、比例してサイズが変更されます。 {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f5\/Make-a-Banner-Step-5-Version-4.jpg\/v4-460px-Make-a-Banner-Step-5-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f5\/Make-a-Banner-Step-5-Version-4.jpg\/v4-828px-Make-a-Banner-Step-5-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":828,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 5会社名または Web サイト名を追加します。 テキスト ツールを選択し、お気に入りのフォントを選択して、テキストを入力します。サイズを調整する必要がある場合は、前の手順の方法を参照してください。 6 他の要素を追加します 。 バナーによっては、ロゴと名前だけで十分なものもありますが、魅力を高めるためにスローガンや装飾が必要なものもあります。これらの要素を追加するときは、新しいレイヤーを作成して、変更が必要な場合に元のレイヤーに触れる必要がないようにします。 {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b0\/Make-a-Banner-Step-7-Version-4.jpg\/v4-460px-Make-a-Banner-Step-7-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b0\/Make-a-Banner-Step-7-Version-4.jpg\/v4-728px-Make-a-Banner-Step-7-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":828,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 7位置を調整します。 ロゴ、名前、その他の要素の位置を調整して保存します。 広告する 方法2方法 2/6:ペイントで作成 {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/be\/Make-a-Banner-Step-8-Version-4.jpg\/v4-460px-Make-a-Banner-Step-8-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/be\/Make-a-Banner-Step-8-Version-4.jpg\/v4-728px-Make-a-Banner-Step-8-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":828,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 1新しいファイルを作成します。 {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/cc\/Make-a-Banner-Step-9-Version-2.jpg\/v4-460px-Make-a-Banner-Step-9-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/cc\/Make-a-Banner-Step-9-Version-2.jpg\/v4-728px-Make-a-Banner-Step-9-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 2バナーサイズの選択領域をドラッグしてサイズを自分で設定するか、 [1] の標準サイズを参考にしてください。 {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/cc\/Make-a-Banner-Step-10-Version-3.jpg\/v4-460px-Make-a-Banner-Step-10-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/cc\/Make-a-Banner-Step-10-Version-3.jpg\/v4-728px-Make-a-Banner-Step-10-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 3背景を色で塗りつぶしたい場合は、「塗りつぶし」ツールを選択し、お好みの色で塗りつぶします。 もちろん、選択した色は Web ページのスタイルと一致する必要があります。 {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/11\/Make-a-Banner-Step-11-Version-3.jpg\/v4-460px-Make-a-Banner-Step-11-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/11\/Make-a-Banner-Step-11-Version-3.jpg\/v4-828px-Make-a-Banner-Step-11-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":828,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 4画像とテキストを追加します。 [貼り付け] タブをクリックし、メニューから[貼り付け元] を選択します。必要な画像を見つけて、最後に「開く」 ボタンをクリックします。 {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/7e\/Make-a-Banner-Step-12-Version-3.jpg\/v4-460px-Make-a-Banner-Step-12-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/7e\/Make-a-Banner-Step-12-Version-3.jpg\/v4-728px-Make-a-Banner-Step-12-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":828,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 5画像のサイズを変更します。 「サイズ変更」 タブをクリックし、 「ピクセル」 をタップして、バナーのサイズに合わせて画像の高さを設定します。画像を適切な場所に移動します。 好きなだけ写真を追加できます (もちろん、Web サイトのスタイルと一致していることを確認してください)。 {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/29\/Make-a-Banner-Step-13-Version-3.jpg\/v4-460px-Make-a-Banner-Step-13-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/29\/Make-a-Banner-Step-13-Version-3.jpg\/v4-828px-Make-a-Banner-Step-13-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":828,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 6署名を追加します。 署名やその他のテキストを追加するには、テキスト ツール ( A ボタン) を使用します。 7 バナーをトリミングします 。 選択 ツールを使用して、バナーの周囲に最終的に希望するサイズの選択範囲を描画し、 「切り抜き」 をクリックします。 {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/be\/Make-a-Banner-Step-15-Version-3.jpg\/v4-460px-Make-a-Banner-Step-15-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/be\/Make-a-Banner-Step-15-Version-3.jpg\/v4-728px-Make-a-Banner-Step-15-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 8完了したら保存します。 広告する 方法3方法 3/6:パワーポイントで作成 {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/ad\/Make-a-Banner-Step-16-Version-4.jpg\/v4-460px-Make-a-Banner-Step-16-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/ad\/Make-a-Banner-Step-16-Version-4.jpg\/v4-728px-Make-a-Banner-Step-16-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":828,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 1新しい空白のプレゼンテーションを作成します。 2 背景を描きます 。 バナーサイズは標準サイズから選択可能[2] またはカスタマイズすることもできます。 [図形] タブをクリックし、[長方形] を選択します。 指定されたサイズの長方形を描き、それを色で塗りつぶします。デフォルトの色を使用したり、[図形の塗りつぶし] または[図形の効果] メニューから選択したり、 [クイック スタイル] メニューからプリセット スタイルを選択したりできます。 {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/60\/Make-a-Banner-Step-18-Version-4.jpg\/v4-460px-Make-a-Banner-Step-18-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/60\/Make-a-Banner-Step-18-Version-4.jpg\/v4-828px-Make-a-Banner-Step-18-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":828,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 3画像またはロゴを追加します。 バナーに写真、ロゴ、グラフィックを追加できるようになりましたが、ここでは例としてクリップ アートを使用します。 「画像」ボタンをクリックし、必要な画像タイプを選択してから、画像を追加し、画像サイズを調整して、最後に適切な場所に移動します。 {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/03\/Make-a-Banner-Step-19-Version-4.jpg\/v4-460px-Make-a-Banner-Step-19-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/03\/Make-a-Banner-Step-19-Version-4.jpg\/v4-828px-Make-a-Banner-Step-19-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":828,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 4テキストやその他の要素を追加します。 会社名、キャッチフレーズ、その他必要な情報を追加します。 {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/32\/Make-a-Banner-Step-20-Version-4.jpg\/v4-460px-Make-a-Banner-Step-20-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/32\/Make-a-Banner-Step-20-Version-4.jpg\/v4-728px-Make-a-Banner-Step-20-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":828,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 5バナーを選択します。 [編集] メニューから[すべて選択] を 選択するか、Ctrl+A (PC) または Command+A (Mac) を押します。重要: バナーが描画され、スライドに余分なものがないことを確認してください。バナー上のテキスト以外のオブジェクトはすべて、右クリックして「画像として保存」して保存する必要があります。 6 バナーを保存します 。 もう一度開いて、希望する効果かどうかを確認し、Web ページに適用します。 広告する 方法4方法 4/6: オンラインバナーメーカーで作成する {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/52\/Make-a-Banner-Step-22-Version-4.jpg\/v4-460px-Make-a-Banner-Step-22-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/52\/Make-a-Banner-Step-22-Version-4.jpg\/v4-728px-Make-a-Banner-Step-22-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 1.まず、BannersABC.com、Addesigner.com、mybannermaker.com などの Web サイトにログインしてください (Google でさらに検索できます)。 オンラインで利用できるバナー ジェネレーターは多種多様です。時間をかけてさまざまなジェネレーターの結果を比較し、最も気に入ったものを選択してください。 2 テキストと画像を追加します 。 ウェブページのヒントと方法に従って、バナーを段階的に作成します。これらのウェブサイトには通常、選択できる既成の画像が用意されています。もちろん、自分で作成した画像をインポートすることもできます。 3 バナーを生成します 。 バナーが作成されると、通常、Web サイトにエクスポート機能があり、バナーを指定したフォルダーまたはディレクトリに保存できます。また、保存する画像形式 (通常は jpeg として保存) を選択することもできます。ウェブサイトの指示に従って保存、ダウンロードし、自分のウェブページに適用してください。 広告する 方法5方法 5/6: バナーにマッチしたアバターを作成する {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/77\/Make-a-Banner-Step-25-Version-4.jpg\/v4-460px-Make-a-Banner-Step-25-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/77\/Make-a-Banner-Step-25-Version-4.jpg\/v4-728px-Make-a-Banner-Step-25-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 1この手順は不要です。 ただし、フォーラムにバナーを適用する場合は、一致するアバターを使用することをお勧めします。 2 切り抜きツールを選択します 。 ほとんどの画像処理ソフトウェアにはトリミング機能があります。バナーを小さな画像に切り取ります。あるいは、画像を小さくして、バナーにいくつかのオブジェクトを含めるように再設計することもできます。ロゴ、画像、または会社名だけでも構いません。重要なのは、それが表す組織をすぐに認識できるようにすることです。 {"smallurl": "https:\/\/www.wikihow.com \/images_en \/thumb \/7 \/7b \/make-a-banner-step-27-version-4.jpg \/vv4-460px-make-a-banner-step-27-version-4.jpg" www.wikihow.com \/images \/thumb \/7 \/7b \/make-a-banner-step-27-version-4.jpg \/v4-728px-make-a-banner-step-27-version-4.jpg "、" smallwidth ":460、" 385 "" biked " Igheight ":546、"ライセンス ":" <div class = \ "mw-parser-output \"> <\/div> "} 3アバターは小さいはずです。 アバターの標準サイズは 48 x 48 ピクセルです。 {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/dc\/Make-a-Banner-Step-28-Version-4.jpg\/v4-460px-Make-a-Banner-Step-28-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/dc\/Make-a-Banner-Step-28-Version-4.jpg\/v4-728px-Make-a-Banner-Step-28-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":828,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 4アバターを保存します。 広告する 方法6方法 6/6: フォーラムの署名や Web ページなどにバナーを追加します。 {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c4\/Make-a-Banner-Step-29-Version-4.jpg\/v4-460px-Make-a-Banner-Step-29-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c4\/Make-a-Banner-Step-29-Version-4.jpg\/v4-728px-Make-a-Banner-Step-29-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 1アカウントを登録します。 Photobucket、Flickr、Tumblr などの写真共有 Web サイトにアカウントを登録します。登録が完了したら、バナーやアバターなどの関連画像をアップロードします。 2コードを取得します 。 ウェブサイトの共有機能を使用して HTML コードを取得し、フォーラムの署名や Web ページなどにバナーを追加します。 広告するヒント コンピュータにさらにフォントをインストールする必要があります。 練習すれば完璧になります。 フォーラムやウェブサイトなどを頻繁に訪問して、他の人がどのようにバナーを作成しているかを確認してください。 広告する警告する バナーを作るには多くの時間と忍耐が必要です。 Jpeg および Gif 形式の画像ではランダムなぼかし効果が加わる可能性があるため、バナーを 24 ビットのビットマップとして保存し、Jpeg および Gif 形式で別々に保存するのが最適です。 Photobucket に画像をアップロードする場合、Powerpoint で作成された EMF 形式のファイルは認識されないことに注意してください。ファイルを再度開き、JPEG または GIF として保存すると、正常にアップロードできるようになります。 広告する