Topluluk markalaması için grafik araçları: logo, OG kartları ve düğüm simgeleri

Konu İçeriği — Hızlı Bakış ( XenForo / Forum • ⏱ ~8 dk okuma • Kod: CSS)
01. Üç iş, portföy değil
02. Vektör tezgahı (sınıf olarak Figma)
03. Raster tezgahı (sınıf olarak Photopea)
04. Masaüstü paketi (Sınıf olarak Affinity)
05. Şablon tezgahı (sınıf olarak Canva)
06. Dışa aktar: SVG veya PNG, ardından durun

Genişletmek için tıkla ...

• Stiller
• Toplum
• Rehber

1. Topluluk başına bir dosya , ruh hali başına bir dosya değil. Sayfalar: mark, pwa, og, nodes.
2. Bileşenler: işaret için. Aslında 24 piksel boyutunda göndermeyeceğiniz bir kelime işaretini içeren bir başlık kilitlemesi, okunamayan bir lekeye nasıl sahip olacağınızı gösterir. Tek başına işe yarayan bir markayı tercih edin. Resmi XenForo PWA kare bir simge istiyor; geniş bir kelime işareti uyarlanabilir maskeler tarafından kırpılacaktır.
3. SVG'yi dışa aktar: kontrol ettiğiniz şekil ve türdeki her şey için. Bir tarayıcının veya telefon işletim sisteminin piksellerle daha mutlu olduğu PNG'yi dışa aktar (PWA, birçok OG tarayıcısı, eski posta istemcileri).
4. Dosyada daha sonra stil özelliklerine yazacağınız çelik, arduvaz, tek vurgu gibi tek bir renk belirteci seti tutun. Burası LESS'te Aydınlık/Karanlığın uygulanacağı yer değil. Koyu başlığın daha açık bir çizime ihtiyacı varsa işaretin iki PNG versiyonunu dışa aktarın, ardından bunları stil / varyasyon kullanıcı arayüzünde atayın.

1. Stil özelliklerini (XenForo) veya tema / kategori ayarlarını (Söylem) açın.
2. Ürünün halihazırda sunduğu URL'yi yükleyin veya yapıştırın.
3. Kaydetmek. Konuk olarak kalıcı yenileme. Kullanıyorsanız 2,3 açık/koyu varyasyonunu çevirin. İşaret aynı zamanda HTML postasını da kullanıyorsa e-postayı gerçek bir istemcide kontrol edin; resmi XenForo Dış görünüş'ın HTML e-postası için ayrı bir varsayılan stili vardır.

1. Site HTTPS olmalıdır .
2. 12 veya daha az karakter'ın başlığı (eğer kurul başlığı daha uzunsa Kurulun kısa başlığı).
3. İki kare simge: 192 ve 512. Genel kural olarak PNG. İdeal olarak maskelenebilir (güvenli bölge içindeki önemli grafikler). Varsa kutuyu işaretleyin.

• Görünüm → Stiller. Hizmet ettiğiniz tarzın bir çocuğunu yaratın. Master'a ve satıcı üst öğeye dokunmadan bırakın.
• Logo / başlık resmi / favicon alanları bu stilin stil özelliklerinde bulunur (tam etiket sürümlerle birlikte hareket eder; ACP araması yetkilidir). Oraya yükleyin.
• Renk paleti ve Temel renkler (@xf-paletteNeutral3, @xf-textColor ve arkadaşları), markanın çelik mavisini kromla nasıl eşleştireceğinizdir. Belirteçleri yazın. Başlığı bir şablona boyamayın.
• 2.3 varyasyon kullanıyorsanız her ikisini de test edin. Varyasyona duyarlı olarak işaretlenmiş bir özellik, açık ve koyu arasında farklılık gösterebilir. Açık renkli çizimi karanlık yuvaya atamadığınız sürece, şeffaf üzeri siyah olan bir görüntü, koyu başlıkta kaybolacaktır.

• Site ayarlarında bir logo ve küçük bir logo/kare (ifadeler hareket eder; ayarlar arama yetkisidir).
• Kategori renk + isteğe bağlı simge.
• Bir başlık varlığı ekleyebilecek tema bileşenleri - resmi topluluk modeli, hala bir yükleme.

• Ana sayfa / marka için bir varsayılan kart.
• Daha sonra isteğe bağlı makale başına kartlar. 90 benzersiz illüstrasyonun lansmanını engellemeyin.
• Küçük metin yok. Slack'te kartın yüksekliği 200 pikselse, ekran boyutunun altındaki her şey dekorasyondur.
• Belirli bir tarayıcı onunla daha mutluysa bir JPEG bulundurun; PNG ana dosyasını saklayın.

/brand
/source mark.afdesign or .fig export, the .psd
/export
mark.svg
mark-on-dark.svg
pwa-192.png
pwa-512.png
favicon.png
og-default.png
/nodes support.svg general.svg

• Kaynak ihracat değil. Tek SVG'yi tek seferlik bir etkinlik posteri olarak düzenlemeyin.
• Bu klasörü panoyla aynı yedekleme hikayesine veya personel kasasına koyun. Bir dizüstü bilgisayar öldükten sonra açamayacağınız bir logo, insanların daha kötü bir logoyu yeniden çizmesidir.
• XenForo yedekleme doktrini hala veritabanı + data/ + internal_data/'dir. Stil özellikleri aracılığıyla yüklediğiniz logo dosyaları genellikle data/ altında bulunur. Yalnızca SQL'i boşaltırsanız işaret kaybolur. Yedekleme makalesi geri yükleme döngüsüdür.
• 40 MB'lık kullanılmamış stok fotoğrafı "daha sonra kullanmak üzere" web köküne aktarmayın.

• Başlık arka planı varyasyonlar arasında değişiyorsa, iki çizime veya her ikisinde de işe yarayan konturlu, orta parlaklıkta bir şekil olan bir işarete ihtiyacınız vardır.
• Tarzınız sunuyorsa bunları varyasyona duyarlı logo/başlık alanlarına atayın. Her ikisini de test edin. Karanlık mod makalesi geçiştir; bu yalnızca dosyalardır.
• HTML e-postası genellikle site karanlık olsa bile açık renkli bir tuval üzerinde kalır. Resmi Görünüm: HTML e-postası için ayrı bir varsayılan stil. Bu stile açık ışık işaretini verin.
• Takası bir şablonda CSS filter: invert() olarak kodlamayın. Çok renkli bir armayı çöpe çevireceksiniz.

• Style özelliğini bulamadığınız için üçüncü taraf “başlığa logo” eklentisi yüklemeyin.
• Master'ı düzenlemeyin. Satıcı üst öğesini düzenlemeyin.
• Google Fonts'u Canva şablonuyla eşleştirmek için CDN'den yüklemeyin. Türün eşleşmesi gerekiyorsa, bu daha sonraki bir tipografi eğitimi ve kendi kendine barındırılan bir dosyadır.
• Bu geçişte okunabilir metinli bir kapak sistemi kurmayın. Görüntüyü dışa aktarın; özelliği atayın.

• Dört işi adlandırabilirsiniz: işaret, uygulama simgesi, OG, düğüm glifi
• İşaret için tek bir doğruluk kaynağı dosyası (eğer mümkünse vektör)
• Dışa aktarmalar, yedeklenen adlandırılmış bir klasörde canlı olarak gerçekleşir
• Başlık: Stil özelliklerinde/tema ayarlarında atanan SVG veya temiz PNG

• Dört dosya önemlidir: işaret, kare uygulama simgeleri, geniş OG, küçük glifler.
• Figma, Photopea, Affinity ve Canva'yı sınıf olarak değerlendirin. Podyumu değil, işe uygun sınıfı seçin.
• SVG veya PNG'yi dışa aktarın, ardından stil özelliklerini / tema ayarlarını kullanın.: Bütün entegrasyon budur.
• PWA, HTTPS + kısa başlık + 192/512 karelerden oluşur. Bu kontrolleri geçemeyen güzel dosyalar yüklenmez.