It is auto action easy to hodokoseru the three-dimensional character decoration that is apt to be in Sumahogemu's UI. スマホゲームのUIにありがちな立体的な文字装飾を、簡単に施せるオートアクションです。
-------------------------
How to use
① 'll prepare any text.
It is also possible in the layer that has been rasterize.
We recommend a font with a heavier weight.
In this example, the font size 50pt "Keifu" is used.
Choose either 5px or 10px to fit the font size.
* 5px... Recommended font Size: 40 ~ 60pt
10px... Font Size 75 ~ 100pt recommended
The recommended value is only an estimate because the size is different depending on the font.
NOTES:
* Make the drawing color (or selected color) the target text color .
※ In the image example, there are several colors of text, but when using it, apply it to each layer as one color. In addition, the automatically created folders in this auto action can be merged or copied and pasted to another canvas, and the original folder must be deleted before it can be run.
Because this auto action refers to layer name, if a layer with the same name already exists, it will not work correctly.
- Copy
- Blur
- Addition
- Multiply
- Gradient
- Edging 1
- Edging 2
- Gradient Two
- Shadow
- - - - - - - - - - - - - - - - - - - - - - - -
Run the auto action with the selected layer with the text you want to ②.
The original layer remains.
There may be a lag before the application is completed.
Just after you apply, you are in an unfinished state .
- - - - - - - - - - - - - - - - - - - - - - - -
③ use gradient tool to manually draw gradients to the automatically created gradient layer .
By doing this, you will look better.
Two gradient layers are created.
It is a layer named "Gradient 2" for processing the part of the character of the border, and the " gradient"to process the border part.
Left below:
The gradient layer is recommended to draw a gradient from top to bottom, which is a white-to- text color (draw color) .
Right below:
The gradient 2 layer is recommended to draw a gradient from top to bottom with a text color (draw color) transparent .
* Combine mode is not necessary for operation because it has been specified as "overlay".
- - - - - - - - - - - - - - - - - - - - - - - -
④ from here will be a fine-tuning procedure. It may be completed in ③.
If the text color has a higher brightness , the shadows in the letters may be thinner and may not be enough.
If you want to fix that,edit the layer named "multiplication" as your favorite.
Recommended adjustments:
- Make combine mode "linear" burn
- Make opacity high (about 75%)
In addition, please adjust the finish by editing and processing it until convincing.
――――――――――――――――――――――――
Bonus
Examples of Keifu and other applications:
Above, I hope I can help.
――――――――――――――――――――――――
【使用方法】
①任意のテキストを用意します。
ラスタライズされたレイヤーでも可能です。
(ウェイトが重い)太めのフォントを推奨します。
今回の例では、フォントサイズ50ptの「けいふぉんと」を使用しています。
フォントの大きさに合わせて、「5px」か「10px」のいずれかをお選びください。
※5px…フォントサイズ40~60pt程度推奨
10px…フォントサイズ75~100pt程度推奨
大きさはフォントによって異なるため、推奨値はあくまで目安です。
注意事項:
※描画色(または選択中の色)を、対象テキストの色にしてください。
※画像例には複数の色のテキストがありますが、使用時は一色一レイヤーとし、レイヤーごとに適用してください。また、その際、本オートアクションで自動作成されたフォルダは統合するか、別のキャンバスへコピー&ペーストし、元のフォルダを削除してから実行してください。
本オートアクションではレイヤー名を参照するため、以下と同名のレイヤーがすでに存在していた場合、正しく動作しません。
- コピー
- ぼかし
- 加算
- 乗算
- グラデーション
- 縁取り1
- 縁取り2
- グラデーション2
- 影
- - - - - - - - - - - - - - - - - - - - - - - -
②対象のテキストがあるレイヤーを選択した状態で、オートアクションを実行してください。
元のレイヤーは残ります。
適用完了までにラグがある場合があります。
適用直後は、未完成の状態です。
- - - - - - - - - - - - - - - - - - - - - - - -
③自動作成されたグラデーション用レイヤーに、グラデーションツールを使って手動でグラデーションを描画してください。
こちらを行うことで、見栄えが良くなります。
グラデーション用レイヤーは2つ作成されます。
それぞれ、縁取りの中身の文字部分を加工するための「グラデーション」、縁取り部分を加工するための「グラデーション2」という名前のレイヤーです。
下図の左:
「グラデーション」レイヤーは、上から下に「白→テキストの色(描画色)」となるグラデーションを描画するのがおすすめです。
下図の右:
「グラデーション2」レイヤーは、上から下に「テキストの色(描画色)→透明」となるグラデーションを描画するのがおすすめです。
※合成モードは「オーバーレイ」に指定済みのため、特に操作する必要はありません。
- - - - - - - - - - - - - - - - - - - - - - - -
④ここからは微調整の手順となります。③で完成としてもよいです。
テキストの色の明度が高い場合、文字の中の影が薄く、物足りないかもしれません。
そちらを修正する際は、「乗算」という名前のレイヤーをお好みで編集してください。
おすすめの調整:
- 合成モードを「焼き込み(リニア)」にする
- 不透明度を高く(75%程度)にする
そのほか、納得のいくまで編集・加工して、仕上がりを調節してください。
――――――――――――――――――――――――
【おまけ】
「けいふぉんと」以外への適用例:
以上、お役に立てれば幸いです。