Illustrator ile Forum Rank Tasarımı

[Luaksy]

Illustrator ile Forum Rank Tasarımı​

Forum rank tasarımları, kullanıcıların yetki seviyesini, üyelik durumunu veya özel rollerini görsel olarak göstermek için kullanılan küçük rozetlerdir.

Özellikle:

• Yönetici
• Moderatör
• Destek Ekibi
• VIP Üye
• Premium Üye
• Normal Üye

gibi roller için farklı rank tasarımları hazırlanabilir.

Illustrator bu tarz çalışmalar için oldukça uygundur çünkü rank tasarımları genellikle küçük boyutta kullanılır ve vektör olarak hazırlandığında farklı ölçülere kalite kaybetmeden uyarlanabilir.

Forum Rank Nedir?​

Forum rank, kullanıcı adının altında veya profil alanında gösterilen küçük rol görselidir.

Örneğin bir kullanıcı:

Yönetici

yetkisine sahipse profilinde özel bir rank görseli gösterilebilir.

Bu görsel içerisinde:

• Rol adı
• İkon
• Renk
• Küçük dekoratif öğeler

bulunabilir.

Forum ranklarının amacı kullanıcı rollerini görsel olarak birbirinden ayırmaktır.

​

Forum Rank Tasarımı Ne İşe Yarar?​

Forum rank tasarımları:

• Kullanıcı rollerini hızlı şekilde ayırmayı
• Yetkilileri kolay fark etmeyi
• Forum tasarımını daha profesyonel göstermeyi
• Özel üyelikleri öne çıkarmayı

sağlar.

Özellikle büyük topluluklarda kullanıcıların kimin yetkili olduğunu hızlı şekilde anlaması açısından faydalıdır.

Illustrator Forum Rank Tasarımında Neden Kullanılır?​

Illustrator vektör tabanlı çalışır.

Bu nedenle rank tasarımı:

• 150 piksel
• 300 piksel
• 600 piksel

gibi farklı boyutlara ölçeklenebilir.

Ayrıca şekiller, yazılar ve ikonlar sonradan kolayca düzenlenebilir.

Özellikle aynı tasarımın farklı roller için renk ve yazı değiştirilerek çoğaltılması Illustrator'da oldukça hızlıdır.

Rank Tasarımına Nasıl Başlanır?​

İlk olarak forumda kullanılacak rank boyutu belirlenmelidir.

Örneğin:

150 x 40 px

veya

200 x 50 px

gibi yatay ölçüler kullanılabilir.

Kesin ölçü forum temasına ve profil yapısına göre değişir.

Tasarım başlamadan önce rankın forum içerisinde ne kadar alan kaplayacağı belirlenmelidir.

Çalışma Alanı Nasıl Oluşturulur?​

Illustrator içerisinde:

File > New

bölümünden yeni çalışma oluşturulabilir.

Örneğin:

Width: 200 px
Height: 50 px

şeklinde başlanabilir.

Color Mode olarak ekran üzerinde kullanılacağı için:

RGB

tercih edilmelidir.

Forum rankları dijital ortamda kullanılacağı için CMYK kullanmaya gerek yoktur.

Rank Tasarımında Arka Plan​

Rankın ana görünümünü belirleyen bölüm arka plandır.

Arka plan olarak:

• Düz renk
• Gradient
• Koyu panel
• Hafif desen
• Cam efekti

kullanılabilir.

Ancak rank küçük boyutta gösterileceği için arka plan çok karmaşık olmamalıdır.

Önemli olan yazının ve rolün rahat okunmasıdır.

Rounded Rectangle Kullanımı​

Forum ranklarında en sık kullanılan şekillerden biri Rounded Rectangle yani yuvarlatılmış dikdörtgendir.

Bu şekil:

• Modern görünür
• Küçük boyutlarda temiz durur
• Yazı ve ikon yerleşimini kolaylaştırır

Illustrator'da:

Rounded Rectangle Tool

kullanılarak hazırlanabilir.

Köşe yumuşaklığı tasarım stiline göre ayarlanabilir.

Gradient Kullanımı​

Gradient, rank tasarımına daha modern bir görünüm verebilir.

Örneğin Yönetici rankında:

koyu kırmızıdan açık kırmızıya

geçiş kullanılabilir.

Ancak çok fazla renk geçişi küçük tasarımlarda karmaşık görünebilir.

Genellikle iki tonlu basit gradient yeterlidir.

Rol Renkleri Nasıl Seçilmeli?​

Her rol için farklı renk kullanmak kullanıcıların yetkileri daha hızlı ayırt etmesini sağlar.

Örneğin:

Yönetici: Kırmızı
Moderatör: Mavi
Destek Ekibi: Yeşil
VIP: Mor
Premium: Altın / Sarı
Normal Üye: Gri

kullanılabilir.

Bunlar zorunlu renkler değildir.

Forumun genel temasına göre farklı renkler seçilebilir.

Yazı Kullanımı Nasıl Olmalı?​

Rank küçük olduğu için font kolay okunmalıdır.

Örneğin:

YÖNETİCİ

veya

MODERATÖR

gibi kısa ve net metinler kullanılabilir.

Çok ince fontlar küçük boyutta zor okunabilir.

Bu nedenle:

• Medium
• Semi Bold
• Bold

font ağırlıkları daha uygun olabilir.

Yazı Boyutu Nasıl Olmalı?​

Yazı rank yüksekliğine göre ayarlanmalıdır.

Örneğin 50 px yüksekliğindeki rankta yazının çok büyük olması kenarlara sıkışmasına neden olabilir.

Metnin etrafında yeterli boşluk bırakılmalıdır.

Ayrıca bütün ranklarda aynı yazı boyutu kullanılabiliyorsa görsel bütünlük daha iyi olur.

Büyük Harf Kullanmak Mantıklı mı?​

Evet.

Forum ranklarında büyük harf:

ADMINISTRATOR

veya

YÖNETİCİ

gibi kullanımlar yaygındır.

Büyük harfler küçük boyutta daha belirgin olabilir.

Ancak kullanılan font çok genişse uzun roller sığmayabilir.

Bu durumda daha dar bir font seçilebilir.

İkon Kullanımı​

Rankın sol veya sağ bölümüne küçük ikon eklenebilir.

Örneğin:

Yönetici: Taç
Moderatör: Kalkan
Destek: Kulaklık
VIP: Yıldız
Premium: Elmas

ikonları kullanılabilir.

İkon çok büyük olmamalıdır.

Ana bilgi her zaman rol ismidir.

İkon ile Yazı Arasındaki Boşluk​

İkon ve yazı birbirine çok yakın yerleştirilmemelidir.

Arada küçük bir boşluk bırakmak tasarımın daha temiz görünmesini sağlar.

Örneğin:

[İkon] YÖNETİCİ

şeklinde dengeli bir yerleşim kullanılabilir.

Stroke Kullanımı​

Rankın çevresine ince bir stroke eklemek arka plandan ayrılmasına yardımcı olabilir.

Örneğin:

1 px stroke

kullanılabilir.

Stroke rengi arka planın daha açık veya koyu bir tonu olabilir.

Çok kalın stroke küçük ranklarda ağır görünebilir.

Gölge Kullanımı​

Hafif Drop Shadow rankı arka plandan ayırabilir.

Ancak:

• Çok koyu
• Çok büyük
• Çok bulanık

gölge kullanmak tasarımı kirletebilir.

Forum ranklarında gölge mümkün olduğunca sade kullanılmalıdır.

Inner Shadow Kullanımı​

Inner Shadow kullanılarak rankın içerisine hafif derinlik verilebilir.

Özellikle koyu temalı forumlarda güzel sonuç verebilir.

Ancak küçük boyutlarda aşırı efektler detay kaybına neden olabilir.

Parlaklık Efekti​

Rank tasarımına hafif bir üst parlaklık eklenebilir.

Örneğin Rounded Rectangle'ın üst bölümüne yarı saydam beyaz alan eklenerek cam efekti oluşturulabilir.

Bu tarz tasarımlar özellikle klasik forum ranklarında sık kullanılır.

Flat Tasarım mı Efektli Tasarım mı?​

Flat Tasarım​

• Daha sade
• Daha modern
• Küçük boyutta daha temiz

görünür.

Efektli Tasarım​

• Gradient
• Gölge
• Parlaklık
• Doku

kullanabilir.

Daha dikkat çekici olabilir ancak küçük boyutta fazla efekt karmaşa yaratabilir.

Hangisi Daha Mantıklı?​

Modern forum temalarında genellikle sade ve flat tasarım daha uyumlu görünür.

Oyun forumlarında ise:

• Neon
• Metal
• Gradient
• Parlaklık

gibi efektler daha rahat kullanılabilir.

Tasarım forumun genel stiline göre seçilmelidir.

Koyu Tema İçin Rank Tasarımı​

Koyu temalı forumlarda rank arka planlarının çok koyu olması tasarımın kaybolmasına neden olabilir.

