連続複製| psgips

【ロゴ】フォントでつくる！3D風の押し出し文字「連続複製で作成する遠近法」【2024】

古岡ひふみ — Wed, 04 Sep 2024 23:00:00 +0000

【Photoshop講座】3D 機能を使わない擬似的な押し出しです。「隠しコマンド」を活用すれば、移動と複製を繰り返すことができます。ベースのフォントからシェイプを作成し、飛び出す方向にグングン押し出しましょう。

遠近法もできる！

連続複製の裏技は、変形の操作も加えることができます。奥行きがある遠近法の押し出しでは、次に来るステップに、左右１ピクセルの拡大率を設定しましょう。これを一度知っちゃうと、病付きになるかも？

フォントでつくる！

3D風の押し出し文字

[ STEP-01 ]

[ STEP-02 ]

[ STEP-03 ]

[ STEP-04 ]

[ STEP-05 ]

[ STEP-06 ]

テキストを3D風の押し出し文字に加工

これから行う操作は、入力したテキストを、3D 風の押し出し文字に加工する方法です。ベースのフォントからシェイプを作成し、移動と複製を繰り返す裏技を使って、飛び出す方向にグングン押し出します。

ベースのフォントを入力

3D風の押し出し文字

奥行きがある遠近法の押し出しでは、次に来るステップに、左右１ピクセルの拡大率を設定しましょう。使用するフォントは、任意で設定しますが、押し出しの効果が十分に発揮できる、太い書体を選んでください。

目次に戻る

フォントを設定する

リボンバナーの素材画像を開いて、任意のフォントを入力しましょう。このドキュメントには、あらかじめ、カラーや立体的な効果が設定されています。

【操作方法】

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

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

素材画像を開く

[ レイヤー ] パネルで、あらかじめ作成された、シェイプレイヤーを確認してください。

シェイプレイヤーを確認

[ 新規レイヤーを作成 ] をクリックします。

レイヤーの最前面に、[ レイヤー 1 ] が作成されたことを確認してください。

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

新規レイヤーを作成？

あらかじめ、新規レイヤーを作成しておくと、これから作成するテキストレイヤーの操作が、このレイヤーに反映されます。テキストオプションの設定がスムーズに行えるほか、シェイプレイヤー選択時の、パステキストへの変換を回避することにも役立ちます。

目次に戻る

レッスン動画を配信中！

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

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

テキストを入力

新規レイヤーが作成できたら、押し出し文字のベースにするテキストを入力します。まず、任意のフォントを設定しましょう。

【操作方法】

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

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

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

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

任意のフォントを設定

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

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

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

[ 整列 ] に [ テキストの中央揃え ] を選択します。

[ テキストカラーを設定 ] に [ ブラック ] を選択します。初期設定

整列: テキストの中央揃え

任意のフォントを設定

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

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

ドキュメント内をクリックします。

ポイントテキストで文字を入力します。

[ enter ] キーを押して、文字の編集を確定します。

任意のテキストを入力

ポイントテキストとは？

ポイントテキストとは、文字の基準線上にアンカーポイントを持つテキストです。アンカーポイントの位置は、整列オプションによって、左揃え、中央揃え、右揃えに設定できます。入力した文字列をひとつのオブジェクトとして配置できるので、単語や数行の文章など、短い文字列を入力する場合に適しています。

目次に戻る

水平比率を設定

後の操作で文字を扇形に変形するため、あらかじめ、水平比率を小さくしておきます。[ 文字 ] パネルを表示して、カーニングなどの設定も見直しましょう。

【操作方法】

オプションバーで、[ 文字パネルと段落パネルの切り替え ] をクリックします。

[ 文字パネルと段落パネルの切り替え ] をクリック

[ 文字 ] パネルで、[ 文字間のカーニングを設定 ] に、[ オプティカル ] を選択します。

[ 水平比率 ] に、[ 75% ] を入力します。

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

水平比率: 75%

[ enter ] キーを押して、文字の編集を確定します。

文字の編集を確定

