Unutmadan belirteyim uygulamamı Adobe Photoshop CS3 Extended versiyonu üzerinde yaparak sizlere anlatacağım. Şimdi dilerseniz uygulamamıza geçelim ve nasıl yapıldığını görelim…

Şimdi Photoshop’ta 500px*500px boş bir doküman açalım. Daha sonra Araç menüsünden Pen Tool’u (P) seçelim. Pen toolu seçtikten sonra yukarıda yer alan Pen Tool opsiyon menüsünden Paths ikonunu tıklayalım. Bu sayede Pen Tool ile çizdiğimiz alan bir Path halini alacak ve biz de yazılarımız rahatlıkla bu path üzerine yazabileceğiz.

Ben örnek resimde gördüğünüz üzere gelişigüzel bir çizim yaptım. Bu aşamadan sonra yine Araç menüsünden Type Tool (T) aracını seçiyoruz. Fare ile az önce çizdiğimiz Path üzerine geldiğimizde Type Tool imlecinin altında yatay bir çizgi belirdiğiniz göreceksiniz. İmleç değiştiği zaman bir kere tıklayıp yazımızı yazmaya başlıyoruz. Yazınızın az önce çizdiğiniz yol üzerinde ilerlediğini göreceksiniz. Oldukça basit değil mi?

Peki Photoshop’ta Shape (Şekiller) üzerine de yazı yazabilir miyiz?
Evet. Bu uygulama da aynı şekilde olmakta. Dilerseniz basit bir örnek daha yapalım. Araç menüsünden Ellipse Tool’u (U) seçin. Shift tuşuna basılı tutarak tam bir daire çizelim. Çizdiğiniz dairede dolgu rengi olması önemli değil. Daha sonra yine Type Tool’u seçelim ve çizdiğimiz şeklin sınırlarında bir yere tıklayarak yazımızı yazalım. Şimdi yazdığınız yazı şeklinizin etrafını takip ediyor olmalı. Hatta isterseniz bu teknikle Custom Shapeler üzerine de yazılarızı yazabilirsiniz.

Gördüğünüz gibi Photoshop’ta belirlenen bir path üzerinde yazılar yazmak oldukça kolay. Bu sayede metinlerinize dilediğiniz gibi yön verebilir ve tasarımlarınızda kullanabilirsiniz. Metninize vereceğiniz diğer efektler ile değişik çalışmalar oluşturabilirsiniz.

Bir İpucu yazısına göre yine uzun oldu, çenem düştü :) Başka bir makalemizde görüşmek üzere…

Merhabalar, başlığın oldukça itici olduğunun farkındayım. Ancak yazmak istediğim makale ve uygulamaya başka bir isim bulamadım inanın. (Web’de yaptığım araştırmada bu tarz uygulamalara Glossy Text deniyor ancak tam olarak sizlere Glossy Text’i anlatmayacağım, ismini bilen bir dostumuz yazarsa çok sevinirim :)

Yazımızın giriş kısmında örneğini gördüğünüz üzere bu tür metin efektleri Web 2.0′ın bir tasarım özelliği olan “gradient” kullanımıyla mümkün. Kullanacağımız metinlere Photoshop’ta vereceğiniz “Gradient Overlay” efekti ile bu tarz yazı stillerine sahip olabiliriz. Kaldı ki yeni nesil web sitelerinde bu tarz yazıları sıkça görmekteyiz. O halde sözü fazla uzatmadan uygulamamıza geçelim. Öncelikle Photoshop’ta 400*400px’e sahip bir doküman açalım. Bu dokümanda Text aracını seçerek bir yazı yazalım. Ben örneğimizde “t’infection.com” yazdım ve yazıtipi olarakta Arial Black/36px belirledim. Siz farklı bir yazı tipi kullanabilirsiniz. Yapacağımız uygulamanın etkisini daha iyi görmek bakımından bold bir fontu kullanmayı tercih ettim.

