多様な機能の画像編集ソフト｢GIMP(Ver 2.10.6)｣を使ってみる(16)

オープンソースで無料で使える画像編集ソフト｢GIMP(the GNU Image Manipulation Program、Ver 2.10.6)｣を使って、画像をWebページなどで活用するという操作の続きです。

前回と同じシャレたタイトル画像を作りますが、今回は白地の背景にする所を透明の背景に変え、手法も変えます。

今回もこちらの画像をベースにします。利用する画像はこちらです。

先ず「矩形選択」ツールで透明とすべきエリアの内側を選択します(こちら)。

内側の枠と目的とする透明化領域の間は、グラデーションを使う想定です。

内側の枠内を透明化する為「アルファチャンネルの追加」状態を確認した上で(こちら)、メニュー｢編集｣→｢消去｣を用いて実際に透明化します(こちら)。

そして「範囲を解除」します。

メニュー｢ツール」→｢描画ツール｣→｢Gradient｣でグラデーションができるようにし、グラデーションの形態を｢Default｣、形状を「線形」にします(こちら)。

前回と同様に透明化の範囲を限界範囲として設定しておくと良いでしょう。

メニュー「レイヤー」→「レイヤーマスク」→「レイヤーマスクの追加」で、「レイヤーマスクの初期化方法」として「完全不透明(白)」を選択します(こちら)。

最初に「矩形選択」ツールで透明化した内側から外に向かってドラッグしグラデーションでの透明化を行います(こちら)。

メニュー「レイヤー」→「レイヤーマスク」→「レイヤーマスクの適用」で処理を確定します(こちら)。

残りの部分についても、「レイヤーマスクの追加」、透明化した内側から外に向かってドラッグ、「レイヤーマスクの適用」の手順を繰り返します。結果がこちら。

更に、タイトルを付加したり、左側の不要部分を切り捨てます(こちら)。

作成すべき領域が複雑なので複数回に分けましたが、簡略にできる場合にはこちらの様な事もできます。

結果の画像がこちら。

女性の画像はこちらから借用しています。

多様な機能の画像編集ソフト｢GIMP(Ver 2.10.6)｣を使ってみる(15)

オープンソースで無料で使える画像編集ソフト｢GIMP(the GNU Image Manipulation Program、Ver 2.10.6)｣を使って、画像をWebページなどで活用するという操作の続きです。

今回はこちらの画像をベースにチョット洒落たタイトル画像を作るのを目標とします。

上部にタイトル、中央から下半分の右80%ぐらいを背景色の白色にしてページの概要ぐらいを掲載できるようにします(但し、概要は別途HTMLで記述する事を想定します)。

普通に写真を使う時は色について余り気にする事はありませんが、画像の明度については必要により調整します(こちら)。

画像の木の幹の左にある空間を「切り抜き」ツールで削除します(こちら)。

｢矩形選択｣ツールを選択し、詳細指定のできる｢ツールオプション」を表示し、「境界をぼかす」と｢角を丸める｣にチェックを入れ、各々半径を指定します(こちら)。

「モード」が「選択範囲を新規作成または置き換え・・・」になっている事を確認して、中央から下半分の右80%ぐらいを背景色の白色にする範囲を概略レベルで指定します(こちら)。

｢モード」を｢選択範囲に加え・・・｣で選択範囲を広げたり(こちら)、逆に「選択範囲を引き・・・」を使って縮小し(こちら)、桜の咲いている部分を表示するように調整します(こちら)。

「楕円選択」ツールに変えて、引き続き選択範囲の増減ができます。但し、「モード」がリセットされたり、半径が｢矩形選択｣と違っていたりしますので、しっかりセットしてから範囲指定します。

ショートカットキー操作として、Shiftキーを押下しながら範囲指定すると｢選択範囲に加え・・・｣る事になり、Ctrlキーを押下しながら｣範囲指定すると「選択範囲を引き・・・」となります。

範囲の選択ができたら、｢編集｣→「背景色で塗りつぶす」で白色化します(こちら)。

別途新しい画像で、透明な背景の下でタイトル文字を作成・保存しておき(こちら)、レイヤとして開きます(こちら)。

｢画像」→｢画像の統合」をして、エクスポートしたファイルがこちら。

多様な機能の画像編集ソフト｢GIMP(Ver 2.10.6)｣を使ってみる(14)

オープンソースで無料で使える画像編集ソフト｢GIMP(the GNU Image Manipulation Program、Ver 2.10.6)｣を使って、画像をWebページなどで活用するという操作の前回からの続きです。

前回はこちらまで作成し、イラストを付加する予定にしていました。

イラストをレイヤー上に画像として乗せる為、新しいレイヤーを作ります(こちら)。

イラストをファイルから読み込み、新しいレイヤーに画像として張り込みます(こちら)。

天守閣の背面にバランスを取るように縮小・移動し、「拡大・縮小」アイコンをクリックます(こちら)。

