スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Gimpで壁紙講座 第4回

ほいじゃま、基礎知識をサラッと流したところで、今回作ってみた壁紙を実例として作成講座をしてみましょー。

何?基礎知識なんて何時やったかって?

やってますがな、1年前に。
・・・すみません、勿論うそです。
初歩的な内容だったので、投稿時間を弄って1年前の日付にしてました。

Gimpで壁紙講座 第1回
Gimpで壁紙講座 第2回
Gimpで壁紙講座 第3回

この1~3回に関しては、基礎知識+事前準備+壁紙作成の流れなどの解説になってます。
退屈で眠くなることは確実でしょうけど、これから壁紙を作ってみたい人はよければ見てみてください。


で。
まず今回のこの壁紙ですが

超平和バスターズ完成稿サムネ

ザックリとした構造はこんな風になってます。

あの花壁レイヤー構造

このように壁紙作成においては通常、複数の画像を組み合わせ、透明度を変えたりしながら重ね合わせて1枚の壁紙に仕上げます。
この仕組み、または重ね合わせる画像を差して『レイヤー』と呼びます。

では1枚1枚、作り方を説明していきたいと思います。


1.ベース(背景)

まずは『GNU Image Manipulation Program』のウィンドウの
『ファイル(F)』⇒『新しい画像(N)』で新しく作る画像の大きさを選択します。
キャンパスサイズの単位を『ミリメートル』から『ピクセル』に変更

画像ウィンドウ新規作成

最近はFull HDサイズの壁紙が流行ってますが、これは『1920×1080』
壁紙掲示板などでよく投稿されるサイズがそれより少し大きいWUXGA (Wide-UXGA)サイズで、これが『1920×1200』
自分のPCに合ったサイズで作るのがいいと思いますが、掲示板に投稿等もするのであればこの『1920×1200』で作るのが良いかもしれませんね。

ちなみに自分のノートPCはFHDですが、作るときは『1920×1200』で作ります。
大きい壁紙から小さい壁紙を作るのはリサイズだけで何とかなる場合が多く意外と簡単なので、とりあえず折角作るなら大きめに作るが吉かと思われます。

1

さて、キャンパスサイズを指定してベースの画像ウィンドウを作ったら、色付けをしましょう。
ツールボックスウィンドウの下、黒い四角と白い四角が重なっているようなマークがあると思います。

パレット

この上の色を『描画色』、下の色を『背景色』これらを合わせて『パレット』と呼びますが、
このどちらか一方をダブルクリックしてください。
するとカラフルなパレットが出てくると思います。

パレット大

