Nasıl Yapılıyor?
Örnek bir Safari İkonu Yapalım

İkon Perspektif & Materyalleri

MacOSX için ikon yapmaya başlamadan önce yaptığımız ikonun nerede ve hangi ebatlarda kullanılacağı, yapılacak malzemenin cinsi, rengi, dokusu ve üzerinde yer alacak grafik yada görsellere karar vermemiz gerekiyor. Biz Safari ikonu yapacağız. Bunun için başvurmamız gereken kaynak Aqua Human Interface Guidline. Apple tarafından ücretsiz olarak yayınlanan bu döküman MacOSX geliştiricilerinin arayüz konusunda başvuracakları bir başucu kitabı gibi. İçinde Aqua arayüzü ile ilgili her türlü doneyi barındıran bu belge sayesinde ihtiyacımız olan ölçülere ve perspektiflere sahip oluyoruz.
Aqua Human Interface Guidline' dan elde ettiğimiz bu tabloda da görüldüğü gibi Safari ikonu yapmak için Figür D' de görülen "3 boyutlu objeler" perspektifini kullanmalıyız.

Hangi perspektife uygun yapacağımızı öğrendik. Artık güzel bir ikon yapacağımızı garanti edemesek bile en azından doğru yapacağımızı biliyoruz...
İkon yapmak için çeşitli programları, birini yada birkaçını birarada kullanabiliriz. Photoshop bunların başını çekiyor. Illustrator, Freehand ve seçtiğimiz bir 3 boyut programını da Photoshop' a destek vermek için kullanabiliriz. 3 boyutlu programlara çok hakimseniz ikonunuzu baştan sona bu şekilde de yapabilirsiniz ancak render sonucu her zaman istediğiniz etkiyi vermeyebilir. Eğer ışığı ve sahnenizi doğru konumlandırabilir, gelişmiş render filtreleri kullanarak sonuç almayı başarabilirseniz bu metodla da güzel ikonlar yapmanız mümkün. ancak yine sonuçta mutlaka Photoshop' a ihtiyaç duyacaksınız.
Artık yapmaya başlayalım ... Ben çalışma şeklini göstermek amacıyla Safari ikonunun adım adım bir kopyasını yapacağım. Siz dilediğiniz, hayalinizdeki ikonu benzer bir yolu takip ederek yapabilirsiniz.

Kaç piksel?

İşe başlamadan bu aşamada ölçülerden biraz bahsetmek gerekiyor. MacOSX en geniş 128 x 128 piksel 72 piksel / inç ikon kullanabiliyor. Dolayısıyla bu ebatlarda çalışacağınız bir döküman yeterlidir. Ancak bu ölçünün katları şeklinde; örneğin 256x256 yada 512 x512 piksel çalışırsanız hem siz daha çalışma olanağı elde edip rahat ederisiniz, hemde gözlerinizi ileride torunlarınızı göreceğiniz zamanlara saklayabilirsiniz.
Ben Safari ikonu için devasa bir ölçü olan 2000x2000 pikseli tercih ettim. Böylelikle hem çalışmama daha fazla detay girebildim, hemde birgün bu ikonun basın yayın organlarında yer alabileceği, bundan poster yada billboard yapılabileceğini de göz ardı etmemiş oldum. İkon yaparken her zaman RGB renk modunda çalışın.


Ben 2000 piksel yüksekliğinde ve 6224 (tahmini bir değer) piksel genişliğinde bir döküman açarak orjinal ve kopya ikonu yanyana çalışma olanağı buldum. üstelik sağ tarafta çeşitli görsel materyallerimi deneyebileceğim bir alan bırakmış oldum. 300 dpi alıştım, fakat bu Mac mini 1.25 Ghz. makinamı inanılmaz zorladı. İhtiyaç duymuyorsanız siz 72 dpi çalışarak zaman ve hız kazanabilirsiniz.


