汚れ・グランジ| psgips

【ロゴ】フォントでつくる！破れた段ボールの文字「マスクを活用した表現方法」【2023】

古岡ひふみ — Thu, 11 May 2023 23:00:00 +0000

【Photoshop講座】段ボールの中芯の波形や、板紙が剥がれた様子を再現します。ベースに設定する効果から、３枚の層を複製して、それぞれのレイヤーマスクに、変更を加えていきましょう。

マスクで組み立てる！

レイヤーマスクは、グループにも追加することができます。複数のレイヤーに共通したマスク領域が設定できると、効果の幅が広がることはもちろん、作業効率もぐんとアップします。再編集が可能なスマートオブジェクトを含めて、マスク操作を組み立てましょう。

フォントでつくる！

破れた段ボールの文字

[ STEP-01 ]

[ STEP-02 ]

[ STEP-03 ]

[ STEP-04 ]

[ STEP-05 ]

[ STEP-06 ]

テキストを段ボールの文字に加工

これから行う操作は、入力したテキストを、破れた段ボールの文字に加工する方法です。段ボールの中芯の波形や、板紙が剥がれた様子を再現します。使用するフォントは、任意で設定しますが、破れた段ボールの効果が十分に発揮できる、太い書体を選んでください。

破れた段ボールの文字を作成する、大まかな操作手順は、まず、フォントをラスタライズしたレイヤーに、段ボールの質感を追加して、ベースとなる１枚の板紙を作成します。板紙を３枚に複製して、中芯に横縞のパターンを追加します。

波形の変形には、[ 置き換え ] フィルターを適用します。上面の板紙に、下面とは違ったパターンを適用して、文字列の上半分を破きます。[ ブラシツール ] で、剥がれた様子を描画して完成させます。

目次に戻る

フォントを設定する

新しいドキュメントを作成しましょう。このドキュメントに、テキストレイヤー、または、シェイプレイヤーを作成します。

【操作方法】

[ ファイル ] メニューから、[ 新規 ] を選択します。[ 新規ドキュメント ] ダイアログで、[ 幅 ] に、[ 1280 pixel ] を入力します。

[ 高さ ] に、[ 640 pixel ] を入力します。

[ 解像度 ] に、[ 300 pixel/inch ] を入力します。

[ カラーモード ] に、[ RGB カラー / 8 bit ] を選択します。

[ 作成 ] をクリックします。

新規ドキュメントを設定

新規ドキュメントが作成できました。

新規ドキュメントを作成

サイズの目安は？

破れた段ボールの文字を作成する際のドキュメントサイズは、１文字 (欧文) あたり、256 x 256 pixel を目安にしてください。レイヤースタイルの効果は、少なくとも、３つの階調を再現できるピクセル数が必要です。このため、エッジの幅は、5 pixle が推奨されています。

目次に戻る

レッスン動画を配信中！

サムネールをクリックすると、

レッスン動画にリンクします。

テキストを入力

新しいドキュメントが作成できたら、形状のベースにするテキストを入力します。まず、任意のフォントを設定しましょう。

【操作方法】

[ ツール ] パネルで、[ 横書き文字ツール ] を選択します。

基本がわかる！文字の入力と編集

[ 横書き文字ツール ] を選択

オプションバーで、任意のフォントを設定します。

任意のフォントを設定

[ フォントサイズを設定 ] に [ 60 pt ] を入力します。

[ アンチエイリアスを設定 ] に [ 滑らかに ] を選択します。

[ アンチエイリアスを設定 ] に [ 滑らかに ] を選択

任意のフォントを設定

作例では、「 FLY 」を設定していますが、フォント環境はご使用のパソコンによって異なります。リスト表示される任意のフォントを設定してください。

基本がわかる！文字の入力と編集

ドキュメント内をクリックして、ポイントテキストで文字を入力します。

文字を入力

並びをランダムに

作例で使用しているフォントは、それぞれの文字がランダムに並べられるので、ポイントテキストで入力した、そのままの文字列を採用しています。直線的な並びのフォントを使用する場合は、１文字づつを入力して、ランダムに並べ変えましょう。

