焼け焦げ| psgips https://psgips.net Photoshopの使い方がよくわかる初級講座 Tue, 19 Mar 2024 08:54:35 +0000 ja hourly 1 https://wordpress.org/?v=6.7.2 https://psgips.net/wp-content/uploads/2016/04/cropped-psgips_icon512x512-1-32x32.png 焼け焦げ| psgips https://psgips.net 32 32 【ロゴ】フォントでつくる！焦げた焼印の文字「パス上文字ツールとシェイプバースト」【2022】 https://psgips.net/photoshop-tutorials/branding-iron Sun, 28 Nov 2021 23:00:00 +0000 https://psgips.net/?p=17999 【Photoshop講座】焼印とは、熱した金型を木や皮革などに押し付けて、それを何らかの印 (しるし) とするものです。Brand (ブランド) の語源とされているところが面白いですね。金型という特性があるので、ひとかた […]

The post 【ロゴ】フォントでつくる！焦げた焼印の文字「パス上文字ツールとシェイプバースト」【2022】 first appeared on psgips.]]> 【Photoshop講座】焼印とは、熱した金型を木や皮革などに押し付けて、それを何らかの印 (しるし) とするものです。Brand (ブランド) の語源とされているところが面白いですね。金型という特性があるので、ひとかたまりの文字にすると、それっぽく仕上がります。フォントや図形、イラストなど、あらゆるものに使える技法をご紹介しましょう。
シェイプバーストを効果的に使おう！
[ シェイプバースト ] とは、放射状のグラデーションを適用できる機能です。焼印には、高温の熱を感じさせるような、「焼け焦げ」の演出が欠かせません。透明度の変化だけではなく、広がる色にも変化を付けたいので、ここは、どうしても、手を加えたいところです。
フォントでつくる！
焦げた焼印の文字
[ STEP-01 ]
[ STEP-02 ]
[ STEP-03 ]
[ STEP-04 ]
[ STEP-05 ]
[ STEP-06 ]
prevnext

焦げた焼印の効果をつける

これから行う操作は、入力したテキストを焼印風に加工する方法です。作例では、大小の文字を組んだ、スマートオブジェクトをベースとして、他のオブジェクトにも適用できるレイヤースタイルで、焦げた焼印の効果をつけます。使用するフォントは任意で設定しますが、目詰まりしにくいサンセリフ系の細い書体が最適です。
画像に文字や図形を配置→焦げた焼印の効果をつける
素材画像をダウンロードしよう！ ( 264 KB )
素材画像をダウンロードしよう！ ( 文字のベース付PSD : 8.7 MB )
目次に戻る
レッスン動画を配信中！
【Photoshop講座】フォントでつくる！焦げた焼印の文字
サムネールをクリックすると、
レッスン動画にリンクします。

フォントを入力する

焼印の文字のベースにする、フォントを選んで入力しましょう。ここでは、楕円形のネームスタンプを想定しているので、まず、その形状が収まる、新しいドキュメントを作成します。
【操作方法】
[ ファイル ] メニューから、[ 新規 ] を選択します。[ 新規ドキュメント] ダイアログで、[ 幅 ] に [ 1920 ] pixel、[ 高さ ] に [ 1080 ] pixel、[ 解像度 ] に [ 72 ] pixel/inch、[ カラーモード ] に [ RGB カラー ] を設定します。
[ 作成 ] をクリックします。
基本がわかる！新規ドキュメントの作成
[新規ドキュメント]を設定
[ 新規ドキュメント ] を設定
焼印の文字のベースになる、新規ドキュメントが作成できました。
新規ドキュメントを作成
新規ドキュメントを作成
ガイドを引こう！
ガイドとは、プリント出力では反映されない仮の基準線です。合成画像や文字などの配置を目安にしたり、スナップで吸着させたい場合などに使用します。正確さを必要とする作業には欠かせません。
基本がわかる！ガイドの作成
目次に戻る

フォントの設定

