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…

Hemen belirtmeliyim ki bu makaleyi yazarken Smashing Magazine‘in yeni tasarımından esinlendim.  Kategorileri görüntülediğimiz menü oldukça hoşuma gitti. Bu tarz bir menü yapımını sizlerle paylaşmaya karar verdim.

MENÜ ÖNİZLEME MENÜ DOSYASI İNDİR

Öncelikle menümüzde/navigasyonumuzda kullanmak üzere arkaplanımızı oluşturacak resmimizi Photoshop’ta oluşturalım ve uygulamamıza başlayalım.

Photoshop’ta 400*400px boyutunda yeni bir doküman açalım. Yeni bir katman oluşturarak Rectangular Marquee Tool aracını seçelim. Üst menüden Style bölümünü Fixed Size yaparak 300*250px bir değer verelim. 300*250px’lik bir dörtgenimiz oldu. Bu dörtgeni siyah renk ile (#000000) dolduralım.

Şimdi yeni bir layer daha oluşturarak oluşturduğumuz dörtgenin üzerinde küçük bir üçgen oluşturalım. Üçgenimizi yapmak için ben Polygonal Lasso Tool (L) kullandım. Küçük bir üçgen çizdikten sonra yine siyah renk ile dolduruyoruz.

Şu anda bir dörtgen ve bir de küçük üçgenimiz var. Üçgenimizi dörtgenimizin üzerinde 30-40px boşluk kalacak şekilde konumluyoruz. Sonrasında Layer penceresinden Layer 1 ve Layer 2′yi Ctrl tuşuna basarak aynı anda seçiyoruz. Seçim yapıldığında da Ctrl+E tuş kombinasyonu ile iki katmanı birleştiriyoruz. Böylelikle dokümanımızda sadece Layer 2 kalmış oluyor.

Bu aşamadan sonra bu katmana istediğimiz özellikleri vererek daha iyi bir görünüm sağlayacağız. Şimdi Layer 2 üzerine iki kez tıklayarak layer özelliklerine geliyoruz. Aşağıda yer alan değerleri girerek çalışmamıza uyguluyoruz.

Resimlerde görülen değerleri uyguladıysak hemen hemen aşağıdaki gibi bir görüntüye sahip olacağız.

Çalışmamızı bu aşamada uygun yerlerden kesecek ve resmi 2 bölüme ayıracağız. (Kodlama esnasında ikiye ayırma bize büyük kolaylık sağlayacak) Photoshop’ta Crop Tool’u (C) seçerek resmimizi uygun alanlardan kesiyoruz. Ben çalışmanın üstünden, altından ve yanlardan 2px fazlalık vererek kesim yaptım. Siz dilediğiniz gibi kesebilirsiniz.

Kesim işleminden sonra Üst alanda yer alan üçgen bölümü 20px’lik bölüm halinde kılavuz çizgimizle ayıralım ve kesip kaydedelim. Sonrasında kalan bölümü de kesip ayrı şekilde kaydedelim. Böylelikle resmimizin üst ve alt kısmını ayrı ayrı keserek kaydetmiş olduk. (Kestiğimiz resimlere nav_ust ve nav_alt şeklinde isimler verebiliriz)

Evet menümüzde kullanacağımız görselleri oluşturduk. Şimdi dilerseniz Xhtml ve Css kodlarını yazalım ve menümüzü oluşturmaya başlayalım. Önce Xhtml kodlarımızı yazarak başlıyoruz. Aşağıda yer alan kodları bir metin editörüne yazarak index.html olarak kaydedelim.

<ul class="menu">
<li><a href="#" class="menu">Anasayfa</a></li>

<li><a href="#" class="menu">Kategoriler (+)</a>
	<ul class="sub"><li>

<div class="nav">
	<div class="nav_ust">&nbsp;</div>
	<div class="nav_alt">
	<h2>Tüm Kategorileri Görüntülüyorsunuz</h2>
	<div class="navlink1">

	<a href="#">Css & Xhtml</a>
	<a href="#">Javascript</a>
	<a href="#">Php & Mysql</a>
	<a href="#">Asp.NET</a>
	<a href="#">Dreamweaver</a>
	<a href="#">Tasarım Genel</a>
	</div>

	<div class="navlink2">
	<a href="#">Photoshop</a>
	<a href="#">Illustrator</a>
	<a href="#">Fireworks</a>
	<a href="#">Gimp</a>
	<a href="#">Flash</a>
	<a href="#">Web Grafik Genel</a>
</div>
</div>
</div>

</li>

</ul>
</li>
<li><a href="#" class="menu">Makaleler</a></li>
<li><a href="#" class="menu">Videolar</a></li>
<li><a href="#" class="menu">Arşiv</a></li>
<li><a href="#" class="menu">Forum</a></li>
<li><a href="#" class="menu">Hakkımızda</a></li>
<li><a href="#" class="menu">İletişim</a></li>

</ul>

Kısaca Xhtml kodlarında yaptığımız şeyden bahsetmek istiyorum. Gördüğünüz gibi önce Ul etiketi ile sırasız listemizi oluşturduk, yani menümüzün görünür ögelerini yerleştirmeye başladık. Ul ve li etiketleri ile arka arkaya menümüzü inşa etmeye başladık. Kategori linkinde ise menümüzü oluşturacak olan alt menü için ayrıca bir ul ve li etiketi açtık. Li etiketi açıkken menümüzü gösterecek olan ana kodlamayı yaptık. Önce div class=”nav” isimli div etiketimizi açtık ve sonrasında navlink1 ve navlink2 etiketleri ile devam ederek içlerinde yer alacak olan linkleri yerleştirdik. Sırasıyla etiketlerimizi kapatarak menü yazımına devam ettik ve diğer görünür linklerimizi yazdık.

Bu noktaya kadar işin büyük bölümünü hallettik. Şimdi ise en can alıcı noktayı yani Css kodlarımızı yazacağız. Aşağıdaki Css kodlarını bir metin editörüne yazarak style.css olarak kaydedin.

ul.menu {list-style:none;margin:0;padding:0;font:bold 14px/24px arial, verdana, sans-serif;}
ul.menu  li {float:left;position:relative;}
li ul {display:none;list-style:none;}
ul li a.menu{float:none;padding:8px 10px 8px 10px;background:#333;color:#fff;display:block;text-decoration:none;border-bottom:4px solid #666}
ul li a.menu:hover{color:#999;background:#666}

li:hover > ul {display:block;position:absolute;margin:0;padding:0;}

.nav {width:250px;display:block;position:absolute}
.nav h2 {color:#333;background:#f5f5f5;display:block;margin:0 auto;padding-left:5px;font:bold 12px/24px arial, verdana, sans-serif;width:95%}
.nav_ust {display:block;background:url(navust.png) no-repeat;float:left;width:304px;height:20px;margin:-6px 0 0 0px;}
.nav_alt {display:block;background:url(navalt.gif) no-repeat;float:left;width:304px;height:247px;}

.navlink1, .navlink2 {width:125px;margin:10px 15px 10px 10px;float:left;display:inline;font:14px/20px arial, verdana, sans-serif;}
.navlink1 a, .navlink2 a {display:block;color:#666;background:transparent;text-decoration:none;padding:6px}
.navlink1 a:hover, .navlink2 a:hover {color:#fff;background:#333;text-decoration:none;padding:6px}

Css kodlarımızdan kısaca bahsedecek olursak. Burada yaptığımız en önemli şey menümüzün görünürlük ve gizlilik durumunu ayarlamak. Bunu da li ul bölümünde display:none değerini vererek yaptık. Alt birimlerin görünmesini sağlamak içinse li:hover > ul bölümüne display:block değerini kullandık. Diğer css kodlarına dikkat ettiyseniz Nav isimli sınıfımızı oluşturduk. Sonrasında nav_ust isimli alanı oluşturduk. Bu alana Photoshop’ta yaptığımız ilk resmi arkaplan resmi olarak atadık. Sonrasında nav_alt sınıfını oluşturduk. Bu sınıfa da sonradan kaydettiğimiz resmi arkaplan resmi olarak atadık. Gerekli değerleri verdik ve sonrasında navlink1 ve navlink2 alanlarını oluşturduk. Bu alanlarda kategorilerimizi 2 sütun olacak şekilde göstereceğimiz için 2 alan oluşturduk. Sonrasında alanlarımızda Css düzenlemelerini sınıflara uygun değerleri atayarak tamamladık.

Belgeyi kaydedip görüntülediğinizde örneğimize benzer bir menü elde etmiş olacaksınız. Uygulamanın kolay ve basitçe uygulanabilir olması nedeniyle herbirinizin bunu yapabileceğini düşünüyorum. Mantık olarak klasik Css açılır bir menü oluşturduk sadece. Bu menünün bir biriminde klasik menü birimlerini göstermek yerine kendi yapmış olduğumuz Css stil ve tanımlamalarını kullandık hepsi bu :)

Bu uygulama modern tarayıcıların hepsinde çalışacaktır. Firefox, Opera, Chrome, IE8 üzerinde denenmiştir. Yalnız bu uygulama IE5+ ve IE6 üzerinde çalışmayacaktır! Çünkü IE eski sürümleri uygulamada kullandığımız :hover sınıfını (pseudo class) desteklemez. Bunu çalıştırabilmek için birçok küçük düzeltme js uygulaması mevcut. Ancak ben fix ile uğraşıp kafanızı karıştırmak istemedim, mazur görün. Şayet soru olarak gelirse yorumlarımda da anlatabilirim.

Unuttuğum veya atladığım noktalar varsa özür dilerim. Umarım sizler için faydalı olmuştur…

Menü Önizleme Menü Dosyası İndir

Inset text aslına bakarsanız yeni bir teknik değil. Daha önce de kullanılan bir Photoshop metin efekti tekniği. Ancak son dönemlerde oldukça sık kullanılmaya ve kıymeti bilinmeye başlandı.

Bu tekniğin özünde kullandığımız arkaplan geçişine göre metnimize sanki o arkaplana gömülüyormuş etkisini vermek yatıyor. Bunu da Photoshop’ta çok basit yoldan bir iki hamle ile elde edebiliyoruz. Şimdi dilerseniz Photoshop’ta 400px*200px bir doküman açalım.

1) Yeni bir katman (layer) oluşturalım. Bu katmana aşağıda görülen Gradient overlay etkisini verelim.

2) Şimdi sıra bu katman üzerinde gömülü olacak olan metnimizi yazmaya geliyor. Ben örnek uygulamada Myriad Pro yazıtipini kullandım. 36px boyutunda (ayrıca metin kalınlığını bold olarak ayarladım) örnek bir yazı yazıyoruz. Yazı rengimizi de #0e4f78 olarak belirledim.

3) Bu aşamada sırasıyla katman özelliklerini vererek gömülü metnimizi oluşturacağız. Aşağıdaki resimlerde görülen değerleri çalışmamıza yansıtalım.

Gördüğünüz gibi 3-4 küçük aşamada gömülü metnimizi elde etmiş olduk. Makalemizin başında söylediğim gibi önemli olan şey kullandığımız arkaplan geçişine göre metnimizin rengini ve değerlerini iyi ayarlayabilmek. Makalemizin sonunda örnek olarak kullandığımız dosyayı indirebilir ve siz de verdiğimiz değerleri görebilirsiniz. Unutmadan belirteyim ki, bu makaleyi hazırlamamda SixRevisions’daki bu gönderinin oldukça faydası oldu.

INSET TEXT ÖRNEK DOSYAYI İNDİR (32kb)

Merhabalar. Photoshop’ta metinlere 3 boyut etkisi vermek için birçok yöntem kullanılıyor. Photoshop’un kendi nimetlerinden yararlanabileceğimiz gibi Photoshop dışı programlar kullanarakta bu etkiyi oluşturmak mümkün. Ben bu yönde bir çalışma yapacaksam her zaman bana en basit gelen yolu izliyorum. Bu nedenle 3 boyut etkisini Photoshop ile oluşturuyorum. Bu yazımızda hem yazımızı 3 boyutlu bir görünüme kavuşturak hem de Pen, Brush gibi araçlar kullanarak tatlı ışık efektleri ile çalışmamızı süsleyeceğiz.

Öncelikle Photoshop’ta 500*500 piksel olan arkaplan rengi siyah bir doküman açalım. Ben ışık efektlerinin daha iyi seçilebilmesi için siyah tercih ettim. Siz kendi çalışmalarınızda farklı renkler kullanabilirsiniz. Hemen önce 3 boyutlu yazımızı oluşturalım.

Arial (kalın) yazıtipinde ve 96 piksel boyutunda yazımızı yazalım. Renk olarak beyaz tercih edelim. Ben örneğimizde kısa ve öz olduğu için 3d yazdım.

Yazımızı oluşturduktan sonra Alt tuşuna basılı tutarak önce aşağı sonra sol yön tuşlarına basalım. Her basışınızda yazı katmanının kopyalandığını göreceksiniz. Bu kopya sayısı 10 oluncaya kadar ilerleyim. (5 aşağı, 5 yukarı basış) Kopyalama yaptığımız ilk yazı yeni oluşturulanların altında kaldı. Layers penceresinde fare ile tutarak bu katmanı en üstteki kopya katmanın üzerine sürükleyin. Böylelikle kopyalama yaptığımız katman en üste geçecek ve bizde istediğimiz efektleri daha iyi verebileceğiz.

Şimdi ilk yazı katmanımıza Layers penceresinde iki kere tıklayarak aşağıdaki özellikleri verelim. Resimleri takip ederek uygulamayı yapabilirsiniz.

10 adet kopyaladığımız diğer katmanların hepsini Layers penceresinde Ctrl tuşuna basılı tutarak seçelim. Sonrasında Ctrl+E tuş kombinasyonunu kullanarak tüm katmanları tek bir hale getirelim. Böylelikle çalışmamızda 2 tane katman kalmış olacak. Birisi yukarıdaki özellikleri verdiğimiz ana yazı katmanı diğeri ise gölge için kullanacağımız diğer katmanların birleştirilmiş hali.

Birleştirdiğimiz katmanlara ise yine resimlerden yararlanarak aşağıdaki özellikleri verelim.

3 boyutlu yazımız hazır. Şimdi yeni bir katman oluşturalım ve yazımızı süsleyecek olan Kalem geçişlerini verelim. Yeni oluşturduğumuz katman seçili iken Pen toolu seçelim ve aşağıdaki gibi bir çizim elde edelim. Çiziminizin şeklini Kalem aracı seçiliyken Ctrl tuşuna basılı tutarak değiştirebilirsiniz.

Çizimi yaptıktan sonra B tuşuna basalım ve Brush (Fırça) aracına gelelim. Shape Dynamics = Size Jittler %0 olacak şekilde değer verelim. Fırça rengimiz de beyaz olsun. Daha sonra özelliklerini zaten değiştireceğiz.

Fırça özelliğimizi verdikten sonra Pen tool’da iken sağ tuş yaparak Stroke Path tuşuna basalım. Böylelikle Pen tool ile çizdiğimiz çizgiyi takip eden şeklimizi oluşturduk. Şimdi Pen toolun çizgileri kaybolmadan yeni bir katman oluşturalım. Bu sefer aşağıdaki Fırça özelliklerini ayarlayalım. Scattering = 300%, Other Dynamics = Değerler 100%, Smoothing değeri de seçili olsun. Yine biraz önce yaptığımız gibi Pen tool’da sağ tuş yapıp Stroke Path diyelim.

Bu işlemlerden sonra birbirinin üzerine binmiş iki tane ayrı katmanımız oldu. Bu katmanlardan ilk oluşturduğumuza aşağıdaki değerleri verelim.

Sonraki oluşturduğumuz katmana ise aşağıda yer alan değerleri verelim.

Bu aşamadan sonra yazımızın giriş kısmında verdiğimiz çalışma gibi bir çalışma elde etmiş olmalıyız. Farklı Pen tool geçişleri kullanarak daha farklı bir görünüm elde etmemiz mümkün. Bu geçişlerden sonra önemli olan uygun katman özelliklerini çizdiğimiz şekillere yansıtarak görünümü güzelleştirebilmek. Gönderinin sonunda çalışmamızın olduğu PSD dosyasını da indirebilirsiniz.

Umarım bu çalışma hoşunuza gitmiştir. Bir başka makalemizde görüşmek üzere.

ÖRNEK ÇALIŞMA İNDİR

Yeniden merhabalar. Aslına bakarsanız bu makalede Photoshop ile başka bir uygulama anlatmayı düşünüyordum. Ancak her zaman hızlıca yaptığım bir uygulamayı sizinle İpucu olarak paylaşmaya karar verdim.

Bu kısa yazımızda sadece 2 küçük adımda Photoshop’ta nasıl etkili bir arkaplan yapacağımızı anlatacağız. Dilerseniz hemen uygulamamıza geçelim.

ADIM 1: Öncelikle istediğiniz boyutta boş bir doküman açın. Ben 1024*768px bir doküman tercih ettim. Yapacağımız uygulamada sayfa önplan ve arkaplan renkleri de kendinize göre belirleyin. Ben ön renk için #1A9DCE, arka renk için de #073F54 değerini kullandım. Ardından hemen bir katman (layer) oluşturalım. Sonrasında üst menüden Filter >> Render >> Clouds seçeneğini tıklayalım. Bu filtre ile dokümanımız verdiğimiz renklerde bulutsu bir görünüme kavuşacaktır.

ADIM 2: Sonrasında yine üst menüden Filter >> Blur >> Motion Blur bölümünü tıklayalım. Karşımıza gelen pencerede Angle bölümünü 60, Distance bölümünü de 300 olarak belirleyin ve Tamam diyerek dokümanı izleyin.

Dilerseniz renkleri kendi isteğinize göre değiştirerek ve yukarıda yer alan Efektlerin değerlerini değiştirerek siz de farklı görünümler elde edebilirsiniz. Bu tarz oluşturulan arkaplanları dilerseniz web uygulamalarında dilerseniz de kendi duvarkağıtlarınızı yaparken kullanabilirsiniz. (Kaldı ki ben duvar kağıdı yaparken sıkça anlattığım bu uygulamayı kullanıyorum, hızlı ve etkili biçimde sonuca ulaşıyorum, sizlere de tavsiye ederim :)

Yine çok uzun oldu sanırım, bir başka gönderide görüşmek üzere :)

Ctrl+J: Aktif katmanı (layer) yeniden oluşturur. (Burada bir parantez açmak gerekiyor, zira bu kısayol sadece aktif olan katmanı yeniler, eğer temiz ve sıfır bir katman elde etmek istiyorsanız Ctrl+Shift+Alt+N kombinasyonunu kullanmanız gerekir)
Ctrl++ ve Ctrl+-: Doküman üzerinde zoom arttırma ve azaltma yapar. (Ancak ben doküman büyütme küçültmeyi genellikle Alt+fare teker kaydırma ile yapıyorum)
Ctrl+N: Yeni bir doküman için pençere açar.
Ctrl+O: Bir dosyayı açmaya yarar.
Ctrl+W: Çalışma penceresini kapatır.
Ctrl+S: Çalışmayı kaydeder.
Ctrl+Shift+S: Çalışmayı Farklı kaydeder.
Ctrl+K: Photoshop’un genel tercihlerini açar.
Ctrl+D: Seçimi deaktif hale getirir.
Ctrl+B: Color Balance aracını etkinleştirir.
Ctrl+T: Seçili katman üzerinde Free Transform’u etkinleştirir.
Ctrl+E: Bağlantılı katmanları birleştirerek tek layer haline getirir.
Ctrl+G: Aktif katmanlarda yeni bir grup oluşturur. (Shift+Ctrl+G ise bu grubu bozar, yani ungroup hale getirir)
Ctrl+Z: Yaptığınız işlemi geri alır.
Ctrl+F: Son yaptığınız Filter efektini tekrarlar.
Ctrl+Alt+Z: Bu ise History çizelgesi içinde yaptığınız tüm işlemleri geriye doğru döndürür.
Space+Fare Sol tuş basılı: Bu kombinasyon ile büyük boyutlu dosyalarınızda bir noktayı tutup fare ile istediğiniz yöne hareket edebilirsiniz. Özellikle dokümanı büyüttükten sonra belli noktalara manuel varmak için çok kullanıyorum.
Ctrl+Shift+Alt+S: Çalışmayı web için kaydeder.

Photoshop Araçlar’ı (Tools) Kısayolları

V: İmlecin Move aracına dönmesini sağlar. (Belki en çok kullandığım kısayol)
G: Dolgu aracını açar.
M: Marquee aracını etkinleştirir.
W: Magic Hand aracını etkinleştirir.
C: Crop aracını etkinleştirir.
K: Slice aracını etkinleştirir.
B: Brush aracını etkinleştirir.
E: Silme aracını etkinleştirir.
T: Text aracını etkinleştirir.
P: Pen aracını etkinleştirir.
U: Shape aracını etkinleştirir.
I: Eyedropper aracını etkinleştirir.
Z: Zoom aracını etkinleştirir.

(Yine bir parantez, Photoshop’ta Tools aracında yukarıda kısayollarını verdiğim tüm araçlarda Shift tuşuna basarak aracın diğer bölümüne ulaşabilirsiniz. Örneğin G aracı dolgu aracını açar demiştik, şayet Shift+G yaparsanız bu sefer Gradient tool’a ulaşırsınız. Diğer kısayollarda da siz deneme yaparak sonucu görebilirsiniz)

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

Sözgelimi kendinize göre kullandığınız bir Layer Style tasarımı yaptınız ve bunu kullandığınız katmana (layer) uyguladınız. Bu aşamadan sonra aynı katman seçili durumdayken Window >> Style penceresini açın. Burada aşağıda yer alan küçük butona tıklayarak (Create New Style) karşınıza gelen pencerede stilinize isim vererek saklayın. Bu gibi birden fazla stil yaparak kaydedebilirsiniz.

Gelelim bu kaydedilen stillerin bir set haline getirilmesine. Edit >> Preset Manager bölümüne tıklayın. Karşınıza çıkacak olan küçük pencerede preset type olarak Styles seçin. Muhtemelen az önce kaydetmiş olduğunuz stillerinizi de göreceksiniz. Kendi yapmış olduğunuz stilleri Ctrl tuşu ile tek tek seçerek yine aynı pencerede yer alan Save Set butonuna tıklayın. Burada açılan diyalog penceresi sizden stil setinize bir isim vermenizi isteyecektir. İsim verdikten sonra kaydederek kendi oluşturmuş olduğunuz stil setini kullanabilirsiniz.

Sadece stiller değil aynı işlemi, Brush, Shape, Gradient gibi alanlarda da uygulayabilirsiniz. Preset Manager bütünüyle sizin elinizde. Kendi kullanmış olduğunuz Style, Gradient, Shape gibi ögeleri set haline getirerek hem rahat kullanım avantajına sahip olursunuz hem de isterseniz bu oluşturduğunuz ögeleri webde dilediğiniz gibi paylaşabilirsiniz. (Biraz uzun bir ipucu oldu kusura bakmayın)

Photoshop’u ister web tasarımı amaçlı isterseniz de fotoğraf manipülasyonu için kullanın yine de bir şekilde yolunuz Pen Tool (P) ile kesişmiştir. Pen aracı aslında Photoshop‘un olmazsa olmazlarından olan ve birçok grafik tasarımcının vazgeçemeyeceği bir araçtır.

Pen tool sayesinde belli bir alanı kesip çıkarma, Shape (şekil) elde etme gibi işlemler yapabiliriz. Bunlarla birlikte Pen Tool ile oluşturduğumuz şekillere belli efektler verebiliriz. Biz bu makalemizde Photoshop’un Pen aracını kullanarak eğik şekillere hakim olmayı öğrenecek ve bunu Glow (Ateşlendirme, Kızartma diye Türkçemize çevirebiliriz) şeklinde nasıl detaylandırabileceğimizi öğreneceğiz. Bu sayede Pen Tool’u nasıl kullanabileceğimizi de sizlerle paylaşacağız. Basit bir iki adımdan oluşan bu uygulama için hemen Photoshop’umuzu açalım :)

