GIMPの写真加工とKompoZerでの画像の設定について

それではGIMPを使って写真を加工して、テンプレートの写真を差し替えてみましょう。GIMPのインストールについては画像編集ソフト「GIMP」の準備をご覧ください。

• GIMPを使って画像のサイズを変更します
• KompoZerでテンプレートの写真を入れ替えてみましょう

まず差し替える写真を用意します。デジカメなどで自分で撮影した写真でも良いですし、適当な写真が手元にない場合はフリーの写真素材サイトなどで用意しましょう。

• 写真素材 足成【フリーフォト、無料写真素材サイト】（別ウィンドウで開きます）
• 2000ピクセル以上のフリー写真素材集（別ウィンドウで開きます）
• EyesPic – フリー画像素材（別ウィンドウで開きます）

GIMPを使って画像のサイズを変更します

それでは準備した写真をテンプレートのアイキャッチ用で使えるようにサイズの変更をしてみましょう。アイキャッチ用の写真のサイズは横950ピクセル、縦200ピクセルです。

1. 準備した画像をGIMPで開きます。
2. まず写真そのものの大きさを変えますので、画像→画像の拡大縮小を選びます。
3. 開いたウィンドウで、写真の横のサイズを950ピクセルに設定して「拡大縮小」ボタンを押します。
   
4. 次に高さを200ピクセルに変更しますが、先ほどの拡大縮小の機能を使うと写真全体が横に伸びてしまいます。そこで写真の縦横比を維持したまま高さを200ピクセルにするため、キャンパスサイズの変更を行います。
   画像→キャンパスサイズの変更を選びます。
5. 開いたウィンドウの「キャンパスサイズ」の数字の横にある鎖のようなマークをクリックして、キャンパスサイズの縦横比の連動機能をOFFにします。（鎖が繋がっている状態で幅や高さの数字の修正をすると、もう一方の数字も自動的に変更されます）
   キャンパスサイズの高さの数字を200に変更します。このとき幅の数字は950ピクセルのままになる事を確認してください。最後に「サイズ変更」のボタンを押します。
6. 移動ツールを使って適当な場所に写真を移動します。キーボードの矢印キーを使っても移動できますので、微妙な位置調整はキーボードで行いましょう。
   
7. 最後にjpegファイルで写真を保存します。ファイルメニューの「名前をつけて保存」を選びます。名前は適当な名前で構いませんが、半角英数字のみのファイル名にしておいてください。「保存」ボタンを押すとjpegファイルの場合は透明度情報を扱えませんというダイアログが表示されますが、気にせず「エクスポート」ボタンを押します。最後に品質を調整する画面になりますが基本的に修正する必要はないでしょう。（品質が高いとファイルサイズが大きくなりますので、調整する場合は「画像ウィンドウでプレビュー」にチェックを入れて確認しながら行うと良いでしょう）
   「保存」ボタンを押すとjpegファイルが最初の画面で指定したフォルダに出力されます。
   

KompoZerでテンプレートの写真を入れ替えてみましょう

差し替える画像の準備ができたら、さっそくKompoZerを使ってテンプレートに表示されている画像を差し替えてみましょう。

1. 差し替える画像をテンプレートのフォルダにあるimagesフォルダにコピーしておきます。
2. KompoZerでHTMLファイルを開き、差し替える画像を選択して右クリックします。サブメニューが開きますので、一番下にある「画像のプロパティ」を選びます。
3. 開いたウィンドウのフォルダアイコンをクリックして、先ほどimagesフォルダにコピーした差し替える画像を選択します。
4. これで画像の差し替え作業は完了ですので、実際にページを確認して画像が変わっているか確認してみましょう。
   

他の場所の画像も同じ手順で差し替えていきましょう。

「役にたった」と思ったらシェアお願いします