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. これで画像の差し替え作業は完了ですので、実際にページを確認して画像が変わっているか確認してみましょう。
   

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

Webデザイン・プログラムスキルを身につけたい方におすすめしたいスクール

私もWebスキルを身につけるためにスクールに通いましたが、正直言って「趣味の講座レベルのスクール」が多く、実践的なスキルを身につける事ができるスクールは多くありません。

ただ全くの未経験ではWebを仕事にする事が難しいのも事実。そこでWebの実践的なスキルを身につけられるスクールをご紹介します。

スクールの価格は安くありませんので、まずは無料体験レッスンや無料カウンセリングで体験してみて、良さそうだなと思ったら本格的に取り組む方法をおすすめします。

Webスク（6か月のガッチリ型）

半年間、オンラインとオフラインのカリキュラムで「即戦力」と呼ばれるような人材になるためのスクール。業界の企業を見学するオフィスツアーやIT企業の人事担当との交流会など、現実的なキャリア形成のイメージを作れる機会があるのが良いです。

無料体験レッスンでは、キャリア形成の相談もできます。

WebCamp（1か月の集中型）

こちらは1ヶ月の短期集中型。と言っても、最初のカウンセリングを通してカリキュラムは個人ごとのオーダーメイドなので、自分の都合で学べるのが良いです。

このご時世、直接Web制作に携わらない部署の人もWebに関する知識は必要なので、社会人の方の受講も多いです。

CodeCamp（2〜6か月のカスタマイズ型）

現役エンジニア・デザイナーからマンツーマン指導が受けられるスクールです。内容的には他のスクールにひけはとらないにもかかわらず、オンラインのみなので価格が安いのが良いです。

新卒などの社内研修でも利用されているので、社員のスキルギャップに悩んでいる方にも良いかもしれません。

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