Photoshop’ta 640*480Px arkaplanı siyah olan bir doküman açalım. Bu aşamadan sonra Araç paletinden Pen Tool’u seçelim. Aracımızı seçerken dikkat edeceğimiz bazı hususlar var. Örneğin aracın seçiminden sonra yukarıda beliren menüde aracı Path olarak seçiyoruz. Daha sonra paletin sonundan Exclude overlapping path areas bölümünü seçiyoruz. (paletteki son seçilebilen şekil, aşağıdaki resimde detaylı gösterdim.)

Pen aracını seçtikten sonra dokümanın ortasında bir yerde önce bir kere tıklıyoruz. Araçla tıklamayı yapıp daha sonra bunu fare ile herhangi bir yöne çektiğiniz zaman çizgi oluştuğunu ve bunun eğrildiğini göreceksiniz. İlk eğriliği elde ettikten sonra ikinci bir fare tıklamasıyla bu sefer ters yöne bir S elde edelim. merak etmeyin, oluşan bu iki S şeklide birbirini takip ediyor. Bu aşamada aşağıdaki gibi bir şekil elde etmiş olmalıyız. Siz kendi şeklinizi oluşturabilir ve onun üzerinde çalışmaya devam edebilirsiniz.

Yukarıdaki adımlara dikkat ettiyseniz Pen aracı için herhangi bir katman (layer) oluşturmadık. Şimdi layer penceresinden yeni bir layer oluşturalım. Ancak bu layerda önce Pen toola efektimizi oluşturacak olan Brush’ımızı (Fırça) ayarlayacağız.

