THE THOR メインビジュアル設定
今回はTHE THOR メインビジュアル画像新しく作り直してみました。
皆さんも試行錯誤しながら制作していると思います。
何と言ってもブログのTOP画面ですからね。オシャレに作りたいものです。
参考になると励みになります。
今回作ったのがこちら、テーマ画面ッポイですね。コメントを入れればあなたの作品です。
THE THOR のメインビジュアル機能は様々な使い方ができます。
メインビジュアル設定
①ワイドサイズ
画像がヘッダーと隙間なくつながりウインドウ幅いっぱいに表示される。ヘッダーの一部のようになる。
②ノーマルサイズ
画像がヘッダーと隙間なくつながりメインカラムと同じ幅で画像を表示。
③ビッグサイズ
ヘッダーと隙間ができます。下側とも隙間が出来るのでメインビジュアル画像が独立した状態になります。
現状：1065*400 96px
ワイドサイズの場合
PC表示時の表示サイズ[縦]を指定 470
ノーマルサイズの場合
PC表示時の表示サイズ[縦]を指定 450
ビッグサイズの場合
PC表示時の表示サイズ[縦]を指定 460
当サイトでTESTしたのは「ビックサイズ」です。
上下側とも隙間が出来るのでメインビジュアル画像が独立した状態ですね。
PC表示時の表示サイズ[縦]を460と説明しましたが450でも画像が切れることなく表示されています。
画像自体に直接タイトルを入れないで、THE THORの機能を使って好みに文字を入力します。これなら何時でもタイトルを変えられますね。
ではメインビジュアル画像制作のSTEPです。
制作にはAdobe Photoshopを使っていますが、他の画像処理ソフトでも同じです。
GIMP、Affinity photoと買い慣れているソフトをお使い下さい。
STEP 1 背景の画像を用意する
なるべく大きい画像を使ってくださいね。画像が小さいと劣化してしまいます。
背景に使いたい画像を幅：1065px 解像度：96pxにリサイズします。
高さは400pxが良いのですが、後で上下で移動できますので近ければ問題ありません。
別名で保存「main」とでも分かりやすく付けておきます。
STEP 2 下地のレイヤーを新規作成する
画像処理ソフトを使って新規に1065*400 96pxのレイヤーを作ります。
名前を「TEST」とでも付けましょう。
レイヤーを同じドキュメント内に複製します。
「TEST」のレイヤーと「TESTのコピー」レイヤーが出来ました。「TEST」のレイヤーはここで削除してしまいます。「TESTのコピー」内を自動選択ツール を使って背景色を透明にします。
次にSTEP1で作った「main」のレイヤーを「TESTのコピー」に呼び込みます。
「TESTのコピー」のレイヤーの上段に「main」のレイヤがあります。これを入れ替えて「main」のレイヤーが最下段になるようにドラッグして移動させます。上のレイヤーは透明です。
STEP 3 背景のレイヤーを表示する
「main」の画像が表示されました。移動ツール で上下移動が出来ます。
STEP 4 タイトル部分を作る
見本では上下に帯条のタイトル部分を付けました。長方形ツールを使って配置してあります。
お好きな色、ロゴ、文面を配置出来ます。
STEP 5 レイヤーを結合して完成
「main」のレイヤーを選択して、画像の上下のバランスを取ったら、レイヤーを統合します。
一枚のレイヤーになりましたよね。画像サイズを確認してみましょう。1065*400 解像度：96pxになっている筈です。これで画像の制作は完成です。
STEP 6 THE THOR メインビジュアルの変更
新しく作ったメインビジュアル画像をメディアライブラリに追加しましょう。
THE THOR メインビジュアル設定で画像の変更をしたら、お好みの「タイトル」または「サブタイトル」を入力しましょう。ここは何時でも変更できるので便利ですよね。ただ書体の変更が出来ないのが残念です。
これからAdobe PhotoshopやIllustrator、Acrobatを使ってみたい方、講座付きのAdobe CCコンプリートプランがお得です。公式サイトから購入するより37,780円も安くなります。講座があるので独学でも安心ですね。
Adobeマスター講座
安く導入する方法として、ご紹介してきましたが残念ですが、当サイトでの ASP は2024/08/23で終了しました。
ご愛顧有り難うございました。
再開されるようでしたら当サイトで再度紹介したいと思います。
なお、デジハリONLINEプロモーションは引き続き運営されていますので、直接お問い合わせ下さい。
まずは7日間無料体験版から始めてみましょう。注意点はAdobe認定スクールは自動更新しない事、その都度申し込みしましょう。
おわりに
写真、イラスト、画像系は著作権がある場合があります。フリーの素材も良く確認してから加工しましょう。私がよく使うのは「写真AC」「イラストAC」の無料素材です。他にもいくつかありますが…。
メインビジュアル、アイキャッチ、ギャラリー画像と沢山画像も使います。JPEGが良い、PINGが良い。色々悩みます。これからも気づいた事発信して行きますのでよろしくお願いします。