ドキュメントの中央に、焼印の文字のベースになる、フォントを配置しましょう。ここでは、ポイントテキストで入力します。
【操作方法】
[ ツール ] パネルで、[ 横書き文字ツール ] を選択します。
基本がわかる！文字の入力と編集
[横書き文字ツール]を選択
[ 横書き文字ツール ] を選択
オプションバーで、任意のフォントを設定します。
任意のフォントを選択
任意のフォントを選択
[ フォントサイズを設定 ] に [ 200 pt ] を入力します。
[ アンチエイリアスを設定 ] に [ 滑らかに ] を選択します。
[滑らかに]を選択
[ 滑らかに ] を選択
任意のフォントを設定
作例では、「 Square 721 Extend Roman 」を設定していますが、フォント環境はご使用のパソコンによって異なります。リスト表示される任意のフォントを設定してください。フォントサイズは暫定値です。後ほど調整を行います。[ 整列オプション ] 、[ テキストカラーを設定 ] は、直接的な影響がないため、任意で行なってください。
ドキュメント内をクリックして、文字を入力します。[ enter ] キーを押して、入力を確定します。
文字を入力
文字を入力
[ command ( Ctrl ) ] キーを押しながら、入力した文字をドラッグして、ドキュメントの中央に揃えます。
文字を中央に揃える
文字を中央に揃える
文字間を調整
[ 文字 ] パネルでは、さまざまな書式設定が行えます。[ フォントサイズを設定] を選択したあと、方向キーの上下を押すと、設定値の微調整が行えます。作例では、[ 文字間のカーニングを設定 ] に [ オプティカル ] を選択、[ 選択した文字のトラッキングを設定 ] に [ 75 ] を設定しています。
フォントサイズと文字間を調整
フォントサイズと文字間を調整
基本がわかる！文字の入力と編集
目次に戻る
続きは↓下の番号をクリック！
123422

The post 【ロゴ】フォントでつくる！焦げた焼印の文字「パス上文字ツールとシェイプバースト」【2022】 first appeared on psgips.]]> 【ロゴ】フォントでつくる！焼け焦げたタイトル文字 https://psgips.net/photoshop-tutorials/scorch-style Sat, 03 Feb 2018 23:00:00 +0000 https://psgips.net/?p=18007 【Photoshop講座】新聞紙などが焼け焦げた処理は、文字型で抜く処理が加わると意外に簡単なものです。それは、形状が限られてしまうことで、不自然さを味方にできるから？ なのかも知れません。２つのエフェクトの組み合わせと […]

The post 【ロゴ】フォントでつくる！焼け焦げたタイトル文字 first appeared on psgips.]]> 【Photoshop講座】新聞紙などが焼け焦げた処理は、文字型で抜く処理が加わると意外に簡単なものです。それは、形状が限られてしまうことで、不自然さを味方にできるから？ なのかも知れません。２つのエフェクトの組み合わせと、レイヤースタイルの効果だけで作成できる方法をご紹介しましょう。
マスクを利用したラスタライズ！
文字を入力した「テキストレイヤー」には、形状を崩すなどの変形や加工が行えないので、何らかの方法で「ラスタライズ (ビットマップ化) 」をする必要があります。表示部分を隠すことができる「レイヤーマスク」には、通常のレイヤーと同様にフィルターなどの加工が行えるので、文字型のレイヤーマスクがあれば一気に解決です。
フォントでつくる！
焼け焦げたタイトル文字
[ STEP-01 ]
[ STEP-02 ]
[ STEP-03 ]
[ STEP-04 ]
[ STEP-05 ]
[ STEP-06 ]
prevnext

テキストを焼け焦げ風に加工

これから行う操作は、入力したテキストを焼け焦げ風に加工する方法です。複数のエフェクトで形状を崩し、レイヤースタイルの効果で焼け焦げの色や質感を表現します。
テキストを焼け焦げ風に加工
使用するフォントは任意で設定しますが、作例とは違うピクセルサイズの画像では、エフェクトの効果が発揮できないことがあります。小さくしたい場合は、完成後にレイヤーを統合してリサイズしてください。
目次に戻る
レッスン動画を配信中！
【Photoshop講座】フォントでつくる！焼け焦げたタイトル文字
サムネールをクリックすると、
レッスン動画にリンクします。

フォントを入力する

