Yeniden merhabalar. Aslına bakarsanız bu makalede Photoshop ile başka bir uygulama anlatmayı düşünüyordum. Ancak her zaman hızlıca yaptığım bir uygulamayı sizinle İpucu olarak paylaşmaya karar verdim.

Bu kısa yazımızda sadece 2 küçük adımda Photoshop’ta nasıl etkili bir arkaplan yapacağımızı anlatacağız. Dilerseniz hemen uygulamamıza geçelim.

ADIM 1: Öncelikle istediğiniz boyutta boş bir doküman açın. Ben 1024*768px bir doküman tercih ettim. Yapacağımız uygulamada sayfa önplan ve arkaplan renkleri de kendinize göre belirleyin. Ben ön renk için #1A9DCE, arka renk için de #073F54 değerini kullandım. Ardından hemen bir katman (layer) oluşturalım. Sonrasında üst menüden Filter >> Render >> Clouds seçeneğini tıklayalım. Bu filtre ile dokümanımız verdiğimiz renklerde bulutsu bir görünüme kavuşacaktır.

ADIM 2: Sonrasında yine üst menüden Filter >> Blur >> Motion Blur bölümünü tıklayalım. Karşımıza gelen pencerede Angle bölümünü 60, Distance bölümünü de 300 olarak belirleyin ve Tamam diyerek dokümanı izleyin.

Dilerseniz renkleri kendi isteğinize göre değiştirerek ve yukarıda yer alan Efektlerin değerlerini değiştirerek siz de farklı görünümler elde edebilirsiniz. Bu tarz oluşturulan arkaplanları dilerseniz web uygulamalarında dilerseniz de kendi duvarkağıtlarınızı yaparken kullanabilirsiniz. (Kaldı ki ben duvar kağıdı yaparken sıkça anlattığım bu uygulamayı kullanıyorum, hızlı ve etkili biçimde sonuca ulaşıyorum, sizlere de tavsiye ederim :)

Yine çok uzun oldu sanırım, bir başka gönderide görüşmek üzere :)

Bu yazımızda örnek kodlar ve sayfalarla birlikte bir arkaplan resmini Css ile nasıl sabitleyebileceğimizi ve nasıl tekrarlı kullanımını (repeat) sağlayabileceğimizi anlatacağız. Her zaman olduğu gibi yine işin mutfağına iniyoruz…

Css ile Sabit Arkaplan Resmi
Çoğu websitesinde gördüğümüz güzel bir uygulama ise kullandığımız arkaplan resminin sabit bir şekilde web sayfamızda kalmasıdır. Sayfamız için uygun olduğunu düşündüğümüz bu resmi küçük bir Css kodu ile sayfamızda sabit hale getirebiliriz.

Makalemizin giriş kısmında belirttiğimiz gibi arkaplan resmimizi istediğimiz durumlarda sabit hale getirebiliriz. Bunu yapacak olan Css kodunu aşağıya yazıyorum;

body {
margin: 0px;
padding: 0px;
background: #fff url(bg.gif) no-repeat left bottom fixed;
}

örnek kodda gördüğünüz üzere Body etiketine bir stil tanımlaması yaptık. Bu tanımlamada Background parametresine öncelikle arkaplan renk değerimizi #fff (beyaz) olarak verdik. Daha sonra url ile başlayarak kullanmak istediğimiz resmin adını ve uzantısını yazdık. (Stil dosyamız ile kullanacağımız resmin aynı dizinde olacağını varsayarak images veya img/resim.gif gibi bir ayrıma gitmedik) daha sonrasında gelen no-repeat tanımı ile resmimizin bir daha tekrarlanmamasını istedik. Sol ve en alt kısımda tekrarlanmayacak olan bu resmi fixed parametresi ile sabit hale getirdik. Böylelikle sayfamız ne kadar uzun olursa olsun kullanmış olduğumuz arkaplan resmi sitemizin en alt ve solunda sabit bir şekilde duracak.

Bu kodun çalışan halini görmek için buradaki örnek sayfaya bakabilirsiniz.

Css ile Tekrarlanan Arkaplan Resmi
Css ile yapabileceğimiz arkaplan atamalarından bir diğeri de tekrarlı resimler oluşturarak web sayfalarımıza renk katmaktır. Daha önceki dönemlerde yazmış olduğumuz Web 2.0 Tasarım özellikleri ve uygulamaları isimli yazımızda Gradient efektli resimlerin Web 2.0 tarzı sitelerde çok kullanıldığından bahsetmiştik.

Bu aşamada küçük bir gradiente sahip resmimizi bu defa sitemizin en üstünde tekrarlanacak biçimde göstereceğiz. Ancak bu tekrarı bir kez yapacağız. Sayfa boyu uzun olduğu takdirde 2 kez tekrarlanan bu resim sayfamızda kötü görünebilir.

Örnek olarak kullanacağımız ve benim Photoshop’ta yaptığım resmi yan tarafta görebilirsiniz. Şimdi bu resmimizi web sayfamızın en üstünde ve sadece üst bölümde (top) tekrarlayacak biçimde gösterecek olan Css kodunu yazalım.

body {
background:#fff url(gri.gif) repeat-x;
color:#333;
font:12px arial, verdana, helvetica, sans-serif;
}

Gördüğünüz gibi ilk örneğimizdekiyle benzer bir yaklaşım izleyerek Body etiketi içinde Background tanımlaması kullanıyoruz. Fakat burada dikkat etmeniz gereken bir nokta var. O da resmin sadece X ekseninde tekrarlanabileceği. X ve Y koordinatlarını düşündüğünüzde bu resim sitenin en üstünde tek sefer tekrarlanacak ve gösterime böyle girecek.

Örnek uygulama için lütfen buraya tıklayınız…

Daha Fazla Kaynak
Bu basit uygulamaların yanında çok daha karmaşık ve ileri düzey arkaplan resim atamaları için lütfen aşağıdaki sitelere gözatınız.
W3schools.com
Tizag.com
Tutorialhero.com
Netlobo.com