İ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;
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;
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.
