PersonalGym

【Photoshopバナーチュートリアル】パーソナルジム【#03】

Photoshopのバナーチュートリアルがあればやりたい。
パーソナルジムバナーの参考チュートリアルがあれば見てみたい。

今仕事でパーソナルジムのバナーを作りたいけど、参考になる作り方が存在しない。

こういった疑問に答えるよ!

Naoya
Naoya
やぁ!みんな!元気?

デザイナーの@Naoyaです。

目次

  • 【Photoshopバナーチュートリアル】パーソナルジム【#03】
【Photoshop】無料でダウンロードする方法【失敗しない学習法】Photoshopを無料でダウンロードする方法が知りたい。 そもそもPhotoshopって無料で使えるのかな? こういった疑問に答えるよ!...

【Photoshopバナーチュートリアル】パーソナルジム【#03】

今回はこんな感じのものを作っていくよ!
素材は全て無料なので気になる方はチャレンジしてみてね!

今回利用する素材

     
引用元:Pixabay

女性の素材

     
引用元:Fontfabric

フォント

【Photoshopバナーチュートリアル】パーソナルジム【#03】

ドキュメントを作成する

まずは、ドキュメントを作成するよ!

メニューバーの「ファイル」→「新規」を選択!

新規ドキュメントのショートカット

  • Mac=Command+N
  • Windows=Ctrl+N

新規ドキュメントのショートカットはこんな感じ。

今回はWebを選択して、サイズを幅600px、高さ500px、方向を横、アートボードのチェックを外して、作成!

これでドキュメントを作ることができたね!

【Photoshop】ドキュメントの使い方【作成方法とサイズ変更】Photoshopのドキュメントの使い方がよく分からない。 ドキュメントのサイズ変更ってどうやってやるんだろう。 ドキュメントが作れないと何もできないし、どうしたらいいのか分からない。 こういった疑問に答えます。...

背景に文字を追加する

ツールバーから「横書き文字ツール」を選択!

文字パネルから「Muller-Trial」を選択後、文字サイズ=「90px」文字間=「40」と入力!

太さ=「ExtraBold」を選択!

カラーをクリック!

ここでは#「000000」としてOK!

ワークスペース上でクリック!

こんな感じになったね!

ここでは「GIRLS GYM」と入力後、OS毎の下記のコマンドを押しながらEnter!

  • Mac=Command
  • Windows=Ctrl

こんな感じになったね!

レイヤーを選択後、塗り=「0%」と入力!

レイヤーをダブルクリック!

境界線を選択後、サイズ=「2」位置=「内側」カラーをクリック!

ここでは#「df2582」としてOK!

こんな感じになったね!

ツールバーから「横書き文字ツール」を選択!

文字の上でクリック!

こんな感じになったね!

「S」の後ろにカーソルキーの「→」で移動後、OS毎の下記のコマンドを押しながら何度かカーソルキーの「←」をタップ!

  • Mac=Option
  • Windows=Alt

ここではこんな感じとしておくよ!

同じ要領で気になる余白を詰めよう!

ここではこんな感じとしてOK、OS毎の下記のコマンドを押しながら、Enter!

  • Mac=Command
  • Windows=Ctrl

こんな感じになったね!

文字を移動して複製する

続いて文字を移動して複製するよ!

文字のレイヤーを選択!

ツールバーから「移動ツール」を選択!

文字を左方向へShiftを押しながらドラッグして移動!

こんな感じになったね!

レイヤーを右クリック後「レイヤーを複製」を選択!

レイヤー名を入力後、OKを選択!

レイヤーが複製されたね!

今度はShiftを押しながら右方向へドラッグ!

こんな感じになったね!

【Photoshop】移動ツールの使い方【新人デザイナー向け】Photoshopの移動ツールってどうやって使うのだろう? レイヤーが思うように選択できないのは何故だろう? こういった疑問に答えるよ!...

レイヤーをグループ化して複製する

続いてレイヤーをグループ化して複製するよ!

続いてOS毎の下記のコマンドを押しながらクリックしてレイヤーを複数選択!

  • Mac=Command+クリック
  • Windows=Ctrl+クリック
