Bu makalemizde Css3 Transform (dönüştürme) işlemlerinin ne olduğunu ve nasıl kullanıldığını anlatacağız. Rotate, Translate, Skew ve Scale gibi özelliklerden bahsedecek ve örneklerle kodlarımızın nasıl çalıştığını göreceğiz.

BAŞLAMADAN ÖNCE
Konumuza geçmeden önce biraz Css 2d Transform hakkında bilgi vermek istiyorum. Transform Türkçe karşılığı olarak Dönüştürme anlamına gelmektedir. Bu tanımdan da şu anlaşılıyor ki Css ile web elementlerimizi belli bir biçimden başka bir biçime dönüştürebiliyoruz. Örneğin Rotate ile web elementlerimizi belli bir derecede döndürebiliyoruz, Skale ile belli bir boyuta ölçekleyebiliyoruz. Bu özelliklerin hepsini makalemizin ilerleyen bölümlerinde tek tek anlatacağız.

Web elementlerinin dönüştürme işleminde temel alınan nokta X ve Y eksenlerinde (X ekseni yatay [horizontal] konumu Y ekseni dikey [vertical] konumu temsil etmektedir) verilen uygun değerlerdir. Şimdi dilerseniz kısaca bu özelliklere ve nasıl kullanılacağına geçelim.

(Hemen söylemeliyim ki makalemizde yapmış olduğumuz örnekleri Firefox 3.6, Safari 4.04, Opera 10.50 ve Google Chrome 4.0.249 tarayıcılar ile sorunsuzca görüntüleyebilirsiniz. Her bir örneğin içerisinde tarayıcılar için uyumlu Css kodunu da yazacağız)

ROTATE (Döndürme)
Rotate parametresi ile web ögelerini belli bir açı içerisinde döndürebiliyoruz. Bu açı bizim belirlediğimiz bir pozitif veya negatif değer olabilir. Şimdi aşağıda bir örnek uygulama yapalım ve sonucunu test edelim.

<div style="background:#2e83ff;
border:4px solid #9a9;
width:100px;
height:100px;
margin:100px;
-moz-transform: rotate(45deg); /* Firefox için */
-webkit-transform: rotate(45deg); /* Safari ve Google Chrome için */
-o-transform: rotate(45deg); /* Opera için */
"></div>

Yazılan kodun şimdi nasıl göründüğünü buradan test edelim.

Örnek kodumuzda bir div etiketine inline (dahili) olarak stil ataması yaptık. Önce arkaplan rengini sonra kenarlığını, en ve boy oranlarını tanımladık. Sonrasında döndürme için gerekli olan Css parametremizi yazdık. -moz-transform: rotate(45deg); şeklinde verdiğimiz atama ile alanı 45 derece döndürmüş olduk. Rotate sonrasında parantez içine web ögesini kaç derece döndürmek istiyorsak bunu xxdeg şeklinde yazıp parantezi kapatıyoruz. Dilerseniz bu değeri başına – işareti koyarak negatif olarakta verebilirsiniz. -webkit-transform: rotate(-45deg) gibi.

Aynı uygulamayı paragraf ve başlık etiketi gibi block etiketlerde de yapmamız mümkün. Kodlarımızda herhangi bir değişiklik olmadan aynı şekilde uygulayabiliriz. Hemen bir örnek kod daha yazalım ve test edelim.

<p style="background:#eee;
border:4px solid #9a9;
color:#666;
-moz-transform: rotate(40deg);
-webkit-transform: rotate(40deg);
-o-transform: rotate(40deg);
width:200px;
height:200px;
margin:100px;
display:block;
float:left;
padding:5px;
font:16px/24px arial, verdana, sans-serif;
">

p etiketi içine yazmış olduğumuz bu yazı 40 derece dönmüş olmalı...

</p>

Örneğimizin çalışır halini buradan test edebilirsiniz.

