2022.09.19Design【Photoshopデザインチュートリアル】華麗なるゲートウェイ【#05】Creative21デザインのチュートリアルがやりたい。無料でできるデザインチュートリアルないかな?デザインに興味があるので、デザインを楽しく学習したいな。いった疑問に答えるよ!NaoGやぁ!みんな!元気?デザイナーの@Naoyaです。【Photoshopデザインチュートリアル】華麗なるゲートウェイ【#05】NaoGではゆこう!【Photoshop】無料でダウンロードする方法【失敗しない学習法】Photoshopを無料でダウンロードする方法が知りたい。今回はこんな感じのデザインを作っていくよ!素材は全て無料なので気になる方はチャレンジしてみてね!今回利用する素材https://www.fontfabric.com/fonts/metropolis/引用元:Pixabayhttps://pixabay.com/ja/photos/%e3%82%b3%e3%83%b3%e3%82%af%e3%83%aa%e3%83%bc%e3%83%88-%e5%a3%81-%e9%a2%a8%e5%8c%96-6563515/【Photoshopデザインチュートリアル】華麗なるゲートウェイ【#05】ドキュメントを作成するまずは、ドキュメントを作成するよ!メニューバーの「ファイル」→「新規」を選択!新規ドキュメントのショートカットMac=Command+NWindows=Ctrl+N新規ドキュメントのショートカットはこんな感じ。今回はWebを選択して、サイズを幅1280px、高さ720px、方向を横、アートボードのチェックを外そう!作成!これでドキュメントを作ることができたね!【Photoshop】ドキュメントの使い方【作成方法とサイズ変更】Photoshopのドキュメントの使い方がよく分からない。ドキュメントのサイズ変更ってどうやってやるんだろう。ドキュメントが作れないと何もできないし、どうしたらいいのか分からない。いった疑問に答えます。...べた塗りを追加する続いてべた塗りを追加するよ!メニューバーの「レイヤー」→「新規塗りつぶしレイヤー」→「グラデーション」を選択!レイヤー名を入力後、OKを選択!グラデーションをクリック!基本を選択後、左下の四角をダブルクリック!ここでは「091928」としてOK!続いて右下の四角をダブルクリック!ここでは「000000」としてOK!OKを選択!スタイル=「円形」に変更!角度=「90」比率=「100」方法=「クラシック」としてOK!こんな感じになったね!枠線を追加する続いて枠線を追加するよ!レイヤーの何もない所で一度クリックして何もレイヤーが選ばれていない状態にしよう!ツールバーから長方形ツールを選択!続いてオプションバーから「シェイプ」をクリック!塗りを選択後、カラーピッカーのアイコンをクリック!ここでは「e3c77d」としてOK!続いて線を選択後、線無を選択!ワークスペース上でクリック!幅=「10px」高さ=「1300px」としてOK!こんな感じになったね!プロパティが表示されるので、X=「60px」Y=「-10px」と入力!こんな感じになったね!枠線を複製する続いて枠線を複製して位置を微調整するよ!レイヤー上で右クリック後「レイヤーを複製」を選択!レイヤー名を入力後、OKを選択!レイヤーが複製されたね!【Photoshop】複製ができない時の対処法【新人デザイナー向け】Photoshopで複製ができない。いった疑問に答えるよ!...グループ化する続いて二つの枠線をグループ化するよ!OS毎の下記のコマンドを押しながらレイヤーを複数クリック!Mac=Command+クリックWindows=Ctrl+クリック【Photoshop】レイヤーが複数選択できない時の対処法【新人デザイナー向け】Photoshopでレイヤーが複数選択できない。レイヤーを複数選択するやり方が分からない。いった疑問に答えるよ!...メニューバーの「レイヤー」→「レイヤーをグループ化」を選択!これでレイヤーがグループ化されたね!【Photoshop】グループ化の方法【ショートカットあり】Photoshopのグループ化の方法が分からない。グループ化の便利な使い方があれば知りたいです。いった疑問に答えます。...グループを複製する続いてグループを複製するよ!グループレイヤーを右クリック後「グループを複製」を選択!レイヤー名を入力後「OK」を選択!グループが複製されたね!【Photoshop】複製ができない時の対処法【新人デザイナー向け】Photoshopで複製ができない。いった疑問に答えるよ!...位置を調整する複製したグループの位置を調整するよ!複製したグループを選択!メニューバーの「選択範囲」→「すべてを選択」を選択!ドキュメントの全体、すべての選択範囲を選択することができたね!すべて選択のショートカットMac=Command+AWindows=Ctrl+Aすべて選択のショートカットはこんな感じ。ツールバーから移動ツールを選択!移動ツールのショートカットV移動ツールのショートカットはこんな感じ。移動ツールを選択している状態でオプションバーの「右端揃え」をクリック!右端揃えができたね!選択範囲を解除して完了!選択範囲の解除のショートカットMac=Command+DWindows=Ctrl+D選択範囲の解除のショートカットはこんな感じ。いった疑問に答えるよ!...Shiftを押しながらカーソルキーの「←」をタップ!Shiftを押しながらタップすることで10px刻みで移動できるよ!ここでは、右から60pxの位置に移動してこんな感じとしておくよ!グループを複製する続いてグループを複製して、横の枠線を追加するよ!グループの上で右クリック後「グループを複製」を選択!レイヤー名を入力後「OK」を選択!これでグループが複製されたね!【Photoshop】複製ができない時の対処法【新人デザイナー向け】Photoshopで複製ができない。選択!オプションバーの角度を「90」に変更!こんな感じになるので、Enterで確定!角度が90°回転したね!メニューバーの「選択範囲」→「すべてを選択」を選択!ドキュメントの全体、すべての選択範囲を選択することができたね!すべて選択のショートカットMac=Command+AWindows=Ctrl+Aすべて選択のショートカットはこんな感じ。ツールバーから移動ツールを選択!オプションバーの左端揃えを選択!こんな感じになったね!選択範囲を解除して完了!選択範囲の解除のショートカットMac=Command+DWindows=Ctrl+D選択範囲の解除のショートカットはこんな感じ。枠線を複製する続いて枠線を複製するよ!レイヤーからグループレイヤーを選択!グループを右クリック後「グループを複製」を選択!グループ名を入力後「OK」を選択!グループが複製されたね!メニューバーの「選択範囲」→「すべてを選択」を選択!ドキュメントの全体、すべての選択範囲を選択することができたね!すべて選択のショートカットMac=Command+AWindows=Ctrl+Aすべて選択のショートカットはこんな感じ。オプションバーの上端揃えを選択!こんな感じになったね!選択範囲を解除して完了!選択範囲の解除のショートカットMac=Command+DWindows=Ctrl+D選択範囲の解除のショートカットはこんな感じ。Shiftを押しながらカーソルキーの「↓」をタップ!Shiftを押しながらタップすることで10px刻みで移動できるよ!ここでは、上から60pxの位置に移動してこんな感じとしておくよ!ベベルとエンボスを追加する続いて枠線にベベルとエンボスを追加するよ!レイヤーからグループを複数選択!複数選択のショートカットMac=Command+クリックWindows=Ctrl+クリック複数選択のショートカットはこんな感じ!【Photoshop】レイヤーが複数選択できない時の対処法【新人デザイナー向け】Photoshopでレイヤーが複数選択できない。レイヤーを複数選択するやり方が分からない。いった疑問に答えるよ!...メニューバーの「レイヤー」→「レイヤーをグループ化」を選択!これでレイヤーがグループ化されたね!【Photoshop】グループ化の方法【ショートカットあり】Photoshopのグループ化の方法が分からない。グループ化の便利な使い方があれば知りたいです。いった疑問に答えます。...グループレイヤーをダブルクリック!ベベルとエンボスを選択後、スタイル=「ベベル(内側)」を選択!テクニック=「滑らかに」を選択!深さ=「100」サイズ=「2」ソフト=「0」角度=「90」高度=「80」として光沢輪郭を選択!ここでは下の段の左から三番目の光沢を選択!ハイライトのモード=「覆い焼き(リニア)-加算」を選択!カラーをクリック!ここでは「ffffff」としてOK!シャドウのモード=「乗算」を選択!カラーをクリック!ここでは「000000」としてOK!OKを選択!こんな感じになったね!枠線にテクスチャを追加する続いて枠線にテクスチャを追加するよ!メニューバーの「ファイル」→「埋め込みを配置」を選択!画像を選択後「配置」を選択!画像が配置されるので、カーソルを画像の隅に持っていくよ!そうすると、カーソルのマークが変わるよ!その位置で外側にドラッグをすると、拡大できるよ!離れすぎると回転のカーソルになってしまうので、位置は画像の隅を摘まむイメージ!比率を保ちながら拡大する場合Shiftを押しながらドラッグShiftを押しながらドラッグすると、比率を保ちながら拡大できるよ!中心を軸に拡大する場合Mac=optionを押しながらドラッグWindows=Altを押しながらドラッグoption、Altを押しながらドラッグすると、中央を軸に拡大できるよ!比率を保ちながら中心を軸に拡大する場合Mac=Shift+optionを押しながらドラッグWindows=Shift+Altを押しながらドラッグShift+option、Shift+Altを押しながらドラッグすると、比率を保ちながら中央を軸に拡大できるよ!ここでは、比率を保ちながら中心を軸に拡大をして、こんな感じでEnter!こんな感じになったね!【Photoshop】画像を拡大する方法【新人デザイナー向け】Photoshopで画像を拡大する方法が分からない。いった疑問に答えるよ!...クリッピングマスクするする続いて配置した画像をクリッピングマスクするよ!配置した画像を選択!メニューバーの「レイヤー」→「クリッピングマスクを作成」を選択!これで画像がクリッピングマスクされたね!画面はこんな感じ。【Photoshop】クリッピングマスクの使い方【新人デザイナー向け】Photoshopのクリッピングマスクの使い方が分からない。クリッピングマスクマスクの解除のやり方が分からない。...続いて描画モードを「リニアライト」に変更!不透明度=「20%」に変更!こんな感じになったね!文字を入力する続いて文字を入力するよ!ツールバーから横書き文字ツールを選択!ここでは「ffffff」としてOK!ワークスペース上でクリック!こんな感じになったね!OS毎の下記のショートカットで文字の入力を確定!文字の入力確定のショートカットMac=Command+EnterWindows=Ctrl+Enter文字の入力確定のショートカットはこんな感じ。こんな感じになったね!文字を中央に移動する続いて文字を画面の中央に移動するよ!レイヤーから文字を選択!メニューバーの「選択範囲」→「すべてを選択」を選択!ドキュメントの全体、すべての選択範囲を選択することができたね!すべて選択のショートカットMac=Command+AWindows=Ctrl+Aすべて選択のショートカットはこんな感じ。いった疑問に答えるよ!...垂直方向に中央揃えができたね!カンバスの全体に対して水平方向と垂直方向に中央揃えをしたので、カンバスの中央に文字のレイヤーを移動することができたよ!選択範囲を解除して完了!選択範囲の解除のショートカットMac=Command+DWindows=Ctrl+D選択範囲の解除のショートカットはこんな感じ。【Photoshop】文字を中央揃えする方法【レイヤーでも画像でも何でもOK】Photoshopで文字を中央揃えするやり方が分からない。...文字にベベルとエンボスを追加する続いて文字にベベルとエンボスを追加するよ!文字のレイヤーをダブルクリック!ベベルとエンボスを選択後、スタイル=「ベベル(内側)」を選択!テクニック=「シゼルハード」を選択!深さ=「100」サイズ=「4」角度=「180」高度=「20」として光沢輪郭を選択!下の段の左から三番目の光沢を選択!アンチエイリアスのチェックを外して、ハイライトのモード=「スクリーン」に変更!カラーを選択!ここでは「ffffff」としてOK!シャドウのモード=「乗算」に変更!カラーをクリック!ここでは「000000」としてOK!不透明度=「50」としてOK!こんな感じになったね!文字詰めをする続いて文字詰めをするよ!ツールバーの横書き文字ツールを選択!文字の上でクリック!こんな感じになるので、AとYの間までカーソルキーの「→」で移動!OS毎の下記のコマンドを押しながら「←」を何度かタップ!この間が他の間隔よりも広く見えるので余白を詰めるよ!Mac=optionWindows=Altこんな感じになったね、今と同じ要領で他の余白も気になる所があれば調整!OS毎の下記のコマンドで文字の入力を終了!Mac=Command+EnterWindows=Ctrl+Enterこんな感じになったね!文字の位置をセンターにする文字詰めをして、文字の位置が若干ずれたので、文字をセンター合わせにするよ!文字レイヤーを選択!メニューバーの「選択範囲」→「すべてを選択」を選択!ドキュメントの全体が選択されたね!オプションバーから水平方向中央揃えを選択!水平方向に中央揃えができたね!選択範囲を解除して完了!選択範囲の解除のショートカットMac=Command+DWindows=Ctrl+D選択範囲の解除のショートカットはこんな感じ。こんな感じになったね!テクスチャを追加する続いて、文字にテクスチャを追加するよ!メニューバーの「ファイル」→「埋め込みを配置」を選択!カーソルを画像の隅に持っていくよ!そうすると、カーソルのマークが変わるよ!その位置でドラッグをすると、好きな方向に拡大できるよ!離れすぎると回転のカーソルになってしまうので、位置は画像の隅を摘まむイメージ!比率を保ちながら拡大する場合Shiftを押しながらドラッグShiftを押しながらドラッグすると、比率を保ちながら拡大できるよ!中心を軸に拡大する場合Mac=optionを押しながらドラッグWindows=Altを押しながらドラッグoption、Altを押しながらドラッグすると、中央を軸に拡大できるよ!比率を保ちながら中心を軸に拡大する場合Mac=Shift+optionを押しながらドラッグWindows=Shift+Altを押しながらドラッグShift+option、Shift+Altを押しながらドラッグすると、比率を保ちながら中央を軸に拡大できるよ!ここでは、比率を保ちながら中心を軸に拡大をして、こんな感じでEnter!こんな感じになったね!【Photoshop】画像を拡大する方法【新人デザイナー向け】Photoshopで画像を拡大する方法が分からない。いった疑問に答えるよ!...画像をクリッピングマスクする続いて画像をクリッピングマスクするよ!レイヤーから画像を選択!メニューバーの「レイヤー」→「クリッピングマスクを作成」を選択!こんな感じになったね!画面はこんな感じ。【Photoshop】クリッピングマスクの使い方【新人デザイナー向け】Photoshopのクリッピングマスクの使い方が分からない。クリッピングマスクマスクの解除のやり方が分からない。...グラデーションオーバーレイを追加する最後に文字レイヤーを複製してグラデーションオーバーレイを追加するよ!文字レイヤーを選択後、OS毎の下記のコマンドで複製!Mac=Command+JWindows=Ctrl+J文字レイヤーが複製されたね!下の文字レイヤーを選択後、一番上までドラッグ!レイヤーをダブルクリック!レイヤースタイルが開くので「ベベルとエンボス」のチェックを外そう!左下のアイコンから「グラデーションオーバーレイ」を選択、既に表示されている方はそちらからチェックを入れればOK!描画モード=「覆い焼き(リニア)-加算」を選択!不透明度=「30」として、グラデーションをクリック!基本から白黒のグラデーションを選択後、左下の四角をダブルクリック!ここでは「7e7e7e」としてOK!続いて右下の四角をダブルクリック!こちらも「7e7e7e」としてOK!続いて下のライン上の真ん中の辺りをクリック!ここでは「ffffff」としてOK!位置=「50」としてOK!スタイル=「線形」を選択!角度=「110」比率=「150」方法=「クラシック」としてOK!塗り=「0%」に変更!これで完成!!!お疲れ様!!!いいいぃぃぃえぇぇぇえええーいいいぃぃぃ!!!Naoya今日も来てくれてありがとう、またね!【無料あり】Webデザインスクールおすすめ3選【決定版】Webデザインを学びたいけど、どんなスクールが良いのだろう。そもそも、いくらかかるんだろうか、、、。Stockの始め方」を知りたいです。いった疑問に答えます。...【Photoshop】無料でダウンロードする方法【失敗しない学習法】Photoshopを無料でダウンロードする方法が知りたい。いった疑問に答えるよ!...メールアドレスが公開されることはありません。NexOut記事URLをコピーしました。