Gelişmis çizgili arkaplan resmi yapmak

Sıkça gördügümüz çizgili backgroundlari yapmak aslinda o kadarda zor degil 4 pixellik bir dosya acip tam ortadan istedigimiz renkte çapraz bir cizgi çekip bunu background olarak sayfaya eklememiz yeterli. Gelin biz biraz daha geliştirelim bunu.

Pattern dosyamiz sekildeki gibi olacak:

Önce 4 pixel genisliginde 450 pixel uzunlugunda bir dokument olusturuyoruz photoshopta asil dokumanimiz bu oluyor. Tekrar 4×4 pixellik bir dokuman olusturup yukarda bahsettigim teknikle yani  caprazdan bir cizgi cekerek bunu Edit»Define Pattern komutu ile Pattern menusune ekliyoruz, backgroundumuzun hangi renk olacagi burada sectigimiz renklere bagli. Daha sonra  asil dokumanimiza gecip bir  layer ekliyoruz ve Edit » Fill komutundan Patterni ve patternlerden de biraz önce ekledigimizi secip ok diyoruz.
Asagidakine benzer bir sekilde olmali.

Simdi bunu biraz gelistirelim en uste iki pixellik istedigimiz renkte duz cizgi cizelim ve bunun altina 1 pixellik beyaz veya sizin calisma renklerinize göre siyahta olabilir bir cizgi cekelim. Bu cizginin 20 pixel altina yine 1 pixellik beyaz bir cizgi cekelim asil bu beyaz cizgiden sonrasi önemli. Logomuzun boyuna göre bira alan secip background rengimiz ile boyayacagiz. Örnegin 105 pixel ve bunun altinada yine beyaz bir cizgi ciziyoruz.

Yandaki gibi görunuyor mu? Devam ediyoruz belli bir yerden sonar tek renge dönmek istiyoruz o zaman bu 105 pixellik alandan sonar ki alani seciyoruz en alta kadar daha sonar backgroundumuzun rengini ve sonraki dönusecegi rengi secip linear gradient araci ile asagidan yukari dogru tariyoruz ama tam yukari cikmayalim ortalarda bir yerde birakalim cunki cizgiler yavasca siliniyor gibi görunsun.

Bunu sayfamiza uygulamaya gelince header kisminda bodymizin icine asagidaki gibi bir stil olusturuyoruz unutmayalim color rengi gradient icin sectigimiz ikinci renk olacak.

<style type=”text/css”>
<!–
body {
background-image: url(ybg.gif);
background-color: # ced3c4;
background-repeat: repeat-x;
}
–>
</style>

Bitmis halini görmek icin buraya tiklayabilirsiniz.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.