SCALE (Ölçekleme, Ölçeklendirme)
Transform işleminin bir başka parametresi de Scale. Scale Türkçemize Ölçekleme olarak çevrilebilir. Kısaca izah etmek gerekirse Css’de bir ögeyi X ve Y eksenlerinde belirli oranlarda boyutlamaya yarayan bir atamadır. Bu konuyu bir küçük örnek ile anlatmak daha doğru olacaktır.

<div style="
height:100px;
width:100px;
display:block;
float:left;
background:#2e83ff;
-moz-transform: scale(2, 4);
-webkit-transform: scale(2, 4);
-o-transform: scale(2, 4);
position:absolute;
top:200px;
left:200px;
">&nbsp;</div>

Örneğin çalışır halini buradan izleyebilirsiniz.

Örneğimizde kullandığımız kodda 100 piksel eninde ve 100 piksel boyunda bir div etiketini tanımladık. Scale(2, 4) şeklinde verdiğimiz değer sayesinde 100 piksellik yatay ekseni 2 katına büyüttük. Yani artık width değeri 200 piksel oldu. (100*2=200 piksel) Aynı şekilde Y ekseninde ise 4 kat bir büyüme istedik. Bu sayede height değeri ise 400 piksel oldu. (100*4=400 piksel)

Scale parametresini kullanırken verdiğimiz ilk değer X eksenini sonraki değer ise Y eksenini ifade etmekte. Dilersek sadece X veya sadece Y değerini de ölçekleyebiliriz. Bunun için scaleX(5) veya scaleY(2) gibi bir değer kullanmamız yeterli olacaktır.

Şayet hem X hem de Y ekseninde aynı oranda bir ölçekleme yapacaksak o zaman tek bir rakam değeri yazıyoruz. Örnek olarak scale(4); şeklinde bir kullanımda en ve boy olarak 4 katı bir büyüme elde ederiz.

TRANSLATE (Değiştirme, Dönüştürme)
Translate parametresi sayesinde bir web ögesinin X ve Y ekseninde yeniden konumlandırabiliyoruz. Yine örnek bir kod ile konumuzu açıklamaya çalışalım.

<div style="
height:50px;
width:50px;
display:block;
float:left;
background:#2e83ff;
-moz-transform: translate(200px, 300px);
-webkit-transform: translate(200px, 300px);
-o-transform: translate(200px, 300px);
position:absolute;">&nbsp;</div>

Verdiğimiz kodların çalıştığı sayfayı buradan izleyebilirsiniz.

Yapmış olduğumuz örnekte 50 piksel eninde ve 50 piksel boyundaki kutumuzu translate ile yeniden konumladık. Kutumuz başlangıçta X ve Y ekseninde (translate değeri vermeden önce) 0 pozisyonundaydı. Örnek kodda verdiğimiz translate(200px, 300px) değeri ile kutunun X ekseninde 200px ve Y ekseninde 300px yer değiştirmesini sağladık. Bir bakıma left:200px ve top:300px değeri vermiş gibi işlem yaptık.

Yine Scale’de olduğu gibi X ve Y eksenlerinde tekil olarakta atamalar yapabiliriz. Bunun için translateX(100px) veya translateY(10px) gibi değerler kullanmamız yeterli olacaktır.

Translate bu örnek ve anlatım ile sizlere biraz gereksiz bir parametre gibi görünebilir. Ancak bir web elementini yeniden konumlayabilmek ve belirli bir noktaya taşımak şimdi ne kadar gereksiz görünse de ileride Css ile animasyonların yaygınlaşmaya başladığı dönemlerde kıymeti daha da fazla anlaşılacaktır. Bir ögenin bir noktadan bir noktaya bir geçiş (transition) ile taşınması oldukça güzel bir animasyon etkisi oluşturabilir. (Kaldı ki Webkit tabanlı tarayıcılarda artık Css’de yaptığımız animasyonları test etmeye başladık)

