テクニック

WEBデザインの品質をあげるテクニック集です。クオリティを上げるための技術やヒントをご紹介します。

Back Number

フリー素材でサイトを作る グローバルナビ編

2012年04月05日
フリー素材でサイトを作る グローバルナビ編

今回はフリーのアイコン素材を使って、ショッピングサイトのグローバルメニューをつくります。

03

2012年07月17日
写真素材がない時のデザイン方法 キービジュアル編

今回は、素材がない時のデザイン方法を、キービジュアルをデザインする場合に絞って考えてみたいと思います。

02

2012年09月11日
写真に関しての「困った」を解決!~ サイズが小さい・解像度が低い場合 ~

入稿された写真素材のサイズが小さい・解像度が低い!そんな時のデザイン対処方法です。

01

2012年11月08日
フリー素材でサイトを作る タイトル・見出し編

グローバルナビ編の続編!簡単で見栄えのする見出しを作りましょう。今回はいくつかパターンをご紹介します。

index_img

2013年08月09日
テイストや雰囲気の作り方 ~前編~

デザインを作る上で、必要となってくるのがテイストです。見た目も雰囲気もとても左右される大切な内容です。今回は、テイストの作り方についてご説明します。

index_img

2013年08月09日
テイストや雰囲気の作り方 ~後編~

デザインを作る上で必要なテイストについて、今回は後編としてテイストの作り方を実践的にご説明します。

初めてでもできる!ペンツールを使ってお絵かき ~描き方編~

2013年08月16日
初めてでもできる!ペンツールを使ってお絵かき ~描き方編~

初心者にとってとっつきにくいペンツール。思い通りに描けないという方もこれを読めば、きっと使いこなせるはず!

pen

2013年08月19日
初めてでもできる!ペンツールを使ってお絵かき ~調整編~

初心者にとってペンツールは、どう使えばいいか悩むところではないでしょうか? なんとなく線は引けても、思い通りに描けないと…

index_img

2013年08月22日
絵心がなくても描ける! トレースから作るイラスト

ペンツールの使い方をある程度マスターしたら今度は、トレースをしてましましょう。今回は、写真をトレースしてイラストにします。

index_image

2013年08月26日
作り方のコツを伝授! 実例で学ぶロゴデザイン

今回は時間をかけずに作成するロゴの作り方をご紹介します。例としてWebサイトのロゴの作り方をまとめました。

イラストレーターで実現! 手書き風イラストの描き方

2013年08月28日
イラストレーターで実現! 手書き風イラストの描き方

今回はイラストレーターの効果を使って、手書き風のイラストにチャレンジ。ちょっと手を加えるだけでデザインに温かみがでてきます。

簡単ロゴデザイン 悩まず作るコツとポイント

2014年02月07日
簡単ロゴデザインVol.1 悩まず作るコツとポイント

作る時に悩んでしまうのは、作り方のルールを知らないからなのかもしれません。そこで今回は、悩まずロゴを作れるポイントをご紹介します。

テクニック一覧ページを見る

Special 特集

catch_icon

2018年12月06日
【フリー素材】装飾アイコン素材

今回配布する画像はやじるし、ハート、スターの3種類です。制作物のアイコンに使用したり、装飾としても使えます。装飾アイコン…

Interview インタビュー

index

2014年10月15日
イラストレーターを目指し活動中!~後編~

※今回は少し趣旨を変えて、織田さんのイラストをページにちりばめました。 学校で広告を学び、色々やってみたくなった。 ─ …

Seminar セミナー

AIに負けない!未来のUI/UXデザイナー講座(基礎理論編)
2018年12月14日(金) 19:00 - 21:00

デザイン

その他

Technic テクニック

catch_file_035

2018年11月27日
アピアランスを使った手書き風イラストの描き方

デザインに使用すると温もりが出やすい、手書きのイラスト。 でも、手書きで描くには時間がかかる…そんな時こそIllustr…

Books オススメ書籍

レイアウト、基本の「き」

2018年08月28日
レイアウト、基本の「き」
  • デザイン

デザイン初心者向けのレイアウトの本 初歩的なレイアウトの基礎を 理論的なしっかりとした説明を元に、豊富な図案で説明 全部…

Award アワード

第1回 ビルボ絵本大賞
2018年12月22日(土) 締め切り

デザインに使用すると温もりが出やすい、手書きのイラスト。
でも、手書きで描くには時間がかかる…そんな時こそIllustratorの出番。
Illustratorで描くイラストは味気ない?そんなことはありません!
アピアランスラフの機能を使えば、シンプルなイラストもすぐに手書き風になります!

Step1 手書き風にしたいイラストを描く

まずはいつも通り、Illustratorでイラストを描きましょう。
ペンツールで好きなイラストを描く

線幅ツールで線の強弱をつける
これをしておくと、より手書き風に近づけます!

Step2 ラフ機能を使う

イラストができたら、次は加工していきます。
①②③[効果]の中の[パスの変形]から[ラフ]を選択

サイズ、詳細を変更してOKをクリック!

おぉ!急に手書き感が増しましたよ!
でも、まだ完成ではありません。今度はテクスチャをかけていきます。

Step3 イラストにテクスチャをかける

Illustratorのテクスチャの機能を使う方法と、
自分で作ったテクスチャを使う方法をご紹介します。

Illustratorのテクスチャを使う

①②③[効果]の中の[テクスチャ]から[テクスチャライザー]をクリック

好きなテクスチャを選んで数値を変更、OKをクリック

それぞれ違うテクスチャを適用したものがこちら。

自作のテクスチャを使う

Illustratorのテクスチャが機械的で、なんだか物足りなかったそこのあなた。
手書き風への近道はズバリ、手書きのテクスチャを使うこと!!!
そんなわけで今回筆者が作ったのはこちら。作り方は簡単。

アクリル絵の具を塗った画用紙をスキャンするか、写真を撮ります。
筆などで掠れさせると、テクスチャ感UP!

Photoshopで画像を開き、①②③[イメージ]の中の[色調補正]から[レベル補正]をクリック
色の部分をくっきりさせます。

①②③[イメージ]の中の[モード]から[グレースケール]をクリック。モノクロになったら完成!

先ほどのイラストをPhotoshopで開き、作ったテクスチャを重ねました。
Illustratorのテクスチャよりも味が出るのでおすすめ!

記事担当者のコメント
Illustratorのイラストを手書き風にする方法は色々ありますが、
アピアランスに効果をつけると一気にそれっぽくなります。
時短手書き風イラストで、デザインの幅が広がります!
ぜひトライしてみてはいかがでしょうか?