Webバナーを作成する

>> Adobe PhotoshopでWebバナーを作りましょう Photoshopの基本操作である、シェイプや レイヤースタイル、書き出しについて説明します テンプレートとこれから説明する手順を使えば ブログやYouTubeチャンネルのバナー メールのヘッダー、バナー広告も作れます ダウンロードしたテンプレートを開きます 「ファイル／開く」をクリックし、ファイルを選択して 「開く」をクリックします アセットをライブラリパネルに読み込むと いつでもアクセスできて便利です 詳しくは、このリンクから確認してください このチュートリアルでは必要ないので ここでは、「キャンセル」をクリックします シェイプを組み合わせて目玉焼きを作成します まず円を描きます ツールパネルのシェイプツールを使います 長方形ツールを長押しして、楕円形ツールを選択します ベクトルシェイプはサイズの変更も編集も簡単 あらゆる形状のベクトルシェイプができるので 目玉焼きのようなアートワークがすぐに作れます Shiftキーを押しながらドラッグします Shiftキーを押すと真円になります ちょうどよいサイズのところで 指を離します 新しい楕円形レイヤーができました 後で内容がわかるように レイヤー名を変更します ダブルクリックして、「白身」と入力 Enter（Return）を押します 次に、卵の色を塗ります 属性パネルでカラーボックスをクリックし 円を塗る色を選択します タブをクリックして、パネルを閉じます 移動ツールで円をドラッグし、中央に配置します マゼンタ色のスマートガイドが中央を示します 次に、卵らしいふくらみを表現するため レイヤースタイルを使います シャドウ、境界線、光彩などの クリエイティブな効果を出せます 適用するレイヤーを選択して レイヤー／レイヤースタイル／シャドウ（内側） 希望どおりの表示に調整できるほか 別の効果も試せます シャドウ（外側）、ドロップシャドウなどがあります 「OK」をクリックします シャドウ（内側）効果が適用されました パネルのシェイプレイヤーにも追加され オン/オフの切り替え、編集、削除ができます 次に、黄身を作成しますが 次に、黄身を作成しますが 既にシャドウを付けた白身があるので 複製して編集しましょう シェイプレイヤーを選択した状態で 「レイヤー／レイヤーを複製」をクリック レイヤー名に「黄身」と入力して、「OK」をクリック 「属性」をクリックして、属性パネルを開きます 黄色を選択して、円を塗ります タブをクリックしてパネルを閉じます 黄身のサイズを白身よりも小さくします 変形パネルを使うと 選択したレイヤーでのみ、サイズを変更できます 黄身レイヤーを選択し、移動ツールのまま 「編集／自由変形」をクリックします Shiftキーを押しながら 真円を維持して、内側にドラッグします ちょうどよいサイズで指を離します 変形ボックス内をクリックしたまま 中心のアイコンはクリックしないように注意して 黄身を白身の中にドラッグします 編集が終了したら、確定ボタンをクリックします 完成したバナーを保存しましょう ファイル／別名で保存 Photoshop形式で保存し、レイヤーを維持 後でまたレイヤー別に編集できるようにします 「保存」をクリックします 「互換性を優先」機能をオンにすると Photoshopとその他のプログラムの下位互換性が 維持されます 互換性が必要かわからない場合は オンにしておくことをおすすめします 「OK」をクリックします Webサイト用には別形式で書き出します JPEG、PNG、SVG形式を指定できます ファイル／書き出し／書き出し形式 ファイル形式を選択します ここでは、JPEGにします 「すべてを書き出し」をクリックし、保存先を指定して 「書き出し」をクリックします 書き出しについて詳しくは、Adobe.comにある 別のPhotoshopチュートリアルをご覧ください テンプレートとこの操作方法を使えば ブログやメールの見出し用オリジナルバナー YouTubeのチャンネルアート、バナー広告も作れます 楽しみながら、Photoshopの使い方を覚えましょう