Tasarım Yap
Bu dersimizde adım adım web sitesi yapacağız, PS de görsel aşamasından tutun, bölümlemesi, CSS ve html kodları dahil herşeyini anlatmaya çalışıcam tabi vaktim olduğu sürece, şimdilik PS kısmını anlattım sonraki aşamada nasıl bölümleyeceğimizi, PS de nasıl export edeceğimizi dahasında Dreamweaver ile nasıl işleyeceğimizi anlatıcam, adresimizi sık kullanılanlarınıza alırsanız ve takip ederseniz tüm gelişmelerden haberdar olabilirsiniz.Ö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,
Part 2
Ş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.
Işık1 isimli layerimizin seçili olduğuna emin olduktan sonra M tuşuna basarak Eliptical Marquee Tool aracını seçelim ve Shift tuşuna basılı tutarak aşağıdaki gibi küçük bir daire çizelim arkasından içini beyaz renkle dolduralım ve yarısını Üst isimli layerimizin altına gelecek şekilde hizalayalım,
Bu işlemimizden sonra Radius değeri 3 px olan Gaussian Blur ve arkasından Outer Glow efekti vereceğiz,
Aşağıdaki sonucu elde etmeliyiz,
Sıra geldi Ana Sayfa isimli butonumuz için bir ışık yapmaya bunun için yine ışıklar Grubumuzun içinde yeni bir layer oluşturalım ve ismini Ana Sayfa Işık koyalım bu layerimizin seçili olduğuna emin olduktan sonra P tuşuna basarak Peen Toll aracımızı seçelim ve aşağıdaki şekli çizelim, arkasından ayine aşağıda görülen Gradient Efekti ayarlarını uygulayalım,
Bu işlemlerimizde bittikten sonra ANA SAYFA Butonumuzun altına düzgünce hizalayalım,
Altınada uyumlu olacak şekilde güzel bir Glow Efekti ile Ana Sayfa Butonu olayının sonlarına yaklaşalım, bunun içinde yine yeni bir layer oluşturalım bunun isminide Ana Sayfa Glow koyalım ve bu layerimizde seçili iken Eliptical Marquee Tool ile aşağıdaki gibi bir seçim yapalım içinide #0096ff rengi ile dolduralım,
Şimdi bu Rectanqular Marquee Tool aracımız ile aşağıdaki gibi dairemizi seçelim, arkasından CTRL+Shift+i ile seçimi ters çevirelim ve Delete ile diğer alanı silelim,
Devamında Gaussian Blur efektimizi vererek devam edelim,
Ana Sayfa Butonumuzun altındaki ışık ve Glow'un son hali böyle olmalıdır,
Şimdi Üst isimli layerimizede Drop Shadow efektinide aşağıdaki gibi vererek devam edelim,
Menü Final
Butonlarımızı biraz daha görselleştirmek için U tuşuna basıp Customize Shapes özelliğini aktif ettikten sonra aşağıdaki gibi seçimimizi yapıp Buton isimlerimizin hemen yanına birtane ekliyoruz, (Not: Foregorund rengi Beyaz)
Şimdi bu layerimize Gradient Owerlay uygulayacağız, değerler aşağıdaki gibidir,
Birinci ikonumuzun işlemi burada bitiyor şimdi bu ikonlarımızı 4 adet kopyaladıktan sonra diğer Butonlarımızın yanınada birertane koyuyoruz,
Evet artık Menü ve Arka Plan işlemimizin sonuna geldik buralara son olarak bir pattern ekleyerek görselliği biraz daha arttırmış olacağız, Pattern ekleyeceğimiz Layer isimleri (Üst-Alt-ArkaPlan) resim aşağıda.
Arkadaşlar sıra geldi logomuza ama siz kendinize göre logo yapacağınız için daha doğrusu burada anlattığım logoyu kullanmayacağınız için benim basitçe yaptığım logoyu büyük ihtimal siz bunu kullanmayacaksınız o bakımdan bunu anlatmak zaman kaybı olacağı için bunun yerine bundan sonraki aşamaları anlatmak heralde daha uygun olur,
Neyse devam edelim artık en önemli kısım olan temanın içeriğini oluşturmaya geldi sıra ama emin olun burası daha basit, bu temanın aynısını yapmak için öncelikle aşağıdaki resimde görülen seçimlerin aynısını yapmalısınız, bu seçimler bize düzgün içerik oluşturmamızı sağlayacak, bu çizimleri oluşturmak için yine klavyemizde CTRL+R ile Cetvelimizi açıyoruz daha sonra numaralı alana mausumuzun sol tuşu ile basılı tutarak çekiyoruz ve istediğimiz alana geldiğinde bırakıyoruz kaldırırkende tam tersini yapıyorsunuz Not: Bundan sonraki aşamaları kısa kısa geçicem ama anlaşılır şekilde olacak dikkatle bakmanız yeterli olacaktır, özellikle aşağıdaki seçimde oklarla gösterilen yerlere dikkat ederek Cetvel çizgilerimizi bırakırsak bir sorun olmaz
Bunun için öncelikle layer alanımızda en üstte olacak şekilde bir Gurp oluşturuyoruz ve ismini Orta Alan olarak değiştiriyoruz, aşağıda gördüğünüz her seçili alan için gurubumuz içinde ayrı ayrı layer oluşturarak seçimimizi yapalım ve içeriğini #272D30 rengi ile dolduralım, Not: Seçimimizi M tuşuna basarak Rectanqular Marquee Tool aracımız ile, içinin rengini doldurmak için ise G tuşuna basarak Paint Bucket Tool aracımız ile yapıyoruz, aşağıdaki grafikte seçenekler açıkca görülüyor.
Bu işlemlerimizi tamamladıksa son layerlerimizin içeriğini düzenlemeye sıra geldi demektir, ilk olarak Cetvel ile eklediğimiz tüm çizgilerimizi kaldırıyoruzki görüş alanımız açılsın daha sonra Sol Üst Alan isimli genel bilgi alanımızı düzenleyeceğiz, bunun için ise Sol Üst Alan isimli layerimiz hariç diğer layerlerimizi kapatıyoruz sadece Sol Üst Alan isimli layerimiz aktif kalıyor, bu aktif layerimiz seçili iken CTRL tuşuna basılı tutarak üzerine birkere mausumuzun sol tuşu ile tıklıyoruz ve böylelikle layerimizin alanını seçmiş oluyoruz, artık çalışmanının bundan kısmı hem daha kolay hemde daha ince ayarlardan oluşacak, en keyifli kısmıda bu içeriği düzenleme kısmı sanıyorum sıkılmayacaksınız daha doğrusu umuyorum
Şimdi Menüden Select/Modify/Contract seçiyoruz değeri 2 px verip ok deyim çıkıyoruz, seçili alanımz 2 px içeri girmiş oldu, bu alanımızı Stroke olarak kullanabilmemiz için Klavyemizden Delete tuşuna basarak içini siliyoruz sonuç aşağıdaki gibi olmalıdır.
Bu işlemimizi diğer layerlerimizede uyguluyoruz sonuç aşağıdaki gibi olacak,
Şimdi burada Stroke çizgileri birbirine yapışmış olduğundan dolayı çizgilerde uyumsuzluk görünüyor bunu aşmak için her layerimize ayrı ayrı küçük birer işlem yapmamız gerekiyor ilk olarak yapacağımız işlem aşağıdaki resimde okla görüle layerlerimizi CTRL tuşuna basılı tutarak seçili hale getirdikten sonra CTRL+T tuş kombinasyonu ile transform moduna geçelim ve yine aşağıdaki resimde görülen yerden tutup 1 px sağ tarafa çekelim,
Bunu yaptıktan sonra kendi aralarındada (Her Layer İçin) aynı işlemi tekrarlamamız gerekiyor, ben bir örnek olsun diye Arama Kutusu Alanınıda resimledim, aşağıda görülüyor,
Şimdi ben sonucu aşağıya koyuyorum sizde yukarıdaki işlemleri tekrarlayarak aşağıdaki sonucu elde edebilirsiniz,
Bu oluşturduğumuz çerçevelere biraz düzen verelim bunun içinde en alt sıradaki Sol Üst Alan isimli layerimizi seçip aşağıdaki efektleri uygulayarak devam edelim,
Bu sonucu elde etmiş olmalıyız
Diğer layerlerimizle tek tek çalışmak yerine bu layerimize sağ tıklayıp Copy Layer Style dedikten sonra diğer layerlerimizin hepsini CTRL tuşu yardımı ile seçili hale getirdikten sonra her hangi birisinin üzerine sağ tıklayıp Paste Layer Style diyelim böylece bu efektlerimizi hepsine bir seferde eklemiş olduk, sonuç aşağıda,
Sıra geldi site içi arama alanımızı yapmaya bunun içinde layerlerimizin en üstünde yeni bir Grup oluşturup ismini Arama Kutusu olarak değiştirelim, daha sonra U tuşuna basalım aşağıdaki resimde görüldüğü gibi Rounded Rectangle Tool aracımızı seçelim.
Part 3
Sıra geldi site içi arama alanımızı yapmaya bunun içinde layerlerimizin en üstünde yeni bir Grup oluşturup ismini Arama Kutusu olarak değiştirelim, daha sonra U tuşuna basalım aşağıdaki resimde görüldüğü gibi Rounded Rectangle Tool aracımızı seçelim,
Ve arama kutusu alanımıza aşağıdaki gibi bir seçim yapalım,
Hemen arkasından Bevel efekti verelim ve Fill değerini 75'e düşürelim
Arkasından bu seçili alanımızın içine yazımızı yazalım, (Tahoma, 12 pt - Renk: #333b3f) daha sonra resimde görüldüğü gibi ve daha önce menü çizgileri yaparken izlediğimiz yolla yanınada bir çizgi ekleyelim,
Custom Shapes'lerin içinde olan aramayı temsil eden büyüteç Shape'sini seçiyoruz ve aşağıdaki alana ekliyoruz, tabi öncesinde U tuşuna basıp Custom Shapes Toll aracını seçmeyi unutmuyoruz
Arkasından hemen altındaki Video alanımız için yeni bir Grup daha oluşturalım ismide videolar koyalım ve yukarıda verdiğim The Monkey isimli AE çalışmamdan eklediğim resmi ekleyelim ve aşağıdaki gibi hizalayalım,
Bu işlemide gerçekleştirdikten sonra bu layerimize Edit/Stroke efektini aşağıdaki gibi verelim (Stroke Rengi #0E1011)
Sonuç
Şimdi diğer iki video resmimizide aşağıya ekleyeceğiz ama öncesinde bu resimlerimize bir taban hazırlayacağız bunun için yeni bir layer oluşturup ismini Videolar BG verelim daha sonra aşağıdaki gibi bir alan seçip içini #0E1011 rengi ile dolduralım,
Bu layerimize aşağıdaki efektlerimizide uygulayarak devam edelim
Şimdide yine yukarıda vermiş olduğum diğer çalışmalarımdan aldığım diğer iki resmide bu alanımıza aşağıdaki gibi ekleyip hizalayalım, aşağıdaki Cetvel çizgilerine dikkat edelim bu resimlerimizi pikseli pikseline doğru orantılamamız için gerekli bir işlem ama sizin gözünüz çok sağlamsa göz tutarı yapabilirsiniz.
Bu işlemde bittikten sonra bu resimlerimizden birisine aşağıdaki gibi Bevel and Options ayarlarından Stroke efekti verelim,
Şimdi bu layerimize sağ tıklayıp Copy Layer Style dedikten sonra diğer resmimizede sağ tıklayıp Paste Layer Style dersek aşağıdaki sonucu elde etmiş oluruz.
Bu resimler alanımızın hemen altındaki boş olan kısmıda değerlendirelim ve orayıda diğer videolar alanı olarak belirleyelim, bunun için yeni bir Grup oluşturalım (Layer/New/Group) ve ismini Küçük Videolar olarak değiştirelim daha sonra ilk olarak bu küçül videolarımıza bir arka plan yapalım bunun için yeni bir layer oluşturup ismini Küçük Videolar BG olarak değiştirdiken sonra aşağıdaki gibi bir seçim yapalım ve içini herhangi bir renk ile dolduralım, herhangi bir renk dedim çünkğü Gradient Owerlay efekti vereceğimiz için önemi yok,
Daha sonra aşağıdaki ayarları ile Gradient Owerlay verelim ve devam edelim,
Şimdi yukarıda verdiğim Küçük Videolar isimli klasördeki resimleri 30x20 px boyutlarında küçültüp aşağıdaki gibi sıralayalım,
Birinci resmimize aşağıdaki efektleri uygulayalım
Bu işlemimiz bittikten sonra bu layerimize sağ tıklayıp Copy Layer Style diyelim ve diğer resimlerimizin bulunduğu tüm layerlerimizide seçili hale getirelim ve yine herhangi bir tanesinin üzerine sağ tıklayıp Paste Layer Style ile tüm layerlerimize aynı efekti uygulamış olalım, sonuç aşağıdaki gibi olmalıdır,
Bu işimizde bitti ve artık sıra geldi bir Form alanı oluşturmaya, bunun için yine bir Group oluşturalım ve ismini Form Alanı koyalım ve daha önce oluşturduğumuz Videolar isimli Grubumuzun içindeki Videolar BG layerini CTRL+J ile dublicate edelim ve bu grubumuuzn içine taşıyalım,
Bu işlemden sonra bu layerimizdeki Gradient Owerlay efektindeki Style kısmındaki Diamont efektini Linear olarak değiştirelim ve bu be alanımızla işimizde burada bitsin, sonuç aşağıdaki gibi olmalıdır,
Şimdi ise Arama Kutusu isimli Grubumuzun içindeki BG YAzı layerini Dublicate edip Form Alanı isimli Grubumuza taşıyalım ve aşağıdaki gibi hizalayalım ve yazıyı yine aşağıdaki gibi Ad: olarak editleyelim, (Hizalama için iki layerimize seçili iken CTRL+T tuşuna basıp Transform moduna geçerek yapabiliriz)
Şimdi Gurbumuzda oluşturduğumuz bu işlemi 3 kere daha tekrarlayalım ve aşağıdaki sonucu elde etmeye çalışalım,
Devam edelim me mesaj yazma alanımızı oluşturalım, bunu için buradaki Shape layerlerimizden birisini yine CTRL+J ile dublicate edelim ve bu layerimiz seçili iken CTRL+T ile transform moduna geçelim ve aşağıdaki gibi büyüterek hizalayalım, daha sonra içine Mesajınız: yazısını eklemeyi unutmayalım,
Arkasından Mesaj Yolla Butonumuzu yapmak için bir önceki işlemimizde oluşturduğumuz layerlerimizde Ad: Soyad: vs. bunlardan birisini yine CTRL+J ile dublicate edelim ve aşağıdaki hizalayalım,
Buradaki yazımız Mesaj Yolla olarak (Renk: #010101) değiştidikten sonra bu layerimize aşağıda görüldüğü yere çift tıklayarak renk değiştireceğimiz alanı açtıktan sonra rengini #1a1a1a olarak değiştirelim ve stroke efetinide yine aşağıdaki gibi vererek devam edelim,
Sonuç aşağıdaki gibi olmalıdır.
Yukarıdaki alanızla işimiz bitti şimdi diğer taraflar için içeriği ben kendime göre doldurdum sizlerde kendi içeriğinize göre dolduracağınız için ve bundan sonraki yapılan işlemlerimi yukarıda daha önce yaptığım işlemlerin benzeri olduğu için uzun uzun bunları anlatmaya girmek istemedim, sonuç aşağıdadır sizlerde buraya kadar işlemleri doğru yaptınızsa geri kalan kısmı sizede kolay gelecektir, bu çalışmayı çalışan arkadaşlarımızın bizimle paylaşmalarını rica ediyoruz, bundan sonra vakti olursa bu temanın bölümleme işlemi ve html kodları ile yayınlama aşamasına kadar olan kısımları anlatmaya çalışacağım herkese kolay gelsin diyorum görüşmek üzere.