PersonalGym

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

Creative21

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

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

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

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

デザイナーの@Naoyaです。

目次

  • 【Photoshopバナーチュートリアル】パーソナルジム【#01】
スポンサーリンク

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

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

今回利用する素材

引用元:github

フォント

引用元:Pixabay

女性の素材

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

ドキュメントを作成する

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

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

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

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

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

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

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

枠を作成する

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

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

「塗り」を選択後、「塗無し」を選択!

「線」を選択後、「カラーピッカー」を選択!

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

ここでは「40px」と入力!

「線の種類」を選択後、一番上の実線を選択!

整列の「内側」を選択!

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

ここでは幅=「600px」高さ=「500px」としてOK!

こんな感じになったね!

長方形を中央に移動する

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

メニューバーの「選択範囲」→「すべてを選択」を選択!

こんな感じになったね!

オプションバーから「水平方向中央揃え」を選択!

こんな感じになったね!

オプションバーから「垂直方向中央揃え」を選択!

こんな感じになったね!

カンバスの全体に対して水平方向と垂直方向に中央揃えをしたので、カンバスの中央に四角のレイヤーを移動することができたよ!

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

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

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

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

https://nexout.blog/photoshop-centered

長方形で装飾を作成する

続いて長方形で装飾を作成するよ!

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

一度何もない部分をクリックして、長方形のレイヤーが選択されている状態を解除!

オプションバーから「塗り」を選択後、カラーピッカーのアイコンをクリック!

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

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

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

ここでは幅=「600px」高さ=「500px」としてOK!

こんな感じになったね!

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

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

オプションバーから「水平方向中央揃え」を選択!

こんな感じになったね!

オプションバーから「垂直方向中央揃え」を選択!

こんな感じになったね!

カンバスの全体に対して水平方向と垂直方向に中央揃えをしたので、カンバスの中央に四角のレイヤーを移動することができたよ!

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

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

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

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

https://nexout.blog/photoshop-centered

長方形を変形する

ツールバーから「パス選択ツール」を選択!

こんな感じになったね!

左上の角を覆う様にドラッグ!

「はい」を選択後、カーソルキーの「↓」を何度かタップ!

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

続いて、右上の角を覆う様にドラッグ後、カーソルキーの「↓」を何度かクリック!

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

ここから先は限定公開です
この続きの文字数: 「2247文字」

すでに購入済みの方はこちら

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

  1. nick bazzy

    This design is spectacular! You certainly know how to keep a reader amused. Between your wit and your videos, I was almost moved to start my own blog (well, almost…HaHa!) Fantastic job. I really enjoyed what you had to say, and more than that, how you presented it. Too cool!

ABOUT ME
Naoya
Naoya
Designer
デジタルアーツ東京→デザインプレックス東京→デザイン制作会社→フリーランス
スポンサーリンク

購読には会員登録が必要です

「半角英数字」と「大文字1個以上」を含む、8文字以上

会員登録には 利用規約/特定商取引法に基づく表記 への同意が必要です。

すでに会員の方はこちら

ログインして記事を読む

メールアドレス
パスワード
パスワードを忘れた方
新規会員登録はこちら

パスワード再設定

パスワードを再設定します。入力したメールアドレスに再設定用のURLをお送りしますので、パスワードの再設定を行なってください。
キャンセル
記事URLをコピーしました