Bir buton oluşturma

Bu derste Firefox tarayıcılarında kullanılan butonun aynısını yapmaya çalışacağız.

300×300 boyutunda yeni bir sayfa açın ve arkaplanı beyaz olsun.

Yeni bir layer oluşturun ve "Rounded Rectangle Tool" ( ) ile 145 px x 30 px büyüklüğünde bir dörtgen çizin.

Efekt ayarlarını açın ve aşağıdaki ayarları yapın:

[center]

Yeni bir layer daha oluşturun ve zoom yaparak sayfayı %300 büyütün.

Eyedropper aracı ile dörtgenin köşe rengini seçin ve "Pencil Tool" ( ) ile 1 px fırça ayarı ile buton içine dikey bir çizgi yapın.

Evet, butonumuz şimdi bitmiş durumda. Şimdi bazı özelleştirmeler yapacağım.

Yeni bir layer oluşturun ve sahneye Firefox ikonu import edin, Ctrl + T ile boyutunu ayarlayın ve opacity ayarını %60 yapın.

Şimdi text aracını seçin ve "Get Firefox" yazın. (Ben Amazon isimli fontu kullanıyorum.) Efekt ayarlarını açın ve aşağıdaki gibi ayarlayın:

İşte sonuç:

Şimdi yeni bir layer oluşturun ve Shape aracını seçin, sonra aşağıdaki ok simgesini bulun.

Ve onu sahneye çizin, yönü aşağı olarak ayarlayın. Sonra efekt panelinden aşağıdaki ayarlamaları yapın.

Bitti. Şimdi "Get Firefox" yazılı butonumuz hazır.

NOT: Eski eklediğim derslerden birini tekrar düzenledim.

 

Rüya Resim Efekti

Basit Bir Rüya Resim Efekti yapalım.

1-) Resmimizi Açalım File>Open veya Ctrl+O ile açabiliriz

2-) Resmimizi Ctrl+J Yada Layer> Duplicate Layer yaparak çoğaltınız.

3-)Çoğalttığımız layerı Image> Adjustments> Threshold Tıklayıp Değerini 81 Yapınız.

4-)Aynı Layerin Modunu Overlay Yapınız

5-) Aynı Layeri Filter> Blur> Gaussian Blur İşleminin Değerini 8 olarak uygulayın.

6-) Opactiy Değerini 63 yapın Ve Resminizi İnceleyebilirsiniz.

Sonuç:

Aynı konuda bir video ders için tıklayınız.

 

Web 2.0 Header Menü Yapımı

Bu dersimizde Web 2.0 Header Menü yapacağız.İlk olarak 800*200 boyutunda bir sayfa açalım.Yeni bir layer açıp Rectangular Marquee Tool[b] aracı ile [b]#002C28 renginde bir dikdörtgen çizelim.

Ardından bu dikdörgene Layer Style(Layer > Layer Style) ile Inner Shadowve Gradient Overlay efektlerini ekliyelim.

Efektleri uyguladıktan sonra Rounded Rectangle Tool aracı ile aynı renkte aşağıdaki gibi çizelim.

Ardından çizimimize Layer Style(Layer > Layer Style) ile Inner Shadow, Inner Glow ve Gradient Overlay efektlerini ekliyoruz.

Şimdi istedğimiz gibi menümüzü doldurabiliriz.

Bu dersimiz burda sona erdi başka bir derste buluşmak üzere esen kalın…

 

Renkli Çizgiler

Merhaba Arkadaşlar…

500×500 boyutlarında arkaplanı siyah yeni bir sayfa açarak dersimize başlayalım.

Background a sag tıklayarak kopyalıyoruz (Duplicate).

Kopyaladıgımız layer üzerinde yapacagız bu işlemi.

Rectangular Marque TooL (m) Seçiyoruz ve Ortaya Bir Dikdörtgen Çiziyoruz..
Sonra Filter-Stylize-Tiles.. Yapıyoruz.. Çıkan Yere 10-1 yapıyoruz..

Karşımıza Böyle Çizgiler çıkıcak sizde köşeleri olabilir köşeleri siliyoruz.

Filter-Blur-Motion Blur Yapıyoruz.. Angle 90 , Distance 60 Veriyoruz..

Çizgiler Layerına Tıklıyoruz ve Ctrl+T basıyoruz .Sag tıklayıp warp ı seçiyoruz ve custum u Flag yapıyoruz. Çizgilerimiz Flag şeklini alıcaktır..

Sonra Çizgiler Layerına Sağ tık Yapıyoruz.. Blending Options Yapıyoruz.. Gradient Overlay Seçip aşagıdaki gibi ayarlıyoruz.

Ve işte Mükmemmel sonucumuz..Ben sade bir şekilde yaptım siz istediginiz şekilde yapabilirsiniz..

Başka Bir Derste Görüşmek Üzere Kolay Gelsin…

 

Resimlere Bozulma Etkisi Vermek.

Yapaçağımız çalışmanın örnek resmi aşağıda yer almaktadır.

---

Kullanacağımız resimleri ilk önce photoshopta açıyoruz.

Ctrl + j kombinasyonunu kullanarak background layerımızın bir adet kopyasını oluşturuyoruz.

Kopya layerımızın layer modunu Soft Light olarak değiştiriyoruz.

Kullanacağımız diğer resmi mouse yardımıyla sürüklüyerek diğer resmimizin üzerine bırakıyoruz.
Ctrl + T kombinasyonunu kullanarak transform özelliğini etkin kılıp resmimizi çevirebiliriz.Tabi kullanacağımız resmi diğer resmin yüzüne doğru getirin.

Araç menüsünden Eraser Tool seçeneğini seçelim ardından gereksiz yerleri silelim.

Bu layerın layer modunu Overlay olarak değiştiriyoruz.

Ardından kopya orjinal resmimize dönüyoruz layer bölümünde en üstte olması gerek.Image açılır menüsü altındaki önce Adjustments sonra
Desaturate seçenegini seçiyoruz böylelikle resmimiz siyah beyaz görünümü alıyor.

Şimdi ise layer 1 yani kullandığımız diğer resmi biraz keskinleştirmek yani sertleştircez biraz.Filter açılır menüsü altındaki önce Sharben sonra gene Sharben

Sanalkurs.Net adlı resim layerımızın bir adet kopyasını oluşturuyoruz layer modunu Linear Light olarak değiştiriyoruz ve Opacity değerini 30 indiriyoruz. Brun Tool ile resmimizi biraz koyulastırabiliriz.Bakcground resmimizin bir adet kopyasını oluşturuyoruz ardından en üstte tasıyoruz layer bölümünde ve opacity değerini 10 indiriyoruz.Foreground rengini beyaz yaptıktan sonra brush tool ile uygun bir fırça seçip yüzü boyuyoruz.

 

Değişik bir buton çalışması

Bu dersimizde güzel bir buton yapmayı öğreneceğiz. Bu farklı buton çalışması ile web sayfalarınıza ayrı bir hava katabilirsiniz.

Yeni bir sayfa açalım background rengimiz açık turuncu olacak.

Filter -> Render -> Lighthing Effect:

Inner shadow:

Inner shadow uyguladuktan sonra resmimizin son hali:

Yeni bir layer açıp Line Tool araçı ile çizgi çiziyoruz 1 px. (blending mode – color dodge ve opacity 30)

Yeni bir layer açıyoruz.Rectangular Marquee Tool ile bir alan seçiyoruz seçtiğimiz bu alanı beyaz renkle boyuyoruz opacity değerini 12 yapıyoruz.

Drop Shadow uygulayacağız.

 

Resim giydirilmiş 3 boyutlu bir kutu yapalım

Bu dersimizde 3 boyutlu görüntüye sahip küp şeklinde bir kutu yapmaya çalışacağız. Daha sonra da bu kutuya resim giydireceğiz.

Yeni bir sayfa açalım.

Yeni bir layer oluşturalım.

Rectangular Marquee Tool(M) aracıyla bir kare çizelim. Ve istediğimiz bir renkle boyuyalım.

Boyadığımız kare layerının bir kopyasını oluşturalım duplicate layer ediyoruz.Kopya layerımız seçili iken
Ctrl + T basalım Ctrl tusuna basılı tutarak aşağıdaki perspektif görüntüsünü yakalamaya çalışın.

İlk layerımızın bir kopyasını daha oluşturalı maynı yolla onada persfektif etkisi katalım.