目次に戻る

背景色を設定

文字の背景に敷く、塗りつぶしレイヤーを作成しましょう。段ボールのカラーが限定されているので、背景には、ホワイト、または、明るい無彩色がおすすめです。

【操作方法】

[ レイヤー ] パネルで、[ 塗りつぶしレイヤーを新規作成 ] をクリックして、メニューから、[ べた塗り ] を選択します。

[ べた塗り 1 ] を作成

[ カラーピッカー ] ダイアログで、[ カラー : H : 0°/ S : 0 % / B : 95 % ] を入力します。

[ OK ] をクリックします。

カラーピッカーの使い方

背景色を設定

テキストをラスタライズ

テキストレイヤー、または、シェイプレイヤーには、フィルターなどの効果を、直接適用することができません。そのため、ベクトル画像から、ピクセルに変換する、ラスタライズを行う必要があります。

目次に戻る

続きは↓下の番号をクリック！

古岡ひふみ

フリーのグラフィックデザイナーです。カタログ、ポスター、パッケージなど様々な分野に携わってきました。

psgips.net

The post 【ロゴ】フォントでつくる！破れた段ボールの文字「マスクを活用した表現方法」【2023】 first appeared on psgips.

【テクスチャ】ゼロからつくる！筋入りクラフト紙「繊細でレトロなハトロン紙」

古岡ひふみ — Mon, 24 Feb 2020 23:00:00 +0000

【Photoshop講座】筋入りクラフト紙とは、封筒や洋裁の型紙などに使用される、細かい縞模様が入ったクラフト紙の一種です。ハトロン紙とも呼ばれています。表面に紙のたわみを付け、繊細でレトロな風合いを再現してみましょう。ゼロからつくるテクスチャの利点は、色と風合いが自由に調整できることです。

本物よりもそれらしく！

特に用紙系の写真素材は、繊細な風合いが足りずフラットな印象になりがちです。そして、背景画像として用いることが多いため、その色調を調整するのにも手間がかかります。目的を見据えた誇張した表現で、本物よりもそれらしく見せるテクニックを身に付けましょう。

ゼロからつくる！

筋入りクラフト紙

[ STEP-01 ]

[ STEP-02 ]

[ STEP-03 ]

[ STEP-04 ]

何もない状態からクラフト紙を描く

こらから行う操作は、Photoshop の機能だけを使って、何もない状態からクラフト紙を描く方法です。といっても、フリーハンドで描くような操作は一切ありません。ステップ・バイ・ステップ方式で、手順どおりに操作すれば、誰でも「筋入りクラフト紙」が作成できます。

目次に戻る

レッスン動画を配信中！

サムネールをクリックすると、

レッスン動画にリンクします。

ベースを作成する

クラフト紙の色は、パルプ原料から漂白されていない自然な薄茶色です。明るすぎて暗すぎてもダメ。赤っぽくなったり青っぽくなったり、この微妙な調合には苦戦を強いられますが、色だけでそれっぽく見せることができれば、テクスチャの半分は出来たも同然です。

【操作方法】

[ ファイル ] メニューから、[ 新規 ] を選択します。[ 新規ドキュメント ] ダイアログで、[ 幅 ] に [ 1280 ] pixel、[ 高さ ] に [ 720 ] pixel、[ 解像度 ] に [ 300 ] pixel/inch、[ カラーモード ] に [ RGB カラー ]、[ 8 bit ] を設定して、[ 作成 ] をクリックします。

基本がわかる！新規ドキュメントの作成

[ 新規 ] を設定

新規ドキュメントを作成します。

新規ドキュメントを作成

[ レイヤー ] パネルで、[ 塗りつぶしレイヤーを新規作成 ] をクリックし、メニューから [ べた塗り ] を選択して、[ べた塗り 1 ] を作成します。

[ べた塗り 1 ] を作成

[ カラーピッカー ] ダイアログで、[ H : 37 / S : 49 / B : 65 ] を設定して、[ OK ] をクリックします。