Bu nedenle:

• Canlı renk
• Açık stroke
• Hafif glow
• Yüksek kontrastlı yazı

kullanılabilir.

Örneğin koyu gri forum üzerinde mavi moderatör rankı rahat fark edilebilir.

Açık Tema İçin Rank Tasarımı​

Açık temada çok açık renk ranklar arka plana karışabilir.

Bu nedenle:

• Koyu metin
• Belirgin kenarlık
• Orta koyulukta arka plan

kullanılabilir.

Rank forum arka planından rahat ayrılmalıdır.

Aynı Tasarım Farklı Rollere Nasıl Uygulanır?​

İlk olarak ana rank şablonu hazırlanabilir.

Örneğin:

• Arka plan
• Stroke
• İkon alanı
• Yazı alanı

tamamlanır.

Daha sonra tasarım çoğaltılarak sadece:

• Renk
• İkon
• Rol adı

değiştirilebilir.

Bu yöntem bütün rankların aynı tasarım diline sahip olmasını sağlar.

Illustrator Layer Düzeni​

Rank tasarımında layer yapısı oldukça basit tutulabilir.

Örneğin:

Arka Plan
Efektler
İkon
Yazı

şeklinde dört temel layer yeterlidir.

Birden fazla rank aynı dosyada hazırlanıyorsa her rank ayrı Group yapılabilir.

Group Kullanımı​

Bir rank tamamlandığında bütün öğeler seçilip:

Ctrl + G

ile grup yapılabilir.

Böylece rank tek parça gibi hareket ettirilebilir.

Özellikle aynı dosyada çok sayıda rank hazırlanırken Group kullanımı işleri kolaylaştırır.

​

Artboard Kullanımı​

Her rank için ayrı Artboard oluşturmak oldukça kullanışlıdır.

Örneğin:

Artboard 1: Yönetici
Artboard 2: Moderatör
Artboard 3: Destek
Artboard 4: VIP

şeklinde hazırlanabilir.

Bu yöntem dışa aktarım sırasında her rankı ayrı dosya olarak kaydetmeyi kolaylaştırır.

Rank Tasarımında Hizalama​

Yazı ve ikonun dikey olarak ortalanması önemlidir.

Illustrator'daki:

Align

paneli kullanılabilir.

Özellikle:

Vertical Align Center

seçeneği rank içerisindeki öğeleri ortalamayı kolaylaştırır.

Göz kararı hizalama küçük tasarımlarda dengesiz görünebilir.

Boşluk Kullanımı​

Rank tasarımının kenarlarında yeterli boşluk bırakılmalıdır.

Yazının kenarlara çok yaklaşması profesyonel olmayan bir görünüm oluşturabilir.

Örneğin ikon sol taraftaysa ikon ile dış kenar arasında da boşluk bulunmalıdır.

Tasarım Küçük Boyutta Kontrol Edilmeli mi?​

Evet.

Rank tasarımında en önemli konulardan biri gerçek kullanım boyutunda kontrol etmektir.

Illustrator'da tasarım yakınlaştırılmış durumda çok güzel görünebilir.

Ancak forumda küçük gösterildiğinde:

• Yazı okunmayabilir
• İkon kaybolabilir
• Efektler birbirine karışabilir

Bu nedenle tasarım gerçek boyuta yakın şekilde kontrol edilmelidir.

PNG mi SVG mi Kullanılmalı?​

Forum yazılımının desteklediği formata göre değişir.

PNG​

• Yaygın şekilde desteklenir
• Şeffaf arka plan kullanılabilir
• Kurulumu kolaydır

SVG​

• Vektördür
• Farklı boyutlarda kalite kaybetmez
• Her forum sistemi SVG desteği vermeyebilir

Genellikle PNG en sorunsuz seçenektir.

PNG Olarak Nasıl Kaydedilir?​

Illustrator içerisinde:

File > Export > Export for Screens

veya:

Export As

kullanılabilir.

Format:

PNG

seçilebilir.

Şeffaf arka plan gerekiyorsa:

Background: Transparent

kullanılmalıdır.

PNG Çözünürlüğü Nasıl Olmalı?​

Forumda kullanılacak gerçek boyut belli ise tasarımı doğrudan doğru ölçüde dışa aktarmak daha mantıklıdır.

Örneğin forum 200x50 px kullanıyorsa dosyayı gereksiz yere 2000x500 px hazırlamaya gerek yoktur.

Yüksek çözünürlük dosya boyutunu artırabilir.

