ヘッダー画像を作成する①

ヘッダー画像(横幅950pxほど)の作り方①です。

賢威の場合、イメージ画像もしくはヘッダー画像を作成して、

サイトの印象を上げていく事は、大変重要な作業となります。


そんな時、Windows標準装備の「ペイント」を使えば、

誰でも簡単にヘッダー画像を作成出来ますので、

是非ヘッダー画像の作成に取り組んでみて下さい。


テキストのヘッダー

矢印ヘッダー画像へ変更しました!

ヘッダー画像アフター

今回の作業を行うと、上記のように、

テキストのヘッダーから画像のヘッダーへ変更出来る様になります。


まず初めにやる事は、ヘッダー画像に使用するイラストや写真の収集です。

上のヘッダー画像は、2枚の画像を使用していますが、

2枚ともFotoliaで購入したものです。


上のようなイラストから、非常に写りの良い洗練された写真まで、

たくさんの画像を入手する事が出来ます。

1枚98円からありますので、是非ご利用下さい。


賢威のヘッダー画像を作成する場合、

横のサイズは、最大950pxまでと決まってますので、

そのサイズを想定して1枚だけ写真を購入するのか、

または当サイトのように、横幅950pxのスペースの中に、

複数の画像を組み合わせてヘッダー画像を作成するのかを決めて、

画像や写真を購入するようにします。

購入した画像はデスクトップに保存しておくのが良いでしょう。


とにかくFotoliaはものすごい数の写真や画像がありますので、

サイトのイメージに合う物をまずいくつか選んでから、

ヘッダー画像に使う写真を1枚にするのか、

複数組み合わせて作成するのかを決めていくのが良いと思います。


今回購入した画像のサイズは、

851×564 と

310×387 でしたが、どのようにヘッダー画像を作成していくのか、

早速説明させて頂きます。


購入した写真は、縮小する前に5枚ほどコピーしておいて下さい。

必ず何度もやり直すようになりますので、

元の写真は5枚ほどコピーしておきます。


<ヘッダー画像を作成する手順>

  • 写真を縮小して(パソコンでサイトを量産してる写真)、

    横幅950pxのヘッダー画像の土台を作る。
  • 作成したヘッダー画像の土台に

    2枚目の画像(パソコンからお金が湧き出るイラスト)を挿入する。
  • 空いたスペースにサイトのタイトルを記載する。

以上のような流れで、ヘッダー画像を完成させていきます。

それでは、一つづつやっていきましょう。


チェックマーク写真を縮小して(パソコンでサイトを量産してる写真)、

横幅950pxのヘッダー画像の土台を作る。
 (イラストを縮小する方法)


デスクトップに用意した写真を右クリックして「編集」を開きます。

すると写真が表示された「ペイント」が起動すると思います。

このペイントの画面で、

写真の縮小を行いヘッダー画像の土台を作成します。


写真を縮小して、ヘッダー画像の土台を作る


もしペイント画面で、縦横のサイズが計測出来る様になってない方は、

画面の上の方にある「表示」から、

「ルーラー」に✔チェックを入れて表示させて下さい。



「サイズ変更」をクリックすると、ポップアップ画像が出ますので、

パーセントに✔を入れ、

100から50に変更して、OKをクリックして下さい。


すると50%(1/2)に縮小された画像となって、

以下の様に表示されると思います。

縮小した画像をトリミングする

続いて、ヘッダーにする所だけ切り抜きますが、

縦のサイズは、200px~300pxぐらいが良いかと思います。

当サイトは240pxほどですが、お好きな高さにして頂いてOKです。


まず、「選択」をクリックします。

必要な箇所を囲います。

左上から右下に向かって、マウスポインターをスライドさせます。

その時、左クリックしたまま(押したまま)右下まで持っていき、

指を離して下さい。やり直す場合は、キーボード左上の「Esc」を押して下さい。

うまく囲えたら、「トリミング」をクリックしてくり抜きます。

表示されたものでOKなら、「上書き保存」をクリックして下さい。

この時、ファイル名をどうするか、ポップアップ画面が出ますので、

「デスクトップ」を指定してから、任意の名前を付けて保存して下さい。


もしポップアップ画面が出ない場合は、既にファイ名が付いています。

ペイント画面の一番上に名前が表示されてますので、覚えておきましょう。


トリミングして保存すると、この様になってると思います。

ヘッダーの土台を作成する

この写真は横幅420pxほどですので、

これを横幅950pxの土台の上に表示させます。


写真の右側に、小さい〇があると思いますが、

それにマウスポインターを合わせ、このような「⇔」表示にします。


そして先ほどと同じように、

左クリックしたまま、950pxまで右に移動していって下さい。

950pxまで移動したら、人差し指を離します。

横950pxの土台が完成しました

このような白いスペースになると思います。

この白いスペースに、

サイトタイトルを記入してヘッダーを完成させても良いですが、

今回は、写真を右端に移動させてもう一枚写真を追加していきます。

ヘッダー画像の土台内で、写真を移動します

「選択」の下にある▼をクリック後、「すべてを選択(A)」をクリックします。

その後、写真の上にマウスポインターを乗せ、

先ほどと同じように、左クリックしたまま右へ移動して下さい。

OKなら左上の「上書き保存」をクリックします。


横950px 縦240pxnoヘッダー画像の完成!

うまく出来ましたか?

これで写真を右に寄せた、ヘッダー画像の土台が完成しました。


今回はもう1つイラストを追加してから、

サイトのタイトル名を記入していきます。


もしご興味があれば、ヘッダー画像を作成する② の続きへお進み下さい。


また2つ目の写真の入れ方が分らない方や

文字の入れ方が分らないという方も、②へ進んで頂ければやり方が分ります。



この記事、約3000文字にもなってしまいました。

原稿用紙7枚半もお読み頂きありがとうございました。





サブコンテンツ

当サイトの記事一覧

アーカイブ

このページの先頭へ