デザイン関係やガジェット情報、旅行情報など幅広く発信中。

デザイン

wordpress 3Dタイトルの作り方

投稿日:2019年9月27日 更新日:

wordpressのシンプルでスタイリッシュな3Dタイトルの作り方を解説していきたいと思います。
下記の順でお話していきます。
①3Dタイトルの画像をphotoshopで作成する
②.jpgまたは.pngに書き出します
③書き出した画像をwordpress上でテキストタイトルと入れ替えます。

タイトル画像の他の作成の方法もアップしてますのでご参考までに。
WordPress 2Dタイトルの作り方

3Dタイトル画像の作り方

photoshop上でタイトルのテキストと背景を作成する

テキストの色はあとで調整できるのでなんでも良いです。
背景色はあとで調整ができないので暗めのグレーをオススメします。
(最後にテキストに照明を当てるので背景色が白だと白とびしてしまう)

タイトルと背景を3D化する

まずタイトルテキストを3Dに変換します。
メニューバーの「書式」→「3Dに押し出し」
実行するとテキストに奥行がつきます。

3D実行後のキャプチャ

ここでテキストの色やテキストの奥行きを変更できます。
また画面中央の「ら」の部分に見えるアイコンを上下にドラックすることでテキストの位置を変更できます。

次に背景も3Dに変換します。
メニューの「3D」→「レイヤーから新規メッシュを作成」→「ポストカード」を選択します。

実行できたら、テキストと背景を選択しレイヤーを結合します。

カメラの設定

カメラは2種類あります。
①遠近法
②正投影

それぞれについて説明します。

まずは①遠近法からです。
先ほどからの画像で見えているのが遠近法になります。
画面中央(「ら」の後ろあたり)に向かってテキストの奥行きが伸びているのがわかります。

次に②正投影です。
こちらは先ほどとは違いテキストの奥行きを認識できなくなります。
どちらのカメラを選択するかは好みだと思うのでお好きな方を選択ください。

ライトの設置

3Dパネルの下にある電球マークをクリックすると3種類の照明方式が表示されます。
今回は新規無限遠ライトを使用します。

これは何かと言うと、太陽みたいな光です。
光源が一つにも関わらず、それぞれの影が一方方向に伸びます。

ライトの設定で重要なのは「照度」「ソフトネス」です
「照度」は光の明るさです。より明るくしたい場合は数値を上げてください。
「ソフトネス」は影の柔らかさを意味します。数値を上げていくと徐々に影が柔らかくなっていきます。
今回は上画像のような設定で進めています。

ライトが一つだと影の出方がイマイチなので新たに2つ追加したいと思います。
これも好みですが私個人的には数種類のライトがあった方がよりかっこよく見えると思います。

2つ目のライト
3つ目のライト

レンダリング

カメラ、ライトの設定が整ったら最後にレンダリングします。
ここまででphotoshopの大きな作業は終了です。

.jpgまたは.pngで画像に書き出す。

「ファイル」→「別名保存」→「.jpgまたは.pngを選択する」

テキストタイトルを画像に入れ換え

こちらについてはきにぶろぐ.comさんのブログの方で紹介されています。

私も参考にさせて頂きました。

最後に

photoshopをお持ちでない方については私の方でタイトル画像を作成を請け負います。
下記私のcoconalaの出品ページになります。
wordpress用 タイトル画像作成します

こちらからご購入のほど宜しくお願いします。

-デザイン

執筆者:

関連記事

フォトジェニックな背景画像の作り方 #ブログ #SNS #Photoshop

今回はフォトジェニックな背景画像の作り方について解説させていただきたいと思います。加工した画像に自分のブログやSNSの名前を追加していただきWebの背景画像として使って頂いてもいいですし、背景画像では …

Photoshop プラグイン追加方法

Photoshopでのプラグイン(エクステンション)追加方法について解説していきます。プラグインを導入することでPhotoshopでの作業が格段に早くなるので、ぜひ取り入れてみて頂ければと思います。 …

Photoshop レイヤースタイルの使い方

今回はレイヤースタイルの機能紹介です。基本的なレイヤー効果の使い方を解説させて頂きたいと思います。よく使う「通常の描画」と「ブレンド条件」をピックアップしていきます。レイヤースタイルの中の一部の機能に …

WordPress 2Dタイトルの作り方

wordpressのシンプルでスタイリッシュな2Dタイトルの作り方を解説していきたいと思います。下記の順でお話していきます。①2Dタイトルの画像をphotoshopのプラグインを使用して作成する②.j …

【tokyo grapher】iPhone11や一眼カメラに劣らない写真が撮れる!

今回は「tokyo grapher」というスマホ用レンズメーカーのワイドレンズを使いiPhone11や一眼にも劣らない写真を撮影できる方法をお話したいと思います。 上の写真はiPhone8にtokyo …


名前:ちーら
建築学科 大学卒業→アトリエ設計事務所→
フリーランス(デザイナー)として活動。26歳。フリーランスとして建築の仕事をメインに、副業としてブログを開始しました。デザイナーの視点で様々な情報を発信していきたいと思います。