Profesyonel web tasarımı yapmak

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)
[Resimleri görebilmek için üye olun veya giriş yapın.]

Öncelikle 850x800 px ölçülerinde ve yeni bir transparan belge açalım.


[Resimleri görebilmek için üye olun veya giriş yapın.]

Rengini #494949 olarak ayarlayalım ve aşağıdaki efektleride uygulayarak devam edelim,

[Resimleri görebilmek için üye olun veya giriş yapın.]

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.

[Resimleri görebilmek için üye olun veya giriş yapın.]

Ş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,

[Resimleri görebilmek için üye olun veya giriş yapın.]

Bu Üst isimli layerimize Blending Option ayarlarından 1 px stroke verelim,

[Resimleri görebilmek için üye olun veya giriş yapın.]

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,

[Resimleri görebilmek için üye olun veya giriş yapın.]

Ş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,

[Resimleri görebilmek için üye olun veya giriş yapın.]

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.

[Resimleri görebilmek için üye olun veya giriş yapın.]

Ş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.

[Resimleri görebilmek için üye olun veya giriş yapın.]

Üst isimli layerimizin Gradient değerleri,

[Resimleri görebilmek için üye olun veya giriş yapın.]

Menü isimli layerimizin Gradient değerleri

[Resimleri görebilmek için üye olun veya giriş yapın.]

Menü Kenarlar isimli layerimizin Gradient değerleri

[Resimleri görebilmek için üye olun veya giriş yapın.]

Alt isimli layerimizin Gradient değerleri

[Resimleri görebilmek için üye olun veya giriş yapın.]

Arka Plan isimli layerimizin Gradient değerleri

[Resimleri görebilmek için üye olun veya giriş yapın.]

Genel Olarak şu sonucu elde etmiş olmalıyız

[Resimleri görebilmek için üye olun veya giriş yapın.]

Devam edelim ve Menü isimli layerimizi CTRL+J ile çoğaltalım ve aşağıdaki gibi aşağıya çekerek hizalayalım,

[Resimleri görebilmek için üye olun veya giriş yapın.]

Şimdi Gradient ayarlarına girelim ve aşağıdaki değiştirelimki üstteki layer ile uyumunu yakalayalım, arkasından DropShadow verelim,

[Resimleri görebilmek için üye olun veya giriş yapın.]

Ş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,

[Resimleri görebilmek için üye olun veya giriş yapın.]

Şimdi bu butonumuza aşağıdaki ayarları vererek devam edelim,

[Resimleri görebilmek için üye olun veya giriş yapın.]

Buton sonuç
[Resimleri görebilmek için üye olun veya giriş yapın.]

Ş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,

[Resimleri görebilmek için üye olun veya giriş yapın.]

Şimdi ANA SAYFA isimli yazımıza Drop Shadow verelim,

[Resimleri görebilmek için üye olun veya giriş yapın.]

Ş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,

[Resimleri görebilmek için üye olun veya giriş yapı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,

[Resimleri görebilmek için üye olun veya giriş yapın.]

Bu çizgimize Motion Blur efektini aşağıdaki gibi verelim arkasından Outer Glow ekleyerek devam edelim,

[Resimleri görebilmek için üye olun veya giriş yapın.]

Ş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,

[Resimleri görebilmek için üye olun veya giriş yapın.]

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,

[Resimleri görebilmek için üye olun veya giriş yapın.]

Ş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.

[Resimleri görebilmek için üye olun veya giriş yapın.]
Bu layerimizin Fill değerini Sıfıra düşürelim ve Gradient Owerlay efekti ile devam edelim,

[Resimleri görebilmek için üye olun veya giriş yapın.]

Aşağıdaki efektleri uygulayarak devam edelim,

[Resimleri görebilmek için üye olun veya giriş yapın.]


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.


[Resimleri görebilmek için üye olun veya giriş yapın.]

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,

[Resimleri görebilmek için üye olun veya giriş yapın.]

Bu işlemimizden sonra Radius değeri 3 px olan Gaussian Blur ve arkasından Outer Glow efekti vereceğiz,

[Resimleri görebilmek için üye olun veya giriş yapın.]

Aşağıdaki sonucu elde etmeliyiz,

[Resimleri görebilmek için üye olun veya giriş yapın.]

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,

[Resimleri görebilmek için üye olun veya giriş yapın.]

Bu işlemlerimizde bittikten sonra ANA SAYFA Butonumuzun altına düzgünce hizalayalım,

[Resimleri görebilmek için üye olun veya giriş yapın.]

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,

[Resimleri görebilmek için üye olun veya giriş yapın.]

Ş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,

[Resimleri görebilmek için üye olun veya giriş yapın.]

Devamında Gaussian Blur efektimizi vererek devam edelim,

[Resimleri görebilmek için üye olun veya giriş yapın.]

Ana Sayfa Butonumuzun altındaki ışık ve Glow'un son hali böyle olmalıdır,

[Resimleri görebilmek için üye olun veya giriş yapın.]

Şimdi Üst isimli layerimizede Drop Shadow efektinide aşağıdaki gibi vererek devam edelim,

[Resimleri görebilmek için üye olun veya giriş yapın.]

Menü Final
[Resimleri görebilmek için üye olun veya giriş yapın.]

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)