【Photoshop】レイヤーが複数選択できない時の対処法【新人デザイナー向け】Photoshopでレイヤーが複数選択できない。 レイヤーを複数選択するやり方が分からない。 こういった疑問に答えるよ!...

メニューバーの「レイヤー」→「レイヤーをグループ化」を選択!

こんな感じになったね!

レイヤーを右クリック後「グループを複製」を選択!

グループ名を入力後、OKを入力!

こんな感じになったね!

【Photoshop】グループ化の方法【ショートカットあり】Photoshopのグループ化の方法が分からない。 グループ化の便利な使い方があれば知りたいです。 こういった疑問に答えます。...

移動する

複製したレイヤーを移動するよ!

ツールバーから「移動ツール」を選択!

Shiftを押しながら下方向へドラッグ!

ここではこんな感じとしてOK!

更に複製する

これまでと同じ要領で複製して移動を何度か繰り返して余白を埋めよう!

ここではこんな感じとしてOK!

複製したグループを全て選択!

  • Mac=Command+クリック
  • Windows=Ctrl+クリック
【Photoshop】レイヤーが複数選択できない時の対処法【新人デザイナー向け】Photoshopでレイヤーが複数選択できない。 レイヤーを複数選択するやり方が分からない。 こういった疑問に答えるよ!...

Shiftを押しながら上方向へドラッグ!

ここではこんな感じとしてOK!

先ほどと同じ要領で空いた余白をもう一度埋めよう!

こんな感じになったね!

複製したグループを全て選択!

  • Mac=Command+クリック
  • Windows=Ctrl+クリック
【Photoshop】レイヤーが複数選択できない時の対処法【新人デザイナー向け】Photoshopでレイヤーが複数選択できない。 レイヤーを複数選択するやり方が分からない。 こういった疑問に答えるよ!...

メニューバーの「レイヤー」→「レイヤーをグループ化」を選択!

こんな感じになったね!

角度をつける

続いて文字に角度をつけるよ!

グループのレイヤーを選択!

メニューバーの「編集」→「自由変形」を選択!

ツールバーから角度=「-10」と入力!

こんな感じになるので、Enter!

こんな感じになったね!

透明度を調整する

不透明度=「40%」と入力!

こんな感じになったね!

長方形を追加する

続いて長方形を追加するよ!

ツールバーから「長方形ツール」を選択!

オプションバーから「シェイプ」を選択!

塗りを選択後、カラーピッカーのアイコンをクリック!

ここでは#「df2582」としてOK!

線を選択後、「線無」を選択!

ワークスペース上でクリック!

ここでは幅=「400px」高さ=「325px」角丸=「0」としてOK!

こんな感じになったね!

【Photoshop】長方形ツールの使い方【新人デザイナー向け】Photoshopの長方形ツールってどうやって使うのだろう? サイズや色変更はどうやってやるんだろう? こういった疑問に答えるよ!...

位置を調整する

ツールバーから「移動ツール」を選択!

ツールバーから「選択範囲」→「すべてを選択」を選択!

オプションバーの「垂直方向中央揃え」をクリック!

オプションバーの「垂直方向中央揃え」をクリック!

選択範囲を解除して完了!

選択範囲の解除のショートカット

  • Mac=Command+D
  • Windows=Ctrl+D

選択範囲の解除のショートカットはこんな感じ。

女性を切り抜く

続いて女性を切り抜くよ!

メニューバーの「ファイル」→「開く」を選択!

女性の画像を選択後「開く」を選択!

女性の画像が開いたね!

【Photoshop】画像の開き方【新人デザイナー向け】Photoshopの画像の開き方が分からない。 こういった疑問に答えます。...

ツールバーからズームツールを選択!

女性を切り抜きたいので、ペンツールの入り口にしたい部分を何度かクリック、ここでは足元から切り抜くよ!

こんな感じになったね!

【Photoshop】ズームツールの使い方【新人デザイナー向け】photoshopのズームツールの使い方が分からない。 そもそもズームツールって何だろう? Photoshopのズームツールについて詳しく知りたいです。 こういった疑問に答えるよ!...

ツールバーからペンツールを選択!

オプションバーから「パス」を選択!

女性の周りを囲う様にパスを打っていこう!

髪の毛は後ほどすくい上げるので、スルーでOK!