SKEW (Eğrilik, Çarpıklık, Yamukluk)
Skew değerini Photoshop kullanıcıları iyi bileceklerdir. Skew ile bir web elementinin X ve Y eksenlerine belirli açılar verilebilir. Bu sayede o ögeye belli bir eğrilik, belli bir yamukluk açısı kazandırmış oluruz. Yine örneğimizi yazarak konumuzu açıklamaya çalışalım.

<div style="
height:75px;
width:75px;
display:block;
float:left;
background:#2e83ff;
-moz-transform: skew(45deg, -20deg);
-webkit-transform: skew(45deg, -20deg);
-o-transform: skew(45deg, -20deg);
position:absolute;
left:300px;
top:300px;
">
&nbsp;
</div>

Örneğimizi izlemek için buraya gözatabilirsiniz.

Örnek kod içinde 75 piksel eninde ve yine aynı boyda bir kutu oluşturduk. Bu kutunun X ekseninde 45 derecelik, Y ekseninde ise -20 derecelik bir açılaşma yapmasını istedik. Bu sayede kutumuzu ilk halinden daha çarpık bir hale getirdik. Yine Translate parametresinde olduğu gibi sadece X veya sadece Y ekseninde belirli açılar vermek mümkündür. skewX(45deg) gibi bir kullanım sadece X eksenine 45 derecelik açı verecektir.

Skew değeri atanarak oluşturulmuş basit bir küp görünümü için tıklayınız.

TÜM PARAMETRELERİN BİR ARADA TANIMLANMASI
Yukarıda kısa bir şekilde Transform özelliğinden bahsetmeye çalıştık. Css kodlarımızı yazarken her elemente ayrı ayrı parametre ve değer yazmaktansa hepsini birleştirerek bir yazım yapabiliriz.

-moz-transform: scale(1, 2) translate(50px, 100px) skew(45deg, -15deg) rotate(50deg);

Gördüğünüz gibi aralarında boşluk bırakarak tüm parametre ve değer atamalarını yaptık. Bu nedenle her bir tanım için ayrı ayrı kod yazmamıza gerek kalmadı. Css kodlarımızı oldukça kısaltmış olduk üstelik.

TARAYICI UYUMU İÇİN KODLARIN DEĞİŞİMİ
Aslına bakarsanız farklı tarayıcılar için farklı kodlar yazmıyoruz. Sadece parametrenin başına tarayıcının motorunu simgeleyici bir ön ek getiriyoruz.

Firefox için -moz, Webkit için -webkit ve Opera için -o öneklerini kullanmamız yeterli oluyor. Zaten makalemizdeki örnek kodlar içerisinde ziyadesiyle bunları kullandık. Okuyucularımızın kafasının karışmaması için bu açıklamayı yapmayı uygun buldum.

Peki ya Internet Explorer?
Bu özelliklerin tümünün kullanımı için sanıyorum IE 9 veya 10′un çıkmasını beklemek zorundayız :) Şaka bir yana bazı parametreler IE tarayıcılarda belli filter’lar ile yapılabiliyor. Ancak tüm özellikleri de kapsamıyor. IE’nin bir sonraki versiyonunda Css3′e desteğinin biraz daha iyi olmasını umut ediyoruz.

SON OLARAK…
Gerek kodlar gerekse de görsel ögelerle destekleyerek size Css3 2d Transforms konusunu anlatmaya çalıştım. Atladığım veya unuttuğum noktalar olmuşsa lütfen yorumlarınızla beni bilgilendiriniz. Bu makaleyi hazırlarken W3C’nin konu hakkındaki yayınlanmış doküman‘ından yararlandım. Umarım sizler için faydalı olmuştur.

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…

Günümüz web trendlerinin başında kullanıcılarınızla etkileşim ve iletişime geçmek geliyor. Bu gönderimizde sayfamıza jQuery yardımıyla bir iletişim form alanı koyacak ve ziyaretçinin tetiklemesiyle bu alanı gösterip geri kapatabilecek bir uygulama yapacağız. Dilerseniz hemen uygulamamıza geçelim.

UYGULAMA ÖNİZLEME UYGULAMAYI İNDİR (6kb)

