インクスケープを使ってのTOP画像の作り方②

それでは、インクスケープを使ってTOP画像を作っていきたいと思います。まずはホームページのサイズに合うように画像サイズを決めましょう。

インクスケープ等のフリーソフトのダウンロードはこちらから出来ます。


スポンサーリンク


画像の説明

  1. 右上のスパナみたいなボタンを選択するとプロパティの編集画面になります。
    ここで画像の大きさや縦や横といった設定も出来ます。
  1. 次に画像のサイズを決めるのですが、いつも私はTOP画像を作る時は大体1200×150前後で設定しています。このあたりは調度良いサイズをご自身で探してみてください。
    ※本当は正確なサイズを設定した方がよいのですが、私は知らないので大体このくらいの画像サイズにします・・・

これでベースとなる画像の下地が出来ました。


インクスケープに画像を取り込む

画像の説明



次は先ほど加工した画像(手順①で加工した画像)を取り込んでいきます。

  1. 左上のファイル→インポートを選択します。
  2. 先ほど加工した画像を選んで画像の埋め込みを選択します。


画像の説明

取り込んだ画像を先ほどの下地に合わせて縮小しましょう。取り込んだ画像の四隅にに矢印が出ているのでこれを斜め方向にずらすと縮小出来ます。



この時、出来あがっている画像を見ると分かりますが写真は左よりになっていると思います。なぜ真中ではないかは後で分かると思うので取りあえず左寄りに画像を配置します。




画像の説明

次は左側の四角を作るアイコンを選択し右側の空いている箇所に長方形を作ります。この長方形の部分に文字を入れていきます。


先ほど画像は左寄りに配置したのは、右側に文字を入れるためです。画像の上でも文字を入れる事は出来ますが、あまり画像の上に文字を入れると読みづらい文字になる恐れがあるので、初めのうちは文字下は画像無しの方が良いと思います。画像編集など慣れてきてから色々試してみてください。


グラデーションで境目を消してしまえ

画像の説明

このままですと、画像と長方形の境目がはっきりし過ぎて見栄えが悪いので境目が分からない様に加工していきます。


下から3番目のグリーンのアイコン(画像にグラデーションを掛けてくれる)を選択し、先ほどの画像の2枚とも重なり合っている部分から少し左側にずらして選択したまま左側にドラックします(マウスの左ボタンを押したまま左に移動)すると先ほどの境目が分からない様にグラデーションが掛かります。



この時画像が重なり合っていない部分からグラデーションを掛けると画像と画像の境目が分かってしまいます。色々試しながらいじると分かるようになるので少しづつ焦らず作って行きましょう。


次は画像に文字を入れていきたいと思います。

関連記事&人気記事

HP作成のヒント関連記事

スポンサーリンク