【初級】バナーの模写でPhotoshopをマスター｜初心者のための「本当はむずかしくない」はじめてのPhotoshop

みなさんは「Photoshop」と聞くと、どんなイメージを思い浮かべますか？

• フォトショッパーが神業で画像を合成するアプリ
• カメラマンが撮影した写真を細かく補正するツール
• プロのデザイナーだけが扱える特別なもの

確かに昔のPhotoshopはそうだったかも知れません。Photoshopは日々アップデートを繰り返しており「はじめて使う方にもやさしいアプリ」に進化しているのでご安心ください。

これまで被写体の切り抜きは複雑なパスやマスクを扱うので、高度な技術と多くの時間が必要でした。しかし現在は［被写体を選択］を使えば一瞬できれいな切り抜きが可能です。

Photoshopを起動すると画面にたくさんのアイコンが並んでおり、参考書を片手に調べながら使う必要がありました。今ではツールをマウスオンするだけで「その機能で何ができるのか」を案内してくれるので直感的に扱うことができ、はじめてPhotoshopを使うユーザーへの配慮やサポートが手厚いです。

またPhotoshopはカメラマンだけでなく、Webデザイナーも愛用しているアプリです。多くのWeb制作会社はPhotoshopでデザインを作っているので、今人気のWebデザイナーを目指すならPhotoshopの習得は必須と言っても過言ではないでしょう。

今回の記事では、はじめてPhotoshopを利用する方向けに「バナーデザインの模写」を通して、アプリの基本操作や画像の作成についてレクチャーします。この機会にぜひ新しいPhotoshopを体験してください。

また、本記事ではPhotoshopの操作方法を細かく解説しいるので、サンプルを模写するのに30分〜1時間ほど掛かります。

まずはさっと流し読みしていただき、仕事終わりや休日など、Photoshopをたくさん触れる時間に是非チャレンジしてください。

今回の記事で模写するバナーデザイン

今回は「半額SALE」のバナーデザインを模写します。以下の画像を右クリックメニューから保存してください。

今回はこちらのバナーデザインを模写します。

また、Photoshopで作成したオリジナルのファイルもご提供します。こちらのダウンロードリンクより、画像ファイルをダウンロードしてください。

新規ドキュメントの作成

Photoshopを起動したら、まずは［新規ドキュメント］を作成しましょう。

ホーム画面の左上にある［新規ファイル］をクリックすると［新規ドキュメントダイアログ］が表示されます。

ダイアログの右側は［プリセットの詳細］というエリアで、ここに今回のバナーデザインの模写に必要な「①幅と高さ」「②解像度」「③カラーモード」を入力します。

①幅と高さと単位

［幅］と［高さ］には、作りたい物の縦横のサイズを入力します。今回は正方形のバナーなので、幅と高さに［300］を入力して、単位は［ピクセル］を選択します。この単位［ピクセル］は、パソコンやスマホなどのディスプレイで表示する場面で利用します。

［方向］には向きを入れますが、今回は正方形なのでどちらでも構いません。また［アートボード］を使って制作エリアを用意したいので、チェックを入れましょう。

②解像度と単位

［解像度］には、作るデータの画像の密度を入力します。単位は［ピクセル/インチ］を選択します。

今回制作するバナーの解像度は［72］を指定します。刷物の場合は［300］以上を指定することが多く、これはディスプレイよりも印刷物の方が画像の密度（解像度）が高いからです。

③カラーモード

［カラーモード］では、画像のカラーモードを指定します。今回のバナーでは［RGBカラー］を指定します。印刷物では［CMYKカラー］を指定します。

ディスプレイは、Red・Green・Blueの3色で表現しており、印刷物はCyan・Magenta・Yellow・Key plateの4色で表現している為、それぞれに適したカラーモードを指定します。

［カンバスカラー］は分かりやすく［白］に指定して、右下の［作成］をクリックすると、新規ドキュメントが作成できました。これでPhotoshopを使う準備が完了しました。

