EmpireOfSRO
Daimi Üye
Merhaba arkadaşlar,
Bu ilk dersimde sizlere, Web 2.0 anlayışı ile gelişen görsel unsrulardan buton yapımını anlatacağım. Kısaca Web 2.0 için web tasarımının modern hali diyebiliriz.
Bu tarz buton ve görsel unsurların yapımı aslında çok basit olmasına rağmen, gelen şikayetler hep istenilen şekilde olmadığı doğrultusundadır. Bunun püf noktası ise sadece renkler.
Ek bilgi olarak bir başka dersde, Web 2.0 için uygun renk paletini içeren dosyaları da yine maxigame‘de bulabileceksiniz.
Öncelikle istediğimiz boyutta bir çalışma sayfası açıyor ve Elliptical Marquee Tool yardımıyla düzgün bir daire alanı belirliyoruz. Ben çalışma sayfa alanı olarak yani Canvas için 250×250 boyutunu ve şekil olarak daireyi seçtim. Siz istediğiniz boyutlarda ve şekillerde çalışabilirsiniz.
NOT: Burada tam bir daire çizebilmek için Shift tuşuna basılı tutarak istediğim boyutta bir daire alanı tanımladım. Bu işlemi daha sonra Selection bölümünden de yapabilirsiniz.
Dairemizin bulunduğu layer’da sağ klikleyerek Blending Options > Gradient Overlay seçeneklerinden aşağıdaki ayarları yapıp, ardından Paint Bucket ile dolduruyoruz… Aşağıdaki imajda renk kodlarını da görebilirsiniz, ancak siz aynı mantıkla dilediğiniz renk kombinasyonunu kullanabilirsiniz.
Bu adıma geçmeden önce Ctrl + D yaparak seçili alanımızı Deselect yapmış oluyoruz. Şimdi imajımızın bulunduğu layer’da, tekrar sağ tıklayıp Blending Options menüsünü açıyor ve Stroke sekmesinden aşağıdaki ayarları yapıyoruz.
Stroke işlemini de gerçekleştirdikten sonra tekrar Blending Options menüsünden Inner Glow sekmesine gidiyor ve aşağıdaki ayarları yapıyoruz.
Bundan sonraki adımlar biraz daha ileri seviye.
Öncelikle imajımızın bulunduğu layer’ı seçiyor, ardından Ctrl tuşuna basılı tutarken, mouse ile layer’ın hemen en başındaki görünteye sol tıklıyoruz. Böylelikle imajımızın seçili hale geldiğini görüyoruz. Toolbar‘dan Pen Tool‘u seçerek aşağıdaki ayarların kurulu olduğundan emin oluyoruz.
Ardından imajımızın dışından bir nokta seçiyor, 2. noktayı dairenin iç kısımlarında bir yerlerde işaretliyor ve işaretlediğimiz yeri sanki tutup çekermişcesine path ile bir yay oluşturuyoruz. Bu işlemi yine dairenin dışında işaretlediğimiz bir 3. nokta için de gerçekleştiriyoruz.
Şeklin içinde bir yay oluşturduktan sonra Path‘i kapatmak için çalışma alanını dışında noktalar belirliyor ve ilk noktaya ulaşarak Path‘i kapatıyoruz.
Path‘i kapattıktan sonra imaj içinde path üstünde bir noktaya fare ile sağ tıkladığımızda bir menü açılacaktır. Bu menüden Make Selection… sekmesini işaretleyip çıkan pencerede Radius‘u 0(sıfır) olarak ayarladıktan sonra tamam diyoruz. Böylelikle imajımızın seçili alanı, belirlediğimiz yay ile kesilmiş olacaktır.
Hemen yeni bir layer oluşturuyor ve bu yeni layer seçiliyken Select > Modify > Contract sekmelerini takip ederek Radius‘u 4 olarak ayarlıyoruz. Bu şekilde eskisinde 4 pixel daha küçük bir seçim alanı oluşacak. Oluşan yeni seçim alanı, butonumuzun parlaklık efekti için kullanılacak. Seçimimizi kaldırmadan ilk önce renk paletimizi D‘ye basarak resetliyoruz. Ardından X‘e basarak renk paletini terse çeviriyoruz ve Gradient Tool‘u seçerek Foreground to Transparent ile seçimimizi alttan yukarı doğru grade ediyoruz.
Butonumuz bitmek üzere. Ancak ben biraz daha canlılık katmak için butonun üstüne küçük bir parlaklık daha koymak istiyorum. İmajımızın alt tarafına yaptığımız parlaklık efekti için gerçekleştirdiğimiz adımları bu defa daha küçük bir alan için yapıyoruz.
Bu defa alanımızın içini Gradient ile değil opak beyaz (düz beyaz) ile renklendiriyoruz.
Son olarak da dilerseniz buton içine harf veya şekiller ekleyerek imajımızı tamamlamış oluyoruz.
Elbette bundan sonrası tamamıyle sizin hayal gücünüze kalmış. İstediğiniz renk, boyut, parlaklık değerleri ve şekillerde çalışabilirsiniz. İsterseniz imajınızın arkasına bir arkaplan ile zemin hazırlayabilir ya da farklı efektler ile değiştirebilirsiniz.
Sonuç:
Kolay gelsin…
Bu ilk dersimde sizlere, Web 2.0 anlayışı ile gelişen görsel unsrulardan buton yapımını anlatacağım. Kısaca Web 2.0 için web tasarımının modern hali diyebiliriz.
Bu tarz buton ve görsel unsurların yapımı aslında çok basit olmasına rağmen, gelen şikayetler hep istenilen şekilde olmadığı doğrultusundadır. Bunun püf noktası ise sadece renkler.
Ek bilgi olarak bir başka dersde, Web 2.0 için uygun renk paletini içeren dosyaları da yine maxigame‘de bulabileceksiniz.
Öncelikle istediğimiz boyutta bir çalışma sayfası açıyor ve Elliptical Marquee Tool yardımıyla düzgün bir daire alanı belirliyoruz. Ben çalışma sayfa alanı olarak yani Canvas için 250×250 boyutunu ve şekil olarak daireyi seçtim. Siz istediğiniz boyutlarda ve şekillerde çalışabilirsiniz.
NOT: Burada tam bir daire çizebilmek için Shift tuşuna basılı tutarak istediğim boyutta bir daire alanı tanımladım. Bu işlemi daha sonra Selection bölümünden de yapabilirsiniz.
Dairemizin bulunduğu layer’da sağ klikleyerek Blending Options > Gradient Overlay seçeneklerinden aşağıdaki ayarları yapıp, ardından Paint Bucket ile dolduruyoruz… Aşağıdaki imajda renk kodlarını da görebilirsiniz, ancak siz aynı mantıkla dilediğiniz renk kombinasyonunu kullanabilirsiniz.
Bu adıma geçmeden önce Ctrl + D yaparak seçili alanımızı Deselect yapmış oluyoruz. Şimdi imajımızın bulunduğu layer’da, tekrar sağ tıklayıp Blending Options menüsünü açıyor ve Stroke sekmesinden aşağıdaki ayarları yapıyoruz.
Stroke işlemini de gerçekleştirdikten sonra tekrar Blending Options menüsünden Inner Glow sekmesine gidiyor ve aşağıdaki ayarları yapıyoruz.
Bundan sonraki adımlar biraz daha ileri seviye.
Öncelikle imajımızın bulunduğu layer’ı seçiyor, ardından Ctrl tuşuna basılı tutarken, mouse ile layer’ın hemen en başındaki görünteye sol tıklıyoruz. Böylelikle imajımızın seçili hale geldiğini görüyoruz. Toolbar‘dan Pen Tool‘u seçerek aşağıdaki ayarların kurulu olduğundan emin oluyoruz.
Ardından imajımızın dışından bir nokta seçiyor, 2. noktayı dairenin iç kısımlarında bir yerlerde işaretliyor ve işaretlediğimiz yeri sanki tutup çekermişcesine path ile bir yay oluşturuyoruz. Bu işlemi yine dairenin dışında işaretlediğimiz bir 3. nokta için de gerçekleştiriyoruz.
Şeklin içinde bir yay oluşturduktan sonra Path‘i kapatmak için çalışma alanını dışında noktalar belirliyor ve ilk noktaya ulaşarak Path‘i kapatıyoruz.
Path‘i kapattıktan sonra imaj içinde path üstünde bir noktaya fare ile sağ tıkladığımızda bir menü açılacaktır. Bu menüden Make Selection… sekmesini işaretleyip çıkan pencerede Radius‘u 0(sıfır) olarak ayarladıktan sonra tamam diyoruz. Böylelikle imajımızın seçili alanı, belirlediğimiz yay ile kesilmiş olacaktır.
Hemen yeni bir layer oluşturuyor ve bu yeni layer seçiliyken Select > Modify > Contract sekmelerini takip ederek Radius‘u 4 olarak ayarlıyoruz. Bu şekilde eskisinde 4 pixel daha küçük bir seçim alanı oluşacak. Oluşan yeni seçim alanı, butonumuzun parlaklık efekti için kullanılacak. Seçimimizi kaldırmadan ilk önce renk paletimizi D‘ye basarak resetliyoruz. Ardından X‘e basarak renk paletini terse çeviriyoruz ve Gradient Tool‘u seçerek Foreground to Transparent ile seçimimizi alttan yukarı doğru grade ediyoruz.
Butonumuz bitmek üzere. Ancak ben biraz daha canlılık katmak için butonun üstüne küçük bir parlaklık daha koymak istiyorum. İmajımızın alt tarafına yaptığımız parlaklık efekti için gerçekleştirdiğimiz adımları bu defa daha küçük bir alan için yapıyoruz.
Bu defa alanımızın içini Gradient ile değil opak beyaz (düz beyaz) ile renklendiriyoruz.
Son olarak da dilerseniz buton içine harf veya şekiller ekleyerek imajımızı tamamlamış oluyoruz.
Elbette bundan sonrası tamamıyle sizin hayal gücünüze kalmış. İstediğiniz renk, boyut, parlaklık değerleri ve şekillerde çalışabilirsiniz. İsterseniz imajınızın arkasına bir arkaplan ile zemin hazırlayabilir ya da farklı efektler ile değiştirebilirsiniz.
Sonuç:
Kolay gelsin…
Son düzenleme:
