ヘッダー画像を簡単に自作できるおススメサイト&使い方

1110header

「ヘッダー画像は、skinには含まれていないのですか?」という問い合わせを頂きました。
残念ながら、私にはヘッダー画像を配布出来るような力はありません(TOT)デザインの勉強を全くしていないのです(汗)

しかしながら、弊サイトは『初心者の方』のご訪問が大半ですし、
「ヘッダー画像をどう作るのかが分からない」というお気持ちも分かります。
ですので、今回は色々と考えてみました。( `ー´)ノ
超おススメ!な使えそうなサイトさんも発見しましたので、ご報告いたします。

それでは、一例としてヘッダー画像を作る手順を記して行きたいと思います。

スポンサーリンク

ヘッダー画像を自作する手順とおススメサイト

流れとしては、

①画像素材を探す → ②画像のサイズ加工を行う → ③画像へ文字入れ・装飾を行う → ④自サイトサーバーへアップロードする

今回は、①~③の手順をまとめてみます。
自サイトへアップロードは、皆さん既に慣れていらっしゃると思いますので。

ヘッダー画像の流れ(一例)

ヘッダー画像を探す。

今回も私行きつけのイラストダウンロードサイト【イラストAC】さんから画像をダウンロードしてみました。

1110_1

この画像を使いたいと思います。
ダウンロードファイルの拡張子が、JPEG・PNG・AI-EPSの3種ありますが、どれも画像データです。

イラストレーターを所有されているのであれば、一番下のAI-EPSの形式を選択。
持っていないのであれば(というか、このページでヘッダー画像を作るなら)JPEGかPNGを選びます。
PNGは、白色の部分が透明になっている事が多いので、サイトの背景となじませたいならばPNG,白背景で良いのであればJPEGを選択すると良いでしょう。

画像を自分のパソコンへダウンロードする。

ダウンロードしたファイルは、圧縮されていますので、任意のフォルダーへ解凍して置いてください。
ダブルクリックで解凍が可能ですので、難しくはありません。

画像のサイズをリサイズする。

画像を配布されているサイトさんは、少なくはないですが、自分で使う際にはリサイズ(サイズを拡大・縮小)トリム(欲しい部分のみを切り取る)等の作業を行うのが一般的です。
この作業が自分で出来るようになれば、他の作業にも転用出来るようになってきますので(記事中の写真も加工出来る)思い切って覚えてしまいましょう。

今回、画像のリサイズ等も簡単に出来るサイトバナー工房さんを発見したので、ご紹介します。

1110bana-

このサイトさんは、登録もインストールも不要で、画像に関する加工が可能です。
リサイズ、回転、モザイクや色調整等も可能なので、今まで全てGIMPでやってきた私も、小躍りしています(笑)
是非、使ってみたいサイトです~❤枠素材も豊富に揃っているので、一度覗かれてみても損はないと思います。

加工したい画像をアップロード

バナー工房さんのサイズ変更ページへ行き、画像をアップロードします。

1110risaizugazouyomikomi

サイズを指定する

高さ又は横幅のどちらかのみを選択し、サイズを変更する

オリジナルの設定のままで、高さと横幅の比率を変えずに変更出来るのが嬉しい配慮ですね。
今回は、高さを300と指定しました。

1110sizesitei

高さ300に設定しましたので、横幅は自動的に400になったはずです(画像では確認できなかったのですが、ちゃんと変更されていました(汗))

画像に文字入れ・装飾を行う

リサイズした画像に文字を入れる

リサイズが終わったらメニューより「文字入れ」を選択します。
グリーンの帯のメニューから探してみて下さい。

1110moji_8

ヘッダー画像に文字も入れたい場合は、次に文字を加えて行きます。バナー工房さんで行えます。
フォントも豊富に揃っていて、直感的に作業出来るのが感動ものでした(#^.^#)

同じサイトさんなので、判別しづらいかもしれませんが、真ん中の緑の帯に「文字入れ」と書いてあります。

文字を入力する

画面中央の画像を加工するボタンを押して、文字入れを始めます。

1110moji_2

手順は上部に書いてありますので、その通りに進められます。
さらに下へスクロールしていくと、

1110moji_3

こんな感じで、文字入力が出来ます。
フォント選択、縦書きや傾き、フォントカラーや影等、圧巻の機能が備わっている事にびっくり!
これが無料で(@_@)?って感じです。

1110moji_4

文字設定を変更ボタンを押したら、ここでサイトタイトルを入れることが完了しました。
見難いのですが、最初は左の一番上にテキストが入っています。

文字の場所を確定する

これをドラッグして、好きな場所へ移動してください。

1110moji_5

好きな場所に移動したら、そこで現在の文字の場所を確定ボタンを押します。

続けて、2箇所目の文字列。site-discriptionサイトの説明等も入れておくことが出来ます。
下にスクロールすれば、先ほどと同じ文字入力の窓や、フォント設定の項目が並んでいます。
手順的には同じ方法で、現在の文字の場所を確定ボタンを押したら…。

ヘッダー画像としては、出来上がりましたね(#^.^#)

出来上がった画像をダウンロードする

1110moji_7

ダウンロードのボタンを押して、自分のパソコンへダウンロードして終了です。

これで、ヘッダー画像の作り方の解説を終わります。
慣れないうちは大変ですが、使いこなすとかなり便利なサイトだと思いますので、どんどん練習してみて下さい。
お疲れ様でした(#^.^#)

励みになります
ランキングに参加しました。
「ダウンロードしたよ。」の
応援クリック頂けると嬉しいです(#^^#)
にほんブログ村 IT技術ブログ WordPressへ
にほんブログ村


スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする