Dokular bir web sitesini somut hissettiriyor.

Fiziksel dünyayla, bir yer duygusuyla ve insanların ilişki kurabileceği bir gerçeklikle bir ilişki içeriyorlar.

Maalesef, fiziksel dokuları simüle etmek fotoğraf çekmek veya birkaç Photoshop filtresi çalıştırmak kadar kolay değildir.

Biri, rasgele gürültü ve tanınabilir modelleri karıştırmak, saf tekrardan ziyade benzerlikler için çabalamak zorundadır.

Burada, dokulara neyin organik bir nitelik kattığını tartışacağız ve doğal görünümlü dokular ve dikişsiz karolar yaratmak ve uygulamak için tekniklere bakacağız.

Görüş Üzerinden Dokunma Duygusu

Bir “doku”, fiziksel bir maddenin veya nesnenin yüzeyidir. Görme gibi, bizim dokunma duyumuz nesneleri anlamamıza yardımcı olur. Kaba, pürüzsüz, kaygan ve ufalanabilir dokulardır ve birine bir nesnenin ne olduğunu, nerede olduğunu ve başka bir şeyle ilgili olduğunu söyler.

İnternette, bir kişinin dokunma duyusu, giriş cihazlarıyla sınırlıdır. Ancak, tüm web sitelerinin aynı “hissetme” zorunluluğu yoktur. Gündelik nesnelerle ilgilenme deneyimlerine dayanarak, insanlar belirli görünümleri belli dokularla ilişkilendirirler. Dijital sanatta, tek tek doku, kişinin gözlerine karşı bir şey hissettirdiğini söyleyebilirdi.

Modern görüntü editörleri doku oluşturmayı kolaylaştırırken, her doku kesin bir kazanan değildir. Doğal görünümlü bir doku oluşturmak, karakter, kaos ve kullanımı karakter yaratırken karıştıran zor bir görevdir.

Doğal Dokular Rastgele Bir Ölçüye Sahiptir

Birçok doku iki uç arasında kalmaktadır: düzenli desenler ve rastgele gürültü. Desen tabanlı dokular yapay görünmek için özür dilemez. Bilinen bir sembol ya da metinden oluşabilir ve her zaman öngörülebilir bir düzenlemeye sahiptirler.

çinili desen örnekleri

Yukarıda, döşemeli desen örnekleri.


Diğer uçta, gürültü tabanlı dokular rasgele statik bir yapıya sahiptir. Oluşturmaları kolaydır - Photoshop'un kendi "Add Noise" filtresine sahip olması ve döşemenin kolay olması, çünkü kesildiğinde garip görünen herhangi bir özellikten yoksundur.

kiremitli gürültü örnekleri

Yukarıda, gürültülü doku örnekleri.


Doğal görünümlü dokular düzenli desenler ve rastgele gürültü arasında bir yere oturur.

şekilleri ve sesleri karıştıran görüntüleri gösteren diyagram

Yukarıda, bir dizi doku desenleri ve gürültüyü çeşitli derecelerde karıştırır.


Her ne kadar aşırı bir şeyle ilgili hiçbir şey yanlış olmasa da, birçok güzel doku her ikisinin de özelliklerine sahiptir. Doğal görünümlü dokularda, dikişlerin görülmemesi ya da görülmemesi zordur ve tekrarlanan fayanslarda herhangi bir desen tespit edemiyoruz. Onların görünüşü, herhangi bir düzenli desen kadar farklı ve etkilidir, ancak daha az barizdir.

“Organik” dokular, ses ve modelin doğru kombinasyonuna sahiptir.

Rasyonel Kaos, Düzenli Gürültü

Doku bağlamında “gürültü” , bir piksel grubundaki düzensiz varyasyonları ifade eder. Film tahıl, düşük ışık eserler ve dithering, karmaşık görüntülerde genellikle istenen veya bulunmayan üç yaygın gürültü türüdür.

Doku gürültüsü, doğal yüzeylerin doğal görünmesini sağlar. Ama bu sadece statik değil. Aksine, doku gürültüsü kaos ve düzeni dengeler.

Aynı şekildeki farklı düzenlemeleri gösteren diyagram

