bildirgec.org - Guitarcraft - beğendikleri

Kullanışlı Html5 video oynatıcı: SublimeVideo

Guitarcraft — Tue, 12 Oct 2010 06:44:00 GMT

Html5'in yeniliklerinden biri olan web sayfasında herhangi bir eklenti gerektirmeksizin video oynatabilme özelliğini kullanarak geliştirilmiş SublimeVideo, video oynatıcılarda isteyebileceğiniz tüm özelliklere sahip olan, özelleştirilebilir bir html5 video oynatıcısıdır.

Tüm tarayıcılarda kullanabileceğiniz ayrıca iPhones, iPads ve Android yüklü telefonlarda da kullanılabilecek olan bu muhteşem html5 video player oldukça kullanışlıdır.

Ses kontrolü, tam ekran modu, zaman ve ters zaman göstergesi, boyutlandırma, şık efektler gibi birçok özelliği bulunan bu html5 video oynatıcıda arayabileceğiniz tüm özellikler bulunmakta. Ekstra olarak sayfada tooltip olarak küçük bir pencere olarak video oynatıcıyı açma, videoları galeri şeklinde sıralama gibi özelliklerde bulunuyor.

SublimeVideo'yu buradan inceleyebilir veya demolarına buradan bakabilirsiniz.Eğer SublimeVideo'yu kullanmak istiyorsanız buradaki formu doldurarak ücretsiz olarak kullanabilirsiniz.

Ayrıca Bakınız;

angelsdemos: Blog | FriendFeed | Twitter | Email | RSS

Kaynak : sublimevideo

Bu yazı Guitarcraft tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Gelişmiş Çevrimiçi Metin Editörü: elRTE

Guitarcraft — Thu, 14 Oct 2010 09:46:00 GMT

elRTE, web sitenizde kullanabileceğiniz açık kaynak kodlu WYSIWYG editördür. Javascript ve jQuery kütüphanesi kullanılarak hazırlanan bu muhteşem HTML editör ile web içeriğinizi istediğiniz gibi kontrol edebilirsiniz.Studio 42 tarafından geliştirilen elRTE'yi ticari olan veya olmayan bloglar, forumlar ve benzer birçok serviste ücretsiz olarak kullanabilirsiniz.

Zengin içeriği ile metin düzenlemenize her yönü ile olanak veren bu editörü kolaylıkla web sitenize entegre edebilir ve sonrasında rahatlıkla kullanabilirsiniz. Ayrıca dilerseniz yazılarınızın biçimlendirilmiş şekildeki html kodlarını görebilirsiniz. Hafif, hızlı ve kolay kolay kullanıma sahip elRTE üzerindeki düzenlemeler css olarak da kaydedilebilir.

Demo modu, Word'den kopyanan yazıları temizleme, ifade ekleme, gelişmiş tablo ve resim ekleme eklentileri ve tam ekran modu ile muhteşem bir derleme aracı olan elRTE ile masaüstü programlardaki tüm özellikleri bulabilir, Gelişmiş bir şekilde metinlerinizi düzenleyebilirsiniz.

16 farklı dil desteğine sahip Firefox 3.5+, Internet Explorer 7, Safari 4, Opera 10 ve Chrome üzerinden rahatlıkla çalışabilen elRTE; BSD, MIT ve GPL lisanslarına sahip. elRTE'i sourceforce üzerinden buradan indirebilir veya demosunu buradan inceleyebilirsiniz.

Ayrıca Bakınız ;

angelsdemos: Blog | FriendFeed | Twitter | Email | RSS

Kaynak : elRTE

Bu yazı Guitarcraft tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Yuvarlak jQuery Slider : Tiny Circleslider

Guitarcraft — Thu, 25 Nov 2010 10:17:00 GMT

Tiny Circleslider, dairesel bir jQuery slider uygulaması.Bütün o klasik slider uygulamalarına alternatif olarak hazırlanan Tiny Circleslider, farklı uygulamalarda kullanılmak üzere jQuery ile inşa edildi. Basit, esnek ve oldukça kullanışlı bir jQuery uygulaması.

Uygulamada yer alan kırmızı noktayı daire çevresinde çevirdiğinizde diğer resimleri görmeniz mümkün. Ayrıca otomatik olarak değişmesini, rasgele resim seçmenisi sağlayabilirsiniz. Sadece resimlerin olduğu bölümlerdede klitlenme özelliğine sahip. Uygulamanın yarıçapını değiştirerek boyutlandırabilir ve uygulamayı tamamen kendi isteklerinize göre düzenleyebilirsiniz.

