きになるnet - きになるものを綴ったブログ

iPhone・MacからWordPressなどのWebに関することまで、きになるものを綴ったブログ

oixelmator-crayonline

Tips

7分で出来る!Pixelmatorで手書きクレヨン調のラインの作り方

投稿日:2012.06.19 更新日:

oixelmator-crayonline

フリーのアイコンやライン等が数多く配布されていますが、サイトを作っていて、たまに自分の欲しい物がないことって、たまにありませんか?

このサイトは、「あ〜でもない、こ〜でもない」といろいろなことを試すため、極力シンプルにと(現在の段階はですが…今後変わると思います。)思い作っているのですが、あまりにもあっさりしすぎるので少しのアクセントが欲しく、クレヨン調のライン、またはブラシを探していました。
いくつか、それらしき物がありましたが、自分の思うラインやブラシがなかったので、自分で作成してみました。

先日購入しました、Pixelmatorで作成しました。

スポンサーリンク

作成

今回は、280px、680px、660pxを作りました。
短いのを作ってリピートをしようと思いましたが、右端の細くなった部分を残しておきたくて、あえて別々に作成しました。
かなり原始的なやり方ですw

3サイズのうち280pxをご紹介します。
pixelmator_new

まず、新規作成から幅280px、高さ10pxでサイズを指定しました。

pixelmator_280

これだと、かなりやり難いのでズームインをして(ここでは800%にしました)

pixelmator_zoom800

作業をやり易いようにしました。
ブラシツールから、ブラシを選択を選び、今回はデフォルトのブラシを使用しました。
少しかすれた感じが欲しかったので、使用するブラシをダブルクリックし詳細を設定することにしました。

pixelmator_brashi

「先端の形状」の散布を少しあげ、「形状の揺らぎ」も少しあげると、画面下の図が若干かすれた感じになります。
これを用いて、あとはひたすら塗りつぶし作業を…

pixelmator_write

上下少しの隙間を空けた方がいい感じに出来ました。
ズームを元に戻して、出来上がったのがこちらです。
何となくそれっぽくなったかな…

pixelmator_finish

これを「png」ファイルにして、CSSでbackground-imageで指定し、padding等で整えてあげれば、こんな感じになります。

pixelmator_line

お試し下さい!

mixhost
当ブログは、MixHostで運営中です!
おすすめ記事

-Tips
-

Copyright© きになるnet - きになるものを綴ったブログ , 2018 All Rights Reserved.