[Resimleri görebilmek için üye olun veya giriş yapın.]

Şimdi bu layerimize Gradient Owerlay uygulayacağız, değerler aşağıdaki gibidir,

[Resimleri görebilmek için üye olun veya giriş yapın.]

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,

[Resimleri görebilmek için üye olun veya giriş yapın.]

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.

[Resimleri görebilmek için üye olun veya giriş yapın.]

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,

[Resimleri görebilmek için üye olun veya giriş yapın.]

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.

[Resimleri görebilmek için üye olun veya giriş yapın.]

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

[Resimleri görebilmek için üye olun veya giriş yapın.]

Ş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.

[Resimleri görebilmek için üye olun veya giriş yapın.]

Bu işlemimizi diğer layerlerimizede uyguluyoruz sonuç aşağıdaki gibi olacak,

[Resimleri görebilmek için üye olun veya giriş yapın.]

Ş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,

[Resimleri görebilmek için üye olun veya giriş yapın.]

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,

[Resimleri görebilmek için üye olun veya giriş yapın.]

Şimdi ben sonucu aşağıya koyuyorum sizde yukarıdaki işlemleri tekrarlayarak aşağıdaki sonucu elde edebilirsiniz,

[Resimleri görebilmek için üye olun veya giriş yapın.]

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,

[Resimleri görebilmek için üye olun veya giriş yapın.]

Bu sonucu elde etmiş olmalıyız

[Resimleri görebilmek için üye olun veya giriş yapın.]

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,

[Resimleri görebilmek için üye olun veya giriş yapın.]

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,

[Resimleri görebilmek için üye olun veya giriş yapın.]

Ve arama kutusu alanımıza aşağıdaki gibi bir seçim yapalım,

[Resimleri görebilmek için üye olun veya giriş yapın.]

Hemen arkasından Bevel efekti verelim ve Fill değerini 75'e düşürelim

[Resimleri görebilmek için üye olun veya giriş yapın.]

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,

[Resimleri görebilmek için üye olun veya giriş yapın.]

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

[Resimleri görebilmek için üye olun veya giriş yapın.]

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,

[Resimleri görebilmek için üye olun veya giriş yapın.]

Bu işlemide gerçekleştirdikten sonra bu layerimize Edit/Stroke efektini aşağıdaki gibi verelim (Stroke Rengi #0E1011)

[Resimleri görebilmek için üye olun veya giriş yapın.]

Sonuç
[Resimleri görebilmek için üye olun veya giriş yapın.]

Ş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,

[Resimleri görebilmek için üye olun veya giriş yapın.]

Bu layerimize aşağıdaki efektlerimizide uygulayarak devam edelim

[Resimleri görebilmek için üye olun veya giriş yapın.]

Ş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.

[Resimleri görebilmek için üye olun veya giriş yapın.]

Bu işlemde bittikten sonra bu resimlerimizden birisine aşağıdaki gibi Bevel and Options ayarlarından Stroke efekti verelim,

[Resimleri görebilmek için üye olun veya giriş yapın.]

Ş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.

[Resimleri görebilmek için üye olun veya giriş yapın.]

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,

[Resimleri görebilmek için üye olun veya giriş yapın.]

Daha sonra aşağıdaki ayarları ile Gradient Owerlay verelim ve devam edelim,

[Resimleri görebilmek için üye olun veya giriş yapın.]

Ş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,

[Resimleri görebilmek için üye olun veya giriş yapın.]

Birinci resmimize aşağıdaki efektleri uygulayalım

[Resimleri görebilmek için üye olun veya giriş yapın.]

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,

[Resimleri görebilmek için üye olun veya giriş yapın.]

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,

[Resimleri görebilmek için üye olun veya giriş yapın.]

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,

[Resimleri görebilmek için üye olun veya giriş yapın.]

Ş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)

[Resimleri görebilmek için üye olun veya giriş yapın.]

Şimdi Gurbumuzda oluşturduğumuz bu işlemi 3 kere daha tekrarlayalım ve aşağıdaki sonucu elde etmeye çalışalım,

[Resimleri görebilmek için üye olun veya giriş yapın.]

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,

[Resimleri görebilmek için üye olun veya giriş yapın.]

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,

[Resimleri görebilmek için üye olun veya giriş yapın.]

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,

[Resimleri görebilmek için üye olun veya giriş yapın.]

Sonuç aşağıdaki gibi olmalıdır.

[Resimleri görebilmek için üye olun veya giriş yapın.]

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.



Alintidir

Süpersin +Repini VErdim

vayy helal Olsun