オプティカルとは？

文字の形状に対して、隣り合う文字のカーニング値が自動的に設定される機能です。そのため、ペアカーニング値を持たないフォントの「応急策」として、適正値が割り当てられます。メトリクスとの比較は、歴然としてあります。しかし、使用するフォントや文字列によっては、優れている場合も少なくありません。

目次に戻る

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

古岡ひふみ

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

psgips.net

The post 【ロゴ】フォントでつくる！3D風の押し出し文字「連続複製で作成する遠近法」【2024】 first appeared on psgips.

これで解決！レイヤーを増やさない複製はこうやって作る！「複製オプションと再実行」【2024】

古岡ひふみ — Sun, 22 Oct 2023 23:00:00 +0000

【Photoshop基本操作】無駄なレイヤーを増やさず、切り抜きオブジェクトを複製するには、[ 移動ツール ] のショートカットキーを使用します。元画像を残したまま、複製画像を自由に編集することができ、後々のレイヤー結合工程を省くことができます。

移動元の画像を残すオプション！

[ 移動ツール ] でドラッグすると、レイヤー上でオブジェクトが自由に移動できます。この基本的な操作に、移動元の画像を残すオプションを加えると、切り抜きオブジェクトを、同じレイヤー内で複製することができます。操作方法はカンタン。[ option ( Alt ) ] キーを押しながらドラッグするだけです。

これで解決！

レイヤーを増やさない複製は

こうやって作る！

[ STEP-01 ]

[ STEP-02 ]

[ STEP-03 ]

[ STEP-04 ]

無駄なレイヤーを増やさない複製方法

これから行う操作は、画像の複製を同じレイヤー内で行う方法です。選択範囲の画像をコピー＆ペーストすると、切り抜きオブジェクトは、自動的に新しいレイヤーへ配置されます。

ドラッグ＆ドロップで画像を配置

配置した画像を同じレイヤー内で複製

レイヤーを作成せずオブジェクトを複製するには、[ 移動ツール ] のオプション機能を利用します。選択範囲内の画像をドラッグすると、移動元の画像がそのまま残せます。[ コピースタンプツール ] とよく似た使い方で、オブジェクトの複製を、同じレイヤー内で行うことができます。

通常の複製

同じレイヤー内で複製

目次に戻る

レッスン動画を配信中！

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

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

ドラッグで画像を配置する

２つの素材画像を開いて、複製したいオブジェクトを、ドラッグ＆ドロップで配置しましょう。そして、一般的に行われている操作の、通常の複製を確認してください。レイヤーの自動作成は、用途を優先した初期設定です。その違いを体感しておきましょう。

【操作方法】

素材画像をダウンロードして開きます。作例では、[ 幅 : 1920 pixel ] × [ 高さ : 1080 pixel ] の [ RGB カラー ] を使用しています。

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

素材画像を開く

photo by bess.hamiti@gmail.com

素材画像をダウンロードして開きます。作例では、[ 幅 : 547 pixel ] × [ 高さ : 640 pixel ] の [ RGB カラー ] を使用しています。

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

素材画像を開く

photo by PIRO

[ ウィンドウ ] メニューから、[ アレンジ ] – [ ２分割表示 – 垂直方向 ] を選択します。

[ ２分割表示 – 垂直方向 ] を選択

[ レイヤー ] パネルで、[ グループ ] フォルダー、または、対象のレイヤーを選択します。

[ レイヤー 1 ] を選択

レイヤーサムネールを配置する移動先に、ドラッグ＆ドロップします。

ドラッグ＆ドロップ

画像が配置されたことを確認してください。[ ウィンドウ ] メニューから、[ アレンジ ] – [ すべてをタブに統合 ] を選択します。

[ すべてをタブに統合 ] を選択

レイヤーを自動作成！

ドラッグ＆ドロップ、または、コピー＆ペーストで画像を配置すると、ドキュメントに新しいレイヤーが、自動的に作成されます。

自動作成されたレイヤーの名前を変更