İşe pusulanın halkasını yaparak başladım. Halkaya Photoshop' un layer efektlerinden faydalanarak hacim verdim. Bu basit hacmi daha sonra rötuşlayarak gerekli gölgeleri, yansımaları ve dokulandırmayı ekleyeceğim.
Şimdi halka ya yavaş yavaş genel detaylar eklemeye başladım. Hacmini belirleyen gölgeleri yaparken Photoshop ta sürekli yeni layer da çalıştım.
Yuvarlak seçim aracıyla basitçe iki halkayı birbirinden çıkararak yüzeyler oluşturdum ve kenar keskinliğini Blur filtresi vererek giderdim. Böylelikle daha geçişli yüzeyler oluştu.
Şimdi "Biraz daha casaret!" diyerek daha koyu ve açık tonlar kullanarak daha sert parlamaları yakalamaya çalıştım. Bütün bu yuvarlak dönüşlerde Wacom Tablet ihtiyacı hissettim. Aaah Ah! Onunla bu tür işler çok daha kolay.
Halkanın üzerindeki ikinci katmanı da yapıp üzerindeki parlamaları bu katmanın hemen altına yerleştirdim.
Ekran resminde halkanın aldığı son hali ve transparan zemin üzerindeki gölgesini görüyorsunuz. Bu gölgeyi son aşamada bir daha elden geçirmem gerekecek. artık halkanın hacmi parlamalarla birlikte daha da belirginlik kazandı.
Bu aşamada halkanın dönüşlerinde biraz metal parlaması için 9EAEB9 rengini kullandım. Siyahın içine kattığım bu mavi renkte parlaklık canlılığı ve inandırıcılığı arttıracak.
Pusulanın metal çerçevesi bence arkıt bitti. Son olarak üzerine metal çizikleri gibi detaylar eklemeyim ama bu işi sona bırakıyorum. Biberi yemek olduktan sonra serpmek gerek :) Artık gösterge bölümüne geçebilirim. Fakat bu iki bölüm arasında bir ayraç var. İlk önce bu kısmın zeminini atarak işe başlıyorum, daha sonra da göstergeye siyah zemin vveriyorum. Bunun üzerine çeşitli efektler uygulayacağım.
Göstergeye Gradient ve Inner Shadow (iç gölge) verdim. Bu sayede göstergenin metal çerçevinin altında kalmasını sağlıyorum.
Şu an geldiğimiz aşama bu. Metal çerçeve bitti. Çerçeveyle mavi göstergeyi ayıran bölümün zemini atıldı. Şimdi hemen bu zeminin üzerine gerekli ince detayları girmek istiyorum. Bunun için daha iyi bir zaman olamaz.
Girdiğim detayları katmanları kaldırarak gösteriyorum. Bir sürü layer ve ayrıntı. Ünlü ressam ve heykeltraş Michalengelo "Güzellik ayrıntılarda gizlidir" der. Simgenize ne kadar çok ayrıntı girerseniz inandırıcılığı da o kadar artacaktır.
Ve sonuç: Çerçeveyle mavi göstergeyi ayıran bölüm detayları girice gün yüzüne çıktı. Şimdi iç kısımlara el atmalı...
Bu aşamada dünya haritasını mavi alanın üzerine Overlay efektiyle bindirdim. Haritada da çok çok az Drop Shadow var. Bu gölge o kadar belirsiz ki bakan birçok kişi Hayır yok diyebilir. Önemli olan da bu. Gölge işinde işin tadını kaçırmadan yapmak en doğrusu. Haritaları Illustrator de hazırladım. Ama dünya yuvarlağına adapte etmek epey zorladı. İyiki Photoshop var.
Haritayı yerleştirdik, şimdi işaretlerimizi koyalım. Bu aşamada Freehand' e başvuracağım. Bence Freehand bu tür kesme-biçme ve hizalama işlerinde Illustrator' den de daha başarılı. İşaretlerin hepsini vektörel olarak hazırlayıp simgenin üzerine ayrı katmanlar halinde getiriyorum. Getirdiğim katmanlara tek tek layer efektleri veriyorum. Dosya boyum iyice şişti.
Layer gölgelerinden detay... Çizgilerde Gradient ve Drop Shadow var. Ama siz siz olun filtreleri asla default halde kullanmayın. Mutlaka gerektiği kadar kısın yada gerektiği kadar abartın.
İkonumuz temel olarak hazır gibi duruyor ancak daha yapılacak çok iş var. Bağlantı halkası, camın üzerindeki parlama ve pusulanın iğnesi bunlardan sadece bazıları...
Pusula iğnesinin anahatları ve gölgesi hazır. Buraya kadar herşeyi yine Photoshop' ta Path çizerek hallettim. Sıra iğnenin detaylarını vermekte.
Önce merkez noktanın yerini hazırladım. Buraya 4 bağlantı noktalı vidamız gelecek.
Vidamın üzerine metal çizikleri ve parlama attım. Çizikler için bir Pattern oluşturdum. Parlamaysa tamamen Gradient efektinin marifeti.
Pusula çerçevesini cama bağlayan parçanın üzerine simetrik 4 adet punto koydum. Puntolarımda Outer Emboss var.

Gelelim camaaa. Burası en sevdiğim bölüm. Cam parlaması için camın gerçek boyutundan daha küçük bir daire çizip içini beyaza boyadım. Sonra transparan (geçirgenliğini) değerini düşürdüm. Overlay yok! camın alt kısmını dairesel olarak kestim ve güney yönünü hafifçe sildim. Sonuç yukarıda.

 

 

Cam parlaklığına detay vermek için ince bir halkayı iki yanından silerek ayrı bir parlama katmanı ekledim. Sonuç fena olmadı.
Bu parlaklığın üzerine yine inandırıcılığı arttırmak için "Cam çizikleri" ekledim. Bunun için ayrı bir katmanda rastgele çizgiler atıp bunların geçirgenliğini düşürmek yetti. Artık cam üzerinde taşlanmış etkisi yarattık. Bu orjinal Safari ikonunda yok.
Son olarakta halkayı yine Photoshop ta tamamladım. Gölgesi ve Stopper i ile bitmiş durumda.
Safari ikonumuzun nihai hali. 2000 x 2000 piksel büyüklüğünde. 300 dpi. Orjinal dosyayı yayınlamıyorum çünkü buna iznim yok. Bu ikon çalışmasını 2006 yılında Apple Design Team California için hazırladım. Bütün hakları (Apple Computer ®) kendilerine aittir. Umarım örnek çalışmam ve prensipler ikon tasarım sürecinizde size yol gösterir.
Sevgiler, Orhan Okay
For English Version
Iconmac English version will coming next month. Thanks for your visit.
And please try in next month!
çok yakında

Duyuru !
Serengeti ikon setinin tasarımına Ekim
ayı başı itibariyle başlayabileceğim.
Bekleyen ve takip edip ısrarla mail atan
herkese teşekkür ediyorum.

Serengeti İkonları
MacOsX Leopard için yeniden tasarladığım sistem ve özel uygulama ikonları. Çok yakında Iconmac Magazine' de...
Portfolyoya yeni eklenenler
Yeni arayüz tasarım çalışmaları
MacOSX icon tutorial

+ Safari ikonu
+ Dictionary ikonu (yakında)
Güncel Linkler