360 derece dönebilen ve tamamen özelleştirilebilen Tiny Circleslider'ın tek eksiği diğer slider uygulamaları gibi efetkleri bulunmaması. Fakat geliştirilme amacı da zaten efekt kullanımını anlamsız kılıyor. Ayrıca uygulamada yer alan fotoğraflarınızın büyük boy gözükmesi için birde küçük bir tooltip uygulaması yerleştirilmiş. Bu uygulama ile fotoğrafların orjinal hallerini açılan yeni pencerede görmeniz mümkün.

Sadece 140 satır kod ile hazırlanmış ve 4 kb. boyutundaki bu küçük ama kullanışlı jQuery uygulamasını buradan indirebilirsiniz. Buradan demolarını inleyelebilir ve ayrıca ayarlarına ve nasıl yapıldığına bakabilirsiniz.

Ayrıca Bakınız :

angelsdemos: Blog | FriendFeed | Twitter | Email | RSS

Kaynak : baijs.nl

Bu yazı Guitarcraft tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

En İyi ve Kullanışlı Greasemonkey Scriptleri

Guitarcraft — Mon, 13 Dec 2010 13:05:00 GMT

greasemonkey sağladığı kolaylıklarla profesyonel internet kullanıcılarının olmazsa olmazı haline geldi. bunun en büyük payı kullanıcılar tarafından geliştirilen ve sunulan binlerce kullanıcı scripti. bu scriptler ile sitelere ek özellikler kazandırabilir, gezintilerinizin daha hızlı ve kolay olmasını sağlayabilirsiniz. scriptlerin çoğu chrome ve opera için de destekleniyor. bu yazıda size son dönemde popüler ve işinize yarayacağını düşündüğüm birkaç kullanıcı script'i tanıtacağım.

YousableTubeFix

YousableTubeFix: youtube’a birçok kullanışlı özellik ekler. Bunlardan bazıları:

videoyu indirme
videoyu genişletme
reklamları ya da istenmeyen youtube bölümlerini kaldırma. (video bilgisi, başlık, bilgilendirme ve captions vs.)
varsayılan video kalitesini değiştirme
video bilgisini otomatik genişletme
videoyu otomatik başlatmayı kapatma
flash player kalitesini düşürme (cpu kullanımını azatmak için)

google image basic

google image basic: google'ın yeni tasarladığı resim aramayı beğenmediyseniz bu script tam size göre. resim araması yaptığınız zaman sayfa otomatik olarak temel sürüme geçer.

Fizy.com, audio results only

Fizy.com, audio results only: fizy'de şarkı ararken video sonuçlarını otomatik kaldırır. sadece ses sonuçları çıkmasını sağlar. kotalı ve bağlantı hızı düşük kullanıcılar için ideal.

Show Just Image 2: popüler ve olmazsa olmaz eklentilerden. image hosting sitelerinde resimlerin çevresindeki reklamları ve diğer şeyleri kaldırıp resmin direk adresine yönlendirir. 200’den fazla siteyi destekler ve sık sık güncellenir.

Google Reader Unread Count

Google Reader Unread Count: google reader’da kaç tane okunmamış öğe olduğunu tam olarak gösterilmesini sağlar. (normalda 1000’den fazlası 1000+ olarak gösterilir.)

Text to Link: yazı olarak verilen adresleri tıklanabilir adreslere çevirir. http://guttsay.bildirgec.org =>
http://guttsay.bildirgec.org gibi

Flashgames maximizer

Flashgames maximizer: facebook oyunlarını büyütür. Yaklaşık 20 oyunu destekliyor. Bu tarz oyunları oynayanlar için gerçekten büyük güzellik.

Youtube Thumbs: youtube’daki önizleme resimlerini fare üstüne gelince hareketlendirir. Videonun içeriği hakkında daha çok bilgilenmemizi sağlar.

facebook large images

Large images scriptleri: üstüne gelindiğinde resmin ayrı sayfa açılmadan büyümesini sağlayan scriptler. facebook, google images, youtube, filckr, twitter, imdb, amazon, smugmug için türleri mevcut.

Windows Live Ad Remover: Windows live mail (Hotmail)’deki reklamları kaldırır. Özellikle ufak bir ekranınız varsa (minibook, netbook gibi) sağ taraftaki reklamın kalkması çok yararlı oluyor.

rapidshare link checker

Rapidshare Links Checker: herhangi bir sitede verilen dosya barındırma (file hosting) siteleri linklerini otomatik kontrol eder. isminde sadece rapidshare geçmesi sizi yanıltmasın, 50'den fazla dosya barındırma sitesini destekliyor.

