PhotoShopチュートリアル テキストエフェクト「つやつやな金」編

以前のチュートリアルで氷エフェクトと炎エフェクトをご紹介いたしました。はらです。
テキストエフェクトの記事は比較的人気が高く、PhotoShop使いの皆さんはやはりテキストエフェクトが好きなんだな~~と感じた今日この頃。
と、言う事で今回は、テキストエフェクトをご紹介したいと思います。氷、炎とつづき今回は…

「金」

金です! “つやつや”な金です!

「なんだ…金のテキストエフェクトなんてこの世界にごまんとあるじゃないか…なにを今更…」と思った方もいるかと思います。
しかし今回は、今までにない独特なツヤ感のエフェクトをオリジナルで考案してきたので、他にはない見た目になるはずです。

今回のエフェクトは簡単です!簡単ですが、見た目的には手の込んだ仕上がりになります。
金のエフェクトは利用頻度が高いので、是非ブックマークをしていざというときに使ってみてくださいね!

——————————————————
PhotoShop CC 2018を使用しています。
——————————————————


●PhotoShop上部メニューバーより、「新規」→数値を入力(下記画像参照)→「作成」をクリックし、アートボードを作成します
※「幅」の数値はテキストの長さに応じて変更してください。

●テキストツールで文字を配置し、文字設定を下記画像のように変更します
太めのフォントがオススメです。今回は「A-OTF UD新丸ゴ/H」を使用していますが、好みや作業環境に合わせ、お好きなフォントを使用してください。

コピー用テキスト「# cb0303」

●「つやつや」テキストレイヤーを「新規レイヤーを作成」アイコンにドラッグし、複製(「つやつやのコピー」レイヤーを作成)し、エフェクトをかけるためのレイヤーを用意します

補足
レイヤーを複製する方法は他にもあります
方法① altを押しながら任意の階層にドラッグ
方法② コピー元レイヤー上で右クリック→レイヤーを複製

●「つやつや」テキストレイヤー上で右クリック→「スマートオブジェクトに変換」をクリック

●「つやつやのコピー」レイヤーをダブルクリック→「レイヤースタイル」を2つ適用(下記画像参照)
これによりツヤ感を加えることができます。

コピー用テキスト①「# ffc485」 ②「# ff8b36」

それっぽいつやがでましたね。

●「つやつやのコピー」レイヤーを選択し、上部メニューバーより「フィルター」→「ぼかし」→「ガウス」の順でクリック。その後「ぼかし(ガウス)」ウインドウで「6.0」と入力

●「つやつやのコピー」レイヤーを選択した状態で右クリック→「クリッピングマスクを作成」をクリック
これにより不要な部分を隠します。

補足…
上記の右クリック以外の方法でもクリッピングマスクを作成する事ができます。むしろこちらの方がおすすめです!

1. 「つやつやのコピー」レイヤーを選択します

2. option(Windows=Alt)を押し「つやつやのコピー」レイヤーと「つやつや」レイヤーの境目にカーソルを移動させます

3. カーソルが変化するのでそのままクリック

こちらのほうがより楽に、早く作成することができます。クリッピングマスクは頻繁に使われる機能ですので、初心者の方などは覚えておくと便利です!

●「つやつやのコピー」レイヤーを選択し、レイヤーパネル上部から描画モードを「ビビッドライト」に変更します

●「つやつやのコピー」「つやつや」レイヤーを選択し、レイヤーパネル下部「新規グループを作成」アイコンをクリックして一つのグループにまとめます。

●「グループ1」を選択した状態でレイヤーパネル下部「塗りつぶしまたは調整レイヤーを新規作成」アイコンをクリック→「色相・彩度」をクリックし、数値を下記画像と揃えます

●完成です

●使用例


いかがでしたか?さくっと作れたのではないでしょうか?今回は色味を調整レイヤーの「色相・彩度」で変更していますので、スライダをいじるだけで簡単に色を変えることができます。黄色系以外に変更するとプラスチックのような樹脂系のツヤを表現することができますので是非試してみてください!

(はら)

タイトルロゴ風 文字デザインをしてみよう

こんにちは。ユイPです。
東京では桜が咲いていますね!暖かくなってきて春を感じています。

さて、今回のテーマは「文字デザインをしてみよう」です。
皆さんは普段、小説や漫画、ゲームやアニメなどの「タイトルロゴ」に注目した事はありますか?
私はロゴを見るのが好きなのでいつも注目してしまうのですが、気に入ったデザインのものはそれだけで作品が印象に残る事もあります。

今回はそんなタイトルロゴ風の文字の作り方について解説していきたいと思います。
複雑なものではなく、誰でも出来るシンプルかつ簡単に出来るものです!


