FC2ブログ

2010年12月19日(日):20時58分

Pixiaでリボンをつくる

今回のテーマは、「Pixiaでリボン画像を作る」です。

クリスマストップ絵の左上についてるような、ちょっとしたアクセントになるリボンのつくりかたです。

【図】Aice5 in クリスマス トップ絵  
↑この絵の左上のリボンです。

今回はシンプルな直線ですが、応用すればいろんな形のリボンが作れる……はず(^^;)

PhotoShopのチュートリアル参考に、強引にPixiaでやってみました。

参考にしたのはこの記事。 Design a Retro Style Ribbon

web拍手 by FC2

準備

☆t値・d値は最大です。(256 or 100)

  1. 新規作成で適当な大きさのキャンバスをつくる(ここでは256×256ピクセルです。)
  2. レイヤを透明にする(消しゴム→塗りつぶし。もしくはDeleteキー)
  3. レイヤ名を「リボン」にする

【図】適当な大きさのキャンバスを新規作成→消しゴムで塗りつぶし→レイヤ名「リボン」│「Pixiaでリボン画像を作る」

ここで一度保存しておきます。

リボン本体をつくる

リボンの本体をつくるステップです。

「補助設定」で「領域外をマスク」にチェックしておきます。

  1. 「[領域]-長方形」で適当な大きさを領域選択
  2. リボンの色で「塗りつぶし」を実行(色は赤(R255、G60、B64)にしました)
  3. 同じように「[領域]-長方形」→「塗りつぶし」で、上下に緑(R39、G158、B60)の縁取りを入れる

【図】赤と緑でリボンをつくる│「Pixiaでリボン画像を作る」 

さらに、赤と緑の間に黄色いラインを入れます。

  1. 描画色を黄色(R255、G239、B63)にして、「[領域]-直線」で直線を引く
  2. 「線」をクリック(ブラシは一番下の右側の黒い■。サイズは3×3ピクセル)

【図】赤と緑の間に黄色いラインを引く│「Pixiaでリボン画像を作る」 

☆グリッドを使うと均等に領域選択や線が引けます。

グリッドについての詳しい解説は、「素材屋が教えるPixia講座」に詳しいです。
グリッドの使い方 | 素材屋が教えるPixia講座

リボンに質感を加える

表面に質感を出すために、ノイズを入れます。(テクスチャを使っても良いですが、ノイズのほうが簡単かな、と思ったので……)

「[領域]-閉鎖域」でラインも含めてリボン全部を領域選択する
【図】リボン全体を領域選択する│「Pixiaでリボン画像を作る」 
☆[Shift]キーを押しながらクリックすると複数領域を選択できます。

  1. 「フィルタ」→「ノイズ」
  2. 「ノイズ付加」
  3. 「設定」 をクリック
  4. 「ノイズのレベル」100%、「標準のノイズ」→「OK」 をクリック
  5. 「実行」を3回クリック

【図】「ノイズ付加」フィルタを3回実行│「Pixiaでリボン画像を作る」 

実行後の画像です。
【図】ノイズ付加後│「Pixiaでリボン画像を作る」

パッと見よくわかりませんが、拡大すると効果がわかります。

 【図】ノイズ付加後の拡大画像│「Pixiaでリボン画像を作る」

領域は解除しないまま、次のステップへ。

ハイライトを入れる

※このステップには、フィルタ「ふ~か」セットが必要です。
Pixia用フィルタ ふ~かセットの詳細情報 :Vector

新規レイヤを追加します。(「編集」→「追加」)

レイヤ名は「ハイライト」にしておきます。

フィルタペンでハイライトを入れる

フィルタペンは、ブラシを使って画像の一部にフィルタ効果をつけられる機能です。

Pパネルの描画効果アイコンの、右から2番目「フィルタ」をクリック。Pパネルが以下のように変化します。ここで「フィルタ」ボタンをクリック。

【図】Pパネルの「フィルタ」をクリック│「Pixiaでリボン画像を作る」

  1. 「フィルタ選択」ダイアログで、左側から「ふ~か」を選択
  2. 右側から「ハイライト」を選択
  3. 「設定」をクリック
  4. 赤緑青すべての成分を+3に設定
  5. 「OK」をクリック
  6. 「追加」ボタンをクリック
  7. 「終了」ボタンをクリック

【図】フィルタペンの設定│「Pixiaでリボン画像を作る」

ハイライトを入れていきます。

ブラシは、一番上の列の左を使いました。サイズは100×100ピクセルです。

【図】ブラシの設定│「Pixiaでリボン画像を作る」

任意の位置にハイライトを入れます。

ハイライトとそうでないところの境目をなじませるように、ポンポンとブラシを置いていくと、滑らかなグラデーションになる……気がします(^^;)

【図】ハイライトを入れる│「Pixiaでリボン画像を作る」

(Pixia ver.5には「覆い焼き」ツールがあるので、それを使うと良いかも。)

ここで一度保存しておきます。

影を入れて立体感を出す。