新規ドキュメントが完成。

模写用のバナーを配置

それでは早速、模写用のバナー画像をPhotoshopへ配置しましょう。

画面上部のメニューから［ファイル］→［埋め込みを配置］をクリックします。すると、配置するファイルを選択できるダイアログが表示されるので、先程ダウンロードした「bnr.jpg」を選択して、右下の［配置］をクリックします。

Photoshop内のアートボードへ画像が配置されるので、右上の［○］をクリックして配置を完了しましょう。これで模写用バナー画像の配置は完了です。ここで［☓］をクリックすると配置がキャンセルされます。

レイヤーについて

Photoshopには［レイヤー］という機能があり、一枚ずつ画像や文字が重なりながら配置されます。模写を行うときは、一番下のレイヤーに模写用画像を配置して、その上のレイヤーへ文字や図形を置きながら模写していきます。

ここで、模写が行いやすいように、模写用画像の「①不透明度の変更」と「②画像のロック」を行います。

①不透明度の変更

［レイヤーパネル］で配置した模写用画像を選択して、パネル右上の［不透明度］を100%から30%に下げます。これにより、上のレイヤーに配置した文字や図形が見やすくなります。

②画像のロック

続いて、模写用画像を選択した状態で、パネル左上の［ロック］の［鍵マーク］をクリックします。これで模写用画像がロックされるので、上のレイヤーの操作が行いやすくなります。

以下の画像のように、模写用画像が半透明になり、ロックされていれば模写の準備は完了です。

模写用画像が半透明になり、ロックされている状態。

文字ツールの使い方

それでは模写を始めましょう。左側の［ツールパネル］にある［T］を長押して［横書き文字ツール］を選択します。

カーソルが文字の入力モードに切り替わるので、アートボードの中心あたりをクリックします。すると文字の入力が可能になるので、キーボードで「半額」と入力して、画面右上の［○］をクリックして入力を完了します。

文字のサイズが小さいので、サイズを大きく変更しましょう。

左側の［ツールパネル］の一番上にある［移動ツール］をクリックします。

この［移動ツール］では、レイヤーの位置を上下左右に自由に配置したり、［バウンディングボックス］というレイヤーの周囲に表示される8つの点をドラッグすることで、レイヤーのサイズを変更することができます。

※バウンディングボックスが表示されない場合は、画面上部の［バウンディングボックスを表示］にチェックを入れましょう。

また［Shiftキー］を押しながらドラッグすることで、自由な形へサイズの変更ができます。

模写画像と同じサイズになるように［移動ツール］で文字のサイズを調整しましょう。

フォントの変更

文字のサイズは調整できました。続いて、フォントの種類を合わせましょう。

今回は「凸版文久見出しゴシック StdN」というフォントを利用しています。

Adobe Fontsというフォントサービスから利用が行なえますので、こちらのリンクより［アクティベート］のスイッチをONにして、Photoshopへ読み込みましょう。

フォントの変更は［文字パネル］から行えます。画面上部の［ウィンドウ］から［文字］を選択して、右のパネルエリアへ［文字パネル］を表示させます。

［移動ツール］で「半額」の文字レイヤーを選択した状態で、［文字パネル］の［フォントを検索および選択］をクリックして、「凸版」と入力しましょう。

すると、先程アクティベートした「凸版文久見出しゴシック」が表示されるので選択します。これでフォントの変更が完了しました。

文字カラーの変更

文字のカラーは［文字パネル］の右下にある［テキストカラーを設定］をクリックして、［カラーピッカー］を使って変更できます。

今回の文字色は「#e70012」という「濃いめの赤」です。［カラーピッカー］右下の「#」のエリアに「e70012」と6桁の数値を入力して［OK］をクリックします。

文字に斜体をかける

今回の模写用画像の文字には「斜体」と呼ばれる、文字が斜めになる加工が行われています。

