Marka Renkleri Arasında 10 Adımlı Degradasyon Oluşturun

1. İki Marka Rengini Denetleyin

Bağlam olmadan çekici uç noktalar seçmek yerine, yerleşik iki renkle başlayın. Renk A, marka renginin birincil rengi olabilirken, Renk B destekleyici veya kampanya rengi olabilir. Her birinin şu anda nerede görüntülendiğini ve ne iletişim kurduğunu kaydedin.

Marka yönergeleri yalnızca eski bir PDF'de mevcutsa ve eşlik eden metinle çalışmanız gerekiyorsa, PDF to Word Dönüştürücü düzenlenebilir bir belge oluşturabilir. Dönüştürülen değerler yine de orijinal marka dosyasıyla karşılaştırılmalıdır çünkü dönüştürme, bir renk kodunun geçerli veya doğru olup olmadığını doğrulamaz.

Bir uç nokta henüz onaylanmadıysa, karıştırma alıştırmasına başlamadan önce kombinasyonları keşfetmek için Renk Paleti Oluşturucu'yu kullanın. Hala tartışılan iki renk arasında ayrıntılı bir degradasyon oluşturmayın.

Bu denetim yaygın bir sorunu önler: eski bir logo renginden, onaylanmamış bir kampanya değerinden veya sıkıştırılmış bir ekran görüntüsünden kopyalanan bir koddan cilalı bir degradasyon oluşturmak.

2. Geçerli HEX Uç Noktalarını Hazırlayın

Color Mixer, HEX değerlerini uç noktaları olarak kullanır. Her altı haneli HEX değeri bir hash sembolü ile başlar ve kırmızı, yeşil ve maviye karşılık gelen çiftler içerir. Örneğin, #2563EB güçlü bir maviyken, #E11D48 canlı kırmızı-pembedir.

Değerleri yetkili bir marka dosyasından, tasarım sistemi kitaplığından veya kaynak koddan kopyalayın. Resmi bir kod olduğunda logo ekran görüntüsünü örneklemekten kaçının. Görüntü sıkıştırması, görüntü ayarları ve renk yönetimi, bir ekran görüntüsünden topladığınız değeri biraz değiştirebilir.

Her uç noktayı beyaz, açık gri, kömür ve siyah arka planlara yerleştirin. Bu henüz tam degradasyonu test etmez, ancak her bir uç noktanın yaygın bir bağlamda görsel olarak zayıflayıp zayıflamadığını ortaya çıkarır.

Uç noktalara brand-start ve brand-end gibi geçici çalışma adları verin. Onları "sol" ve "sağ" olarak adlandırmaktan kaçının çünkü degradasyon yönü daha sonra değişebilir. Renkler degradasyon dikey, çapraz veya radyal hale geldiğinde bile kimliklerini korumalıdır.

3. 10 Adımlı Bir Degradasyon Oluşturun

Color Mixer'ı açın, Renk A ve Renk B'yi girin ve adım sayısını ona ayarlayın. Sonucu oluşturun ve her görüntülenen değeri özgün sırasında bir çalışma belgesine kopyalayın.

Durakları adlandırmadan önce, tam geçişi bir şerit olarak görün. Sürekli hissettiriyor mu, yoksa bir bölge aniden atlıyor gibi mi görünüyor? Orta kısmı sıkıcı mı oluyor? Bir uç nokta görsel olarak diğerinden çok mu daha güçlü?

Matematiksel olarak eşit bir sıra her zaman görsel olarak eşit görünmez. Karışım yüzdeleri eşit şekilde dağıtılmış olsa bile, parlak sarı, koyu maviden daha hafif ve daha enerjik görünebilir. Algılanan parlaklık, renk tonu ve doygunluk, dizinin nasıl hissettirilmesini etkiler.

Aşağıdaki örnek, iki örnek uç nokta arasında on değerin nasıl belgeleştirilebileceğini gösterir. Sonuçlarınız seçilen renkler ve araç veya tasarım uygulaması tarafından kullanılan enterpolasyon yöntemine bağlı olacaktır.

4. Orta Noktayı ve Geçiş Yolunu İnceleyin

Orta nokta özel dikkat haketmesi çünkü iki marka renginin nasıl etkileşim kurduğunu ortaya çıkarır. Mavi ve kırmızı-pembe karıştırıldığında, merkez kül rengi içinden hareket edebilir. Diğer kombinasyonlar daha az tahmin edilebilir sonuçlar oluşturabilir. Tamamlayıcı renkler, örneğin, yumuşatılmış orta değerler üretebilir.

Orta noktayı yalnızca büyük izole bir numune olarak değerlendirmeyin. Bunu komşu duraklar arasına yerleştirin ve ardından gerçekçi bir bileşende test edin. Kendi başına ilginç olmayan bir renk, bir grafik veya illüstrasyonda ihtiyaç duyulan tam geçişi sağlayabilir.

