スポンサードリンク


2013年11月25日

無料オンラインツールPixarEditorでクリスマス電飾コードを描く&雪の結晶《クリスマス☆ツイッターヘッダ画像》配布♪

20131129-sample_mini.jpg
※こちらはサンプル画像となります。



本日の素材は
雪の結晶《クリスマス☆ツイッターヘッダ画像》となります。

アイコンはサンプルの雪の結晶以外にトップスター(クリスマスツリーのてっぺんに飾る星)の2種入ってます。
twitter-xmas7-icon-star.png twitter-xmas7-icon-snow.png







素材は日々一素材/パントリー『ichipan!(イチパン!)』 
よりダウンロードできます♪

フリー素材 イラスト クリスマス 雪の結晶 ツイッター ヘッダー画像 サンプル画像
※こちらはサンプル画像になります。

雪の結晶《クリスマス☆ツイッターヘッダ画像》zip
ダウンロードは『ichipan!(イチパン!)』より♪




海産物、スイーツショップ、手紙、金魚、観葉植物、ハロウィン、クリスマス各シリーズへのリンクは、サイドバーに格納しております。
また、サイドバーに格納している素材以外にも素材は多数ございますので、ご入用の素材が見当たらない場合はキーワードで検索してみてくださいね♪






無料オンラインツールPixarEditorでクリスマス電飾コード描くよ♪


Pixlr Editorという無料オンラインツールですが、これが結構便利でくつきも出先でよく使います。

この間クリスマスリースのカスタマイズセットとしてまめ電とリースの単品を配布させていただいたのですが…
クリスマス クリスマスリース 電飾 リボン チャーム まめ電 カスタマイズセット まめ電 チャーム付きリボン イラスト フリー素材 リンクアイコン
クリスマスリースカスタマイズセット☆ホワイト(まめ電、チャーム付きリボン、リースパーツ)
まめ電のコードだけはカスタマイズによって形がかわるので、配布が難しい…

ということで今回はその無料オンラインツールを使用してまめ電用の電飾コードを描いてみたいと思います。

電飾コードだけでなく、ちょっとしたイラストを作成する際の基本操作がわかるように図説してみました。
・ファイルの新規作成。
・パソコンからのファイル呼び出し。
・レイヤー作成。
・画像の変形
・レイヤーの統合



簡単にできる分出来はそれなりですが、無料ツールにしてはかなり高性能。
Photoshop形式のpsdファイルにも対応していますし、写真の加工等も出来ますので、Pixlr Editorブクマしておいて損はないかと思います。





Pixlr Editorで新規ファイルを作成する


※画像はクリックで拡大します。

まずはPixarEditor
オンラインツール フリーツール 便利ツール Pixlr Editor 使い方

作業用に新規ファイルを作成します。
オンラインツール フリーツール 便利ツール Pixlr Editor 使い方

オンラインツール フリーツール 便利ツール Pixlr Editor 使い方
※少し大きめですが、デフォルトの800px×600pxのまま作成しました。






Pixlr Editorで素材を呼び出す


ファイル⇒画像を開く から任意の素材を呼び出します。
オンラインツール フリーツール 便利ツール Pixlr Editor 使い方

今回はリース(白)
オンラインツール フリーツール 便利ツール Pixlr Editor 使い方

と、まめ電(真横)7色を呼び出しました。
オンラインツール フリーツール 便利ツール Pixlr Editor 使い方



作業用ファイルに素材を移動する


一番手前のファイルがアクティブ(作業できる)ファイルです。
『まめ電コード』ファイルに『リース(白)』素材を移動します。(同じようにまめ電も全て移動しておきます)
オンラインツール フリーツール 便利ツール Pixlr Editor 使い方
アクティブレイヤーから任意のレイヤーにドラック&ドロップで移動できます。

今回素材のリースが白なので見やすいように背景色をバケツで適当な色で塗りつぶしました。
オンラインツール フリーツール 便利ツール Pixlr Editor 使い方

レイヤーの順番は上から「まめ電素材」「リース」「背景」です。
オンラインツール フリーツール 便利ツール Pixlr Editor 使い方


まめ電を配置します


編集⇒自由変形 で、まめ電を適当な位置に配置します。
オンラインツール フリーツール 便利ツール Pixlr Editor 使い方
等倍で拡大縮小したい時はShiftキーを押しながら操作します。(Winの場合)

大きさや角度を変えながら、お好みで配置してください。
オンラインツール フリーツール 便利ツール Pixlr Editor 使い方




電飾コードを描く


リースレイヤーと一番下のまめ電レイヤーの間に電飾コード用の新規レイヤーを作成します。
リースレイヤーを選択し、新規レイヤーを作成するとリースレイヤーの上に新規レイヤーが作成されます。
オンラインツール フリーツール 便利ツール Pixlr Editor 使い方
画像が無くてすみませんが電飾コード用レイヤーは「リースレイヤー」と「紫レイヤー」の間に作成します。

新規レイヤーはツールの右下のファイルアイコンをクリックすると自動で作成されます。
オンラインツール フリーツール 便利ツール Pixlr Editor 使い方

電飾コードのカラーはお好みで。(今回は適当に濃い緑にしてみました。)
オンラインツール フリーツール 便利ツール Pixlr Editor 使い方

ブラシ、鉛筆各ツールそれぞれ色々な設定ができますので試してみてください。
参考
オンラインツール フリーツール 便利ツール Pixlr Editor 使い方

ソケットから二股にコードが出ているとそれっぽい感じになります。
オンラインツール フリーツール 便利ツール Pixlr Editor 使い方


仕上げ


作業しやすいよう背景に入れた緑を非表示にします。
オンラインツール フリーツール 便利ツール Pixlr Editor 使い方

レイヤー⇒表示部を結合 で、画像を統合します。
オンラインツール フリーツール 便利ツール Pixlr Editor 使い方


電飾コードが描けました。
オンラインツール フリーツール 便利ツール Pixlr Editor 使い方
サンプルなので、ちょっとよれますが;;このあたりは、鉛筆ツールやブラシツールの設定で微調整でいかようにもなりますので、色々お試してみてくださいませ♪



最後にご注意!!


◆オンラインツールということで、手軽で簡単に使用できるのはいいのですが、誤ってブラウザバックボタンをクリックしてしまうと作業が水の泡になってしまいます。
こまめなバックアップをお忘れなく!(くつきは二度程やらかしました;;)

◆Chromeでは新規ファイル作成の定番ショートカット『Control+N』は使えないようです。(Chromeタブの方が新規作成されてしまいました)
ちなみに、ファイヤーフォックスとサファリでは普通に新規ファイルが作成が出来ました。




長くなってしまったのでスーパーの袋のカスタマイズ方法は明日ということで…

Pixlr Editorってピクセラエディターって読むんですね;;;;

今日の今日までピクサーエディターだと思ってました……○┼< バタッ



でっは〜(*´∀`*)ノシ



オススメ無料ツール


フリーツールやフリーソフトでもPhotoshopとは違った感じの効果を入れることが出来ます。

h4 イメージ Photoshop系のツールがオンラインで使えます⇒PixarEditor
h4 イメージ お絵かき系フリーソフト⇒Pixia




にほんブログ村 デザインブログ フリー素材へ
にほんブログ村
ランキングに参加しています☆お気に召しましたらクリックよろしくおねがいします顔文字イラスト ニコポッ揺れるハート

バナー 日々一素材 リンクフリー バナー イチパン! リンクフリー




posted by ヒビイチソザイ at 19:14 | Comment(0) | TrackBack(0) | チュートリアル | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック


スポンサードリンク









エフェクソールXR