İster klavyeden B tuşuna basın isterseniz de araç paletinden Brush aracını seçin. Bu aşamada Pen tool ile oluşturduğumuz şekle bu Brush ile efekt vereceğiz.

Brush menüsünden Basic Brushes’ı seçin ve burada 12Px ve Hardness değeri %0 olan Brush’ı seçin. Seçimi yaptıktan sonra Brush menüsünden çıkabilirsiniz.

Pen aracımızla oluşturacağımız efektin daha anlaşılır olması için dokümanımızın arkaplan rengini siyah olarak belirlemiştik. Bu nedenle fırçamızın uygulama rengi mümkün olduğunca açık bir renk olmalı. Ben direkt olarak beyaz tercih ettim. Siz de açık ve farklı bir renk tercih edebilirsiniz.

Şimdi araç paletinden bu sefer Path Selection Tool’u (A) seçelim. Çizmiş olduğumuz eğik şeklin üzerine fare ile sağ tuş yapalım. Açılan menüden de Stroke Path seçeneğini seçelim. Bu açılan küçük pencereye tamam demeden önce aşağıdaki Simulate Pressure seçeneğinin seçili olduğuna emin olalım. Pencereye tamam diyerek vermiş olduğumuz efekti görebiliriz.

Şimdi tek bir adım kaldı. Şeklimiz üzerine yine Path selection tool aracı ile sağ tuş yaparak Delete Path diyoruz. Bu sayede ilk aşamada yapmış olduğumuz çizim kaybolacak ve geriye efekt verdiğimiz eğik şeklimiz kalacak.