画像はフローティングレイヤ状態になっているので、右下の錨のアイコンで「フローティングレイヤーを固定」します(こちら)。

武将のイラストが薄いのは、新しいレイヤーを作る時に不透明度を100%にしていなかった為で、レイヤ―の一覧にある対応レイヤに対して右クリックメニューの「レイヤー名の変更」により変更します(こちら)。

こちらでレイヤの表示順序が期待通りでない場合、レイヤ―の一覧で順序を変更します(結果がこちら)。

メニュー「画像」→「画像の統合」とする(こちら)とこちらになります。

ステッカーとして(兜の御印は違うと思いますが)如何でしょうか。

武将のイラスト画像はこちらから借用しています。

多様な機能の画像編集ソフト｢GIMP(Ver 2.10.6)｣を使ってみる(13)

オープンソースで無料で使える画像編集ソフト｢GIMP(the GNU Image Manipulation Program、Ver 2.10.6)｣を使って、画像をWebページなどで活用するという操作の前回からの続きです。

前回まででこちらの円形の切り抜きができました。これは一旦ファイルとして保存しておきます。

透明な新しい画像を用意し(こちら)、保存していた円形の切り抜き画像をレイヤーとして読みます(こちら)。

「楕円選択」ツールで(Shiftキーを押下しながら)真円を、城の切り抜き画像より少し大きめのサイズで描き(こちら)、描画色を変更して内部を｢塗りつぶし｣ます(こちら)。

メニュー「選択」→｢選択範囲の縮小を使って、内側に小さくします(こちら)。

その内側を「消去」します(こちら)。

イラストを付加したいのですが、少し長くなるので次回にします。

多様な機能の画像編集ソフト｢GIMP(Ver 2.10.6)｣を使ってみる(12)

オープンソースで無料で使える画像編集ソフト｢GIMP(the GNU Image Manipulation Program、Ver 2.10.6)｣を使って、画像をWebページなどで活用するという操作の前回からの続きです。

天守閣を円形に切り出した所(こちら)から今回は開始です。

「空」の部分を透明にする為、メニュー「ツール」→「選択ツール」→｢ファジー選択｣を選択します(こちら)。

「空」の部分をクリックして切り取り枠を作ります(こちら)。

不十分な部分ではそのポイントをShiftキーを押下しながらクリックして選択部分を拡大します。しかし、画像を拡大して境界部分を確認すると削除対象にしてはいけない部分があります(こちら)。

ツールボックスの下にある「デバイスの状態」アイコンを右クリックして(こちら)、｢ツールオプション｣を選択・表示ます(こちら)。

しきい値を下げて再度｢ファジー選択｣を実行します。「12」まで下げた結果がこちら。

メニュー「レイヤー」→「透明部分」→｢アルファチャンネルを追加｣になっている事を確認します(こちら)。

メニュー｢編集｣→｢消去｣(又はDeleteキー)で空白領域を作ります(こちら)。

桜の部分も取り除きますが、ここは「描画ツール」の「消しゴム」を使って(こちら。｢選択を解除｣してから)透明域にします(こちら)。

多様な機能の画像編集ソフト｢GIMP(Ver 2.10.6)｣を使ってみる(11)

オープンソースで無料で使える画像編集ソフト｢GIMP(the GNU Image Manipulation Program、Ver 2.10.6)｣を、Webページなどで画像活用という続きです。

前回と同様にこちらの写真をベースに操作します。

今回は天守閣の部分だけ円形に切り抜きをします。メニュー「ツール」→｢選択ツール」→「楕円選択」を選択し、一角にクリックした後Shiftキーを押下しながらもう一角までドラッグすると、真円の切り取り枠を作る事ができます。しかし、残したいのは天守閣部分なので、メニュー「選択」→｢選択範囲の反転｣としておきます(こちら)。

更にメニュー「レイヤー」→｢透明部分｣→｢アルファチャンネルの追加｣を選んでおきます(こちら)。

真円以外の部分をメニュー｢編集｣→「消去」(又はDeleteキー)を押下すると、こちらの様に背景が透明状態になります。

メニュー「ツール」→「変形ツール」→「切り抜き」で余分な部分を切り取って(こちら)、前回に作った画像へ張り合わせた所がこちらです。

天守閣の部分を拡大して強調する・・・といった所です。

範囲を指定して背景を透明にする事は次回にも続きます。

多様な機能の画像編集ソフト｢GIMP(Ver 2.10.6)｣を使ってみる(10)

今回から画像をWebページなどで活用するという点から、オープンソースで無料で使える画像編集ソフト｢GIMP(the GNU Image Manipulation Program、Ver 2.10.6)｣を使ってみます。

こちらの写真をベースに操作します。

良く使う「拡大・縮小」ですが縦横比を変えずに処理するのは、メニュー「画像」→「画像の拡大・縮小」で容易にできます(こちら。結果がこちら)。

