Photoshopta banner yapmak


Photoshop da banner yapımı

Web dünyasında bannerlar çoğunlukla reklam için kullanırlar. Azınlıkta da olsa duyuru için kullanılmaktadırlar. Photoshop da banner yapmak bu iki durum içinde uygundur. Aynı zamanda ister reklam isterse duyuru olsun amaç bannerın kendini belli etmesidir. Bannerın ilgi çekici olması için tasarımının reklama – duyuruya uygunluğu ve yayınlanacak sayfa ile alakalı olması ile sağlanır. Ben size bu iki aşamalı sistemin ilkini tamamlamanız için Photoshop ile birlikte yardımcı olacağım.

Banner boyutu

Web üzerinde en fazla kullanılan banner boyutu 468 x 60 yani genişliği 468px, yüksekliği ise 60px olan banner türüdür. Bu nedenle ben bu boyutlara göre örneğimizi gerçekleştireceğim.

Photoshopda banner yapımına başlamadan önce bir proje üzerinde gitmek çalışmanın kalitesini artıracağını düşündüğümden hayali bir hosting firmasının yaptığı kampanyayı çalışmaya yansıttım. Çalışma sonunda uçuşacağımız sonuç ise şu şekilde;

468×60

Photoshop 468 x 60 banner yapımı

Photoshop PSD dosyası

Proje dosyasını indirmek için tıklayın  

468 x 60 banner yapımı

Photoshopu açtıktan sonra CTRL + N diyip belirlediğiniz banner boyutlarını Photoshopa geçirin.

Photoshopda yeni bir dosya oluşturmak

Katmanlar sekmesinde bulunan yeni katmana (New Layer) tıklıyoruz. Eğer ki bu sekmeniz açık değilse F7 tuşuyla veya Pencere / Katmanlar (Windows / Layers )bölümünden aktif edebilirsiniz.

Photoshopda yeni katman oluşturma

Aşağıdaki renk paletlerini görmek için Renk Paletleri sekmesinin sağ köşesinde bulunan açılır pencere simgesine tıklayıp ekranda “Büyük Minik Resim” ve “Web Tonları” nı işaretleyin. Bu işaretlemeyi gerçekleştirdikten sonra ekranda görünecek olan uyarıya onay verin.

Banner üzerinde en fazla baskın olacak renk arkaplan rengidir. Bu nedenle eğer kendi web sitenizde yayınlayacaksanız rengi seçerken sitenizin arka planına uygun bir şekilde seçmenizde yarar var. Arkaplan yani zemin rengini Renk Paletleri veya Renk seçicisinden seçebilirsiniz. Boya Kovası (Dodge Tool) aracı ile yeni oluşturduğumuz katmanı seçtiğimiz renk ile boyayın.

Photoshop banner yapmak

Katmanlar sekmemize gelip CTRL + J ile katmanı (layer) kopyalıyoruz.

Katmanlar sekmesinden kopyaladığımız katmanımızı seçip fonksiyon yani işlevsel bir özellik eklemek için aşağıdaki resimde görülen butona tıklayıp Depgrade Kaplama (Graident Tool) diyoruz.

Depgrade düzenleyicisini açtık. İlk olarak Hazır ayarlar sekmesinin içerisinde 2 sırada bulunan ve 1 olarak işaretlediğim transparan şekline tıklayın. Daha sonra transparanın tam ortasında yani Konum ayarı %50 olacak şekilde bir durak belirliyorsunuz. 3.üncü ve son aşamada ise “Seçilmiş durağın rengini değiştir” diyoruz.

Graident tools configure

Renk ayarlarını resimde göründüğü gibi ilk belirlediğimiz rengin üst tarafındaki en yakın renk parçasını seçiyoruz.

Photoshop banner yapımında renk ayarları

Yine depgrade düzenleyicisine girip bu sefer 2 aşama önceki eklediğimiz durağın rengini değiştirmek için Renk kısmına giriyoruz.

Bu sefer ise ilk belirlediğimiz rengin alt tarafındaki en yakın renk parçasına gidiyoruz.

Grup ile çalışmak katman (layer) ile çalışmaktan çok daha iyidir. Bunun nedeni layerların arasında kaybolmamak ve düzenli olup daha kontrollü bir çalışma yapmaktır. Özellikle ilerde PSD to CSS işlemini yapacak arkadaşlar Grup şeklinde çalışmalıdırlar. Biz de katmanların içinde boğulmamak için gruplandırıyoruz. Katmanları seçmek için shift tuşunu kullanın. Daha sonra CTRL +G tuşuna tıklayın.

