Önizleme (Preview)
Öncelikle 850x800 px ölçülerinde ve yeni bir transparan belge açalım.
Rengini #494949 olarak ayarlayalım ve aşağıdaki efektleride uygulayarak devam edelim,
Arka Planımız aşağıdaki gibi olmalıdır, tabi ben anlatım kısa olsun diye arka planı ayrı bir resim, Cetvel ile eklenmiş çizgilerin olduğu resmi ayrı ayrı eklemektense ikisini birleştirmeyi seçtim, siz aşağıdaki seçimi klavyenizden CTRL+R tuşuna basarak açtıktan sonra ayarlayacaksınız, çizgileri çekmek için numaraların üstüne basılı tutup sürüklemeniz yeterlidir.
Şimdi yeni bir layer oluşturalım ve ismini Üst olarak adlandırdıktan sonra M tuşuna basalım ve Rectanqular Marquee Tool aracını seçelim çizgilere sadık kalarak yukarıdaki banner boşluğunu seçelim arkasından içini #2a2a2a rengi ile dolduralım,
Bu Üst isimli layerimize Blending Option ayarlarından 1 px stroke verelim,
Yeni bir layer daha oluşturup ismini Alt olarak belirledikten sonra alttaki boşluğuda seçelim ve oranında içini #2a2a2a rengi ile dolduralım, bu işlemde bittikten sonra üst isimli layerimizin altına yeni bir layer daha oluşturarak ismini Menü koyalım arkasından M tuşuna basalım ve Rectanqular Marquee Tool aracını seçelim ve aşağıdaki gibi seçim yaparak menü alanımızı oluşturalım onunda içini #2a2a2a rengi ile dolduralım,
Şimdi bu menü alanımızada Blending Option kısmından 1 px Stroke ekleyelim ve devam edelim arkasından bu menü alanımızı yeniden aşağıdaki değerlerde seçim yaparak üzerine sağ tıklayıp Layer via Cut diyelim,
Yukarıdaki işlem seçtiğimiz alanı yeni bir layer olarak layer alanımıza verecek ve ismini Menü olarak değiştirelim önceki Menü isimli layerimizi ise Menü Kenarlar olarak değiştirelim, arkasından alanımzıdaki çizgileri kaldıralım ve alanımız üzerinde daha rahat çalışabilmek için bu şekilde devam edeceğiz, aşağıda menü ve layer alanımızın son hali görünüyor.
Şimdi tüm layerlerimize Gradient Owerlay uygulayacağız, hangi değerlerin hangi layerlere verileceği aşağıda belirtildiği şekildedir.
Bu aşağıda uygulanan tüm Gradient renklerimizdir.
Üst isimli layerimizin Gradient değerleri,
Menü isimli layerimizin Gradient değerleri
Menü Kenarlar isimli layerimizin Gradient değerleri
Alt isimli layerimizin Gradient değerleri
Arka Plan isimli layerimizin Gradient değerleri
Genel Olarak şu sonucu elde etmiş olmalıyız
Devam edelim ve Menü isimli layerimizi CTRL+J ile çoğaltalım ve aşağıdaki gibi aşağıya çekerek hizalayalım,
Şimdi Gradient ayarlarına girelim ve aşağıdaki değiştirelimki üstteki layer ile uyumunu yakalayalım, arkasından DropShadow verelim,
Şimdi sıra geldi ilk butonumuza, ilk butonumuzu Ana Sayfa için hazırlayacağız, bunun için ilk olarak Froground rengimizi #242424 olarak ayrlayalım arkasından U tuşuna basalım Rounded Rectangle Tool aracını seçelim ve aşağıdaki gibi bir buton şekli çizelim bu layerimiz Üst isimli layerimizin bir altında olacak,
Şimdi bu butonumuza aşağıdaki ayarları vererek devam edelim,
Buton sonuç
Şimdi Arka Plan ve Alt isimli layerlerimiz hariç diğer layerlerimizin hepsini seçip CTRL+G ile Gruplayalım ve ismini Üst olarak değiştirelimki ilerleyen zamanlarda layerlerimiz ve gruplarımız çoğaldıkça aralarında kaybolmayalım, devam edelim ve diğer butonlarımızıda oluşturalım, bunun içinde Üst isimli grubumuzun içinde işlem yapacağız, bu butonlarımızı oluşturduktan sonrada bunlarıda Buton İsimleri adıyla gruplayacağız, buton deyince Ana Sayfa gibi butonlar oluşturmayacağız işi biraz daha kolaylaştırmak için sadece yazı ile butonlarımızı oluşturacağız, son hali aşağıda görülüyor sizde aynısını yapmalısınız,
Şimdi ANA SAYFA isimli yazımıza Drop Shadow verelim,
Şimdi ise Drop Shadow verdiğimiz ANA SAYFA isimli layerimize sağ tıklayarak Copy Layer Style diyelim ve diğer butonlarımıza sağ tıklayıp Paste Layer style diyerek Drop Shadow efektimizi onlarda kısa yoldan aktaralım, bu işlemde bitirdikten sonra ANA SAYFA dahil tüm buton isimlerimizi CTRL ile seçerek CTRL+G ile Buton İsimleri adıyla gruplayalım layerlerimizin bulunduğu alanımız biraz daha açılsın,
Şimdi Butonlarımızın arasına birer çizgi koyarak görünüşü kolaylaştıralım, bunun için üst isimli Grubumuzun içinde yeni bir layer oluşturup en üste taşıyalım ve ismini Çizgi1 olarak değiştirelim daha sonra M tuşuna basalım ve Rectanqular Marquee Tool aracını seçerek 1 px genişliğinde aşağıda göründüğü gibi bir çizgi çizelim ve içini beyaz renk ile dolduralım,
Bu çizgimize Motion Blur efektini aşağıdaki gibi verelim arkasından Outer Glow ekleyerek devam edelim,
Şimdi bu çizgimizi CTRL+J ile Dublicate edelim ismini Çizgi2 koyalım ve Dersler ile İletişim Butonlarımızın tam ortasına sürükleyelim arkasından CTRl+G ile bu çizgilerimizide Çizgiler ismi ile Gruplayalım ve aşağıda görüldüğü gibi kendi tasarımımıza uygun yazılarımızı girelim ve devamında yine aşağıdaki gibi
Drop Shadow vererek devam edelim,
Bu yazılarımızın altında bulunan Menü Copy isimli layerizede aşağıdaki gibi Drop Shadow ekleyelim ve Menümüzün diğer ayarlarına geçelim,
Şimdide Çizgilier isimli Grubumuzun üstüne yeni bir layer oluşturarak ismini Menü Maske koyalım ve aşağıdaki gibi Menü alanımızı kapsayacak şekilde bir seçim yaptıktan sonra rengini #242424 olarak belirleyelim, burada önemli olan Maske layerimizin tüm layerlerin üstünde olması gerektiğidir.
Bu layerimizin Fill değerini Sıfıra düşürelim ve Gradient Owerlay efekti ile devam edelim,
Aşağıdaki efektleri uygulayarak devam edelim,
Şimdi sıra geldi ışık efektlerimizi yapmaya bunun için öncelikle Üst isimli layerimizin altına Işık1 isminde yenibir layer oluşturduktan sonra CTRL+G ile Gruplayalım ve bu grubumuzunda ismini Işıklar koyalım, Dersin İkinci Bölümünü (Part 2) Buradan Takip Edebilirsiniz...
teşekkürler...
Rica ederim iyi çalışmalar.
harika
bende yapabilsem (:
paylaşım için teşekkürler
Çalışırsanız yapabilirsiniz, bu kadar zor değil aslında :)
Awesome project, Mel! Wow! I love your idea with new use of digi-images! Thank you for sharing tutorial, templates and your wonderful inspiration! more templates easy to download
hi
great collections of templates.thanks for sharing this collections .
Web Design New York
Web designers
Web site design
Great post and very well written, that will really help you to learn Web Design, web development and SEO Strategies to help businesses web design company . You can find out many useful information about web design, seo and his work by visiting his blog and I Just wanna say thanks you for the information you have shared. Web Design Company India
Great Post with good Templates..I will bookmark this page. It is really good....Memphis Web Design
Great tutorial helpful for web design Company
Helpful tutorial...Thanks for your great post.
web design Company
Nice post dude, keep it up.
Price India