Buat ilustrasi sederhana untuk web

Feb 2, 2026

Bagaimana caranya

Saya duduk, memainkan beberapa musik, meredupkan lampu dan membuka laptop saya. Saya punya banyak hal yang harus dilakukan. Dalam upaya untuk memanggil inspirasi, saya mulai menggambar Doodle Art. Baris dari satu sudut layar ke sisi lain, ketika saya melihat formulir komet. "Hmm," Otakku perlahan mulai, "Bagaimana jika aku menghubungkannya dan menambahkan beberapa planet?"

Beberapa jam kemudian saya memiliki ilustrasi dribble paling populer. Saya masih hampir tidak ingat bagaimana itu terjadi, tetapi setelah beberapa menggali melalui otak saya, saya menemukan algoritma batin saya untuk membuat ilustrasi - bukan hanya yang ini, tetapi yang telah saya lakukan. Lucu, saya agak mengharapkannya menjadi lebih kompleks. Baiklah…

Gaya ilustrasi

Sebelum saya mulai mengerjakan ilustrasi, saya memastikan bahwa saya memahami tujuan dan konteks di mana itu akan hidup. Apakah itu dalam aplikasi, atau situs web, atau wallpaper? Apakah akan ada teks di atasnya, dan apakah itu akan berlokasi di lingkungan yang sibuk? Apakah itu seharusnya melambangkan suatu tindakan, atau hanya ada di sana untuk mengeluarkan getaran tertentu?

Jika ilustrasi tersebut seharusnya menyampaikan ide yang jelas, atau untuk melambangkan objek atau tindakan tertentu, maka saya akan memilih eksekusi sederhana di mana semua perhatian difokuskan pada bagian penting. Namun, jika saya secara khusus pergi untuk ilustrasi latar belakang 'diam-diam', saya akan memilih pendekatan seperti pola, atau memastikan bahwa tidak ada elemen menarik perhatian yang jelas, untuk meminimalkan kemungkinan orang yang menafsirkannya . Untuk ilustrasi dalam aplikasi, saya mencoba untuk menjaga hal-hal menjinakkan, untuk menghindari perhatian dari fungsionalitas.

Aturan estetika

Otak saya suka menciptakan semua aturan aneh ini. Mereka seperti tantangan konyol yang tidak bisa saya sampaikan: Bagaimana jika saya menggambar manusia hanya menggunakan lingkaran? Bagaimana jika saya mengilustrasikan matahari terbenam hanya menggunakan satu warna?

Aturan geometris, kemajuan logis, simetri. Ada sesuatu yang sangat menarik karena memiliki aturan matematika yang ketat diterapkan pada seni. Rasanya seperti sihir rekayasa balik; Ini membatasi elemen mistis dalam seni sehingga hampir seperti mengungkapkan ilmu di belakangnya.

Ilustrasi kompleks; palet warna sederhana

A city illustration with a complex level of detail, which has been combined with a simple, analogous colour palette — Ilustrasi kota dengan tingkat detail yang kompleks, yang telah dikombinasikan dengan palet warna yang sederhana dan analog (Kredit Gambar: Nina Geometreva)

Ternyata, otak saya cukup malas ketika datang untuk memilih warna, sehingga memiliki dua jenis palet warna umum yang dipilihnya: satu untuk ilustrasi kompleks; lain untuk yang sederhana.

Ilustrasi kompleks memiliki tingkat granularitas tinggi, dengan banyak bentuk / benda dan banyak detail. Ini biasanya seperti pola dan tidak memiliki titik fokus yang jelas. Otak saya telah memutuskan bahwa jenis-jenis ilustrasi ini bekerja dengan baik dengan palet warna monokromatik atau analog. Atau, dalam istilah yang lebih luas - lebih sedikit warna dan lebih sedikit kontras warna.

Semua ini bermuara pada keseimbangan visual; Jika bentuknya gila, warnanya harus hambar. Satu pengecualian ada dalam kasus di mana saya ingin memberikan penekanan pada objek tertentu yang sebaliknya tidak akan menonjol. Ini dapat dicapai dengan menggunakan warna yang sangat kontras, sedangkan yang lainnya disimpan monokromatik dan jinak. Keseimbangan visual yang sempurna adalah suatu tempat antara overtimulasi (warna-warna keras, bentuk kompleks, banyak detail, semuanya berteriak di wajah Anda) dan penalian (jenis buruk minimal, membosankan, tidak ada yang baru atau menarik).

Palet monokromatik.

Analogous or monochrome palettes work effectively when there is a visual progression or repetition of elements — Palet analog atau monokrom bekerja secara efektif ketika ada perkembangan visual atau pengulangan elemen (Kredit Gambar: Nina Geometrieva)

Palet warna monokromatik terdiri dari warna atau nuansa satu warna. Warna terjadi ketika warna secara progresif dicampur dengan putih; Nuansa terjadi ketika secara progresif dicampur dengan hitam. Satu masalah yang selalu saya miliki dengan palet monokromatik adalah warna dan nuansa secara progresif kehilangan semangat, karena sifat mencampur warna dengan putih atau hitam, keduanya memiliki saturasi nol persen.

Untuk menghindari tumpul bertahap ini, saya menggunakan cheat sederhana: serta menambahkan putih atau hitam, saya semakin menggeser rona. Ini pada dasarnya adalah palet analog halus, bukan palet monokromatik. Misalnya, jika saya ingin membuat warna monokromatik merah, saya akan menggeser rona menuju oranye. Jika saya ingin membuat nuansa monokromatik merah, saya akan menggeser Hue ke arah Magenta karena gelap. Jika saya ingin mendapatkan warna biru yang lebih ringan, saya bergeser ke arah Cyan; Untuk nuansa gelap biru, saya bergeser ke arah lain, ke arah ungu.

Ini menghasilkan palet yang masih terasa agak monokromatik, tetapi jauh lebih hidup dan pasti memiliki tendangan. Karena saya menemukan ini, saya tidak pernah membuat palet monokromatik sejati lagi.

Ilustrasi sederhana; palet warna yang kompleks.

Ilustrasi dengan kompleksitas yang lebih rendah biasanya memiliki titik fokus dan hierarki objek yang jelas. Bentuknya cenderung lebih mudah, sehingga pilihan warna bisa lebih liar. Saya berpikir warna-warna kontras tinggi dari segala jenis yang komplementer, triadik, tetradis - asalkan itu adalah palet yang merangsang.

Ada seluruh alam semesta di antara apa yang saya gambarkan sebagai ilustrasi yang kompleks dan sederhana. Tetapi otak saya tidak terlalu khawatir dengan semua spektrum itu - itu lebih suka memberi label ilustrasi apa pun sebagai kompleks atau sederhana.

Palet warna kontras tinggi tidak sesederhana memilih warna yang berlawanan pada roda warna. Roda warna adalah titik awal yang bagus, tetapi tidak berarti akhir proses. Misalnya, ketika memilih kombinasi oranye dan biru yang baik, saya memperhatikan beberapa hal: pencahayaan yang dirasakan, dan bagaimana warna aksen bekerja dengan warna default.

Pencatatan yang dirasakan

Jika kedua warna memiliki luminance yang persepsi yang sama maka otak merasa sulit untuk membedakan perbatasan di antara mereka - jadi melihat gambar terasa tidak nyaman. Kecuali jika warnanya tidak pernah saling menyentuh, ada baiknya memastikan mereka tidak memiliki luminance yang sama persepsi.

Oh, dan kalau-kalau Anda penasaran mengapa saya menggunakan kata 'yang dirasakan', cari efek helmholtz-kohlrausch, yang menunjukkan bahwa warna dengan luminance yang sama dapat dianggap memiliki nilai yang berbeda. Karena jeruk memiliki pencahayaan yang dipersepsikan lebih tinggi daripada biru, misalnya, mudah untuk meningkatkan perbedaan antara dua warna dengan menggunakan oranye yang lebih terang dan biru yang lebih gelap.

Aksen versus warna default

An illustration for the Zopim homepage. Blue shades are dominant, with orange providing the accents — Sebuah ilustrasi untuk beranda Zopim. Nuansa biru dominan, dengan jeruk memberikan aksen (Kredit Gambar: Nina Geometrieva)

Jika penggunaan setiap warna sangat berbeda, saya menyesuaikan nilai warna yang sesuai. Berani dengan warna aksen dan memainkannya dengan aman dengan warna default adalah pendekatan saya.

Dalam contoh oranye-biru di atas, saya akan menggunakan warna biru sebagai warna yang menenangkan untuk mengisi area yang lebih besar, untuk latar belakang dan elemen-elemen besar, dan beberapa jeruk liar untuk kancing, ikon, dan elemen kecil lainnya. Dalam konteks ilustrasi, saya akan memiliki warna biru sebagai dasar, dan sekali lagi, oranye sebagai aksen - mungkin dengan cara menekankan detail yang menarik, atau elemen penting.

Periksa Saldo Visual

Apa pun ilustrasi yang Anda dapatkan dengan mengikuti panduan di atas, pastikan Anda mengambil langkah mundur dan memeriksa apakah semuanya masuk akal bersama. Ada begitu banyak pengecualian untuk aturan ilustrasi, bahwa tidak mungkin untuk mendaftar semua kombinasi yang melahirkan ilustrasi yang luar biasa. Selalu cobalah keadaan yang tampak menarik, dan ketika sesuatu mengejutkan Anda, pastikan Anda memahaminya sehingga Anda dapat terus meningkatkan intuisi Anda.

Artikel ini awalnya muncul di Net Magazine. masalah 286; Beli di sini !

Artikel Terkait.

7 Desain Web DOS dan Larangan
6 dari portofolio freelance terbaik 2016
6 Alat Photoshop Terbaik untuk Desainer Web

Buat ilustrasi sederhana untuk web

Gaya ilustrasi

Aturan estetika

Ilustrasi kompleks; palet warna sederhana

Palet monokromatik.

Ilustrasi sederhana; palet warna yang kompleks.

Pencatatan yang dirasakan

Aksen versus warna default

Periksa Saldo Visual

Bagaimana caranya - Artikel Terpopuler

Buat adegan dengan Renderman untuk Maya

Cara Membuat Halaman Komik

Cara menggambar karakter dalam pena dan tinta

Buat efek teks neon yang bersinar

Buat efek teks 3D animasi

Power up menu Anda menggunakan animasi dengan CSS

Semua yang perlu Anda ketahui tentang node.js 8

Buat poster dari template di Photoshop

Kategori