サテンによる効果| psgips

【ロゴ】フォントでつくる！焦げた焼印の文字「パス上文字ツールとシェイプバースト」【2022】

古岡ひふみ — Sun, 28 Nov 2021 23:00:00 +0000

【Photoshop講座】焼印とは、熱した金型を木や皮革などに押し付けて、それを何らかの印 (しるし) とするものです。Brand (ブランド) の語源とされているところが面白いですね。金型という特性があるので、ひとかたまりの文字にすると、それっぽく仕上がります。フォントや図形、イラストなど、あらゆるものに使える技法をご紹介しましょう。

シェイプバーストを効果的に使おう！

[ シェイプバースト ] とは、放射状のグラデーションを適用できる機能です。焼印には、高温の熱を感じさせるような、「焼け焦げ」の演出が欠かせません。透明度の変化だけではなく、広がる色にも変化を付けたいので、ここは、どうしても、手を加えたいところです。

フォントでつくる！

焦げた焼印の文字

[ STEP-01 ]

[ STEP-02 ]

[ STEP-03 ]

[ STEP-04 ]

[ STEP-05 ]

[ STEP-06 ]

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

これから行う操作は、入力したテキストを焼印風に加工する方法です。作例では、大小の文字を組んだ、スマートオブジェクトをベースとして、他のオブジェクトにも適用できるレイヤースタイルで、焦げた焼印の効果をつけます。使用するフォントは任意で設定しますが、目詰まりしにくいサンセリフ系の細い書体が最適です。

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

素材画像をダウンロードしよう！ ( 文字のベース付PSD : 8.7 MB )

目次に戻る

レッスン動画を配信中！

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

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

フォントを入力する

焼印の文字のベースにする、フォントを選んで入力しましょう。ここでは、楕円形のネームスタンプを想定しているので、まず、その形状が収まる、新しいドキュメントを作成します。

【操作方法】

[ ファイル ] メニューから、[ 新規 ] を選択します。[ 新規ドキュメント] ダイアログで、[ 幅 ] に [ 1920 ] pixel、[ 高さ ] に [ 1080 ] pixel、[ 解像度 ] に [ 72 ] pixel/inch、[ カラーモード ] に [ RGB カラー ] を設定します。

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

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

[ 新規ドキュメント ] を設定

焼印の文字のベースになる、新規ドキュメントが作成できました。

新規ドキュメントを作成

ガイドを引こう！

ガイドとは、プリント出力では反映されない仮の基準線です。合成画像や文字などの配置を目安にしたり、スナップで吸着させたい場合などに使用します。正確さを必要とする作業には欠かせません。

目次に戻る

フォントの設定

ドキュメントの中央に、焼印の文字のベースになる、フォントを配置しましょう。ここでは、ポイントテキストで入力します。

【操作方法】

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

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

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

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

任意のフォントを選択

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

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

[ 滑らかに ] を選択

任意のフォントを設定

作例では、「 Square 721 Extend Roman 」を設定していますが、フォント環境はご使用のパソコンによって異なります。リスト表示される任意のフォントを設定してください。フォントサイズは暫定値です。後ほど調整を行います。[ 整列オプション ] 、[ テキストカラーを設定 ] は、直接的な影響がないため、任意で行なってください。

ドキュメント内をクリックして、文字を入力します。[ enter ] キーを押して、入力を確定します。

文字を入力

[ command ( Ctrl ) ] キーを押しながら、入力した文字をドラッグして、ドキュメントの中央に揃えます。

文字を中央に揃える

文字間を調整

[ 文字 ] パネルでは、さまざまな書式設定が行えます。[ フォントサイズを設定] を選択したあと、方向キーの上下を押すと、設定値の微調整が行えます。作例では、[ 文字間のカーニングを設定 ] に [ オプティカル ] を選択、[ 選択した文字のトラッキングを設定 ] に [ 75 ] を設定しています。

フォントサイズと文字間を調整

目次に戻る

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

古岡ひふみ

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

psgips.net

The post 【ロゴ】フォントでつくる！焦げた焼印の文字「パス上文字ツールとシェイプバースト」【2022】 first appeared on psgips.

【ロゴ】フォントでつくる！キラキラ輝く金属文字「ベベルとエンボス」

古岡ひふみ — Mon, 09 Dec 2019 23:00:00 +0000

【Photoshop講座】キラキラ輝く演出には、光源から放たれる線 (光条) を交差させる「クロス」がポピュラーです。６本の光条がある「スノークロス」を疑似的に作成して、金属の立体文字に配置しましょう。

スペクトルで差をつける！

キラキラ輝くスノークロスを、よりリアルなものにするには、光が乱反射する、虹色のスペクトルを取り入れます。放射状のグラデーションは、[ スタイル ] に [ 円形 ] を選択して、カスタム設定します。