タイトル文字のベースになるフォントを、素材画像 (任意のドキュメント) に入力します。ステンシル書体がベストですが、スタンダードなゴシック体でも、焼け焦げの効果をつけることができます。
【操作方法】
素材画像をダウンロードして開きます。素材画像は、[ 幅 : 1280 pixel ]、[ 高さ : 720 pixel ] 、[ 解像度 : 72 pixel/inch ]、[ カラーモード : RGB カラー ] を使用しています。背景に敷く素材は、新聞紙や包装紙など、焼け焦げが強調できる白っぽく風合いのある写真が好ましいです。
素材画像をダウンロードしよう！ ( 680 KB )
素材画像を開く
素材画像を開く
photo by Pezibear
[ ツール ] パネルで、[ 横書き文字ツール ] を選択します。
基本がわかる！文字の入力と編集
[横書き文字ツール]を選択
[ 横書き文字ツール ] を選択
オプションバーで、任意のフォントを設定し、[ フォントサイズを設定 ] に [ 250 pt ] を入力します。
[フォントサイズを設定]に[250pt]を入力
[ フォントサイズを設定 ] に [ 250 pt ] を入力
任意のフォントを設定
作例では、「 Stencil Gothic 」を設定していますが、フォント環境はご使用のパソコンによって異なります。リスト表示される任意のフォントを設定してください。
基本がわかる！文字の入力と編集
ドキュメント内をクリックして、ポイントテキストで文字を入力します。
文字を入力
文字を入力
文字の間隔を空けよう！
焼け焦げの効果は、文字の周囲に広がるものなので、隣接する文字が近いとスペースが足りなくなってしまいます。あらかじめ、トラッキングなどで、文字の間隔を少し空けておくと効果的です。
基本がわかる！文字の入力と編集
カーニングとトラッキングを設定
カーニングとトラッキングを設定
文字列が欧文の場合は、[ 文字のカーニングを設定 ] に [ オプティカル ]、[ 選択した文字のトラッキングを設定 ] に [ 100 ] を設定しておくといいでしょう。
目次に戻る
続きは↓下の番号をクリック！
123456

The post 【ロゴ】フォントでつくる！焼け焦げたタイトル文字 first appeared on psgips.]]> 【スタイル】木・焼印「背景画像を活かした焦がし効果」【フリー】 https://psgips.net/photoshop-styles/f-style081 Sun, 03 Sep 2017 23:31:00 +0000 https://psgips.net/?p=21492 【Photoshopレイヤースタイル】クリックひとつで、リアルな質感や陰影が適用できる「オリジナル・レイヤースタイル」です。「焼印」は、背景画像を活かした焦がし効果にこだわりました。適用するフォントサイズで選べる、スタイ […]

The post 【スタイル】木・焼印「背景画像を活かした焦がし効果」【フリー】 first appeared on psgips.]]> 【Photoshopレイヤースタイル】クリックひとつで、リアルな質感や陰影が適用できる「オリジナル・レイヤースタイル」です。「焼印」は、背景画像を活かした焦がし効果にこだわりました。適用するフォントサイズで選べる、スタイルバリエーション８種セットです。可読性の高いセリフ系スタンダード書体がオススメです。
ご利用規約
レイヤースタイルの操作方法

│No.081│木│焼印│

焼印・焼印30
焼印30（使用フォント：American Typewriter/Regular/30 pt）
焼印・焼印36
焼印36（使用フォント：American Typewriter/Regular/36 pt）
焼印・焼印48
焼印48（使用フォント：American Typewriter/Regular/48 pt）
焼印・焼印60
焼印60（使用フォント：American Typewriter/Regular/60 pt）
焼印・焼印72
焼印72（使用フォント：American Typewriter/Regular/72 pt）
焼印・焼印72
焼印100（使用フォント：American Typewriter/Regular/100 pt）
焼印・焼印72
焼印125（使用フォント：American Typewriter/Regular/125 pt）
焼印・焼印72
焼印150（使用フォント：American Typewriter/Regular/150 pt）
スタイルバリエーション：８種
レイヤースタイルの適用例（使用フォント：Tango BT/Regular/90 pt）
クリックでダウンロード！
ダウンロードされる際には必ず「ご利用規約」をお読みください。ダウンロードしたプリセットファイルをダブルクリックすると、[ スタイル ] パネルにレイヤースタイルのサムネールが表示されます。
ご利用規約
その他、レイヤースタイルの詳しい使い方は、「レイヤースタイルの操作方法」ほかのページをご参照ください。
レイヤースタイルの操作方法
ダウンロード
1000 Photoshop Layer Styles