Daha sonra yazımızı yazdıktan sonra yazımızın sahip olduğu layer penceresine iki kere tıklayarak Layer Style penceresini açalım ve sırasıyla aşağıdaki özellikleri verelim. (Bu bölümde örnek resimlerdeki değerleri ve renkleri vererek uygulamanıza yansıtabilirsiniz)

Uygulamamızda dikkat edeceğimiz en büyük nokta şu ki; Gradient Overlay efekti verirken yazıda görmüş olduğunuz orta hat. Bu orta hattı oluşturmak için önce sağ alana #1BADF8 renk değerini sol alana ise daha açık bir mavi tonu olan #AAE0FA renk değerini uyguladım. İşin can alıcı noktası olan orta hat içinde bu iki renk kodunun arasında kalan bölümde 3 tane daha geçiş kullandım. Geçişleri oluşturmak için Gradient alanının altına tıklayarak yeni bir bölme açabilirsiniz. Daha sonra fare yardımıyla bu bölmeleri Location değeri %48 ve %52 olacak şekilde sıralayın. Bu sayede ara renkleri kullanarak tam bir hat elde etmiş olacaksınız. Biliyorum biraz karışık gibi görünüyor ancak bir iki fare hareketi ile hemen halledilebilecek bir durum. Uygulamayı yaparken siz de bana hak vereceksiniz.

Bu tarz uygulamalar aslında hazır stillerle de yapılabilir, hatta çok daha değişik çeşitlerde� yazı denemeleri ve katman uygulamaları da yapabilirsiniz. Ancak her zaman söylediğim gibi önemli olan “işin mutfağı”. Bu efektin nasıl verildiğini öğrendikten sonra hazır stilleri mecbur kalmadıkça kullanmadım. Kaldı ki bir başka bilgisayarda kendi stillerinizi kurmanız ve bulmanız çok zor.

Umarım sizler için faydalı olmuştur.

Herkese selamlar, Photoshop Uygulamalarına elimizden geldiğince sitemizde yer vermeye çalışıyoruz. Bu makalemizde de bunlardan birine yer vereceğiz. Basit Photoshop uygulamalarıyla sitelerimiz için rahatlıkla birkaç adımda oluşturulabilecek butonlar ve navigasyonlar yapabiliriz. Aslına bakılırsa yukarıdaki navigasyonu 1-2 dakika içinde oluşturmak hiçte zor değil. Şimdi dilerseniz hemen nasıl adımlar izleyeceğimizi ve navigasyonumuzu nasıl şekillendireceğimizi anlatalım. Öncelikle Photoshop üzerinde 500*500 px değerine sahip bir doküman açalım. Açacağımız dokümanın Resolution değerini 72 olarak belirleyelim.

Boş dokümanımız üzerinde Rounded Rectangle Tool’u (U kısayolu) seçerek yukarıda Radius değerini 4px olarak ayarlıyoruz. Renk seçimi önemli değil. Siyah veya başka bir renkte kullanabilirsiniz. Şimdi hemen hemen 470*40px değerlerine sahip olacak bir dörtgen çizeceğiz. Bunu siz göz kararı da ayarlayabilirsiniz. Ancak yukarıdaki örnekte ben tam bir piksel değeri uygulamadan göz kararı dörtgenimi çizdim. Şimdi dörtgen aşağıdaki şekle benziyor olmalı. (Rengi gözönünde bulundurmayalım)

Bu aşamada Layer penceremizde Shape 1 alanının belirlenmiş olması gerekiyor. Şimdi navigasyonumuzun arka alanını oluşturacak bu katmanın özelliklerini düzenleyeceğiz. Layer penceresinde Shape 1 üzerine iki kere tıklayarak Layer Style penceresini açın. Bu alanda yapacağımız değişimler ile navigasyon arkaplanımız şekillenecek. Aşağıdaki alanlarda ilgili değerleri uygulayalım ve işlemimize devam edelim.