フォントでつくる！

キラキラ輝く金属文字

[ STEP-01 ]

[ STEP-02 ]

[ STEP-03 ]

[ STEP-04 ]

キラキラ輝く光の演出を加える

これから行う操作は、入力したテキストを、立体的な金属文字に加工する方法です。レイヤースタイルでつくり出した文字列のベースに、シェイプで作成したスノークロスを配置して、キラキラ輝く光の演出を加えます。使用するフォントは、任意で設定しますが、セリフ系や明朝系の細い書体でも、対応できる技法を用います。

画像にテキストを入力

キラキラ輝く光の演出を加える

目次に戻る

境界線で文字を太らせる

キラキラ輝く金属文字のベースになるフォントを素材画像 (任意のドキュメント) に入力します。特に筆記体などは、文字が細いものが多いので、効果が付きやすくするため、境界線で太らせておくことがポイントです。

【操作方法】

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

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

素材画像を開く

どんな画像にも対応

背景に敷く画像は、工法とは直接関係しません。キラキラ輝く光が強調できる暗い素材なら、どんな画像にも対応できます。もちろん、黒地でもかまいません。

黒地カンバスで作成した例

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

[ レイヤー 1 ] を作成

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

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

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

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

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

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

任意のフォントを設定

作例では、「 Zapfino 」を設定していますが、フォント環境はご使用のパソコンによって異なります。リスト表示される任意のフォントを設定してください。[ 整列オプション ] 、[ テキストカラーを設定 ] は、直接的な影響がないため、任意で行なってください。

整列とカラーは任意に設定

ドキュメント内をクリックして、ポイントテキストで文字を入力します。すべての文字が入力できたら、[ enter ] キーを押して、入力を確定します。

文字を入力

バランスを整えよう！

作例では省略しますが、文字列のバランスを整えるため、頭文字のサイズを大きく調整します。もちろん、そのままのサイズでも OK です。使用するフォントに合わせて、文字と文字の間隔を調整しましょう。

頭文字の大きさと位置を調整

文字列のバランスを整える

目次に戻る

レッスン動画を配信中！

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

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

文字列を回転

ベースの文字が入力できたら、文字列を右上りに少し回転させましょう。回転の初期設定では、ボックスの中央にある、基準点の位置が固定されています。対象が筆記体の場合は、ディセンダライン (ベースラインから最底部までの領域) が多く取られているものもあります。

【操作方法】

[ 編集 ] メニューから、[ 変形 ] – [ 回転 ] を選択、または、[ command ( Ctrl ) ] + [ T ] キーを押して、変形のバウンディングボックスを表示します。

バウンディングボックスの外側をドラッグして、文字列を反時計回りに回転します。

基本がわかる！文字の変形と回転

文字列を反時計回りに回転

オブジェクトの回転ができたら、[ enter ] キーを押して変形を確定します。

[ enter ] キーを押して変形を確定

スマートさを強調する

作例で使用している書体は、繊細な筆跡が特徴です。筆記体は右上がりの方が、視覚的に安定します。文字列を少しだけ回転させておくことで、動きのあるスマートさが強調できます。

目次に戻る

基本がわかる動画を配信中！

基本がわかる！画像解像度の設定

基本がわかる！色かぶりの補正

チャンネル登録をお願いします！

境界線を設定

ここでは、境界線を太らせる方法に、レイヤースタイルを用います。レイヤースタイルの効果なら、設定後にベースの文字列を調整したり、内容そのものだって変更できるので、とても便利です。レイヤースタイルの [ 境界線 ] は、立体的な効果の、下地としての役割があります。

【操作方法】

[ レイヤー ] パネルで、[ レイヤースタイルを追加 ] をクリックして、メニューから、[ 境界線 ] を選択します。

[ 境界線 ] を選択

[ レイヤースタイル ] ダイアログで、[ 構造 ] セクションの [ サイズ ] に [ 12 ] px を入力します。

[ 位置 ] に [ 外側 ] を選択します。

基本がわかる！レイヤースタイルの操作

[ サイズ : 12 px ]

[ 塗りつぶしタイプ ] に、[ グラデーション ] を選択します。

[ グラデーション ] を選択

[ スタイル ] に、[ シェイプバースト ] を選択します。

[ クリックでグラデーションを編集 ] をクリックします。

[ クリックでグラデーションを編集 ] をクリック

【設定値】

[ サイズ ] に [ 12 ] px を入力

[ 位置 ] に [ 外側 ] を選択

[ 描画モード ] に [ 通常 ] を選択

[ 不透明度 ] に [ 100 ] % を入力

[ オーバープリント ] を無効

[ 塗りつぶしタイプ ] に [ グラデーション ] を選択

[ グラデーション ] を設定