Gördüğünüz gibi basit bir iki yöntem ile Pen aracını etkin bir şekilde kullandık. Bu sayede değişik kullanımları bir araya getirerek tasarımlarımızı renklendirebiliriz.

Ayrıca Pen tool’u diğer seçenekleriyle birlikte kullanarak bir şekil oluşturabilir ve sağ tuş tıklayarak bu şekli ileride Photoshop’ta kullanmak için kaydedebiliriz.

Umarım sizler için faydalı olmuştur. Bir başka makalemizde görüşmek üzere…

Bu makalemizde Photoshop kullanarak çok basit bir iki adımda kendi Rss ikonumuzu yapacağız. Bunun ihtiyacımız olan tek şey Photoshop. Hadi başlayalım!

(NOT: Sitemizde elimizden geldiğince Photoshop makaleleri yayınlıyoruz ama bir Photoshop kategorimiz bile yokmuş, ben de bir tane oluşturuverdim. Photoshop isimli kategorimizin ilk yazısı bu oluyor böylelikle :)
Önce Photoshop’ta 72px resolution değerine sahip 200*200px bir doküman açalım. Dokümanımızın arkaplan rengi beyaz olsun. Dokümanımızı açtıktan sonra şimdi Rss ikonumuzu oluşturacağız. Photoshop Araçlar bölmesinden Custom Shape aracını seçin. (U kısayolunu da kullanabilirsiniz) Burda aşağıdaki örnekte görünen şekli seçelim ve 200px’lik dokümanımızın yarısına gelecek şekilde şeklimizi çizelim. Şeklimizi çizerken Shift tuşuna basılı tutarak fare hareketi yaparsanız daha düzgün bir çizim elde edersiniz. :)