The post 【スタイル】木・焼印「背景画像を活かした焦がし効果」【フリー】 first appeared on psgips.]]> 【スタイル】フード・パン（焼きたてのパン＆クッキー）【フリー】 https://psgips.net/photoshop-styles/f-style073 Sun, 03 Sep 2017 23:23:00 +0000 https://psgips.net/?p=21476 【Photoshopレイヤースタイル】クリックひとつで、リアルな質感や陰影が適用できる「オリジナル・レイヤースタイル」です。「パン」は、焼きたてのパンをイメージしました。フランスパン、ベーグル、シナモンロール、ドーナツ、 […]

The post 【スタイル】フード・パン（焼きたてのパン＆クッキー）【フリー】 first appeared on psgips.]]> 【Photoshopレイヤースタイル】クリックひとつで、リアルな質感や陰影が適用できる「オリジナル・レイヤースタイル」です。「パン」は、焼きたてのパンをイメージしました。フランスパン、ベーグル、シナモンロール、ドーナツ、メロンパン、ラスクなどのスタイルバリエーション12種セットです。クッキー生地にも見えるので、お菓子のイメージとしても活用できます。
ご利用規約
レイヤースタイルの操作方法

│No.073│フード│パン│

パン・タイプA
タイプA
パン・タイプB
タイプB
パン・タイプC
タイプC
パン・タイプD
タイプD
パン・タイプE
タイプE
パン・タイプF
タイプF
パン・タイプG
タイプG
パン・タイプH
タイプH
パン・タイプI
タイプI
パン・タイプJ
タイプJ
パン・タイプK
タイプK
パン・タイプL
タイプL
スタイルバリエーション：12種
レイヤースタイルの適用例（使用フォント：Cookies/Regular/120 pt）
クリックでダウンロード！
ダウンロードされる際には必ず「ご利用規約」をお読みください。ダウンロードしたプリセットファイルをダブルクリックすると、[ スタイル ] パネルにレイヤースタイルのサムネールが表示されます。
ご利用規約
その他、レイヤースタイルの詳しい使い方は、「レイヤースタイルの操作方法」ほかのページをご参照ください。
レイヤースタイルの操作方法
ダウンロード
1000 Photoshop Layer Styles

The post 【スタイル】フード・パン（焼きたてのパン＆クッキー）【フリー】 first appeared on psgips.]]> 【スタイル】フード・ワッフル【フリー】 https://psgips.net/photoshop-styles/f-style037 Thu, 22 Jun 2017 23:37:00 +0000 https://psgips.net/?p=21399 【Photoshopレイヤースタイル】クリックひとつで、リアルな質感や陰影が適用できる「オリジナル・レイヤースタイル」です。「ワッフル」は、格子模様の鉄板で焼き上げたワッフルをイメージしました。プレーンとチョコレートのフ […]

The post 【スタイル】フード・ワッフル【フリー】 first appeared on psgips.]]> 【Photoshopレイヤースタイル】クリックひとつで、リアルな質感や陰影が適用できる「オリジナル・レイヤースタイル」です。「ワッフル」は、格子模様の鉄板で焼き上げたワッフルをイメージしました。プレーンとチョコレートのフチ付き、S、M、Lのスタイルバリエーション12種セットです。
ご利用規約
レイヤースタイルの操作方法

│No.037│フード│ワッフル│

ワッフル・プレーンS
プレーンS
ワッフル・プレーンSピロー
プレーンSピロー
ワッフル・チョコS
チョコS
ワッフル・チョコSピロー
チョコSピロー
ワッフル・プレーンM
プレーンM
ワッフル・プレーンMピロー
プレーンMピロー
ワッフル・チョコM
チョコM
ワッフル・チョコMピロー
チョコMピロー
ワッフル・プレーンL
プレーンL
ワッフル・プレーンLピロー
プレーンLピロー
ワッフル・チョコL
チョコL
ワッフル・チョコLピロー
チョコLピロー
スタイルバリエーション：12種
レイヤースタイルの適用例（使用フォント：Swiss 721 Extended BT/Bold/100 pt）
クリックでダウンロード！
ダウンロードされる際には必ず「ご利用規約」をお読みください。ダウンロードしたプリセットファイルをダブルクリックすると、[ スタイル ] パネルにレイヤースタイルのサムネールが表示されます。
ご利用規約
その他、レイヤースタイルの詳しい使い方は、「レイヤースタイルの操作方法」ほかのページをご参照ください。
レイヤースタイルの操作方法
ダウンロード
1000 Photoshop Layer Styles

The post 【スタイル】フード・ワッフル【フリー】 first appeared on psgips.]]>