ホームページ作成ソフトシリウス|ヘッダー画像を作ろう

パワーポイントとペイントを使ってオリジナルヘッダー画像を作る。

それではオリジナルヘッダー画像を作っていきましょう。
使用するものは

  1. パワーポイント(たけぞーの環境では2010)
  2. ペイント

どちらもほぼWindowsに標準装備されていると思います。

オリジナルヘッダー画像の作成手順

STEP1-ペイントを使って下地を作る

1・まずは元となる写真をペイントに貼りつけます。赤丸の貼り付けから「ファイルから貼り付け」を選択。ヘッダーの元となる写真を貼りつけます。画像が異常にでかく見える時は右下のズームを使いましょう。

ペイント画面1

2・次はサイズを変更します。このページではシリウスのデフォルト、ビジネス、角丸テンプレートで使うデフォルトサイズのヘッダー画像を作成します。幅900px、高さ200pxです。(たけぞーお薦めのヘッダー画像サイズは幅900px、高さ410pxです。デフォルト、ビジネス、角丸テンプレートでも使用できます。たけぞーお薦めのヘッダー画像を作成する場合は以下200px→410pxに変換して作業を行ってください。)
サイズ変更を選択し、単位は「ピクセル」に。縦横比を維持するに✓が入っているのを確認し、「水平方向」のボックスに900と打ち込みます。

水平方向を打ち込むと勝手に垂直方向の数字もでてきますね。たけぞーの画像だと幅900px、高さ506pxの画像が出来ました。このまま「OK」します。

ペイント画面2

3・今度は画像が随分小さくなったのではないでしょうか?
ズームを利用して作業しやすい大きさに戻しましょう。
次にこの画像から横幅900px、高さ200pxを切り出します。
横幅はすでに900pxですから、左の定規を頼りに高さ200px分切り取ってしまいましょう。

残したい部分を囲み(左クリックしたまま動かせば四角く囲めます)トリミングを押します。

ペイント画面3

厳密に横幅900px、高さ200pxにならなくても大丈夫です。

4・これでヘッダー画像の下地は完成です。分かりやすいようにデスクトップ上に「名前をつけて保存」しましょう。

ペイント画面4

STEP2-パワーポイントを使って装飾

1・パワーポイントを開きます。「クリックしてタイトルを入力」のような邪魔なものは消してしまいましょう。

パワーポイント画面

2・先程デスクトップ上に保存した下地を「挿入」→「図」で貼りつけます。

パワーポイント画面その2

3・このままでは小さいので赤い矢印の部分を引っ張って作業しやすい大きさにします。

パワーポイント画面その3

4・「挿入」→「テキストボックス」や「ワードアート」等を使い文字を入れていきます。

パワーポイント画面その4

5・ひと手間加えることで少し綺麗に見えます。

文字入力したテキストボックスの上で右クリック、「図形の書式設定」→「塗りつぶし」をして「透過性」を上げると字が読み易くなるのではないでしょうか。

パワーポイント画面その5

6・パワーポイントは機能が多彩です。いじくりまわして好きにデザインしてみましょう。

たけぞーはとりあえずこんな感じにしてみました。

パワーポイント画面その6

随分変わってしまいましたね。
一応やりかたの説明をしておきます。

サイト名

↑5でやったひと手間と、文字色、フォントを変えただけです。

「Takezos Web」

スペル間違いが気になりますが・・・。テキストボックスで文字入力後、「ホーム」→「クイックスタイル」で背景黒、文字色白に、その後「クイックスタイル」の右下、「図形の効果」にて3Dにしました。

下地

ここがパワーポイントのすごいところなのですが、パワーポイントでは「画像」に特殊な効果を加えることができます。
あえて「画像」と括ったのは、例えばテキストボックスで作った「TakezosWeb」ではこれができません。

ですからたけぞーはテキストボックスで作った「TakezosWeb」を一度「図として保存」し、画像として再度貼り付けを行いました。

それでは実際に特殊な効果を加えてみます。
画像をダブルクリックしてください。
下図の赤丸の部分で特殊な効果を加えることができます。

ちなみに今回は「アート効果」を使いました。

パワーポイント画面その7
7・ここまで来たらあと少しです。がんばりましょう。

下図の様にヘッダー画像を全て囲み下地からテキストボックスまで全て選択します。

パワーポイント画面その8

右クリックでグループ化を選択してください。
これで一つのかたまりになりました。
グループごと画像を選択し、右クリック→「図として保存」を選択。

ここで一つ注意!図として保存しようとすると、ファイルの種類が.png(PNGポータブルネットワークグラフィックス形式)という形式になっているかと思います。
ここを必ず.jpg(JPEGファイル交換形式)に変えましょう。

また例のごとくデスクトップに保存しましょう。
まだ終わりではありません。気を付けてください。

STEP3-最終仕上げ・ペイントで仕上げる。

さて最後です。
もう一度ペイントを開きます。

ファイルから貼りつけるで、先程のヘッダー画像を貼りつけます。

余白の入ったヘッダー画像

この画像では分からないのですが、変な余白が出来ているかと思います。
この部分をカットします。
ヘッダー部分を上手に囲ってトリミングをクリック。
最後にサイズ変更で水平方向900pxを入力。
垂直方向はほぼ200pxになるはずです。
少しずれたら「縦横比を維持する」の✓をはずし、垂直方向200pxと記入してください。
「上書き保存」で完了です。
最後に記事編集画面の「画像管理」→「新規追加」で作ったヘッダー画像をシリウスに追加しましょう。

ヘッダー画像が見当たらない?

たけぞーも一度迷ったことがあるので説明しておきます。
ヘッダー画像の参照ボタンを押すとシリウスに元々入っている大量のヘッダー画像が表示されるかと思います。
この「Aces web→Sirius→images」というファイルの中には先程新規追加したヘッダー画像はありません。
先程新規追加したヘッダー画像は「Aces web→Sirius→deta→サイト名→img」のファイルの中に入っています。探してみて下さい。

説明の中で「デスクトップに保存」とよく言っていますが、これはデスクトップに保存しておくと分かりやすいし作業しやすいと思うよ、程度の事であって、実際にはどこに保存しても問題はありません。念の為。