Rss ikonumuzun ana hattını elde etmiş olduk. Şimdi bu shape üzerinde bir değişiklik yapacağız. Şeklin bulunduğu layer seçili durumdayken üst menüden Layers >> Rasterize >> Layer bölümünü tıklıyoruz. Böylelikle şeklimiz bir Shape olmaktan çıkıp normal layer (katman) haline gelmiş oldu.

Bu aşamadan sonra elde ettiğimiz şekli belli bölgelerden keserek klasik Rss ikonunu elde edeceğiz. Ben kesim sırasında kılavuz çizgilerden faydalandım. Kılavuz çizgilerinizi çıkarabilmek için öncelikle Photoshop’ta Rulers alanını açmanız gerekiyor. İsterseniz Ctrl+R tuş kombinasyonuyla dilerseniz de View >> Rulers menüsünden bunu seçebilirsiniz. Böylelikle dokümanımızın dış hatlarında cetvelimiz görünecek. Cetvelin herhangi bir bölmesinden fareyle tutup istediğiniz kadar kılavuz çizgi elde edebilirsiniz. Ben aşağıda şeklimizi keseceğimiz kılavuz çizgileri hazırladım ve bu sayede keseceğim alanı daha iyi ayarlayabiliyorum. Siz de örnek resimden faydalanarak kılavuz çizgilerinizi oluşturabilirsiniz.

