Photoshop ile Web Ribbon Yapımı

Merhaba arkadaşlar

Bu paylaşımımda uzun zamandır paylaşamadığım Photoshop derslerinden birini paylaşacağım. Dün attığım bir tweet’te bu paylaşımın sonucunda ulaşacağımız örneği tweetlemiştim. Beğendildiği için dersi hemen paylaşmak istedim. Son zamanlarda birçok sitede rastlamışsınızdır bu tür çalışmalara. Bende hem beğenilmesinden hem de çok kullanılmasından dolayı şimdi en basit ve kısa yoldan sizlere bu çalışmayı nasıl yapacağımızı anlatıcağım.

Şimdi gelelim dersimize,İlk adım olarak paylaşım sırasında kullanacağımız 2 kalemi temin ederek başlayabilirsiniz.

1 – Chunk Five Font

2 – Ribbon’u uygulayacağımız görselimiz

Şimdi gelelim çalışmamızın adım adım nasıl hazırlanıcağına,

1 – İlk olarak Ribbon adında 600*600 px boyutlarında arkaplanı beyaz(#ffffff) olan bir layer oluşturuyoruz.

2 – Daha sonra Background Texture adında yeni bir layer açıyoruz ve arkaplan rengini açık gri (#cccccc) olarak belirliyoruz.Daha sonrasında bu layer için şu adımları izliyoruz Filter>Noise>Add Noise ve aşşağıdaki ayarları uyguluyoruz.

Ve daha sonrasında bu layerımızın opacity değerini %20 olarak değiştiriyoruz.

3 – Şimdi sıra görselimizin temeli olan şekli çizmeye geliyor,Bunun için
aracı ile Fixed Size özelliğini seçerek 300*200px boyutlarında bir dikdörtgen oluşturuyoruz.

4 – Daha sonrasında şeklimizin bulunduğu Layer için Blending Options bölümüne giriyor ve aşşağıdaki adımları uyguluyoruz.

5 – Şimdi görsel olarak belirlediğimiz resmi bu dikdörtgene yerleştiriyoruz.

6 – Şimdi ise uygulamamıza ayrı hava katan ribbon’u oluşturmaya geldi,Bunun için yapmamız gereken resmimize uygun boyutlarda bir dikdörtgen oluşturmak ve pozisyonunu keyfimize göre belirlemek.

7 – Şimdi çerçevemize mask özelliği ekleyeceğiz,Bunun için ilk olarak Ctrl tuşuna basarak layer penceresinden Çerçeve adlı layerımıza bir kez tıklıyoruz ve Layerımızın etrafı seçili hale geliyor.

8 – Bu adımdan sonra çerçevemizin etrafı seçili durumdayken sırasıyla şu adımları izliyoruz, Select > Modify > Expand ve Expand değeri olarak 4px değerini seçiyoruz.

9 – Hala çerçevemizin etrafı seçiliyken Ribbon adlı layerımızı seçip Layer > Layer Mask > Reveal Selection adımlarını izliyoruz ve ribbonumuz şekil olarak hazır hale geliyor.

10 – Görselimiz şekil olarak hazır fakat renkleri ve gölgelendirmeleri yaptıktan sonra daha net bir sonuç alabiliriz,Bunun için Ribbon adlı layerımızın Blending Options kısmına aşşağıdaki ayarlamaları yapıyoruz.

* Renk = #921100 , #df1b02

* Renk = #390701 , #dd2103

11 – Bu değerleri belirledikten sonra ribbonumuz bu şekilde görünecektir.

12 – Şimdi ribbonumuzun köşelerine ovallik vermek için yeni bir layer açıyoruz ve 9px değerinde yumuşak oval brushla #240500 bu renk seçimini yaparak aşşağıdaki gibi noktalarımızı belirliyoruz.

13 – Şimdi bu layerı gerekli sıralamaya göre ayarlarsak ( çerçeve layerımızın altına taşıyoruz ) aşşağıdaki görüntü oluşacaktır ve ribbonumuz hazır hale gelicektir.

Ve sonuç 🙂

Gördüğünüz gibi bu şekilde kaliteli ve görselliğe ayrı hava katan bir uygulamayı hazırlamak bu kadar kolay,Bu tür grafiklerin hazırlanma mantığı genel olarak aynıdır,Sitelerde görüp beğendiğiniz 3 boyutlu grafikleride bu derste kendinizce yaptığınız değişiklikler ve yaratıcılığınızla oluşturabilirsiniz.

Paylaşımla ilgili sorularınızı ve yorumlarınızı Yorum bölümünden bana iletebilirsiniz.