Ahşap UI Tasarımında Kullanılan Ortak Elemanlar
Hepimiz modern ve klasik tasarımda doku çok kullanıldığını biliyoruz, ancak yıllar önce üretilen tasarımların çoğunda, gürültülü ve aşınmış dokular kaçınılmazdı.
Tasarımda ahşap doku söz konusu olduğunda, bir baskı ürününde, bir web'de veya bir mobil kullanıcı arayüzünde veya genel düzende olsun, görsel çekiciliği geliştirmek için her zaman kullanılır.
Bu yazıda, sadece bunu yapmak için ahşap dokular kullanan UI tasarımında beş ortak öğeye bakacağız.
Bu unsurları tartışmaya ek olarak, topladığım bazı oldukça seksi kullanıcı arayüzü tasarımlarına hayran kalıyorum. Dribbble Ayrıca, bu yazıda buradaki mini öğreticileri takip ederek bu etkilerin bazılarını nasıl yeniden üreteceğimizi öğreneceğiz.
UI tasarımındaki bu beş ortak öğe şunlardır:
- Kumaş ve dikiş
- Kağıt ve gölgeler
- Oyulmuş tipografi ve desenleri,
- Şık ve modern elemanlar,
- Üç boyutlu etkiler.
1. Kumaş ve Dikiş
Kumaş ve dikiş, her ikisi de doğal, organik ürünler olduğu için ahşap dokuya mükemmel şekilde uyum sağlayan öğelerdir. (Kabul edilemez, pamuk dokuma, kesilmiş ve boyanmış, ve bu vitrininde bir sürü tahta kesilmiş, zımparalanmış ve işlenmiş - ama ne demek istediğimi anladınız!) Aşağıdaki kumaş ve dikiş elemanlarını birleştiren aşağıdaki örneklere bakınız. ahşap dokular.
Örnekler
Bu çok hafif tasarım, daire amblemi ve pankartın düşük opasite ve renkli ahşap dokulu arka plana dikilmiş gibi görünmesini sağlamak için basit bir “dikiş” (sadece kesikli bir kontur bağlantısı) kullanır. Bu küçük dokunuş böyle basit bir tasarım için çok iyi çalışıyor.
Bu tasarımdaki dikiş çok daha gerçekçi bir yapıdadır; oyuklar, gölgeler ve gerçek kumaş dokuları ile tam opaklıklı ahşap dokulu arka plan birleştirir. Bu dikişin, dikişin göze çarpmasına ve tasarımın geri kalanındaki ayrıntıları eşleştirmesine izin veren bir gölge (0 piksel boyutunda ve 90 ° mesafede 1 piksel) vardır.
Dijital olarak üretilen ahşap doku, bu tasarımı hafif, üç boyutlu ve daha gerçekçi bir görünüme kavuşturan soluk eğimleri ve oyuk elemanları ile modern bir görünüm kazandırıyor. Sol üst köşede, yukarıda belirtilen (1 piksel dalga boyuyla) aynı teknik kullanılarak dikilen rozet için güzel bir deri efekti üretmek için tekrarlanan bir desen kullanılır.
Mini Öğreticiler
Basit Kesikli Çizgi Oluşturma (Illustrator)
Bu mini eğitimde, bu bölümün ilk örneğinde olduğu gibi daire oluşturmak için basit bir çizgi-konturlu çizgi oluşturmak için Illustrator (Ai) kullanacağız. Illustrator uygulamasını açın ve Elips aracını seçin. Şeklinizi orantılı tutmak için Shift tuşunu basılı tutarken, aşağıdaki gibi bir daire sürükleyin.
Kontur panelinden (Pencere → Kontur), Kısım 4 ile 2 noktalı bir ağırlık konturu uygulayın. “Kesikli Çizgi” seçeneğini işaretleyin ve ilk çizgi alanınıza 12 nokta ekleyin.
Şeklimizin sağ tarafında bulunan çizginin aslında iki 12 noktalı çizgi olduğunu fark edeceksiniz. Bunu düzeltmek için, inme biraz daha fazla bir model verelim. Çizgiyi 3 noktaya ve farkı 12 sayıya getirin ve ardından çizgiyi ikiye katlayın ve son boşluğu 12 puan koruyun. Aşağıdakine benzer bir eğri çizgi ile sonuçlanmalıdır (sonuçlar dairenizin boyutuna bağlı olarak değişecektir).
Önce şeklini kopyala, sonra Düzenle → Kopyala (Komut + C) ve son olarak Düzenle → Yerinde Yapıştır (Komut + F) seçeneğini belirleyin. Yeni şekil seçiliyken Alt + Shift tuşlarını aynı anda tutun ve şeklin boyutunu azaltın. Bu iki tuşun aynı anda tutulması, şekli orantılı olarak koruyacak ve orta noktadan boyutu azaltacak ya da artıracaktır, böylece yeniden hizalama ihtiyacı ortadan kalkar.
İki daireden daha büyük olanı seçin. Konturu çıkarın ve dolgu rengini kahverengiye (veya bu konuda başka herhangi bir renge) değiştirin. Şimdi, iki daireden daha küçük olanı seçin ve kontur rengini daha açık bir kahverengiye dönüştürün.
İki daireden daha küçük olanı seçildiğinde, kopyalayıp yapıştırarak kopyalayın. Kopyalandıktan sonra, orijinal şeklin altına konumlandırın (Komut + [) ve klavyenizdeki aşağı oku bir kez vurarak şekli aşağı doğru bükün; daha sonra kontur rengini beyaza değiştirin.
Beyaz inme dairenizin opaklığını% 50'ye ve kahverengi inme dairenizin opaklığını% 75'e düşürün.
Gerçekçi bir dikiş oluşturma (Photoshop)
Bu mini eğitimde, gerçekçi bir dikiş üretmek için gerçek bir kumaş dokusu ve Photoshop'un yerleşik efektlerinden bazılarını kullanacağız. Yeni bir Photoshop belgesi açın ve seçtiğiniz bir kumaş dokusu ekleyin. Resmi kırpın, böylece beyaz bir arka plan üzerinde oturur.
Dikdörtgen Seçim Çerçevesi aracını seçin ve kumaş dokusunun şeklinizin iç tarafında bir seçim sürükleyin. Yeni bir katman oluşturun ve “Dikiş” olarak adlandırın. Düzenle → Kontur'a gidin ve şekline 1 piksel siyah kontur uygulayın.
Dikdörtgen Seçim Çerçevesi aracını tekrar seçin ve konturunuzun üzerine getirin. Nereye başladığınız önemli değil. Seçilen bir konumla, Sil tuşuna basın. İçeriği kumaşın katmanından değil, kontur katmanından kaldırdığınızdan emin olun.
Aşağıdaki gibi, konturlu çizginin geri kalanı için işlemi tekrarlayın.
Dikişlerin simetrik olmayacağı yüksek bir şans var; ama bu iyi bir şey çünkü dikişler nadiren!
Buna benzeyen bir şeyle bitirmelisin:
Katmanlı katmanı sağ tıklayın ve Katman Stilleri penceresini açmak için “Karıştırma Seçenekleri” ni seçin. Renk Kaplama sekmesini seçin ve bir açık gri seçin (Kullandım #F1F1F1 ).
Şimdi Alt Gölge sekmesini seçin. 90 ° 'lik bir açıyla, 1 piksellik bir mesafede ve 0 piksel boyutunda bir siyah gölge uygulayın. Gölgenin opaklığını% 20 ila 60 arasında bir yere indirin.
Kumaş katmanını seçin ve Katman Stilleri penceresini açın. Varsayılan bir Alt Gölge'yi 0 piksellik bir uzaklığa ve beyazdan siyaha ve beyaza geçiş yapan bir Degrade Yerleşimi uygulayın. Gradient Overlay'inin Karıştırma modunu% 15 opaklığa sahip “Multiply” olarak değiştirin. % 100 uygulandığında ve görüntülendiğinde, buna benzer bir şeyle sonuçlandırmalısınız:
Renk ve renk dengesi ayarlarını kullanarak kumaşınızın renkleri ile oynayın. İşte benim sonucum:
2. Kağıt ve Gölgeler
Kağıt ve gölgeler, tasarım stilleri olarak gittikçe daha popüler hale geliyor, ancak özellikle ahşap olanlar gibi, doku-ağır tasarımlarda popüler. Aşağıdaki çalışmaların toplanması, kük bilgi bölümlerini veya bazı durumlarda web sitesinin ana içeriğini sunmak için farklı şekillerde kullanılan kağıt ve gölgeleri gösterir.
Örnekler
Bu ekran görüntüsü, fark etmemiş olmanız durumunda, yukarıdaki “Kumaş ve Dikiş” bölümünün sonunda gördüğümüz tasarımın küçük bir bölümünden geliyor. Sayısal olarak oluşturulmuş doku temasını sürdürmek, kağıdın kıvrıldığı gibi görünmesini sağlamak için çarpık bir özel gölge ile basit bir beyaz şekil kullanılır.
Ahşap ve buruşuk kağıt dokuların gerçekten güzel bir kombinasyonu. Bu kullanıcı arayüzündeki kağıt, bir tarif için gereken bir bilgi pasajı sunmak için kullanılır; kullanıcının tam tarifi görüntülemesine, favorilere eklemesine ve paylaşmasına izin veren bazı hoş siluet tarzı simgeler.
Bu tasarım, kullanıcı dostu bir arayüz oluşturmak için ahşap, kağıt ve bant dokularını birleştiren, doku ağırlığındadır. Fotoğraflanan ahşap ve bant, dijital olarak üretilmiş kağıt doku ve gölgelerle birleştiğinde birlikte iyi çalışır.
Bu, postadaki en sevdiğim UI örneklerinden biridir. Tamamen dijital (ahşap doku dahil), tasarım güzel bir arama alanı oluşturmak için damla ve iç gölgeler kullanır. Tasarım ayrıca dikiş ve kumaş elemanını da kullanır. Genel olarak, harika görünen çok kullanıcı dostu bir arayüz!
Bu tasarım, kağıdın etrafındaki yinelenen desenle geleneksel havayolu zarflarından esinlenmiş gibi görünüyor. Kağıt, (dijital olarak) ahşap arka plana zımbalanmış ve kullanıcı arabiriminin düz bir web sayfası yerine bir iğne ve duyuru panosu gibi görünmesini sağlamıştır.
Bej-krem görüntü ve navigasyon arka planı, özellikle damgalanmış rozet ve basılmış gibi görünen soluk sepya tarzı fotoğraflarla kağıda benzeyen ince bir gölge bırakır. Bu, ahşap dokulu arka plan ve arayüzün genel hissi ile mükemmel uyum sağlar.
Mini Öğreticiler
Basit Dijital Kağıt Efekti Oluşturma (Photoshop)
Bu mini eğitimde dijital kağıt efekti oluşturmak için bir ahşap doku ve temel Photoshop araçları kullanacağız. Doku veya yinelenen bir desenle yeni bir belge oluşturmaya başlayın.
Dikdörtgen Şekil aracını seçin ve tuvalin en üst kısmına yerleştirerek, aşağıdakine benzer bir şekil ekleyin.
Şekli çoğaltın ve Düzenle → Serbest Dönüştür'e gidin (veya Command + T tuşlarına basın). Şekli değiştirmek için Alt + Shift tuşlarını basılı tutarken şeklin boyutunu azaltın ve ardından boyutu merkeze doğru azaltın.
Üst bağlantı noktasını tuvalin üst kısmının üstünden sürükleyerek, orijinal şeklin üst kısmıyla üst üste gelecek şekilde sürükleyin.
Yeni şeklinizin rengini çok açık bej (neredeyse beyaz) olarak değiştirin. kullandım #FFFBF8 .
Orijinal şeklini çoğaltın ve rengi saf siyahla değiştirin ( #000000 ).
Şeklin boyutunu, orijinal şekle göre birkaç piksel daha büyük olacak şekilde artırın. Bir kılavuz oluşturun — bir kılavuzyu cetvelden sürükleyebilirsiniz (Görünüm → Göster Cetvelleri Göster), siyah şeklinizin altında 10 ila 20 piksel arasında. Düzenle → Dönüştür → Çözgü'ye gidin.
Alt sol bağlantı noktasını kılavuzunuza doğru sürükleyin ve ardından adımı sağ alt bağlantı ile tekrarlayın.
Şekil dönüşümünüzü onaylamak için Enter tuşuna basın. Şekil Katmanı aracını sağ tıklayın ve “Rasterize Layer” seçeneğini seçin.
Siyah şekil katmanını diğer iki şeklin altında, ancak ahşap tabakanın üzerinde yeniden konumlandırın. Filtre → Bulanıklık → Gauss Bulanıklığı'na gidin ve siyah şekli 10 pikselle bulanıklaştırın. Ardından “Tamam” ı tıklayın.
Siyah şeklinin opaklığını% 50'ye indirin. Orijinal beyaz şekliniz için Katman Stilleri penceresini açın ve Kontur sekmesine tıklayın. Degrade dolma türünü kullanarak, siyahtan beyaza 90 ° açı yapan bir 1 piksel vuruşunu uygulayın.
Bununla, dijital kağıt üzeri odun efektimiz var! Bu web siteleri için kullanmak için harika bir tekniktir.
3. Oyulmuş Tipografi ve Desenler
Kazınmış tipografi ve desenler, gelişmiş web tasarımında oldukça yaygın bir tekniktir ve günlük tasarımda giderek daha popüler hale gelmektedir. Aşağıda, ahşap dokulu arayüzlerde bu stili iyi kullanan birkaç örnek verilmiştir.
Örnekler
Bu Instagram uygulama kullanıcı arayüzü aşınmış bir eski görünüm üretmek için bir grungy ahşap dokulu arka plan ve yıkanmış yarı saydam görüntüleri vardır. Tipografinin çeşitli farklı stilleri vardır, bu da yazıların öne çıkmasına ve ahşap arkaplanın kazınmış bir his vermesine izin verir.
Genel olarak, bu çeşitli stilleri ve teknikleri büyük ve eşit derecede büyük bir koleksiyon ile, gerçekten temiz bir ahşap kullanıcı arayüzü. Biri tekrar tekrar kullanılan (ve çok iyi) tipografi ve desenler üzerindeki oyulmuş efekttir - ekran görüntüsünün en üstündeki çiçek desenleriyle örneklenmiştir.
Ana tabela olarak hizmet vermek için burada ahşap dokulu başlığa metal tabela asılır. İşaretlere daha gerçekçi bir gravür etkisi vermek için tasarımcı tipografi iç ve alt gölgeleri verdi.
Ahşap dokular öncelikle bu tasarımda gezinti çubuğu için kullanılır (bu örnekte log). Kazınmış tipografi, sanki bazı taşların ahşap dokularını göstermek için kazınmış gibi görünmesini sağlar.
Işaretli tipografinin bir başka örneği levhalar üzerinde, bu durumda metal yerine ahşap dokulu işaretler.
Bu ahşap UI, şık ve modern elemanlar kullanır ve bunu bu ya da bir sonraki kategoriye koymayı tercih etmeyi zorlaştırır. “Satın al” butonu ve alışveriş çantası ikonunun çok detaylı bir gravür etkisi var, bu da onları harika bir şekilde tıklanabilir hale getiriyor!
Mini Öğreticiler
Bir Desenin Ahşap İçine Nasıl Çizilir (Photoshop)
Bu mini eğitimde, Photoshop'ta kazınmış veya oyulmuş bir ahşap efekti oluşturacağız. Yeni bir belge açın ve bir ahşap doku ekleyin.
Kendi desenlerinden birini ekleyin veya stok vektör resmini kullanın.
Vektörü doğru bir şekilde konumlandırdıktan sonra, katmanı sağ tıklayın ve “Katmanlı Rasterleştir” seçeneğini seçin. Bir kez daha sağ tıklayın ve Degrade Şablonu sekmesini seçin. Aşağıda görüldüğü gibi, ahşap arka plandan seçilen iki rengi kullanarak bir degrade uygulayın.
Gölge Kaldır sekmesini seçin ve normal Karıştırma moduyla beyaz bir gölge uygulayın. Gölge açısını 90 ° ve mesafeyi ve boyutu 1 piksele değiştirin. Diğer ayarları varsayılan değerlerinde tutabilirsiniz.
Modelinizin içine gölge uygulamak için İç Gölge sekmesini seçin. Bu, oyulmuş etkiyi yaratmamıza izin verecektir. Gölge opaklığını% 20'ye düşürün ve açıyı 90 ° olarak değiştirin. Gölgenin uzaklığını ve boyutunu her biri 3 piksel olarak değiştirin ve diğer tüm ayarları varsayılan olarak saklayın.
“Tamam” ı tıklayın ve sonra arka plan dokusunun bir kısmının tüm ihtişamıyla parlamasına izin vermek için desen katmanınızın opaklığını% 80'e indirin. Bu sonuçla sonuçlanmalı:
4. Şık ve Modern Elemanlar
Ahşap dokular genellikle vintage ve retro tasarıma bağlı olsa da, doğru şekilde çekilirse, aşağıdaki örneklerden de görebileceğiniz gibi modern ve şık unsurları tamamlamak için de kullanılabilirler.
Örnekler
Burada, bir önceki kategoride gördüğümüz, tamamen farklı bir stillenmiş öğeyi gösteren bir arabirimin başka bir ekran görüntüsü. Bu tasarımdaki kaydırma çubuğu ve kaydırma çubukları, kullanıcı dostu bir arayüz için şık beyaz-gümüş ve yeşil degradelere sahiptir.
Kumaş, dikişler ve oyulmuş tipografi tekniklerinin yanı sıra, bu tasarım, 2-piksel gri-beyaz vuruşlar ve çekici ve kullanışlı iPad benzeri bir arayüz sağlayan minimalist ikonlar gibi bazı modern unsurlara sahiptir.
Favori arayüzlerimden biri. Kumaş ve ahşap dokulu görüntüleri şık gradyanlar, 2-piksel vuruşları, basit ikonlar ve muhteşem tipografi ile birleştirerek kullanıcı için birçok ilgi çekici nokta yaratır.
Ahşap dokular, üç boyutlu efektler, parıltılar ve parlak parlaklıkları birleştiren, son derece ayrıntılı bir arayüz, kullanıcılarını sersemletecek bir sonuç ortaya çıkarır. Tek pikselli çizgiler 3-D etkisini güçlendirmek için kullanılır.
Bu canlı ahşap ara yüzü hayata geçirmek için parlamalar, gölgeler ve konturlar kullanılır. Ancak modern ikonlar anahtar.
Bu sevimli küçük arayüz, cazip ve anlaşılması kolay bir arayüz oluşturmak için dünyanın doğal ürünlerini ve şık fütüristik öğeleri kullanır. Modern unsurlara gürültü eklenmiş, ahşap dokulu başlık ile uyum sağlanmıştır.
Bu tuş takımı bize mevcut modern bir öğeye dayalı bir ahşap doku sunuyor: varsayılan iPhone UIKit. Tuş takımı, varsayılan tuş takımı ile aynı şekilde çalışır ve bu nedenle kullanıcıları şaşırtmaz.
Mini Öğreticiler
Bu mini eğitimde, Photoshop'un katman efektlerini kullanarak ahşap bir UI kaydırıcısı oluşturacağız. Yeni bir belge oluşturun ve bir ahşap doku veya desen ekleyin.
Yuvarlatılmış Dikdörtgen aracını seçin ve aşağıdakine benzer, uzun bir dar şekli sürükleyin. Aracımın köşe yarıçapı 15 piksele ayarlandı.
Şekiller katmanını sağ tıklayın ve “Karıştırma Seçenekleri” ni seçin. Degrade Yerleşimi sekmesini seçin ve arka plandan seçilen bir degrade rengi ve ardından biraz daha koyu bir renk ekleyin. Ardından “Tamam” ı tıklayın.
Şimdi İç Gölge sekmesini seçin ve% 30 opaklık ve 120 ° açı ile siyah bir gölge uygulayın. 1 piksele kadar olan mesafeyi bırakın ve her şeyi 0'a bırakın. Bu, şeklimizin içinde bir gölge oluşturarak, ahşap arka plandan oyulmuş gibi görünmesini sağlar.
Gölge Kaldır sekmesini seçin ve normal Karıştırma moduyla beyaz bir gölge uygulayın. Açıyı 90 ° ve mesafeyi ve boyutu 1 piksele değiştirin. Her şeyi 0 pikselde bırakın. Bu, şeklimizi altta bir vurgu yapacak ve daha fazla üç boyutlu ve gerçekçi görünmesini sağlayacaktır.
Oyulmuş çizginize zum yapın ve Elips aracını seçin. Şekli yuvarlak tutmak için Shift tuşunu basılı tutarken, bir daireyi dışarı sürükleyin ve kaydırma çubuğunun üzerine yerleştirin.
Yeni daire şekliniz için “Katman Stilleri” penceresini açın. Degrade Yerleşimi sekmesine tıklayın ve bir ışık ortamından açık griye doğru bir degrade uygulayın. 90 derecelik bir açı verin.
Gölge Kaldır sekmesini seçin ve şekle bir gölge uygulayın. Uzaklığı 0 piksel ve boyu 10 piksel olarak değiştirin.
Kaydırıcınızı% 100 oranında görüntülemek için uzaklaştırın. İşte sonuç:
5. Üç Boyutlu Etkiler
Üç boyutlu tasarıma kısıtlama yoktur ve ahşap dokularda inanılmaz derecede etkilidir. Bu kombinasyon, özellikle Apple'ın iBook uygulaması olan iPhone ve iPad arayüzlerinde görüldüğü gibi “raflar” üretmek için yaygın olarak kullanılır.
Örnekler
Bu raflar son derece gerçekçi ve gölgeler (sağ üst köşedeki iç rafta olduğu gibi) geniş bir özel iş seçiminden (yerleşik olmayan Photoshop filtreleri) geliyor.
Bu tasarımdaki etkiler, öncekilerdekine oldukça benzer. Bu kez, efektler daha temiz ve daha modern bir görünüm getirirken, bir öncekinden daha gerçekçi ve “kullanılmış” görünmek istendi.
Bu iPhone rafları benzer teknikler sunmaktadır. Bu kez sonuç, hem modern hem gerçekçi, dijital efektlerle dokulu fotoğrafları mükemmel bir şekilde dengeliyor.
Bu 3-D düğmesi inanılmaz! Ahşap dokulardan oluşan kombinasyonu ile tasarımın hassas detayları yüksek odak noktası haline geliyor. Bunun gibi bir düğme önünüzdeyken, itmeye izin vermenin hiçbir yolu yoktur!
Bu gezinme çubuğuna basit ancak etkili bir 3-D efekti uygulanmış ve düğmeler çekmecelermiş gibi görünmektedir. S arayüze kullanıcı dahil etmek için akıllıca tasarlanmış bir unsur.
Bir tasarımcı ve illüstrasyon ticaret olarak Callum Chapman tarafından WDD için özel olarak yazılmış Çember Kutusu Yaratıcı . O da çalışır İlham Blog ve Picmix Mağazası
Ahşap UI tasarımlarınızı ve resimlerinizi yanı sıra diğer okuyucularınıza yardımcı olabilecek makalelerin veya eğiticilerinizi paylaşın.