テクスチャーなどに使えるグランジ、ダメージ、劣化した壁シリーズ-022nd2018年6月19日トロピカルパターン無料ダウンロード2nd2014年12月19日パステル調バックグラウンドイメージ6枚-ダウンロードフリー2nd2014年2月13日Fotorで画像加工。WORKS(イメージングワークス)」をオープンいたしました。PolicyHomeBlogデザインチップス手書き&スキャンをベクター変換!ちょっとした一手間でクオリティが上がるかもしれない小技2nd2013年6月6日デザインチップス1ShareTweetこんばんは、今回のデザインチップスですが、またまた小技の紹介で申し訳ありません。ほんのちょっと手を入れるだけで後の作業が楽になる系というか、あれ、ちょっと見栄え良くなってねぇ?的なデザインチップスです。手書きで描いたイラストをスキャンしてイラストレータ使ってベクターデータに変換ってみなさんも良くやりますよね?え、やらない?いやいややるでしょう。しても手書きの雰囲気を出したかったり、いきなりイラストレータで描き始めるのは難しいなってことはありますよね?イラストの種類にもよりますので全てに当てはまるやり方ではないですが、ものによっては役立つかなと。ペンタブを使いこなせる方ならあまり問題ないかもしれませんが、私みたいに買おう、やろう、始めるぞーペンタブでおれも最強グラフィッカー!と思いながら3年間言い続けてるだけの人。この先も買わないと思いますので、この記事を読んでみる価値はあるんじゃないですかねw昔はストリームラインというソフトで試行錯誤しながらベクターデータに変換していた時期もありますが、今はイラストレータにベクター変換機能がついてますね、とっても便利です。!なかなか思い通りの変換がされないなぁと思うことも(私は)あります。そこでベクター変換する前にフォトショップでちょちょっといじっておけば少しだけ見栄えに差が出ます。前置き長いのはいつものことだと思って勘弁、では行ってみましょう!まず図1のように適当なイラストを描きます。今回はサインペンで描いたものです。(絵が雑なのは仕上がりでの差を確かめるため。いう見苦しい言い訳は内緒)図1Bのように拡大してみると線がにじんでしまってますね...図1図1Bまぁ、いらない部分を消しゴムツールで消しとくくらいはみなさんやってると思いますので割愛しますね。小綺麗になったらフォトショップのフィルターで少し加工してみましょう。Blurを使ってあえて少しだけ(画像サイズによって設定はまちまちなので設定値は割愛します)ぼかしてみましょう。例によって英語版を使用してますので日本語のフィルター名はわかりません。あしからず...図2わかりにくいかもしれませんが、少しぼやけましたね。次はぼかした画像をすっきりさせてみましょう。Blurというフィルターを使って設定値は画像を見ながら調節してみましょう。図3のようにぼやけてた輪郭が少しだけはっきりしました。これでもう少しはっきりすると思います。Blurをすっ飛ばしてもいいかもしれないですね。お好みでやって見てください。ぼかした輪郭がはっきりしてくればいいかなと思います。!なんで高解像度でスキャンした画像をわざわざぼかしてからまた輪郭をすっきりさせるのか?これは手書きで描いた紙の質や描いたペンの種類にもよりますが、普通紙に細めのサインペンなどで描いたものや鉛筆で描いたものなどは紙ににじみがでたり紙のごくわずかな凹凸などのせいでスキャン画像をそのままベクター変換した時にアリに食われたような線になったりするのをふせぐため。後でスキャンした画像をそのままベクター変換したものと見比べてみましょう!そしてそして、作業はまだ続きがあります。これはお好みで飛ばしてもいいかもしれませんが、単調な線幅を簡単に味付けするためにやってみましょう。Knifeを使います。図4のように全体をみながらエフェクト値の調整するといいんじゃないかなと思います。5B参照)、これはお好みで^^図5A図5Bさてこれでフォトショップの作業は終わりです。図6のようにイラストレータを開き画像を配置しましょう!図6次にいよいよベクターデータへと変換するわけですが、ここでの設定値で気をつけること。図7を参照してください、スレッショルド値(Threshold)この値を高くすると黒い部分がどんどん増えていきますね。試して好みの値で!そしてブラー(Blur)ぼかしの設定です。線のがたつきなどが解消され、不必要なアンカーポイントが少なくなるのでお試しあれ。Areaも値を大きくすることで細かすぎて必要なさそうなアンカーポイントを削除&ゴミみたいな小さいオブジェクトも消し去ることができるので、いろいろいじることオススメです。図7はい、これでベクター変換をすると図8のようになります。スキャンしてほぼそのままの画像をベクター変換したものです。図9そして並べたものがこちらの図10です。好みがあるでしょうが、図11の拡大画像をみてください。線ががたがたしているのが加工なしでベクター変換したものです。図10図11このように差がでますので使い方や自分好みの独自のやり方を模索していただくのが一番良いと思いますので、この記事はちょっとした参考記事だと思っていただければと思います。ま、とりあえず着色だけしてみましたw図12最後に、簡単に箇条書きしてみましょう。Knife)イラストレータで設定を少し気にしてベクター変換こんな感じです。やってみると大した手間ではないのでもし私と同じようにディフォルトのベクター変換がきれいにいかない人にはオススメの超ピンポイント記事です。自分好みの設定値ができあがってくると試行錯誤する作業が減っていくのでお試しあれ!まぁ、最終的にオチをつけるとすればですねぇ。ペンタブ買って腕磨けやって話です。いや違うかwさて、今回もたいしたチップスではないですが、気にしたらちょっと差がでるかもしれないという、微妙なデザインチップスをこれからも模索しますのでよろしくお願いします。Author2ndグラフィックデザイン、アパレルデザイン、Webコンテンツ作成、SEOコンテンツ作成、Webサイト作成等。次は以前書いたこちらの記事のように画像をベクター変換をします。WORKS(イメージングワークス)」をオープンいたしました。Twitterツイートショーケースギャラリーデザイナーズショーケースで紹介させていただいた方々の作品です。画像をクリックでショーケースの記事へ移動します。テクスチャーなどに使えるグランジ、ダメージ、劣化した壁シリーズ-012nd2018年6月19日トロピカルパターン無料ダウンロード2nd2014年12月19日パステル調バックグラウンドイメージ6枚-ダウンロードフリー2nd2014年2月13日Fotorで画像加工。2018このサイトはcookieを利用して、コンピュータに情報を保存しています。