カラーピッカーの使い方

[ カラーピッカー ] を設定

クラフトペーパーやダンボールのような色で塗つぶせました。

ベースカラーを塗りつぶす

目次に戻る

粒子を設定

塗りつぶしレイヤーで、ベースカラーが塗りつぶせたら、クラフト紙のザラザラした質感をつけます。質感と言っても、細かいものなので、ランダムなノイズのような効果を目指します。

【操作方法】

[ レイヤー ] パネルで、[ 新規レイヤーを作成 ] をクリックして、[ レイヤー 1 ] を作成します。

[ 新規レイヤーを作成 ] をクリック

[ 編集 ] メニューから、[ 塗りつぶし ] を選択します。[ 塗りつぶし ] ダイアログで、[ 内容 ] に [ 50% グレー ] を選択して、[ OK ]をクリックします。

[ 塗りつぶし ] を設定

[ レイヤー ] メニューから、[ スマートオブジェクト ] – [ スマートオブジェクトに変換 ] を選択します。

スマートオブジェクトを確認

スマートオブジェクトとは？

レイヤーや背景を、スマートオブジェクトに変換しておくと、適用するフィルターや、色調補正などの調整が、再編集できるようになります。

[ フィルター ] メニューから、[ フィルターギャラリー ] を選択します。[ フィルターギャラリー ] 操作パネルで、[ アーティスティック ] – [ 粒状フィルム ] を選択します。

[ 粒状フィルム ] を選択

[ 粒状フィルム ] ダイアログで、[ 粒子 ] に [ 4 ]、[ 領域のハイライト ] に [ 0 ]、[ 密度 ] に [ 10 ] を入力して、[ OK ] をクリックします。初期設定

[ 粒状フィルム ] を設定

粒子の強さを設定

[ 粒状フィルム ] は、対象画像の明るさに対して、[ 粒子 ] を適用します。適用範囲を [ 領域のハイライト ] で調整して、[ 密度 ] で境界線の滑らかさを調整します。

作例では、明るさが均一なべた塗り画像に適用しているので、効果の強さを調整する [ 粒子 ] のみが有効です。[ 領域のハイライト ]、[ 密度 ] の設定値を変えても変化しません。

[ レイヤー ] パネルで、描画モードに [ オーバーレイ ] を選択します。

[ 描画モード : オーバーレイ ] を選択

少しザラつきがあるクラフト紙のベースができました。

下のレイヤーを反映する

描画モード [ オーバーレイ ] の中性色は「50% グレー」です。50% グレーの部分は、合成色として影響しないので、下のレイヤーの基本色がそのまま反映され、[ 粒状フィルム ] の粒子のみが適用されます。

目次に戻る

続きは↓下の番号をクリック！

古岡ひふみ

フリーのグラフィックデザイナーです。カタログ、ポスター、パッケージなど様々な分野に携わってきました。

psgips.net

The post 【テクスチャ】ゼロからつくる！筋入りクラフト紙「繊細でレトロなハトロン紙」 first appeared on psgips.

【スタイル】金属・縞鋼板2「腐食・錆・グランジ」【フリー】

古岡ひふみ — Sun, 03 Sep 2017 23:39:00 +0000

【Photoshopレイヤースタイル】クリックひとつで、リアルな質感や陰影が適用できる「オリジナル・レイヤースタイル」です。「縞鋼板2」は、錆や腐食などの使い古した質感にこだわり、出っ張り部分が擦り切れた様子を再現しています。錆色と基本色のカラーバリエーション６色セットです。

ご利用規約

レイヤースタイルの操作方法

│No.089│金属│縞鋼板2│

錆

ホワイト

イエロー

レッド

グリーン

ブルー

錆

ホワイト

イエロー

レッド

グリーン

ブルー

カラーバリエーション：６色

レイヤースタイルの適用例（使用フォント：Swiss 721 BT/Heavy/120 pt）

クリックでダウンロード！

ダウンロードされる際には必ず「ご利用規約」をお読みください。ダウンロードしたプリセットファイルをダブルクリックすると、[ スタイル ] パネルにレイヤースタイルのサムネールが表示されます。