この部分も同様にスルー

最後は最初に打ったアンカーをもう一度クリック!

これでパスが閉じたね!

【Photoshop】ペンツールの使い方【新人デザイナー向け】Photoshopのペンツールってどうやって使うんだろう? Photoshopのペンツールってそもそも何!? Photoshopのペンツールについて役立つ情報を知りたいです。 こういった疑問に答えるよ!...

パスから選択範囲を作成する

パスを右クリック後、「選択範囲を作成」を選択!

ここではぼかしの半径=「0」としてOK!

こんな感じでパスから選択範囲を作成することができたね!

【Photoshop】パスを選択範囲にできない時の対処法【新人デザイナー向け】Photoshopでパスを選択範囲にできない。 どうやってパスを選択範囲にするのか分からない。 こういった疑問に答えるよ!...

選択範囲を調整する

ツールバーから「長方形選択ツール」を選択!

オプションバーの「選択とマスク」をクリック!

こんな感じになったね!

「境界線ブラシツール」を選択後、ブラシサイズ=「50px」に変更し、先ほどスルーした箇所や若干選択範囲になっていない部分をドラッグ!

こんな感じで選択範囲に毛先が反映されたね!

ツールを「ブラシツール」に切り替えて、選択範囲内で赤くなってしまった部分をドラッグ!

出力先=「レイヤーマスク」に変更!

「OK」を選択!

こんな感じになったね!

続いて、抜けていないこの部分を見えない様にするよ!

ツールバーからペンツールを選択!

オプションバーから「パス」を選択!

こんな感じでパスを作成!

作業用パスの上で右クリック後、選択範囲を作成を選択!

ここではぼかしの半径=「0」としてOK!

こんな感じになったね!

【Photoshop】パスを選択範囲にできない時の対処法【新人デザイナー向け】Photoshopでパスを選択範囲にできない。 どうやってパスを選択範囲にするのか分からない。 こういった疑問に答えるよ!...

メニューバーの「編集」→「塗りつぶし」を選択!

「ブラック」を選択後、OKをして選択範囲を解除!

選択範囲の解除のショートカット

  • Mac=Command+D
  • Windows=Ctrl+D

こんな感じになったね!

【Photoshop】塗りつぶしツールの使い方【新人デザイナー向け】Photoshopの塗りつぶしツールの使い方が分からない。 そもそも塗りつぶしツールって何だろう? Photoshopの塗りつぶしツールについて詳しく知りたいです。 こういった疑問に答えるよ!...
【Photoshop】レイヤーマスクの使い方【新人デザイナー向け】Photoshopのレイヤーマスクってどうやって使うんだろう? Photoshopのレイヤーマスクってそもそも何? Photoshopのレイヤーマスクについて知りたいです。...

女性をコピー&ペーストする

レイヤーから女性のレイヤーをコピー!

コピーのショートカット

  • Mac=Command+C
  • Windows=Ctrl+C

コピーのショートカットはこんな感じ。

先ほどまで作業していたドキュメントを選択!

ペーストのショートカット

  • Mac=Command+V
  • Windows=Ctrl+V

ペーストのショートカットはこんな感じ。

レイヤー上で右クリック後「スマートオブジェクトに変換」を選択!

こんな感じになったね!

【Photoshop】スマートオブジェクトの使い方【新人デザイナー向け】Photoshopの学習を始めたけど、スマートオブジェクトがよく分からない。 スマートオブジェクトって何だろう? スマートオブジェクトの仕組みや使い方が知りたい。 こういった疑問に答えます。...
【Photoshop】コピー&ペーストができない時の対処法【新人デザイナー向け】Photoshopでコピー&ペーストの使い方が分からない。 どうやって使えばいいのか分からない。 こういった疑問に答えるよ!...

大きさを調整する

メニューバーの「編集」→「自由変形」を選択!

カーソルを画像の隅に持っていくよ!
そうすると、カーソルのマークが変わるよ!

その位置でドラッグすると、好きな方向に縮小できるよ!
離れすぎると回転のカーソルになってしまうので、位置は画像の隅を摘まむイメージ!

比率を保ちながら縮小する場合

  • Shiftを押しながらドラッグ

