最近ではレスポンシブデザインが主流になってきたのでTOP画像の作成頻度は少なくなってきましたが、以前このサイトで使用していたTOP画像の作成方法の説明をしていきたいと思います。

TO画像に限らず画像の編集作業を覚えておくと、ホームページを作成していくうえで色々と役立つことが多いので画像の編集作業をこの際に覚えておきましょう。


スポンサーリンク


無料で使える画像編集ソフトの操作方法

実際に無料で使えるソフト(フリーソフト)を使ってTOP画像を作っていきたいと思います。

コチラの画像が以前このサイトのTOP画像として使用していたモノです。
TOP画像の作り方

今現在、こちらのサイト自体をレスポンシブデザインに変更したのでこのTOP画像は使用しておりませんが、ホームページの自作するなら画像の編集は覚えといて損はないかと思います。

それでは早速無料で使える画像編集ソフトを使って画像の編集をしていきましょう。ここで画像の編集に使う無料のソフトは「インクスケープ」と「JTrim」というフリーソフトです。

それでは、以前このサイトで使用していたTOP画像を実際に作っていきたいと思います。


メイン画像の編集

まずは画像のメインとなる写真(イラストでも無地で構いませんが)を使いやすいように少し加工してみます。この加工作業は主に大きな画像の1部分だけ使いたい時などする作業となります。

画像編集元の画像

実際にTOP画像で使用したPC作業している手元の画像(赤枠で囲っている部分)は、このような画像のある一部分を使用しております。

また使用した画像のサイズが非常に大きい(元のサイズは5000×3000でした)ので画像データを縮小し、今度は画像の使いたい部分をトリミング(切り取り)し調度良い画像サイズに加工します

この時使用した画像のサイズを縮小をするソフトは「JTrim」というフリーソフトを使用して行っております。「JTrim」は簡単に画像などを縮小したりできるフリーソフトなので、今後自分でホームページの作成をしようとされている方はインストールしといた方が宜しいかと思いますよ。

ホームページ作成に必要なフリーソフトはコチラでまとめてありますのでコチラのページでインストールしてください。フリーソフトまとめは≫コチラからご覧になれます。

スポンサーリンク


フリーソフトを使って画像を縮小してみる

実際に「JTrim」を使って画像を縮小してみます。

まずは「JTrim」を起動し加工したい画像を選択します。選択するとこの様な画面になります

画像の説明

まずは画像の縮小の方法です

  1. 左上のリサイズボタンを選択します。
  2. 縦横のサイズを指定します
    この画像サイズは5000×3400だったので、横だけ1000に変更します。※横と縦を同時に変更すると縦横の比率が変になる場合があるので、使い慣れるまでは横だけサイズ変更してあげるのがよいと思います。
  3. あとはOKボタンを押すだけで画像の縮小作業は終わりです。


フリーソフトで画像のトリミング(切り抜き)

今度は、この画像の使いたい部分の切り抜きをしていきます。

画像の説明


  1. 使いたい部分を選択(マウスの左ボタンを押しながら使いたい部分をドラッグ)します
  2. 左上の切り抜きをクリックします。

これで、右図のように使いたい部分が切り抜かれました。

画像の説明

メインの画像の編集はこれで一旦終了です。あとでこの画像は使うので自分の分かる場所に名前を付けて保存しましょう。

次は切り抜いた画像に文字を入れたりグラデーションをかけたりしていきます。この画像に文字やグラデーションを掛けたりする際にしようするソフトは「インクスケープ」というフリーソフトです。

それでは実際に「インクスケープ」を使って編集作業に進みたいと思います。


関連記事&人気記事

HP作成のヒント関連記事

スポンサーリンク