ご利用規約

その他、レイヤースタイルの詳しい使い方は、「レイヤースタイルの操作方法」ほかのページをご参照ください。

レイヤースタイルの操作方法

古岡ひふみ

フリーのグラフィックデザイナーです。カタログ、ポスター、パッケージなど様々な分野に携わってきました。

psgips.net

The post 【スタイル】金属・縞鋼板2「腐食・錆・グランジ」【フリー】 first appeared on psgips.

【スタイル】木・焼印「背景画像を活かした焦がし効果」【フリー】

古岡ひふみ — Sun, 03 Sep 2017 23:31:00 +0000

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

ご利用規約

レイヤースタイルの操作方法

│No.081│木│焼印│

焼印30（使用フォント：American Typewriter/Regular/30 pt）

焼印36（使用フォント：American Typewriter/Regular/36 pt）

焼印48（使用フォント：American Typewriter/Regular/48 pt）

焼印60（使用フォント：American Typewriter/Regular/60 pt）

焼印72（使用フォント：American Typewriter/Regular/72 pt）

焼印100（使用フォント：American Typewriter/Regular/100 pt）

焼印125（使用フォント：American Typewriter/Regular/125 pt）

焼印150（使用フォント：American Typewriter/Regular/150 pt）

スタイルバリエーション：８種

レイヤースタイルの適用例（使用フォント：Tango BT/Regular/90 pt）

クリックでダウンロード！

ご利用規約

その他、レイヤースタイルの詳しい使い方は、「レイヤースタイルの操作方法」ほかのページをご参照ください。

レイヤースタイルの操作方法

古岡ひふみ

フリーのグラフィックデザイナーです。カタログ、ポスター、パッケージなど様々な分野に携わってきました。

psgips.net

The post 【スタイル】木・焼印「背景画像を活かした焦がし効果」【フリー】 first appeared on psgips.

【スタイル】アニマル・クロコダイル（高級ワニ皮革）【フリー】

古岡ひふみ — Sun, 03 Sep 2017 23:27:00 +0000

【Photoshopレイヤースタイル】クリックひとつで、リアルな質感や陰影が適用できる「オリジナル・レイヤースタイル」です。「クロコダイル」は、大きなウロコ模様の、高級ワニ皮革をイメージしました。高解像度シームレスパターンを使用しています。アンティークな風合いのひび割れを表現した、カラーバリエーション12色セットです。

ご利用規約

レイヤースタイルの操作方法

│No.077│アニマル│クロコダイル│

レッドブラウン

ブラウン

レッド

グリーン

ミント

ブルー

バイオレット

ブラック

ベージュ

ライトブラウン

ライトグリーン

ライトブルー

カラーバリエーション：12色

レイヤースタイルの適用例（使用フォント：Impact/Roman/120 pt）

クリックでダウンロード！

ご利用規約

その他、レイヤースタイルの詳しい使い方は、「レイヤースタイルの操作方法」ほかのページをご参照ください。

レイヤースタイルの操作方法

古岡ひふみ

フリーのグラフィックデザイナーです。カタログ、ポスター、パッケージなど様々な分野に携わってきました。

psgips.net

The post 【スタイル】アニマル・クロコダイル（高級ワニ皮革）【フリー】 first appeared on psgips.

【ロゴ】フォントでつくる！レンガ塀の落書き文字「ブレンド条件で背景に馴染ませる」

古岡ひふみ — Thu, 23 Feb 2017 23:00:00 +0000

【Photoshop講座】ストリートアート風の文字を、レンガ塀の素材画像と合成して、白いペンキで落書きされたように加工しましょう。この方法は、[ ブレンド条件 ] を使用します。合成が不自然にならないように、あらかじめ文字のディテールを崩しておくことも重要です。

陰影の階調レベルを見極める！

階調レベルとは、黒から白へ変化する色を段階的に表したものです。[ レベル補正 ] や [ トーンカーブ ] などの調整でよく出ててくるアレです。