Facebook URL Cleaner: facebook’da adreslerdeki fazlalıkları çıkartır.
(facebook.com/home.php#/profile.php?id=725831319 =>
facebook.com/profile.php?id=725831319)

sizinde önereceğiniz scriptler varsa yorum olarak iletebilirsiniz.

ayrıca:

Web Geliştiricileri İçin En iyi 22 Firefox Eklentisi

Firefox için rapidshare eklentisi, Rapidshare downloader

en iyi 39 firefox eklentisi (her kategoriden 3 tane, en çok oy alanlar)

bütün yazılarım RSS

Bu yazı Guitarcraft tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Popüler 5 Online Renk Kombinasyon Aracı

Guitarcraft — Thu, 17 Dec 2009 10:18:00 GMT

Tasarımda en önemli unsur renktir. Yaptığın sayfa veya herhangi bir tasarımda renklerin uyumu çok önemlidir. Renk uyumunu sağlayamayan ya da yeni renk tasarımları, trend'leri takip etmek isteyenler için birçok uygulama mevcut. İşte en popüler 5 online renk düzenleme ve analiz aracı:

ColourLovers

ColourLovers sayesinde en son renk trendlerini takip edebilirisiniz. Dünya üzerindeki bir ağda kendi renk kombinasyonlarınızı yaratıp diğer insanların yorumuna açarak paylaşma imkanınız bulunmakta. Renkler için harika bir kaynaktır ve renk paleti sayesinde uyumlu renkleri kolayca seçmenize yardımcı olur. Desenler, arka planlar vb. oluşturma imkanınızda bulunmakta. En büyük artısı tüm renk paletlerini öğrenebilir ve dilerseniz kullanabilirsiz.

Kuler

Adobe'nin online araçlarından birisi olan Adobe Kuler ağır renk aracıdır. Farklı renk kombinasyonları üretmenize yardımıcı olur. Sosyal olarak ColourLovers kadar büyük bir ağı bulunmasa da oldukça geniştir. Profesyoneller için tasarlanmış Kuler size renkleri HSV, RGB, CMYK ve LAB şeklinde verir.Flash ve actionscript 3.0 ile hazırlanmış. Birçok ek aracı bulunmakta. Başlangıç için çok güzel bir araç olmaktla beraber son rötuşlarda o kadar iyi değil.

Color Scheme Designer

Renk uyumu önemlidir. Eğer siz bunu sağlayamıyorsanız diğer araçlar gibi Color Scheme Designer da birçok renk kombinasyonları yarabileceğiniz bir araç. Birçok hazır renk paleti bulunmakta. Hazırladığınız tasarımları HTML, XML şeklinde önizlemenize de olanak veriyor.Photoshop düzenlerini de kullanmanız mümkün. Tek eksiği temel renklerin bulunması ve fazla renk olmaması. Fakat yine de kullanışlı bir araç olduğu söylenebilir.

Color Combos

Ücretsiz renk kombinasyonları veren başka bir servis. Artı özelliğiklerinden biri ise Grab Colors servisi sayesinde istediğiniz web sitenin renk kombinasyonunu anında çıkartabilmesi. Başka bir özelliği ise Combo tester aracı ile renkleri test edebilir, yanyana nasıl durduklarına bakabilirsiniz. İsterseniz seçtiğiniz renklerden basit bir şablon oluşturmanız da mümkün.

ColorSchemer

Tek tık ile renk kombinasyonu oluşturabileceğiniz bir araç. Fakat diğer araçlar kadar kullanışlı olmaması sadece renk seçip kombinasyon üretebilmesindendir. Basit araçları sevenler için ideal bir yazılım.

Ayrıca Bakınız ;

angelsdemos : Blog | FriendFeed | Twitter | Email | RSS

Kaynak ; pxleyes

Bu yazı Guitarcraft tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

işte karşınızda jQuery ile Hazırlanmış Markitup Editor

Guitarcraft — Wed, 23 Dec 2009 07:32:00 GMT

Markitup Editor

Web site Admin panellerinde, Bloglarda veya arzu ettiğiniz herhangi bir uylamanızda bazen bir editöre ihtiyaç duyabilirsiniz. Markitup editor textarea üzerinde kurularak size online editör hazırlama imkanı sunuyor.

Markitup Editor

Kullanımı ve kurulumu oldukça kolay olan Markitup Editorun plugin desteği de bunuyor. Örneğin "Lorem ipsum" isimli eklentisi ile tek tıkla anlamsız kelimeler veya "Date of the day" eklentisi ile bugünün tarihini zahmetsizce ekliyebiliyorsunuz. Tabii ki tek marifeti plugin özelliği değil.