自動的に作成されるレイヤーは、作成順に [ レイヤー 1 ]、[ レイヤー 2 ]…という連番が付けられます。ここでは、ドラッグ＆ドロップした元のレイヤーとして区別するため、レイヤー名を変更します。

目次に戻る

通常の複製を確認

レイヤーには、数多くの利点がありますが、同じレイヤー内に、新しい画像をコピー＆ペーストすることができません。ここでは、一般的に行われている操作の、通常の複製を確認してみましょう。

【操作方法】

すべてを選択して、コピー＆ペーストします。すべてを選択 : [ command ( Ctrl ) ] + [ A ] コピー : [ command ( Ctrl ) ] + [ C ] ペースト : [ command ( Ctrl ) ] + [ V ]

新しい画像をコピー＆ペースト

[ レイヤー ] パネルで、新しいレイヤーが、自動作成されたことを確認してください。

新しいレイヤーを自動作成

ペーストを繰り返すと、再び、新しいレイヤーが自動作成されます。ペースト : [ command ( Ctrl ) ] + [ V ]

レイヤーの自動作成が確認できたら、操作を取り消します。操作の取り消し : [ command ( Ctrl ) ] + [ Z ]

ペーストを繰り返す

レイヤー独自の機能！

レイヤーの自動作成は、用途を優先した、レイヤー独自の機能によるものです。レイヤーマスクや、アルファチャンネルには適用されません。

目次に戻る

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

古岡ひふみ

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

psgips.net

The post これで解決！レイヤーを増やさない複製はこうやって作る！「複製オプションと再実行」【2024】 first appeared on psgips.

【ロゴ】フォントでつくる！飛び出すシャドウ文字「移動と複製でグングン押し出す！」【2023】

古岡ひふみ — Sun, 09 Jul 2023 23:00:00 +0000

【Photoshop講座】シャドウ処理は、文字を立体的に見せる効果的な技法です。シャドウ部分を長くすることで、文字列の一体感が生まれます。移動と複製を繰り返す裏技を使えば、3D 押し出し文字のような陰影も、簡単に付けることができます。ベースのフォントからアウトラインを作り、飛び出す方向にグングン押し出しましょう。

隠しコマンドを活用？

移動と複製を繰り返す操作は、[ 移動ツール ] のオプション機能です。このような「隠しコマンド」は、数多く存在します。方向キーの移動は、ピクセル単位で正確に行われます。

つまり、そこにオプションを併用すれば、キーを押した回数分の、正確な移動と複製が行えるワケです。

フォントでつくる！

飛び出すシャドウ文字

[ STEP-01 ]

[ STEP-02 ]

[ STEP-03 ]

[ STEP-04 ]

立体的なシャドウ文字に加工

これから行う操作は、入力したテキストを、立体的なシャドウ文字に加工する方法です。

ドキュメントにテキストを入力

飛び出すシャドウ文字に加工

おしゃれで平面的なグラフィックバージョンと、陰影を付けた 3D 押し出しバージョンを作成します。

グラフィックバージョン

3D押し出しバージョン

使用するフォントは任意で設定しますが、作例とは違うピクセルサイズの画像では、レイヤースタイルの効果が発揮できないことがあります。小さくしたい場合は、完成後にレイヤーを統合してリサイズしてください。

目次に戻る

レッスン動画を配信中！

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

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

フォントを入力する

新しいドキュメントを作成して、シャドウ文字のベースになる、フォントを入力します。ここでは、テキストカラーを設定していますが、いつでも編集することができます。文字列のバランスを吟味しましょう。

フォントを入力する

テキストカラーを設定

目次に戻る

新規ドキュメントを作成

ベースの文字列を入力する、新規ドキュメントを作成しましょう。基本的には、どんな大きさでもかまいません。しかし、後に文字列を回転する操作が含まれているので、スクエア、または、高さに余裕がある方が好ましいです。

【操作方法】

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

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

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

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

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

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

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

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

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

目次に戻る

グループを作成

