Köşe Bandı Yapmaca…

Köşe Bandı...Şimdiki yazımsa sol tarafta göründüğü gibi köşe bandı yapmayı anlatacağım :D

Bunun için öncelikle güzel bir resim formatına sahip(png,gif vs.) bir bandımızın olması gerekiyor onun için ilk başta Photoshoplarımızı açıyoruz.

Hemen 146*146 pixel Background Contents: Transparent olan boş bir karecik ile çalışmamıza başlıyoruz;

İlk olarak elimine Line Tool(U) deniken çizgi görüntüsündeki aracı alıyoruz ve sol üstdeki resimdeki gibi üst sağdan sol aşağıya doğru bandımızı istediğimiz renkte düzgünce çekiyor.

Bundan sonra bandın bütün sanatsal güzellikleri sizin derin photoshop bilginize ve sanatsal ruhunuza bakar ama ben burada kendi bandımda kullandığım küçük ama değerli teknikleri anlatıyım ;)

İlk olarak LayerMenüsünden Layer-Layer Style-Stroke Yaparak kenarlara 3 pixel koyu yeşil band çektim ve Position:Inside yaptım.

Sonra küçük Layer style penceremi kapadım ve arkaplanı oluÅŸturacağım yeÅŸil tonunu seçtim ve Tekrar Layer-Layer Style-Gradient Overlay’e geldim.Ordan Gradient ‘deki renke tıklayaktan yeni bir pencere açılamsına vesile oldum yeni pencere açılır açılmaz 2. renk kutucuÄŸuna tıkladığımda arkaplanım güzel bir dalgalanmayla yeÅŸil rengini almıştı bile… Opacity vs. oynayarak ince ayarlarını tamamladım ve resim bölümü bitmiÅŸti :D

Hemen yazısına geçtim sol araç kutusundan Horizontal Type Tool (T) ‘u kaptığım gibi yazımı yazdım ama yazım yataydı ve buna -45 derecelikeÄŸim vermek üzere üstden Edit-Transform-Scale’e geldim üstde üçgene benzer ÅŸeklin yani Rotate Kısmına -45 girdim ve yazımbandın üzerine oturacak eÄŸime gelmiÅŸt ve böylelikle tasarım aÅŸamasını bitirmiÅŸ olduk…

Ve şimdi sıra bunu sitemizin sol üst köşesine oturtmaya yani kodsal kısma geldi;

İlk önce bandımızı kose.png olarak bilgisayarımıza kaydedelim ve hemen ardından kendi hostumuza ya da resim hostingi sağlayan bir servise gönderelim,adresini alalım.

Öncelikle sitenizi Style.css gibi style sayfası varsa ona yoksa da koyacağımız sayfada

<style type=”text/css”>
<!– Kod buraya Gelecek

–>
</style>

Şeklinde yapacağız.Şimdide gerekli kodları yazıyorum;

Style sayfasına yerleştirilecek kod;

#topleft {
position: fixed;
left: 0;
top: 0;
display: block;
height: 146px;
width: 146px;
background: url(http://bmertural.googlepages.com/kose.png) no-repeat;
text-indent: -999em;
text-decoration: none;}

Sayfanıza yerleştireceğiniz kod;

<a href=’mertural.com’ id=’topleft’ title=’Blog’>mertural.com</a>

Gibi kodu kendinize uyarlayın ve artık sizinde sitenizin köşesinde bir köşe bandınız var….

Köşe bandlarını güncel olayları protesto etmek,takımınızı göstermek,sevginizi anlatmak vs. vs. birçok şey için kullanabilirsiniz ;)

Güzel güzel kullanın…

18 Şubat 2007 Tasarım Yorumlar ( 13 )

 

“Köşe Bandı Yapmaca…” için 13 Yorum

  1. KoRHaN diyor ki:
    18 Åžubat 2007, 20:48 tarihinde

    Calismiyor yaa -.-

  2. Ahmet Mehmet diyor ki:
    26 Åžubat 2007, 23:34 tarihinde

    Anlatım için teşekkürler. Ancak sormak istediğim bir nokta daha var. Ordaki imaj dosayına nasıl link atayabiliriz?

  3. sesebian diyor ki:
    04 Mart 2007, 22:29 tarihinde

    anlatım için sagol.ancak bloga ekliyemedim ben.Temamda Style.css diye bir klasör var.bu kodları nasıl kullanacagız onu bi ayrıntılı anlatamazmısın

  4. mustafa burak özkan diyor ki:
    18 Mart 2007, 20:03 tarihinde

    Ahmet Mehmet

    normalde link vermek için kullanılan kod:
    link adı

  5. mustafa burak özkan diyor ki:
    18 Mart 2007, 20:05 tarihinde

    ” linkadı ”
    :)

  6. mustafa burak özkan diyor ki:
    18 Mart 2007, 20:05 tarihinde

    kodu göstermio :( rezil olduk :)

  7. ibrahim diyor ki:
    03 Mayıs 2007, 16:10 tarihinde

    hocam bende sadece yazı çıkıyor
    yardımcı olur musunuz yada öyle biÅŸey yapın ki dosyaları yollayın biz içini düzenleyelim bizde buna kavuÅŸalım…
    cevabınızı bekliyorum
    saygılar

  8. Mert diyor ki:
    14 Mayıs 2007, 16:47 tarihinde

    Dostum Su Bandın PST sini versene be:s

  9. aytac diyor ki:
    07 Eylül 2007, 17:33 tarihinde

    kullanışlı bir uygulama.

  10. Emre diyor ki:
    26 Ocak 2008, 00:47 tarihinde

    Guzel… Emege saygı.

  11. eses diyor ki:
    01 Mart 2008, 16:21 tarihinde

    emeye saygı elbette ama web tasarımların cogu birbirine benziyor nasıl saygı bu

  12. iyinet webmaster forumu 2008 seo yarışması diyor ki:
    14 Nisan 2008, 23:37 tarihinde

    güzel ve faydalı konu thanks

  13. MaTaDoR diyor ki:
    20 Nisan 2008, 23:26 tarihinde

    Gerçekten işime yaradı, teşekkürler.

Yorum Yapın

*
Lütfen resimde gördüğünüz yazıyı giriniz.Yazıyı okuyamıyorsanız dinlemek için üstüne tıklayın.
Click to hear an audio file of the anti-spam word