※このステップには、フィルタ「ふ~か」セットが必要です。

またフィルタペンを使います。

「フィルタ選択」ダイアログから「ふ~か」を選ぶところまではハイライトのときと一緒です。

右側から「焼き付け」を選び、「設定」をクリック。

「設定」ダイアログで「暖」寄り(5point)に設定→「OK」クリック→「追加」→「終了」

さっきと同じブラシ、同じ要領で、リボンの左右の端に影をつけます。

【図】「焼き付け」フィルタペンで影をつける│「Pixiaでリボン画像を作る」 

(Pixia ver.5には「焼き込み」ツールがあるので、それを使うと良いかも。)

ここで一度保存しておきます。

グリッドを加える

参照元のチュートリアルに「add the grid to ribbon」とある工程です。なんと訳したらいいのかわからないので、そのまま「グリッドを加える」で。

  1. 「新規作成」で3×3ピクセルの極小キャンバスをつくる
  2. 「消しゴム」で「塗りつぶし」をして、透明にしておく
  3. 背景色を灰色に変更
  4. 描画色を白にする
  5. 「ルーペ」で拡大する。拡大率は×32
  6. 「境界線」をクリックして、ピクセルの境界線を表示する
  7. 図のように、1ピクセルずつ白で塗る
    【図】グリッドをつくる│「Pixiaでリボン画像を作る」
  8. 「閉じる」でルーペを閉じる

「編集」→「部品庫へコピー」で、適当な名前を付けて部品庫に保存します。

このグリッド画像を、新規レイヤ上に「塗りつぶし」します。

  1. 新規レイヤ追加。レイヤ名「グリッド」。
  2. Cパネルのフォルダアイコンをクリック→「部品庫」をクリック
    【図】Cパネルのフォルダアイコンをクリック→「部品庫」をクリック│「Pixiaでリボン画像を作る」 
  3. 保存したグリッド画像ファイルを選択→「OK」
  4. 「画像で直接描画しますか?」→「いいえ」
  5. 「塗りつぶし」
    【図】「グリッド」で新規レイヤを塗りつぶし│「Pixiaでリボン画像を作る」
  6. レイヤの合成方法を「オーバーレイ」、レイヤ濃度を40%に。
    【図】レイヤの合成方法を「オーバーレイ」、レイヤ濃度を40%に│「Pixiaでリボン画像を作る」

ここで一度保存(まあ、好きなタイミングで保存すれば良いんですが^^;)

ドロップシャドウをつける

リボンの下に影をつけます。

まずは、背景色を白にしておきます。

つぎに、「リボン」レイヤに戻って作業します。

  1. 「編集」→「影の作成」をクリック
  2. 「影の位置」横縦ともに1。「影のぼかし」10。
  3. 「影色」をクリック→灰色にする。(ここではRGBそれぞれ145)→「OK」

【図】「影の作成」でドロップシャドウをつける│「Pixiaでリボン画像を作る」

↓こんなかんじになります。
【図】ドロップシャドウまで終了│「Pixiaでリボン画像を作る」

個人的にはこのままでも良いかなと思います。

さらに立体感を出したい場合はもう1ステップ。

※ドロップシャドウをつけると、一度Pixiaを終了してもう一度開いたときに、影の分だけキャンバスサイズが大きくなるかもしれません。(うちの環境ではなります)

その場合は、「画像」メニューの「キャンバスサイズを変えて複製」で、余白部分(右側と下側)のサイズを減らして、改めて保存しなおすと良いでしょう。

丸みを表す影をつける

このリボンは、光沢のある部分を中心にアーチ形になっていると考えられます。

そこで、矢印部分にアーチ形を強調する影をつけます。 
【図】影をつける部分│「Pixiaでリボン画像を作る」

新規レイヤを追加。レイヤ名「影」にします。

「影」レイヤを「リボン」レイヤの下に移動します。
【図】レイヤの並び順│「Pixiaでリボン画像を作る」

「影」レイヤに、「[領域]-多角形」を使って三角形の領域をつくります。

まずは左側から。

  1. 各角をクリックして、最後に右クリックで領域を閉じる
    【図】三角形の領域をつくる│「Pixiaでリボン画像を作る」
  2. 「トーンフィルタ」をクリック→左から右へのグラデーションを選択→「OK」
    【図】トーンフィルタ│「Pixiaでリボン画像を作る」
  3. 描画色を影色にする(今回はRGBそれぞれ145)
  4. 「塗りつぶし」を実行
  5. 領域解除を解除

【図】左側の影をつけた│「Pixiaでリボン画像を作る」

右側も同じように。「トーンフィルタ」を逆方向のものに変えるのを忘れずに。

【図】右側の影をつけた│「Pixiaでリボン画像を作る」

影と背景の境目がギザギザしているので、ぼかしてなじませます。

まず、トーンフィルタを解除します。「トーンフィルタ」→設定ダイアログの左下「クリア」ボタンをクリック→「OK」

  1. Pパネル左から2番目の「ぼかす」をクリック
  2. 「フリーハンド」をクリック
  3. 影と背景の境目をブラシでなじませる

これで、「丸みを表す影をつける」ステップは終了です。こんな感じになりました。

【図】丸みを表す影、終了│「Pixiaでリボン画像を作る」

背景を透明化する

つぎは、パーツとして他の作品への貼り付けられるよう、一枚のレイヤに結合して背景を透明化します。

※このステップには、まっささんの「透明化処理1.4以降用」フィルタが必要です。
ダウンロードは、まっさのお絵かきページ→「Filter」→「ファイル置き場へGO!」→画像透明化(PIXIA ver 1.4e以降専用)「TRANS_A.ZIP」をクリック

レイヤを結合する

すべてのレイヤを結合します。

  1. 「画像」→「レイヤの結合」
  2. 「非表示レイヤを破棄して新規ウインドウ」と「不透明にする」にチェック
  3. 「OK」をクリック

結合された「名前なし」のキャンバスができるので、これを別名で保存します。

以降は、この新しく保存したファイルを編集していきます。

背景部分を領域選択して、「透明化」フィルタをかける

「[領域]-長方形」ツールで、背景の部分(上部)を領域選択。ドロップシャドウ部分まで選択します。
【図】背景部分を選択する│「Pixiaでリボン画像を作る」

  1. 「フィルタ」→「まっさ」選択
  2. 「透明化処理」を選択
  3. 「設定」をクリック
  4. 背景色「白」を選択
  5. 「OK」をクリック
  6. 「実行」をクリック

【図】フィルタで透明化│「Pixiaでリボン画像を作る」

いったん、領域選択を解除します。

透明になったかどうかは、背景色を変更すると確認できます。

背景色を灰色に変更しました。

【図】背景色を変更して、透明になったか確認│「Pixiaでリボン画像を作る」

透明化処理を行った部分が、背景が見えて灰色になった=透明になっています。

下の部分も同じようにして、背景を透明化します。

【図】下の部分の背景も透明化する│「Pixiaでリボン画像を作る」

これで、背景が透明になりました。コピーして、別の作品に重ねて貼り付けることが可能です。

作例

【図】別のイラストに貼り付けてみた│「Pixiaでリボン画像を作る」 

2年くらい前のクリスマストップ絵に、今回つくったリボンを貼り付けてみました。「貼り付け」→「回転」で斜めにしています。

「リボン本体をつくる」ステップで模様をつければ、ドット柄とかストライプとか、いろんな模様のリボンがつくれると思います。

クリスマス直前ですが、写真やイラストにちょっとしたアクセントとしてリボンをつけてみるのはどうでしょう?

2011年4月18日


「お絵かきstudy room」に、「メイキング:Pixiaでリボン画像を作る」をupしました。

この記事の一部を変更したものです。

タグ : Pixia メイキング リボン

関連記事・新着記事

Loading...

コメント

コメントを書く


カテゴリ
最新記事
広告


Twitter
RSS
ND!気まぐれ日記のRSSフィード
リンク
Special Thanks

[猫カフェ]futaha

with Ajax Amazon

カレンダー
06 | 2020/07 | 08
- - - 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 31 -
過去ログ

2013年 11月 【1件】
2013年 10月 【1件】
2013年 09月 【1件】
2013年 08月 【1件】
2013年 07月 【3件】
2013年 06月 【3件】
2013年 05月 【1件】
2013年 03月 【3件】
2013年 02月 【2件】
2013年 01月 【4件】
2012年 12月 【2件】
2012年 11月 【2件】
2012年 10月 【3件】
2012年 09月 【2件】
2012年 08月 【2件】
2012年 07月 【5件】
2012年 06月 【3件】
2012年 05月 【2件】
2012年 04月 【4件】
2012年 03月 【2件】
2012年 02月 【3件】
2012年 01月 【3件】
2011年 12月 【2件】
2011年 11月 【5件】
2011年 10月 【6件】
2011年 09月 【4件】
2011年 08月 【6件】
2011年 07月 【7件】
2011年 06月 【7件】
2011年 05月 【8件】
2011年 04月 【8件】
2011年 03月 【7件】
2011年 02月 【7件】
2011年 01月 【9件】
2010年 12月 【10件】
2010年 11月 【8件】
2010年 10月 【1件】
2010年 07月 【2件】
2010年 06月 【1件】
2010年 05月 【2件】
2010年 04月 【5件】
2010年 03月 【3件】
2010年 02月 【2件】
2010年 01月 【3件】
2009年 12月 【9件】
2009年 11月 【7件】
2009年 10月 【11件】
2009年 09月 【9件】
2009年 08月 【14件】
2009年 07月 【12件】
2009年 06月 【13件】
2009年 05月 【10件】
2009年 04月 【7件】
2009年 03月 【10件】
2009年 02月 【13件】
2009年 01月 【13件】
2008年 12月 【12件】
2008年 11月 【12件】

検索フォーム
タグクラウド