Yukarıda, birçok kez tekrarlanan tek bir geometrik şekil bir desen oluşturur. Solda, şekil yalnızca yerleşimde farklılık gösterir: satırlar oldukça eşit değildir.

Diğer çekimler, şeklin açısında, yoğunluğunda ve boyutunda değişiklikler gösterir. Bu varyasyonlardan şekillendirilmiş dokular daha kaotik görünebilir - ancak tüm dokular orijinalin eşsiz karakterini koruyacaktır, çünkü varyasyonlar aynı temel şekle dayanmaktadır.

Tabii ki sonuç hala yapay görünüyor. Gürültüye dayalı dokulardaki belirgin tekrarlar, insanların kalıpları tanımakta çok iyi oldukları için, etkiyi mahvediyor. Gerçek dünyadaki dokular şekil, renk ve derinlikte varyasyona sahiptir.

Üç dokumanın farklı özelliklerini gösteren diyagram

Yukarıda, gerçek dünyadaki dokular hem gürültüyü hem de tekrarı göstermektedir. Çuval bezi, pembe granit ve balmumu kağıdının kendi “düzenli düzensiz” desenleri vardır, ancak her biri hala diğerlerinden farklıdır.

  • Öngörülebilir yatay ve dikey çizgileri ile çuval en düzenlidir. Ama çizgiler mükemmel değil. Tonda ve yönde hafif varyasyonlar, kalıbın yapay görünmesini engeller.
  • Granit içindeki pock işaretleri eşit dağılmamış. Dengesizliği yakından görmek çok zor. Geniş bir alanda görüldüğünde karakteristik daha belirgin hale gelir.
  • Balmumu kağıdında hem en az karşıtlık hem de en az kişilik vardır. Birkaç karanlık gölgesi kümeleri onu rastgele gürültüden korur.

Her dokuda kendine özgü kılan belirli özellikler var - ister kusurları, çizgileri, lekeleri veya lekeleri olsun. Bu özelliklerde varyasyonlar çalışmasını sağlar.

Üç dokumanın farklı özelliklerini gösteren diyagram

Yukarıda, metalik bir doku, belirli bir sırada düzensiz kenarlı biçimleri örtüştürür, ancak farklı karakterini korur. (Doku nezaket Tasarım Mag .)

Murmurs'dan Scream'e Derinlik ve Kontrast Aralığı

Herhangi bir doğal dokunun önemli bir değişkeni derindir. Bir dokunun “yumruluğu”, renk veya boyuttan daha fazla dokunma hissi sağlar. Ancak derinlik, dikkat çeken ve okunabilirliği bozabilecek kontrastı da ekler.

yüksek sesle arka plan ile örnek web tasarım

Arka planda çığlık atan bir doku, içeriğin kendisinin hacmini artıracaktır. Hangi noktada çok gürültülü? Bu, içeriğin gücüne ve seyircinin eğilimine bağlıdır.

Yüksek bir doku konuya uyuyorsa, o zaman ruh halinize katkıda bulunur. Fakat eğer okunabilirliğe müdahale ederse, o zaman bir problemin var demektir.

yüksek bir doku üzerinde metin örneği

Yukarıdaki yazılardan hangisi okumak en kolay? Mesajdaki yazı en iyi hangi dokuyu yansıtır? Birden fazla doğru cevap olabilir, ancak sadece bir kılavuz var: dokuları ve içeriği, özellikle metinsel içeriği karıştırırken, içeriğin kenarlarının görünür kalmasını sağlayın.

yüksek sesli bir doku ile karıştırma metin örneği

Ekstra gerçekçilik için kenarlardan bahsetmek, dokunun nerede bittiğine dikkat et. Sümüklü veya cesur dokuların, örneğin, mükemmel bir çizgide bitmesi gerekmez. Bunun yerine, bir sonraki yüzeye sızmaları veya parçalanmasına izin verin. Hile, sayfadaki her şeyi, düz bir katı renk olsa bile, dokuya sahip bir yüzey olarak düşünmektir.

Dokunun kendisini yansıtan bir doku kenarının örneği

Işık Kaynakları ile Görünür Olan Dokular

Her doku, somut görünmek için derin çatlaklara ihtiyaç duymaz. Parlak boyayı düşünün. Sırtlar ya da çarpmalar olmadan, kaygan emaye hissi parlaklığından gelir.

parlak yüzeyler örneği

Yukarıdaki dokular, bir nesnenin yüzeyinin kaba olması gerekmediğini göstermektedir. Yinelenen karolar olarak işe yaramayabilirler, ancak parlaklık, yansıma ve saydamlık, gerçek dünyada bir nesnenin neye benzeyebileceği hakkında görsel ipuçları sağlar.

Karakter ve Dosya Boyutu Arasındaki Tatlı Nokta

Herhangi bir doğal doku ile ortak bir problem, nasıl tekrarlanacağıdır. İnsanlar tekrar tekrar belirlediğinde, herhangi bir gerçeklik yanılsaması yok edilir. En kolay çözüm daha büyük ve daha az kiremit kullanmaktır. Daha fazla varyasyon ile, lekelenme tekrarlaması zorlaşır.

çeşitli karo boyutları örneği

Yukarıda gösterildiği gibi, fayanslar ne kadar geniş olursa, insanların tekrarlama şansı o kadar düşük olur. Ne yazık ki, daha geniş fayanslar sayfa yüklemesini yavaşlatan daha büyük dosyalar için de geçerlidir. Birçok insan için, bir gezinme yükleme işareti, bir fayansın kenarını görene kadar ruh halini öldürür.

Başka bir çözüm, ayrı ayrı döşemedeki şekilleri küçültmektir.

Farklı boyut özelliklerine sahip örnek dokular

Gördüğümüz gibi, daha ince dokuların tekrarlanması daha az lekelenme şansına sahip. Ama doku ne kadar ince olursa, verebileceğin daha az karakter. En iyi doku saf gürültü olurdu - ama bu size yardımcı olmaz. Doğal dokular her zaman bilinen bir yüzeyi çağrıştırır.

Özetlemek gerekirse, doğal dokular:

  • Sadece rastgele gürültü olmadıkları için yeterli kişiliğe sahip olun. Bu, piksellerin şekilleri veya "kümeleri" nin benzer ama aynı olmaması gerektiği anlamına gelir.
  • Bir sahnesinin veya ruh halinin kurulduğu, ancak içeriğin dikkatini dağıtmadığı kadar o kadar fazla kişiliğe sahip olmayın. Bu, uzaktan bakıldığında belirgin “kümelerin” veya diğer özelliklerin göze çarpmaması anlamına gelir.
  • Tekrarı önlemek için yeterince rastgele olun. Dokunun özellikleri, insanların odaklanmadan tespit edebilecekleri bir kalıp oluşturmamalıdır.

Bunların hepsini nasıl yapıyoruz?

Photoshop'ta Dokular Oluşturmak

Birçok program tasarımcıların kendi doğal dokularını oluşturmasını sağlar. Ve web'de indirilebilir dokuların sıkıntısı yok. Kendi dokunuzu oluşturmak, gerçekten eşsiz bir tasarıma katkıda bulunan, ödüllü, telif hakkı ihlal eden bir deneyim olabilir.

1. Beyaz bir arka plana sahip yeni bir Photoshop belgesi oluşturun. Bu örnek için 600 x 300 piksel yapalım.

2. Arka planı siyahla doldurun.

3. Aynı genel yönde işaretlenmiş rastgele beyaz vuruşları çizin. Bu örnekte, basit bir sabit kenarlı fırça kullanıyoruz. Farklı fırça ipuçları farklı sonuçlar yaratacaktır.
Aşama 3

4. Konturları rasgele bulanık kenarlara yaymak için leke aracını kullanın. Bulanık kenarlı bir uç (30'dan daha düşük bir sertliğe sahip) en iyi şekilde çalışır. Ancak, doku bozulduğunda, en iyi sonuçların pek çok gri rengi olacaktır.
4. adım

5. Filtre> Gürültü> Gürültü Ekle'ye gidin ve zevkinize göre statik ekleyin. Ardından Filtre> Diğer> Yüksek Geçiş . Birlikte, bunlar daha fazla gri tonları (6. adım için hayati önem taşır) ve biraz grit ekler.
Adım 5

6. Degrade Harita katmanı oluşturun. Bu özel katman, tonlarına bağlı olarak alttaki katmanlara renk uygular. Normal gradyanlardan farklı olarak, yere göre piksel cinsinden renk, degrade, vurgularda, orta tonlarda ve gölgelerde renkleri eşler. Doğanın renklerini simüle etmek için düşük doygun renkler, özellikle yeşil, kahverengi ve mavi kullanın.
6. adım

6. adım
Yukarıda, kahverengi ve sarı bir degrade haritasının uygulanması sonucu.

7. Dokunun ilginç bir bölümünü kırpın. Görüntünün yarısından fazlasını kullanmamayı deneyin. Kalanları kısa bir süre sonra kullanacağız.
ekin

8. Önemli: Kırpılan kutuyu ayrı bir dosya olarak kaydedin. Daha sonra orijinal dosyaya ihtiyacınız olacak.

Burada gösterilen detaylar, tekniği göstermek için kasıtlı olarak büyüktür, ancak sonuç bir doku için kötü değildir. Sürecin genel olarak işleyişi şöyle:

  • Uygun bulduğunuz her boyutta yapılacaktır. Daha büyük karolar daha gerçekçi özelliklere sahip olacak, ancak dosya boyutunda daha büyük olacaktır. İhtiyaç duyduğunuzdan her zaman çok daha büyük başlar, çünkü sıfırdan yapılmış bir dokunun kenarları nadiren tuvalin kenarlarıyla eşleşir.
  • Aynı araç veya araçlarla bir dizi işaret oluşturun. Bir dokunun özü, benzer bir teknik ya da iki tanesi seçerek ve onları defalarca kullanarak belirlenir.
  • Photoshop filtreleriyle biraz kaos ekleyin.
  • Renk ekle: derinliği vurgulamak için degrade haritalar ve splatters için rastgele renk lekeleri. Doğanın renklerini simüle etmek için düşük doygun renkler, özellikle yeşil, kahverengi ve mavi kullanın.

Fayans Kesintisiz Yap

Doğal görünümlü ya da değil, çoğu doku ve desen kusursuz olmalıdır. Yani, ziyaretçiler yinelenen karoların kenarlarını görememelidir. Bunu nasıl yapabiliriz? Çini kendisi çözüm sağlar.

yanların nasıl değiştirileceğini gösteren şema

9. Yukarıdaki görüntü mavi ve kırmızı çizgiler boyunca bölünür. Bölme boyunca pikseller eşleştiğinden, bunları iki yana taşımak, sol ve sağ kenarların eşleşmesini sağlar. Tabii ki, sorun hala var, ama düzeltmek daha kolay.

ortadaki dikiş yerini nasıl değiştirdiğini gösteren şema

10. Bu kare karo daha büyük bir görüntüden geliyor. Yukarıda, kiremit bölünmüş tam görüntüden malzeme ile doldurulur. Yatay dikişi (görüntünün üstünde ve altında) sabitlemek için 8. adımı tekrarlayın.

Son Mülkiyet

Yukarıda oluşturulan basit doku göz kamaştırıcı bir kusura sahiptir: süreci göstermek için tasarlandığından, özellikleri çok sık tekrarlanır.

Doğal bir dokunun özellikleri genellikle tüm karoların onda biri kadardır. Yani, 500 x 100 piksel boyutunda bir çini için en büyük kırışıklık, kağıt ya da diğer işaret 50 x10 piksel ya da daha azını ölçecektir.

İyi hazırlanmış dokular, bir özellik daha gerektirir: zaman. Bir freebie indirmenin kısa bir süresinde, harika bir doku geliştirmek ve hassaslaştırmak için zaman ayırmanız gerekir. Ama bunu bir angarya olarak düşünmeyin. Doğal olarak sürecin bir parçası.


Ben Gremillion tarafından Webdesigner Deposu için özel olarak yazılmıştır. Ben bir serbestlik web tasarımcısı iletişim problemlerini daha iyi tasarımla çözer.

Doğal görünümlü dokular nasıl yaratıyorsunuz? Fikirlerinizi aşağıdaki yorumlarda paylaşın.