[レイヤー効果] の [ ブレンド条件 ] も、この階調レベルのしくみが用いられていて、下のレイヤーの表示する階調と隠す階調を別々に設定できます。さらに、その境界を滑らかにする階調幅が設けられるので、自然な溶け込みや擦れなどが表現できます。

フォントでつくる！

レンガ塀の落書き文字

[ STEP-01 ]

[ STEP-02 ]

[ STEP-03 ]

[ STEP-04 ]

落書きをリアルに再現しよう！

これから行う操作は、あらかじめ作成した文字の図版 (シェイプレイヤー) から加工する方法です。もちろん、ドキュメントに直接入力したテキストレイヤーからでも同じ操作で作成できます。

レンガ塀の表面に文字が描かれたように見せる合成では、デコボコした質感に合わせた演出方法が課題となります。そのため、使用するフォントはある程度の太さが必要です。それさえクリアできれば、どんな文字だって落書き風にすることができます。

目次に戻る

レッスン動画を配信中！

サムネールをクリックすると、

レッスン動画にリンクします。

素材画像を開く

レンガ塀の素材画像に、落書き風のフォントを入力しましょう。作例では、あらかじめ、シェイプレイヤーを作成しています。

【操作方法】

素材画像を開きます。素材画像は PSD 形式で [ 幅 : 1200 pixel ]、[ 高さ : 798 pixel ] 、[ 解像度 : 72 pixel/inch ]、[ カラーモード : RGB カラー ] を使用しています。

素材画像をダウンロードしよう！( 4.9 MB )

PSD 形式の素材画像を開く

素材画像を開いたら、[ レイヤー ] パネルで、[ Ghang! ] シェイプレイヤーが選択されていることを確認してください。

基本がわかる！レイヤーの使い方

[ Ghang! ] シェイプレイヤーを確認

テキストレイヤーも可能

作例の文字は、Illustrator で作成したパスを Photoshop にコピー＆ペーストしたシェイプレイヤーを使用しています。しかし、ドキュメントに直接入力したテキストレイヤーでも、全く同じ手順で作業を進めることができます。

もちろん、透明部分を含んだピクセルレイヤーも可能です。新規レイヤーを作成して、ブラシツールで直接描画するなど、さまざまな方法で応用してみましょう。

Illustratorのアートワークをコピー＆ペーストする方法

目次に戻る

続きは↓下の番号をクリック！

古岡ひふみ

フリーのグラフィックデザイナーです。カタログ、ポスター、パッケージなど様々な分野に携わってきました。

psgips.net

The post 【ロゴ】フォントでつくる！レンガ塀の落書き文字「ブレンド条件で背景に馴染ませる」 first appeared on psgips.

【ロゴ】フォントでつくる！かすれたステンシル文字「背景画像に馴染むキズやかすれを抽出」

古岡ひふみ — Sun, 07 Aug 2016 23:00:00 +0000

【Photoshop講座】型紙で吹き付けられた「ステンシル文字」は、古く朽ち果てた、退廃的なイメージがよく似合います。[ ブレンド条件 ] とは、[ レイヤー効果 ] にある機能で、合成する条件を詳細に調整するものです。背景画像のキズやかすれを抽出して、グランジ風のオシャレな演出を施しましょう。

ブレンド条件を調整してみよう！

[ ブレンド条件 ] は、基本画像と合成画像の、暗い部分や明るい部分を、それぞれ、別々に隠すことができます。たとえば、明るい表面にあるキズは、周辺よりも暗くなっていることが多いので、その階調レベルを設定することによって、キズの部分を簡単に抽出することができます。

フォントでつくる！

かすれたステンシル文字

[ STEP-01 ]

[ STEP-02 ]

[ STEP-03 ]

[ STEP-04 ]

[ STEP-05 ]

文字にキズやかすれを加える

これから行う操作は、入力したテキストに、キズやかすれを加える方法です。フィルターによって、文字のエッジを崩して、背景画像との合成により、リアルなキズやかすれを抽出します。フォントは任意で設定しますが、十分な効果を得るには、サンセリフ系の、できるだけ太い書体が適しています。