İlk layerın bir kopyasını daha oluşturup aynı yolla aşağıdaki persfektik etkisini resme katıyoruz.

Persfektif etkisi yarattığımız görüntülere Levels ve Hue/Saturation uyguluyarak güzel sonuçşar elde edebiliriz.

 

Photoshopta Kum Hazırlama

Öncelikle açmış olduğum sayfayı (A9834F) -> bu renk koduyla boyuyoruz sonra Filter -> Noise -> Add Noise tıklayıp aşadıdaki değerleri giriyoruz.

Böylelikle Text ile üzerine iştediğimiz yazızı yazıyoruz ve aynı şekilde kum dokusunu text uyguluyoruz.

Yazı layerımızın blending ayarlarına girelim bunun için yazı layerımız seçili iken sağ tıklayıp blending options diyoruz.
İnner Shadow, İnner Glow ve Satin efektleriyle oynayarak yazıya parmakla yazılmış hissi verebilirsiniz.

 

Flashta MovieClip Buton Yapmak

Öncelikle Flash dokümanınıza yeni bir symbol ekleyin (Ctrl+F8). New Symbol penceresinden Movie clip seçimini yapın ve symbole menu_mc ismini verin.

MovieClip içerisinde oluşturacağımız layer yapısı oldukça önemlidir. MovieClip buton yaparken aşağıdaki gibi bir layer yapısı kullanıyoruz.

Toplam 5 adet layer ekleyerek yukarıdan aşağıya doğru şu şekilde isimlendirin: actions, labels, hit_alani, yazi, menu_bg…

İlk olarak labels layerında 5. ve 20. karelere blank keyframe (anahtar kare) ekleyin (F7) ve 30. kareye kadar uzatın. Daha sonra sırasıyla şu isimleri verin. 1. up, 5. over, 20. out…

Anahtar kareye isim vermek için anahtar kareyi seçerek properties panelini kullanın.

menu_bg katmanına menünüzün arka planını oluşturacak dikdörtgeni çizin ve yazı katmanına da butonunuzun üzerinde yazacak yazıyı ekleyin.

Yazı layerını 30. frame kadar uzatın. menu_bg layerında ise 5.frameden başlayıp 15. framede biten bir hareket oluşturun ve aynı hareketin tersini 20.frameden başlatarak 30.framede bitirin.

Aynı hareketin tersini yaratmak için hareketin tamamını timeline da kopyalayıp sağ klik Reverse Frames seçimini kullanın.

Butonu tamamlamak için actions katmanında 1. anahtar kare ve over konumundaki hareketin sona erdiği kareye (örneğimizde 15.kare) aşağıdaki actions komutunu ekleyin.

stop();

MovieClip içerisindeki işlemlerimizi tamamladık. MovieClipin son hali aşağıdaki gibi olmalıdır.

Burada yaratmış olduğumuz hit_alani layerını bu örnekte kullanmamıza gerek yok. Çünkü butonumuz zaten kendi hit alanını oluşturuyor. Eğer sizin yaptığınız tasarım ile hit alanı farklı olacak ise hit_alani layerına hit alanını çizin ve dolgu renginin Alpha değerini 0 yapın.

MovieClip ile işimizi tamamladıktan sonra sahnemize geri dönerek yapmış olduğunuz MovieClipi saheye ekleyin.

MovieClipi seçerek Actions paneline aşağıdaki kodları yazın.

on(rollOver){
gotoAndPlay("over");
}
on(rollOut){
gotoAndPlay("out");
}
on(release){
getURL("http://www.webders.com");
}

İşte hepsi bu kadar 🙂

 

Resim üzerine yazı yazmak.

Öncelikle sayfaya resmimizi ekliyoruz.

Insert > Image ( Ctrl + Alt + I ) yolunu izliyoruz.

Şimdi yeni bir layer eklememiz gerekiyor.

Insert > Layout Objects > Layer yolunuz izliyoruz.
Ve boyutlarını sayfaya eklediğimiz resme göre ayarlıyoruz.

Yazımızı yazıyoruz

Ve sayfamızı kaydediyoruz sonuç aşağıdaki gibidir.

Arkadaşlar Layer yapımında zorlanacaklar olursa daha önce yazılmış olan derse buradan bakabilirler.