Siteleri profesyonel gösteren Yuvarlatılmış table köşeleri
yuvarlak köşeli table örnekleri
yeni web tasarımcılarının daima ilgisini çeken bir konu da sitelerdeki yuvarlak köşeli table‘lardır. Peki bu profesyonel görünümü nasıl kazandıklarını kısaca öğrenmek ister misiniz?
yuvarlak table köşesi
aslında bu konu göreceli olarak birçok grafik editörüyle kolayca yapılabilecek bir düzenlemedir. Kullanıldığı zaman siteye yumuşak ve akıcı bir hava katmaktadır. Biz burada açıklamalarımızı photoshop kullanarak yapacağız ama genelde diğer çoğu grafik düzenleme aracında da hemen hemen aynı öğeler kullanılarak yapılabilir.Kullandığınız programa bakmaksızın kullanılacak teknik aynıdır: bir daire ya da yuvarlatılmış kare (rectangle) çiz, sonra da onu table’a uygulamak üzere parçala. Mesela biz burada 20 pixellik köşeleri olan bir table yapacağız.
Köşelerin photoshop’ta hazırlanılışı:
# adım-1:
grafik düzenleyicimizde 40 x 40 pixellik bir resimle başlıyoruz.
40 x 40 pixel resim
# adım-2:
arkaplanımızı tasarladığımız web sayfasını arkaplan rengiyle dolduruyoruz.
arkaplan rengiyle sitenin arkaplan rengi aynı olmalı
# adım-3:
sonra, alanımızı tamamen dolduracak şekilde ve table’ımızın renginde bir daire çiziyoruz. dairemizde anti-aliasing kullanırsak daha yumuşak hatlar elde ederiz.
çizdiğimiz daire
# adım-4:
bu sonuncu adımda dilimleme (slice) ya da kırpma (crop) yöntemini kullanmak size ve grafik düzenleyicinize (daha doğrusu paşa gönlünüze) kalmış. Şeklimizi 4 eşit parçaya bölerek devam ediyoruz. Parçaları sol-üst, sağ-alt gibi isimlendirebilirsiniz.
çizdiğimiz dairenin parçalara ayrılması
aşağıda da parçalarımızın resimlerini görebilirsiniz:
sağ alt parça
sağ üst parça
sol alt parça
sol üst parça
# adım-5:
köşeleri doğru bir şekilde yerleştirebilmek için 3 satır ve 3 sütundan oluşan bir table’a ihtiyacımız var. sitemizin arkaplan renginin çizdiğimiz dairelerin arkaplan rengiyle aynı olmasını daha önceden ayarlamıştık zaten. Table şöyle görünüyor olmalı:
table 1
# adım-6:
köşelerde kalan hücrelerimizi 20 x 20 pixel olacak şekilde boyutlandırıyoruz. Çünkü başta parçaladığımız dairemiz 40 x 40 pixel’di hatırlarsanız. Parçalarımızın her biri de 20 x 20 pixel oldu bu yüzden de köşe hücrelerimizi bu şekilde boyutlandırıyoruz. Resimlerimizi yerleştirirken dikkat etmemiz gereken nokta ise hücremizin “cellpadding” ve “cellspacing” değerlerinin “0” olması. Hücre boyutlandırmasından sonra olması gereken şekil şu şekilde olacak:
table 2
# adım-7:
köşe hücrelerimize resimlerimizi doğru yerlerine yerleştiriyoruz.(insert)
table 3
# adım-8:
içeriğinizi de yazarsanız işte bitti!durmayın!!
bu tekniği biraz değiştirip geliştirerek başka şekillerde de kullanabilirsiniz. Mesela kenar çizgileri kullanarak yaptığınız bir rectangle ile çizgili bir table oluşturabilirsiniz. İlham vermesi açısından bu tekniği kullanan sitelere bir göz atabilirsiniz. Mesela dünyanın en meşhur alışveriş sitesi ebay, onun yerli ortağı gittigidiyor ve dünyanın en büyük ve ünlü video paylaşım sitesi youtube bolca kullanmaktalar bu tekniği. Faydalı olabileceği ümidiyle…
