デザ活

デザ活

web用バナーの作成ソフトにPhotoshopをオススメする5つの理由 [イラストバナー]

約 5 分

スポンサードリンク

web用バナーの作成ソフトにPhotoshopをオススメする5つの理由 [イラストバナー]

webサイトを運営するにあたり、画像作成は必要不可欠のスキルになりつつあるのではないでしょうか、、、今回は、バナー作成をとおして、Photoshopを使えばこんなことが出来るよーということをわかりやすくお伝えしたいと思います。

この記事は、IHコンロなのに、ガス対応のフライパンを買ってしまって落ち込んでいるmaco(@maco_yamase)がお送りします。

web用バナーの作成ソフトにPhotoshopをオススメする5つの理由

1.画像を重ねていくのが簡単!

今回作成したバナーはこちら。youtubeへのリンクバナーです。使用しているのはメイキング動画にもしている画像です。

Youtubeリンクバナー

このバナーがどのようにして作られているかというと、、、

  1. 大きなイラストの必要な部分を切り取る。
  2. 色を調整する
  3. 黒べたのオブジェクトを重ねる
  4. アイコンを重ねる
  5. 文字を置く

というような感じで作っています。イメージしていただきやすいように、gifアニメーションにしてみました。

336_youtubeリンクバナー作成例ループ

 

2.画像の位置あわせが超簡単!

なんと現在のPhotoshopでは移動するときにオブジェクト同士の位置を表示してくれます。方法は簡単。移動ツールを選択したまま〔Ctrl〕を押すだけです。
今回はIllustratorというソフトで作成したアイコン画像を真ん中に配置する際、とても役に立ちました。

イラストバナーの作り方01

 

3.文字の加工が簡単。いったん非表示にすることもできちゃう!

photoshopのテキストツールで文字をいれてみたけれど、、、読みにくい、、、。そんなことがよくあります。以下の画像を見てください。はっきりと「youtubeチャンネル」の文字が読めませんよね。

バナーの作り方02

しかし、Photoshopだと、テキストにも効果をつけられます。数多くの効果がありますが、ここでは「光彩(外側)」という効果を使用しました。
効果は数種類を重ね合わせることもできます。うまくいかなかったな、、、と思ったら、いったん非表示にして、効果がかかっていない状態に戻すこともできます。

イラストバナーの作り方03

 

4.書き出しが楽!そのままwebにアップしてもイメージ通り!

Photoshopには【Web用に保存】という項目があります。「JPEG」「GIF」「PNG」など様々な形式を選択して書き出すことができます。
下にある画像はJPEG形式に書き出す際の画面です。「低画質」「中画質」「やや高画質」「高画質」「最高画質」といった選択項目があります。それぞれを選択した際、どのような画質になるのかはもちろんのこと、どのくらいのファイルサイズになるかが一目でわかります。

イラストバナーの作り方05

なので、「書き出してみたらとても画像が荒い、、、」なんてことや、「画質ばかり気にして画像が重すぎた、、、」なんてことを回避できます!

 

5.おまけ:プロなら超必要!ベクターデータをリンクさせて修正が簡単に!

こちらのポイントはデザイン業界の方向けです。が、私がPhotoshopでバナーを作るとすごく作業性がいいなぁと思ったポイントなのでお伝えさせていただきます。
Adobeさん(Photoshopの発売元)が出している、Illutratorというソフトのデータをコピペできる。というのはあたりまえですが、後から修正することもできちゃうよという機能です。ベクターデータをペーストするときに〔画像〕ではなく〔スマートオブジェクト〕を選択すればいいだけ。
後から「あーここの形を修正したい!!」となったとしても、ベクターデータで修正が効くのでとても楽チンです!

イラストバナーの作り方04

 

まとめ

Photoshopにはweb用の画像を作成する際に役立つ機能がいっぱいです。少しずつ、使う機能から覚えていけばそれでいいと思います。
使っていれば、ここをもっと効率よく、キレイに仕上げるのにはどうしたらいいか悩み始め、調べて、実につき、上達します。
少しずつ、作りたいものから作っていけば、きっと楽しくなってくると思います!

ひとこと

画像を指示された大きさに、指示された形式で、キレイにつくることって、初心者の方にはとても大変なことですよね。かといって、一からすべてを勉強していくことも大変。。
ただ、Photoshopは超メジャーなソフトなので、メイキング解説が世界中にあることも魅力の1つです。「こういう画像をつくりたい」と思ってググれば、たいていのことはヒットします。
ただ、イラストレーションを中心にした日本語の記事は少し少ない印象。。。使い方は解説されているのだけれど、いまいち作りたいものと違うからイメージがわきにくい、、、そんなこともあるのではないでしょうか。

この記事が、あなたの役に立てば幸いです。読んでいただきありがとうございました!!

作業環境

使用ソフト:PhotoshopCC(2014)

パソコンスペック
Windows7 Professional
Intel(R) Core(TM)i7-3820 CPU @ 3.60GHz
実装メモリ32GB

Youtubeチャンネル

このブログを書いている人

I_プロフィール画像250m maco

イラストとデザインが大好きです。このブログでは日々作ったものの報告と、ハウツーまとめ、あと、デザインを多くの人に身近に感じていただける記事を書いています。
スポンサードリンク

twitter

macoのYoutubeチャンネル

macoYoutubeリンクバナー