Şimdi kesim için uygun zemini hazırladık. Bu aşamadan sonra birçok teknik vasıtasıyla klasik Rss şeklimizi elde edebiliriz. Ben kılavuz çizgilerimden yararlanarak şeklim üzerinden almak istediğim alanı Polygonal Lasso Tool yardımıyla belirliyorum ve Ctrl+C tuşu ile kopyalıyorum. Daha sonra Ctrl+V ile yapıştırıp şeklimi elde etmiş oluyorum. Siz dilerseniz farklı yöntemler kullanabilirsiniz. Şekil üzerinde kılavuz çizgilerinden yararlanarak şeklin belli bir bölümünü keserek yine aynı şeyi elde etmiş olursunuz.

Elimizde artık klasik Rss ikonumuz var ve bununla istediğimiz şekli hazırlayabiliriz. Ben yuvarlık bir Rss butonum olmasını istiyorum ve örneğimi de bu yönde hazırladım. Şimdi dilerseniz klasik Rss butonumuzu yuvarlak bir şekil üzerine oturtalım ve ikonumuzu tamamlayalım.

Bunu yapabilmek için yeni bir layer oluşturuyoruz. Sonrasında Elliptical Marquee Tool ile Rss ikonumu saracak bir daire oluşturuyorum. Yine shift tuşuna basarak düzgün bir şekil elde ediyorum. Şeklimizin dolgu rengi hiç önemli değil.

