ウェブバナーの作り方

ウェブバナーの作り方

ウェブページのバナーは、私たちにとって馴染み深いものです。通常、バナーはウェブページの上部に表示され、会社名とロゴが表示されます。また、広告の形で表示されることもあります。商業ウェブサイトのバナーは、多くの場合、会社名と広告を表示する機能を持っています。 Web バナーには、Web サイトを訪れるユーザーを引き付けるために、必要な情報が含まれており、興味深く魅力的なデザインになっている必要があります。さて、それではウェブバナーの作り方をお教えしましょう。

方法1方法1/6:

Photoshopで作成

  1. {"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. 2背景レイヤーを塗りつぶします Web ページのスタイルに一致する色を選択して、背景レイヤーを塗りつぶします。
    • 前景色をクリックしてカラーピッカーを表示し、塗りつぶします。
    • ペイント バケットを選択して、選択した色で背景レイヤーを塗りつぶします。
  3. 3 新しいレイヤーを作成しますテキストとロゴを目立たせるために、このレイヤーはより彩度の高い色で塗りつぶす必要があります。このレイヤーは、元のレイヤーのサイズに比例し、中央に配置する必要があります。
    • 新しいレイヤーで、元のレイヤーよりも少し小さい範囲を選択し、選択した色で塗りつぶします。
    • 選択範囲を中央に配置します。レイヤー全体を選択するには、Ctrl+A (PC) または Command+A (Mac) を押します。
    • 次に、レイヤーメニューで、「レイヤーを選択範囲に合わせて整列」-「垂直中央」を選択し、レイヤーを選択して、「レイヤー」-「レイヤーを選択範囲に合わせて整列」-「水平中央」をクリックします。こうすることで、新しいレイヤーが元のレイヤーの真ん中に配置されます。
  4. {"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 キーを押すと、比例してサイズが変更されます。
  5. {"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. 6 他の要素を追加しますバナーによっては、ロゴと名前だけで十分なものもありますが、魅力を高めるためにスローガンや装飾が必要なものもあります。これらの要素を追加するときは、新しいレイヤーを作成して、変更が必要な場合に元のレイヤーに触れる必要がないようにします。
  7. {"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:

ペイントで作成

  1. {"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新しいファイルを作成します。
  2. {"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]の標準サイズを参考にしてください。
  3. {"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 ページのスタイルと一致する必要があります。
  4. {"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画像とテキストを追加します。 [貼り付け]タブをクリックし、メニューから[貼り付け元]を選択します。
    • 必要な画像を見つけて、最後に「開く」ボタンをクリックします。
  5. {"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 サイトのスタイルと一致していることを確認してください)。
  6. {"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. 7 バナーをトリミングします選択ツールを使用して、バナーの周囲に最終的に希望するサイズの選択範囲を描画し、 「切り抜き」をクリックします。
  8. {"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:

パワーポイントで作成

  1. {"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新しい空白のプレゼンテーションを作成します。
    • 表示を100%に調整します。
  2. 2 背景を描きますバナーサイズは標準サイズから選択可能[2] またはカスタマイズすることもできます。
    • [図形]タブをクリックし、[長方形] を選択します。
    • 指定されたサイズの長方形を描き、それを色で塗りつぶします。デフォルトの色を使用したり、[図形の塗りつぶし] または[図形の効果]メニューから選択したり、 [クイック スタイル]メニューからプリセット スタイルを選択したりできます。
  3. {"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画像またはロゴを追加します。バナーに写真、ロゴ、グラフィックを追加できるようになりましたが、ここでは例としてクリップ アートを使用します。 「画像」ボタンをクリックし、必要な画像タイプを選択してから、画像を追加し、画像サイズを調整して、最後に適切な場所に移動します。
  4. {"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テキストやその他の要素を追加します。会社名、キャッチフレーズ、その他必要な情報を追加します。
  5. {"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. 6 バナーを保存しますもう一度開いて、希望する効果かどうかを確認し、Web ページに適用します。 広告する
方法4方法4/6:

オンラインバナーメーカーで作成する

  1. {"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. 2 テキストと画像を追加しますウェブページのヒントと方法に従って、バナーを段階的に作成します。これらのウェブサイトには通常、選択できる既成の画像が用意されています。もちろん、自分で作成した画像をインポートすることもできます。
  3. 3 バナーを生成しますバナーが作成されると、通常、Web サイトにエクスポート機能があり、バナーを指定したフォルダーまたはディレクトリに保存できます。また、保存する画像形式 (通常は jpeg として保存) を選択することもできます。ウェブサイトの指示に従って保存、ダウンロードし、自分のウェブページに適用してください。 広告する
方法5方法5/6:

バナーにマッチしたアバターを作成する

  1. {"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. 2 切り抜きツールを選択しますほとんどの画像処理ソフトウェアにはトリミング機能があります。バナーを小さな画像に切り取ります。
    • あるいは、画像を小さくして、バナーにいくつかのオブジェクトを含めるように再設計することもできます。ロゴ、画像、または会社名だけでも構いません。重要なのは、それが表す組織をすぐに認識できるようにすることです。
  3. {"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 ピクセルです。
  4. {"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 ページなどにバナーを追加します。

  1. {"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. 2コードを取得しますウェブサイトの共有機能を使用して HTML コードを取得し、フォーラムの署名や Web ページなどにバナーを追加します。 広告する

ヒント

  • コンピュータにさらにフォントをインストールする必要があります。
  • 練習すれば完璧になります。
  • フォーラムやウェブサイトなどを頻繁に訪問して、他の人がどのようにバナーを作成しているかを確認してください。
広告する

警告する

  • バナーを作るには多くの時間と忍耐が必要です。
  • Jpeg および Gif 形式の画像ではランダムなぼかし効果が加わる可能性があるため、バナーを 24 ビットのビットマップとして保存し、Jpeg および Gif 形式で別々に保存するのが最適です。
  • Photobucket に画像をアップロードする場合、Powerpoint で作成された EMF 形式のファイルは認識されないことに注意してください。ファイルを再度開き、JPEG または GIF として保存すると、正常にアップロードできるようになります。
広告する

<<:  Windows 7 をアクティベートする方法

>>:  iPhoneに音楽を同期する方法

推薦する

夏を涼しく過ごす方法

暑い夏の間は、特にエアコンがなかったり、屋外にいる必要がある場合、涼しく快適に過ごすことが難しいこと...

火山噴火模型の作り方

火山の模型を作ることは、家庭や学校でできる素晴らしい科学実験であるだけでなく、雨の日に子供たちが室内...

自分を安心させる方法

部屋に入ると居心地が悪くなりますか?自分の存在感を減らすために、隅っこに縮こまって静かにしていますか...

舌の痛みを治す方法

舌の不快感は、舌の痛み、灼熱感、または乾燥として現れることがあります。舌の炎症には、咬傷、火傷、感染...

彼氏があなたを利用しているかどうかを知る方法

あなたは最近とても苦しんでいるようです。私は運命の人に出会ったと思って、この新しいボーイフレンドをみ...

カナリアの飼育方法

カナリアを交尾させるには、事前の計画、特殊な装置と餌、そして運が必要です。カナリアは群れで暮らすのが...

胆石を溶かす方法

胆石は、消化できない液体が胆嚢(腹部の右側に位置し、胆汁を貯蔵する小さな臓器)内で石のような塊を形成...

泳ぎ方

水泳を習ったことがない人にとっては、水泳は難しいように思えるかもしれませんが、誰でも習うことができま...

パントマイムのやり方

パントマイムは最も古い形式の演劇のひとつで、俳優が言葉を発することなく、身体を使って一連のストーリー...

男の子に興味があることを伝える方法

もしあなたの理想の男性が突然あなたの現実世界に現れたら、あなたはおそらく、彼に自分が興味を持っている...

痔を小さくする方法

肛門周辺の静脈瘤が腫れると痔になることがあります。内痔核は通常は痛みがなく(出血があっても)、外痔核...

スクリーンプロテクターの貼り方

スマートフォン、iPod、PSP、カメラなどの電子機器は高価であり、最も重要でありながら損傷しやすい...

Facebookで動画を共有する方法

Facebook で動画を共有すると、友達と一緒に興味深い動画を閲覧し、喜びや笑いを共有することがで...

ホウ砂でアリを駆除する方法

家の中にアリがいるけれど、有毒な化学物質や殺虫剤に大金をかけたくないですか?幸いなことに、ホウ砂と砂...

重曹を使ったオーブンの掃除方法

オーブンを掃除する方法は数多くありますが、そのほとんどは化学薬品を使ったものです。最も一般的な方法は...