Shiftを押しながらドラッグすると、比率を保ちながら縮小できるよ!

中心を軸に縮小する場合

  • Mac=optionを押しながらドラッグ
  • Windows=Altを押しながらドラッグ

option、Altを押しながらドラッグすると、中央を軸に縮小できるよ!

比率を保ちながら中心を軸に縮小する場合

  • Mac=Shift+optionを押しながらドラッグ
  • Windows=Shift+Altを押しながらドラッグ

Shift+option、Shift+Altを押しながらドラッグすると、比率を保ちながら中心を軸に縮小できるよ!

ここでは、比率を保ちながら中心を軸に縮小をして、こんな感じでOK!

縮小の調整が終わったら、その位置でEnter!

変更の確定のショートカット

  • Enter

これで縮小完了!

【Photoshop】画像を縮小する方法【新人デザイナー向け】Photoshopで画像を縮小する方法が分からない。 こういった疑問に答えるよ!...

位置を調整する

続いて位置を調整するよ!

ツールバーから「移動ツール」を選択!

ドラッグして移動!

ここではこんな感じとしてOK!

こんな感じになったね、最後に文字を入れて完成させよう!

文字を追加する

ツールバーから「横書き文字ツール」を選択!

グループを一旦非表示にして、一番上のレイヤーが選ばれている状態に変更!

文字の大きさ=「110px」斜体にチェックを入れて、カラーをクリック!

ここでは#「ffffff」としてOK!

作っているバナーの上でクリック!

「GIRLS」と入力後、OS毎の下記のコマンドを押しながらEnter!

  • Mac=Command
  • Windows=Ctrl

こんな感じになったね!

文字が重ならない位置でもう一度クリック!

今度は「GYM」と入力後、OS毎の下記のコマンドを押しながらEnter!

  • Mac=Command
  • Windows=Ctrl

こんな感じになったね!

カラーをクリック!

ここでは「000000」としてOK!

こんな感じになったね!

【Photoshop】文字ツールの使い方【新人デザイナー向け】Photoshopの文字ツールってどうやって使うんだろう? そもそも文字ツールって何だろう? こういった疑問に答えるよ! ...

角度を調整する

続いてOS毎の下記のコマンドを押しながらクリックしてレイヤーを複数選択!

  • Mac=Command+クリック
  • Windows=Ctrl+クリック

メニューバーの「レイヤー」→「レイヤーをグループ化」を選択!

こんな感じになったね!

メニューバーの「編集」→「自由変形」を選択!

オプションバーの角度=「-10」と入力!

こんな感じになるので、OS毎の下記のコマンドを押しながらEnter!

  • Mac=Command
  • Windows=Ctrl

こんな感じになったね!

【Photoshop】文字を回転する方法【新人デザイナー向け】Photoshopで文字を回転するにはどうしたらいいんだろう? どこで文字を回転したらいいのか分からない…。 こういった疑問に答えるよ!...

位置を調整する

最後に文字の位置を調整するよ!

ツールバーから「移動ツール」を選択!

今回はこの辺の位置にするよ!

非表示にしていた背景を表示したら完成!

Naoya
Naoya
今日も来てくれてありがとう、またね!
【無料あり】Webデザインスクールおすすめ3選【決定版】Webデザインを学びたいけど、どんなスクールが良いのだろう。 調べてみるとデザインスクールは山のようにあるし、そもそもなに基準で選んだ...
【10点プレゼントの体験版】Adobe Stockを無料で始める手順Adobe Stockを利用したいけど、どうやって始めるんだろう? そもそも、いくらかかるんだろうか、、、。 これからAdobe Stockの契約を考えているので「Adobe Stockの始め方」を知りたいです。 こういった疑問に答えます。...
【Photoshop】無料でダウンロードする方法【失敗しない学習法】Photoshopを無料でダウンロードする方法が知りたい。 そもそもPhotoshopって無料で使えるのかな? こういった疑問に答えるよ!...

デザインを作りたいのに、思うように手が動かない、その原因はツールの基本操作を理解していないことにあります。デザインを始める前の基礎固めならPS ENTRANCEがおすすめ。プロのデザイナーがサポートしてくれるので、独学で挫折する必要はありません。

COMMENT

メールアドレスが公開されることはありません。