テクニック

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_hat

2017年10月12日
8月10日は帽子の日!帽子のイラスト素材セット

ハッ(8)ト(10)の語呂合わせから、8月10日は「帽子の日」! 帽子にちなんだイラスト素材セットを無料配布します。 各…

Interview インタビュー

index

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

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

Seminar セミナー

「HTML5入門」(初心者向け)
2017年11月26日(日) 10:00 - 17:00

HTML

CSS

Technic テクニック

catch

2016年10月17日
Photoshopのアートボード機能を使ってみよう

Webサイトを作るにあたって、情報収集やお店の情報を入手しデザインに入る際、ワイヤーフレーム、カンプの作成をすることにな…

Books オススメ書籍

idea+10 (DTP WORLD ARCHIVES)

2013年04月02日
idea+10 アイデアプラステン
  • デザイン

同じ素材を10人のクリエイターがそれぞれデザインする。10通りのデザインからアイデアや考え方を学べる!

Award アワード

みなかみフォトコンテスト 2017
2017年12月31日(日) 締め切り

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

夏休みのスキルアップ企画も第5弾となりました。
イラストレーターでお絵描きができるようになってくると、ちょっと味を出したくなってきます。
パソコンで描いた綺麗な線もいいのですが、手書きのユルイ感じもいいですよね。ちょっと手を加えるだけでデザインに温かみがでてきます。

※キャプチャー画像は「Illustrator CS5」ですが、バージョンが違っても使い方の基本は同じ(はず)です。

登場していただいたのは、「絵心がなくても描ける! トレースから作るイラスト」で描いたあひるちゃんです。
このあひるちゃんをラフな手書き風にしてみましょう。
まずは、一番お手軽な線にブラシを設定する方法をご紹介します。
まずはさくっと手書き風に
体とくちばしを黒い線に設定し、選択しておきます。
ウィンドウ > ブラシライブラリ > アート > アート_木炭・鉛筆 を選びます。
好きな線種を選らんで、線の太さを調整します。線がラフになりました。
あひるちゃんのイラストではわかりやすく線の色だけを黒にしましたが、線だけのイラストにも効果的です。
線と塗りの色を同じにしてもいいですね。以下のように単純な図形でも使えます。
単純な図形
図形やサイズによって、線の出方が違うので調整してみてくださいね。
今度は、塗りの部分も含めてマジックで描いたようなイラストを作ってみます。
もう一度、あひるちゃん登場です。
まずは、あひるちゃんの輪郭とくちばしの線画をコピーして作ります。線画重なっている箇所はカットしておきます。
線が重なっている部分がないように線をカット
まずは線画から。ラフの効果をかけて、線を歪ませます。
ラフの効果をかけて、線を歪ませます。
効果 > パスの変形 >ラフ を選びます。
今回はこのように設定しました。
プレビューで様子を見ながら設定してみてください。
次は、塗りの部分を。
くちばしと体の部分を選択したら、「効果 > スタイライズ > 落書き」を選びます。
「効果 > スタイライズ > 落書き」を選びます。
今回は、以下のように設定しました。この設定もプレビューを見ながら、調整してくださいね!
OKボタンを押すと、ペンで塗りつぶされたような効果がかかります。
落書きオプション
最後に、先ほど作った線画と塗りを重ね合わせます。線画を上にしてください。
先ほど作った線画と塗りを重ね合わせる
効果の状況と再設定
効果をかけて実現していますので、後からでも効果を設定しなおすことができるのもポイント。
ウィンドウ > アピアランス でウィンドウを表示させた後に、設定したいオブジェクトを選択すると、現在の設定状況が確認できます。
上の例では、線にかけたラフの効果を設定しなおすことができます。効果を消したいときも、この画面から操作します。
これで、マジックで描いたようなイラストの完成です!
完成
記事担当者のコメント
手書き風のイラストということで記事では書いていきましたが、イラストだけでなく、タイトルロゴや吹き出しのデザインパーツなどにも応用できますよ!それはまた改めて記事にしていきたいと思います。