Webの単純なイラストを作成する

Sep 16, 2025

操作方法

私は座って、いくつかの音楽を演じ、ライトを淡らせ、私のラップトップを開けました。私はやるべきことがたくさんありました。インスピレーションを召喚するために、私は絵を始めました 落書き芸術 彗星の形を見たときに、画面の一角からもう一方の角からの行。「うーん、私の脳はゆっくり起動しました、「私がそれらを接続していくつかの惑星を追加したら何がありますか？」

数時間後、私は最も人気のあるドリブルのイラストを持っていました。私はそれが起こった方法を覚えていませんが、私の脳を掘ったものの後、私はイラストを作成するための私の内部アルゴリズムを発見しました - これだけでなく、私がやったことはありませんでした。面白い、私はそれがより複雑になると予想されるようなものです。しかたがない…

イラストスタイル

イラストに取り組む前に、私はその目的とそれが生きるつもりの文脈を理解していることを確認します。その中、またはウェブサイト、または壁紙はありますか？それにテキストがあるでしょうか、そしてそれは忙しい環境にありますか？それは行動を象徴することが想定されていますか、それともある雰囲気を払うことがあるのですか？

イラストが明確なアイデアを中継すること、または特定のオブジェクトまたはアクションを象徴することになっている場合は、すべての注意が重要な部分に焦点を当てている簡単な実行を選択します。しかし、私は特に「静かな」背景のイラストを目的としている場合は、パターンのようなアプローチを選ぶか、またはそれを過剰解釈する可能性を最小限に抑えるために、明らかな注意を引く要素がないことを確認します。。アプリ内イラストのために、私は機能から注意を払うのを避けるために、私は物事を飼い切らせようとします。

審美的な規則

私の脳はこれらすべての奇妙な規則を作成するのが好きです。彼らはばかげたばかげた挑戦のようなものです。私が1色だけを使って夕日を説明したらどう思いますか？

幾何学的規則、論理的進歩、対称性。芸術に適用される厳格な数学的規則を持つことに非常に魅力的なことがあります。リバースエンジニアリングマジックのように感じます。それは芸術で神秘的な要素を捨てるので、それはその背後にある科学を明らかにしているのです。

複雑な図シンプルなカラーパレット

A city illustration with a complex level of detail, which has been combined with a simple, analogous colour palette — 簡単な類似のカラーパレットと組み合わされている複雑な詳細を持つ都市のイラスト（イメージクレジット：ニーナジオメトリエブ）

それが判明するにつれて、私の脳は色の選択になるとかなり怠惰なので、それは2つの一般的なタイプのカラーパレットを持っています：それは以下から選択されます：複雑なイラストのためのもの。簡単なもののためのもう一つ。

複雑なイラストは、多くの形/オブジェクト、および詳細な細部を持つ、高い粒度レベルを持ちます。これらは通常、本質的にパターンのようなものであり、明確な焦点を持っていません。私の脳は、これらのタイプのイラストが単色または類似のカラーパレットでうまく機能すると決心しました。あるいは、より幅広い用語では、色が少なく、色の少ない色のコントラストが少なくなります。

これはすべて視覚的なバランスまで沸騰します。形が夢中になっている場合、色は障害があるはずです。 1つの例外は、そうでなければ際立っていない特定のオブジェクトを強調したい場合です。これは、非常に対照的な色を使用することによって達成することができますが、他のすべてが単色と飼い慣らされています。完璧な視覚的なバランスは、過度の視覚化の間のどこかにあります（大きな色、複雑な形、細部、すべてがあなたの顔で叫ぶ）、そして控えめなイメージ（最小限のタイプ、退屈、新しく、興味深いもの）。

単色パレット

Analogous or monochrome palettes work effectively when there is a visual progression or repetition of elements — 要素の視覚的進行または繰り返しがあるとき、類似のまたはモノクロームのパレットは効果的に機能します（イメージクレジット：ニーナジオメトリエブ）

単色カラーパレットは、色の色合いや色合いで構成されています。色が白と徐々に混ざったときに色合いが発生します。色合いは、それが黒と段階的に混ざったときに起こります。私が常に単色のパレットを持っていた1つの問題は、色と黒との色を混ぜるという性質のために、色合いと色合いが徐々に激しく失われます。どちらもゼロ％飽和を持ちます。

この段階的な鈍感を避けるために、私は単純なチートを使います：そして白または黒を追加するだけでなく、色相を少しずっと移動させます。これは本質的にモノクロパレットの代わりに微妙な類似のパレットです。たとえば、赤い単色の色合いを作成したい場合は、色相をオレンジ色に移動します。赤い単色の色合いを作成したい場合は、色相をマゼンタに向かって暗くすると思います。青の明るい色合いを得たい場合は、シアンに向かって移動します。青の濃淡のために、私は他の方向に紫に向かって移動します。

これにより、それでも依然として若干の単色を感じるが、もっと生きていて、間違いなくキックがあるパレットが得られる。私はこれを発見したので、私は再び真の単色パレットを作成したことがない。

簡単なイラスト複雑なカラーパレット

複雑さが少ないイラストには、通常、明確な焦点とオブジェクト階層があります。形状はより簡単になる傾向があるので、色の選択は荒野になることがあります。私はそれが人目を引く、刺激的なパレットである限り、どんな種類の補完的でトリアディック、テトラディックの高コントラストの高い色を考えています。

私が複雑でシンプルなイラストとして説明されているものの間に全体の宇宙があります。しかし、私の脳はそのスペクトルのすべてに過大関心事ではありません。

コントラストの高いカラーパレットは、カラーホイールに反対の色を拾うのと同じくらい簡単ではありません。カラーホイールは素晴らしい出発点ですが、それはプロセスの終わりを意味することは決してありません。たとえば、良いオレンジと青の組み合わせを選択するとき、私はいくつかのことに注意を払います。知覚輝度、そしてアクセントカラーはデフォルトの色でどのように機能します。

知覚された輝度

両方の色が同じ輝度を持っている場合、脳はそれらの間の境界を区別することは困難であることを発見します - それでは、画像を見ては不快感は感じます。色が互いに触れることになっていない限り、それは同じ知覚された輝度を持っていないことを確実にする価値があります。

ああ、そしてあなたが「知覚された」という言葉を使うのは興味がある場合は、Helmholtz-kohlrausch効果を調べます。例えば、オレンジは青よりも知覚される輝度が高いので、より軽いオレンジと暗い青を使用して2色の間の格差をさらに高めることができます。

デフォルトの色とデフォルトの色とのアクセント

An illustration for the Zopim homepage. Blue shades are dominant, with orange providing the accents — Zopimホームページのイラスト。青い色合いは支配的で、オレンジはアクセントを提供します（イメージクレジット：ニーナジオメトリエブ）

各色の使用量が大きく異なる場合は、それに応じて色の値を調整します。アクセントカラーで勇敢で、デフォルトの色で安全に遊ぶことは私のGo-toアプローチです。

上記のオレンジブルーの例では、バックグラウンドや大きな要素、ボタン、アイコン、その他の小さな要素のためのいくつかのワイルドオレンジのためのより大きな領域を充填するための落ち着いた色として青を使います。説明の文脈では、ベースとして青い色合いを持ち、またアクセントとしてオレンジ色 - おそらく興味深い詳細を強調することによって、または重要な要素を備えています。

視覚バランスチェック

上記のガイドに従ってあなたが終わったイラストは、あなたがステップバックを取って、すべてがセンスがあるかどうかを確認してください。驚くべき図を産むすべての組み合わせをリストすることは不可能であることを例示的なものに非常に多くの例外があります。興味深いように見えるように見え、何かがあなたを理解していることを常に試してください。

この記事は最初に登場しました ネットマガジン 問題286; ここで購入してください ！

関連記事

7 WebデザインDOSとしない
2016年の最高のフリーランスポートフォリオのうち6
Webデザイナーのための6つの最良のPhotoshopツール

Webの単純なイラストを作成する

イラストスタイル

審美的な規則

複雑な図シンプルなカラーパレット

単色パレット

簡単なイラスト複雑なカラーパレット

知覚された輝度

デフォルトの色とデフォルトの色とのアクセント

視覚バランスチェック

操作方法 - 最も人気のある記事

PUREREF：画像参照ツールの使い方

HTMLコードを早く書く方法

LINOプリントメイキング：紹介

アフィニティデザイナー：ピクセルペルソナの使い方

グラフィックフィギュアの設計方法

現実的なCG布の作成方法

PhotoshopでアニメーションGIFを作る

マンガスタイルの髪の毛を動かす方法

カテゴリ