しかし、縦横比16：9の写真を4：3にするのは大変です。そこで｢GIMP(Ver 2.10.6)｣投稿の(8)で使ったメニュー「ツール」→「変形ツール」→「拡大・縮小」を利用します。目的とするサイズの新規ファイルを作り(こちら)、元画像をレイヤーとして追加します(こちら)。

「拡大・縮小」ツールで、縦横比を変えないようにShiftキーを押下しながら、写真内容を考慮して"□"を内側の目的サイズ枠に近づけます(こちら)。

「拡大・縮小」をクリックすれば、結果がこちら。

多様な機能の画像編集ソフト｢GIMP(Ver 2.10.6)｣を使ってみる(9)

オープンソースで無料で使える画像編集ソフト｢GIMP(the GNU Image Manipulation Program、Ver 2.10.6)｣について、前回はここまででしたが、その「変形ツール」の続きです。

｢遠近法｣ツールを使った結果、写真の上部が斜めになったので、水平になるように上部をカットします。これにはメニュー｢レイヤー」➤｢レイヤーサイズの変更｣を使います(こちら)。写真に写るもの(景色)は拡大 or 縮小しない事に注意してください。

こちらの「レイヤーサイズの変更」ウィンドウで、「レイヤーサイズ」の高さを低くし(こちら)、「オフセット」で切り取り枠を下げる事で上辺が水平になるようにします(こちら)。

結果がこちら。

写真の上に大きなスペースが取れましたので、2枚の写真をレイヤーとして読み込み、(各写真のレイヤーを選択しながら)メニュー｢Filters｣→｢Light and Shadow｣→｢Drop Shadow(legacy)｣で影を付けます(こちら)。

最終結果はこちらになりました。

この画像はpdf形式ファイルとして出力できます(結果がこちら)。

尚、イラスト画像はこちらから借用しています。また、｢伏見稲荷大社｣の解説文はWikipediaの内容を一部編集して利用しています。

多様な機能の画像編集ソフト｢GIMP(Ver 2.10.6)｣を使ってみる(8)

オープンソースで無料で使える画像編集ソフト｢GIMP(the GNU Image Manipulation Program、Ver 2.10.6)｣の「描画ツール」については一旦終えて、今回からメニュー「ツール」→「変形ツール」を使ってみます(こちら)。

例題としては前回までの観光カタログを引き継ぎます(こちら)。

中央にある写真の右側にも鳥居が写っているのですが、画像を取り込んだ時点では特に何ら操作もしていないので中央部分だけを利用しています。｢移動｣ツールを使って右側が見えるようにします(こちら)。

今度は逆に左側に写っていた部分が見えなくなりますので、写真の全体縮小をします。メニュー「ツール」→「変形ツール」→「拡大・縮小」を使います(こちら)。

その際は、縦横比が変わらないように指定し、境界上の□を操作して左側で必要な部分がカタログの背景領域に入るようにします(こちら)。

Shiftキーを押下しながらドラッグしても、縦横比を変えないで拡大・縮小ができます。

「拡大・縮小」ボタンを押下した所がこちら。

次に写真を少し奥行きを増やすような見せ方をする為、メニュー「ツール」→「変形ツール」→「遠近法」を使います(こちら)。

角にある◇を使って変形します(こちら)。

最後に｢Tranform｣を押下した結果がこちら。

処理はまだ途中ですが、この先も少し長いので続きは次回にします。

尚、イラスト画像はこちらから借用しています。また、｢伏見稲荷大社｣の解説文はWikipediaの内容を一部編集して利用しています。

多様な機能の画像編集ソフト｢GIMP(Ver 2.10.6)｣を使ってみる(7)

オープンソースで無料で使える画像編集ソフト｢GIMP(the GNU Image Manipulation Program、Ver 2.10.6)｣について、前回の続きでこちらから始めます。

描画はメニュー「ツール」→「描画ツール」に機能メニューがあります(こちら)。アプリ画面の左上にあるツールボックスのアイコンで選択する事もできます。

｢鉛筆で描画｣ツールはフリーハンドで描画できますが、Shiftキーを押しながら2点をクリックすると(こちら)、その間の直線を引く事ができます(こちら)。

Shiftキーを押しながらクリックする動作は継続するので(こちら)、四角形(長方形)を描く事ができます(こちら)。

さて、テキスト入力では、日本語を指定にサイズで入力するには工夫が必要と予告していました。こちらは上部に40pxで日本語入力した例ですが、下部の空白領域では20pxで半角文字を入れた状態です。

テキストボックスの周囲線をクリックして編集モードにした上で、こちらの様に入力済みの半角文字に挟まれる形で日本語を入力します(コピー&ペーストも可能)。

必要なテキストを入力が終わったら、当初の半角文字を削除してテキスト編集の完了です(こちら)。

尚、イラスト画像はこちらから借用しています。また、｢伏見稲荷大社｣の解説文はWikipediaの内容を一部編集して利用しています。