斜体は［文字パネル］の下部にある［斜体］を選択することで設定できます。

文字に斜体が掛かった状態。

これで斜体が設定されたので、模写用画像にかなり近づいて来ました。あとは移動ツールを使って、サイズや位置を微調整しながら、背後の文字とぴったり重なるようにします。

模写用画像の文字とぴったり重なった状態。

文字と文字の間隔が広い場合

もし、下記のように文字と文字の間が広くなり、模写用画像とぴったり重ならない場合は［トラッキング設定］箇所に［200］などの数値が入っている可能性があります。その場合は数値を［0］にすると文字同士の距離が模写用画像と同様に指定できます。

縦書きを使う

模写用画像にある「最大」の文字は縦書きを使って入力します。

画面左の［ツールパネル］から［T］を長押しして［縦書き文字ツール］を選択します。

これにより文字が縦書きで入力できるので、入力した後に［移動ツール］で配置と文字のサイズを調整します。

「最大」の文字を縦書きで入力後、配置とサイズを調整した状態。

それでは、残りの文字を入力していきましょう。

すべての文字を入力して、文字の模写が完了した状態。

長方形ツールの使い方

最後の仕上げに、模写用画像の周囲にある枠を配置しましょう。

長方形などの図形は［長方形ツール］で作成します。画面左側の［ツールパネル］にある［□］を長押しして［長方形ツール］を選択します。

マウスカーソルが長方形の入力モードに切り替わるので、アートボードの左上から右下方向へドラッグして、長方形を作成します。

作成した長方形を選択した状態で、画面右側の［プロパティパネル］を開きます。

中段にある［アピアランス］に［塗り］と［線］という項目があります。

［塗り］は図形を塗りつぶしている面の色を指定し、［線］では図形の枠の色を指定します。

今回は線のみの図形なので［塗り］を透明に設定します。

［アピアランス］の［塗り］をクリックすると、カラーを変更できるパネルが表示されるので、上部の［カラーなし］を選択します。

そして［線］をクリックして、上部の右側にある［カラーピッカー］を選択します。この状態で入力している文字をクリックすると、スポイト機能でカラーを取得することができます。

［線］の下部にある［シェイプの線の幅を設定］へ線の幅を入力します。今回は10pxと入力しましょう。

模写用画像とズレているのは「線の整列位置」が異なっている為で、［線の整列タイプを設定］を選択して一番上の内側へ設定を変更します。

すべての模写が完了した状態。

ファイルの保存と画像の書き出し

お疲れ様でした！これでバナーデザインの模写は完了です！

最後に、ファイルの保存と、作成した画像の書き出しを行いましょう。

ファイルの保存

ファイルの保存は画面上部の［ファイル］→［保存］を選択します。ダイアログが表示されるので、「バナーデザイン模写」など付けたい名前を入力して保存します。

最新のPhotoshopでは、ファイルはCreative Cloud上に保存されます。

ファイルを開くときは、［ファイル］→［開く］から、クラウド上に保存された先程のファイルを扱うことが可能です。

画像の書き出し

画像を「jpg」などの形式で書き出しを行います。

画面上部の［ファイル］→［書き出し］から［書き出し形式］をクリックします。

書き出し形式のダイアログが表示されるので、［ファイル設定］の［形式］を［JPG］に指定して、右下の［書き出し］をクリックすると、ローカルファイルとして保存が行えます。

これでバナーデザインの模写はすべて終わりました。

実際に最新のPhotoshopに触れてみて如何だったでしょうか？

Adobe Fontsで簡単にフォントがアクティベートできたり、配置の移動やサイズの変更など簡単に操作できたと思います。

今回ご紹介できなかった部分も直感的に操作ができるので、ぜひいろんなツールや機能を試してみてください。

次回はもう少し踏み込んで、図形が活かされたバナーデザインの模写ができるようにレクチャーする予定です。