1. ADIM: XHTML
Her zaman olduğu gibi öncelikle uygulamamızın Xhtml kodlarını yazarak başlıyoruz. Aşağıda yer alan kodları sayfamıza kaydedelim.

<div class="iletisimbuton">
<a href="#" class="ac">İLETİŞİM</a>
<a href="#" class="kapat" style="display: none">KAPAT</a>
</div>

<div id="iletisimformu">
<h2>İLETİŞİM FORMU </h2>
<form name="iletisim" method="post" action="">
<label>Adınız Soyadınız </label> <input type="text" name="isim" />
<label>E-Posta Adresiniz</label> <input type="text" name="e-posta" />
<label>Web Adresiniz</label> <input type="text" name="web" />
<label>Mesajınız</label> <textarea name="mesaj"></textarea>
<label></label><input type="submit" name="gonder" value="GÖNDER" />

</form>
</div>

Xhtml kodlarında ne gibi bir işlem yaptığımızı yazımızın sonunda bulabilirsiniz. Şimdi hemen örneğimize ait CSS kodlarını yazalım.

2. ADIM: CSS

.iletisimbuton {background:#81c8f4;
padding:6px;width:auto;
margin:50px 0px 0px 0px;
position:fixed;
left:0;
border:2px solid #6abee8;
}

a.ac {background:url(img/email_go.png) no-repeat;padding:0px 0px 0px 20px;color:#fff;text-decoration:none;font:bold 14px arial, verdana, helvetica, sans-serif;}
a.kapat {background:url(img/cross.png) no-repeat;padding:0px 0px 0px 20px;color:#1a79a8;text-decoration:none;font:bold 14px arial, verdana, helvetica, sans-serif;}

#iletisimformu {
width:350px;
background:#3ea2e1 url(img/formbg.gif) repeat-x;
padding:5px;
color:#fff;
border:2px solid #6abee8;
margin:90px 0px 0px -400px;
display:block;
position:fixed;top:0;left:0;
}

#iletisimformu h2 {

color:#fff;
font:18px/36px arial, verdana, helvetica, sans-serif;
padding:0px 0px 6px 6px;
margin:0;
}

#iletisimformu label {
float: left;
width: 100px;
font:12px arial, verdana, helvetica, sans-serif;
padding:4px;
clear:both;
margin:8px 2px 8px 2px;
}

#iletisimformu input{background:#fff;border:2px solid #999;margin:8px 2px 8px 2px;padding:4px}
#iletisimformu textarea{background:#fff;border:2px solid #999;margin:8px 2px 8px 2px;padding:4px;width:200px;height:100px}

#iletisimformu input:focus, #iletisimformu textarea:focus {border:2px solid #bee2f4;background:#f5f5f5}

3. ADIM: jQUERY
Bu adımda yazdığımız kodlara göre oluşan elemanları tetikleyecek jQuery kodlarını yazıyoruz.

  <script>
$(document).ready(function() {
	$(".iletisimbuton a").click(function() { //mouse in
		$("#iletisimformu").animate({ marginLeft: '0px' },100);

	});

	$("a.kapat").click(function() { //mouse in
		$("#iletisimformu").animate({ marginLeft: '-400px' },100);

	});
	$(".iletisimbuton a").click(function () {
		$(".iletisimbuton a").toggle();
	});
});

  </script>

İŞİN ÖZETİ
Gerekli tüm kodlarımızı yazdıktan sonra biraz işin teknik kısmından bahsetmek istiyorum. Şayet uygulamamızın örnek görünümünü incelediyseniz sayfamız üzerinde var olan bir iletişim butonu olduğunu görürsünüz. Bu iletişim butonu sayfamız üzerinde sabit durmakta ve üzerine tıklandığında ise iletişim formumuz görünmekte. İleşitim formunun sayfamızda görünmemesi için margin değerlerinde sol tarafa eksi margin değeri verdiğimizi görebilirsiniz. Yine aynı şekilde iletişim butonu üzerine tıklandığında ise iletişim formumuz kaybolmakta.