文字や効果などのデザイン要素は、すべて、グループ内に作成していきます。こうすることで、複数のレイヤーをグループ単位で操作できます。

【操作方法】

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

グループ名に [ content ] を入力します。

[ 新規グループを作成 ] をクリック

目次に戻る

任意のフォントを設定

すべての要素を格納するグループが作成できたら、ベースの文字列を入力しましょう。テキストレイヤーの作成は、まず、ツールオプションで、任意のフォントを設定することから始めます。

【操作方法】

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

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

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

任意のフォントを設定

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

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

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

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

[ テキストの中央揃え ] を選択します。

[ テキストカラーを設定 ] をクリックします。

フォントサイズを設定: 150 pt

[ カラーピッカー ] ダイアログで、[ カラー : H : 57°/ S : 100 % / B : 100 % ] を設定します。

[ OK ] をクリック

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

カラーは編集できる！

テキストカラーは、いつでも編集することができます。白地での作成は、文字面を明るく、アウトラインを暗くしてください。

カラーピッカーの使い方

目次に戻る

テキストレイヤーを作成

任意のフォントが設定できたら、ポイントテキストで、ドキュメントに文字を入力しましょう。ポイントテキストとは、文字の基準線上にアンカーポイントを持つテキストです。

【操作方法】

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

作例では、「 FineBoy 」を入力しました。

ドキュメントに文字を入力

グループ [ content ] 内に、テキストレイヤー、または、シェイプレイヤーを作成してください。

グループ内のテキストレイヤーを確認

文字の間隔を均等にしよう！

シャドウ文字の効果は、文字形の周囲に影 (立体的な側面) をつけるので、隣接する文字が近いとスペースが足りなくなり、離れすぎるとひとかたまりの文字列に見えなくなってしまいます。

[ 文字のカーニングを設定 ] に [ オプティカル ] を選択すると、実質的な文字の間隔を均等にすることができます。

目次に戻る

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

古岡ひふみ

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

psgips.net

The post 【ロゴ】フォントでつくる！飛び出すシャドウ文字「移動と複製でグングン押し出す！」【2023】 first appeared on psgips.

【テクスチャ】ゼロからつくる！大爆発の炎「再実行で効果を繰り返す」

古岡ひふみ — Fri, 06 Mar 2020 23:00:00 +0000

【Photoshop講座】何もないところから、大爆発の炎を作成します。爆発の形状は、ランダムに生成されるため、結果は、出たとこ勝負です。しかし、[ 雲模様 2 ] の適用回数により、変化する形状から簡単に選べるので、きっと、イメージに合った「大爆発の炎」が見つかることでしょう。大胆に、ボカン！と爆発させましょう。

効果を繰り返す！

適用したフィルターは、[ フィルターの再実行 ] で繰り返すことができます。このコマンドには、ショートカットキーが割り当てられているので、キーを押すだけで簡単に適用できます。[ スマートフィルター ] との組み合わせで、さらに増幅した適用結果が作り出せます。

ゼロからつくる！大爆発の炎

[ STEP-01 ]

ベースを作成する

[ STEP-02 ]

テクスチャを着色する

[ STEP-03 ]

大爆発の炎を増幅させる

何もない状態から大爆発を描く

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

目次に戻る

ベースを作成する

「大爆発の炎」は、ランダムに生成される [ 雲模様 1 ] の斑点模様から作成する方法を取ります。スマートオブジェクトや塗りつぶしレイヤーを活用すると、再編集可能なベースが作成できます。

【操作方法】

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

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

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

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

新規ドキュメントを作成

どんなサイズにも対応

ドキュメントサイズの [ 幅 ]、[ 高さ ] には、大きさや比率の制限は特にありません。たとえば、512 x 512 pixel の正方形でも、同じ効果が得られます。

[ 雲模様 1 ] は、256 pixel の倍数に限り、つなぎ目のないシームレスパターンが作成できます。しかし作例では、周囲を暗くする効果を加えるので、シームレスパターンには適していません。

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

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

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

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

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

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

目次に戻る