Buyrun bazı özelliklerine göz atalım;

Hızlı ve mütevazi entegrasyon

Herhangi bir textarea üzerine kolayca Entegre edebilirsiniz ve eklemek isteğiniz buttonları siz seçebilirsiniz.

Klavye kısayolları desteği

Favori klavye kısayollarınızı ve tuş kombinasyonlarını kendi isteğinize göre tanımlayabilirsiniz.

Araç çubuğu ve menüleri

Araç çubuğu menülerini de istediğiniz gibi ayarlama imkanına sahipsiniz.

Tamamen özelleştirilebilir ve script

Örneğin hazırladığınız bir script için kullanılan fonksiyon isimlerini Markitup editöre adapte edebilir özel buttonlar oluşturabilirsiniz.

Plugin desteği

Markitup editor için hazırlanmış eklentileri editörünüze adapte edebilir veya kendi eklentilerinizi tasarlayabilirsiniz.

Ajax ile dinamik önizleme

Yazdığınız kodları ajax aracılığı ile önizlemesini yapabilirsiniz.

Skins Özelliği

Evet yukarıdaki özellikleri yazdıktan sonra skin desteği özelliğine sahip olduğunu söylersem sanırım şaşırmazsınız. Editörünüze farklı skinler ekleyebilirsiniz.

Universal markup editor

Editörün kullanım örnekrini buradan inceleyebilir ayrıca Markitup editör için hazırlanmış örnek skinleri yine aynı sayfadan testedebilirsiniz.

Universal markup editor

icon setlerinden pluginlerine kadar Markitup editörle ilgili tüm Download seçenekleri tek bir sayfada toplanmış. Buradan Download sayfasına ulaşabilirsiniz.

Son olarak burdan da Markitup editor kullanımı için gerekli dökümanlara ulaşabilirsiniz.

Not : ilerleyen günlerde Markitup editörün kullanımı ile ilgili kodaman.org 'da bir yazı yazmayı düşümüyorum. Makaleyi yayımladığımda buradan link vererek sizlere bildireceğim.

Bu yazı Guitarcraft tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

farklı tarzlarda jquery ve css menüler

Guitarcraft — Mon, 07 Sep 2009 16:47:00 GMT

CSS ve JQuery ile hazırlanmış farklı tarzlardaki menüleri sizler için derledim. menülerin nasıl hazırlandığını menünün linkine tıklayarak öğrenebilirsiniz, isterseniz kodları direkt indirerek sitenize entegre edebilirsiniz.

1- Kutu dışında JQuery Navigasyon Menü - demo - download

2- gösterişli drop down menü jquery & css - demo

3- Yukarıdan Aşağı Açılır Menü Oluşturmak - demo - download

4- dairesel alt menü yapımı - demo - download

5- Olağan dışı Navigasyon menü yapımı - demo - download

6- Twitter'deki gibi Açılır login penceresi yapımı - demo - download

7- Sürgülü menü yapımı - demo - download

8- Mootool ssürgülü menü yapımı - demo - download

9- vimeo tarzı navigasyon menü yapımı - demo - download

10- Dinamik php/css menü yapımı - demo - download

11- JQurery Animasyonlu menü yapımı - demo - download

12- JQuery Header Menü Yapımı - demo - download

13- Çoklu Dosya Gösterimi - demo - download

Bu yazı Guitarcraft tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

web tasarımcıları için 16 firefox eklentisi

Guitarcraft — Sun, 23 Aug 2009 11:45:00 GMT

mozilla firefox tarayıcılar arasından öne çıkmış bir tarayıcı. belkide onu öne çıkaran eklentiler, temalar ile kişiselleştirilebilir olması. daha önce bir çok yerde ( *, *, * ) web geliştiricileri için firefox eklenti listeleri yapılmıştı. şimdi de sitepoint tarafından web tasarımcıları için firefox eklentileri listelenmiş.

renk araçları

colorsuckr renk skalası yaratmaya yarayan bir araç.

en çok kullanılan eklentilerden biri olan colorzilla photoshoptaki Eyedropper ve ColorPicker araçlarının görevlerini yapıyor.

firepalette firebug ile çalışan, firebug'un css panelini zenginleştiren bir renk aracı.

palette grabber websitesindeki renkleri bir palet halinde kullanmanız için photoshop, illustrator, flash, fireworks, gimp, paintshop pro ve türevi programlara uygun formata getiriyor.

