Perfect Metal - Glass Logo ve Dark Wallpaper Yapımı

4 Mayıs 2009 Pazartesi

Bu dersin sadece logo kısmı hv-designs.co.uk sitesinden Türkçe'ye çevrilmiştir. Thanks hv-designs.co.uk.

Arkadaşlar nedense yorum sayfasından yorum yapılarak düşünceler belirtilmiyor bunun yerine bana mail olarak düşüncelerinizi yada sorularınızı iletiyorsunuz, bu düşüncelerinizi ve sorularınızı yorum sayfamızdan yaparsanız hem başkalarıda faydalanır hemde burada güzel bir ortam oluştururuz.

Bu arada çalışmalarınızı yine http://imageshack.us sitesine upload ederek paylaşırsanızda çok sevinirim :) Birde derslerden anında haberdar olmak isteyen arkadaşalrımız RSS bağlantımıız eklerlerse daha çok sevinirim. Hazırsanız başlayalım :) Not: Dersin .psd dosyasını dersin sonunda indirebilirsiniz.

Önizleme


İlk olarak yine ben 1680x1050 çözünürlük kullandığım için bu özelliklerde açtım ama sizlerde kendi çözünürlüğünüzde açabilirsiniz.



Gelen layerimizin ismini Arka Plan olarak değiştirdikten sonra aşağıdaki resimde görüldüğü gibi FG rengimizi #373737 BG rengimizi ise #181818 olarak değiştirdikten sonra Filter/Render/Clouds seçelim.







Şimdi Filter/Texture/Stainer Glass seçelim ve değerleri aşağıdaki gibi girelim



Devamında Filter/Noise/Add Noise ekleyelim ve değerleri yine aşağıdaki gibi girelim



Devam edelim ve bu seferde Filter/Render/Lighting Effects değerlerimizide görüldüğü gibi girelim.



Son olarak Filter/Sharpen/Sharpen ekleyelim ve aşağıdaki sonucu elde edelim.



Şimdi biraz işçilik yapmamız gerekiyor :D Yeni bir layer oluşturalım ve ismini Üst BG olarak değiştirelim devamında ise Klavyemizden P tuşuna basalım ve Pen Tool aracımızı seçelim arkasından aşağıdaki gibi bir şekil çizelim sonra çizdiğimiz bu şeklin içine sağ tıklayarak Make Selection diyelim, kabul ediyorum biraz dikkat istiyor ama emin olun kolay :)



Arkasından seçimi kaldırmadan Filter/Render/Clouds diyelim (Bu arada Daha önce ayarlamıştık FG #373737 BG ise #181818 renginde olmalı)



Şimdi CTRL+D ile seçimi kaldırabiliriz devamında ise yine Filter/Texture/Stainer Glass seçelim ve değerleri aşağıdaki gibi girelim.



Bu layerimizede Filter/Sharpen/Sharpen ekleyelim ve aşağıdaki sonucu elde edelim.



Devamında aşağıdaki efektleri vererek devam edelim.













Aşağıdaki sonucu elde etmiş olmalıyız.



Şimdi logomuza geçebiliriz bunun içinde yeni bir layer daha oluşturalım ve ismini Logo Merkez olarak değiştirelim, devamında klavyemizden M tuşuna basalım Elliptical Marquee Tool aracımız ile aşağıdaki gibi bir daire çizelim içinide #0090ff rengi ile dolduralım,



Şimdi CTRL+D ile seçimi kaldıralım ve aşağıdaki efektleri uygulayarak devam edelim.











Aşağıdaki sonucu elde etmiş olmalıyız.



Şimdi yeni bir layer daha oluşturalım ismini Metal Çerçeve olarak değiştirelim arkasından alttaki Merkez Logo isimli layerimizin altına taşıyalım daha sonra M tuşuna basalım ve aşağıdaki gibi bir alanı seçerek içini beyaz renk ile dolduralım.





Şimdi CTRL+D ile seçimi kaldıralım ve aşağıdaki efektleri uygulayarak devam edelim.





Burada Countour kutucuğunu tıklamanız yeterlidir çünkü default ayarları işimizi götüyor.










Aşağıdaki sonucu elde etmiş olmalıyız.



Aynı hızla devam edelim ve yeni bir layer daha arkasından Klavyemizden M tuşuna basalım Rectanqular Marquee Tool aracımızı aktif edelim devamında aşağıdaki gibi bir alanı seçelim ve içini beyaz renk ile dolduralım.



Bu layerimizi CTRL+J ile 3 kere daha çoğaltalım elimizde bu dört layer olacak sonra bu layerlerimizi aşağıdaki gibi hizalayalım.



Hizalama işleminden sonra bu dört layerimizi birleştireceğiz bunun için üstteki layere yani Layer 1 copy 3 isimli layerimize bir kere tıklayarak seçili hale getirdikten sonra hift tuşuna basılı tutarak Layer 1 isimli layerimize tıklarsak hepsi seçilmiş olur daha sonra CTRL+E ile birleştirelim (Merge) isminide Pencereler Yansıma olarak değiştirelim.





Devamında bu layerimize Filter/Distort/Spherize efektimizi uygulayalım



Şimdi CTRL+F ile 3 kere tekrar yaparak aşağıdaki sonucu elde edelim.



Şimdi layerimiz seçili iken CTRL+T ile Transform moduna geçelim ve aşağıdaki gibi hizalayalım.



Enter ile onaylayalım ve Opacity değerini %10 yapalım.

Şimdi yeni bir layer daha oluşturalım ve ismini Daire Yansıma 1 olarak değiştirelim, arkasından klavyemizden D tuşuna basalım ve renk değerlerini sıfırlayalım daha sonra G tuşuna basarak Gradient Tool aracımızı aktif edelim ve aşağıdaki gibi mausumuzla dairemizin alt köşesinden üst köşesine doğru paralel hizalamada ile bir kere sürükleyelim.





Daha sonra bu Daire Yansıma 1 isimli layerimi CTRL+J ile iki kere çoğaltalım ve CTRL+T ile boyutunu artırarak farklı bölgeye hizalayalım benim hizalama şeklim aşağıda görülüyor devamında güzel haber final :D



Arkadaşlarımız derslerimin çok uzun olduğunu söyledikleri için finaldeki Metal Çerçeve üzerindeki çizgiler ve yazıların anlatımını buraya eklemedim, uzun ve detaylı anlatmamın sebebi PS ye yeni başlayan arkadaşlarımızı düşündüğüm içindir, aksi halde bende bir çırpıda sadece gerekli detayları vererek anlatmayı tercih ederim ama bu sefer yeni arkadaşlarımız faydalanamazlardı, neyse artık çizgiler ve yazıların anlatımını daha sonra başka bir derste yine bu Wallpaper çalışmamızı kullanarak anlatmaya çalışırım tabi işin bu kısmı ile ilgili talep gelirse, gelmezse başka derslere bakıcaz artık :D



Final


Dersin .psd dosyasını buradan indirebilirsiniz.

Devamını okuyun...

Metalik Menü (Navigation) Tasarımı

Bu dersimizde web siteleriniz için size yol gösterici olacak bir menü tasarımı hazırladım, fakat kodlama kısmını malesef bundada anlatmayacağım öncelikle PS alt yapını öğrenmelisiniz diye düşünüyorum akabinde ilerleyen zamanlarda bu çalışmalaırmızın PS de bölümlenmesi ve CSS ile Html kodlarının nasıl işlendiğini anlatmaya çalışacağım, düşüncelerinizi derslerin sonunda yorum sayfasından paylaşırsanız sevinirim ayrıca çalışmalarınızı bititrdikten sonrada imageshack.us sitesine upload ederek burada paylaşırsanız dahada sevinirim, hadi başlayalım :)

Önizleme


Hazırsanız başlayalım öncelikle 500x300 px, 72 Resolution özelliklerinde yeni bir belge açalım bu arka planımız olacak ve aşağıdaki gibi Gradient Owerlay efektini verelim, ismini Background olarak değiştirelim





Backgorund


Şimdi U tuşuna basalım ve Rounded Rectangle Tool aracımızı seçelim arkasından aşağıdaki gibi bir şekil çizelim, ismini Menü BG olarak değiştirelim,



Aşağıdaki efektleri uygulayarak devam edelim,







Aşağıdaki sonucu elde etmiş olmalıyız.



Şimdi yeni bir layer oluşturalım ismini Menü Buton BG olarak değiştirelim ve klavyemizden M tuşuna basarak Rectanqular Marquee Tool Aracımızı seçelim ve aşağıdaki gibi bir seçim yapalım içini beyaz renkle dolduralım,



Aşağıdaki efektleri uygulayarak devam edelim,







Şimdi Polygonal Lasso Tool aracımız ile aşağıda görülen alanı seçelim ve içini beyaz renkle dolduralım, ismini Menü Kenar Sağ olarak değiştirelim,



Daha sonra aşağıdaki ayarları ile Gradient Efektimizi uygulayalım,





Aşağıdaki sonucu elde etmiş olmalıyız,



Bu Menü Kenar Sağ layerimizi CTRL+J ile çoğaltalım ve Edit/Transform/Rotate 90 CCW ile ters çevirelim ve diğer kenara düzgünce hizalayalım,



Aşağıdaki sonucu elde etmiş olmalıyız.



Şimdi ise yeni bir layer daha oluşturalım ve ismini Çizgi 1 olarak değiştirelim, daha sonra M tuşuna basalım ve Rectanqular Marquee Tool aracımız ile aşağıdaki gibi bir seçim yapalım ve içini herhangi bir renkle dolduralım (Gradient Owerlay uygulayacağımız için rengin önemi yok) renkle dolduralım arkasından aşağıda görüldüğü gibi Gradient Owerlay efektini verelim,







Aşağıdaki sonucu elde etmiş olmalıyız.



Şimdi bu Çizgi 1 lisimli layerimizi 4 adet daha çoğaltalım toplamda beş adet olacak ve aşağıdaki gibi 5 er pixel aralıklarla hizalayalım, daha sonra bu beş adet layerimizi CTRL+G ile Gruplayalım ve ismini Menü Çizgiler olarak değiştirelim,



Aşağıdaki sonucu elde etmiş olmalıyız.





Şimdi buradan indireceğiniz Customize Shape ile aşağıdaki gibi düzgünce ekleyelim arka plan rengi siyah.



Sıra geldi butonlarımızın isimlerini vermeye, ilk olarak aşağıdaki gibi beyaz bir yazı yazalım, (Site Menü) daha sonra layer menüsünden opacity değerini 15% e düşürelim,



Daha sonra bu site menü isimli layerimizi CTRL+J ile çoğaltalım ve rengini #212121 olarak değiştirelim arkasından Opacity değerini %15 ten 100% e çıkaralım, yine bu işlemin arkasından bu layerimizi yukarı ok tuşu ile bir kere yukarı taşıyalım (1 px) aşağıdaki sonucu elde etmiş olmalıyız.



Şimdi bu iki yazı layerimizi CTRl+E ile birleştirelim (Merge) ve arkasından aynı işlemlerle aşağıdaki yazılarımızı girelim ve bu dersimizide bitirelim, Final Aşağıda.

Arkadaşlar dediğim gibi yorumalarınız ve önerileriniz hazırlayacağım dersler konusunda belirleyici etkendir, sizler fikirlerinizi belirtirseniz bende o doğrultuda sizlere yardımcı olmaya çalışırım, ayrıca buradaki derslerimizdeki çalışmalarınızı imageshack.us sitesine upload edip bizlerle paylaşırsanız ayrıca seviniriz herkese kolay gelsin iyi çalışmalar,

Not: Bu gibi Web tasarımları ile ilgili hazırladığım dersleri daha sonra kodları ile ile birlikte sitemize nasıl entegre edeceğimizide anlatmaya çalışacağım.

Final


Devamını okuyun...