レッスン動画を配信中！

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

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

雲模様の適用

ベースにする雲模様を適用しましょう。雲模様は、適用するたびに模様が変わる、変数が用いられています。適した模様が生成されない場合は、フィルターの再実行を行ってください。

【操作方法】

[ ツール ] パネルで、[ 描画色と背景色を初期設定に戻す ] をクリックし、描画色にブラック、背景色にホワイトを設定します。

基本がわかる！描画色と背景色

[ 描画色と背景色を初期設定に戻す ] をクリック

フィルターを適用する前に

これから使用するフィルターは、描画色と背景色が反映されます。作例と同じ結果を得るには、あらかじめ、[ 描画色と背景色を初期設定に戻す ] をクリックして、描画色にブラック、背景色にホワイトを設定してください。

[ フィルター ] メニューから、[ 描画 ] – [ 雲模様 1 ] を選択します。

[ 雲模様 1 ] を適用

フィルターの再実行

[ 雲模様 1 ] は、現在の描画色と背景色から、適用毎に異なるランダムな斑点模様を生成します。適した模様が生成されない場合は、フィルターの再実行を行います。フィルターの再実行 : [ control ( Alt ) ] + [ command ( Ctrl ) ] + [ F ]

前面の効果を非表示

スマートオブジェクトでは、フィルターの再実行を新しい効果として追加します。複数の効果から選択して適用することもできます。

目次に戻る

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

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

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

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

周囲を暗くする設定

大爆発の形状は球体です。[ 雲模様 1 ] で作成した斑点模様に、放射状のグラデーションを合成すれば、中央を明るく周囲を暗くすることができます。

【操作方法】

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

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

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

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

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

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

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

【設定値】

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

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

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

[ 位置 : 100 % ] [ カラー : H : 0° / S : 0 % / B : 100 % ]

[ グラデーションで塗りつぶし ] ダイアログで、[ スタイル ] に [ 円形 ] を選択し、[ 逆方向 ] を無効にして、[ 角度 ] に [ 0 ]°、[ 比率 ] に [ 100 ] % を入力して、[ OK ] をクリックします。

[ グラデーションで塗りつぶし ] を設定

放射状のグラデーションが設定できたことを確認してください。

放射状のグラデーションを確認

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

[ オーバーレイ ] を選択

放射状のグラデーションで、ドキュメントの周囲を暗くして、大爆発の形状を作成することができました。

オーバーレイとは？

描画モード [ オーバーレイ ] は、合成色が重なっても画像に影響しない「中性色」を 50％グレーとして、明るい部分はより明るく、暗い部分はより暗くする特性があります。

目次に戻る

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

古岡ひふみ

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

psgips.net

The post 【テクスチャ】ゼロからつくる！大爆発の炎「再実行で効果を繰り返す」 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.

【パターン】ゼロからつくる！アンモナイトの幾何学模様「シェイプの連続複製でらせんを描く」

古岡ひふみ — Fri, 16 Jun 2017 23:00:00 +0000

【Photoshop講座】単純な図形を規則正しく並べたり重ねたりするだけで、幾何学模様は簡単に作成できます。しかし、アンモナイトのような、らせん状の幾何学模様となると大変です。バウンディングボックスの [ 再実行 ] を利用すれば、正確な回転や縮小などを繰り返しながら、連続複製が瞬時に行えます。

隠れたオプション機能！

変形の際に表示されるバウンディングボックスは、変形を確定するまでに、複数の操作を組み合わせることができます。

ひとつの図形を回転、縮小すれば、元の図形との位置にズレが生じます。変形後のコピーに同じ操作をして、このズレを繰り返していくと、らせん状の幾何学模様ができるワケです。

しかし、このような複雑な操作は簡単ではありません。バウンディングボックスの隠れたオプション機能、[ 再実行 ] を学びましょう。

ゼロからつくる！

アンモナイトの幾何学模様

[ STEP-01 ]

[ STEP-02 ]

[ STEP-03 ]

[ STEP-04 ]

[ STEP-05 ]