ölçme/ölçüm araçları

gridfox şablon çıkartmak için harika mı harika bir araç websitelerinin tablolarını gösterebiliyor. örnek bir uygulamasını göstereyim:

measureit en iyi ölçme aracı olarak gözüküyor. herhangi bir elementin kaç piksel olduğunu measureit cetveli ile birkaç saniyede ölçebilirsiniz.

web sayfasındaki herhangi bir resim dosyasının ( jpg, png, gif ) köşelerini yuvarlak ( overlay ) hale gelirmek için ideal bir eklenti pixelperfect. çalışması için firebug eklentisi gerekli

diğer araçlar

firebug 17,346,759 indirme sayısı ile firefox eklentilerinin gözdelerinden. ne işe yaradığını sorarsanız css, html ve türevi dosyaları görerek düzenlemenize yarıyor diyebilirim kısaca.

fontfinder'in tam karşılığı yazı tipi bulucu. eklenti açıklamasında ise firefoxta seçili tüm metnin stilleriin firefox veya thunderbird'e alın deniliyor. denemediğim için birşey söyleyemeyeceğim bu eklenti hakkında.

window resizer adında anlaşılacağı üzere pencereyi farklı boyutlarda göstermeye yarayan bir eklenti.

webdeveloper'da en çok indirilenler - 11,882,236 indirme- listesinde başı çekiyor. web tasarım ve geliştirenlerin kesinlikle kullanması gereken bir eklenti. web tasarımcı ve geliştiriciler için bir toolbar.

view dependencies 'page info', sayfa bilgisi penceresi altında resimde görüldüğü üzere sayfaların boyutlarını belirtiyor.

ekran görüntüsü araçları

abduction sağ tıklama ile web sayfasının bir alanını veya tüm websayfasını resim olarak kaydedebilirsiniz.

en kapsamlı ekran görüntüsü eklentisi kesinlikle fireshotdur. bir milyonu aşan indirme sayısıda bunun kanıtı olabilir. aldığınız ekran görüntüsü üzerinde hiçbir program kullanmadan kesme, kırpma ve benzeri işlemler yapabiliyorsunuz.

imagezoom adlı basit eklenti websayfasındaki resimlere daha dikkatli bakmanız için %400e kadar büyütebiliyor.

picnik eklentisi resimlere sağ tıkladğınıda edit image in picnik özelliği ile resim düzenleme sitesi picnik.com'da resmi düzenlemesini sağlıyor.

pixlr picnik eklentisi ile aynı işi pixlr.com ile yapıyor.

Bu yazı Guitarcraft tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Modern Tasarımlar İçin Ücretsiz Fontlar

Guitarcraft — Sat, 01 Aug 2009 14:43:00 GMT

Sifr teknolojisini kullanarak istediğimiz yazıtipini (font) sitelerimizde kullanabiliyoruz. Grafik tasarımıyla ilgileniyorsanız ise aşağıda vereceğim ücretsiz yazıtipleri işinize yarayacaktır.

1. sansation typeface

2. fertigo pro typeface

3. megalopolis extra typeface

4. walkway typeface

5. nadia serif typeface

6. modeno font

7. m+ outline typeface

8. fontin sans typeface

9. diavlo typeface

10. museo typeface

11. gentium typeface

12. delicious typeface

13. junction typeface

14. cartogothic std typeface

15. anivers typeface

16. medio typeface

17. birra stout typeface

18. rezland typeface

19. often typeface

20. engel light typeface

21. contra typeface

22. nilland typeface

23. calluna typeface

24. quicksand typeface

25. mentone typeface

26. vegur typeface

27. swansea typeface

28. geosans light typeface

29. com4t nuvu regular typeface

30. steiner typeface

31. chunk typeface

32. aller sans typeface

33. juvelo typeface

34. goudy bookletter 1911 typeface

35. temporarium typeface

36. bellerose typeface

37. ambrosia demo typeface

38. surrounding typeface

39. circled typeface

40. nevis typeface

41. zephyr typeface

42. advent pro typeface

43. serifbeta typeface

44. evolution true type font

45. sliced ab typeface

46. technical forest v2 typeface

47. alte haas grotesk typeface

48. comfortaa typeface

49. mod™ font

50. whiteboard modern typeface

51. neighbourhood type

52. soraya font by justmytype

kaynak

Bu yazı Guitarcraft tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

siteniz profesyonel görünsün: yuvarlak köşeli table' lar

Guitarcraft — Thu, 30 Jul 2009 11:49:00 GMT

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

Bu yazı Guitarcraft tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage