GIMP2の使い方

ヒゲ飾りがおしゃれなセリフ体のフリーFONT。無料でダウンロード出来て商用OK。

2012-03-01T22:00:00.000+09:00

フリーのセリフ体フォントを紹介します。セリフ体とは、文字の端にヒゲのような形の飾りが付いている書体です。セリフ体を使えば品のある雰囲気が出るので、クラッシックでキレイなデザインにぴったりです。

フォントごとに利用条件を書いていますが、規約は変更している場合もありますので使う前に各素材の配布ページで確認しましょう。また、フォントのインストール方法については、「GIMPにフォントをインストールする」の記事で紹介しています。

Bree Serif
【利用条件】個人OK / 商用OK
四角いセリフと柔らかいラインが特徴のフォントです。太さもやや太字で読みやすいです。とってもオシャレなフォント。

Carton
【利用条件】個人OK / 商用OK
インパクトのある太字のセリフフォントです。「R」の曲線や「T」の斜めにカットされた部分など、所々にこだわりを感じます。カンパウェアとなっているので、入力ボックスに好きな金額を入れてDLしましょう。0円でもOK。

Lorena
【利用条件】個人OK / 商用OK
こちらは細字で、クネっと折り曲げたようなシルエットが特徴的なフォントです。セリフの部分が矢印のようになっているのも面白いです。レトロな雰囲気に合いそう。

Corki
【利用条件】個人OK / 商用OK
縦長で細身のセリフフォントです。ヒゲの形にこだわりがあるようで、いくつかバリエーションがあります。使うには大文字で入力しましょう。この記事のサムネイルで使っているのもこのフォント。

Hagin
【利用条件】個人OK / 商用OK
こちらはカチっとした力強い印象のセリフフォントです。お酒のラベルなんかに使われていそうです。細字版も用意されているのも嬉しいです。

アートなイラストや写真いろいろ。デザインの刺激になる画像が見つかるサイト「Curioos」

2012-02-26T21:16:00.000+09:00

色々なデジタルアートを集めて公開しているサイトCurioosを紹介します。英語サイトですが、作品の種類も様々で眺めているだけでもとっても楽しめます。絵として販売しているものもあるようです。

デジタルアートいろいろ。

シンプルな構図のフラミンゴのイラスト。全体的にクッキリした線と柔らかい色使いがキレイです。

町の写真を少しずつずらしながら重ねた作品。ありふれた風景もちょっと違った雰囲気に。

こちらは某キャラクターを細かい破片の集合で作った作品。これだけでも分かるのがすごいです。

日傘をさして優雅にベンチに座っている女の人の顔には覆面が。ユーモアのある作品です。

もくもくと煙を出す煙突を背景に寝そべっている女性の体の中からは工業機械の歯車が。シュールリアリズムのような作品です。

ブタの貯金箱を割ってみると中から出てきたのは小さな子ブタ達。かわいくてユニークな作品です。

サイトはこちら

他にもハイクオリティな作品がかなり大量に公開されています。お気に入りの作品を探してみては。
Curioos | Digital Art Publishing House

アート性の高いグラフィック系フリーフォントいろいろ。無料でダウンロード出来て商用可。

2012-02-23T22:15:00.000+09:00

グラフィックデザインやタイポグラフィーにぴったりのアートなフリーフォントを紹介します。高品質でザインの主役になれそうなものばかり。大きめのサイズで使いたいフォントです。

Mosaic Leaf
【利用条件】個人OK / 商用OK
「Mosaic Leaf」という名前のとおり、大小の葉を敷き詰めたようなデザインのフォントです。キレイでエレガントな雰囲気のデザインに合いそうです。

Adamas Regular
【利用条件】個人OK / 商用OK
3Dポリゴンのワイヤーフレームのような、ゴツゴツとした細い線で作られたフォントです。黒い背景に使うだけでもカッコイイし、サンプル画像のようにレトロな背景に使っても意外とマッチします。

SS_Adec2.0
【利用条件】個人OK / 商用OK
文字のアウトラインを細い線で作ったフォントです。ラインのデザインは3種類あります。レトロやアンティークなデザインにぴったり。

Homestead
【利用条件】個人OK / 商用OK
四角いシルエットと、細かい斜線で出来た部分が特徴のフォントです。太字で角ばったデザインですが、斜線部分のおかげで柔らかい雰囲気になっています。レトロで温かみのあるデザインにおすすめ。こちらはカンパウェアとなっているので、サイト右側の入力欄に好きな金額を入れるとダウンロード出来ます。0円でもOK。

FortySecondStreet
【利用条件】個人OK / 商用OK
クッキリとした太字の内側に細いラインをデザインしたフォントです。オシャレで洗練されたデザインにぴったりです。

ドットやサークルをモチーフにしたフリーパターン素材いろいろ。無料で使えて商用可。

2012-02-22T22:26:00.000+09:00

ドットや円を使ったフリーのパターン素材を紹介します。シンプルなモチーフですが、大きさで変化を出したり汚しをかけたり色々なデザインがあります。背景なんかにサクっと追加すればポップな感じが出せそうです。

ここで紹介するパターンはPhotoshop用のものを含みます。PhotoshopパターンはGIMP用に変換して使いましょう。変換の仕方については「PhotoshopパターンをGIMPで使えるようにする」で紹介しています。また、パターンの使い方については「塗りつぶしツールの使い方」を参照下さい。

Grungy Circles Photoshop Patterns
【ファイルの種類】Photoshopパターン / JPEG
【利用条件】個人OK / 商用OK
フチをつけた大き目の水玉模様のパターンです。汚しをかけたデザインで味のあるアンティークな雰囲気。

Grungy Polka Dots Photoshop Patterns
【ファイルの種類】Photoshopパターン
【利用条件】個人OK / 商用OK
こちらも汚しをかけたデザインの水玉模様です。カラフルで細かめのドットで背景なんかに使いやすそうです。

Grungy Polkadots Patterns Part 2
【ファイルの種類】Photoshopパターン / JPEG【利用条件】個人OK / 商用OK
こちらは大小の水玉を組み合わせたパターンです。色使いが若干薄めでやわらかい雰囲気。この記事のサムネイルで使っているのもこのパターンセットです。ちなみにフォントはこちらの記事の最後で紹介した「Sullivan」です。

Free seamless patterns Pink Polka Dots
【ファイルの種類】GIF
【利用条件】個人OK / 商用OK
ピンク色の背景に色々なドットを敷き詰めたパターンです。かわいい雰囲気のデザインにどうぞ。

Pink Bubbles
【ファイルの種類】JPG
【利用条件】個人OK / 商用OK
こちらもピンクを基調としたカワイイ雰囲気のパターンです。色合いが統一されているので使いやすそうです。

※この記事で紹介している素材は全て個人・商用問わずフリーで使えるものですが、規約は変更している場合もありますので利用規約を確認してから使いましょう。

オシャレな飾り文字のフリーフォントいろいろ。無料でダウンロード出来て商用利用もOK。

2012-02-20T22:36:00.002+09:00

飾り文字のフリーフォントを紹介します。細かく書き込んだ文字を使いたいとき、自分で作るのは中々大変ですが、フリーフォントを使えば文字を入力するだけ。フォント選びでデザイン全体の質もぐっと上がります。

Royal font
【利用条件】個人OK / 商用OK
細かい所までしっかり書き込まれたフォントです。クラシックで高貴な雰囲気。飾り文字を使うには大文字で入力しましょう。

Andrade
【利用条件】個人OK / 商用OK
大文字は細かい飾り線の付いた書体、小文字はヒゲのような飾りの付いた書体になります。どちらも繊細で品のある雰囲気です。

ZnikomitNo24
【利用条件】個人OK / 商用OK
細身のラインに所々丸みのある飾りの付いたフォントです。かわいいデザインに合いそうです。

Teléfono
【利用条件】個人OK / 商用OK
途切れ途切れのラインで構成されたオシャレなフォントです。この記事のサムネイルにも使っています。ダウンロードリンクは少し分かりづらいですが、フォント名の下の説明文の最後の「AQUI」のリンクです。

Sullivan
【利用条件】個人OK / 商用OK
イラスト風の斜線の影のついた立体的なフォントです。ポップな雰囲気やレトロなデザインに合いそうです。こちらはカンパウェアとなっているので、サイト右側の入力欄に好きな金額を入れてダウンロードしましょう。0円でもOKです。

テキストとグラデーションを使ったオシャレ系チュートリアル。カラフルで綺麗な画像を作る。

2012-02-17T22:27:00.000+09:00

写真から、テキストを使ったカラフルな画像を作る方法を紹介します。ファッションやコスメ系のポスターのような雰囲気です。テキストツールやレイヤーモードなどの機能を使って作っていきます。

credit : beautiful faces / tommerton2010

画像加工のおおまかな流れ

先におおまかな作業の流れを書いておきます。詳しい説明は次の「画像加工の手順」からです。
記事の最後で完成版の作業ファイルもダウンロード頂けます。

【step-1】ベースのテキストを作成する。
【step-2】元画像をモノクロ化して重ねる。
【step-3】グラデーションを付ける。

画像加工の手順

練習用のxcfファイルを用意してみました。このファイルを元に説明しますので、同じ画像で練習したい方は以下よりダウンロードしてみて下さい。

[Download] sample-text-photo.zip / 612KB

【step-1】ベースのテキストを作成する。

sample-text-photo.xcfを開くと、「背景」と「元画像」の2つのレイヤーが入っています。まずはベースとなるテキストから作っていくので、見やすいように「元画像」レイヤーを非表示にしましょう。目のアイコンをクリックすればOKです。

次に、ツールボックスから「テキスト」ツールを選んで、ツールオプションで「フォント」の項目を「Times New Roman, Bold」、「大きさ」を「12」、「色」を「黒（HTML表記で000000）」にしましょう。そして、画面を少しはみ出すくらいに大きくテキストエリアを作り、「text photo 」と入力しましょう。一度入力したらコピペしてテキストエリアいっぱいに繰り返します。単語の後にスペースを入れているので、テキストエリアの端で自動で改行してくれています。

次は、もう少し大きいテキストをさらに重ねていきます。まず、テキストツールを選んだまま、さっきより一回り大きなテキストエリアを作ります。そして、ツールオプションの「大きさ」の項目を「30」にして、今度は大文字で「TEXT PHOTO 」と入力して、同じようにコピペで画面いっぱいに繰り返しましょう。画像の範囲が狭くてやりにくいときは、「Ctrl + マウスホイール」で拡大率を下げると作業しやすいです。

これでテキストを敷き詰めた背景が出来ました。これでベースのテキストを作る工程は完了です。拡大率を変えて作業していた場合は「100%」に戻しておきましょう。

【step-2】元画像をモノクロ化して重ねる。

次は元画像を加工します。まずは「元画像」レイヤーの順番を一番上にドラッグして持ってきて、目のアイコンをクリックして表示状態に戻しましょう。

そして、「元画像」レイヤーを選択した状態で、画像ウインドウの上のメニューから「色」→「脱色」をクリックしましょう。設定ウインドウが出てくるので、「明度」にチェックを入れて「OK」ボタンで適用しましょう。これで画像がモノクロになります。

次に、メニューから「色」→「レベル」をクリックしましょう。設定ウインドウが出てくるので「入力レベル」の項目を数値で「60」「0.6」「210」に設定して「OK」ボタンで適用しましょう。全体的にコントラストを強くして、特に薄いグレーの部分が真っ白になるように調整しています。

色の調整が出来たら、「元画像」レイヤーのモードを「スクリーン」にしましょう。画像が重なって、画像の暗い部分にだけテキストを敷き詰めたような効果が出ます。ただ、このままでは顔や花などのクッキリ見せたい部分も見えづらくなっているので、さらに加工していきます。

次に、このままでは顔や花などのクッキリ見せたい部分も見えづらくなっているので調整していきます。

まずは、「元画像」レイヤーを選択した状態で、
【A】「レイヤーの複製」ボタンでレイヤーをコピーしましょう。
【B】コピーしたレイヤーの名前は「顔・花」としておきます。
【C】そして「顔・花」レイヤーのモードは「標準」に戻しておきましょう。

次は、「顔・花」レイヤーの不要な部分を白く塗りつぶしていきます。「ブラシ」ツールを選んで、「描画色」を「白（HTML表記で「ffffff」）」にしましょう。そして、ツールオプションで「ブラシ」の項目を「Circle Fuzzy (19)」、「拡大・縮小」を「7.00」にしましょう。

ぼかしのかかった、なるべく大きなブラシを使うことで、塗った色の境目が馴染みやすいようにしています。この設定で、目・口・花以外の部分を塗りつぶしていきましょう。出来上がりは下の画像のような感じです。

塗り終わったら、「顔・花」レイヤーの「モード」を「乗算」に、「不透明度」を「80」にしましょう。黒い部分だけが重なって、画像のポイントがクッキリしました。

【step-3】グラデーションを付ける。

最後にグラデーションを付けていきましょう。まずは「新規レイヤー」ボタンをクリックして、新しいレイヤーを追加しましょう。名前は「グラデーション」として、順番は一番上になるようにしておきます。

次に、「ブレンド」ツールを選び、描画色を「青（000fd4）」、背景色を「黄色（fffd42）」にしましょう。そしてツールオプションで「グラデーション」の項目を「描画色から背景色（HSV反時計回り）」に、「形状」の項目を「線形」に設定しましょう。設定が出来たら画像の左上から右下に向かってドラッグしてグラデーションをつけましょう。最初が青で最後が黄色の虹色のグラデーションがつきます。

最後に、「グラデーション」レイヤーのモードを「スクリーン」にしましょう。色が重なって画像全体にグラデーションがつきます。

お疲れ様です。これで全ての工程は完了です。

完成！

加工前

完成版は以下からダウンロード出来ます。参考にしてみたい方がいたらご自由にお使い下さい。
[Download] sample-text-photo-complete.zip / 558KB

無料でマンガ用素材をダウンロード出来る「マンガ素材辞典β」。商用利用もOK。

2012-02-14T22:24:00.000+09:00

吹き出しや効果線からキャラクターイラストまで揃った、マンガ用素材配布サイトを紹介します。素材はかなり大きなサイズになっているので印刷用でも使えます。

カテゴリー別に色々な素材があります。

景観・効果線・描き文字・吹き出し・キャラクターの5つのカテゴリー別に素材を探せます。

【景観】

【効果線】

【描き文字】

【吹き出し】

【キャラクター】

サイトはこちら

サイトは以下になります。自分の好みの素材を探してみましょう。
⇒マンガ素材辞典β

利用について

素材は商用利用でも無料で使えますし加工もOKです。クレジット表記も不要ですが、「キャラクター」の素材を使う場合には、ロゴか「マンガ素材辞典βのキャラクターを使用しています」と記載して下さいとのことです。詳しくは以下のページを確認してから使うようにしましょう。
ご利用の前に | マンガ素材辞典β

商用可のイラストを使ったフリーのパターン素材。かわいい・オシャレなデザイン色々。

2012-02-13T22:11:00.000+09:00

色々なイラストを使ったパターン素材を紹介します。ワンクリックでデザインをポップでかわいい雰囲気に出来ます。ブログやTwitterの背景なんかにも良さそうです。

ここで紹介するパターン素材にはPhotoshop用のものもありますが、GIMPではプラグインを使うことでPhotoshopパターンを使えるようにすることが出来ます。詳しくは「PhotoshopパターンをGIMPで使えるようにする」を参照してみて下さい。また、パターンの使い方については「塗りつぶしツールの使い方」で紹介しています。

Cloud Seamless Photoshop and Vector Pattern
【利用条件】個人OK / 商用OK
【ファイルの種類】Photoshopパターン、EPSファイル
雲をモチーフにしたポップな雰囲気のパターンセットです。この記事のサムネイルでも使っています。タイトルのフォントはこちらの記事でも紹介した「FFF Tusj」です。

Polonez Pattern
【利用条件】個人OK / 商用OK
【ファイルの種類】PNG
車のイラストを使ったパターン素材です。イラストを使ったものというと、かわいいデザインのものが多いですが、こちらはかなり明るめのグレーでおしゃれな雰囲気。背景なんかにさりげなく使うと良さそうです。

Easter Fun
【利用条件】個人OK / 商用OK
【ファイルの種類】PNG
かわいいウサギや鳥のイラストを散りばめた、明るい印象のパターンです。ダウンロードボタンはサイト右側にあります。

Easter Bunnies
【利用条件】個人OK / 商用OK
【ファイルの種類】PNG
色合いをブルーに統一したウサギのイラストのパターンです。

Hand-Drawn Scrolls
【利用条件】個人OK / 商用OK
【ファイルの種類】PNG
手書き風の植物を敷き詰めたようなデザインのパターンです。クッキリとしたモノクロの色使いが印象的。

※素材の利用規約は変更している場合もありますので、各配布ページを確認してから使いましょう。

和紙や千代紙のフリー和柄テクスチャー。鮮やかで綺麗な色使いの素材が揃ってます。

2012-02-12T12:38:00.000+09:00

フリーで使える和柄テクスチャー素材を紹介します。桜や扇子など日本的なモチーフがふんだんに使われていて色合いも鮮やかなものが多いです。テクスチャ一枚でぐっと和風の雰囲気が出せそうです。

※素材ごとに利用条件を書いておきますが、利用規約は変更している場合もありますので、各配布ページを確認してから使いましょう。

Origami paper texture pack
【利用条件】個人利用OK
着物のような鮮やかな色合いのテクスチャーパックです。この記事のサムネイルでも使っています。フォントはこちらの記事で紹介した「青柳衡山フォントT」を使っています。

Origami paper - 16 of 'em XD
【利用条件】個人利用OK
こちらも鮮やかな色使いです。桜や扇子など日本のモチーフがたくさんに使われています。

Origami Pattern _8textures
【利用条件】個人利用OK
青系を基調として落ち着いた色合いの和風テクスチャのセットです。

Paper Texture Pack 02
【利用条件】個人利用OK
ピンクを基調としたテクスチャパック。細かい花柄などのデザインでとってもカワイイ雰囲気。

Paper Textures Pack 02
【利用条件】個人利用OK
こちらは色々な紙のテクスチャのセットです。ゴールドの和柄も収録されていてリッチな雰囲気。

ひな祭りに使える写真やイラスト色々。フリー素材配布サイトで調べてみました。

2012-02-11T15:10:00.000+09:00

ひな祭りのデザインに使える写真やイラストの素材を紹介します。サイトごとに利用規約のページを書いていますので、素材を使うときには確認してから使いましょう。

写真素材

【無料壁紙フリー写真素材集/癒しの風景写真】 : サイトトップ / 利用規約ページ

素材ページ

【写真素材足成】 : サイトトップ / 利用規約ページ

素材ページ

イラスト素材

【素材のプチッチ】 : サイトトップ / 利用規約ページ

素材ページ（3種類共通です。他にも五人囃子や三人官女などもあります。）

素材ページ（3種類共通です。他にも猫・猿・ウサギバージョンなどもあります。）

素材ページ（3種類共通です。他にもクマやブタバージョンもあります。）

最後に紹介した「素材のプチッチ」さんのイラストはとってもクオリティが高い上に、キャラクターや小物ごとのイラストになっていたり背景がちゃんと透明になっていたりして使いやすいです。利用規約が分かりやすいのも嬉しいですね。この記事のサムネイルでも使わせて頂きました。ちなみに背景にはこちらの記事でも紹介した「和風ぱたあん」を使っています。

5分で作れるライティングエフェクト。グラデーションを重ねて綺麗に発光させる。

2012-02-10T22:27:00.000+09:00

フリーのブラシ素材を使って簡単に光の表現を作る方法を紹介します。素材を使えばワンクリックで色々な模様が作れるので、自由に組み合わせて、あとはグラデーションを重ねるだけ。背景などに使えそうです。

素材の準備

今回使うブラシ素材は、以下のサイトで配布している「Energy Brushes」です。
まずは素材をダウンロードしましょう。
Energy Brushes | Brusheezy（外部サイト）

ダウンロードしたら、ブラシをGIMPに追加しましょう。追加の手順は以下の記事で紹介しています。
GIMPにブラシを追加する方法

実践

それでは画像の作成を始めましょう。「幅」は「640px」、「高さ」は「480px」で新しい画像を作成して下さい。（画像の作成については「画像の作成を始める」で紹介しています。）

そして、ツールボックスから「塗りつぶし」ツールを選んだら「描画色」を「黒（HTML表記で000000）」にして、画像を作成したときに出来た「背景」レイヤーを塗りましょう。

次に「新しいレイヤーを追加」ボタンをクリックしましょう。設定用のウインドウが出てくるので、レイヤー名を「ライトエフェクト」として「OK」ボタンを押して新しいレイヤーが追加しましょう。このレイヤーに光を描いていきます。

ブラシダイアログを使って、新しく追加したブラシの中から「Energy_Brushes_by_Edelihu.abr-002」を選びましょう。ブラシはツールオプションからも選べますが、数が多くなったりブラシ名が長いときは、ブラシダイアログを使うのが便利です。

「ブラシ」ツールを選び、「描画色」を「白（HTML表記でffffff）」にしましょう。そしてツールオプションで「拡大・縮小」の項目を「0.5」にしましょう。この状態で画像の右下をクリックしましょう。座標でいうと「488, 467」の位置です。ワンクリックで光の軌跡のような模様を描くことができます。

次は、ブラシダイアログで「Energy_Brushes_by_Edelihu.abr-011」を選んで、座標で「242, 105」の位置をクリックしましょう。これで光の模様は完成です。

この模様にグラデーションを付けていきましょう。まずは「グラデーション」という名前で新しいレイヤーを追加してください。順番は一番上になるようにします。

次に「ブレンド」ツールを選び、「描画色」を「001194」、「背景色」を「dc52ff」にしましょう。そしてツールオプションで「形状」の項目を「線形」にして、下の画像のようにドラッグしてグラデーションをつけましょう。

最後に「グラデーション」レイヤーの「モード」を「オーバーレイ」にしたら完成です。グラデーションが重なって発光した雰囲気が出ます。

完成！

ブラシ素材を使ってグラデーションを重ねるだけでライティングエフェクトを作ることが出来ました。使うブラシの組み合わせやグラデーションの色などを変えれば色々な画像が作れます。ライティングエフェクトのブラシ素材はこちらの記事で紹介しているので、色々試してみたい方は合わせてどうぞ。

⇒「フリーで使えるSF風ライティングエフェクトのブラシセット。様々な光の表現が出来ます。」

フリーで使えるSF風ライティングエフェクトのブラシセット。様々な光の表現が出来ます。

2012-02-09T21:57:00.000+09:00

SFチックな光の表現を作るときに便利なブラシのセットを紹介します。ブラシはそれぞれ細かくパーツに分かれているので組み合わせ次第で色々なデザインが作れそうです。

素材ごとに利用条件を書いていますが、規約は変更している場合もありますので使う前に各素材の配布ページで確認しましょう。ブラシの追加の仕方については、「GIMPにブラシを追加する方法」の記事で紹介しています。

Abstract Celestica
【利用条件】個人OK
宇宙をイメージした抽象的な光のブラシセットです。デザインの背景に使えそう。

CS4 Brushes
【利用条件】個人OK
火花のような光のラインのブラシセットです。

Refresh Brushes
【利用条件】個人OK
ゆらゆらと漂うような光のラインが特徴的なブラシセットです。

Energy Brushes
【利用条件】個人OK
細くてクッキリしたラインのと柔らかい帯状の光を組み合わせたブラシセットです。

Hyper Brushes
【利用条件】個人OK
光がぶつかって飛び散ったような勢いのある光が特徴のブラシセットです。

ブラシを使えばサムネイル画像のような複雑な模様を簡単に書くことが出来ますが、グラデーションは自分で付ける必要があります。グラデーションの付け方については以下の記事で簡単なサンプルを紹介していますので参考にしてみて下さい。

⇒ 「5分で作れるライティングエフェクト。グラデーションを重ねて綺麗に発光させる。」

AppleのiCloudアイコンの作り方。リアルな立体感や金属の光沢を表現する。

2012-02-08T22:08:00.000+09:00

削り出した金属の質感がかっこいいiCloudアイコンの作り方を紹介します。金属を彫りこんだような立体感や、削り出しの表面の質感の出し方は、アイコン以外でも使いどころがありそうです。

画像加工のおおまかな流れ

先におおまかな作業の流れを書いておきます。詳しい説明は次の「画像加工の手順」からです。
記事の最後で完成版もダウンロード頂けます。

【step-1】基本の形を作る
【step-2】立体感をつける
【step-3】金属の光沢や質感をつける

画像加工の手順

【step-1】基本の形を作る

まずは画像の作成を始めましょう。「幅」は「480px」、「高さ」は「480px」に設定します。（画像の作成については「画像の作成を始める」で紹介しています。）

それでは画像を作っていきます。まずはアイコンの土台の部分を作るためのレイヤーを追加しましょう。レイヤー名は「土台」としておきます。

次にツールボックスから「短形選択」ツールを選びましょう。そして、いったん適当な選択範囲を作ってからツールオプションを以下のように設定して調節しましょう。
「角を丸める」→「半径：30」、「開始位置」→「40px,40px」、「大きさ」→「400px,400px」

選択範囲が出来たら、ツールボックスから「塗りつぶし」ツールを選んで「描画色」をグレー（HTML表記で「a9a9a9」）にして塗りつぶしましょう。

次は雲の部分を作っていきます。

「土台」レイヤーはいったん非表示にして、「雲」という名前で新しいレイヤーを追加しましょう。

そして、「短形選択」ツールを使って以下のような選択範囲を作りましょう。
「角を丸める」→「半径：100」、「開始位置」→「80px,220px」、「大きさ」→「320px,130px」
出来たら「塗りつぶし」ツールを使って同じように塗りつぶしましょう。（色は「a9a9a9」のままでOKです。）

塗りつぶしたら、画像ウインドウの上のメニューから「選択」→「選択を解除」で選択範囲を解除しておきましょう。（ショートカットは「Shift + Ctrl + A」です。）

次に「ブラシ」ツールを選んで、「ブラシ」の項目を「Circle (19)」、「拡大・縮小」を「9」にしましょう。この状態で、雲の右上をあたりをクリックして丸を描きましょう。座標で言うと「254, 210」の位置です。

さらに、今度は「拡大・縮小」を「3」にして、雲の左上に丸を描きましょう。座標で言うと「156, 212」の位置です。これで雲の形の完成です。

次は雲の周りにフチをつけます。「雲」レイヤーを右クリックして、「不透明部分を選択範囲に」を選びましょう。すると雲の形の選択範囲が出来ます。

そしてメニューから「選択」→「選択範囲を拡大」をクリックしましょう。設定ウインドウが出てくるので、「拡大量」の項目を「15ピクセル」にして「OK」ボタンで適用しましょう。選択範囲が15px広がります。

次に「新規レイヤー」ボタンをクリックして「雲（フチ）」という名前でレイヤーを追加し、「描画色」を「4c4c4c」にしたら「塗りつぶし」ツールを使って選択範囲を塗りつぶしましょう。

「雲（フチ）」レイヤーの順番を「雲」レイヤーの下して、「土台」レイヤーを表示状態にしたらアイコンの基本の形の完成です。

【step-2】立体感をつける

まず土台の形を外側に4px拡大した選択範囲を作りましょう。手順は雲のフチを作ったときと同じで以下のような感じです。

①「土台」レイヤーを右クリックして、「不透明部分を選択範囲に」で土台の形の選択範囲を作ります。
②その状態でメニューから「選択」→「選択範囲を拡大」をクリックします。
③「選択範囲を拡大」ウインドウの「拡大量」の項目を「4ピクセル」にして「OK」ボタンで適用します。

選択範囲が出来たら、「土台（フチ）」という名前で新しいレイヤーを追加して、レイヤーの順番を「土台」レイヤーの下にしましょう。このレイヤーに「ブレンド」ツールを使ってグラデーションをつけていきます。

ツールボックスから「ブレンド」ツールを選んだら、
「描画色」を「efefef」、「背景色」を「292929」、ツールオプションの「形状」の項目を「線形」にして、
選択範囲の上端から下端までドラッグします。Ctrlキーを押しながらドラッグするとまっすぐグラデーションをつけることが出来ます。

次はアイコンの下に影をつけていきます。まずは「土台（影）」という名前で新しいレイヤーを追加しましょう。順番は「土台」レイヤーの下になるようにします。

次に、「楕円選択」ツールを選んで、以下のような横長の選択範囲をアイコンの下に作りましょう
「開始位置」は「50px, 425px」、「大きさ」は「380px, 25px」です。

そして、選択範囲を「塗りつぶし」ツールを使って黒（HTML表記で「000000」）で塗りましょう。

次に、メニューから「フィルタ」→「ぼかし」→「ガウシアンぼかし」をクリックしましょう。「ガウシアンぼかし」ウインドウが出てくるので、「水平・垂直ともに20px」と入力して「OK」ボタンで適用しましょう。これでアイコンの下に影がつきます。

次は雲のフチの内側に影をつけていきます。まず、「雲（フチ）」レイヤーを右クリックして、「不透明部分を選択範囲に」で選択範囲を作り、次にメニューから「選択」→「選択範囲を反転」（ショートカットは「Ctrl + I」）をクリックしましょう。これで雲のフチの外側を選択した状態になります。

この状態で、メニューから「フィルタ」→「照明と投影」→「ドロップシャドウ」をクリックしましょう。「ドロップシャドウ」ウインドウが出てくるので下の画像ように設定して「OK」ボタンで適用しましょう。フチの内側に影がつきます。

※「画像サイズ変更可」の項目は、チェックを入れると影がはみ出た分、自動で画像を大きくしてくれる機能ですが、今回はそれで画像の大きさがずれてしまうのでチェックをはずしています。

影をつけたら、画像ウインドウの上のメニューから「選択」→「選択を解除」で選択範囲を解除しておきましょう。（ショートカットは「Shift + Ctrl + A」です。）

次に、「雲」レイヤーを選んで、メニューから「フィルタ」→「装飾」→「ベベルの追加」をクリックしましょう。「ベベルの追加」ウインドウが出てくるので下の画像のように設定して「OK」ボタンで適用しましょう。雲に立体感がつきます。

「ベベルの追加」フィルタで立体感がつきましたが、少し弱いのでもっと強くしましょう。強くするには「ベベルの追加」フィルタをもう一度適用すればOKです。「Ctrl + F」を押しましょう。これは「一つ前に使ったフィルタを同じ設定で適用」してくれるショートカットです。これで立体感がさらに強くなります。

次は、全体にグラデーションを付けていきます。まずは、「土台」レイヤーを右クリックして、「不透明部分を選択範囲に」で土台の形の選択範囲を作りましょう。次に、「グラデーション」という名前で新しいレイヤーを追加してください。レイヤーの順番は一番上にしましょう。

そして、「描画色」を「白（ffffff）」、「背景色」を「黒（000000）」にしたら、「ブレンド」ツールを選んで、ツールオプションの「形状」の項目を「放射状」にしましょう。そして下の画像のようにドラッグしてグラデーションをつけましょう。雲の部分の立体感に合わせて左上から光が当たっているような感じにしています。

次に「グラデーション」レイヤーのモードを「オーバーレイ」に、「不透明度」を「60」にしましょう。レイヤーが重なって光があたっている雰囲気がでます。これで立体感をつける工程は完了です。

【step-3】金属の光沢や質感をつける

最後のステップでは、金属らしい質感をつけていきます。

step-2の最後で「土台」の形の選択範囲が出来ているので、そのままの状態で、新しいレイヤーを「ハイライト」という名前で追加しましょう。順番は一番上に来るようにします。

次に「ブレンド」ツールの「グラデーション」の項目から「FlareRaysSize1」を選び、「形状」の項目を「円錐形（非対称）」にしましょう。この状態で画像の中心から外側に向かって斜めにドラッグしてグラデーションをつけましょう。中心を正確に測るには、画像のウインドウの左下の座標が「240, 240」の位置になるようにすればOKです。

そして、このままではグラデーションがクッキリし過ぎているので、リアルにするために少しぼかします。メニューから「フィルタ」→「ぼかし」→「モーションぼかし」をクリックしましょう。設定ウインドウが出てくるので、下の画像のような設定にして「OK」ボタンで適用しましょう。

フィルタが適用できたら、「ハイライト」レイヤーのモードを「オーバーレイ」にしましょう。ハイライトが重なって金属の光沢が出ます。そして、選択範囲は解除しておきましょう。（ショートカットは「Shift + Ctrl + A」）

最後に金属を削り出したような質感をつけていきます。まずは「削り出し」という名前で新しいレイヤーを追加しましょう。順番は一番上に来るようにします。そして、「塗りつぶし」ツールを使って全体を「黒（000000）」で塗ります。

次に、メニューから「フィルタ」→「ノイズ」→「RGBノイズ」をクリックしましょう。設定ウインドウが出てくるので、下の画像のような設定にして「OK」ボタンで適用しましょう。

ノイズ効果を付けたら、メニューから「フィルタ」→「ぼかし」→「モーションぼかし」をクリックしましょう。設定ウインドウが出てくるので、下の画像のような設定にして「OK」ボタンで適用しましょう。これでノイズが円状にぼけて金属の削り出し風の線が出来ます。

次に不要な部分を切り取ります。まず「ハイライト」レイヤーを右クリックして、「不透明度を選択範囲に」で選択範囲を作り、メニューから「選択」→「選択を反転」をクリックしましょう。これでアイコンの外側にはみ出し分だけを選択した状態になります。

この状態で、「削り出し」レイヤーを選んで、「Ctrl + X」キーを押しましょう。アイコンの外側の部分が切り取られます。出来たら選択範囲は解除しておきましょう。（ショートカットは「Shift + Ctrl + A」です。）

最後に「削り出し」レイヤーのモードを「加算」にすればレイヤーが重なってアイコンに削り出しの質感がつきます。

お疲れ様です。これでiCloud風アイコンの完成です！

完成！

完成版は以下からダウンロード出来ます。参考にしてみたい方がいたらご自由にお使い下さい。
[Download] icloud-icon-sample-complete.zip / 572KB

花や草がモチーフのフリーブラシ素材。オシャレできれいなデザイン色々。商用利用もOK。

2012-02-05T12:54:00.000+09:00

デザインのアクセントになりそうな花や草のブラシを紹介します。自分ではなかなか描けないような、しっかり描き込まれた花柄もブラシを使えばワンクリックなのでとっても便利です。

Floral Brushes by surfing-ant
【利用条件】個人OK / 商用OK
細かいところまで描き込まれたブラシです。ワンポイントで使えばオシャレなデザインになりそう。

Frosted Flakes
【利用条件】個人OK / 商用OK
レースのように丸い形がキレイな花ブラシです。テクスチャを使っていて、「Frosted」という名前のとおり霜のような柔らかい雰囲気。この記事のサムネイルで使っているのもこのブラシセットです。ちなみにフォントは、こちらの記事の最後で紹介した「Windsong」です。

Floral brushes by hawksmont
【利用条件】個人OK / 商用OK
こちらはツタや葉のデザインが印象的なブラシです。色々な形があるので、組み合わせて文字や写真を囲ったりしても良さそうです。

Floral brushes II by hawksmont
【利用条件】個人OK / 商用OK
上で紹介したブラシの続編です。

Fauna Brushes
【利用条件】個人OK / 商用OK
こちらは実際の花や葉の写真をブラシにしています。ワンポイントで使う分には、画像を切り抜いたりする手間もいらないので便利ですね。

GIMPにブラシを追加する方法

2012-02-04T21:07:00.004+09:00

ブラシを追加すれば、複雑な模様もワンクリックで作れるようになってとても便利です。GIMPではPhotoshop用のブラシも同じように使うことが出来るので、表現の幅も広がります。

ブラシのファイルは拡張子が「.gbr（GIMPブラシ）」または「.abr（Photoshopブラシ）」となっているファイルです。追加するにはブラシ保存用フォルダにブラシのファイルを移動すればOKです。

ここで大切なのは、しっかり整理することです。あまり大量に追加してしまうと、GIMPの起動が遅くなる原因になります。必要なものだけ追加するようにしましょう。ブラシ保存用フォルダの場所は3種類あるので順番に紹介していきます。

①追加用のブラシフォルダ

GIMPはインストールしたときに追加用のフォルダを作ってくれるので、
そこに保存するのがオススメです。場所は、

WindowsXPなら「C:\Documents and Settings\ユーザー名\.gimp-2.6\brushes」、
VistaかWindows7なら「C:\Users\ユーザー名\.gimp-2.6\brushes」です。

※ここに保存するのが一番簡単で整理もしやすいのですが、GIMPは海外ソフトの為、ユーザー名の部分が日本語（全角）になっている場合は上手く動いてくれません。その場合は②以降の場所に保存しましょう。

②GIMP本体のブラシフォルダ

ユーザー名に日本語を使っている場合は以下の場所に保存すればOKです。

「C:\Program Files\GIMP-2.0\share\gimp\2.0\brushes」

※ただし、ここはGIMPにもともと入っているブラシが保存してある場所です。ここに追加して、後で消そうと思ったらどれだか区別が付かなくなったなんてことがないように気をつけましょう。しっかり整理して管理したい場合は③をオススメします。

③保存場所を自分で指定する

ブラシを保存する場所を自分で指定することも出来ます。
【A】画像ウインドウの上のメニューから「編集」→「環境設定」をクリックして、
すると「環境設定」ウインドウが開きますので、
【B】左の項目の「フォルダ」の左にある「+」マークをクリックしましょう。
保存先を指定するための項目が出て来ますので、
【C】その中の「ブラシ」をクリックすると右側にブラシの保存場所の設定項目が出て来ます。

ブラシの保存場所を指定するには、
【A】まず、左端の「フォルダの追加」ボタンをクリックしましょう。
【B】右端のフォルダアイコンをクリックしましょう。
すると、フォルダの一覧が出て来ますので好きなフォルダを選びましょう。
新しくフォルダを作って指定したい場合は、
【C】「フォルダの作成」ボタンでフォルダを作ることが出来ます。
※ここで作成するフォルダの名前や設置場所は全角文字が含まれないようにしましょう。
【D】最後に「OK」ボタンをクリックしましょう。
これでブラシ用のフォルダを追加することが出来ます。

GIMP2.8公開情報や新機能まとめ

2012-02-02T22:34:00.002+09:00

現在GIMPはバージョン2.6が最新版となっています。2.7も公開されていますが、これはあくまで開発版という位置づけです。次のバージョンの2.8も開発されているので、見つけた情報をまとめてみました。

2.8の公開時期

実はGIMP2.8は、去年の12月に出る予定もありましたが、2012年2月に入った今でもまだリリースはされていません。英語のサイトですが、作業の進行状況が公開されていました。現在の予定日は、2012年3月11日となっています。ただし、こちらもあくまで予定なので変更の可能性もあります。

Official schedule for GIMP 2.8.（2012/02/02時点）

2.8から使えるようになる機能

新しく使えるようになる主な機能は以下の3つが予定されているようです。

1. レイヤーのグルーピング
2. ブラシダイナミクス
3. シングルウィンドウモード

1. レイヤーのグルーピング

GIMPで複雑な画像を作るとき、レイヤーがどんどん増えて見づらくなっていってしまうことがあります。「レイヤーのグルーピング」とは、そんな増えたレイヤーをグループ分けして整理することが出来る機能です。ちょうどファイルをフォルダに分けるような感じですね。

2. ブラシダイナミクス

「ブラシ」ツールを使うときに、ブラシの設定をもっと細かく指定できるようになる機能です。細かい設定が増えればその分表現の幅が広がります。

3. シングルウィンドウモード

GIMPを起動すると、画像ウインドウもツールボックスもダイアログウインドウも、それぞれ別のウインドウで開きます。さらに画像も何枚も開いたりすると、画面が見にくくて使いづらく感じることがあります。GIMP2.8ではこれがひとつのウインドウになってスッキリします。

というわけでGIMP2.8の公開が待ち遠しいです。ただ、資金も開発人数も多い有料ソフトと違ってGIMPはフリーのソフトです。公開時期はまだ変更するかもしれません。そのあたりは無料で使えてる分、暖かい目で見守るくらいでいないといけないかもしれませんね。

写真を鉛筆画風に一発変換出来るスクリプト「Pencil-sketch.scm」の使い方

2012-02-01T22:24:00.000+09:00

ワンクリックで写真を鉛筆画風に変換してくれるスクリプトを紹介します。とても簡単に使えて、なかなかクオリティも高いスクリプトなのでオススメです。

ダウンロード

まずは以下のページの一番下のリンクからスクリプトをダウンロードしましょう。
鉛筆画スクリプト「Pencil-sketch.scm」

インストール

ダウンロードしたファイルを解凍すると「pencil-sketch.scm」というファイルが入っているので、これをGIMPのスクリプト保存用フォルダに移動すればインストール完了です。フォルダの場所は、「GIMPにスクリプトをインストールする方法」の記事で紹介しています。

スクリプトの使い方

スクリプトをインストールしてからGIMPを起動すると、画像ウインドウの上のメニューに「Script-Fu」→「写真加工」→「鉛筆画」という項目が追加されています。「鉛筆画」をクリックすると、自動で画像を鉛筆画風に変換してくれます。

実際に試してみました。

簡単に使えておもしろいスクリプトだったので色々な画像で試してみました。元の画像によって微妙に見栄えが変わってくることが分かりました。下のサンプルは全て元画像の状態からワンクリックで「鉛筆画」を適用しただけです。

「鉛筆画」適用

元の画像

顔の表情もクッキリ出ているし、顔の下に置いた前足の毛並みもキレイに出ていていい感じです。

「鉛筆画」適用

元の画像

こちらは顔や耳の毛の方向がしっかり出ています。クッキリした線を出したいときは、線のハッキリした画像を選ぶと良さそうです。

「鉛筆画」適用

元の画像

こちらはわざとボケた画像に適用してみました。画像をぼかすにはメニューから「フィルタ」→「ぼかし」→「ガウシアンぼかし」でOKです。鉛筆を寝かせて描いたような柔らかい雰囲気になりました。

「Pencil-sketch.scm」はワンクリックで適用できるので色々な画像に使ってみるとおもしろいです。そのまま使っても良いし、画像を加工したり明るさを調整してから試してみると思わぬ効果が出るかもしれません。鉛筆画に変換してから、上から色を塗ったりするのも良いかもしれませんね。

GIMPにスクリプトをインストールする方法

2012-01-31T22:39:00.000+09:00

スクリプトをインストールすると新しい機能を増やすことが出来ます。GIMPのスクリプトは色々なサイトで配布されています。モノによっては複雑な加工がワンクリックで出来ちゃうこともありますよ。

スクリプトをインストールするには、スクリプト保存用フォルダにスクリプトのファイルを移動すればOKです。ただ、気をつけなくてはいけないのは、スクリプトは手当たりしだいに入れてしまうと起動が遅くなったり、動作も不安定になることがあるので整理して必要なものだけインストールすることが大切です。GIMPスクリプトを保存する場所は3種類用意されてるので順番に紹介していきます。

①追加用のスクリプトフォルダ

GIMPはインストールしたときに、追加用のフォルダを作ってくれるので
そこに保存するのがオススメです。場所は、

WindowsXPなら「C:\Documents and Settings\ユーザー名\.gimp-2.6\scripts」、
VistaかWindows7なら「C:\Users\ユーザー名\.gimp-2.6\scripts」です。

②GIMP本体のスクリプトフォルダ

ユーザー名に日本語を使っている場合は以下の場所に保存すればOKです。

「C:\Program Files\GIMP-2.0\share\gimp\2.0\scripts」

※ただし、ここはGIMPにもともと入っているスクリプトが保存してある場所です。ここに追加のスクリプトを入れて、後で消そうと思ったらどれだか区別が付かなくなったなんてことがないように気をつけましょう。しっかり整理して管理したい場合は③をオススメします。

③保存場所を自分で指定する

GIMPではスクリプトの保存場所を自分で指定することも出来ます。
【A】画像ウインドウの上のメニューから「編集」→「環境設定」をクリックして、
すると「環境設定」ウインドウが開きますので、
【B】左の項目の「フォルダ」の左にある「+」マークをクリックしましょう。
保存先を指定するための項目が出て来ますので、
【C】その中の「スクリプト」をクリックすると右側にスクリプトの保存場所の設定項目が出て来ます。

スクリプトの保存場所を指定するには、
【A】まず、左端の「フォルダの追加」ボタンをクリックしましょう。
【B】右端のフォルダアイコンをクリックしましょう。
すると、フォルダの一覧が出て来ますので好きなフォルダを選びましょう。
新しくフォルダを作って指定したい場合は、
【C】「フォルダの作成」ボタンでフォルダを作ることが出来ます。
※ここで作成するフォルダの名前や設置場所は全角文字が含まれないようにしましょう。
【D】最後に「OK」ボタンをクリックしましょう。
これでスクリプト用のフォルダを追加することが出来ます。

GIMPのスクリプトは色々あるので探してみるとおもしろいです。このサイトでも「プラグイン・スクリプト」タグの記事で紹介しています。

バレンタインデー向けチュートリアル。溶けたチョコレートにつけたようなテキストを作る。

2012-01-28T22:02:00.000+09:00

バレンタインらしい、チョコレートがかかったようなテキストを作る手順を紹介します。ポイントはチョコレート部分に丸みや厚みをつけて立体的に見せることです。

画像加工のおおまかな流れ

先におおまかな作業の流れを書いておきます。詳しい説明は次の「画像加工の手順」からです。
記事の最後で完成版もダウンロード頂けます。

【step-1】メインの文字を入力する
【step-2】チョコレート部分の元になる形を作る。
【step-3】丸みと厚みを付けてチョコレートらしくする。

画像加工の手順

【step-1】メインの文字を入力する

まずは画像の作成を始めましょう。「幅」は「640px」、「高さ」は「480px」に設定します。（画像の作成については「画像の作成を始める」で紹介しています。）

そして、ツールボックスから「テキスト」ツールを選んで画像の真ん中に大きく「Sweet」と入力しましょう。設定は下の画像のとおりです。フォントはこちらの記事で紹介した「Wisdom Script」を使っています。

次はテキストの右側にフチを付けていきます。まずは「レイヤーを複製」ボタンをクリックして「Sweet」レイヤーをコピーしましょう。そして、新しくできた「Sweet#1」レイヤーのテキストを「テキスト」ツールでクリックして、ツールオプションで色を茶色（HTML表記で「a06413」）にしましょう。

そして、「移動」ツールを使って右下に1pxずつずらしましょう。（一度文字をクリックしてから、キーボードの「→」「↓」と1回ずつ押せばOKです。）出来たら「Sweet#1」レイヤーを「Sweet」レイヤーの下にドラッグして入れ替えれば右下に1pxのフチのついたテキストの出来上がりです。

【step-2】チョコレート部分の元になる形を作る。

次は文字にチョコレートにつけたような装飾をつけていきます。まずは「Sweet」レイヤーをコピーして色を黒（HTML表記で「000000」）にしておきましょう。さっきと同じ要領です。

この黒いテキストの上側を切り取っていきます。「パス」ツールを選んで下の画像のようなパスを作りましょう。文字を波型に切り取る感じです。（パスツールの使い方はこちらの記事で紹介しています。）

次に、パスダイアログに切り替えて、今作ったパスを選択した状態で、「パスから選択範囲を作成」ボタンをクリックしましょう。パスの形の選択範囲が出来るので、そのまま「Ctrl + X」キーをおしてテキストの上側を切り取りましょう。

ここに、しずくの形のチョコレートを書き足していきます。パスツールで下の画像のようなパスを描きましょう。細かい部分はCtrlキーを押しながらマウスホイールで拡大しながら作ると便利です。

雫のパスが出来たら同じように「パスから選択範囲を作成」ボタンをクリックして選択範囲を作りましょう。そして、パスは二つとも目のアイコンをクリックして非表示にしておきます。

次はレイヤーダイアログに戻って選択範囲を黒く塗っていきます。ただ、今の状態では「Sweet#2」レイヤーはテキストの大きさに合っていて、そこからはみ出した雫の部分は塗ることが出来ません。そこで、画像ウインドウの上のメニューから「レイヤー」→「レイヤーをキャンバスに合わせる」をクリックしましょう。これで全体が塗れるようになります。

それでは、「ブラシ」ツールを使って選択範囲の内側を黒（HTML表記で「000000」）で塗りましょう。隙間なくきれいに塗れたら、メニューから「選択」→「選択を解除」で選択範囲を解除しておきましょう。ここまでの画像とレイヤーは下の画像のような状態です。

【step-3】丸みと厚みを付けてチョコレートらしくする。

ここまでで作った黒の部分がチョコレートの部分になりますが、このままでは文字の形にピッタリ添っていてチョコレートらしく見えません。丸みと厚みを付けていきましょう。

まず、「Sweet」レイヤーと「Sweet#2」レイヤーの間に白いレイヤーを追加します。「Sweet」レイヤーを選択した状態で、「新しいレイヤーを作成」ボタンをクリックしましょう。「新規レイヤー」ウインドウが出てくるので、「レイヤー塗りつぶし方法」の項目を「白」にして「OK」ボタンをクリックしましょう。

次に、「Sweet#2」レイヤーを選択して、メニューから「レイヤー」→「下のレイヤーと統合」をクリックしましょう。レイヤーが統合されます。このレイヤーの名前は「チョコレート」に変更しておきましょう。

そして、「チョコレート」レイヤーを選択した状態で、メニューから「フィルタ」→「ぼかし」→「ガウシアンぼかし」をクリックしましょう。「ガウシアンぼかし」ウインドウが出てきますので、水平・垂直ともに「10px」に設定して「OK」ボタンで適用しましょう。

次に、メニューから「色」→「レベル」をクリックしましょう。「レベル」ウインドウが出てきますので、「入力レベル」の項目を「202」「1.00」「220」と入力して「OK」ボタンで適用しましょう。丸みがついて溶けたチョコレートの雰囲気が出ます。

次は、メニューから「レイヤー」→「透明部分」→「色を透明度に」をクリックしましょう。「色を透明度に」ウインドウが出てくるので「OK」ボタンで適用しましょう。白い部分が透明になります。

ここまで、チョコレートの部分を黒で作ってきたので、チョコレートらしい茶色にします。メニューから「色」→「着色」をクリックしましょう。「着色」ウインドウが出てくるので、色相を「15」・彩度を「70」・輝度を・「22」と入力して「OK」ボタンで適用しましょう。

これで大分チョコレートらしくなってきました。次は厚みをつけて少し立体的にしていきます。

まずは、チョコレートのレイヤーを「レイヤーを複製」ボタンでコピーしましょう。

そして新しく出来たレイヤーを選択した状態で、メニューから「フィルタ」→「ロゴ効果」→「グラデーションベベル」をクリックしましょう。設定ウインドウが出てくるので、下の画像のように設定して適用しましょう。

すると「チョコレートコピー」レイヤーがモノクロになって立体感がつきます。また、「Blur」・「Background」というレイヤーが作成されますが、この2つのレイヤーは必要ないので削除してしまいましょう。

次に、「チョコレート　コピー」のレイヤーを選んで、モードを「オーバーレイ」にすると、茶色のレイヤーに明るさが重なって立体感が出ます。これでチョコレートテキストの完成です！

最後に背景をパターンで塗って小さなテキストを添えてみました。フォントはメインのテキストと同じです。パターンは「フリー素材配布：ハート柄パターン4色セット」の記事で配布しているハートパターンからグレーのものを不透明度を「15」にして色を薄くして使っています。

完成版は以下からダウンロード出来ます。参考にしてみたい方がいたらご自由にお使い下さい。
[Download] chocolate-text-sample-complete.zip / 197KB

デザインを華やかにする品のある筆記体フリーフォント10種類。商用可。

2012-01-26T22:13:00.001+09:00

フリーで使える筆記体の英字フォントを10種類紹介します。フォントによってデザインの印象は大分変わると思います。中でも筆記体フォントは品のあるデザインを作るのにぴったりです。

Lavanderia
【利用条件】個人OK / 商用OK
細身で背の高いフォントです。品のあるデザインに合いそう。こちらのサイトのフォントはカンパウェアとなっているので、サイト右側の入力欄に好きな金額を入れてダウンロードしましょう。O円でもOKです。

Wisdom Script
【利用条件】個人OK / 商用OK
こちらも同じサイトから。レトロ・ビンテージな雰囲気です。クッキリしていて視認性も高いのでロゴや見出しにも良さそうです。

Freebooter Script
【利用条件】個人OK / 商用OK
くるんと丸まった線が特徴的です。クラシックな雰囲気でファンタジー映画やゲームのアイテムなんかに使われていそうです。

Mutlu
【利用条件】個人OK / 商用OK
こちらは飾りのラインが特徴的なフォント。ラインが細目でエレガントな雰囲気のデザインに合いそうです。

Porcelain
【利用条件】個人OK / 商用OK
こちらも飾りのラインが特徴的なフォントですが、大文字だけが強調されています。個人的にはこのくらいがバランスが良くて使いやすそうだと思いました。ちょっと擦れているのもいい感じ。この記事のサムネイルでも使ってみました。

The King & Queen font
【利用条件】個人OK / 商用OK
丸まったラインや飛び散ったインクが特徴的なフォントです。品がありながらも力強い印象で、権威のある雰囲気です。

Redressed
【利用条件】個人OK / 商用OK
こちらはスタンダードでバランスの良いフォントです。線にしっかり強弱がついていて見やすいです。

Wrexham Script
【利用条件】個人OK / 商用OK
こちらも少し太めで、クッキリ見やすいフォントです。使い勝手が良さそうです。

Gabrielle
【利用条件】個人OK / 商用OK
こちらは少し細身でイタリック（斜め）になっていて、エレガントな雰囲気のフォントです。

Windsong
【利用条件】個人OK / 商用OK
さらに細身で高さに変化がついているのが特徴のフォントです。さらさらと書いたサインのような雰囲気でデザインの脇に添えておけば、ぐっとオシャレになりそうです。

デザインのアクセントになるオシャレな縦長フリーフォント10種類。商用可。

2012-01-24T22:38:00.001+09:00

縦長のお洒落なフォントを10種類集めてみました。キレイ目デザインやレトロ・ヴィンテージなデザインのアクセントになってくれそうなものがたくさんあります。

Muncie
【利用条件】個人OK / 商用OK
レトロな雰囲気のフォントです。こちらのサイトのフォントはカンパウェアとなっていて、サイト右側の入力ボックスに好きな金額を入力してダウンロード出来ます。0円でもOKです。

Duke
【利用条件】個人OK / 商用OK
シンプルでバランスの良い縦長フォントです。使い勝手が良さそうです。

Tommaso
【利用条件】個人OK / 商用OK
角に特徴のある縦長フォントです。レトロ・ビンテージなデザインに合いそうです。

Blanch
【利用条件】個人OK / 商用OK
丸みのついたやわらかい印象の縦長フォントです。

Arvil
【利用条件】個人OK / 商用OK
細身のデザインの縦長フォントです。こちらもレトロ・ヴィンテージなデザインにぴったりです。

Valencia
【利用条件】個人OK / 商用OK
とっても縦長なフォントです。太さやイタリック（斜め）になってるものなど種類も豊富です。サムネイルに使っているのもこのフォントです。

Airship 27
【利用条件】個人OK / 商用OK
カチっとした四角いデザインがクールです。ロゴや製品の型番などに合いそうです。

Vevey
【利用条件】個人OK / 商用OK
文字の左右で太さを変えたデザインがオシャレな雰囲気です。キレイ目デザインに合いそうです。

RBNo2
【利用条件】個人OK / 商用OK
大文字と小文字のバランスが良い感じの細めのフォントです。色々なデザインに使いやすそうです。

Diner
【利用条件】個人OK / 商用OK
4種類の太さが用意されていて便利な縦長フォントです。

Twitterやブログで改良版も公開されている「レースの描き方」まとめ。

2012-01-23T22:16:00.000+09:00

1年近くも前になりますが、Twitpicに「レースの描き方」というチュートリアル画像が投稿されました。いまだにRTされ続けている人気の投稿で、スクリプトで自動化されたり立体化されているのでまとめてみました。

Twitpicに投稿された「レースの描き方」

レースの描き方メモ（SAI）
線画をコピーして回転させたり反転させながら重ねていくだけで、なんとレース模様に。このアイディアはすごいです。僕も初めてみたときビックリしました。

「レースの描き方」をスクリプトで自動化。

「レースの作り方」をスクリプトで自動化 | 鉄とGIMP
このサイトでも何度か紹介させてもらっている「鉄とGIMP」さんがスクリプト化して配布してくれています。インストールして実行すれば、線画がワンクリックでレース柄に。

レース化スクリプトを使い、さらに加工して立体に。

「レースを作る」でこんなの作って見ました。@hawaku1
レース化スクリプトで画像を作った後、さらに加工して球状にするチュートリアルです。工夫次第で色々な応用が出来そうです。
※レース化スクリプトを実行すると、キャンバスサイズが大きくなるので、「極座標」を適用する前にキャンバスのサイズを元に戻しておきましょう。

コピペして重ねていくだけで、線画がレースになってしまうアイディアや、それを自動スクリプト化したり立体にしたり。あらためて画像加工の方法って色々あるんだと実感してました。ちなみにこの記事のサムネイルもレース化スクリプトを使って作ってみました。

写真にキラキラしたボケを追加する方法

2012-01-20T22:28:00.000+09:00

フリー素材のテクスチャーを使って、写真にキラキラしたボケを追加する手順を紹介します。ここで使う素材は「キラキラ光るフリーのボケテクスチャー。商用OK。」の記事でも紹介しています。

先におおまかな作業の流れを書いておきます。詳しい説明は次の「画像加工の手順」からです。
記事の最後で完成版もダウンロード頂けます。

【step-1】テクスチャーの大きさを合わせる。
【step-2】テクスチャーの重なり方を調整する。
【step-3】色を調整する。

まずは元になる画像を開き、その上のレイヤーに加工用のボケテクスチャーの素材を読み込みます。
サンプルとして読み込んだ状態のxcfファイルを用意してみました。このファイルを元に説明しますので、同じ画像で練習したい方は以下よりダウンロードしてみて下さい。

[Download] sample-bokeh-texture.zip / 12.0MB

元画像

加工用素材

【step-1】テクスチャーの大きさを合わせる。

今回使うテクスチャ素材はかなり大きな画像なので、まずは小さくしましょう。

ツールボックスから「拡大・縮小」ツールを選んだら、「ぼけテクスチャー」レイヤーを選択した状態で画像をクリックしましょう。すると「拡大・縮小」ウインドウが出てきますので、幅を「720」、高さを「480」と入力して、「拡大縮小」ボタンをクリックしましょう。これは画像がちょうどはみ出さない大きさです。

「拡大縮小」を適用すると画像が消えてしまうように見えますが、Ctrlキーを押しながらマウスホイールで拡大率を下げてみると左上にはみ出ていることが分かります。まんなかに合わせましょう。

【A】ツールボックスから「整列」ツールを選び、はみ出ている画像を一度クリックしましょう。
【B】そしてツールオプションの「中央揃え（水平方向の）」と「中央揃え（垂直方向の）」をそれぞれクリックします。これで画像がまんなかに揃います。出来たら拡大率は100%に戻しておきましょう。

【step-2】テクスチャーの重なり方を調整する。

「ぼけテクスチャー」レイヤーのモードを「スクリーン」にしましょう。元画像とテクスチャーが重なります。

次は、猫の顔の部分にもテクスチャーが重なって見えにくくなってしまっているので消していきます。

まずは「ぼけテクスチャー」レイヤーを選択した状態で、メニューから「レイヤー」→「透明部分」→「アルファチャンネルの追加」をクリックしましょう。これによってレイヤーを透明に消すことが出来ます。（アルファチャンネルについて、詳しくはこちら）

次に、「消しゴム」ツールを選んだら、ツールオプションでブラシを「Circle Fuzzy (19)」、拡大・縮小を「10.00」にしましょう。なるべくボカシのかかった大きなブラシを使うことで、消した境界が目立たなくなるのでキレイに消しやすくなります。この状態で消しゴムを使って下の画像のようになりました。

【step-3】色を調整する。

最後は色調整です。まず、画像の周りを明るくして、ぼけテクスチャーを馴染ませていきます。

「新しいレイヤー」ボタンでレイヤーを追加して、名前は「グラデーション」としておきましょう。

【A】ツールボックスから「ブレンド」ツールを選んだら、
【B】描画色を濃いグレー（HTML表記で「333333」）、背景色を白（HTML表記で「ffffff」）にして、
【C】ツールオプションの「形状」の項目は「放射状」にしておきます。
この状態で下の画像のようにドラッグして「中心がグレー」→「外側が白」のグラデーションをつけましょう。

グラデーションが出来たら、「グラデーション」レイヤーのモードを「オーバーレイ」にしましょう。レイヤーが重なってボケが馴染みます。

次に、メニューから「レイヤー」→「可視部分をレイヤーに」をクリックしましょう。「可視部分コピー」という名前で新しいレイヤーが出来ます。

「可視部分コピー」レイヤーを選択した状態で、メニューから「色」→「トーンカーブ」をクリックしましょう。「カーブ」ウインドウが出てくるので下の画像のように調整して「OK」をクリックしましょう。全体に明るくしながらコントラストが強くなるようにしています。

お疲れ様です。これで全ての工程が完了です！テクスチャー素材をスクリーンで重ねるだけでも色々な画像が作れるので、素材を変えて試してみるのも面白いかもしれません。

完成！

加工前

完成版は以下からダウンロード出来ます。参考にしてみたい方はご自由にお使い下さい。
[Download] sample-bokeh-texture-complete.zip / 2.29MB

キラキラ光るフリーのボケテクスチャー素材。商用OK。

2012-01-18T22:18:00.001+09:00

カメラのピントがずれたときに出来るぼけを使ったキラキラ光るフリーのテクスチャー素材を紹介します。商用利用も可能なものを集めてみました。デザインの背景に使えば簡単にオシャレな雰囲気が出せそうです。

※紹介するテクスチャー素材は全て商用利用可能となっていますが、利用条件は変更していることもありますので、使う際は各素材の規約を確認しましょう。

30 Free Boken Textures | Lost and Taken
【利用条件】個人OK / 商用OK
鮮やかな色がオシャレでかわいいボケテクスチャーです。この記事のサムネイルでも使っています。
（フォントはこちらで紹介した「Ribbon」とこちらで紹介した「Deftone Stylus」）

5 Colored Grungy Bokeh Textures | Lost and Taken
【利用条件】個人OK / 商用OK
ぼかしに汚れたような加工をつけたテクスチャ素材です。レトロ・ビンテージなデザインに合いそうです。

Five Colourful Bokeh Textures | Circlebox Blog
【利用条件】個人OK / 商用OK
色鮮やかで滑らかなボケ方が特徴のテクスチャ素材です。クールでオシャレなデザインに合いそうです。

Bokeh Pack 6 | deviantART
【利用条件】個人OK / 商用OK
こちらはカラフルな星型のボケ味が特徴のテクスチャーです。

Bokeh Pack 2 | deviantART
【利用条件】個人OK / 商用OK
蝶や星型・花やハートの形をしたボケ味の素材です。おしゃれでカワイイ雰囲気です。

Bokeh Pack 3 | deviantART
【利用条件】個人OK / 商用OK
先に紹介した「Bokeh Pack 2」の色を抑えたバージョンです。もう少しシックな雰囲気にしたいときに。

Pollywaffle Bokeh Textures | deviantART
【利用条件】個人OK / 商用OK
スパンコールのようなカラフルでメタリックな雰囲気のボケテクスチャー素材です。オシャレなデザインに使えそうです。

フリー素材配布：ハート柄パターン4色セット

2012-01-17T22:31:00.001+09:00

オリジナルのハート柄パターンを配布します。カラーバリエーションは4種類です。

4色のカラーバリエーションがあります。

・個人利用でも商用利用でもお使い頂けます。
・加工して利用するのもOKです。
・クレジット表記やリンクは、なくてもOKですがしてくれるととっても嬉しいです。
・再配布はご遠慮ください。

以下よりダウンロードしてお使い下さい。
GIMP用・Photoshop用・PNGの形式が入っています。

[ Download ] heart-pattern-4colors.zip / 246KB

デザイン性の高いフリーフォント厳選3セット。商用OK。

2012-01-15T19:33:00.000+09:00

デザイン性の高いフリーフォントを厳選して3つ紹介します。アートな雰囲気が出せそうです。とってもハイクオリティなのに、どれも商用利用もOKです。各フォントのサンプルイメージも参考になります。

ダウンロードページ
糸を編みこんだような細い線で出来ているのが特徴のデザインフォントです。とっても柔らかい雰囲気。
使うにはShiftを押しながら大文字で入力しましょう。
【利用条件】個人OK / 商用OK

▼sample

ダウンロードページ
極細フォントに、ところどころ丸みがついているのが特徴的。アートな雰囲気が出せそうです。
【利用条件】個人OK / 商用OK

▼sample

ダウンロードページ
その名のとおり、リボン風のデザインフォントです。レトロな雰囲気に合いそうです。カンパウェアとなっていてサイト右側から好きな金額を寄付できるようです。0円でもOK。
【利用条件】個人OK / 商用OK

▼sample

※利用条件は変更している場合もありますので、各配布ページで確認してから使いましょう。

光沢感のある立体的な3Dテキストを作る

2012-01-14T17:59:00.000+09:00

光沢感のある3Dテキストを作る手順を紹介します。立体感や光沢の出し方は、色々なデザインに使えそうです。この記事はこちらの海外記事を参考にしています。

先におおまかな作業の流れを書いておきます。詳しい説明は次の「画像加工の手順」からです。

【step-1】テキストを作り遠近感をつける。
【step-2】立体感をだす。
【step-3】反射をつける。
【DownLoad】完成ファイルを配布しています。

【step-1】テキストを作り遠近感をつける。

次に、ツールボックスから「テキスト」ツールを選んで下の画像のような設定で画面のまんなかに大きく「GIMP」というテキストを作りましょう。（テキストツールの使い方についてはこちらです。）

【ワンポイント】
ここでテキストを大きく作っておくことで、あとで変形するとき仕上がりがキレイになります。画像は小さいものを拡大すると汚くなってしまいますが、大きいものを小さくする場合はキレイなまま変形することが出来るからです。

次に「遠近法」ツールを選び、文字の四隅をドラッグしてゆがませ、遠近感をつけましょう。

【step-2】立体感をだす。

立体感を付けるには、文字をたくさんコピーして少しずつずらしていきます。「レイヤーを複製」ボタンをクリックして文字のレイヤーをコピーし、「移動」ツールを使って右と上に1pxずつズラしましょう。キーボードの「→」と「↑」を一回ずつ押せばOKです。

次に、今ずらしたレイヤーをさらにコピーして、また1pxずつ右上にずらしましょう。この作業を合計5回繰り返すと下の画像のようになります。文字のレイヤーは計6枚になりました。

次は文字のレイヤーをまとめます。まず「背景」レイヤーを非表示にしてから、画像ウインドウの上のメニューから「レイヤー」→「可視部分をレイヤーに」をクリックしましょう。すると表示していたレイヤーをまとめたものが、「可視部分コピー」という名前で新しいレイヤーとして追加されます。非表示にした「背景」レイヤーは表示状態に戻しておきましょう。

【A】今作った「可視部分コピー」レイヤーを右上に6pxずつズラしましょう。
【B】そして、「可視部分コピー」レイヤーをさらにコピーして、また右上に6pxずつズラしましょう。
最終的に全体が1pxずつずれている状態になればOKです。確認するときは、「Ctrlキー」を押しながらマウスのホイールを使って拡大表示すると便利です。

全てずらし終わったら、真ん中の部分だけ色を白にします。「可視部分コピー」レイヤーを選択して、
【A】メニューから「色」→「着色」をクリックしましょう。設定用のウインドウが出てくるので
【B】「輝度」の項目を「100」にして【C】「OK」をクリックしましょう。文字が白くなります。

ここまでの画像とレイヤーの状態はこんな感じです。

【step-3】反射をつける

次に「GIMP#5」レイヤーをコピーしてレイヤーの一番上に持ってきましょう。そして、「移動」ツールでテキストの右上にぴったり合わせましょう。

次に「GIMP#6」を選択した状態のまま、メニューから「レイヤー」→「透明部分」→「選択範囲に加える」をクリックしましょう。文字の形の選択範囲が出来ます。

この状態で、「ブレンド」ツールを選び下の画像のようにグラデーションをつけましょう。ツールオプションの「形状」を「線形」にし、下から上に向かって、白→黒のグラデーションで塗ればOKです。

次に「楕円選択」ツールに切り替え、下の画像のような選択範囲を作り、「Ctrl + X」で選択範囲を切り取りましょう。切り取ったら選択範囲は「Ctrl + Shift + A」で解除しておきましょう。

このままでは反射が強すぎるようなので、「GIMP#6」レイヤーの不透明度を下げましょう。ここでは「70」にしてみました。不透明度を低くするほど反射が弱くなるのでお好みでOKです。

次は反射の角に丸みをつけていきます。「パス」ツールを選び、下の画像のようなパスを作りましょう。（パスツールの使い方はこちら）

次に、パスダイアログに切り替えて「パスから選択範囲を作成」ボタンをクリックしましょう。パスの形の選択範囲が出来るので「Ctrl + X」で反射部分を切り取ります。これで反射の角に丸みがつきます。

同じように他の角にも丸みを付けていきましょう。全て出来たら完成です！

完成！

【DownLoad】完成ファイルを配布しています。

今回の工程を完了させた状態のxcfファイルを以下からダウンロード頂けます。もし参考に欲しいという方がいましたら自由にお使い下さい。

sample-3d-text-complete.zip / 64.2 KB

【追記】
step-2の工程を自動化するスクリプトを「鉄とGIMP」さんが作ってくれました！「鉄とGIMP」さんは、以前紹介したGIMPで縦書きが出来るようにするスクリプト「縦書きふ～」の作者でもあります。もっと効率良く作りたいかたはお試し下さい。
鉄とGIMP | 文字を立体風にするスクリプト

バレンタインデーに使える写真やイラストのフリー素材配布サイトまとめ

2012-01-12T22:05:00.000+09:00

バレンタインに使える素材を配布しているサイトを紹介します。写真やイラストや画像パーツなどが配布されています。全て商用利用OKでクレジット表記などもなしで使えるサイトを集めてみました。

実際に素材を使うときは、各サイトの利用規約を確認して使いましょう。

ソザイング(タグ：「バレンタイ」で検索)
ソザイングさんは、写真や画像パーツを配布しているサイトです。
「バレンタイン」というタグが用意されているので探しやすいです。

こんな素材が見つかりました。

プレゼントとハート / ハート型マカロン / ハート型のシールとリボン

somephoto(キーワード：「バレンタインデー」で検索)
somephotoさんは、写真を配布しているサイトです。
「バレンタインデー」というキーワードでサイト内を検索してみました。

こんな素材が見つかりました。

ゴディバチョコ（赤） / ゴディバチョコ（金色） / クッキー

イラストAC(キーワード：「バレンタイン」で検索)
イラストACさんは、イラストを配布しているサイトです。ダウンロードには会員登録が必要ですが、ハイクオリティなイラストが揃っています。「バレンタイン」というキーワードでサイト内を検索してみました。

こんな素材が見つかりました。

water_heart [ red ] / うさぎとバレンタイン♪ / バレンタインチョコ作成中

ほかにも「ハート」や「チョコレート」などで各サイト内を検索してみても良いかもしれません。

バレンタインデーに使えるフリーのハート柄ブラシ素材。商用OK。

2012-01-11T22:52:00.000+09:00

フリーで使えるかわいいハート柄のブラシ素材を紹介します。バレンタインデーのデザインにピッタリです。全部で7種類、商用利用もOKの素材を集めてみました。

ここで紹介するのはPhotoshop用のブラシですが、GIMPではPhotoshopブラシがそのまま使えます。
使い方はGIMPのブラシ用フォルダに拡張子が「.abr」となっているファイルを移動すればOKです。

フォルダの場所は、
①「C:\Documents and Settings\ユーザー名\.gimp-2.6\brushes」または、
②「C:\Program Files\GIMP-2.0\lib\gimp\2.0\brushes」です。

※①に保存する場合はユーザー名が半角英数でないと上手く読み込めません。②に保存して使いましょう。また、メニューの「編集」→「環境設定」→「フォルダ」から好きな保存先を登録することも出来ます。

Leafy Vines
【利用規約】個人OK / 商用OK
植物のツタで出来たハート型のブラシです。色使いによってはカワイクもシックな雰囲気にも出来そうです。

Hearts of Today
【利用規約】個人OK / 商用OK
花や丸で出来たハート型ブラシです。かわいい雰囲気やポップなデザインに良さそうです。

Stripey Hearts
【利用規約】個人OK / 商用OK
ハート柄にストライプと少し汚れた加工をつけたブラシです。ポップなデザインにどうぞ。

Spatter Hearts
【利用規約】個人OK / 商用OK
塗料をハート型にこぼしたような柄のブラシです。やわらかい雰囲気が出せそうです。

Touch My Heart_Lite
【利用規約】個人OK / 商用OK
シンプルなハート型に汚しをかけたデザインのブラシです。この記事のサムネイルに使っているのもこのブラシです。ちなみにフォントは「商用OKの手書き風英語フリーフォント8種類」で紹介した「FFF Tusj」です。

Hearts Brushes
【利用規約】個人OK / 商用OK
ハートをモチーフにした色々なデザインのブラシのセットです。とってもポップな雰囲気。

Valentine floral decortaive heart brush
【利用規約】個人OK / 商用OK
ハートと植物の葉を組み合わせたデザインのブラシです。色々な種類があります。

※素材の利用規約は変更している場合もありますので、事前に確認してから使うようにしましょう。

商用OKの手書き風英語フリーフォント8種類

2012-01-09T21:00:00.000+09:00

手描き風のフリーフォントを紹介します。やわらかい雰囲気で味のあるデザインが作れそうです。全部で8種類。商用利用もOKです。

Jenna Sue font by Jenna Sue Design Co. - FontSpace
【利用条件】個人OK / 商用OK

Font Squirrel | Free Font FFF Tusj by Magnus Cederholm
【利用条件】個人OK / 商用OK

Two Turtle Doves Font | dafont.com
【利用条件】個人OK / 商用OK

Rolina Font | dafont.com
【利用条件】個人OK / 商用OK

Honey Script Font | dafont.com
【利用条件】個人OK / 商用OK
この記事のサムネイルで使っているのもこのフォントです。

Lovely Eunike Hans Font | dafont.com
【利用条件】個人OK / 商用OK

Faraco Hand Font | dafont.com
【利用条件】個人OK / 商用OK

Josh Handwriting Font | dafont.com
【利用条件】個人OK / 商用OK

画像補正の一手間で写真の見映えをアップさせる

2012-01-08T19:09:00.000+09:00

今年からもうひとつ「猫カメラ」というブログを始めてみました。猫の写真を少し補正してアップしているので、その手順を紹介します。ひと手間かけることで見映えが良くなります。

先におおまかな作業の流れを書いておきます。詳しい説明は次の「画像加工の手順」からです。

【step-1】レベルで明るさのバランスを整える
【step-2】トーンカーブで全体の明るさとコントラストを調整する
【step-3】目をクッキリさせて反射を強調する

サンプル用のxcfファイルを用意してみました。
これを元に解説しますので、同じ画像で練習したい方はダウンロードしてみてください。

sample-neko-camera.zip / 652KB

【step-1】レベルで明るさのバランスを整える

まずは画像の明るさのバランスを整えます。画像ウインドウの上のメニューから「色」→「レベル」をクリックしましょう。すると「レベル」ウインドウが出てきますのでここで調整していきます。

画像は一番明るい部分が完全な白、一番暗い部分が完全な黒になっているとバランスの良い明るさということになります。この状態にするには「入力レベル」のグラフの両端と△マークの両端が揃っていればOKです。

まずはデフォルトの状態ではグラフの両側の山が低くて見えにくいので、
【A】「対数ヒストグラム」のボタンをクリックしましょう。山が大きくなって見やすくなります。

次に△マークをドラッグするか、その下の入力ボックスに数値を入れて端を合わせましょう。ここでは数値で【B】「2」「1.00」「250」としました。【C】「OK」をクリックして適用しましょう。今回の写真はもともと大体バランスが合っていたので違いは少ないですが、全体的に少しクッキリしたと思います。

【step-2】トーンカーブで全体の明るさとコントラストを調整する

次はメニューから【A】「色」→「トーンカーブ」をクリックしましょう。「カーブ」ウンドウが出てきますので、グラフの上に点を打って下の画像のような形にしましょう。コントラストが上がり明るくなるので全体にクッキリした印象になります。【B】「OK」ボタンをクリックして適用しましょう。

【ワンポイント】
グラフを全体的に上に引っ張るほど画像が明るく、下に引っ張るほど暗くなります。また、グラフの左側が画像の暗い部分、右側が明るい部分を表しているので、左側を下げて右側を上げた「S字型」にすることで、暗い部分はより暗く、明るい部分はより明るくなってコントラストが強くなります。
、

【step-3】目をクッキリさせて反射を強調する

この写真はアップで写った猫の目がキレイだったので、さらに強調させてみたいと思います。方法は、目の部分だけにフィルタの「アンシャープマスク」をかけます。そのままかけて全体にクッキリさせてもいいのですが、全体的にかたい雰囲気になってしまうので今回は目だけに適用します。

まずは「クイックマスクモードに切り替え」ボタンをクリックしましょう。全体が赤く表示されます。この赤い部分がマスクで、フィルタがかからない部分になります。今回はフィルタをかける目の部分だけ消しゴムツールで消していきます。

【A】ツールボックスから「消しゴム」ツールを選んで、ツールオプションで、
【B】「ブラシ」を「Circle Fuzzy (19)」にして、【C】次に「拡大・縮小」の項目を「4.00」にしましょう。
ぼかしがかかっていてなるべく大きなブラシを使うことで、境界がぼやけて消した部分の境界が目立たなくなりキレイに見えます。設定した消しゴムで目の部分を消していきましょう。目の形に合わせて丸くマウスを動かすとキレイにいきやすいです。

出来たらもう一度「クイックマスクの切り替え」ボタンを押しましょう。クイックマスクモードが解除されて、消しゴムをかけた部分だけが選択範囲になります。

目を選択した状態でメニューの「フィルタ」→「強調」→「アンシャープマスク」をクリックしましょう。設定用のウインドウが出てきます。

【A】設定の数値は「半径」を「0.5」、「量」を「1.00」、「しきい値」を「0」にしましょう。目の反射が強調されます。【B】「OK」をクリックして適用したら完了です。【C】メニューから「選択」→「選択を解除」をクリックして選択範囲を解除しておきましょう。（ショートカットは「Shift + Ctrl + A」です。）

完成！

加工前

色の調整は操作としては簡単ですが、なかなか奥が深いです。上手く出来ると写真の質がぐっと上がって人に見てもらうのも楽しくなります。

画像サイズを変更する（画像の拡大・縮小）

2012-01-06T22:41:00.000+09:00

画像全体の大きさを変更する方法を紹介します。画像は大きいものを小さくする時はほとんど劣化しませんが、小さいものを拡大してしまうと大きく劣化します。あとで大きさを変えるかもしれない画像は最初から大きめのサイズで作っておきましょう。

画像を開いたら、画像ウインドウの上のメニューから「画像」→「画像の拡大・縮小」をクリックしましょう。すると「画像の拡大・縮小」ウインドウが出てきます。ここでサイズや品質を設定しましょう。

設定項目は以下のようになっています。

【A】幅・高さ：
拡大や縮小をしたあとの大きさを指定します。

【B】水平解像度・垂直解像度：
画像のきめの細かさを指定します。PCでみる画像は水平・垂直とも「72ピクセル/in」にしましょう。印刷用の画像の場合は水平・垂直とも「300ピクセル/in」くらいが一般的です。デフォルトで元の画像の解像度が入力されているので特に必要がなければ変更しなくてOKです。

【C】補間方法：
GIMPでは拡大や縮小をしたときの画像の劣化が目立たなくなるように調整してくれます。この項目ではその調整の仕方を選ぶことが出来ます。特に必要がなければデフォルトの「キュービック」のままでOKです。

設定を決めたら「拡大縮小」ボタンをクリックすれば、画像のサイズが変更できます。

項目の中で一番分かりにくいのが「補間方法」の項目だと思うので実際に比べてみました。下の画像は「幅540px・高さ180px」の画像を、一度3分の1のサイズに縮小してからもう一度3倍に拡大するという作業をそれぞれ違った「補間方法」で行っています。拡大で劣化しているので、その違いを見てみましょう。

まずは拡大・縮小をしていない画像です。全体にクッキリしています。

「補間しない」を選んだもの。画像は四角い点（ピクセル）の集まりで出来ているので、補間しないと四角が大きくなってドット絵のようになっています。

「線形」を選んだもの。画像をぼかすことでドット状の劣化をごまかしているようです。

「キュービック」を選んだもの。線形とほぼ同じですが、よくみると猫の黒目などが少しだけクッキリしてます。ぼかし方に強弱を付けているようです。

「Sinc(Lanczos3)」を選んだもの。キュービックよりぼかし方が大きく、強弱も強い感じです。

試してみるとこの画像では「Sinc(Lanczos3)」が一番良い結果でした。特に、ぼかして補間しているので右側の背景など元々ぼけている部分は見た目の劣化は少ないようです。ただ、どれも大きく劣化していることに変わりないので画像は拡大すると大きく劣化してしまうと思っておいた方が良いですね。

実際に書家が書いたフリーの日本語毛筆フォント。商用可。

2012-01-05T22:34:00.000+09:00

フリーの日本語毛筆フォントを紹介します。実際に書家の方が筆で書かれた文字をフォント化したものだそうで、とっても雰囲気のあるフォントが揃っています。全て商用利用もOKです。

青柳疎石フォント
【利用条件】完全フリー。配布や改変も自由。

衡山毛筆フォント
【利用条件】完全フリー。配布や改変も自由。

青柳衡山フォントT
【利用条件】完全フリー。配布や改変も自由。

衡山毛筆フォント行書
【利用条件】完全フリー。配布や改変も自由。
この記事のサムネイルで使っているのもこのフォントです。

衡山毛筆フォント草書
【利用条件】完全フリー。配布や改変も自由。

青柳隷書しも
【利用条件】個人OK / 商用OK

GIMPで縦書きが出来るスクリプト「縦書きふ～」

2012-01-04T22:25:00.000+09:00

GIMPで縦書きを実現するスクリプトを「鉄とGIMP」さんが公開してくれているので紹介します。縦書きをしたかったという人もかなりいるのではないでしょうか。

「縦書きふ～」は一度公開されてから、2011年12月10日に改良されています。
まずは以下のページから最新版の「fe-tategaki-auto.zip」をダウンロードしましょう。

縦書きふ～を改良して自動化 - 鉄とGIMP

ダウンロードした「fe-tategaki-auto.zip」を解凍すると3つのファイルが入っているので、全てGIMPのスクリプト用フォルダに移動しましょう。フォルダの場所は、「GIMPにスクリプトをインストールする方法」の記事で紹介しています。

インストールしてGIMPを起動すると、画像ウインドウの上のメニューの「ツール」の一番下に「縦書きふ～（Auto）」と「縦書きふ～（ルビ）」が追加されます。GIMPを起動していた場合は再起動後から反映されます。

まずは「テキスト」ツールを使って普通のテキストを入れましょう。詳しくは、「テキストツールの使い方」で紹介しています。（ここで使っているフォントはこちらで紹介した「はんなり明朝」です）

次に作ったテキストのレイヤーを選択した状態でメニューから「ツール」→「縦書きふ～（Auto）」をクリックすれば縦書きに変換した画像が新しいレイヤーとして追加されます。このときの文字の大きさや色などの設定は選択した文字のものがそのまま適用されます。

縦書きふ～（ルビ）の機能を使えば漢字にルビをつけることもできます。

まずはメニューから「ツール」→「縦書きふ～（ルビ）」をクリックしましょう。出てきたウインドウの「Text」の項目に文字を入力して「OK」をクリックすれば縦書きのテキストが作成されます。

このとき「（）」で囲んだ部分がルビになり、「#」の部分で改行します。デフォルトで「縦(たて)書(が)き#ふ～」と入力されているので、一度試してみると分かりやすいです。

文字の大きさやフォントなどの基本的な設定は標準の「テキスト」ツールと同じです。
その他にも以下のような設定項目が用意されています。

「()でルビをつける」：
チェックを入れると「Text」の項目で「()」で囲んだ文字がルビとして文字の横に配置されます。

「テキストレイヤーから文字とサイズと色を取得」：
チェックを入れると、「縦書きふ～（Auto）」のときと同じように、
選択したテキストレイヤーの文字の設定をそのまま反映します。

「テキストのサイズに合わせて画像を拡大」：
チェックを入れると、作ったテキストが大きすぎて画像をはみ出してしまう場合に、
自動でその分だけ画像を大きくします。

「鉄とGIMP」さんでは他にもスクリプトを公開されているので、
気になる方はそちらもチェックしてみては。僕もスクリプトかけるようになりたい。

商用可なレトロ・ヴィンテージ風のフリーフォント

2012-01-03T18:45:00.000+09:00

レトロ・ヴィンテージ風の英語フリーフォントを紹介します。特徴的なフォントが多く、上手く使えばデザインがグット引き締まりそうです。

ここで紹介するフォントは全て個人・商用問わず無料で使えるものですが、規約は変更している場合もありますので使う前に各素材の配布ページで確認しましょう。
フォントのインストール方法については、「GIMPにフォントをインストールする」の記事で紹介しています。

Parisian font by George Williams - FontSpace
【利用規約】個人OK / 商用OK

Font Squirrel | Free Font Airstream by Nick's Fonts
【利用規約】個人OK / 商用OK

Font Squirrel | Free Font Deftone Stylus by Larabie Fonts
【利用規約】個人OK / 商用OK
この記事のサムネイルもこのフォントで作ってみました。
（ちなみに背景はこちらを色調整して使いました。）

Font Squirrel | Free Font EastMarket by Nick's Fonts
【利用規約】個人OK / 商用OK

Font Squirrel | Free Font FontleroyBrown by Nick's Fonts
【ファイルの種類】
【利用規約】個人OK / 商用OK

Carnivalee Freakshow font by Livin Hell - FontSpace
【利用規約】個人OK / 商用OK

写真をミニチュア風に加工する（チルトシフトレンズ風）

2011-12-30T19:32:00.000+09:00

写真をミニチュア風に加工する方法を紹介します。もともとはチルトシフトレンズという特殊なレンズを使って撮影するものなのですが、画像加工でも再現することが出来ます。慣れてしまえば案外手早くつくれます。

先におおまかな作業の流れを書いておきます。詳しい説明は次の「画像加工の手順」からです。

【step-1】ぼかし効果をつける
【step-2】写真の周りを暗くする
【step-3】色調整

サンプル用のxcfファイルを用意してみました。
これを元に解説しますので、同じ画像で練習したい方はダウンロードしてみてください。

sample-tilt-shift.zip / 821KB

【step-1】ぼかし効果をつける

ミニチュア風写真の一番の特徴は、画像の外側が大きくボケているところです。
まずはこの特徴を再現していきましょう。

画像を開いたら、まず「クイックマスクの切り替え」ボタンをクリックしてクイックマスクモードに変更しましょう。（ショートカットは「Shift + Q」です。）この状態でマスクを作っていきます。

【A】ツールボックスから「ブレンド」ツールを選び、
【B】描画色を「黒」、背景色を「白」にしましょう。
【C】そしてツールオプションの「グラデーション」の項目を「描画色から背景色」にし、
【D】「形状」の項目は「双線型」にしましょう。

ブレンドツールの設定が出来たら、ドラッグして下の図のようなグラデーションをつけましょう。最終的に赤い部分がボカシのかからない部分になります。

グラデーションを塗ったら、もう一度「クイックマスクの切り替え」ボタンをクリックしてクイックマスクモードを解除しましょう。そして画像ウインドウの上のメニューから、「フィルタ」→「ぼかし」→「ガウシアンぼかし」をクリックしましょう。

「ガウシアンぼかし」ウインドウが出てきますので、
【A】「ぼかし半径」の項目を水平・垂直ともに「6px」に設定して
【B】「OK」ボタンをクリックしましょう。ぼかしをつけたらメニューから
【C】「選択」→「選択を解除」をクリックして選択範囲を解除しておきましょう。
（ショートカットは、Shift+Ctrl+ A です）

【step-2】写真の周りを暗くする

次は写真の周りが暗くなる効果を付けていきます。
この効果をつけることで写真の奥行きを強調することが出来ます。
（「フリー素材配布：写真の周りを暗くする」の素材を使うと簡単にすることも出来ますが、
ここでは一つずつ手順を追って作っていきます。）

まずは新しいレイヤーを作ります。レイヤーダイアログの「元画像」レイヤーを選択した状態で、
【A】「新しいレイヤーを追加」ボタンをクリックして、「新規レイヤー」ウインドウを出して下さい。
【B】そして「レイヤー名」の項目を「周りを暗く」と入力して
【C】「OK」ボタンをクリックしましょう。一番上に新しいレイヤーが出来ます。

次に今作った「周りを暗く」レイヤーを選択した状態でツールボックスから
【A】「楕円選択」ツールを選んで、どこでも良いので画像の上でドラッグして、
とりあえずテキトウな選択範囲を作って下さい。これをツールオプションで調整しましょう。
【B】「開始位置」の項目を「px」「40」「-40」、
【C】「大きさ」の項目を「px」「560」「560」と入力しましょう。
これで「画像の真ん中に幅と高さが560pxの円の選択範囲」が出来た状態になります。

【A】次はメニューから「選択」→「選択範囲を反転」をクリックしましょう。
これで画像の四隅を選択した状態になります。（ショートカットはCtrl+Iです。）
【B】この状態で、ツールボックスから「塗りつぶし」ツールを選び、
【C】描画色が「黒」のまま選択範囲の内側をクリックして黒く塗りつぶしましょう。

四隅を黒く塗りつぶすことが出来たら、
メニューから「選択」→「選択を解除」をクリックして選択範囲を解除しておきましょう。
（ショートカットはCtrl+Shift+Aです。）

この状態で、メニューの「フィルタ」→「ぼかし」→「ガウシアンぼかし」をクリックして
「ガウシアンぼかし」ウインドウを表示しましょう。
【A】「ぼかし半径」の項目を「水平・垂直ともに200px」にして
【B】「OK」ボタンをクリックして適用して下さい。四隅の黒にぼかしがかかります。

最後に「周りを暗く」レイヤーの「モード」を「オーバーレイ」にしましょう。

【step-3】色調整

最後は色調整です。ここでのポイントは彩度を上げることです。実際のミニチュアは表面が塗装されて彩度の高い色使いになっています。これを色調整で再現していきましょう。

まずはレイヤーが重なっている状態をそのまま色調整するためにレイヤーをまとめます。メニューから「レイヤー」→「可視部分をレイヤーに」をクリックしましょう。見えてる部分をまとめた画像が新しいレイヤーとして追加されます。

次に、新しく出来た「可視部分コピー」レイヤーを選択した状態で、
【A】メニューから「色」→「色相・彩度」をクリックして「色相・彩度」ウインドウを表示させましょう。
【B】ここで「彩度」の項目を「100」にして、【C】「OK」ボタンを押して適用しましょう。

次は明るさの調整です。コントラストを少し上げながら全体的に明るくしていきます。
【A】メニューから「色」→「レベル」をクリックして「レベル」ウインドウを表示させましょう。「入力レベル」の項目で両側のスライダーを内側に寄せるとコントラストが強くなり、真ん中のスライダーを左に寄せると全体的に明るくなります。
【B】ここでは数値で「10」「1.5」「200」に設定してみました。

お疲れ様です。完成です！写真がミニチュア風の雰囲気になりました。慣れればそんなに時間もかかりませんし面白い効果が出るので色々な画像に試してみるのも楽しそうです。

完成！

加工前

ミニチュア風の効果を写真ではなくイラストに試してみました。イラストの場合はもともと彩度が高いので彩度調整はしていません。それ以外は同じ手順で下の画像のようになりました。イラストでも立体感出てペーパークラフトのような雰囲気になりました。

完成！

加工前

フリーのモノクロのソーシャルアイコン素材まとめ

2011-12-26T22:23:00.000+09:00

フリーで使えるモノクロカラーのソーシャルアイコンをまとめて紹介します。モノクロなら色々なデザインに合いやすいので使い勝手も良さそうです。

素材ごとに利用条件を書いておきますが、規約は変更している場合もありますので使用の際には利用規約を読んでから使いましょう。

LinkDeck | Daniel Eckermann
【ファイルの種類】PNG
【利用規約】個人OK / 商用OK
光沢感がきれいなiPhoneアプリ風のアイコンのセットです。モノクロでクールな雰囲気です。

Black Twitter icons by ~iconhive on deviantART
【ファイルの種類】PNG / JPEG / ico
【利用規約】個人OK / 商用OK
Twitterのキャラクターを黒で再現したかわいくてクールなキャラクターアイコンのセットです。オレンジとのコントラストもいい感じ。

Simple Mini Black Social Media Icons | Creative Nerds
【ファイルの種類】PNG
【利用規約】個人OK / 商用OK
グレーの丸型アイコンのセットです。他のデザインの邪魔をしないのでさりげなく使いたいときに良さそうです。

Clean Black And White Social Media Icon Set | Creative Nerds
【ファイルの種類】PNG
【利用規約】個人OK / 商用OK
角丸の四角いアイコンのセットです。ほんのりかかったグラデーションがきれいです。

Dark Social Icons Set | Social Icons - Pixeden
【ファイルの種類】PNG / PSD
【利用規約】個人OK / 商用OK
グレーの丸型アイコンのセットです。マウスを乗せたとき用のカラーのアイコンも同梱されています。

Tron Legacy Icons for free
【ファイルの種類】PNG / GIF / BMP / ICO / AI
【利用規約】個人OK
映画「Tron」の雰囲気を再現したグロー効果のついたアイコンセットです。黒系のデザインに合わせてクールな雰囲気に使えそうです。

Free Social Media Icons for Designers - A Life in Pixels
【ファイルの種類】PNG
【利用規約】個人OK / 商用OK
黒の角丸アイコンのセットです。ロゴの文字は丸みのついた太字のデザインになっていてシンプルながら少しかわいい雰囲気。

1,540 inFocus Simple White Social Media Icons
【ファイルの種類】PNG
【利用規約】個人OK / 商用OK
白ベースにグレーのロゴがデザインされたアイコンセットです。ブラックの他にも合計10種類のカラーバリエションがあります。

IC Minimal Icon Set by design deck
【ファイルの種類】PNG / JPEG / PSD
【利用規約】個人OK / 商用OK
クッキリとした白の背景に濃い目のグレーで清潔感のあるデザインのアイコンセットです。

Arabiki | 切り取りメモ用紙風のソーシャルネットアイコン
【ファイルの種類】PNG
【利用規約】個人OK / 商用OK
タイトルの通り切り取りメモ用紙にプリントされたようなデザインのアイコンのセットです。少しだけめくれたデザインとペアになっているので、マウスを乗せるとめくれるようにしても良さそうです。

Arabiki | スタンプみたいなソーシャルアイコン
【ファイルの種類】PNG
【利用規約】個人OK / 商用OK
スタンプを押したような雰囲気のアイコンのセットです。赤バージョンもセットになっています。

【関連記事】
⇒フリーのソーシャルアイコンまとめ（Twitterなど）

かわいい飾り罫や飾り枠に特化したフリー素材配布サイト「FrameDesign」。

2011-12-25T23:45:00.000+09:00

「Frame Design」さんという飾り罫や飾り枠に特化したフリー素材サイトを見つけたので紹介します。文字や写真をかわいく飾るのにちょうどいい素材がたくさん紹介されています。

FrameDesignさんのサイトはこちらです。
デザイン枠、飾り罫素材専門サイト「フレームデザイン」frame-design.com

クラシックな雰囲気の飾り枠や…（ 1 / 2 ）

リボンや封蝋のデザインの素材も配布されています。（ 1 / 2 /3 ）

利用規約も分かりやすく商用もOKとのことで、安心して使えます。
（使用の際には規約を読んでから使いましょう。規約ページはこちら）

写真や文字だけではちょっともの足りないときにはサクサクっと使えて便利です。
僕も「商用可なフリーの花柄パターン素材10セット47種類」のサムネイルで使わせて頂きました！

商用可なフリーの花柄パターン素材10セット47種類。かわいい・キレイなデザイン色々。

2011-12-23T22:18:00.000+09:00

フリーで使える花柄パターン素材のセットを紹介します。背景に使いやすそうなシンプルなものからインパクトのあるイラスト調のものまで色々な素材が公開されています。全て商用利用もOKの素材です。

Paper flowers pattern
【ファイルの種類】Photoshopパターン
【利用規約】個人OK / 商用OK
花とツタをモチーフにしたPhotoshopパターンです。影がついていて立体感があるデザインもあります。全部で7種類です。

Free Vector Pattern - Hand-drawn Floral | Patternhead
【ファイルの種類】PNG / EPS
【利用規約】個人OK / 商用OK
青と白のシンプルなパターン素材です。花柄が薄くデザインされていて背景などに使いやすそうです。こちらは1種類。

Free vector pattern - Vintage Floral | Patternhead
【ファイルの種類】PNG / EPS
【利用規約】個人OK / 商用OK
黄色と白のシンプルなパターン素材です。温かい雰囲気が作りやすそうです。こちらも1種類。

Seamless Tile BirdsNberries by ~pixelsandicecream on deviantART
【ファイルの種類】PNG / Photoshopパターン
【利用規約】個人OK / 商用OK
鳥と葉っぱと小さな花がデザインされたかわいいパターン素材です。PNGの方はかなりサイズが大きいですが、Photoshopパターンの方に小さいサイズも入っています。自分でサイズを変えて登録してもOKです。こちらも1種類。

Grungy Floral Patterns by ~WebTreatsETC on deviantART
【ファイルの種類】Photoshopパターン
【利用規約】個人OK / 商用OK
シンプルな花柄に汚れた感じ質感を付けたパターン素材です。全部で10種類あります。

very flowery PS and Ai free patterns | PeHaa Blog
【ファイルの種類】Photoshopパターン / Illustratorパターン
【利用規約】個人OK / 商用OK
インパクトのある花のイラストがデザインされたパターン素材です。この記事のサムネイルで使っているのもこちらの素材です。ダウンロード用のボタンはPhotoshop用パターンとIllustrator用パターンで別になっています。全部で10種類です。

Summer Sunflower Photoshop And Illustrator PatternVector Patterns
【ファイルの種類】Photoshopパターン / EPS
【利用規約】個人OK / 商用OK
明るい雰囲気の大小の花のイラストがデザインされたパターンです。デザインに取り入れると元気な雰囲気が出せそうです。こちらは1種類。

first spring blossoms - free Photoshop and Illustrator patterns | PeHaa Blog
【ファイルの種類】Photoshopパターン / Illustratorパターン
【利用規約】個人OK / 商用OK
和風の花のイラストがデザインされたパターンです。カラーバリエーションは全部で5種類です。

花柄パターン素材 | Moo1990.
【ファイルの種類】JPEG
【利用規約】個人OK / 商用OK
清潔感のあるきれいな花のイラストのパターンです。全部で3種類あります。

photoshopパターン花柄 | 無料(フリー)素材
【ファイルの種類】Photoshopパターン
【利用規約】個人OK / 商用OK
こちらも清潔感のある花のイラストのパターンです。背景がチェック柄のものを含めて全部で8種類のバリエーションがあります。

GIMPで点線（破線）を引く

2011-12-22T22:15:00.001+09:00

GIMPで点線を引く方法を紹介します。方法は一通りではありません。ブラシツールやパスツールを使って点線を引くことが出来ます。

一番手軽なのはブラシツールを使う方法です。
【A】まずはツールボックスから「ブラシ」ツールを選びましょう。
【B】そして「ブラシダイアログ」の一番下の「間隔」の項目の数値を大きくすると
間隔が広がって点線を描くことが出来ます。

ここではブラシを「Circle(03)」、間隔を「200」に設定して描いてみました。
「Shiftキー」を押しながら点を打つようにクリックすると直線を描くことも出来ます。
（詳しくは「GIMPで直線を引く」で紹介しています。）
※この方法は鉛筆ツールを使っても同じ操作で点線を引くことが出来ます。

「パスに沿って描画」機能を使って点線を描くことも出来ます。まずはパスツールを使ってパスを作ります。
（パスツールについては「パスツールの使い方」で紹介しています。）

そしてパスダイアログに切り替えて作ったパスを選択しましょう。その状態で「パスに沿って描画」ボタンをクリックすると「パスの境界線を描画」ウインドウが出て来ます。ここで破線の設定をしましょう。

【A】まず「線スタイルを設定して描画」にチェックを入れ、

【B】「線の種類」の「+」ボタンをクリックしましょう。すると破線の設定をする項目が出て来ます。

【C】「破線パターン」の項目をドラッグすると好きな間隔の点線を作ることが出来ます。

【D】また、「既定の破線」の項目の中から容易されている破線を選ぶことも出来ます。

【E】最後に「ストローク」ボタンをクリックすればパスの形にそって点線を描くことが出来ます。

パスの形に沿って点線を描くことが出来ました。

【関連記事】
⇒「GIMPで直線を引く」
⇒「パスツールの使い方」

切り抜きツールの使い方（画像をトリミングする）

2011-12-20T22:43:00.000+09:00

切り抜きツールを使って画像の一部を切り抜く方法を紹介します。（これをトリミングといいます。）人物が写っている写真なら顔の部分を切り抜いてアップにしたり、Twitterやmixi用のアイコンを作るときにも便利です。

画像をトリミングするには「切り抜き」ツールを使います。画像を開いたらツールボックスから「切り抜き」ツールを選びましょう。

そして画像ウインドウの上をドラッグしましょう。するとドラッグした場所に四角いエリアが出来ます。このエリアが切り抜き範囲になります。

作った切抜き範囲の四隅をドラッグすると形や大きさを自由に変えられます。最初は大雑把に切り抜き範囲を作ってから四隅をドラッグして調整するという使い方が便利です。また範囲の内側をドラッグするとそのままの形で移動することが出来ます。

調整できたら切り抜き範囲の内側をクリックすれば切り抜きが適用されます。（「Enterキー」を押しても適用することが出来ます。）これでトリミングは完了です。

切り抜き範囲を作ってる途中でやっぱり切り抜きをやめたくなったときは範囲の外側をクリックすればキャンセルすることが出来ます。

トリミングした後の縦横の比率や画像のサイズが決まっている場合は、ツールオプションを使うと便利です。ここでは例として、「幅1280px・高さ960px」の横長の画像を、構図も考えながら最終的に「幅480px・高さ640px」の縦長になるようにトリミングしてみたいと思います。

まず画像を開いたら「切り抜き」ツールを使って適当な切り抜き範囲を作ります。そしてツールオプションを使って調整していきましょう。まずは大きさです。最終的な出来上がりに合わせて「大きさ」の項目を「px」「480」「640」としましょう。切り抜き範囲が入力した大きさに変わります。

構図的に猫の全身を入れたいのですが、指定した大きさでは範囲が小さ過ぎるようです。そこで幅と高さの比率を変えずに範囲を大きくしましょう。ツールオプションの「値を固定」にチェックを入れて項目を「縦横比」にしましょう。この状態で切り抜き範囲の四隅をドラッグすると幅と高さの比率を固定したまま、大きさだけを変えることが出来ます。

あとは「基本的な使い方」のときと同じように四隅や内側をドラッグして、猫全体がキレイに収まるよおうに調整しましょう。調整出来たら範囲の内側をクリックして適用します。下の画像のような感じになりました。

これで構図を合わせることが出来ました。最後に画像全体の大きさを合わせましょう。
【A】画像ウインドウの上のメニューから「画像」→「画像の拡大・縮小」をクリックしましょう。
すると「画像の拡大・縮小」ウインドウが出て来ますので、
【B】ここで「幅」の項目を「480px」、「高さ」の項目を「640px」にして
【C】「拡大・縮小」ボタンをクリックしましょう。これで全ての手順が完了です。

完成！

最終的な出来上がりは右の画像のようになりました。（クリックすると拡大します。）

切り抜きツールを使えば横の写真を縦にしたり、周りの余計なものを写真から取り除いたり出来て便利です。Twitterやmixiなどのアイコン画像を作るときにも役立ちます。

フリーのソーシャルアイコン素材いろいろ。facebookやTwitterボタンを個性的に。

2011-12-18T19:49:00.000+09:00

フリーのソーシャルアイコンをまとめて紹介します。TwitterやfacebookやRSSなどのアイコンは使用頻度も高そうです。このサイトで使っているアイコンもあります。

素材ごとに利用条件を書いておきますが、規約は変更している場合もありますので利用規約を確認してから使いましょう。

design deck | Twitter Speech Bubble Icons (PSD)
【ファイルの種類】JPEG / PNG
【利用規約】個人OK / 商用OK
Twitterカラーの白と水色を使ったシンプルなふきだし型アイコンです。少し立体感があってかわいいデザイン。

design deck | Twitter Follow Buttons & Icons (PSD)
【ファイルの種類】JPEG / PNG
【利用規約】個人OK / 商用OK
こちらもシンプルなフキダシ型アイコンです。周りのデザインを邪魔しないので使い勝手が良さそうです。

design deck | Mini Social Icon Set
【ファイルの種類】JPEG / PNG
【利用規約】個人OK / 商用OK
カラフルで明るい色合いのソーシャルアイコンです。色んな種類があって形も揃っているので使い勝手が良いです。このサイトでも使っているアイコンセットです。

Social Badges « Joe Furr's Design Blog
【ファイルの種類】PSD
【利用規約】個人OK / 商用OK
少し光沢感のある丸型ソーシャルアイコンのセットです。形式はPSD（Photoshop用の形式）ですがGIMPでも開けます。（バージョン2.6で確認しました。）パーツごとにレイヤーも分かれていて作り方の参考にもなるかも。

Friday Freebies: Flavours Icon Set And Cute Tweeters Icon Set - Smashing Magazine
【ファイルの種類】PNG
【利用規約】個人OK / 商用OK
Twitterの鳥を使ったキャラクターチックなイラストアイコンのセットです。色んなポーズがあってかわいい。

SleekSocial: Icon Pack
【ファイルの種類】PNG
【利用規約】個人OK / 商用OK
グラデーションのかかったクールな印象のアイコンセットです。シンプルな四角いデザインです。

Tron Legacy Icons for free
【ファイルの種類】PNG / GIF / BMP / ICO / AI
【利用規約】個人OK
映画「Tron」の雰囲気を再現したグロー効果のついたアイコンセットです。黒系のデザインに合いそうです。

Social Postage Stamps Part 1 | MediaLoot
【ファイルの種類】PNG
【利用規約】個人OK / 商用OK
切手をモチーフにしたカワイイアイコンセットです。ダウンロードするとき登録を求めるウインドウが出てきますがダウンロードだけも出来ます。

Green Thumb: A Free Social Media Icon Set
【ファイルの種類】PNG
【利用規約】個人OK / 商用OK
アイコンに葉っぱが生えたデザインのかわいいアイコンセットです。イラストチックな雰囲気です。

A Free Sophisticated Premium Peel Over Icon Set | Creative Nerds
【ファイルの種類】JPEG
【利用規約】個人OK / 商用OK
端がめくれたデザインの丸いアイコンのセットです。つやのつけ方がリアルです。

お正月に使えそうな無料の和風パターン56種類

2011-12-16T23:02:00.001+09:00

お正月などに使えそうなフリーの和風パターンを紹介します。全部で3セット56種類。全て個人・商用問わず無料で使えます。自分で作るのは難しい細かく描き込まれた和柄模様もパターンを使えば簡単です。

ここで紹介するパターンはJPEGやPhotoshop用のパターン素材です。PhotoshopパターンはGIMP用に変換して使いましょう。変換の仕方については「PhotoshopパターンをGIMPで使えるようにする」で紹介しています。また、パターンの使い方については「塗りつぶしツールの使い方」を参照下さい。

和風ぱたあん | Japanese style pattern by ~gimei
【ファイルの種類】Photoshopパターン
【利用規約】個人・商用OK
着物や和紙の質感のパターン19種類とシンプルな和柄模様のパターン20種類の合計39種類のパターンです。ハイクオリティなものが多く使いやすいです。この記事のサムネもこのパターンセットを使いました。

Sakura-Origami by ~Shishi2011 on deviantART
【ファイルの種類】JPEG
【利用規約】個人OK / 商用OK（クレジットが必要）
かわいいサクラをモチーフにした9種類の和柄パターンのセットです。クッキリとした色使いなので明るい雰囲気にしたいときにぴったりです。

Vintage Retro Grunge Wallpaper Patterns
【ファイルの種類】Photoshopパターン / JPEG
【利用規約】個人・商用OK
汚しを入れた質感が特徴的な8種類の和風パターンです。落ち着いた雰囲気のデザインにぴったりです。もっとクッキリさせたい場合は明るさをやコントラストを調整して使うのも良さそうです。

※この記事で紹介している素材は全て無料で使えるものですが、規約は変更している場合もありますので使用の際には利用規約を確認して使いましょう。

円に沿って文字を入れる（テキストを輪の形に配置）

2011-12-15T22:48:00.001+09:00

文字を円の形に沿って輪になるように入れる手順を紹介します。円のパスを作って「パスに沿ってテキストを配置」の機能を使います。文字を円状にきれいに一周させるに場合は何度か微調整をしましょう。

文字を円状に入れる手順は大きく分けて3ステップです。

1.円の選択範囲を作り、パスに変換する。
2.テキストを入れて「パスに沿ってテキストを配置」を適用する
3.配置したテキストを塗る

それでは一つずつ手順を紹介していきます。
完成すると右の画像のようになります。

1.円の選択範囲を作り、パスに変換する。

まずはツールボックスから「楕円選択」ツールを選んでください。そして文字を丸く並べたい場所に円の選択範囲を作りましょう。Shiftキーを押しながらドラッグすると選択範囲が円になります。（ここでは例として幅200px、高さ200pxで作ってみました。）

次に「パスダイアログ」に切り替えて、
【A】「選択範囲をパスに変換」ボタンをクリックしましょう。今作った選択範囲と同じ形のパスがリストに追加されます。作ったパスは「表示」ボタンをクリックして表示しておきましょう。

そして、選択範囲はもう必要ないので画像ウインドウの上のメニューから
【B】「選択」→「選択を解除」をクリックして解除しておきましょう。
（Shift + Ctrl + Aキーでも同じ操作が出来ます。）これで1つ目のステップは完了です。

2.テキストを入れて「パスに沿ってテキストを配置」を適用する

次に今作ったパスが選択された状態のまま「ツールボックス」から「テキスト」ツールを選んで画像の上を一回クリックし、好きな文字を入れましょう。文字の位置は画面内のどこでも大丈夫です。例として下の画像のような感じにしてみました。（テキストツールについては「テキストツールの使い方」で紹介しています。）

今回の例では同じ文字が繰り返してちょうど一周するようにしてみます。最後ににスペースを入れ、コピペして繰り返しましょう。文字の長さが一周分くらいになるようにします。あとで調整するので大体で大丈夫です。

文字を入れたらツールオプションの「パスに沿ってテキストを配置」ボタンをクリックしましょう。文字が丸く並んでその形のパスがリストに追加されます。ですが、長さが一周を超えて円の上のところでパスが崩れてしまっていますね。調整しましょう。

調整する方法はいくつかありますが、ここでは文字の大きさを少し小さくして調整してみることにします。
「Ctrl + Z」で作業を一つ戻してやり直します。ツールオプションで文字の大きさを「25px」から「19px」に変えてもう一度「パスに沿ってテキストを配置」してみました。今度は大体良さそうです。

※「Ctrl + Z」で作業を戻すとき、「GIMPテキストエディタ」が有効になっていると反映されません。画像ウインドウの外枠を一度クリックしてアクティブな状態にしてから「Ctrl + Z」を押しましょう。

しかしよく見ると最後だけ間隔が広すぎます。最後の微調整をしましょう。もう一度「Ctrl + Z」で作業を戻して、ツールオプションの「文字間」の項目を「0」から「0.2」に広げてからもう一度「パスに沿ってテキストを配置」ボタンをクリックしてみました。今度はぴったりです。これで2つ目のステップは完了です。

3.配置したテキストを塗る

最後に文字を塗りましょう。ステップ2で出来た文字のパスを選択して「パスから選択範囲を作成」ボタンをクリックして下さい。パスの形で選択範囲が出来ます。選択範囲が出来たら二つのパスを「表示」ボタンをクリックして非表示にしておきましょう。

次にレイヤーダイアログに戻り、テキストのレイヤーを非表示にします。
（必要がなければ削除してしまってもOKです。）
そして「新規レイヤー」ボタンをクリックしてレイヤーを追加しましょう。
次にツールボックスから「塗りつぶし」ツールを選んだら、選択範囲の内側をクリックして好きな色で塗りましょう。最後にメニューの「選択」→「選択を解除」で選択範囲を解除しておきます。
（Shift + Ctrl + Aキーでも同じ作業が出来ます）

お疲れ様です。これで全ての工程が完了です！文字を丸く入れるポイントはちょうど文字が一周するようにバランスをとるところでした。コツとしては「文字自体の長さ」→「文字の大きさ」→「文字間隔」という風にだんだん細かく調整していくと上手くいきやすいです。

文字を入力するときに改行を入れると文字を二重にすることもできます。

上の状態で色を塗り、その後で「回転」ツールを使って角度をまっすぐにしてみました。
さらにまんなかに画像を配置してみるとロゴっぽくなりますね。

ただ改行で二重にする場合、内側と外側で幅が違うのできれいに一周させるのは難しいです。一周させたい場合は、一つ目の円状の文字を作ってから、ステップ1に戻ってもう一つ別の円を作ってそこに文字を入れましょう。

【関連記事】
⇒「テキストツールの使い方」
⇒「パスの基本」

GIMPで直線を引く（Shiftキーを押しながらクリック）

2011-12-14T22:01:00.000+09:00

GIMPを使い始めたときによくある質問の一つが「直線ツールがないんだけど…」という質問です。GIMPではブラシツールなどの描画系ツールを「Shiftキー」を押しながら使うことで直線を引くことが出来ます。

直線は描画系ツール（「ブラシ」ツールや「鉛筆」ツール）ならどれでも引くことが出来ます。ここでは「ブラシ」ツールを使って描いてみましょう。

ツールボックスから「ブラシ」ツールを選んで下さい。直線を描く手順は以下の3ステップです。

１．直線を描き始めたいところでマウスを一回クリックして点を打ちましょう。

２．Sihiftキーを押しながら直線を引き終わりたいところまでマウスを移動しましょう。

3.Shiftキーを押したままで直線を引き終わりたいところをクリックしましょう。

以上で直線を引くことが出来ます。線の太さやブラシの種類を変えたい場合は「ツールオプション」で設定しましょう。

Shiftキーを押したあと、さらにCtrlも一緒に押しながらだと直線の角度が15度ずつ固定されます。こちらも図形を描くのに便利です。

もう一つ、図形を描くときに便利なのがグリッドの機能です。この機能を使えば線の長さや位置を揃えるのが簡単になります。グリッドを「表示」し、「グリッドにスナップ」の機能をONにすれば規則的な線が簡単に描けます。（詳しい使い方は「グリッドの使い方（表示 / カスタマイズ / スナップ）」で紹介しています。）

Shift + クリックが使えるツールは以下の8つです。線を引くツール以外にもぼかしたりにじませたりするためのツールにも有効です。

【関連記事】
⇒「グリッドの使い方（表示 / カスタマイズ / スナップ）」

Sparksブラシで作るパーティクル風テキストエフェクト

2011-12-12T22:15:00.000+09:00

GIMPに標準搭載されている中でも特徴的なSparksブラシを使ってパーティクル風のテキストエフェクトを作る手順を紹介します。ポイントは「パスに沿って描画」機能とレイヤーモードの加算です。

先におおまかな作業の流れを書いておきます。詳しい説明は次の「画像加工の手順」からです。

【step-1】キャンバスの設定と下地のグラデーション
【step-2】テキストを入れてグラデーションで塗る
【step-3】テキストに強弱のあるアウトラインを入れる
【step-4】テキストの周りにパーティカル風エフェクトをつける
【step-5】背景にパーティカル風エフェクトをつける
【DownLoad】完成したファイルを配布しています

【step-1】キャンバスの設定と下地のグラデーション

まずはキャンバスの設定をします。GIMPを起動したら「幅」を「640px」、「高さ」を「480px」で画像の作成を始めて下さい。（画像の作成については「画像の作成を始める」で紹介しています。）

それでは画像の下地をオレンジ色で塗っていきます。
【A】「描画色」をクリックして下さい。すると「描画色を変更」ウインドウが出て来ますので、
【B】「HTML表記」の項目に「ff9000」と入力して
【C】「OK」ボタンをクリックしましょう。描画色がオレンジ色になります。

そしてツールボックスから「塗りつぶし」ツールを選び、画像作成を始めたときに出来た
「背景」レイヤーを塗りつぶしましょう。

次は下地にグラデーションをつけていきます。「背景」レイヤーを選択した状態で、
【A】「新しいレイヤーを追加」ボタンをクリックして、「新規レイヤー」ウインドウを出して下さい。
【B】「レイヤー名」の項目を「下地 - グラデ縦」と入力して
【C】「OK」ボタンをクリックしましょう。一番上に新しいレイヤーが出来ます。

新しく作った「下地 - グラデ縦」レイヤーが選択された状態になるのでそのままで、
【A】ツールボックスから「ブレンド」ツールを選んで下さい。
【B】そして「描画色」を「白」、「背景色」を「黒」に変更しましょう。

その状態で画像のちょうど上端から始めて下端までマウスをドラッグしましょう。（Ctrlキーを押しながらドラッグすると真っ直ぐグラデーションを付けることが出来ます。）上から下に向かって白→黒のグラデーションで塗ることが出来ます。

グラデーションを付けたら「下地 - グラデ縦」レイヤーの「モード」を「オーバーレイ」にしましょう。色が重なってオレンジ色のグラデーションになります。