らせん状の幾何学模様を描く

これから行う操作は、らせん状の幾何学模様を描く方法です。変形しても画質が劣化しないベクトル画像を用いて、最も単純な正円の図形から、アンモナイトのような、らせん状のパターンを作成します。背面に古びた紙の素材画像を敷いて、画像合成により、少しにじんだような光彩の効果を加えます。

目次に戻る

正円のシェイプを作成する

シェイプを作成する前に、ツールの環境設定を確認しておきましょう。

【操作方法】

[ Photoshop (編集) ] メニューから、[ 環境設定 ] – [ ツール ] を選択します。

[ 環境設定 ] ダイアログで、[ ベクトルツールと変形をピクセルグリッドにスナップ ] を無効にして、[ OK ] をクリックします。

[ ベクトルツールと変形をピクセルグリッドにスナップ ] を無効

ピクセルにスナップさせない！

シェイプの移動や変形をするとき、ピクセルグリッドにスナップすると、アンカーポイントの位置や方向線の角度が制限されるため、このオプションを無効にしておきます。

シェイプを作成後、このオプションを有効に戻しても、アンカーポイントの位置や方向線の角度はそのまま保持されます。しかし、移動や編集を加えると、ピクセルグリッドにスナップされるので注意が必要です。

目次に戻る

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

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

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

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

新規ドキュメントの作成

らせん状の幾何学模様は、どんなドキュメントサイズでも、同様に作成することができます。ここでは、スクエアの新規ドキュメントを作成します。

【操作方法】

[ ファイル ] メニューから、[ 新規 ] を選択し、[ 新規 ] ダイアログで、[ 幅 ] に [ 1280 ] pixel、[ 高さ ] に [ 1280 ] pixel、[ 解像度 ] に [ 72 ] pixel/inchを設定して、[ 作成 ] をクリックします。

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

[ 新規 ] を設定

新しいドキュメントが作成できました。作例では標準ドキュメントを使用していますが、アートボードでも同様に作成することができます。

新しいドキュメントを確認

目次に戻る

シェイプを作成

最初に作成するシェイプは、適当な大きさでもかまいません。後の操作で、[ ライブシェイプの属性 ] によって、正確な数値入力を行います。

【操作方法】

[ ツール ] パネルで、[ 楕円形ツール ] を選択します。

[ 楕円形ツール ] を選択

オプションバーで、[ ツールモードを選択 ] に [ シェイプ ] を選択します。

[ ツールモードを選択 : シェイプ ]

ドキュメント内をドラッグして、適当な大きさの楕円形を作成します。後に数値入力で整えます。

適当な大きさの楕円形を作成

目次に戻る

シェイプの編集

ドキュメント内に、適当な大きさの楕円形のシェイプが作成できたら、数値入力によって、正円のシェイプに編集しましょう。大きさだけではなく、座標値も関係します。

【操作方法】

[ 属性 (プロパティ) ] パネルで、[ ライブシェイプの属性 ] を選択します。[ バウンディングボックス ] セクションの [ W ] に [ 640 px ]、[ H ] に [ 640 px ]、[ X ] に [ 32 px ]、[ Y ] に [ 440 px ] を入力します。

[ パスの操作 ] に [ シェイプが重なる領域を中マド ] を選択します。

[ ライブシェイプの属性 ] を設定

すると、適当に作成したシェイプが正円になり、ドキュメントの左下に移動しました。[ ライブシェイプの属性 ] では、選択されたシェイプの大きさや座標、塗りや線などの詳細な設定が行えます。

正円のシェイプに再設定する

重なる領域を中マドとは？

[ シェイプが重なる領域を中マド ] を選択すると、背面に作成したシェイプコンポーネントと、前面に作成したシェイプコンポーネントの重なり部分を中マド (空白) にします。

目次に戻る

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

古岡ひふみ

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

psgips.net

The post 【パターン】ゼロからつくる！アンモナイトの幾何学模様「シェイプの連続複製でらせんを描く」 first appeared on psgips.