İşin Javascript/jQuery bölümüne gelirsek oluşturduğumuz iletişim butonu isimli ögeye fare ile tıklandığında iletişimformu isimli id’mizin görünmesini sağlıyoruz. Görünme olayını ise jQuery’nin Animate özelliğinden yararlanarak iletisimformu isimli id’nin soldaki margin değeri 0px olacak şekilde sağlıyoruz. Bu da demek oluyor ki iletisimbuton isimli ögeye tıklandığı zaman iletisimformu isimli id marginLeft değeri 0px olana kadar bir yol katedecek :)

İletişim butonun açık ve kapalı olarak değişebilmesi içinse jQuery’de Toggle olayından yararlanıyoruz. İlk tıklamadan sonra toggle olayına giren iletisimbuton sınıfı a.kapat sınıfına dönüşüyor. Kapat sınıfına yapılan tıklama tetiği ile 0px marginLeft değere gelen iletisimformu isimli id tekrar eski yerine dönüyor.

Bu anlatımla size biraz karışık gelebilir ama yazılanları okuyup sonra örneği gördüğünüzde herşey daha iyi anlaşılacaktır. Görüldüğü üzere uygulamamızda aşırı jQuery ve Css/Xhtml kodu kullanmadık. Sadece doğru oluşturduğumuz ögelere doğru değerler ve olay başlatımları vererek uygulamamızı tamamladık.

Aslına bakarsanız bir id seçiciye verilen eksi margin değerlerinin sonradan jQuery ile görünür olmasını sağlayarak tasarımda birçok alanda bunu kullanabiliriz. Bu sayede menüler, navigasyonlar ve sayfa içi bilgilendirmeler yapılabilir. Ben bu örneğimizde bir iletişim paneli yapmayı uygun gördüm. Siz de örnek kodlardan yola çıkarak kendi uygulamanızı yapabilirsiniz.

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

Öncelikle Illustrator üzerinde boş bir doküman açalım. Ben 640*480px bir doküman tercih ettim. Sonrasında araç paletinden Rectangle Tool’u (M) seçerek bir kare oluşturalım. Shift tuşuna basılı tutarak düzgün bir kare elde edelim.

Karemizi elde ettikten sonra çalışmamız seçiliyken üst menüden Effect >> 3D >> Extrude & Bevel‘i seçelim. Bu seçimi yaptıktan sonra karşımıza gelen pencerede nesnemize 3 boyut katacağız.

Yukarıda görmüş olduğunuz resimdeki özellikleri aynen çalışmanıza uygulayın. Uygulamadan sonra nesnenin 3 boyutlu hale geldiğini göreceksiniz. Tabi dilerseniz bu değerleri kendinize göre değiştirebilirsiniz. Bu aşamadan sonra yapacağımız şey 3 boyutlu nesnemizin derinlik veren bölgelerine efekt uygulayabilmek için seçimi parçalamak.

Yine nesnemiz seçiliyken üst menüden Object >> Expand Appearance seçeneğini tıklıyoruz. Böylelikle nesnemizin dilediğimiz bölümüne stil uygulayabileceğiz.

Sonrasında nesnemize derinlik veren bölgeleri tek tek seçerek Gradient Tool‘dan istediğimiz renk kombinasyonlarında Gradient’ler veriyoruz. Bu şekilde çalışmamızı tamamlıyoruz.

SEMBOLLER İLE AYNI ŞEYİ YAPMAK MÜMKÜN MÜ?

Evet, yukarıda anlatmış olduğumuz kısayolu izleyerek siz de bu etkiyi sembollerde elde edebilirsiniz. Yalnız dikkat etmeniz gereken nokta bir sembolü çalışmanıza dahil ettikten sonra sembol seçiliyken Edit Symbol bağlantısını tıklamanız. Böylece sembol üzerinde dilediğiniz gibi çalışabilirsiniz.

(Yine biraz uzun bir ipucu oldu, kusura bakmayın)

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…