バーチャル3Dクリエイター神部まゆみです(*^-^*)
前回の続きで、ラノベとかエロゲみたいなタイトルロゴの作り方を勉強した過程について書いていきます。
今回はこちらのメディバンペイントさんが解説してくれているタイトルロゴの作り方で勉強していきます。
この記事は↑のメディバンペイントさんの記事を見ながら試行錯誤して勉強していく備忘録みたいな感じだから、ロゴ作成について学びたい人はメディバンペイントさんのページを見たほうがいいと思います(;^_^A
まぁ躓くところとか分からないところって誰がやっても大体同じだったりするから、もしかしたら参考にはなるかもしれません。
とりあえず↑のページで学んだことをメモしていきます。
メディバンペイントでは、テキストを変形させるにはカラーレイヤーに変換する必要があるらしい
メディバンペイントのテキストツールでテキストを入力してみたところ。
この段階ではテキストレイヤーというものらしく、拡大縮小や回転などができないみたいです。
ちなみにフォントは「にくまるフォント」です。
テキストを範囲選択して変形ツールを使おうとしたけど、確かに本当にできないっぽい。
変形ツールは「範囲選択」メニューにあるんだけど、グレーになってて使えないみたい。
じゃあカラーレイヤーに変換してみましょう。
レイヤー ⇒ 変換 ⇒ カラーレイヤーに変換 で、「神部まゆみのブログ」と書かれたテキストレイヤーをカラーレイヤーに変換したところ。
最初からある「レイヤー1」と同じサムネ？みたいな感じになった。
お、これならちゃんと変形ツールが使えて、拡大縮小や変形ができるようになったみたい。
ちなみに Ctrl+T のショートカットでも変形ツールは呼び出せます。
これで単語ごととかに分けて、大きさ変えたり角度変えたりすれば、なんか良い感じにできそう。
一文字ずつ交互に大きく、小さくするだけでもオシャレな感じになるみたい
どうだろ、「神部まゆみのブログ」だったら
神部 まゆみ の ブログ
で区切ったほうがいい？かもしれないけど、とりあえず例に倣って一文字ずつやってみようかな。
ただ、大きくすると隣の文字と被ってしまうので、最初から文字ごとにスペース入れたり、文字の間を開けたほうが良いかもしれない。
結局大きさを変えた後に、一文字ずつ位置を微調整するからね。
新聞の切り抜きの怪文書のように、一文字ずつやっていくのがいいかも(笑)。
とりあえず一文字ずつ選択して、移動ツールで文字の間隔を離しておく。
じゃあこれで一文字ずつ大きくしたり、小さくしたりしていけばいいのかな。
やってみた……けどちょっと微妙？でも仕上げ次第ではなくもないか…？
あれ、お手本と見比べてみると、ちょっと大きいのと小さいののサイズ差がありすぎるか(;^_^A
↓だと、最初の「夜」と最後の「ル」を一番大きくしてる感じっぽい。
※出典元 タイトルロゴの作り方｜メディバンペイント
んーじゃあこんな感じ？さっきよりは良いかな？
まぁとりあえずここでは、文字を変形させるだけでも割と良い感じにロゴ作成ができる、ってことが分かればいいみたい。
結局はどんな感じのロゴを作りたいかっていう明確なイメージやアイデアがあるかとか、あとは調整次第なのかな？
センスとか才能の一言で片付けるのは簡単だけど、結局は何度もプレビューして誰かに見てもらうとかして、ブラッシュアップしていくしかないかも。
漢字とひらがなカタカナで大きさを分けた
らこんな感じ。
あー、やっぱこのほうがまとまりがあって良い感じ？
神部をナナメにしたらどうだろう。
こういう配置だと印鑑っぽくなるかも(笑)。
名字のうしろに丸とか図形を配置すれば、文字が小さくても目立って場合によってはアリかも？
「まゆみ」の部分は薄い赤～ピンクっぽいイメージ。
まぁとりあえず一応保存しておいて、先に進めようかな。
漢字、カタカナ、ひらがなでフォントを分けるとオシャレになるらしい
「神部」「ブログ」をクラウドテキストのくろかねstd、「まゆみの」をにくまるフォントで作成。
文字の構成にもよるんだろうけど、かなり微妙(-_-;)
これなら全部にくまるフォントでやった前のやつのほうがいいかな。
タイトルの長いラノベとかのロゴだと効果的なんだろうけど、文字数が少ないのに無理にフォント混合させると微妙になりそうかな？
文字の構成やフォントによるのかもしれない。
「選択境界の描画」をすれば、文字を縁取りできるらしい
文字のレイヤーをレイヤーフォルダーにまとめ、「選択範囲」タブ内の「レイヤーを元に作成/不透明度」を選択して文字以外を範囲選択します。
フォルダーの下に新規レイヤーを作成し、「選択範囲」タブ内の「選択境界の描画」で文字の周りに縁どりをします。※出典元 タイトルロゴの作り方｜メディバンペイント
レイヤーフォルダーのくだりは、フォントごとにテキストを分けた場合はまとめよう！って話だと思う。
今回の私の場合は文字数が少ないので、とりあえずフォント分けるのはやらなくていいかな(￣▽￣;)
にくまるフォントだけのやつでやります。
縁取りしたいテキストのレイヤーを選択して、選択範囲メニューの「レイヤーを元に作成/不透明度」ってやつを選ぶと、文字以外を選択してくれるみたい。
テキストの下にレイヤーを作成して、範囲選択メニューの「選択境界の描画」をすれば、縁取り完了。
へー、テキストを縁取るのってこうやるんだ。
最初にテキストツールの設定で縁取るやつはやったことあるけど、後から選択してやるのは初めてです(￣▽￣;)
この「境界線の描画」ってGIMPにもあったね。
「テキスト以外にも応用できるだろう」と思ってやってみたけど、GIMPで私のモデルを縁取ることもできた。
この縁取りは基本的なテクニックなんだろうけど、応用の幅は広いね。
仕事で少しでも画像加工する機会がある人は、覚えておいて損はないかも。
強調したい部分を縁取るだけでも、絵にメリハリが出て良い感じになるし。
縁取りレイヤーをガウスぼかしすると、縁取りがぼけて良い感じになるみたい
フィルタ ⇒ ガウスぼかし を選ぶ。
値のバーでぼかしの加減を調整することができる。
クッキリ縁取るのもいいけど、周りと協調させるにはちょっとぼかしたほうがいいかな。
まぁデザインによるんだろうけど。
レイヤーの「不透明度を保護」にチェックを入れると、簡単に色を変えたりグラデーションをかけたりできるらしい
文字を白色で塗りつぶし、枠にグラデーションをかけます。
どちらのレイヤーも「不透明度を保護」にチェックを入れると簡単に色変えができます。※出典元 タイトルロゴの作り方｜メディバンペイント
「不透明度を保護」…？
「透明度を保護」ならあるけど、不透明度も保護できる機能があるのかな。
んー探したけどない。
検索してみよう。
あれ、出てこないぞ…？
最近のgoogleはキーワード無視して見当外れな推測したりするから、あんまりアテにならないけど…(￣▽￣;)
これもしかして誤字？「不透明度を保護」じゃなくて「透明度を保護」すればいいのかな？
「不透明度を保護」は無かったので、「透明度を保護」にチェックしたらできた
「透明度を保護」でいいっぽい。
「透明度を保護」にチェック ⇒ レイヤー ⇒ 塗りつぶし で、テキスト部分を塗りつぶして色を変えることができた！
おおっ！
なんかちょっとオシャレな感じになった！( *´艸｀)
グラデーションもできた
グラデーションツールを使えば、パレットの色でグラデーションをかけることもできた。
パレットはこんな感じ。
グラデーションツールは、クリックした始点で一色目が始まって、ドラッグした距離に応じてグラデーションのなだらかさが決まる感じ？
グラデーションの始点が文字の上、終点が文字の中間だと、白い部分が無く真っ赤になってしまった。
範囲選択すれば、特定の文字だけ塗りつぶせる
テキストが書かれているレイヤーを選択したまま、特定の文字だけ範囲選択すれば、その文字だけ塗りつぶせる。
自動選択ツールを使うことでも、特定の文字だけ選択できる
メディバンペイントさんのページでは、漢字とひらがなカタカナでレイヤーとフォントを分けてたから、「選択範囲」タブの「レイヤーを元に作成/不透明度」 をすれば漢字だけ選択、ってのができてるみたい。
※出典元 タイトルロゴの作り方｜メディバンペイント
でも今回は私はレイヤーもフォントも分けずにやってるので、「レイヤーを元に作成/不透明度」を使うとすべてのテキストが選択されてしまう！↓
この場合は自動選択ツールを使えば、特定の文字だけ選択できるよ。
Shiftを押しながら選択したい場所をクリックすれば、選択範囲を増やしていくことができます。
↓は「まゆみ」の部分だけ選択して、下のレイヤーに白い縁取りを境界線描画したところ。
あー、なんかだんだん魔法少女っぽいロゴになってきたかもしれない(笑)。
これはいいぞ( *´艸｀)
文字を白く際立たせたい時は、レイヤーを「加算・発光」にするといい感じ？
※出典元 タイトルロゴの作り方｜メディバンペイント
これ、文字の下にあるレイヤーの色に加算して、発光してるような感じにするレイヤータイプみたい？
文字の下に何もない場合は、「加算・発光」にしても変化なし。
だけど下に背景色を置いてあげると、「加算・発光」にした縁取りが白い感じになって際立つ感じ。
まぁ使い方次第だけど、覚えておくといいかもしれない。
ここまで学んだことまとめ
- メディバンペイントでは、テキストを変形させるにはカラーレイヤーに変換する必要がある。レイヤー ⇒ 変換 ⇒ カラーレイヤーに変換 で。
- 一文字ずつ交互に大きく小さくするだけでも、オシャレな感じのロゴが作れるかも。漢字ひらがなカタカナで大きさを分けるのも良い感じ。
- 文字ごとに配置を変えたり、ナナメにしたり変形するだけでもオシャレになるかも。
- 漢字ひらがなカタカナでフォントを分けると良くなるかも。でも短い文章だとちょっと微妙かも？
- 範囲選択 ⇒ 境界線の描画 をすれば、文字や絵を縁取りできる。縁取りはレイヤーをわけておけば、簡単にぼかしたり色を変えたりできる。
- レイヤーの「透明度を保護」にチェックしておけば、グラデーションや塗りつぶしで簡単に色を変えられる。
- 範囲選択や自動選択ツールを使えば、テキストごとにレイヤーを分けなくても、特定の文字を選択して塗りつぶしたり縁取ったりできる。
- レイヤーを「加算・発光」にすると、下の色から浮き出た感じにできて良い感じになるかも？
このくらいかな。
これだけでも結構良い感じのロゴが作れそう。
こういうノウハウ系の記事は、つい「後で読もう」と思って読み飛ばしたりブックマークするだけで終わりがちだけど、じっくりやってみると得るものは多いね。
この知識はずっと使えそう。
でもまだページの半分くらいしか終わって無くて、あとは図形を組み合わせたりしてオシャレにしていくところが残ってます(￣▽￣;)
星マークとかハートマークとか組み合わせられたらものすごいオシャレに良い感じのが作れそうなので、ちょっと期待です。
長くなったので続きます。
この記事で参考にした、というか勉強に使ったのはこちらのページ。
とても参考になってます。
ありがとうございます(*^-^*)
追記：
続きを書きました！