使用ソフト:Adobe Illustrator CC 2018
作業環境:Windows 7 / 温かいお茶と好きなおやつ


今回は誰にでも使える定番フォントを使用して、一色のロゴを作っていきたいと思います。

まず準備を行っていきます。
Illustratorの文字ツールでアートボード上にテキストを置きます。

ここで使用しているフォントはどのPCにも入っているであろう定番フォント、「MS 明朝」です。

文字を選択ツールで選択して、アウトラインの作成を行ってください。
アウトラインを作成したら、グループの解除をして一文字ずつ動かせる状態にしてください。
これで準備はOKです!文字を自由に動かしたり変形させていきたいと思います。

———————————————————————————————–
Check!!【選択ツールについて】
選択ツール→オブジェクト全体を選択する
ダイレクト選択ツール→オブジェクトのアンカーポイントやパスのセグメントを選択する
状況によって使い分けが大事です。
———————————————————————————————–

Point.1 文字の大きさをバラバラにしてみる

選択ツールで文字を移動させたり拡大縮小を行って、文字の大きさを変えてバラバラに配置してみました。

なんだかもうこれだけでちょっとロゴっぽくなりますね。

Point.2 パーツを分解してスキマを作ったりアレンジしてみる

文字のパーツを分解して、線と線の間にスキマを作ったり、部首などをアレンジしていきます。

ここでは「初恋」の文字の○をつけた部分に手を加えていきます。

まずは「初」の部分から行っていきます。
「初」の部分を選択して複製します。複製のやり方はコピーしてペーストでもAltを押しながらドラッグでもなんでもOKです。

次に複製した「初」をダイレクト選択ツールで選択→複合パスの解除を行ってください。これでパーツごとに動かす事が出来るようになります。(複合パスの解除は全ての字にやるのではなく、解体する文字にだけやるのがおすすめです)
そうしたらいらないパーツを選択して、消去します。いらないアンカーポイントは残っていても邪魔なだけなのでしっかり選択して全部消してしまいましょう!

元になる「初」もいらない部分を消去します。

少し大きさや位置を調整して、元になる部分にパーツを持ってきます。

恋も同じ手順で行いました。
「恋」という字だったのでわかりやすく、上のでっぱりの部分をパスでハートを作って置き換えてみました。

線と線の間に少しスキマが出来たり、パーツが少し拡大されているのがわかりますか??
スキマを作る事で文字にゆとりが出来ますし、パーツを拡大することでアクセントになります。元のフォントそのままでなく、遊び心を利かせる事が出来ました!
もちろんもっと分解や変形を行ってどんどんオリジナリティを出していくとよりいいと思います★

———————————————————————————————–
Check!!【ハートの作り方】
1.塗りなしの正方形を作成
2.右上のアンカーポイントをダイレクト選択ツールで選択して消去
3.線幅を太くして端を丸型線端にする
4.45度回転
———————————————————————————————–

Point.3 ペンツールを使ってアレンジを加えてみる

2で作成したものに、ペンツールの機能を使って更に少しアレンジを加えてみたいと思います。

ハライの部分にリボンのような曲線を加えてみました。よく目にする形ですが、ペンツールで輪っかを描くだけなのでとっても簡単です。

更にペンツールで文字の端っこまで線を延ばしていきます。
この状態で終わってもいいのですが少し物足りなさを感じたので…

線の真ん中にアンカーポイントを追加してぐにゃりと曲げてみました。

———————————————————————————————–
Check!!【アンカーポイント】
アンカーポイントの追加ツールを使ってパスのセグメント上にアンカーポイントを追加します。

ここでは画像の赤点の部分にアンカーポイントを追加して曲げています。
———————————————————————————————–

仕上げ

紹介した3つのポイントを組み合わせて、仕上げを行います。
強調したい部分やバランスを見ながら文字の配置を色々変えてみたりして…

こちらが完成形になります。
「初恋」と「ビターチョコレート」を強調するために接続詞の「は」は小さめにし、特に強調したいと思った「チョコレート」の部分を1番大きくしています。
どうでしょうか。ありふれたフォントでも少しアレンジするだけでタイトルロゴっぽくなったと思いませんか??

おまけで英文も追加してみました。イメージは切ない系のノベルゲームのロゴです(あくまでもイメージです)

基本の流れはこのような流れになります。
文字のサイズ変更、パーツの分解、変形、書き足しが出来ればシンプルなロゴは簡単に作れます!

という訳でサンプルとしていくつかロゴを作ってみました。

MS明朝のような初期フォントではなく、様々なフォントを使用しました!
それぞれ制作時間や手間はバラバラですが、ほぼ上の解説でやった事と同じツールしか使っていません。
デジマースブログチームでは基本的に「モリサワフォント」を使用しています。有償のフォント以外にも、ネット上には素晴らしいフリーフォントがたくさんありますし、Adobe Creative Cloudを契約していれば無償でフォントをDL出来る「Type Kit」というシステムもあります。私もそうやって色々な場所からフォントを見つけてきています。
(フリーフォントの場合は字形を大きく変形させるのは禁止なものもありますので、そちらは使用する際にしっかり確認しましょう)

ここまで紹介した文字デザインは、バナーやフライヤー、自主制作作品のロゴなどを作る時におすすめです。
また今回は全て白黒で紹介しましたが、ここに色使いなどが加わってくると更にデザインの幅が広がると思います。
(色を使ったロゴについても、いずれ書けたらいいなと思います。)


以上、「タイトルロゴ風~文字デザインをしてみよう」でした。
好きなフォントはフォーク系と明朝系のユイPがお送りしました。
ではまた次回!

★毎日更新しているデジマースブログ公式Twitterもよろしくお願いします!


<使用させて頂いたフリーフォント>
「チェックポイント★リベンジ」
よく飛ばない鳥 / マルセ / http://marusexijaxs.web.fc2.com/
「マキナス Scrap 5」
もじワク研究 / https://moji-waku.com/index.html

簡単テキストエフェクト

私は昔、バナーを1年間で450個ほど制作していました。

商品の雰囲気に合わせたり…
目立たせたり…
磨耗していないレイアウトにしたり…
スペースを気持ちよく埋めたり…
など、様々な場面で私は何度もテキストエフェクトに助けられました。

今回は、そんなテキストエフェクトの中でも、簡単にできるわりにインパクトがあるものをいくつか厳選してご紹介いたします。
簡単にできるので急ぎの時でも安心です!

少し前にSNSで話題になっていた、RGBずらし(スタイル設定バージョン)などもありますので是非利用してみてください!

少し難易度の高いエフェクトもあります。
氷エフェクト> 炎エフェクト>


PhotoShopCC 2018、幅750pixel 解像度72pixel で制作しています。


スマートフォンのゲームで使われているような、ブロック風の立体感を出すことができるエフェクトです。演出できるのはかっこよさと言うよりかは、可愛さですかね!? かっこよくもありたいけど可愛くもありたい(?)そんなときに使うといいと思います。
スタイルの設定はシンプルにも関わらずインパクトのある装飾となるため、覚えておくと便利かもしれません!

RGBをずらすことにより、輪郭に独特な雰囲気を出す方法です。この「RGBずらし」は昔からある手法ですが、最近SNSで紹介され、イラストを描く方たちの間で若干話題になっていました。今回はそんな「RGBずらし」エフェクトをイラストではなくテキストにレイヤースタイルとして落とし込みました。これ、私は結構好きです。
※ベースカラーが濃い色の時に使用してください。それ以外だと、見えなくなります。
※サンプルの文字の色は白(ffffff)です

シンプルなストライプの入ったエフェクトです。これ自体はなんてことは無いのですが、グラデーションを重ねたり、ドロップシャドウを掛けたり、オリジナルパターンを重ねたりすることでアレンジが可能です。レイヤースタイル2項目で簡単実装できます。

“あるもの”をイメージして考案したエフェクトです。何に見えますか?正解は「新品の10円玉」です。レイヤースタイルは金属の表現が簡単にできますよね、ゆえに金属風加工チュートリアルはもうすでに沢山ありました。ですので今回はまだ誰もやっていないであろう新品の10円玉をモチーフに考案しました。さらにぎらぎらにしたい方はグラデーションの色数を増やしてみてください。お金が絡む見出しの演出にぴったりです。

ドロップシャドウを重ねるだけで押し出しを掛けたような立体感を出すことができます。こてこての3D表現ではないため様々な場所に利用できるはずです。PhotoShopやIllustratorには3D機能がついているため、表現によってはそちらの機能を使用した方が早いかも知れませんが、修正可能かつ独特な色使いを試してみたいという方はこちらの方法が良いかもしれません。

メタリックなエフェクトでは定番の中央にハイライトを持ってくる方法です。こちらのグラデーションは色使いや使用する場所を誤ると、ワードアートのような…パワーポイント資料のような…いかにもな仕上がりになってしまうので注意が必要です。今回は立体的なフチもおまけで付けました。


パッと見難しそうに見えますが、実はどれも簡単です!是非レイアウトに悩んだ時は使ってみてくださいね。

(はら)