Oluşturulan orta noktayı tasarım yazılımınızda basit %50 katman kaplaması ile karşılaştırın. Uygulamalar renkleri farklı alanlarda enterpolasyon yapabileceği veya saydamlığı farklı şekilde uygulayabileceği için değerler farklı olabilir. Son üretim ortamıyla eşleşen iş akışını kullanın.

Orta noktayı kabul edildi, ayarlanabilir veya reddedildi olarak etiketleyin. Çamur benzeri hale gelirse, önce o yumuşatılmış bölgenin faydalı olup olmadığına karar verin. Sakin bir merkez, canlı uç noktalar arasında görsel dinlenme sağlayabilir. Tasarımı zayıflatıyorsa, resmi marka renklerini değiştirmek yerine kasıtlı bir ara durak eklemeyi düşünün.

5. Zayıf veya Çamur Benzeri Durakları Kaldırın

Oluşturulan on durak, on tanesinin de kalıcı tasarım jetonları haline gelmesi gerektiği anlamına gelmez. Alıştırma, geçişi görünür hale getirmek için on değer kullanır. Son sistem yalnızca yinelenen bir sorunu çözen renkleri içermelidir.

Her durakı öncekiyle ve sonrakiyle karşılaştırın. İki değer normal bileşen boyutunda ayırt etmek neredeyse imkansızsa, ayrı adlara ihtiyaç olmayabilir. Orta bir değer çok fazla doygunluk kaybederse, yumuşatılmış destekleyici bir renk olarak çalışıp çalışmadığına veya kaldırılması gerekip gerekmediğine karar verin.

Diziyi gri tonlamada test edin. Bu, rengin dikkat dağıtması olmadan açıklık ilerlemesini ortaya çıkarır. Birden fazla bitişik renk aynı griye çökerse, grafikler veya veri görselleştirmesi için yeterli tonal ayrım sağlamayabilirler.

Her olağandışı geçişi 'onarmayın'. İki marka rengini karıştırmanın amacı, nasıl ilişki kurduklarını keşfetmektir. Bazen doğru sonuç, tek bir sürekli degradasyon oluşturmamaları gerektiğidir. Aralarında nötr bir geçişle ayrı katı renkler olarak daha iyi çalışabilirler.

6. Öngörülebilir Bir Adlandırma Sistemi Oluşturun

Duraklar incelendikten sonra, kararlı adlar atayın. En basit sistem, blend-01'den blend-10'a kadar konumlarına göre renkleri numaralandırır. Bu diziyi korur, ancak her değerin nasıl kullanılması gerektiğini açıklamaz.

Daha güçlü bir sistem, ham değerleri anlambilimsel rollerden ayırır. Ham jetonlar, tam renk dizisini kaydeder. Anlambilimsel jetonlar, seçilen renkleri kampanya arka planı, grafik başlangıcı, grafik orta noktası veya illüstrasyon vurgusu gibi sorumluluklar ile bağlantılandırır.

:root {
  --blend-01: #2563eb;
  --blend-02: #3a5bd9;
  --blend-03: #4f53c7;
  --blend-04: #644cb5;
  --blend-05: #7944a3;
  --blend-06: #8d3c90;
  --blend-07: #a2347e;
  --blend-08: #b72d6c;
  --blend-09: #cc255a;
  --blend-10: #e11d48;

  --campaign-gradient-start: var(--blend-01);
  --campaign-gradient-middle: var(--blend-06);
  --campaign-gradient-end: var(--blend-10);
}

Büyük bir jeton veya kullanım etiketleri listesini korumanız gerekiyorsa, Alfabetikleştir Aracı referans listesini sıralayabilir ve yanlışlıkla yinelenmiş satırları kaldırabilir. Numaralandırılmış degradasyon dizisinin kendisini alfabetikleştirmeyin, çünkü görsel sırası bozulmadan kalmalıdır.

7. Yararlı Tasarım Rollerini Atayın

Degradasyon dizisi, durakları tutarlı bir şekilde yeniden kullanabildiğinde değerli hale gelir. Her renk için yapay bir kullanım aramak yerine, proje temelinde roller atayın.

Uç noktalar birincil marka renkleri olarak kalabilir. Ara değerler, grafik ölçeğini, illüstrasyon serisini, ilerleme göstergesini veya kampanya sistemini destekleyebilir. Daha yumuşak bir orta nokta geniş dekoratif bir alan olarak çalışabilirken, daha güçlü bir durak önemli bir istatistiği vurgulayabilir.

Sıra siralanmış verileri temsil etmek için sürekli bir marka degradasyonu kullanmaktan kaçının; dizi ayırt edilebilir ve anlamlı kalmadığı sürece. Kullanıcılar değerler arasındaki farkları anlayabilmelidir. Degradasyon dekoratif olduğunda, daha fazla özgürlük vardır; bilgi iletişim kurduğunda, netlik öncelik alır.

8. Degradasyon Yönünü ve Tipografisini Test Edin

Yön değiştiğinde aynı renkler farklı izlenimler oluşturabilir. Yatay degradasyon sayfanın genelinde hareketi önerebilir. Dikey degradasyon derinlik oluşturabilir. Çapraz bir yön genellikle daha enerjik hissettiriş, radyal degradasyon ise merkezi bir noktaya dikkati çeker.

Figma'nın degradasyonları dolgu veya vuruş olarak kullanmaya yönelik resmi rehberi, doğrusal, radyal, açısal ve elmas degradasyon türlerini açıklamaktadır. Birden fazla türü test edin, ancak en görsel olarak dramatik seçenek yerine bileşimi destekleyen sürümü seçin.

Degradasyona gerçek bir başlık, paragraf ve düğme ekleyin. Beyaz, kömür ve diğer onaylanmış metin renklerini birkaç konumda test edin. Bir metin rengi Renk A üzerinde okunabilir olabilir ve arka plan Renk B'ye yaklaştıkça başarısız olabilir.

Dekoratif metin deneyleri, Fancy Text Generator ile araştırılabilir, ancak Unicode stilli metin, önemli başlıklar, navigasyon veya erişilebilir web içeriğinde uygun tipografinin yerini almamalıdır. Bunu yalnızca sınırlı yaratıcı keşif için kullanın ve son mesajı okunabilir tutun.

Tek bir metin rengi tüm degradasyonda çalışamadığında, metin rengini sözcükten sözcüğe değiştirmeyi bırakın. Düz bir panel ekleyin, içeriği yeniden konumlandırın veya degradasyonu temel metin olmayan bir alan için ayırın.

9. Degradasyonu CSS'de Uygulayın

Yön ve duraklar onaylandıktan sonra, CSS kullanarak web sürümünü oluşturun. MDN, linear-gradient()'i düz bir çizgi boyunca iki veya daha fazla renk arasında kademeli bir geçiş üreten bir CSS işlevi olarak tanımlar.

.brand-gradient {
  background-color: #2563eb;
  background-image: linear-gradient(
    135deg,
    #2563eb 0%,
    #4f53c7 22%,
    #7944a3 44%,
    #a2347e 66%,
    #cc255a 84%,
    #e11d48 100%
  );
}

Düz background-color, bir geri dönüş sağlar. Seçilen degradasyon durakları, otomatik olarak on değerin tümünü eklemek yerine kasıtlı olarak yerleştirilir. CSS'de daha az durak kullanmak, on adımlı keşfi geçersiz kılmaz; gözden geçirme işleminin son etki için ihtiyaç duyulan değerleri tanımladığını gösterir.

CSS-Tricks, yönleri, renk durakları, radyal degradasyonları, tekrarlayan degradasyonları ve ilgili uygulama düzenlerini kapsayan CSS degradasyonlarına ayrıntılı bir rehber sağlar.

Uygulamayı proje için uygun tarayıcılarda ve cihazlarda test edin. Canlı CSS sonucunu onaylanmış tasarım dosyasıyla karşılaştırın. Küçük farklılıklar, görüntü ayarları, renk profilleri, tarayıcı işleme ve dışa aktarma yöntemleri nedeniyle görünür hale gelebilir.

10. Sistemi Test Edin, Belgeleyin ve Dışa Aktarın

Degradasyon, bir monitörde çekici göründüğünde bitmez. Bunu büyük ve küçük boyutlarda, metin ile ve metin olmadan, açık ve koyu çevresinde ve düşük kaliteli ekranlarda test edin.

Görünür bantlama, zayıf kontras, beklenmeyen çamur benzeri bölgeler ve uç noktalarla ilgisiz görünen ara renkler bulun. Ayrıca statik bir dışa aktarılmış görüntüyü test edin, çünkü sosyal platformlar ve sunum yazılımı bunu canlı CSS arka planından farklı şekilde sıkıştırabilir veya işleyebilir.

İki uç noktayı, oluşturulan on durakın tümünü, tutulan üretim durakları, amaçlanan yönü, onaylanan kullanımları ve yasak kullanımları içeren tek sayfalık bir degradasyon belirtimi oluşturun. Degradasyonu gerçek tipografi ve bileşen içeriği ile gösteren örnekler ekleyin.

Her belirtim sayfası JPG olarak hazırlanırsa, JPG to PDF Dönüştürücü bunları bir sıralı belgeye birleştirebilir. Dışa aktarılan PDF'yi açın ve bir istemci veya geliştirme ekibiyle paylaşmadan önce renkleri orijinal tasarımla karşılaştırın.