Gruplandırma işleminden sonra yeni katman oluşturuyoruz.

Öncelikle özel şekil aracından yuvarlak köşeli dikdörtgeni seçiyoruz daha sonra shift tuşuna basarak resimdeki gibi üst taraftan alt tarafa gelecek şekilde şeklimizi çiziyoruz.

CTRL + T diyoruz.

Resimdeki gibi -15 derece döndürüyoruz.

Damlalık aracı (Eyeddropper) ile şeklimizin rengini seçiyoruz.

Ön plan rengimize (resimde görülen kırmızı renk) tıklıyoruz.

Rengimiz eğer mavi alan içerisinde değilse bir sonraki aşamaya gerçekleştiriyoruz.

İngilizcesi İmage / Adjustment / Brightness / Contrast olan Parlaklık / Contrast ayarından Parlaklık ayırına 100 ile 140 arasında değişen bir değer atıyoruz.

Şeklimizin parlaklık ayarını artırdıktan sonraki hali;

Renk seçiçimizi tekrar açıyoruz. Resimde gösterilen kutudaki metni kopyalıyoruz.

Oluşturduğumuz şekle Fx buttonu yani işlevsel bir özellik eklemek için tıklayıp “Kontur” (ing:strong) a tıklıyoruz. Gerekli kontur ayarlarımızı resimdeki gibi uyguluyayıp 2.aşamada gösterilen renk kısmına erişiyoruz.

Kopyaladığımız renk kodunu yapıştırıyoruz.

Kontur eklediğimiz bölüme geliyoruz. Bu sefer Deprade Kaplamaya (İng: Graident) tıklıyoruz.

Siyahtan beyaza doğru renk akışı bulunan yerin ortasına tıklıyoruz.

Öncelikle Hazır ayarlar sekmesinde 2. sırada bulunan Transparan şablonunu seçin. Daha sonra Sol ve allta bulunan Depgrade durağının üzerine gelip seçilmiş durağın rengini değiştirin.

Rengimizin üst tarafında bulunan en yakın renk bölmesine getiriyoruz.

Bannerimizin son hali. İsterseniz Depgrade’in yanında bulunan Ters (İnvers) e tıklayarak renk akışını üstten alta doğru yapabilirsiniz.

Daha temiz çalışmak açısından tekrar gruplandırıyoruz.

Grubumuzu çoğaltıp CTRL+E tuşuna bastıktan sonra katman şekline çeviriyoruz. Altta kalan grubumuzu göze tıklayarak görünürlüğünü kaldırıyoruz.

Resimdeki aracı seçip gerekli işlemleri gerçekleştiriyoruz.

Gerekli işlemleri gerçekleştirdikten sonra katmanımızı grubumuzun altına taşıyoruz / sürüklüyoruz.

CTRL + T tuşuna tıklayarak şeklimizi aşağıdaki duruma getiriyoruz.

Grubu ve katmanı seçerek birleştiriyoruz. Daha sonra 2 kez CTRL + J’ye tıklayıp katmandan toplamda 3 adet kopya oluşturuyoruz.

Ortadaki katmanımızı shift tuşuna basılı tutarak ortaya, en üstteki katmanı yine shift tuşuna basarak en sağ tarafa alıyoruz.

Hizalamaları yaptıktan sonra ortadaki katmanımıza gelip Görüntü / Ayarlamalar / Renk Değiştir (ing: İmage / Adjustment / Replace Color) a tıklayın. İlk damlacık ile şeklinizdeki en belirgin rengi seçin. Ben resimde kırmızı ton ağırlıkta olduğu için kırmızıyı seçtim.

Birden çok rengi seçmek için + simgeli Damlacık türüne tıklayabilirsiniz. Sembolünüzdeki renkleri değiştirmekte zorlanıyor iseniz (Bu renk geçişinden kaynaklanır. İki veya daha fazla renk olduğu için uyumsuzluk yaşanır) + simgeli Damlacık türünü kullanınız.

Belirlenen grubu seçip yeni katman oluşturma buttonuna tıklıyoruz.

Griadent (Depgrade Kaplama) aracını seçip yukarıda bulunan menüden Nötr yoğunluk depgrade şablonunu seçiyoruz.

Graident aracı yardımıyla en soldaki şeklimizden en sağdaki şeklimize kadar bir graident şeridi çiziyoruz. Şeklimizi çizdikten sonra 2. aşamada görüldüğü gibi bir hal alacaktır. CTRL + U tuşuna tıklıyoruz Açıklık +100 yapıyoruz. Böylece nötr yoğunluk beyaz rengini almış olmalıdır.