目次に戻る

レッスン動画を配信中！

サムネールをクリックすると、

レッスン動画にリンクします。

文字を入力する

かすれたステンシル文字のベースになるフォントを、素材画像 (任意のドキュメント) に入力しましょう。フォントの印象をそのまま残して、キズやかすれの効果を加えます。ここでは、シンプルなステンシル書体を選択します。

【操作方法】

素材画像をダウンロードして開きます。素材画像は、[ 幅 : 1280 pixel ]、[ 高さ : 720 pixel ] 、[ 解像度 : 72 pixel/inch ]、[ カラーモード : RGB カラー ] を使用しています。

素材画像をダウンロードしよう！ ( 201 KB )

素材画像を開く

[ ツール ] パネルで、[ 横書き文字ツール ] を選択します。

基本がわかる！文字の入力と編集

[ 横書き文字ツール ] を選択

オプションバーで、任意のフォントを設定して、[ フォントサイズを設定 ] に [ 250 pt ] を入力します。

[ 250 pt ] を入力

[ アンチエイリアスの種類を設定 ] に [ 滑らかに ] を選択します。

[ 滑らかに ] を選択

ドキュメント内をクリックして、文字を入力します。作例では「 GRUNGE 」を入力しました。

文字が入力できたら、[ enter ] キーを押して、文字の入力を確定します。

ドキュメント内で文字を入力

文字の間隔に注意！

テキストレイヤーの作成は、文字の選択範囲を得るためです。そのため、[ テキストカラー ] を設定する必要はありません。入力した文字の位置を調整するには、[ command ( Ctrl ) ] キーを押しながらドラッグします。

入力した文字の文字間を調整したい場合は、オプションバーで、[ 文字パネルと段落パネルの切り替え ] をクリックします。[ 文字 ] パネルで、[ 文字間のカーニングを設定 ] や [ 選択した文字のトラッキングを設定 ] などの調整を行ってください。

[ 文字 ] パネルを設定

作例では、[ 文字間のカーニングを設定 ] に [ オプティカル ]、[ 選択した文字のトラッキングを設定 ] に [ 50 ] を設定しています。

目次に戻る

続きは↓下の番号をクリック！

古岡ひふみ

フリーのグラフィックデザイナーです。カタログ、ポスター、パッケージなど様々な分野に携わってきました。

psgips.net

The post 【ロゴ】フォントでつくる！かすれたステンシル文字「背景画像に馴染むキズやかすれを抽出」 first appeared on psgips.

【テクスチャ】ゼロからつくる！赤錆びた縞鋼板

古岡ひふみ — Sat, 30 Jul 2016 23:00:00 +0000

【Photoshop講座】縞鋼板とは、滑り止めの出っ張りが付いた鉄板です。使い古された質感は、赤錆びから、出っ張りの部分を擦り取ることで表します。シームレスパターンから、任意のドキュメントサイズへ展開しましょう。

出っ張り部分にパターンを使う！

縞鋼板の赤錆びたベースとは別に、出っ張り部分に、立体的な効果をつけるパターンを作成します。白黒で塗り分けただけのパターンは、3D ソフトで初歩的に行われている「バンプマッピング (高低差を計算する平面地図) 」と同じ手法です。立体的なエッジは、[ ベベルとエンボス ] で設定するので、滑らかにも、ハードにも変えることができます。

ゼロからつくる！

赤錆びた縞鋼板

[ STEP-01 ]

[ STEP-02 ]

[ STEP-03 ]

[ STEP-04 ]

[ STEP-05 ]

[ STEP-06 ]

何もない状態から縞鋼板を描く

こらから行う操作は、Photoshop の機能だけを使って、何もない状態から縞鋼板を描く方法です。といっても、フリーハンドで描くような操作は一切ありません。ステップ・バイ・ステップ方式で、手順どおりに操作すれば、誰でも「赤錆びた縞鋼板」が作成できます。最初に生成する「雲模様」が、そのまま、出っ張り模様のあるリアルな縞鋼板に変身します。

目次に戻る