[ 逆方向 ] を無効

[ スタイル ] に [ シェイプバースト ] を選択

[レイヤーに整列] オン

[ 角度 ] に [ 90 ]°を入力

[ ディザ ] を無効

[ スケール ] に [ 100 ] % を入力

[ グラデーションエディター ] ダイアログで、次のグラデーションを設定します。

基本がわかる！グラデーションの作り方

[ グラデーションエディター ] を設定

【設定値】

[ 位置 : 0 % ] [ 不透明度 : 100 % ]

[ 位置 : 100 % ] [ 不透明度 : 100 % ]

[ 位置 : 0 % ] [ カラー : H : 228° / S : 16 % / B : 25 % ]

[ 位置 : 100 % ] [ カラー : H : 228° / S : 16 % / B : 75 % ]

文字列を境界線で太らせることができました。

適用前

境界線で太らせる

エッジを立体的に見せる

[ 境界線 ] の設定は、文字列を立体的に見せるために使用します。作例のような細い書体では、シルエットを太らせる役目もあります。

目次に戻る

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

古岡ひふみ

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

psgips.net

The post 【ロゴ】フォントでつくる！キラキラ輝く金属文字「ベベルとエンボス」 first appeared on psgips.

【スタイル】ガラス・カットガラス【フリー】

古岡ひふみ — Thu, 22 Jun 2017 23:15:00 +0000

【Photoshopレイヤースタイル】クリックひとつで、リアルな質感や陰影が適用できる「オリジナル・レイヤースタイル」です。「カットガラス」は、オブジェクトの形状によって屈折光が変化します。ハードな透明感を感じさせるカラーバリエーションを12色セットしました。スタンダードな太いサンセリフ系のフォントが似合います。

ご利用規約

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

│No.015│ガラス│カットガラス│

クリア

マゼンタ

レッド

オレンジ

イエロー

ライトグリーン

グリーン

ミント

ブルー

バイオレット

ライトブラウン

ブラウン

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

レイヤースタイルの適用例（使用フォント：Arial/Bold/100 pt）

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

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

ご利用規約

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

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

古岡ひふみ

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

psgips.net

The post 【スタイル】ガラス・カットガラス【フリー】 first appeared on psgips.

【ロゴ】フォントでつくる！サイケな変形文字「ワープテキストと幾何学模様」【2020】

古岡ひふみ — Fri, 08 Jul 2016 23:00:00 +0000

【Photoshop講座】1960年代後半に流行した「ヒッピー」や「サイケデリック」は、ロゴデザインにおいても、特徴的な影響を与えました。大きく歪ませた文字列を組み合わせて、文字形を利用した極彩色の模様を入れましょう。ユニークで印象的なデザイン書体を用いると、それらしく演出できます。

負の設定値で形状を整える！

大きく歪曲した文字列の形状は、[ ワープテキスト ] という機能を使って変形します。[ ワープテキスト ] は、文字をさまざまな形に変形できる15種類のワープスタイルが搭載された、テキストレイヤー限定のオプション機能です。

ユニークな変形を維持したまま、テキスト内容だけが変更できたり、負の設定値を入力することで、正反対の変形にも簡単に編集できます。

フォントでつくる！

サイケな変形文字

[ STEP-01 ]

[ STEP-02 ]

[ STEP-03 ]

[ STEP-04 ]

[ STEP-05 ]

サイケな変形文字に加工する

これから行う操作は、入力したテキストをサイケな変形文字に加工する方法です。大きく歪曲した、２つの文字列を組み合わせて、レイヤースタイルの効果だけで、サイケデリックな模様で装飾します。

目次に戻る

レッスン動画を配信中！

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

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

グラデーションを敷く

ドキュメントの背景に、グラデーションを敷きましょう。グラデーションは、塗りつぶしレイヤーで作成します。

【操作方法】

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

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

新しいドキュメントを作成

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

[ グラデーション 1 ] を作成

[ グラデーションで塗りつぶし ] ダイアログで、[ クリックでグラデーションピッカーを開く ] をクリックして、グラデーションピッカーから、[ オレンジ、イエロー、オレンジ ] を選択します。

[ オレンジ、イエロー、オレンジ ] を選択

エディターで設定する

作例で使用している、グラデーション・プリセットは、バージョン 2020 以降、[ グラデーション ] パネルメニューから、[ 従来のグラデーション ] – [ 従来のデフォルトグラデーション ] に含まれています。

[ グラデーションエディター ] ダイアログで、任意のグラデーションを設定することもできます。

【操作方法】

[ グラデーションで塗りつぶし ] ダイアログで、[ クリックでグラデーションを編集 ] をクリックして、[ グラデーションエディター ] ダイアログで、次のグラデーションを設定します。

[ グラデーションエディター ] を設定