3 adet katmanımızı tutup CTRL+G tuşuna basıyoruz. İsmini Sağ Taraf – bloklar olarak değiştirmeyi tercih ettim.

Grup birleştirme

Grup şekline getirdiğimiz blokları CTRL + T’ye basıp en sağ köşeye alıyoruz.

Yazı (Text) aracına tıklayın. Segoe Print yazı tipi ve 36 puntoyla 3 yeni yazın. 3 yazısını 40 veya 44 yapın. Altına resimde görüldüğü gibi yine Segoe Printf fontu ile 14 punto kampanya yazıyoruz.

“3” ün yazı fontunu arka plan ile uyum sağlayacak renklerden (sarı – kırmızı, turuncu) biri olan kırmızı seçelim.

Depgrade kaplama (Graident Tool) işlemini gerçekleşterelim.

Depgrade ayarlarından daha önce uyguladığımız 2.sırada bulunan şablonu seçiyoruz. Projemiz aşağıdaki hale benzer bir uyum almalıdır.

Text aracı ile kırmızı alanın zerine yazı yazıp sarı alana ait katmanın altına atıyoruz. Bu sayade 24 adlı yazı sarı alanın üzerine çıkmayacak.

Metin katmanımıza ait T simgesine tıkladıktan sonra rengimizin daha gerçekci görünmesi amacıyla Renk seçicisinden rengimizi solduruyoruz.

Aşağıdaki işlemleri gerçekleştiriyoruz.

Değerleri değiştirip hizalıyoruz.

Beyaz renkte 1- 2- 3 gibi rakamları hizalayıp, opaklık (opacity) ayarlarını %50 olarak ayarlayın.

Katmanları grup haline getiriyoruz.

Yeni bir katman oluşturuyoruz.

Özel şekil aracından Bilişim kategori ile alakalı olduğundan bir dünya şeklini seçiyoruz. Shift tuşuna basılı tutarak şeklimizi çiziyoruz. Burada dikkat etmeniz gereken bir diğer ayrıntı Resimde shift tuşuna basılı tutarak yazan metnin üstünde bulunan 3 şekilin ortasını seçmenizdir. Son olarak brush (fırça) ayarlarını 2px’e 100% sertlikte ayarlıyoruz.

A tuşuna basıp şeklimizi seçiyoruz. Sağ tıklayıp Yola Kontur ver (ing: Stroke Path) uyguluyoruz ve fırçayı seçiyoruz.

23 punto büyüklüğünde Segoe Printf yazıyoruz. Daha sonra yazı katmanına Fx (işlevsel ekleme)ye tıklayıp karıştırma seçeneklerine tıklıyoruz. Karıştırma seçeneklerinin bir üst kısmında bulunan Stilleri tıklayıp en sonundaki stili seçtikten sonra aşağıdaki Bilgius Bilişim yazısının görüntüsüne ulaşmanız gerekiyor.

Katmanlarımızı son kez birleştirip projeyi sonlandırıyoruz. Proje dosyasını buraya tıklayarak indirebilirsiniz.

Yazar: Ali Göksel Bektaş

Simenty kurucu ortağı. Küçüklüğünden beri website yapan Ali bulunduğu web sektöründe 10 yıldan fazla tecrübesı vardır. Bisiklet sürmeyi, kek yemeyi ve rahat koltukları sever.

“Photoshopta banner yapmak” için 11 yorum

  1. Paintten sonunda kurtulabildim. 😀 sizin gibi olmasada photoshopta bir şeyler yapmayı başarabildim, 2-3 deneme ile daha güzel şeyler yapacağımdan eminim yarın sakin kafayla baştan başlıyacağım 🙂

  2. Bu uygulama sayesinde photoshopda artık banner yapabiliyorum. umarım bu konudan sonra harekteli banner yapmayıda anlatırsınız veya bu banneri hareketli olarak yaparsanız çok sevinirim. kolay gelsin.

  3. Photoshop programında banner ve logo yapma konularını çok güzel bir şekilde anlatmışsınız.

  4. Photoshopta banner yapmak adına bulabildiğim en güzel konu. Diğer konular genellikle online araçlardan bahsetmiş. Ama photoshopu öğrenmek isteyen için güzel bir ders olmuş.

  5. Photoshopda logo yapmınıda sizden öğrendim 😀 Çok teşekkür ederim.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir