Web için basit resimler oluşturun

Sep 15, 2025
Nasıl Yapılır

Dayanım, biraz müzik çaldım, ışıkları soludum ve dizüstü bilgisayarımı açtım. Yapacak çok şeyim vardı. İlham vermek için çaba sarf etmeye başladım doodle sanat Bir kuyruklu yıldız olarak gördüğümde ekranın bir köşesinden diğerine çizgiler. "Hmm," Beynim yavaşça başladı, "Ya onları bağlarsam ve bazı gezegenler eklersem?"

Birkaç saat sonra en popüler dribbble çizimim vardı. Nasıl olduğunu hala hatırlıyorum, ama bazılarımın beynimin içinden kazıldıktan sonra, bir resim yarattığın iç algoritmamı keşfettim - sadece bu değil, yaptığım başka bir şey. Komik, daha karmaşık olması bekleniyor. Oh iyi…

İllüstrasyon tarzı

Bir resimde çalışmaya başlamadan önce, amacını ve yaşayacağı yerdeki bağlamı anladığımdan eminim. Bu uygulama içi veya web sitesi mi yoksa duvar kağıdı mı? Bunun üzerine metin olacak ve yoğun bir ortamda bulunacak mı? Bir eylemi sembolize etmesi gerekiyor mu, yoksa sadece belirli bir vibe vermek için orada mı?

Resimde net bir fikri geçmesi veya belirli bir nesneyi veya eylemi sembolize etmeleri gerekiyorsa, tüm dikkatin önemli parçaya odaklandığı basit bir uygulama yapacağım. Bununla birlikte, özellikle 'sessiz' arka plan illüstrasyonu için özel olarak gidiyorum, kalıp benzeri bir yaklaşım seçeceğim ya da açıkça yorumlama olasılığını en aza indirgemek için belirgin bir dikkat-kapma unsurları olmadığından emin olacağım. . Uygulama içi çizimler için, işlevselliğin dikkatini gidermekten kaçınmak için şeyleri evcilleştirmeye devam etmeye çalışıyorum.

Estetik kurallar

Beynim tüm bu garip kuralları yaratmayı sever. Geçiş yapamayacağım saçma zorluklar gibiler: Ya sadece çevreleri kullanarak bir insanı çizersem? Ya sadece bir rengi kullanarak bir gün batımını açıklarsam?

Geometrik kurallar, mantıksal ilerlemeler, simetri. Sanata uygulanan katı matematiksel kurallara sahip olmakta çok çekici bir şey var. Ters-mühendislik büyüsü gibi hissediyor; Sanattaki mistik unsurları uzaklaştırır, bu yüzden neredeyse arkasındaki bilimi ortaya çıkarmak gibidir.

Karmaşık çizim; Basit renk paleti

A city illustration with a complex level of detail, which has been combined with a simple, analogous colour palette

Basit, benzer bir renk paleti ile birleştirilmiş karmaşık bir detay seviyesine sahip bir şehir illüstrasyonu (Resim Kredi: Nina Geometrieva)

Göründüğü gibi, beynim, renk seçtiğinde oldukça tembeldir, bu nedenle aşağıdaki iki genel renk palet türüne sahiptir: biri karmaşık çizimler için; basit olanlar için bir tane daha.

Kompleks çizimler, birçok şekil / nesne ve çok fazla ayrıntı ile yüksek tanikalite seviyesine sahiptir. Bunlar genellikle doğası gereği desendir ve net bir odak noktasına sahip değildir. Beynim, bu tür resimlerin tek renkli veya benzer renk paletleriyle iyi çalıştığına karar verdi. Veya daha geniş terimlerde - daha az renk ve daha az renk kontrastı.

Bütün bunlar görsel dengeye kadar kaynar; Şekiller delirse, renkler yumuşak olmalıdır. Bir istisna, başka türlü öne çıkmayacak belirli bir nesneye vurgu yapmak istediğim bir durumda. Bu, son derece zıt bir renk kullanılarak elde edilebilir, her şey tek renkli ve evcilleştirilir. Mükemmel görsel denge, aşırı düşük renkler (yüksek sesler, karmaşık şekiller, çok fazla ayrıntı, her şey yüzünüzde çığlık atar) ve düşük (en az minimum, sıkıcı, yeni veya ilginç bir şey yok) arasında bir yerdedir.

Tek renkli paletler

Analogous or monochrome palettes work effectively when there is a visual progression or repetition of elements

Analog veya tek renkli paletler, elemanların görsel bir ilerlemesi veya tekrarı olduğunda etkili bir şekilde çalışır. (Resim Kredi: Nina Geometrieva)

Tek renkli bir renk paleti, bir rengin renk tonlarından veya tonlarından oluşur. Renkler, bir renk kademeli olarak beyazla karıştırıldığında gerçekleşir; Gadiler, kademeli olarak siyahla karıştırıldığında gerçekleşir. Her zaman tek renkli paletlerle yaşadığım bir sorun, tonların ve gölgelerin, her ikisi de yüzde başına sıfır olan bir rengi beyaz veya siyah olan bir rengi karıştırmanın doğası gereği, tonu ve gölgelerinin artmasıdır.

Bu kademeli donuklaşmayı önlemek için, basit bir hile kullanıyorum: beyaz veya siyah eklenmenin yanı sıra, kademeli olarak tonu biraz değiştiririm. Bu, esasen tek renkli bir palet yerine ince bir analog palettir. Örneğin, kırmızı tek renkli renk tonları oluşturmak istersem, tonu turuncuya doğru kaydırırdım. Kırmızı tek renkli tonlar oluşturmak istiyorsam, tonu kararırken Magenta'ya doğru kaydırırdım. Mavi mavi renk tonu almak istersem, miyana doğru kaydırıyorum; Mavi karanlık tonları için, diğer yöne, mora doğru kaydırıyorum.

Bu, hala bir miktar tek renkli hissettiren bir paletle sonuçlanır, ancak çok daha canlıdır ve kesinlikle tekmeledi. Bunu keşfettiğimden beri, tekrar gerçek bir tek renkli paleti oluşturmadım.

Basit çizim; karmaşık renk paleti

Alt karmaşıklığa sahip olan resimler genellikle açık bir odak noktası ve nesne hiyerarşisine sahiptir. Şekiller daha basit olma eğilimindedir, bu nedenle renk seçenekleri Wilder olabilir. Göz alıcı, uyarıcı bir palet olduğu sürece, herhangi bir tamamlayıcı, triadik, tetradiklerin yüksek kontrast renklerini düşünüyorum.

Karmaşık ve basit resimler olarak tanımladıklarım arasında bir bütün evren var. Ancak beynim, tüm bu spektrumla aşırı derecede endişe verici değil - herhangi bir illüstrasyonu karmaşık veya basit olarak etiketlemeyi tercih eder.

Yüksek kontrast renk paletleri, bir renk tekerleğine karşı renkleri seçmek kadar basit değildir. Renk tekerleği harika bir başlangıç ​​noktasıdır, ancak hiçbir şekilde işlemin sonu anlamına gelmez. Örneğin, iyi bir turuncu ve mavi kombinasyonu seçerken, birkaç şeye dikkat ediyorum: algılanan parlaklık ve aksan renkleri varsayılan renklerle nasıl çalışır.

Algılanan parlaklık

Her iki renk de aynı algılanan parlaklığa sahipse, beyin aralarındaki sınırı ayırt etmeyi zor bulurlar - bu yüzden görüntüye bakmak rahatsız edici hissediyor. Renkler asla birbirlerine dokunmamamışsa, aynı algılanan parlaklığa sahip olmadıklarından emin olmaya değer.

Oh, ve 'algılanan' kelimesini neden kullandığımı merak ederseniz, Helmholtz-Kohlrausch etkisine bakın, bu da aynı parlaklığa sahip renklerin farklı değerlere sahip olması için algılanabildiğini gösteren. Portakalın maviden daha yüksek algılanan parlaklığa sahip olduğundan, örneğin, daha hafif bir turuncu ve daha koyu mavi kullanarak iki renk arasındaki eşitsizliği daha da arttırmak kolaydır.

Varsayılan renklere karşı vurgu

