- Katılım
- 8 Nisan 2010
- Mesajlar
- 96
- Açılan Konu
- 8
- Tepki puanı
- 2
- Konum
- Gotham City
İ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.