Inner Glow >> Blend Mode: Screen | Opacity:%25 | Elements, Size: 12px
Gradient Overlay >> Blend Mode: Normal | Gradient Renkleri: 1. renk #23A8E4 2. renk #54C4F6 olacak şekilde ayarlayın.
Stroke >> Size: 1px | Color: #6DCBF5

Yukarıda yer alan değerleri uyguladıktan sonra şeklimiz aşağıdakine benzer olacak. Şayet aynı görüntüyü alamadıysanız önemli değil, makalemizin sonunda kaynak psd dosyasını indirip gözatabilirsiniz.

Bu aşamadan sonra makalemizin giriş resminde vermiş olduğumuz örneğe ulaşmak için aktif buton olan ANASAYFA butonunu hazırlayacağız.

Shape 1 üzerindeyken yine Rounded Rectangle Tool’u seçerek aynı Radius değeriyle navigasyonumuzun içine oturacak bir dörtgen daha çiziyoruz. Yine renk önemli değil. Çünkü yukarıdaki gibi renk ve dolgu değerlerini kendimiz şekillendireceğiz.

Bu seferde Shape 2 üzerine çift tıklayarak butonumuzun renk ve dolgu ayarlarını yapacağız. Shape 2 Layer Style penceresini açtıktan sonra aşağıdaki değerleri giriniz.

Inner Glow >> Blend Mode: Screen | Opacity: %10 | Color:#80D2F6 | Element Size: 15px
Gradient Overlay >> Blend Mode: Normal | Gradient 1. renk #333333 2. renk #727272

Uygulamamız yukarıdaki örneğe benzemiş olmalı. Bu aşamadan sonra menümüz üzerine yazılarımızı yazarak işlemimizi sonlandıracağız. Yazı tipi ve boyutu tamamen size kalmış ancak ben uygulamam da beyaz renk ve Arial yazı tipine sahip 11px büyüklüğünde bir yazı tercih ettim. Yazımı Shape 2 üzerinde iken yazarak Shape 1 üzerinde de görünmesini sağladım.

Gördüğünüz gibi sadece iki shape alanı oluşturduk. Bunlara Layer Style ile belli değerler atadık ve sonra menümüz üzerine yazılarımızı yazdık. Bu aşamada minimal bir çalışma sergilemiş olduk. Zira sitenizde kullanmak istediğiniz alana göre vermiş olduğumuz değerler değişiklik gösterebilir. Özellikle Shape 2 alanını çoğaltarak diğer menü başlıklarına da uygulayabilir veya farklı renk değerleri vererek navigasyonunuzu renklendirebilirsiniz.

Umarım sizler için faydalı olmuştur. Giriş resmindeki uygulamanın PSD dosyasını BURADAN indirebilirsiniz.

Bu yazımızda bir resme yağmur efekti uygulayacağız. Kaynak bir resmin üzerinde yapacağımız bir iki basit Photoshop efekti ile yağmur yağıyormuş izlenimi uyandıracağız. Dilerseniz hemen makalenin devamına geçelim.
Efekti uygulayacağımız kaynak resim aşağıdadır.

Kaynak dosyamızı açıyoruz ve yeni bir layer oluşturuyoruz..

Edit > Fill > Foreground Color e gelerek, siyah ile dolduruyoruz.

Siyah layer seçili iken, Effect > Noise > Add Noise uyguluyoruz ve resimdeki gibi ayarlıyoruz.

Ok deyip, Filter > Blur > Motion Blur ‘ a gelip resimdeki ayarları uyguluyoruz.

Bunu da tamamladıktan sonra, Motion Blur ayarlarına geliyoruz ( CTRL + L ) ve resimdeki ayarları uyguluyoruz.

Şimdi efektimiz hazır fakat, siyah ekrandan kurtulmak için Layer sekmesindeki Screen‘i seçmeliyiz.

Son hali :

Screen’i seçtiğimiz yerden Soft Light, Linear Dodge, Difference ve Exclusion gibi efektlerle de değişik görüntüler elde edebilirsiniz.. Favorim, Soft Light : )