Şeffaf Arka Plan Kullanılır mı?​

Evet.

Özellikle rankın kendi Rounded Rectangle arka planı varsa dış bölgenin şeffaf olması daha temiz görünür.

Bu sayede rank farklı forum arka planlarında rahat kullanılabilir.

GIF Rank Yapılır mı?​

Illustrator doğrudan gelişmiş animasyon hazırlamak için uygun değildir.

Animasyonlu forum rankı isteniyorsa statik tasarım Illustrator'da hazırlanıp daha sonra:

• Photoshop
• After Effects

gibi programlarda animasyon yapılabilir.

Ancak çoğu forum için statik PNG daha hafif ve kullanışlıdır.

Forum Rank Tasarımında Animasyon Gerekli mi?​

Genellikle hayır.

Animasyon:

• Dosya boyutunu artırabilir
• Dikkat dağıtabilir
• Sayfada çok fazla hareket oluşturabilir

Sadece özel roller için küçük animasyon kullanılması daha mantıklı olabilir.

Rank Boyutları Aynı Olmalı mı?​

Mümkünse evet.

Yönetici, Moderatör ve diğer roller farklı genişliklerde olduğunda profil alanı düzensiz görünebilir.

Bu nedenle bütün ranklarda:

• Aynı genişlik
• Aynı yükseklik
• Aynı font boyutu

kullanmak daha düzenli sonuç verir.

Uzun rol isimleri varsa tasarım buna göre baştan geniş hazırlanabilir.

Renk Körlüğü Düşünülmeli mi?​

Sadece renkle rol ayrımı yapmak yerine:

• Yazı
• İkon
• Renk

birlikte kullanılabilir.

Böylece kullanıcı rolü yalnızca renge bakarak anlamak zorunda kalmaz.

Örneğin hem kırmızı renk hem de "Yönetici" yazısı kullanılabilir.

En Sık Yapılan Forum Rank Tasarım Hataları​

Çok Küçük Yazı Kullanmak​

Rank gerçek boyutta görüntülendiğinde okunamayabilir.

Çok Fazla Efekt Kullanmak​

Glow, gölge ve gradient üst üste kullanıldığında küçük tasarım karmaşık görünür.

Her Rank İçin Farklı Tasarım Kullanmak​

Forum genelinde görsel bütünlük bozulabilir.

İkonu Çok Büyük Kullanmak​

Rol yazısı ikinci planda kalabilir.

Tasarımı Gerçek Boyutta Kontrol Etmemek​

Yakınlaştırılmış tasarım yanıltıcı olabilir.

Başlangıç Seviyesi İçin​

İlk forum rankı için basit bir tasarım hazırlanabilir.

Örneğin:

1. 200x50 px Artboard oluşturun.
2. Rounded Rectangle çizin.
3. Arka plana tek renk veya basit gradient uygulayın.
4. Sol tarafa küçük ikon ekleyin.
5. Sağ tarafa rol adını yazın.

İlk tasarım tamamlandıktan sonra diğer roller için çoğaltılabilir.

Orta Seviye İçin​

Biraz deneyim kazanıldığında:

• Gradient
• Hafif gölge
• İkon sistemi
• Özel font
• İnce stroke

kullanılabilir.

Bu aşamada bütün roller için ortak bir tasarım sistemi oluşturmak önemlidir.

İleri Seviye İçin​

Profesyonel forum rank setlerinde:

• Her rol için özel ikon
• Tutarlı renk paleti
• Koyu ve açık tema versiyonları
• Retina çözünürlük seçenekleri
• SVG ve PNG çıktıları

hazırlanabilir.

Ayrıca normal üyelik, ekip rolleri ve özel üyelikler için farklı görsel kategoriler oluşturulabilir.

Sonuç​

Illustrator ile forum rank tasarımı hazırlamak oldukça kolaydır ve vektör tabanlı çalışma sayesinde aynı tasarım farklı boyutlara rahatlıkla uyarlanabilir.

Başarılı bir forum rankında özellikle:

• Okunabilir yazı
• Net rol rengi
• Sade ikon
• Dengeli boşluk
• Tutarlı tasarım dili

önemlidir.

İlk olarak Yönetici veya Moderatör gibi tek bir rank şablonu hazırlanabilir. Daha sonra aynı yapı korunarak diğer roller oluşturulabilir.

Forum ranklarında en önemli nokta tasarımın çok detaylı olması değil, küçük boyutta bile rolün hızlı ve kolay şekilde anlaşılmasıdır.