An illustration for the Zopim homepage. Blue shades are dominant, with orange providing the accents

Zopim ana sayfası için bir örnek. Mavi tonlar baskındır, aksan sağlayan turuncu ile (Resim Kredi: Nina Geometrieva)

Her rengin kullanımı çok farklı ise, renk değerlerini buna göre ayarlarım. Aksan renkleri ile cesur olmak ve varsayılan renklerle güvende oynamak benim gidip yaklaşımım.

Yukarıdaki turuncu-mavi örnekte, daha büyük alanları, arka planlar ve büyük unsurlar için, düğmeler, simgeler ve diğer küçük elemanlar için daha büyük alanları doldurmak için sakinleştirici bir renk olarak mavi kullanırım. Resim bağlamında, temel olarak mavi tonlarım olurdum ve tekrar, aksan olarak turuncu - belki de ilginç bir ayrıntı ya da önemli bir unsur vurgulamak suretiyle.

Görsel denge kontrolü

Yukarıdaki rehberleri izleyerek nereye illüstrasyon olursanız olun, geri adım attığınızdan emin olun ve hepsinin bir arada anlamlı olup olmadığını kontrol edin. Resimde bu kadar çok istisna var, inanılmaz bir illüstrasyon doğuran tüm kombinasyonları listelemek imkansız olacak. Her zaman ilginç görünen şeyleri deneyin ve bir şey sizi şaşırttığında, anladığınızdan emin olun, böylece sezginizi geliştirmeye devam edebilirsiniz.

Bu makale başlangıçta ortaya çıktı net dergisi Sayı 286; buradan satın al K!

İlgili Makaleler

  • 7 Web Tasarımı Dos ve Yapılmayacaklar
  • 2016'nın en iyi serbest portföylerinin 6'sı
  • Web Tasarımcıları için En İyi 6 Photoshop Araçları

Nasıl Yapılır - En Popüler Makaleler

Nasıl bir komik sayfa oluşturulur

Nasıl Yapılır Sep 15, 2025

Bu eğitim, herhangi bir komik sayfa oluşturmayı size gösterecektir. Kullanmamıza rağmen Klibi stüdyo boya B..

Grid ve FlexBox ile bir blog oluşturun

Nasıl Yapılır Sep 15, 2025

Son iki ila üç yıl Layout'un sıçramalarda ve sınırlarda ilerlemesini gördü. Artık bu modern tekniklerin modern tarayıc..

2D illüstrasyonları 3B sanatın içine çevirin

Nasıl Yapılır Sep 15, 2025

Yapma yolculuğum 3d sanat kardeşimin denememi söylediğinde birkaç yıl önce başladı Zbrush ..

Suluboya için yaramaz bir tavşan boya

Nasıl Yapılır Sep 15, 2025

Zooloji, hayvanlar ve vahşi yaşam okudu, her zaman benim için büyük bir tutku olmuştur ve onları boyamadan asla yorulmam. Lincolnshire kırsalında yaşayacak kadar şanslıyız ve kap..

X-Parçacıklar ile yeşillik büyümeyi öğrenir

Nasıl Yapılır Sep 15, 2025

Situ içinde büyüdükünün ortaya çıkmasına sahip olan statik bir bitkinin modellenmesi çok zor değil, aynı zamanda büy..

Üç.j içeren etkileşimli 3D görseller oluşturun

Nasıl Yapılır Sep 15, 2025

Bu WebGL eğitimi, CO2 seviyeleri değiştikçe dünyaya ne olduğunu gösteren bir 3D çevre simülasyonunun nasıl oluşturulac..

Efsanevi yaratıklar nasıl geliştirilir

Nasıl Yapılır Sep 15, 2025

Bir yazılım karışımını kullanarak gerçekçi yaratık tasarımları oluşturmak isteyenler - Zbrush, muhteşem tasa..

3D Saç ve Kürk Nasıl Oluşturulur

Nasıl Yapılır Sep 15, 2025

Herhangi bir kürkle ilk kez çalıştığınızda kolayca boğulabilirsiniz. 3d sanat yazılım. Bu eğitimde, mo..

Kategoriler