さらにグラデーションを重ねていきます。レイヤーダイアログの「新規レイヤー」ボタンをクリックして「下地 - グラデ円」という名前でレイヤーを作りましょう。レイヤーの順番は一番上になるようします。

今作ったレイヤーが選択された状態になるのでそのままで、「ブレンド」ツールのツールオプションの「形状」の項目を「放射状」に変更して下さい。そして画像ウインドウの中心（座標が「320.0、240.0」の位置）から始めて右下端までドラッグして下さい。放射状に白→黒に広がるグラデーションで塗ることが出来ます。

次に「下地 - グラデ円」の「モード」を「オーバーレイ」にしましょう。さらにグラデーションが重なってもう少し複雑なグラデーションになります。これで下地のグラデーションは完成です。

【step-2】テキストを入れてグラデーションで塗る

次は「テキスト」ツールを使って文字を入れ、グラデーションで塗っていきます。ツールボックスからテキストツールを選んで下さい。（基本的な使い方の紹介は「テキストツールの使い方」です。）

テキストツールを選んだらツールオプションで、
【A】「フォント」を「Segoe UI Bold Italic」、
【B】「大きさ」を「125px」にしましょう
このテキストはあとでパスにするためのものなので「色」の項目は何にしても構いません。ここでは白にしています。ツールオプションを設定したら文字がはみ出さないように画面の左上端あたりをクリックして
【C】「GIMPテキストエディタ」を出し、大文字で「SPARKS」と入力しましょう。
入力した文字がそのままレイヤー名になります。

次は今作ったテキストの位置を整えます。
【A】ツールボックスから「整列」ツールを選んで下さい。
そして今作ったテキストをクリックして整列の対象にしてから、ツールオプションの
【B】「中央揃え（水平方向の）」【C】「中央揃え（垂直方向の）」ボタンをそれぞれクリックして下さい。
テキストが画面の中心に整列されます。

次はテキストをパスに変換します。「SPARKS」レイヤーを右クリックし、出てきた項目から
【A】「テキストをパスに」をクリックしましょう。
パスダイアログに切り替えると「SPARKS」という名前でテキストの形のパスが追加されています。

そしてそのままパスを選択範囲に変換します。「SPARKS」パスを選択して
【B】「パスから選択範囲を作成」ボタンをクリックしましょう。これでテキストの形の選択範囲が出来ます。

それでは選択範囲をグラデーションで塗っていきましょう。まずはレイヤーダイアログに戻って新しいレイヤーを追加して下さい。レイヤー名は「テキスト」としておきましょう。順番は一番上に来るようにします。

レイヤーを追加したら「SPARKS」レイヤーは目のアイコンをクリックして非表示にしておきましょう。（このレイヤーはパスを作るためのものなのでもう使いません。削除してしまっても構いません）

【A】次にツールボックスから「ブレンド」ツールを選んで下さい。
【B】そして「描画色」を「fff900」、「背景色」を「ff1e00」に、
【C】ツールオプションの「形状」の項目を「線形」にしたら、
選択範囲の上端から下端までマウスをドラッグしてグラデーションで塗りましょう。このときキーボードの「Ctrl」を押しながらだと真っ直ぐグラデーションを付けることが出来ます。

塗り終わったら画像ウインドウの上のメニューから「選択」→「選択を解除」をクリックして選択範囲を解除しておきましょう。（「Shit + Ctrl + A」を押すだけでも同じ操作が出来ます。）
これでグラデーションの付いたテキストを作る工程は完了です。

【step-3】テキストに強弱のあるアウトラインを入れる

次は「パスに沿って描画」機能とブラシツールを使ってテキストの周りに白のアウトラインを入れていきます。
【A】まずは「レイヤーを追加」ボタンをクリックして新しいレイヤーを追加しましょう。
レイヤー名は「アウトライン」にして順番は一番上になるようにします。

【B】次にツールボックスから「ブラシ」ツールを選んで下さい。
【C】そして「描画色」を「白」にし、
【D】ツールオプションから「ブラシ」を「Circle (03)」に、
【E】「拡大・縮小」を「0.50」にしましょう。

ブラシを設定したら「アウトライン」レイヤーを選択した状態でパスダイアログに切り替えて下さい。
【A】そして「SPARKS」パスを選択して「パスに沿って描画」ボタンをクリックしましょう。
すると「パスの境界線を描画」ウインドウが出て来ますので、
【B】「ツールを使って描画」にチェックを入れ「ブラシで描画」を選び、
「ブラシ感度をエミュレート」にチェックを入れた状態で、
【C】「ストローク」ボタンをクリックしましょう。アウトラインを描くことが出来ます。
「ブラシ感度をエミュレート」にチェックを入れたので線に強弱がつきます。

強弱のあるアウトラインを描くことが出来ましたが、少しだけ色が薄いように感じます。もう少し強くしましょう。レイヤーダイアログに戻り「アウトライン」レイヤーを選択したまま「レイヤーを複製」ボタンをクリックしましょう。レイヤーが重なってアウトラインが強くなります。これでテキストにアウトラインを付ける工程は完了です。

【step-4】テキストの周りにパーティカル風エフェクトをつける

次はテキストにパーティクル風のエフェクトを付けていきます。まずは「レイヤーを追加」ボタンをクリックして新しいレイヤーを追加して下さい。レイヤー名は「パーティクル - 小」として順番は一番上になるようにしましょう。

パーティクル効果の付け方は基本的にはアウトラインのときと同じです。ブラシツールを選んだまま、
【A】ツールオプションで「ブラシ」を「Sparks」に変更しましょう。「拡大・縮小」は「0.5」のままです。
ブラシを設定したら「パーティクル - 小」レイヤーを選択した状態でパスダイアログに切り替えて下さい。ここでアウトラインのときと同じように「パスに沿って描画」機能を使います。「パスを境界線を描画」ウインドウでの設定項目も同じです。もう一度設定しても良いですが、
【B】今度は「Shiftキー」を押しながら「パスに沿って描画」ボタンをクリックしてみて下さい。
設定用のウインドウが表示されず直接ブラシで塗ることが出来ます。これは「前回と同じ設定で」パスに沿って描画してくれる機能で、効率的な作業に役立ちます。

※「前回と同じ設定」で描画するので途中で別の作業などをしてパスに沿って描画機能を使っている場合はそのときの設定で描画されます。その場合は「パスを境界線を描画」ウインドウを出してもう一度設定しましょう。「ツールを使って描画」にチェックを入れ「ブラシで描画」を選び、「ブラシ感度をエミュレート」にチェックを入れて、「ストローク」です。

次にレイヤーダイアログに戻り、今選んでいる「パーティクル - 小」レイヤーのモードを「加算」にしましょう。色の重なり方が変わって発光しているような雰囲気が出ます。（「加算」は発光感を出すのによく使われるモードです。）

次はもう少し大きいパーティクルを追加します。まずは「レイヤーを追加」ボタンをクリックして新しいレイヤーを追加しましょう。レイヤー名は「パーティクル - 大」としましょう。

そして「Sparks」ブラシを選んだまま、
【A】ツールオプションで「拡大・縮小」を「1.5」に変更しましょう。
ここからの手順は「パーティクル - 小」のときと同じです。
「パーティクル - 大」レイヤーを選択した状態でパスダイアログに切り替えて、「SPARKS」パスを選択して
【B】「Shiftキー」を押したまま「パスに沿って描画」ボタンをクリックして下さい。
ブラシを大きくした分少し大きいパーティクルが描けます。

次にレイヤーダイアログに戻って「パーティクル - 大」レイヤーのモードを今度は「スクリーン」にしましょう。そしてそのままだと文字が見えずらくなってしまうので、「テキスト」レイヤーの一つ下に移動して下さい。これでテキストの周りのパーティクルが完成です。

【step-5】背景にパーティカル風エフェクトをつける

次は背景のパーティクルを描いていきます。「Sparks」ブラシを使い、こちらは手描きで作っていきましょう。まずは「レイヤーを追加」ボタンをクリックして新しいレイヤーを追加して下さい。
レイヤー名は「パーティクル - 背景（大）」として順番は一番上にしておきましょう。

そして「Sparks」ブラシを選んだまま、ツールオプションで
【A】「拡大・縮小」の項目を「10」にして、
【B】「パーティクル - 背景（大）」レイヤーのモードを先に「スクリーン」にしておきましょう。
この状態で描き始めます。

それではパーティクルを描いていきましょう。パーティクルの場所はランダムに変わるのでマウスをドラッグしたり、その場でポチポチ点を打つようにクリックしたりして文字にかぶり過ぎないようにバランスを見ながら描いていきましょう。バランスが悪ければ「Ctrl + Zキー」ですぐに元に戻せます。（戻した作業を進めるのは「Ctrl + Yキー」です。）最終的に下の画像のようになりました。ここは全く同じにする必要はないので自分好みに描いていきましょう。

次は背景に少し小さいパーティクルも追加します。「レイヤーを追加」ボタンをクリックして新しいレイヤーを追加して下さい。
レイヤー名は「パーティクル - 背景（小）」として順番は一番上にしておきましょう。

そしてブラシのツールオプションで
【A】「拡大・縮小」の項目を「4」にして
【B】「パーティクル - 背景（小）」レイヤーのモードは今度は「加算」にしましょう。
この状態でパーティクルを描いていきましょう。

小さいパーティクルは画面の外側を丸くなぞるように描いていきましょう。バランスを見ながら気に入った感じに出来たら完成です！最終的に下の画像のようになりました。

完成！

【DownLoad】完成したファイルを配布しています

今回の工程を完了させた状態のxcfファイルを以下からダウンロード頂けます。参考にしたりこれを元にデザインをするのも自由です。zipファイルにしてありますのでダウンロード後に解凍してお使い下さい。

sample-sparks-particle-text-complete.zip / 1.68 MB

【関連記事】
⇒「テキストツールの使い方」
⇒「グラデーション背景とテキスト」

2011年 11/26～12/10 Twitterで気になった記事

2011-12-11T19:35:00.000+09:00

「GIMP2の使い方」では記事を書く為のネタ探しにTwitterを利用しています。その中で最近気になったトピックを紹介します。アカウントはこちら。よかったらフォローしてみて下さい。

GIMPでお絵描き | PoMemo
GIMPを使ったお絵描き記事です。題材は映画監督のジャック・ニコルソン氏。チョイスの時点で渋いです。油絵みたいな質感でリアル。絵心がないの僕としてはうらやましい。

ただただ上手い！ 12歳の男の子が描いた油絵がすばらしい
ヘニ・ヤオ・ツェング君という12歳の少年が描いた油絵です。とにかくうまい。見たものをそのまま描けるだけじゃなくとっても味のある絵なのがすごいです。最後にツェング君のドヤ顔写真も載ってます。

思わず見入ってしまうほど優れたミニマルデザインの映画ポスター50枚
ミニマル（最低限の要素だけのシンプルな手法）にデザインされた映画のポスターのまとめ記事です。素晴らしいデザインの刺激になります。映画の内容も知ってると思わずにやりと出来ます。

Ultimate Collection Of Cat Gifs (50 gifs)
ねこのGIFアニメを集めた海外記事です。アルティメットに癒されます。

ストレス発散に『ドカン！』と一発ぶっ放せるウェブサイト
画面をクリックしてボタンを押すと…。GIMPが固まったときや保存データがとんだときにどうぞ。（音が出るので注意）

GIMPにフォントをインストールする方法

2011-12-10T19:41:00.000+09:00

前回の記事でフリーの日本語フォントを紹介しましたので、フォントのインストール方法を紹介します。フォントは動作を軽くするためにもしっかりと整理して使うようにしましょう。

フォントをインストールする方法は、ダウンロードした後にフォント保存用のフォルダに入れるだけです。保存用フォルダの場所はいくつか種類があるので一つずつ紹介していきます。

「フォントをインストールする」というとこの方法が一般的です。インストールの方法については「武蔵システム」さんのサイトで画像付きで詳しく解説されていましたので参考にしてみて下さい。この方法を使えばGIMP以外のソフトでも共通してフォントを使えます。

※ただし、この方法だとOSに元々入っているフォントと一緒に管理することになります。後で消そうと思ったらもともとのフォントと区別がつかなくなったということが無い様に整理して使いましょう。フォントはたくさん入れるとGIMPの起動も動作も重くなりますし、他のソフトやWindows自体の起動も遅くなることがあります。

GIMPではインストールしたときに専用のフォントフォルダが作成されます。このフォルダで管理すればOSに元々入っていたフォントと一緒にならないので管理が楽です。「デザイン用のフォントはGIMPでしか使わない」という人にはオススメです。

GIMP用フォントフォルダの場所は、

WindowsXPなら「C:\Documents and Settings\ユーザー名\.gimp-2.6\fonts」、
VistaかWindows7なら「C:\Users\ユーザー名\.gimp-2.6\fonts」です。

ここにフォントファイルを移動すればGIMPの起動時やフォントの再読み込みをしたときに反映されます。

※ユーザー名に全角文字を使っている場合は、上手く読み込むことが出来ません。
その場合は次の「③保存場所を自分で指定する」を試してみましょう。

GIMPではフォントの保存場所を自分で指定することも出来ます。
【A】画像ウインドウの上のメニューから「編集」→「環境設定」をクリックして下さい。
すると「環境設定」ウインドウが開きますので、
【B】左の項目の「フォルダ」の左にある「+」マークをクリックしましょう。
保存先を指定するための項目が出て来ますので、
【C】その中の「フォント」をクリックすると右側にフォントの保存場所の設定項目が出て来ます。

フォントの保存場所を指定するには、
【A】左端の「フォルダの追加」ボタンをクリックしてから、
【B】右端のフォルダアイコンをクリックしましょう。
すると、フォルダの一覧が出て来ますので好きなフォルダを選ぶか、
【C】「フォルダの作成」ボタンをクリックしてフォルダを作りましょう。
※ここで作成するフォルダの名前や設置場所は全角文字が含まれないようにしましょう。
【D】最後に「OK」ボタンをクリックしましょう。
これでフォント用のフォルダを追加することが出来ます。

フォントフォルダが指定出来たら、そこにフォントファイルを移動してGIMPを起動すればOKです。

すぐに使える商用可の日本語フリーフォントまとめ

2011-12-09T23:57:00.000+09:00

個人・商用を問わず使えて登録なども不要な日本語フリーフォントを紹介します。色々探していたところ、ちょうど良いまとめ記事を見つけたのでその中から個人的に気に入ったものを抜粋して紹介します。

今回はコリスさんの「漢字も揃ってる、日本語のフリーフォントのまとめ -2011年版」という記事を元にしています。（コリスさんに紹介して良いか問い合わせたところ、快くOKしてくれました。感謝です！）

ここで紹介するフォントは全て個人・商用問わず無料で使えるフォントです。ただし、規約は変更する場合もありますので必ず確認してから利用するようにしましょう。

あんずもじ
バランスの良い手書き風のかわいいフォントです。「けいせん」と入力して変換し「┨」などを入力すると自動で絵文字になる変わった機能もあります。GIMPのリストでの表示名は「APJapanesefont」です。
【利用規約】個人・商用利用OK

しねきゃぷしょん
映画字幕のような雰囲気の味のあるフォントです。表示名は「cinecaption」です。
【利用規約】個人・商用利用OK

花鳥風月
水性ボールペンで書いたような丁寧な印象のフォントです。表示名は「TTEditFont3」です。
【利用規約】個人・商用利用OK

衡山毛筆フォント
筆で書いた達筆なフォントです。書家の青柳衡山先生が揮毫及び作成されたそうです。表示名は「KouzanBrushFont」です。
【利用規約】個人・商用利用OK

はんなり明朝
はんなりとした俳句や川柳で使われていそうなフォントです。この記事のサムネイルで大きく使っているのもこちらのフォントです。表示名は「HannariMincho」です。
【利用規約】個人・商用利用OK

MigMixフォント
少し丸みのあるスタンダードなフォントです。読みやすいのでマニュアルの作成などに良さそうです。表示名は「MigMix 1P」、「MigMix 1P Bold」です。
【利用規約】個人・商用利用OK

さわらびフォント
こちらも読みやすいスタンダードなフォントです。MigMixより少しだけカチっとした印象。表示名は「sawarabi Gothic Medium」です。
【利用規約】個人・商用利用OK

たぬき油性マジック
油性極太マジックで書いた手書き文字から作成したフォントです。印刷物などにも良さそうです。表示名は「Tanuki Permanent Marker」です。
【利用規約】個人・商用利用OK

切絵字
ザクザク切った感じの切り絵風フォントです。表示名は「kirieji」です。
【利用規約】個人・商用利用OK

怨霊フォント
日本語フリーホラーフォントという独自のジャンルのフォントです。漢字にもしっかり対応しています。表示名は「onryou」です。
【利用規約】個人・商用利用OK

コリスさんの「漢字も揃ってる、日本語のフリーフォントのまとめ -2011年版」では他にも色々なフォントが紹介されていますので、そちらもどうぞ。

※フォントはインストールするとGIMPを起動するたびに全て読み込まれます。大量に入れると起動が遅くなったり動作が重くなったりするので、いつでもデフォルトに戻せるくらいに整理して使いましょう。