İnternette dolaşırken gördüğüm bir sitede çok hoş bir şerite rastladım ve kendi sitemdede kullanmaya başladım. Burada paylaşıp diğer arkadaşlarında nasıl yapılıp nasıl kullanıldığını göstermek istedim.
Çalışmamız bitince şu şekilde olacak;
Adım 1
Genişliği 485px ve Boyu 52px olan bir dosya oluşturuyoruz. Arkaplanı siyah yapıyoruz.
Adım 2
Sağ alttakı renk paletinden şeritimizin olmasını istediğimiz rengi seçiyoruz ve Rectangel Tool'u kullanarak Genişliği 470px Boyu 30px olan bir Shape oluşturuyoruz. Oluşturduğumuz Sahpe'e sağ tıkladıktan sonra Rasterize Layer'a tıklıyoruz.
Adım 3
Yeni oluşturduğumuz layerı arkaplanı boydan ortalıcak şekilde soldan başlayarak yerleştiriyoruz ve Layer Mask ekliyoruz.
Şuana kadar yaptığımız çalışmanın şu şekilde olması lazım;
Adım 4
Gradient Tool'u kullanarak şeritimizin sağ kenarından başlayarak düz bir eksende içeri doğru uzatıp bir kere tıklıyoruz böylece şeritimizin sağ kenarında içeri doğru bir siliklik oluşacak.
Ekran görüntüsü;
Ardından üzerine istediğimiz yazıyı yazıp veya ikonu ekleyip süsleyebiliriz. Şeritimizin Opaklığını %80 yapın ve unutmayın kayıt ederken .png formatında kayıt edin, siyah olan arkaplanı silin, onu yerleşimleri ve tasarımı net görmek için kullanmıştık.
Bitmiş bir çalışma örneği;
Şimdi sitemize eklemeye geldi sıra. Sitenize dahil ettiğiniz CSS dosyanıza şu satırları ekleyin;
Sonra şeritin gözükmesini istediğiniz sayfanın </body> etiketinin hemen üstüne şu kodları ekleyin;
Tamamen tarafımdan hazırlanmıştır, takıldığınız yer olursa konu altında yardımcı olurum.
Çalışmamız bitince şu şekilde olacak;
![4gix5v.png](http://i44.tinypic.com/4gix5v.png)
Adım 1
Genişliği 485px ve Boyu 52px olan bir dosya oluşturuyoruz. Arkaplanı siyah yapıyoruz.
Adım 2
Sağ alttakı renk paletinden şeritimizin olmasını istediğimiz rengi seçiyoruz ve Rectangel Tool'u kullanarak Genişliği 470px Boyu 30px olan bir Shape oluşturuyoruz. Oluşturduğumuz Sahpe'e sağ tıkladıktan sonra Rasterize Layer'a tıklıyoruz.
Adım 3
Yeni oluşturduğumuz layerı arkaplanı boydan ortalıcak şekilde soldan başlayarak yerleştiriyoruz ve Layer Mask ekliyoruz.
Şuana kadar yaptığımız çalışmanın şu şekilde olması lazım;
![xd5now.png](http://i39.tinypic.com/xd5now.png)
Adım 4
Gradient Tool'u kullanarak şeritimizin sağ kenarından başlayarak düz bir eksende içeri doğru uzatıp bir kere tıklıyoruz böylece şeritimizin sağ kenarında içeri doğru bir siliklik oluşacak.
Ekran görüntüsü;
![doqre8.jpg](http://i41.tinypic.com/doqre8.jpg)
Ardından üzerine istediğimiz yazıyı yazıp veya ikonu ekleyip süsleyebiliriz. Şeritimizin Opaklığını %80 yapın ve unutmayın kayıt ederken .png formatında kayıt edin, siyah olan arkaplanı silin, onu yerleşimleri ve tasarımı net görmek için kullanmıştık.
Bitmiş bir çalışma örneği;
![serit.png](http://turkmalidizisi.org/wp-content/themes/lightword/images/serit.png)
Şimdi sitemize eklemeye geldi sıra. Sitenize dahil ettiğiniz CSS dosyanıza şu satırları ekleyin;
Kod:
/* Şerit */
#serit {position: fixed;left: -1px;bottom: -1px;width: 100%;clear: both;}
Sonra şeritin gözükmesini istediğiniz sayfanın </body> etiketinin hemen üstüne şu kodları ekleyin;
Kod:
<div align="left" id="serit"><img border="0" src="http://siteadresiniz.com/images/serit.png" alt="şerit" /></div>
Tamamen tarafımdan hazırlanmıştır, takıldığınız yer olursa konu altında yardımcı olurum.