Daire şeklini elde ettikten sonra bu şekle verilecek görünüm özelliklerini ayarlayacağız. Layer üzerinde iki kere tıklayıp Layer Properties penceresini açıyoruz. Burada önce Gradient ve daha sonrasında Stroke efektleri ile dairemizi güzelleştireceğiz. Vermiş olduğum efektler ve renk değerleri için aşağıdaki resimleri inceleyebilirsiniz.

Bu aşamadan sonra ilk etapta oluşturduğumuz Rss ikonumuzu yeni oluşturduğumuz dairenin üzerine çıkarıyoruz. Bunu layer penceresinde layer1′i layer2′nin üzerine fare ile sürükleyerek yapabilirsiniz. Böylelikle layer1′de bulunan Rss ikonumuz layer2′nin üzerinde görünmeye başlayacak. Bu kadar mı, tabi ki hayır. Biraz da Rss ikonumuzun görünümüyle oynuyoruz ve daha iyi bir görünüm elde ediyoruz. Bunun için vermiş olduğum değerler yine aynen ilk etapta yaptığımız gibi olacak. Dilerseniz sadece renk değerleriyle oynayabilir ya da farklı efektler verebilirsiniz.


Gördüğünüz gibi hiçbir ekstra araca ihtiyaç duymadan kendi Rss ikonumuzu oluşturduk. Siz dilerseniz ikonununuzu farklı zeminlere ve farklı renklere oturtabilir böylelikle daha değişik görünümler elde edebilirsiniz. Örnek PSD dosyasını da aşağıdaki bağlantıdan indirebilirsiniz. Umarım sizler için faydalı olmuştur.

ÖRNEK PSD DOSYASINI İNDİR

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.