GIMP2.8切り抜き写真とテキストのヘッダー(タイトルバナー)作成方法(レイヤー利用)

■GIMP2.8で写真から人物を切り抜いてヘッダーを作ろう!

切り抜き写真とテキストのヘッダー(タイトルバナー)作成方法ブログやホームページの「顔」となるヘッダーは、オリジナリティー溢れる画像を使いたいと誰でもが思います。

お気に入りの写真を利用して、ヘッダー画像を作りましょう。

このマニュアルでは、人物を写真から切り抜いてタイトルテキストと組み合わせます。

ブログやホームページに適した写真素材があれば人物以外にも利用してください。

初心者でも人物の切り抜きが簡単にできるように、一番簡単な方法を考えました。

操作を間違った時は、エクセルやワードのように「編集」⇒「元に戻す」で簡単に戻れます^^

 

写真の用意ができたら、早速作って見ましょう!

人物写真を使いたい場合は、オススメのフリー素材屋さんがあります。
このマニュアルの作品例も、ここの素材を使っています。
⇒  写真素材 足成

 

GIMP2.8では、ボタンやロゴは簡単に出来過ぎるので、このヘッダーの作り方は、難しく感じるかもしれませんが、理屈がわかれば画像編集のバリエーションが増えて楽しくなります。

 

 

作品例のバナー構成です。

■サイズ 800 × 300 ピクセル

利用する人物写真は、あまり小さい写真を使わないでください。

写真のサイズが小さすぎる場合は写真を拡大する事になります。
拡大し過ぎると画質が悪くなるので、できるだけ避けたいですね。
例えばこんな感じです。↓↓

写真のサイズが小さすぎる場合は写真を拡大することにより画像が悪くなります

拡大し過ぎると画像が不鮮明で見た目の印象が悪いく、ブログやホームページの訪問者が「なんだ、このブログは、こんな程度か」と思われて、せっかくのオリジナルバナーが、逆効果になります。

 

■人物の写った写真から人物だけを切り抜きます。

1)「ファイル」⇒「開く/インポート」をクリックします。

背景の写真を開きます

2)パソコンのファイルから人物が写っている写真を選びます。
写真をダブルクリックすると写真が開きます。

パソコンのファイルから背景にする写真を選びます

3)写真が開きました。

写真が開きました

4)ツールボックスのファジー選択をクリックします。
※ファジー選択は、クリックしたビクセルの近似色領域を判断して選択範囲を作成するツールです。

ツールボックスのファジー選択をクリックします

5)写真の人物以外の背景をクリックします。
クリックした場所と近い色の部分が選択されます。

写真の人物意外の場所をクリックします

6)「Deletキー」を押します。
ファジー選択で選択した範囲が消えます。

ファジー選択で選択した範囲が消えます

7)人物以外の背景にクリックして「Deleteキー」で消す作業を繰り返し、人物だけを残します。
大まかに人物が残ればいいです。
下記の程度まで背景を消してください。

クリックと「Delete」キーを繰り返し、人物だけを残します

8)残った背景を消しゴムツールで消していきます。
■ツールボックスから 「消しゴム」をクリックします。
■下の消しゴムの形を「丸塗りつぶし(●)」を クリックします。
■単位は「Pixel」をクリックします。
■サイズは10.00にします。

消しゴムツールで消していきます

9)不要な背景をドラッグして全て消していきます。
※細かい部分を消す時は、画面を大きくすると作業がしやすくなります。
大きくするためには、ウインドウ下に「200%」 、「300%」と入力して倍率をあげてください。

不要な背景をドラッグして全て消していきます

10)切り抜いた人物をコピーします。
■「編集」⇒「コピー」をクリックしてください。

切り抜いた人物をコピーします

11)ヘッダーを作っていきます。
■「ファイル」⇒「新しい画像」をクリックします。

ヘッダーを作ります

12)「新しい画像を作成」ウインドウが開きます。
■ヘッダーの画像サイズを入力します。
■「OK」をクリックします。

画像サイズを入力します

13)ヘッダーの新しい画像が出来たので、人物を貼り付けます。
■「編集」⇒「貼り付け」をクリックします。

人物を貼り付けます

14)ヘッダーの中央に人物が貼り付きました。

ヘッダーの中央に人物が貼り付きました

15)人物をヘッダーの左側に移動します。
■ツールボックスの「移動」をクリックします。

人物をヘッダーの左側に移動します

16)人物写真をドラッグして位置をずらします。

人物写真をドラッグして位置をずらします

17)人物写真のサイズを小さくします。
ツールボックスの「拡大・縮小」をクリックします。

人物写真のサイズを小さくします

18)人物写真の上をクリックすると「拡大・縮小」ウインドウが開きます。
■「拡大・縮小の縦横の固定」マークになっている事を確認します。
※下図のマークと違う場合は、マークをクリックしてください。
■幅サイズを調節しながら、希望のサイズにします。
■「拡大・縮小」ウインドウの「拡大・縮小」ボタンをクリックします。

「拡大・縮小」ウインドウが開きます

19)ヘッダーのテキストを入力していきます。
■ツールボックスの「テキスト」をクリックします。
■カラーボックスの中をクリックすると「描画色の変更」ウインドウが開きます。
■カラーパレットの左上隅をクリックすると「黒」が選択できます。
■カラーパレットの下にある「現在」のボックスカラーが「黒」になっているか確認します。
■確認できたら「描画色の変更」ウインドウの「OK」をクリックします。
■ツールボックスに戻って・・・
■テキストのスタイルは、フォントのボタンをクリックしてお好みのスタイルを選びます。
■サイズを入力します。
タイトルテキストを入れていきます

20)ヘッダーにブログタイトルを入力します。

ヘッダーにブログタイトルを入力します

21)ブログタイトルのテキストの位置を移動します。
■レイヤーボックスの「レイヤーダイアログ」をクリックします。
■レイヤーボックスの「タイトルテキスト(GIMP2.8簡単レシピ)」のレイヤーをクリックして選択します。

■ツールボックスの「移動」をクリックします。
■移動対象から「レイヤー」をクリックします。
■「つかんだレイヤーまたはガイド」にチェックを入れます。

ブログタイトルのテキストの位置を移動します

22)ブログタイトルのテキストをドラッグして位置を修正します。

ドラッグして位置を修正します

23)ブログタイトルのテキストと同じ方法で、サブタイトルも入れてみました^^
サブタイトルのフォントサイズは20ピクセルにしてみました。
完成です。

サブタイトルも入れてみました

 

24)jpgで保存します。
「ファイル」⇒「エクスポート」をクリックします。

jpgで保存します

5)エクスポートのウインドウが開きます。
■パソコン内の保存したいファイルを指定して、名前欄に「●●●.jpg」と入力します。
■「エクスポート」ボタンをクリックします。
これで、JPG保存ができました。

エクスポートのウインドウが開きます

 

 関連記事

この記事を読んで当ブログが面白いと思ったら、ぜひRSSリーダーやはてブなどに登録していただいて、また遊びにきてくださいね!ツイッターでも、更新履歴を流してます。


カテゴリー: GIMP2.8(画像加工)使い方, Webお役立ち情報, その他・初心者講座   タグ: , , , , , ,   この投稿のパーマリンク


GIMP2.8切り抜き写真とテキストのヘッダー(タイトルバナー)作成方法(レイヤー利用) への1件のコメント

  1. 氷共未 より:


    はじめまして。
    ヘッダー写真も初めて作るためにGIMP2.8を初めてダウンロードしましたが
    公開レクチャーされている人のマニュアルが
    バージョンが2.8ではないようで。
    もう諦めようかと思っていたところ
    諦めきれずに探しまくってコチラに伺いました。
    他のサイトでも使い方をい紹介していましたが
    初心者にはチンプンカンプンな専門用語にテンション↓
    ですが、こちらは本当に分りやすくて助かりました!
    ありがとうございます。
    今後も再訪問して使いこなせるようになりたいものです。
    ブログにブックマーク表示させていただきました。
    もしご迷惑ならば外させて頂きます。

    大変助かりました。とりあえずヘッダーの設置しましたが
    改良の余地大ありですが、もう疲れちゃいました(笑)
    ゆっくりまた練習していこうと思ってます。

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

この記事のトラックバックURL :

期間限定3/31まで W無料プレゼント

facebook無料プレゼント