ここで好きな色を指定して、下の方にある横向き三角ボタンを押すと、先程ダブルクリックした『描画色』または『背景色』の色が変化します。
では、その指定した色をドラッグ&ドロップでさっき作った画像ウィンドウの中に放り込んでください。
(ノ`∀´)ノ ⌒ .、●~

2

こんな感じでベース画像は出来上がりです。

2.ノイズ

では2枚目、ノイジーな画像レイヤーを作ります。
今回は1枚目のベース画像を複製し、それにノイズ処理を施します。

んじゃレイヤーの複製から。

3.jpg

はい、こんな感じで出来ましたかね?
出来たら『背景 コピー』という見た目が同じレイヤーが出来てるはずです。
出来てたら、今度は画像ウィンドウの『フィルタ(R)』⇒『ノイズ(N)』⇒『RGBノイズ』を選択。

04.jpg

こんなウィンドウが出てくるはずなので『RGB独立』というところのチェックマークを外し、
適当に下の3つのバーのどれかを掴み左右に動かします。適当なノイズの強さになったところでOK。

5.jpg

こんな感じでノイズ画像は出来上がりです。


3.周辺減光

今度は周りを暗くする画像レイヤーを作ります。
今度は前のレイヤーを複製するのではなく、新規にレイヤーを作成します。
新規作成はこんな感じで。

6.jpg

んで、こんなのが出てきたら 「透明」 が選択されていることを確認してOK。

7.jpg

したらばここをこうしましょ。(言葉で説明する気無し)

8.jpg

とまぁここまで出来たら、再び画像ウィンドウに着目。
画像ウィンドウ内でドラッグをすると、ドラッグをした部分がこんな風に楕円状に選択されます。

9.jpg

このときに気をつけることは、上下左右にある程度等間隔になるように幅をあけること。
選択をしたら、そのままの状態を保ちつつ、ウィンドウのメニューの『選択(S)』⇒『境界をぼかす』を選択。
どれぐらいぼかすかを聞かれるので、とりあえず今回は「500」ぐらいにしてOK。
その状態で再び『選択(S)』⇒『反転』を選択。
さらにその状態で『描画色』の黒を画像ウィンドウ上にドラッグ&ドロップ。

するとこんな感じになります。

10.jpg

『選択(S)』⇒『解除』で選択領域を解除。

という感じで3枚目、周辺減光のレイヤーも完成。ただ、このままでは何か…何かが違う。

そうです。レイヤーの『モード』や『不透明度』が変なのです。
なので最後にそこを編集してみましょう。

レイヤーウィンドウで、まず編集したいレイヤーをクリックし、下の図の赤丸部分を試しに変えてみてください。

11.jpg

どう変わるのか、ぶっちゃけ説明するのが面倒なのでそこは自分で確認してくださいなー。
まぁ一目見て分かるぐらいに一気に変わるので何となく分かってもらえると思います。

で、今回は


周辺減光のレイヤーを『モード:オーバーレイ』 『不透明度:100.0』 
ノイズのレイヤーを『モード:ハードライト』 『不透明度:50.0』

でやってみました。するとこんな感じ。

12.jpg

とりあえず今回はここまで。
次回はメインのキャラクターの素材化⇒レイヤー化までのお話をします。


豆知識のコーナー

レイヤーウィンドウでレイヤーが小さく表示されている横に名前が表示されていると思いますが、そこをダブルクリックするとレイヤーの名前を変更することが出来ます。
これからどんどんレイヤーが増えてくるので、区別がしやすいように出来れば名前を任意で適当なものに変えたほうが分かりやすくなりますよ。



13.jpg

Gimpで壁紙講座 第3回

では早速Gimpを起動してみましょう。
初めて起動する時やフォントやプラグインを追加で入れた時の起動は時間がかかりますが、あくまでその時だけで、次からは早くなりますのでご安心を。
起動すると二つのウィンドウが出てくると思います。

『GNU Image Manipulation Program』 と 『ツールボックス』 です。
読み込んだ画像が表示されるのが、『GNU Image Manipulation Program』。
画像を編集するためのツールボタンがいっぱい付いているのが『ツールボックス』です。

ではまず、ここから操作をしやすいようにちょっとだけボックスを弄ってみましょう。

①ツールボックス拡張
『GNU Image Manipulation Program』の下に ファイル(F) 編集(E) などとありますが、右から2番目の ウィンドウ(W) という項目の中の、ドッキング可能なダイアログ(D)
の中から、『レイヤー』 『パス』 『ツールオプション』 『パターン』 『グラデーション』 『パターン』ぐらいをひとまず選択してください。
すると、それぞれの名前がついたウィンドウがどんどんデスクトップ上に出てくると思います。
ただ、こんなにウィンドウがあったら操作が大変ですよね。
なので、これをツールボックスの中にまとめてしまいます。

ツールボックスのウィンドウの下部分をドラッグすると、ウィンドウが縦に長くなり、
『ここにドッキング可能なダイアログをドロップできます』という表示が出てくるはずです。

ここで先程出したばっかりの『レイヤー』や『パス』などのウィンドウの

レイヤーウィンドウ

この部分をマウスで掴み、ツールボックスの下の空いたところへドラッグ&ドロップしてみましょう。
ドッキングされて、一つにまとまりましたね?
では他のウィンドウも同じようにツールボックスの下へ放り込んでください。

こんな感じになったら拡張完了です。

ツールボックス拡張


②読み込みと保存
ツールボックスが拡張できたら早速画像を読み込んでみましょう。
読み込みは、読み込みたい画像を『GNU Image Manipulation Program』の中か、
『ツールボックス』のアイコンが並んでいる方へドラッグ&ドロップすることで読み込めます。

編集が終わった後の保存の際は、ホットキーの『Ctrl+S』で上書き保存するか、
『GNU Image Manipulation Program』ウィンドウの左上、ファイル(F)⇒名前をつけて保存 で行えます。


では次でいよいよ画像をちょこちょこ弄っていきたいと思います。

Gimpで壁紙講座 第2回

さて。二次壁紙作成と一言で言っても、具体的に何をするのか?何から始めればいいのか?
サラっと作成の流れを書いて見ます。
例によって分かってる人には何の意味も無い文章なので、スキップ推奨です。


①素材集め
説明は要らない所だと思いますが、念のため。
ようは壁紙に使うモチーフ俗っぽい言い方をすれば『萌え画像』を集めろというお話です。
と、こういうお話をすると「ふはは俺のフォルダが火を吹くぜ」ばりに画像を繰り出してくる人が出てくる訳ですが、まぁやっぱり弾薬には余裕があった方が良いでしょう。
また普通ならば画像掲示板やイラストレーターさんのHPなどから拾ってくる事が多いと思いますが、素材化の段階で上手く加工すれば、アニメなどのスクリーンショットやgoogleの画像検索で引っかかる程度の低画質な画像でもしっかり壁紙に使うことが出来ます。

なお、素材集めの際に作りたい壁紙を想像しながら集めると、思わぬ所から素材を集められると思います。


②素材化
これも読んで字のごとく。 様は萌え画像を壁紙に使う素材に変える作業です。
具体的には画像の切り抜き、色の補正などのレタッチが含まれます。
パスツール(photoshopではペンツールというそうですが) や、近似色による範囲指定、などを使い元画像から必要な部分だけを切り出し、色の補正で彩度や明度、コントラストなどをぐりぐり弄り、必要であれば「ぼかし」や「にじみ」、「シャープ」等を加えていきます。


③試作(やったりやらなかったりなレベル)
何かを作ろうとする時必要になるのが設計図。
壁紙を作る場合も同じことで、頭の中だけで完全に完成図をイメージしきれない場合は、多少遠回りになってでも、本制作の前に試作でイメージ画像を作ってみても良いかもしれません。
例えば背景は何色が似合うか、このキャラとこの模様は雰囲気がマッチするかどうか、この画像とこの画像の大きさの比率はどうするかなどなど。
それほど大袈裟な加工をする必要は決してありません。寧ろ本作成をしながらでも出来るかと。
適当に背景色をべた塗りで塗りつぶし、その上にザックリと5秒ぐらいで切り取った様なメインの画像を配置し、ロゴを入れるか、模様を入れるか、頭の中にあるイメージをとりあえず形に出力してみるのも良いと思います。

ま、『俺はそんな面倒なことしなくても、頭で思い描いた物を一発で再現できるぜ!』って人はやる必要はさらさらありません。
自分もこの辺はやったりやらなかったりですし。


④本作成
素材化した画像を実際に配置し、装飾を施し、自分の持てるスキルを存分に発揮して、作品を完成させます。
もうちょっと具体的に言うと、

①背景色を指定して
②その上に模様や画像を置いて
③その上にメインのキャラ画像を置き
④必要ならばその上に更に模様を配置し
⑤必要ならばその上にロゴなどを配置して出来上がり。

というのが、一般的な壁紙作成の流れかと思われます。

サラッと言いましたが、ぶっちゃけ自分が作ってる程度の壁紙は殆どの所、用意する素材の良さで決まります。
質の良い素材を用いれば、よっぽどの無茶な味付けをしない限り、それなりに質の良い壁紙が出来るのは当然のことです。
なので壁紙は素材選びと素材化がかなり重要になってくるのです。
ちなみに自分が普段作っている壁紙も、素材の準備にかなりの時間を掛け、実際の作成自体は1,2時間程度で終わる事が殆どです。


⑤チェック
さて完成したその壁紙、どこかの掲示板にアップしたりしませんか?
せっかく作ったなら、誰かに見せ、出来れば反応なんかをみたいですよね?
ただちょっとまった。その壁紙、ホントに完成ですか?

どこか、抜け落ちてたりしませんか?
位置が微妙にずれてたりしませんか?
何かの消し忘れのような、変な模様が出てませんか?
ロゴなどに使ったスペルがタイプミスしてたりしないですか?


…この間違いが後で見つかると物凄いガッカリ感が湧いてきます。
出来れば完成した作品は投稿前に2度3度と確認された方が良いかと思います。

かくいう自分もこの手の失敗を何回したか分からないです。


という訳で大まかな流れでしたー。
で、次は起動編です。
次もまた基本的なことしかしないので、分かる人はすっ飛ばしてください。

Gimpで壁紙講座 第1回

というわけで壁紙講座の始まり始まり。

といっても、ソフトも使い方も分からずにいきなり実践も何も無いので、
基本的なところから入っていきたいと思います。

ではまず最低限必要なモノと知識を紹介します。
まぁ何は無くともソフトが無ければ始まりませんよね。

というわけでソフトのインストールはこちらから。

GIMP2を使おう
インストールはこちらのページのダウンロードというところからOSにあわせて拾ってきてください。

座学① ホットキー

ホットキーというのは、保存やコピーなどの基本操作してくれるキーボードのキー(またはキーの組み合わせ)のことを言います。
以下のホットキーはGimpだけでなく殆どのソフトで使える便利なホットキーです。
是非これを機会に覚えましょう。

Ctrl + A …全て選択
Ctrl + Z …一つ前(の作業)に戻る
Ctrl + X …切り取り
Ctrl + C …コピー
Ctrl + V …貼り付け
Ctrl + S …上書き保存
Ctrl + Y …(Ctrl + Zで戻った作業)の一つ次に進む


一度に覚えるのは難しいかもしれませんが、
とりあえず【Ctrl + Z or X or C or V】だけはキーボードの配置通りで割と簡単に覚えられると思います。
特にこの四つを重点的に使いますし。

自分の場合、基本的に操作が殆どマウスなので右手がマウス、空いた左手はホットキーに添えています。
小指でCtrl、薬指がShift(機能によっては使うこともあります)、中指と人差しでZ,X,C,Vキーをいつでも押せるように…ってな感じ。

ぶっちゃけコレを使うか使わないかで作業効率が段違いに変化してきます。
これからある程度真剣に始めたいと思っている人は覚えおいて損は無いと思います。


座学② ファイルの形式と違い


ファイル名の最後についていたりする<.jpg><.png><.bmp>等のことを拡張子と呼びますが、これがファイル形式の違いを表しています。

以下は、そのファイル形式の特徴を纏めたものです。
覚える必要はありませんが、知っていればいざ作った画像を保存する再に便利ではあります。
とりあえず、『ふーん』程度の扱いでもいいので目を通しておきましょう。


.jpg(.jpegや.JPGも同じ)<ジェーペグ>
おそらくは最も一般的な画像圧縮形式。
デジカメなどで撮影された画像などはほぼこの形式で保存されています。
容量の小ささのわりに綺麗な画質を保てるのがいいところ。
その反面、特定の色(赤や黒)などの圧縮に弱く、その部分はどうしても色があせたり、ボケたりしてしまうのが難点。

.bmp(.BMPも同じ)<ビットマップ>
いわゆる『無圧縮』の状態で保存する画像形式。
圧縮をしないので画質の劣化はしないかわりにとてつもなく容量が大きくなるのが難点。
かなり綺麗な(低圧縮な)jpg画像の5~6倍のファイルサイズになります。
画質を劣化させたくない、素材化された画像を保存する際におススメ。

.png(.PNG)<ピング/ピーエヌジー>
透過情報を持ち、フルカラー保存も出来る、最も一般的な画像形式。
圧縮はするが、bmp並みの高画質なので容量も結構大きくなる。
上に書いたとおり、透過情報を持てるというのが最大の特徴で、画像加工の際、不要な部分を消す等をして透明(半透明)にした状態を保存できるので、レイヤー加工等をするときに無茶苦茶重宝。

.gif(.GIF)<ジフ/ギフ>
アイコンなどの作成に向いている、インデックスカラーのみ対応の画像形式。
インデックスカラーというのは一般的な写真画像などに使われているフルカラー(1600万色以上)から最大256色を任意で選び出した色素数のこと。
複数の画像を連続で描写し、アニメーションのように動かすことの出来る『gifアニメ』タイプで保存することも出来る。
また、色素数は少ないながらも透過情報を持つことが出来る。
(半透明は不可能。完璧な無色透明のみ。)

.psd(.PSD)<そのまんま>
レイヤー形式、レイヤー画像の順序、位置、透過度などを丸々そのままの状態で保存できる、いわゆる一時保存ファイル。
作業を中断するときなどに保存しておくと次開くときに便利。
元々はAdobe社のPhotoshop専用のファイルとして生まれたが、Gimpでは読み込むことが出来る。
ただ、残念なことにこの形式で保存すると文字情報が消失するため、入力したロゴが画像データになってしまい、再編集などが難しくなる。
photoshopユーザーに途中データを渡すときとかに便利かも。

.xcf<そのまんま>
Gimp専用の一時保存ファイル。
photoshopなどでの互換性は無いが、文字データなども情報を保持したまま保存できる。
Gimpでしか編集しないのであれば、無理にpsdデータでなくこちらで保存した方いいと思います。


というわけで、長くなってしまいましたが座学はお終~い。
次回はとりあえずソフトの基本操作をご紹介。
分かる人は読み飛ばしてもおkです。


この壁紙講座はかつてyahooブログをやっていたときに載せていたものを、一部再編集しなおして載せているものです。
書いたのが5年前なので、色々アレな所もあるかもしれませんが生暖かい目でスルーしていただけると幸いです。
・・・つーかホントに5年前なのか。時間が経つのは恐ろしいな、オイ。
プロフィール

blacktomcat1927

Author:blacktomcat1927
ライトノベルと自転車が大好きな電器屋販売員。
Galaxy TabとiPad2で自炊した本を読んだりもしてます。




working!!-ugo2.gif

アニメ先行放送が終わって、後は10月の本放送を待つばかり。
またぽぷらが元気に動く姿が観れるのかー。うれしいなぁ。

最新記事
月別アーカイブ
カテゴリ
リンク
カレンダー
03 | 2017/04 | 05
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 - - - - - -
検索フォーム
最新コメント
最新トラックバック
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。