Tasarım Trendi: Dilimlenmiş Metin ve Tipografi
Puristler asla tipografiyi değiştirmemeniz gerektiğini söylüyor. Harfler, yazım tasarımcısı tarafından tasarlandığı gibi görünmeli veya tamamen farklı bir yazı tipi seçmelisiniz. Bu çoğunlukla doğru olsa da, istisna dilimlenmiş metin eğilimindedir.
Şık efekt, yazı öğelerini hassas bir araçla kesilmiş gibi görünür hale getirir ve logolara, başlıklara ve basit metin bloklarına görsel ilgi ekleyebilir. Dilimlenmiş metin efektleri, süper süptilden (eksik bir harfin küçük bir kısmı gibi) kelimelerin tamamen eksik olan önemli kısımlarına kadar değişebilir.
Dilimlenmiş metin kullanırken akılda tutulması gereken şey, kelimelerin her zaman okunabilir olması gerektiğidir - aksi takdirde ne var? - ve dilimlemeden dolayı istenmeyen harf kombinasyonlarının veya kelimelerin görünmemesine dikkat etmelisiniz. İşte bunu iyi yapan bazı tasarım örnekleriyle sizin için nasıl çalıştıracağınıza bir bakış.
Envato Elements'i keşfedin
“Geleneksel” Dilim
Dilimlenmiş metin, iki düzlemde kesilen ve üst üste binen bir kelime veya küçük bir kelime grubu gibi bir metin öğesiyle neredeyse katmanlı bir görünüm içerir. Bu efekt derinlik oluşturur ve basit bir karakter kümesini görsel olarak ilginç hale getirebilir.
Resoluut, kullanıcıları tasarımın merkezine çekmek için bu efekti ve işareti ile birlikte kullanır. Dilimlenmiş metin, şirketin “tutumlu dijital tasarım” üzerine odaklandığı mesajlaşmayı yansıtır, çünkü dilimlenmiş metin düz yazıya sahip belirli bir edgier havası taşır.
Bu teknik en iyi, karakter kümeleri basit olduğunda (önce sans serif yazı tiplerini düşünün) ve kelimelerin kesilebildiği ve okunabilirliğini koruyabildiği doğal bir kırılma noktasına sahip olduğunda en iyi sonucu verir.
Metin ve Fotoğrafları Dilim
Katmanlama efekti, yazı tipi ve boşluk kombinasyonuyla sınırlı değildir. Tasarımcılar, Shift'teki yukarıdaki örnek gibi, serin bir dilimlenmiş efekt oluşturmak için görüntüleri ve metni de kullanabilirler.
Tek bir görüntünün (ayrıca dilimlenmiş) yazı ile eğimli dilim kombinasyonları kullanıcıyı tasarıma çeker.
Bazı kelimeler ilk başta fark etmek biraz daha zor olsa da, animasyonlar arasında mesajı kolayca anlamaya yetecek kadar zaman var.
Bu eğilim, dijital ajanslar ve portföy siteleri için modern bir görünüm ve his sergilemenin yanı sıra yaratıcı pirzolaları vurgulamanın bir yolu olarak iyi çalışır.
Animasyonlu Dilim
Dilimlenmiş metin efekti, diğer moda tasarım öğeleriyle de birleştirilebilir. Dilimlemeyi animasyonla karıştırmak hoş bir görsel öğeyle sonuçlanabilir.
Yukarıdaki örnekte, dilimlenmiş metin öğelerinin her biri aslında gezinmedir. Kullanıcılar her iki öğeyi de tıklatabilir, ancak daha etkileyici olan dilimlenmiş metni bir araya getiren fareyle üzerine gelme eylemidir.
Logolar için
Dilimlenmiş metin, üzerinde çalışmanız gereken tek öğe metin olduğunda logo oluşturmak için eğlenceli bir yol olabilir. Eğlenceli bir logo, marka tanınırlığı için bir işaretten daha fazlası olabilir; aynı zamanda yukarıdaki gömlek tasarımı gibi çoklu kullanımlar için oldukça grafik bir öğe olabilir.
Dilimlenmiş metinle çalışırken, okuma kolaylığını korurken bakmak ilginç olacak şekilde dilimleme için doğal bir şekil ve eğim arayın.
Dilimlemenin beyaz alan yaratma yoluna dikkat edin. Yukarıdaki tasarım, içinde geniş bir ek bilgi dilimi kullanmaktadır. Dilimlemenin daha yaygın kullanımı genellikle ince bir çizgidir, ancak yaklaşımlar (bu yazıdaki örneklerden de görebileceğiniz gibi) oldukça önemli ölçüde değişebilir.
Etkileşim Yaratın
Kullanıcıların, yukarıdaki örnek gibi etkileşimli bir metin ve fırça kombinasyonu ile kendi metinlerini dilimlemelerine izin verin. Metin kendiliğinden tam olarak dilimlenmemiş olsa da, efekt sanat oluşturma sürecinde oluşturulur.
Kullanıcıların tasarımı değiştirmesine izin veren herhangi bir araç, etkileşimli bileşen nedeniyle sitede daha uzun sürebilir.
Dilimli Dikey Konturlar
Dikey kesimler daha kısa olma eğilimindedir, çünkü her kesim tek bir harfin bir parçasıdır. Çoğu tasarımcı eğilimi daha yatay bir dilim ile aynı şekilde kullanıyor gibi görünse de, kesimler de dikey olabilir.
Dikey kesimler daha kısa olma eğilimindedir, çünkü her kesim tek bir harfin bir parçasıdır. Dikey dilimleri işlemenin hilesi tutarlılıktır. Kesimlerin yapılma şekli birbirlerini taklit etmeli, böylece harfler birbirine gitmiş gibi görünmelidir. Bu dilimleme yöntemi, neredeyse yazı tipinin amaçlanan bir parçası gibi görünmelidir. (Yukarıdaki örnekte, dilimler harften harfe aynı genişliğe ve aynı harfler aynı dilimlere sahip değildir.)
Görsel Akış Oluşturun
Kesikler neredeyse okuma aciliyeti yaratır, böylece harfler arasında ve ekrandaki ana görsele geçersiniz. Dilimlenmiş metnin bir sonucu - amaçlanmış olsun olmasın - görsel akış oluşturmasıdır. Bir kullanıcı gözü, dilim ve çevresindeki beyaz boşluğun yönünü izleyecektir.
Yukarıdaki örnekte logoya bakın. Robocath'taki R ve o'lardaki dilimlerle (artı c'nin normal eksik kısmı) ekran boyunca soldan sağa belirgin bir yönlü çekiş var.
Çekme, normal okuma ile ilişkilendirdiğinizden daha güçlüdür (ayrıca soldan sağa), çünkü dilimler sizi karakterlerde hızlı bir şekilde iter. Kesikler neredeyse okuma aciliyeti yaratır, böylece harfler arasında ve ekrandaki ana görsele geçersiniz.
Yazıya Vurgu Ekle
Dilimlenmiş metin tasarım trendini kullanmanın nihai ve muhtemelen en zorlayıcı nedeni yazıya veya mesaja vurgu yapmaktır. Dilimleme, bir karakterin bir kısmının tasarımda eksik olduğu harflerin herhangi bir şekilde değiştirilmesi olabilir.
Yukarıdaki MJND, mesaja vurgu eklemek için harf formlarını gizlemek veya dilimlemek için daha fazla katmanlama efekti kullanır. Görüntü burada tüm iletişimleri kolayca yapabilir, ancak bu efekt kullanıcıyı ana mesajlaşmaya geri getirmeye yardımcı olur. Kombinasyon basit, etkili ve görsel olarak ilginç.
Öğrenme Kaynakları
Tam olarak ne oluşturmaya çalıştığınıza bağlı olarak, projeler için dilimlenmiş metin efektleri oluşturmanın birkaç yolu vardır. En popüler seçenekler, düzenleme yazılımı kullanarak elle metin efekti oluşturmak veya web projeleri için efekt oluşturmak için CSS kullanmaktır.
İşte, şık bir dilimlenmiş metin efekti oluşturmayı deneyebileceğiniz bu seçeneklerin her biri için öğreticiler:
- Video: Adobe Illustrator'da Dilimlenmiş Metin Oluşturma
- CSS kullanarak Metin Efekti Snippet'ini kesin
Sonuç
Dilimlenmiş metin eğilimini kullanmak biraz zor olabilir, çünkü tür öğelerini değiştirmeyi içerir. Okunabilirliğin kaybolmaması veya bu efektle kullanıcıları kaybedebilmeniz önemlidir.
Dilimlenmiş metin efektleri eğlenceli bir çözüm olabilir ve bir odak noktası oluşturmaya yardımcı olabilir. Bir animasyon dokunuşu eklemek, onu bir sonraki seviyeye taşımanıza yardımcı olabilir. (Bu yayında yer alan örneklerin çoğu tam olarak bunu yapar; bu web sitelerini ziyaret ettiğinizden ve tıkladığınızdan emin olun.)
