ホーム >> テンプレートの画像加工

テンプレートに使用されている画像を編集するには?

メインタイトル箇所や、メニューの上下、フッター箇所など、テンプレートに使用されている画像を加工する場合は
「加工用素材」フォルダに入っている画像をお手持ちのグラフィックソフトで編集して下さい。

 

加工用素材フォルダに入っている画像と利用方法

bk_header … メインタイトル画像
m_top … メニュー上部の画像
m_bottom … メニュー下部の画像
bk_footer … ページ最下部のコピーライト背景画像

任意の編集ができたら上書き保存し、その画像ファイルを design フォルダにドラッグします。
「上書き保存しますか?」とアラートが表示されるので、「はい」 を選んで下さい。
ページを開いて編集した画像が適用されているか確認して下さい。

※ テンプレートによっては加工用素材フォルダに画像データが3つ、あるいは2つのものがございます。

 

テンプレートで使用している画像について

当サイトで配布しているテンプレートで使用している画像は全てdesignフォルダに入っています。
名前を変更したり、ディレクトリを移動させると画像が表示されなくなりますので、注意してください。

また、製作者が自身の画像を追加、利用する場合には、それらの画像を格納しておくため
image フォルダを作成しています。
テンプレートで使用している画像と自身の画像が混同しないためにも、追加、利用する画像は
image フォルダに入れて下さい。

ページの上部へ

グラフィックソフトをお持ちで無い方へ

画像を加工するソフトをお持ちでない方には、フリーで利用できるグラフィックソフトが沢山あります。
一部ソフトを下記に紹介しておきますので、好みのものをお使い下さい。

name URL
PictBearSE http://www.fenrir.co.jp/pictbear/
Pixia http://www.vector.co.jp/soft/win95/art/se144188.html
PaintNet http://www.forest.impress.co.jp/lib/pic/piccam/picedit/paintdotnet.html
GIMP http://gimp-win.sourceforge.net/stable.html

 

ヘッダー部分の画像に任意のサイトタイトルを文字入れし、サイトに反映させよう!

ここでは、Windows ペイント を使ってタイトルの画像に文字を入れテンプレートに反映させる手順を紹介します。
「スタートメニュー」 → 「全てのプログラム」 → 「アクセサリ」 → 「ペイント」 を選びペイントを起動します。

※上の図は、テンプレート Chalcanthite Report のものです。

同じ手順で、文字のサイズに変化をつけてサブタイトルなどをつけると、カッコよくなりますよ♪
文字を入力し終えたら、「ファイル」 から 「上書き保存」 を選んで画像を保存し、ペイントを終了します。

ページの上部へ

次は、テンプレートに先ほど作成したタイトル画像を適用します。
テンプレートのフォルダを開いていき、「加工用素材」ファイルを開きます。


作業が終わったら、index.html などのHTMLファイルをブラウザで開いて、作成したタイトル画像が
ヘッダー箇所に反映されているか確認をし、問題がなければ終了です。
(ブラウザの「更新」ボタンをクリックして確認して下さい。)

 

上手にメインタイトル画像を加工するには?

メインタイトルはテンプレートによって、ページと繋がりがあり、お手持ちの画像をそのまま利用すると
その場所だけ浮いたような雰囲気になってしまう場合があります。
そのような場合には加工用素材フォルダに入っている  bk_header.jpg にお手持ちの画像を合成することで
プロっぽく仕上げることができます。
合成する画像を切り抜いたり、合成したレイヤーのモードを変更したりしてみましょう。

▼サンプル (社名やタイトルは実際の企業とはなんの関係もありません:クリックで実寸表示します)

 

 

ページの上部へ