bildirgec.org - zee - beğendikleri

Her Web Tasarımcısının Öğrenmesi Gereken 9 Önemli CSS Yeteneği

zee — Sat, 18 Jul 2009 08:49:00 GMT

Bu yazı giriş ve orta seviyedeki CSS öğrencilerine hitab etmektedir. Eğer CSS'yi sıfırdan öğrenmek istiyorsanız, o zaman muhtemelen pek çok teknikle, hile ile ve ders ile karşılaşmışsınızdır. Bu yazıda, her web tasarımcısının bilmesi gereken pek çok temel CSS yeteneklerine dair kendi yaklaşımımı yansıtmaya çalıştım. Aşağıdaki makaleleri gerçekten seviyorum ve bu sebeple sizlerle paylaşmaya çalıştım. Umarım beğenirsiniz.

1- CSS Anahatları Oluşturmak

CSS Anahatları Oluşturmak: PSD'yi XHTML'ye dönüştürmek için en iyi dersler

CSS Anahatları: 40+ Ders, İpucu, Demo ve en iyi yöntemler

2- Stilleme ve Listeler Kullanma

3- Kutu Modeli ve Pozisyonlamayı Anlamak

4- Daha iyi CSS Tipografisi

5- Formları Stillemek

6- CSS Çatılarını (Frameworklerini) Kullanmak

En çok kullanılan 12 CSS frameworkü ve onları nasıl anlayacağınız.
Web tasarımı için hangi CSS ızgara frameworkünü kullanmalı?
CSS Frameworkleri + CSS Sıfırlama: Sıfırdan tasarlama.

7- Optimize Etme ve En İyi deneyimler

8- CSS Hileleri ve İpuçları

9- CSS Düğmeleri, Kutuları ve Yuvarlatılmış Köşeler

Kaynak: acomment.

CSS İle İlgili Yazdığım Diğer Yazılar

Bu yazı zee 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

SEO için Altın Backlinkler -1

zee — Fri, 06 Feb 2009 07:46:00 GMT

SEO için en önemli unsurlardan biri sitelerimize kaliteli backlink sağlamaktır. Backlinklerin oluşturulma işlemi zahmetli ve uzun süren bir çalışmadır. Ayrıca sitemize sağlayacağımız linklerin kalitesi de bir diğer önemli unsurdur. Birçok dizin ve toplistlerden alacağımız linkler zaman zaman bizlere artı birşey katmazken, zarar dahi verebilirler.

Backlink Semasi

İşte biz seocular da bu backlinkleri sağlamak için uzun süren çalışmalarla belirlediğimiz bazı dizin ve diğer sayfalara linkimizi ekleriz. Şimdi sizlere uzun süren çalışmalarım sonucu hazırladığım bazı dizin ve sitenizin linklerini "tavsiye edilen siteler" bölümüne ekleyen link öneri ve ekleme sayfalarının adresleri ile birlikte paylaşmak istiyorum. Bu serinin ilkidir ve devamı da tarafımdan yazılacaktır.

Bu yazı serisi tamamen benim tarafımdan hazırlanmış olup başka hiç bir kaynakta bulamayacağınız bir içeriktir.

Listelenme Sırası : (Site Adresi) - (Kategorisi) - (Ekleme Sayfası Linki) - (Çeşidi) - (Domain PR)

Nature.com Recommended Links(Bilim)Ekleme Sayfası(Dizin) PR9

Education World(Genel)Ekleme Sayfası

(Diğer) PR8

Yahoo! Directory(Genel)Ekleme Sayfası(Dizin) PR8

dmoz (open directory project)(Genel)Ekleme Sayfası(Dizin) PR8

Artcyclopedia(Resim ve İnsanlık)Ekleme Sayfası(Dizin) PR7

Surfing the Net with Kids(Toplum)Ekleme Sayfası(Dizin) PR7

MRS Internet Journal of Nitride Semiconductor Research(Bilim)Ekleme Sayfası(Dizin) PR7

Get a Freelancer(Sektörel)Ekleme Sayfası(Dizin) PR7

The Paleontology Portal(Bilim)Ekleme Sayfası(Diğer) PR7

Cal State LA Recommended Music Websites(Resim ve İnsanlık)Ekleme Sayfası(Dizin) PR7

Podcasting Directory(Bilgisayarlar)Ekleme Sayfası(Dizin) PR7

Inc.com Recommended Start-Up Resources(Sektörel)Ekleme Sayfası(Dizin) PR7

North Carolina Health Information(Sağlık)Ekleme Sayfası(Dizin) PR6

UNIXguide.net(Bilgisayarlar)Ekleme Sayfası(Dizin) PR6

Localeye(Genel)Ekleme Sayfası(Dizin) PR6

Ananzi(Genel)Ekleme Sayfası(Dizin) PR6

Indiainfo.com(Toplum)Ekleme Sayfası(Dizin) PR6

TenLinks.com(Bilim)Ekleme Sayfası(Dizin) PR6

Ottawa Start(Toplum)Ekleme Sayfası(Dizin) PR6

Design Interact(Resim ve İnsanlık)Ekleme Sayfası(Ücretli Reklam) PR6

CancerIndex(Bilim)Ekleme Sayfası(Dizin) PR6

American Library Association Great Web Sites for Kids(Genel)Ekleme Sayfası(Dizin) PR6

Eat Well Guide(Toplum)Ekleme Sayfası(Dizin) PR6

New Zealand Tourism Online(Eglence)Ekleme Sayfası(Dizin) PR6

Wheelock College Recommended Websites(Genel)Ekleme Sayfası(Dizin) PR6

FreeIndex(Genel)Ekleme Sayfası(Dizin) PR6

eHub by Emily Chang(Genel)Ekleme Sayfası(Diğer) PR6

JoeAnt.com(Genel)Ekleme Sayfası(Dizin) PR6

SafetyDirectory.com(Sağlık)Ekleme Sayfası(Dizin) PR5

The Real Estate Library(Sektörel)Ekleme Sayfası(Dizin) PR5

Austin Astronomical Society (Bilim)Ekleme Sayfası(Dizin) PR5

Great Bridge Links(Eglence)Ekleme Sayfası(Dizin) PR5

Electronix Express(Bilim)Ekleme Sayfası(Dizin) PR5

Women's Health Matters(Sağlık)Ekleme Sayfası(Dizin) PR5

Linguistic Funland(Resim ve İnsanlık)Ekleme Sayfası(Dizin) PR5

Outdoor Ed(Eglence)Ekleme Sayfası(Ücretli Reklam) PR5

McGrew's Recommended Websites(Genel)Ekleme Sayfası(Diğer) PR5

Austin Community College Recommended Websites(Genel)Ekleme Sayfası(Dizin) PR5

Eat Well Guide(Sağlık)Ekleme Sayfası(Dizin) PR5

Blogger & Podcaster Guide(Medya)Ekleme Sayfası(Dizin) PR5

Madison Metropolitan School District Library of Student Recommended Sites(Genel)Ekleme Sayfası(Dizin) PR5

Quackwatch Interesting Web Sites(Genel)Ekleme Sayfası(Dizin) PR5

Bu yazı zee 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

Yararlı 14 Online Tipografi Aracı

zee — Tue, 10 Nov 2009 07:34:00 GMT

Bildiğiniz gibi tipografi web tasarımı işinde çok önemli bir yere sahiptir. Tasarım sürecinde işin tipografi yükünü hafifletmek ya da bu konuda işleri hızlandırmak için bazı araçlar kullanıcının hizmetine sunulmuş.

İşte size, web tasarım sürecinde tipografi ameliyenizi kolaylaştıracak ve tasarımlarınızı güzelleştirecek, online olarak çalışan on dört tipografi aracı:

CSS Type Set

Bu online araç, textinizi görsel olarak şekillendirmeye (yazi tipi, boyutu, rengi, harf aralığı vs...) yararken aynı zamanda bu değişikliklerin css kodunu da size vermektedir.

Type Teser

Fontların ekranda nasıl göründüğüne dair karşılaştırmalar yapmaya imkan veren online bir araçtır. Listeden siteye ait temel fontları seçebildiğiniz gibi kendi işletim sisteminizdeki fontları da seçebiliyorsunuz.

Type Chart

Bu arac size, tıpkı bir blogdaki yazılar gibi alt alta yerleştirilmiş hazır web tipografi seçenkleri sunuyor, beğendiğiniz kalıbın css kodunu alabiliyorsunuz.

What The Font?

Bir çoğunuz ne işe yaradığını biliyor,bilmeyenler de isminden çıkarabilir. Bu araca resim dosyası ya da resim linki kopyalıyorsunuz ve o resimdeki yazı tipini buluyor.

Font Strcut

Değişik geometrik şekiller kullanarak, bir grid üzerinde kendi custom fontuzu oluşturabildiğiniz bir araçtır. Üyelik sistemiyle çalıştığını da belirtelim.

Baseline Rhythm Calculator

Bir metinde font tipini ve satırlar arası aralığını görsel olarak ayarlayıp karar vermek için güzel bir araç. Sonucun CSS kodunu da kendi üretiyor.

PX to EM

Bu ara, Font boyutunun piksel ya da em olarak bir birine göre karşılıklarının ve bir referans size'a göre yüzdeliklerinin yer aldığı bir listeye sahip. Ayrıca kendiniz de değişik piksel ya da em değerlerini girerek karşılığını hesaplayabilirsiniz.

Font Burner

Bu aractan bir font seçiyorsunuz, size sitenizin body tag'ina gömmek için bir kod veriyor ve sitenizin fontu seçtiğiniz fontla değişiyor. Ne gerek var, doğrusu merak ettim, fikri olan?

Type Navigator

Dünyanın ilk interaktif ve de görsel font araştırma siteymiş. Bu yüzden listeye giriyor herhalde.

Font Tester

Ücretsiz bir CSS font karşılaştırma online araç Kolayca font önizlemesi ve karşılaştırma yapabileceğiniz bir yer.

Flipping Typical

Bir text giriyorsunuz ve bunu size birçok değişik font (toplam 61 tane olsa gerek) ile gösteriyor. İçlerinden karşılaştırma yapıp hangi fontu kullanacağınıza karar veriyorsunuz.

Identifont

İlginç bir araç olan bu uygulamada bir fontu tarifi ediyorsunuz o da bunu bulmaya çalışıyor. Fontu tarif etmek için size sorduğu soruları cevaplıyorsunuz. Sorular; q garfinin kuyruğu nasıl, m harfi köşeli mi yuvarlak mı, dolar işaretinde dikine iki çizgi mi yoksa bir tane mi? vb. şeklinde... Sanki karakolda, fontun robot resmini çizdiriyor gibi.

STC Font Browser
Bilgisayarınızda yüklü bulunan bütün fontları bir denem yazısıyla görüntelemek için yapılmış bir araç.

Convert TrueType Font to Sifr Flash File
adında analışıldığı üzere true type fontu flash sifr türüne çeviriyor ve e-mail yoluyla size yolluyormuş.

kaynak

Bu yazı zee 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 25 Tasarım Forumu

zee — Mon, 16 Feb 2009 14:46:00 GMT

Forumlar; kodlamaya, tasarıma, SEO'ya, pazarlamaya ve bloglamaya yönelik konular hakkında kolayca yardım alabileceğiniz mükemmel ortamlardır. Forumlar sayesinde http://www.allgraphicdesign.com/phpBB2/ sorunu çözmek için kodunuz üzerinde ya da Google üzerinde harcayacağınız zamanı büyük ölçüde kısaltabilirsiniz. Bunun yanı sıra ilgili siteler üzerinden sizinle aynı ilgi alanlarına sahip insanlarla ya da endüstrinin profesyonelleri ile yazışma imkanı doğar. Bir tasarımcı olarak bu tip sitelere daima ihtiyacım olduğunu düşnüyorum. Belki siz de bu siteleri kullanışlı bulursunuz. Bu tip forumlara katılmak bilginizi diğerleri ile paylaşmanızı sağlamakla kalmaz, ayrıca diğerlerinin güvenini kazanmanıza da yol açar. Örneğin eğer siz de benim gibi bir blog yazarı iseniz, bu tip popüler forumlarda oluşturacağınız güzel profiller sizin için mükemmel bir pazarlama aracı da olacaklardır.

1. Estetica Tasarım Forumu
Tipografi, fotografi, grafik tasarım, baskı tasarımı, logo tasarım ve marka kimliği, genel 3B ve daha pek çok farklı konularda kategorileri olan bir forum.

Mükemmel bir grafik tasarım forumu olan bu forumda 15.580 konu, 157.326 yazı ve 6.675 üye bulunuyor.

2. All Graphic Design
Tasarım tartışmaları, kritikler ve incelemeler, dersler, zorluklar ve yine takip etmeniz gereken dev bir tasarım komünitesi.

99.822 yazı, 13.998 başlık ve 6.894 üye.

3. Your Design Forums
Çok büyük bir forum olmayabilir ancak grafik tasarımı, web tasarımı, fotografi, kurumsal ve konu dışı gibi kategorilere katkıda buluna arkadaş canlısı bir komüniteye sahip.

1.959 başlık, 11.149 yazı, 4.938 üye, 1.873 aktif üye.

4. Grafik Tasarım Forumu
Oldukça büyük bir grafik tasarım komünitesine sahip bu forumda grafik tasarım, yazılım, fotografi, komünite gibi kategorilerin alt kategorileri de bulunuyor. Örneğin yazılım kategorisinde Adobe Ürünleri, Corel Ürünleri, Quark, 3B Yazılım ve diğer yazılım kategorileri yer alıyor.

568.254 yazı, 39.463 başlık ve 23.636 üye.

5. Grafik Tasarım Forumu (Birleşik Krallık)
Bir diğer grafik tasarım forumumuz da İngiltere'den. Forumun komünitesi henüz yeni ancak buna rağmen katılımcılar oldukça aktif. İsteklerinize çok çabuk yanıt alabilirsiniz ki bence forumların ana amacı da bu zaten.

410 konu, 2.037 yazı, 273 üye, 86 aktif üye.

6. Grafik Forumları
Genel, Tanıtm, Öğren ve Teknik gibi bölümlere ayrılmış bir grafik tasarım forumu.

26.306 konu, 267.160 yazı, 5.278 üye.

7. Steel Dolphin Forumları
Kategoriler: Sanat & Grafik Tasarım Tanıtımları, Yardım, İş, Freelance ve Salon.

6.356 konu, 47.489 yazı, 20.439 üye.

8. Typophile
Tipografi ile alakalı olan bu forum üzerinde kullanıcılar tipografiye yönelik sorularınıza yanıt bulabilir ve yardım alabilirsiniz. Dev bir komünitesi var. Veriler hakkında detaya giremeyeceğim ancak 200,000'in üzerinde yazının olması kötü bir şey olmasa gerek.

9. Forums: Freelance.uk
Birleşik Krallık'ta serbest çalışanlara yönelik bu forumda grafik tasarımı, web tasarım, gazetecilik, metin yazımı, fotografi, pazarlama ve hatta CAD forumu bile bulunuyor.

1.966 konu, 7.080 yazı, 6.615 üye, 2.946 aktif üye.

10. Webmaster Forum (V7N)
Pazarlama, bloglama ve web geliştirme hakkında her şey.

102.149 başlık, 988.877 yazı, 55.174 üye.

11. SitePoint Forum
Tasarım komünitesi arasında oldukça popüler olan bu forum grafik tasarımı, web tasarımı, sunucu ve site yönetimi gibi konuları kapsıyor.

585.252 konu, 3.992.339 yazı ve 301.049 üye.

12. Designer Talk
Grafik tasarımı, web tasarımı, web geliştirimi, SEO, reklamcılık ve daha pek çok konuyu kapsayan büyük bir forum.

40.057 başlık, 404.756 yazı ve 42.062 üye.

13. Digital Point Forum
Arama motorları, pazarlama, kurumsal, tasarım ve geliştirme, ürünler ve araçlar gibi konuları kapsayan alanındaki en büyük forum.

1.097.169 konu, 9.615.724 yazı, 232.428 üye, 60.423 aktif üye.

14. WebDesignerForum.co.uk

Tüm kodlama dillerini, SEO ve hatta Photoshop, Illustrator, Flash gibi yazılımları bile kapsayan, her web tasarımcısına yönelik bir forum.

Site bünyesinde 95.604 yazı yazmış 7.237 kayıtlı kullanıcı bulunyor.

15. CSS Chat Forum
CSS hakkında sohbet edebileceğiniz ve sorunlarınıza çözüm bulabileceğiniz bir forum.

33.307 konu, 155.391 yazi ve 17.718 üye.

16. CSS Beauty
Site bünyesinde web standartları, SEO ve pazarlama ile ilgili 3.000'in üzerinde başlık bulunuyor.

17. DaniWeb
463.376 yazılım geliştiricisinin, web geliştircisinin, İnternet pazarlamacılarını ve teknoloji uzmanlarının bir araya geldiği ve işleri güçleri yeni kişilerle tanışmak, iş paylaşmak ve birbirlerinden yeni şeyler öğrenmek olan insanların oluşturduğu dev bir forum.

18. Kirupa
Flash, Visual Studio, geliştirme sanatı ve tasarım, kariyer ve daha fazlasını kapsayan bir komünite.

272.060 başlık, 2.065.550 yazı ve 133.068 üye.

19. WTricks
Web tasarım ve geliştirimi hakkında tartışabileceğiniz, kaliteli rehberlere ulaşabileceğiniz ve ücretsiz indirmeler bulabileceğiniz bir forum.

4.590 konu, 33.302 yazı ve 1.445 üye.

20. OZZU Webmaster Forumu
Ozzu üzerinde profesyonel bir web yöneticisinin, tasarımcısının, programcısının, geliştiricisinin ya da web sanatçısının günlük işlerinde kullanabileceği her tür bilgiye ulaşabilirsiniz. Siteye katıldıktan sonra yeteneklerinizi ilerletebileceğiniz yarışmalara katılabilir ve yardım alabileceğiniz ya da diğerlerinin ilgisini çekebilecek yeni konuşar açabilirsiniz. Arkadaş canlısı bir komünitesi var.

60.932 başlık, 451.706 yazı ve 35.874 üye.

21. Webmaster Talk
Kodlama, grafik tasarımı, SEO, web yönetimi ve pazarlama hakkında konuşmaya başlayan.

143.040 konu, 769.187 yazı ve 71.328 üye.

22. Australian InFront
Tasarımla ilgili her şeyi kapsayan, Avustralya merkezli popüler bir forum.

36.007 konu, 313.451 yazı ve 18.986 üye.

23. KillerSites
Grafik ve tasarım ile ilgili olan bu komünite web tasarımı, programlama, grafik tasarımı ve dijital fotografi konularını ele alıyor.

10.683 konu, 59.895 yazı ve 9.013 üye.

24. StyleGala
Kodlama, CSS, web standartları, grafik tasarımı, kaynaklar ve tüm bunlarla ilgili her konuyu tartışın.

Site bünyesinde 24.000 civarında tartışma var ve eminim kendinize bir yer bulacaksınız.

25. Cre8site Forums
Kendilerinden İlham, Networking, Yaratıcı Web Siteleri ve Gelişmiş Çevrimiçi Kurumlara yönelik bir komünite olarak bahsediyorlar.

Site bünyesindeki 17.058 kayıtlı kullanıcı toplamda 267.631 yazı yazmış.

Her zaman olduğu gibi sizin de beğendiğiniz forumlar varsa yorumlarınızda belirtmekten çekinmeyin. Eminim bu liste bazılarınızın işine yarayacaktır.

Kaynak: 1stwebdesigner

Web Kaynakları İle İlgili Yazdığım Diğer Yazılar

Bu yazı zee 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

Başka Söze Gerek Bırakmayan Internet Portfolyoları

zee — Tue, 10 Feb 2009 14:35:00 GMT

Ekonomi kontrolden çıkmaya başladıktan sonra gün geçtikçe daha fazla tasarımcı endüstride ön plana çıkmaya başlıyor. Zaman ilerledikçe daha fazla kendi başına çalışan (freelance) tasarımcının belireceğini düşünüyoruz. Bunun sebebi de işe en başından başlamanın kolay oluşu, evden çalışabilme imkanı, normal işlerinin yanısıra fazladan para kazanabilme imkanı ve tatmin eden kariyer seçimi.

Geçen hafta yayımladığım sosyal medya özgeçmişi nasıl yazılır yazısından sonra biraz daha araştırma yapıp bazı tasarımcıların portfolyolarını inceledim. Bu portfolyolar iyi olmaktan öte mükemmeller ve iyi bir portfolyo sadece üzerinde çalışılmış birkaç iyi proje olmakla kalmıyor, onların portfolyanın kendisi ve yapılan işlerin kalitesi ile bütünleşmesinin bir sonucu olması gerekiyor... Pek çok durumda bu yapılan işin çokluğundan ziyade yapılan işin kalitesine bağlı oluyor.

Eğer siz de kendi portfolyonuzu yeniden tasarlamak istiyorsanız o zaman bu mükemmel portfolyolara bir göz atmanızı öneririm.

Kaynak: Inspiredology

Bu yazı zee 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

css'de uzman olmanızı sağlayacak 20 css dersi

zee — Sat, 14 Feb 2009 15:25:00 GMT

CSS'yi kodlamak kolay olabilir ancak buna rağmen her kodcuyu delirtebilecek bazı konseptleri de bulunmaktadır. Bu yazımızda kimilerine göre zor olan ancak anlaması oldukça kolay olan CSS derslerini bir araya getirerek CSS bilginizi bir adım daha ileriye taşımanıza yardımcı olacak dersleri inceledik.

1. CSS Sekmeler ve Navigasyon

1.1. Genişleyebilen CSS Sekmeleri Dersi
Genişleyebilir CSS sekmelerinin anlamı, sekmenin içerisindeki metnin uzunluğuna göre genişleyebilen sekme başlıklarıdır. Kodun özünde start.gif ve end.gif adında iki adet görsel bulunuyor. start.gif görseli boyutu genişletmek için kullanılırken end.gif görseli değişmeden kalıyor.

1.2. Gelişmiş CSS Menüsü
Bu rehberde Photoshop'taki watercolor efektini nasıl tasarlayabileceğiniz anlatılmış. Bu rehber size adım adım bir menü tasarımını nasıl kırpabileceğinizi ve ardından CSS kullanılarak nasıl onları bir araya getirebileceğinizi gösteriyor. Pek çoğunuz muhtemelen dikey ya da yatay menünün CSS ile nasıl kodlanacağını bilyorsunuzdur. Gelin şimdi bunu bir sonraki seviyeye taşıyarak CSS'nin position özelliğini kullanan gelişmiş bir menü tasarlayalım.

1.3. CSS Tabanlı Navigasyon
Bu rehberin amacı fare imleci bir menü öğesi üzerine getirildiğinde ilgili öğenin ön plana çıkarılması ile sonuçlanan CSS tabanlı bir menü oluşturmak.

1.4. Şık CSS Menüsü
Bu makalede bazı sevimli Javascript efektleri kullanılarak oluşturulmuş özel bir navigasyon çubuğunun oluşturulma aşamalarını öğreneceksiniz. Mootools kütüphanesinin işlevselliği sayesinde bu efekt sadece 1.5 KB'a sığdırılmış durumda. Bununla da kalmıyor ve ilgili menü hem çapraz tarayıcı desteğini bünyesinde barındırıyor hem de erişilebilir olduğu için arama motoru optimizasyonunu dikkate alanların gönlünü fethediyor.

1.5. Kayan Kapılar
CSS ile kayan kapılar tekniğinin nasıl kullanılabileceğine yönelik güzel bir makale.

1.6. Tanıtım Metni İçeren CSS Dikey Navigasyon
Navigasyon elementlerine tanıtım metni eklemenin yanısıra bu teknik sayfanız üzerindeki herhangi bir elemente açıklama eklenecek şekilde modifiye edilebilir. Örneğin profil adlarına, soru-cevap tarzındaki SSS sayfalarına, navigasyon elementlerine ya da diğer uygulamalara açıklama mesajları ekleyebilirsiniz.

1.7. CSS'de Sekmeli İçeriğin Üzerine Bindirme
Bu makalede Javascript kullanmadan ve çapraz-tarayıcı desteği bulunan, CSS ile hazırlanmış, bindirme desteği bulunan bir CSS sekmeli navigasyonun nasıl oluşturulabileceği anlatılmış.

2. CSS İle Yuvarlatılmış Köşeler

2.1. Box - Hepsi İçin Yuvarlatılmış Köşeler
Bu egzersizin amacı görsel olarak göze hoş gelen ve semantik olarak yazılmış en az miktarda kod kullanarak yuvarlatılmış köşeler oluşturmak. Ayrıca bu kutuların boyutu gerektiğinde değiştirilebilmeli de. İlk kutu için gerekli olan XHTML ve CSS kutunun hemen alt kısmında yer alıyor.

2.2. CSS'de Yuvarlatılmış Köşeler
CSS'de yuvarlatılmış köşeler oluşturmaktan bahsediyorduk ve arkadaşıma kendi yöntemimi gösterdim. Bunu gerçekleştirebilmek için diğer yöntemlerin de olduğunu biliyorum ancak bu yöntemlerin pek çoğı karmaşık HTML ve CSS kullanımını gerektiriyor. İç içe girmiş DIV'lerin tablo kullanmaktan çok daha iyi olmadığının farkına vardım. Bu sebeple benim yöntemim HTML ve CSS açısından fazla bir kod gerektirmiyor.

pinkfloyd'un notu: Her ne kadar burada arkadaşımız tablo kullanma yoluna gitmiş ancak siz sakın zorunda olmadıkça bu yöntemi denemeyin. Tabloları sitenizin anahat elementlerini oluşturmak için kullanmak yanlıştır.

3. CSS Fotoğraf Galerisi

3.1. Hoverbox Görsel Galerisi
Efekt için anchor bağlantısı kullanılmış zira IE'de :hover ast sınfının tek desteklendiği element bu. Her ne kadar kullandığım bu örnekteki tüm bağlantılarda # bağlantısını kullanmış olsam da siz görsellerin tam boyutlu sürümlerine bağlantı verebilirsiniz.

3.2. Çapraz Tarayıcı ve Çoklu Sayfa Destekli Fotoğraf Galerisi
Suckerfish HoverLightbox'dan esinlenmesine rağmen bu örnekte benim geliştirdiğim, metin yerine görsel kullanan çoklu sayfa anahat sistemini kullandım.

Suckerfish HoverLightbox'un aksine bu sürüm JavaScript'e ihtiyaç duymuyor ve sadece CSS kullanılmasına rağmen IE üzerinde sorunsuz çalışıyor.

3.3. Kayan Fotoğraf Galerileri
Bu galeri benim bugüne kadar geliştirdiğim en sade galeri. Dikey olarak 8:1 oranında sıkıştırılmış görselleri sırasız liste üzerinde kullanıyorum. Bu görsellerden birinin üzerine fare imlecinizi getirdiğinizde sıkıştırılan bu görseller tam boyutuna genişliyor. Kayan menü sistemimi temel aldığım bu örnekte metin yerine görsel kullandım. Herhangi bir küçük resim kullanmaya gerek yok ve tüm görsel önceden yükleniyor. Bu yöntem hem dikey hem de gösterildiği gibi yataay olarak kullanılabilir.

4. CSS Gölgeler

4.1. CSS Gölge Efekleri: Fuzzy Shadows
Bu makalede:

IE harici tarayıcılarda bir stil şablonunu nasıl gizleyebileceğimizi ve bu sayede ilgili belgenin doğrulanmasını engellememeyi,
IE5.5 ve IE6'da PNG saydamlığının nasıl doğru olarak görüntülenebileceğini,
Yukarıdakileri kullanarak nasıl gölge efekti oluşturabileceğimizi öğreneceğiz.

4.2. CSS Gölgeler
Bu makalede bir başka tekniği inceleyeceğiz. Diğer tekniklerin pek çoğu negatif marj kullanırken bu örnekte bağıl pozisyonlama kullanılarak nasıl gölge efekti oluşturabileceğimizi göreceğiz.

5. Diğer CSS İpuçları ve Hileleri

5.1. IE Çift Yüzen Marj Hatası
Eminim bununla pek çoğumuz boğuşmuşuzdur, zira en sık kullanılan css "hilelerinden" birisi de budur. eğer bu hata ile daha önce karşılaşmadıysanız hemen özetleyelim: ie6'da üzerine 'margin' uygulanmış yüzen (float) bir element kullanıyorsanız, bunun ilgili tarayıcı üzerinde doğru pozisyonlanmadığını göreceksiniz. ne şans ki ie6'nın bu hatasını gidermek çok basit.

5.2. CSS Çapraz Tarayıcı Saydamlığı
İster inanın ister inanmayın tüm tarayıcılar üzerinde CSS'nin saydamlık elementini doğru bir şekilde kullanmak mümkün. Bu teknikle IE, Firefox, Safari, Opera ve Netscape Navigator gibi eski tarayıcıları bile kapsayabiliriz.

5.3. Kapanır Tablolar: Bir Örnek
Aşağıdaki tabloların her bili "footcollapse" adı verilen bir sında dahiller. Bu sayede kullanılan betik ok görselini altlığa yerleştiriyor ve üzerine tıkladığında tablonun kapanıp açılabilmesini sağlıyor.

5.4. CSS İle İçerik Üzerine İçerik
Kapsayıcı üzerine fare imlecini getirdiğinizde halihazırda var olan içeriğin üzerinde yeni bir kapsayıcı belirecektir. Bu teknik position:relative tekniğini kullanarak statik içeriğin mutlak olarak pozisyonlanmış içeriğin üzerinde görüntülenebilmesini sağlıyor.

5.5. CSS Yakınlaştırma
Son zamanlarda metni yeniden boyutlandırabilme özelliğini barındıran bir web sitesinin yeniden tasarlanmasında çalışıyorum. Sitenin hitab ettiği kesimin yaş ortalaması biraz yüksek, bu sebeple büyük boyutlu metin kullanmak onlar için önem taşıyor. Ve siz insanların tarayıcılarında halihazırda bulunan bu özelliği kullanmaları gerektiğini söyleyip üzerime yürümeye başlamadan önce pek çok ziyaretçinin bu tip özelliklerin farkında olmadığını ve benzer özelliğin sitenin içine gömülmesinden memnun olduğnu hatırlatmak isterim.

5.6. CSS İle Oluşturulan ve Sonradan Beliren Görsel Açıklamaları
Bu örnekte ise görsel açıklaması ve tanıtım tekniğini bir arada kullandım. Görselin açıklamasını bir bağlantı içerisine dahil ettim. Yapmak istediğim şey ise ilgili açıklamayı kullanıcı görsel üzerine fare imlecini getirene kadar gizlemek.

Kaynak: DWS mg

CSS Üzerine Yazdığım Diğer Yazılar

Bu yazı zee 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

960 css çatısına yakından bakış

zee — Sun, 15 Feb 2009 13:13:00 GMT

CSS çatılarının (framework) sayısı her geçen gün biraz daha artıyor. CSS çatıları özellikle CSS ile kod yazmak konusunda henüz kendisini yeteri kadar geliştirmemiş olanlar için kimi zaman oldukça kullanışlı bir hal alabiliyor. Ancak bazı CSS profesyonellerine ve diğer dillerin programcılarına göre CSS, üzerine bir çatı geliştirilmesi gerekecek kadar zor bir dil değil.

Eğer herhangi bir CSS çatısı üzerine bir rehber okuduysanız, ilgili rehberlere bırakılan pek çok yorum yukarıdakilerle aşağı yukarı aynıdır. Benim görüşüm bu tip yorumların büyük çoğunluğunun bir miktar tatminsizliğe bağlı olduğu yönünde. 960 üzerinde biraz zaman geçirdikten sonra, web uygulamalarınızı geliştirirken size ne kadar zaman kazandırabileceğine inanamayacaksınız. Hiç olmazsa ilgili çatıyı sadece bir 10 dakikalığına inceleyin. Her zaman klavyenizin delete düğmesine basabilirsiniz ancak bunu yapacağınızdan şüpheliyim.

Artıları

Geliştirme zamanını önemli ölçüde kısaltıyor.
Temiz ızgara yapısına sahip.
Farklı tarayıcılar üzerinde problemlerle karşılaşma ihtimaliniz çok düşük. Bulduklarınızı da kolayca düzeltebilirsiniz.
Pek çok kişinin söylediğinin aksine "abartılmış" değil. Burada 3-4 KB'den bahsediyoruz arkadaşlar! Bu tip stillemelerinin pek çoğunu zaten neredeyse tüm web uygulamalarında kullanıyorsunuz.
Karmaşık anahatları kolayca oluşturun.

Eksileri

Adının "960" olmasının bir nedeni var. Web siteniz için başka bir genişliği kullanmak istiyorsanız, o zaman diğer çatılara göz atmanızı öneririm.
Diğer tüm "çatılarda" olduğu gibi bazı kısıtlamalarınız yok değil.
Onu siz yapmadınız. Kodun %100'ünün size ait olmasının verdiği his bir başkadır.

Kullanım
12 sütuna sahip bir altyapı üzerinde aşağıda gördüğünüz gibi oldukça sade bir anahat hazırlmak istediğinizi hayal edin. İlk olarak "container_12" adındaki bir sınıfa sahip bir kapsayıcı bir div oluşturmamız gerekiyor. 12'ye dikkat edin.

<div id="container" class="container_12">  
...içerik buraya  
</div>

Burada bir ID tanımlamanızın kesinlikle gereği yok ancak ben özellikle divin ne amaçla kullanıldığını daha sonra kolayca anlayabilmek adına divlerime genellikle bir ID atarım. 960'ın kötü yanlarından birisi de sınıfların elementin ne amaçla kullanıldığını belirtecek herhangi bir tanım içermiyor oluşu. Bu sebeple DIV'e bir ID ekleyerek bu kavram sorununu kolayca gidermiş oluyoruz.

Izgaralar

Şimdi de basit bir başlık ve iki sütunlu bir altyapı oluşturmak istiyoruz. Başlamadan önce tanıtıma bakarak ne kadar genişlikte bir ızgara kullanmak istediğinize karar verebilirsiniz.

Başlık genişliği olarak 940px seçeceğim (+20 px de marjlar için = 960), yan çubuk genişliği için 220px ve ana içerik kısmı için de 700 px seçeceğim.

Her bir div elementini bir sınıfa dahil etmelisiniz. Çatının kurallarına göre sınıf isimleri "grid_" öneki ile başlamak ve devamında istenen sütun sayısını girmeniz gerekli. Bizim durumumuzda "grid_12", "grid_3" ve "grid_9" sınıflarını kullanacağız.

<div id="container" class="container_12">  
  <div id="header" class="grid_12">  
    içerik buraya  
  </div>  

  <div id="sidebar" class="grid_3">  
    içerik buraya
  </div>  

  <div id="mainContent" class="grid_9">  
    içerik buraya  
  </div>  
</div

Çatının sunduğu stillerin üzerine her bir div için arkaplan rengi ve minimum genişlik ekledim. Bunu koda eklemedim zira sadece sütunları tanıtımda daha belirgin yapmak için ilgili stilleri kullandım.

Marjlar, yüzen divler ya da IE hileleri ile boğuşmadan bu anahattı inanılmaz derecede çabuk bir şekilde hazırladık. 960'ın gerçek gücü özellikle karmaşık gazete-benzeri arabirimler geliştirmek istediğinizde ortaya çıkıyor. Bu konuda daha fazla bilgi almak istiyorsanız buradaki screencast'ı izleyebilirsiniz.

960 GS İle İlgili İlginizi Çekebilecek Diğer Kaynaklar

960 CSS Çatısı İle Prototip Oluşturma
Grid 960 bir CSS çatısı olup geliştiricilerin hızlıca prototip tasarımlar oluşturabilmelerini sağlıyor. Şablonlar oluşturabilmek için inanılmaz araçlar bulunuyor? Neden mi? Çünkü hepsi sizin daha hızlı sonuçlar alabilmeniz için işin zor kısmını sırtınızdan alabilmenizi sağlıyor.

Makaleyi Ziyaret Edin

WP_Query ve 960 CSS Çatısı İle Gazete Teması Oluşturun
WP_Query oldukça güçlü bir araçtır. Bugün ilgili aracı kullanarak nasıl 3 sütunlu gazete şablonu oluşturabileceğinizi göstereceğim. Ana sütunda tüm blog girdileriniz yer alırken, yanlara ilerledikçe belirli kategorilere ait blogları listeleyeceğiz. Temel anahattımız ve temamızı sıfırlamak için 960 CSS çatısını kullanacağız ki bu sayede, işin büyük bir kısmı tamamlanmış olacak.

Makaleyi Ziyaret Edin

Web Tasarımı İçin Hangi CSS Çatısını Kullanmalısınız?
WordPress ve diğer platformlar için o güzel "magazin" temalarının nasıl oluşturulduğunu hiç merak ettiniz mi? Hepsi olmasa da pek çoğu, CSS Izgara Çatıları kullanılarak geliştirilmiştir. Bu yüzden siz de halihazırda sunulan CSS çatılarını kullanarak kendi magazin temanızı oluşturabilirsiniz. Karmaşık web sayfası anahatlarını çatı kullanmadan oluşturmak mümkün olsa da bunun günümüzde mazoşist bir tutumun bir ürünü olduğunu söylemek yanlış olmaz. Bu makalede günümüzde sunulan çatılara genel bir bakış atacak ve hangisini kullanmanız gerektiğine birlikte karar vereceğiz.

Makaleyi Ziyaret Edin

Kaynak: NETTUTS

CSS Çatıları Hakkında Yazdığım Diğer Yazılar

Bu yazı zee 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

30 Adet Mükemmel Tasarım Örneği

zee — Sat, 21 Feb 2009 13:01:00 GMT

İnternet üzerindeki muhtemelen zilyon tane web sitesi üzerinden en iyi tasarıma sahip 30 adet web sitesini nasıl seçersiniz? Elbette bunlardan en az 10 milyar tanesi kolayca es geçilebilir. Hani şu gerçekten kötü olanları. Diğer 5 milyar tanesi declare averaj kategorisine dahil edilebilir. 2 milyon tanesi muhtemelen çok güzeldir ve 30 tanesi de mükemmele yakındır. İşte ben de bu yazımda kendimce en mükemmel tasarıma sahip 30 adet web sitesini sizlerle paylaşmak istiyorum.

Eminim muhtemelen yanılacağımdır. Listemde bahsedeceğim bu denli az sayıda web sitesi varken, her birinden ayrı ayrı bahsetmem mümkün olmaz. Ve ardından muhtemelen bazılarınız bana katılmayacaktır ki bunda hiçbir problem yok. Eğer bana katılmıyorsanız lütfen bana söyleyin, zira konuşmak güzeldir. Ama gerçekten bu mükemmel 30 web sitesi arasından en iyisini nasıl seçebilirim? Bence mümkün değil. İşte bu yüzden ben de bu 30 web sitesini birinci ilan ediyorum. İşte buyrun.

1. sifterapp.com

Gerçekten sade, tek sütunlu ve hafif bir web sitesi. Pastel renk şeması kullanılmış.

2. spadewerk.com

Günümüzde logolarında yaprak kullanan pek çok web sitesi bulunuyor. Spadewark sitesi de onlardan beri. Ancak ilgili logonun site genelinde kullanma şekli SW'yi diğerlerinden farklı kılıyor. Mükemmel yeşil renk şeması ve tipografisinin yanısıra kendine özgü tasarımı ile beğendiğim sitelerden biri.

3. mailbuild.com

Mailbuild bir süre önce kampanya izleme özelliğini de servisleri arasına dahil etti. Siteleri artık tek sütunlu bir arabirim üzerinde bu yeni servisten ve müşterilerinin neler yapması gerektiğinden bahsediyor. Ancak bu tasarım gerçekten kendini ön plana çıkarmayı başarıyor. Arkaplanda kullanılan derin mor renk, ön paneldeki saf beyaz ile birleşiyor ve başlıkta gözlenen ayrıntılar da tasarımı güzel kılıyor.

4. culturedcode.com/things

Cultured Code mükemmel uygulamalar yazan bir firma olup markası da bir o kadar muhteşem. Bildiğim kadarıyla sitenin genel tasarımı hazırladıkları uygulamaların arabirimlerine de entegre edilmiş durumda her bir uygulamanın kendine özgü sayfası bulunuyor. Tasarımın sadeliğinin yanısıra renkli logosunu ve ekran görüntülerini çok seviyorum.

5. UXLONDON

UX London web sitesini birkaç nedenden ötürü seviyorum. Renk şemasının özellikle sofistike olduğunu düşünüyorum. Bunun yanısıra sitede bulunan renkli "bantların" tasarıma bir canlılık kattığına ve içeriği birlikte tutabildiğine de dikkat ettim. Tarayıcı penceresini de yeniden boyutlandırmayı bir deneyin. Site elementlerinin sanki yüzüyormuşçasına bir efekte sahip olduğunu göreceksiniz. İyi inşa edilmiş ve erişilebilir bir site olduğuna şüphe yok.

6. Design Commission

Modern olduğu kadar şık bir his uyandırıyor. Hafif ve havalı bir tasarımı olmasının yanısıra arkaplanda kullanılan kaya / taş döşemesi de ayrı bir zenginlik katmış. Sitenin alt kısmında yer alan parlak kırmızı renkli menüsü ile gerçekten güzel ve kendine özgü bir site.

7. YouKnowWhoDesign.com

Sizin de katılacağınıza emin olduğum mükemmel bir tasarım. Mükemmel bir renk şeması, mükemmel logo yazısı ve güneş yanığı tarzında mükemmel bir arkaplan. Tüm bunların birleşimi ile akılda kalıcı bir tasarıma sahip web sitesi ortaya çıkmış.

8. unblab.com

Unblab gerçekten özgün ve özel bir siteye sahip. Karanlık arkaplan ve parlak beyaz içerik alanı ile farklı bir tasarıma sahip. Siteye daha fazla renk katmak için tasarımcı baloncuk tarzında bir arkaplan efektinin yanısıra bazı saydamlık elementleri dahil etmiş.

9. training.collectiveidea.com

Gümüşümsü bir logo ve dönerli arkaplanı ile mükemmel bir tasarım. JavaScript'in kullanım şeklini ve logonun hemen altında kullanılan kısmı seviyorum. Bu tip kullanımlar çok miktarda içeriğin az bir alan kaplayarak ziyaretçiye nasıl verimli bir şekilde kullanılabileceğine dair güzel örnek bir teşkil ediyor.

10. macrabbit.com/espresso

Renkler arasındaki farklılıklar ile oynayarak ortaya güzel bir tasarım çıkaran bir site daha. Mac Rabbit sitesi de bunu başarılı bir şekilde kullanarak dikkat çekivi ve göze rehberlik eden bir siteyi sade ve verimli bir tasarımla bütünleştirebilmiş. Sitede kullanılan kahve vektör illüstrasyonunu gerçekten seviyorum. Hoş.

11. Carbonica.org

Carbonica web sitesi, çeşitli programlar aracılığı ile Orta Amerika'daki karbon salınımını azaltmayı hedefleyen bir web sitesi. Sitenin tasarımı da mottosunu tamamen yansıtır nitelikte. Karton kutu tasarımlar ve kurşun kalemle yazılmış hissi uyandıran metinler gibi ince detaylar, sitenin sanki geri dönüştürülerek yeniden kullanıma kazandırılmış elementlerden oluşturulduğu hissini veriyor. Sitenin tüm bu elementleri destekleyen güzel bir renk şeması da var.

12. Thinkdesignblog.com

Derinin, ahşabın ve kullanılmış kağıdın muhteşem bir şekilde kullanıldığı mükemmel bir site.

13. 13creative.com

Neredeyse elle oluşturulmuş hissini uyandıran mükemmel bir tasarıma sahip bir web sitesi. Gerek seçilen renkler, gerekse de kullanılan döşemeler ile mükemmel bir uyum sergileyen kullanılan sitenin iki katmanlı menüsü de görülmeye değer.

14. Friskdesign.com

Okyanus temalı bir web sitesi.

15. delugestudios.com

13Creeative sitesinin tasarımcıları olan Deluge Studios'un kendilerine ait olan web sitesinin de ilgi çekici bir renk şeması ve döşemesi mevcut. Tasarım gerçekten farklı.

16. designme.sk

Merak Levak mükemmel bir portfolyo oluşturmuş. Karakalem renkler ve eski ahşap görünümlü arkaplanı ile bu portfolyo karanlık olduğu kadar iyi tasarlanmış.

17. nikolamircic.com

Bu site oldukça sade görünse de tasarımı üzerinde uzun süre düşünüldüğüne şüphe yok. Menü üzerine ya da tasarım örneklerinin üzerine fare imlecinizi götürmeyi bir deneyin. Abartısız ve bir o kadar da mükemmel bir tasarım. Sitede öncelik içeriğin kendisine ve yapılan işlere verilmiş. Mükemmel bir site.

18. metalabdesign.com

Meta Lab tasarımı kendi adlarını baz almışlar ve tasarımlarını ona göre oluşturmuşlar. Sitenin tamamlanmış halinin kliniksel (tıpkı bir laboratuvar gibi) bir görünüme kavuştuğunu söylersem yalan olmaz. Br diğer hafif ve sade bir tasarım örneği.

19. Pixelmator.com

Sanırım bunda herkes hemfikir olacaktır. Detaylarına inmeye gerek yok. Tek kelime ile mükemmel bir web sitesi.

20. guilhermeneumann.com

Guilherme Neumann'ın çok güzel ve net bir portfolyosu var. Her bir örnek üzerinde ise ona ait açıklama beliriyor.

21. taptaptap.com

Oryantal bir temaya sahip mükemmel bir web sitesi. Sushi ve soya sosu ile süslenmiş bir görünüme sahip olan sitenin arkaplanını ve logosunu çok beğeniyorum.

22. Django Project

Tümüyle yeşil bir tasarım biraz fazla kaçabilir, tıpkı biu Web çatısında olduğu ibi. Ancak Django projesinin tasarımcıları bu anlamda ortaya çok güzel bir iş çıkarmışlar. Mükemmel bir çoklu-sütunlu tasarım ve gerçekten özenle seçilmiş renk paleti.

23. rawkes.com

Uzay teması ile tamamlanan Rob Hawkes'in portfolyosu sade olduğu kadar görsel anlamda çekici de.

24. winnielim.com

Winnie Lin'in sitesinde beni en çok etkileyen şey sitede kullanılan grafiklerdeki yazılar. Sitenin sağ kısmında bulunan kitap tarzındaki navigasyonu da güzel. Tasarımı da fena değil.

25. nikibrown.com

Bu site tam bir yıldız. Portakal renginin yanısıra beyaz ve ahşabın mükemmel bir kombinasyonu olan bu sitedeki beyaz içerik alanı gerçekten ön plana çıkıyor. Özellikle sağ üst kısımda bulunan ataç ayrıntısı ise beni benden alıyor. İçeriği rahatsız etmeyen bu tip ince detayları çok seviyorum. Site sanki gerçekten bir masa üzerine dağılmış gibi.

26. fortyagency.com

Forty Agency sitesi de diğer pek çok site gibi tek sayfadan oluşan bir web sitesi. Pek çok tasarım elementini de sayfa içine sığdırmayı başarmışlar. Çok hafif yuvarlatılmış köşeler, oldukça fazla miktaarda yeşil ve post-it parçacıkları tasarımı tamamlayan öğeler arasında yer alıyor. Sonuçta ise ortalama bir müşterinin bir şirketten beklediği içeriğin tamamı tek bir sayfa üzerinden sunulmuş oluyor.

27. Silverbackapp.com

Ne mükemmel bir tasarım ama değil mi? John Hicks tarafından tasarlanan bir goril, mükemmel bir paradoks efekti (tarayıcınızı yeniden boyutlandırmayı deneyin) ve bir sürü muz. Sitenin tasarımı, içeriği hiçbir şekilde rahatsız etmeden pek çok tasarım elementini site içerisine eklemeyi başarmış.

28. 31three.com

Jesse Bennet-Chamberlain'in portfolyosu. Jesse'nin sitesi, ona uygun renk seçimi ile gerçekten öne çıkıyor. Her bir ayrıntısı ile mükemmel bir site.

29. Colingrist.com

Özünde çok sade olan bu tasarımda en sevdiğim şey, logonun vurgulanma şekli. Başka söze gerek yok.

30. Hicksdesign.co.uk

Ve son olarak John Hicks'in sitesi. Tasarımcı web üzerinde kullanılan, aralarında Firefox'un da bulunduğu pek çok logonun tasarımcısı. John'un sitesi sade version yan çubuğu sitenin genelinden ayrılmış. Arkaplanın kullanım şekli de ilgimi çekiyor.

Benden bu kadar. Sizin de bu listeye eklemek istediğiniz tasarım şaheserleri var mı? Benim listeye eklediğim ancak sizce listede olmaması gereken siteler neler?

Kaynak: styl.eti.me

Tasarım Örneklerine Dair Yazdığım Diğer Yazılar

Bu yazı zee 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

Size Sıfırdan Photoshop Öğretecek 35 Kaynak

zee — Mon, 23 Feb 2009 19:13:00 GMT

Adobe Photoshop çok güçlü ve değişken bir görsel düzenleme / grafik oluşturma uygulaması olup kategorisinde bir endüstri standardı haline gelmiştir. Her ne kadar Photoshop'un arayüzü daha önce uygulamayı hiç kullanmamış olanlar için bile uygulamanın temellerini anlayabilmelerini sağlayacak kadar verimli olsa da uygulamanın size sunabileceği sayısız özelliği öğrenebilmek oldukça uzun zaman gerektirmektedir.

Eğer siz de Photoshop yeteneklerinizi iyileştirip etkileyici kompozisyonlar oluşturmak istiyorsanız bu yazı sizin için. Bu yazıda size sıfırdan Photoshop öğretecek 35 Photoshop kaynağını listelemeye çalıştım.

Genel Dersler

1. Photoshop'un Temelleri

Eğer daha önce Photoshop'a dair hiçbir deneyiminiz olmadıysa, SitePoint'in yayımladığı bu ders Photoshop'un temel özelliklerini anlamanıza yardımcı olacaktır.

2. Adobe Photoshop Arayüz Rehberi

Bu ders Photoshop CS2'nin arayüzünü anlatıyor. Eğer Photoshop'un daha eski ya da daha yeni sürümlerinden birini kullanıyor olsanız bile bu ders sayesinde Photoshop'un arayüz elementlerini daha yakından tanıyabileceksiniz.

3. Photoshop'ta Başarısızsınız (yazı dizisi)

Bu eğlenceli ve çok popüler Photoshop video dersleri serisi eğlenirken öğrenmeyi sevenler için tam bir biçilmiş kaftan.

4. Photoshop'un Araç Kutusu

Bu rehber, Photoshop Araç kutusunun anatomisi hakkında okurlarını bilgilendiriyor.

Photoshop Araçları ve Özellikleri

5. Retouch ve Healing Araçları

Photoshop üzerinde görsellerde ufak değişiklikler ve ince ayarlamalar yapabileceğiniz pek çok araç ve seçenek bulunmaktadır. Bu rehber işte bu araçları inceliyor ve her bir aracın hangi durumlarda kullanılması gerektiğini örnekleriyle anlatıyor.

6. Photoshop'un Kalem Aracı: Tam Rehber

Photoshop'un kalem aracı vektör benzeri bir yöntemle nesneler çizebilmenizi sağlıyor. Bu derinlemesine inceleme, yazılımın Kalem aracı üzerinde alıştırmalar yapabileceğiniz bazı örnekleri de bünyesinde barındırıyor.

7. Photoshop'un Boyama Araçları

Photoshop'un boyama aracı nesneleri renklerle ve renk geçişleri ile süsleyip doldurabilmenizi sağlıyor. Bu rehber, Photoshop'un boyama yeteneklerini inceliyor.

8. Photoshop'un Renk Değiştirme Aracı

Bazen bir görsel üzerindeki belirli bir rengi başka bir renkle değiştirmek isteyebilirsiniz. Renk Değiştirme aracı ile değiştirmek istediğiniz rengi belirliyorsunuz ve işin geri kalanını Photoshop hallediyor. Bu rehber renk değiştirme işleminin aşamalarını inceliyor ve bu araç ile ilgili bilmeniz gereken her şeyi öğretiyor.

9. Katman Maskelerini Anlamak

Photoshop'ta öğrenilmesi gereken en önemli özelliklerden birisi de yazılımın maskelemedir (kompozisyonun bazı bölümlerini izole etme). Bu derinlemesine rehber Photoshop'un Katman Maskeleme özelliklerini inceliyor.

10. Photoshop'un Görsel Maskeleme araçları

Bir Photoshop kompozisyonu üzerinde nesneleri maskeleyebilmek için farklı yöntemler bulunmaktadır. Bu rehber yazılımın size sunduğu temel maskeleme özelliklerini inceliyor.

11. Photoshop'ta Katman Stilleri

Katman Stilleri, Photoshop üzerinde belirli bir katman üzerine uyguladığınız efektleri ve diğer seçenekleri içerir. Bu rehber Katman Stilleri konseptini inceliyor ve onları Photoshop belgelerinize nasıl uygulayabileceğinizi anlatıyor.

12. Eğri (Bevel) ve Kabartma (Emboss) Özelliklerini Anlamak

Bevel ve Emboss bir tür Katman Stilidir. Değiştirebileceğiniz pek çok seçenek bulunmaktadır (ışık açısının gölgesi gibi). İşte bu rehber de tüm bu seçeneklerin ne anlama geldiğini birer birer anlatmış.

13. Bırakma Gölgelerini (Drop Shadow) Anlamak

Bırakma gölgeleri, bir katman içerisindeki nesnelere silüet uygulayan Photoshop Katman Stilidir. Bu rehberde Bırakma Gölgeleri Katman Stili'nin ayarlarını ve seçeneklerini öğreneceksiniz.

Harmanlama Modlarına Giriş

Bu video dersinde kullanımınıza hazır farklı Harmanlama Modlarını öğreneceksiniz.

15. Photoshop Filtreleri

Photoshop filtreleri, görsellerinize uyguladığınız farklı efektlerdir (tıpkı fotografik lens filtreleri gibi). Örneğin yumuşatma (Blur) filtresi görsellerinizin odağındaki keskinliği azaltır. Bu rehber Photoshop üzerindeki Filtreler arayüzünü inceliyor.

16. Klon Damga Aracı için Kullanışlı Uygulamalar

Bu rehber Photoshop üzerindeki Klon Damga aracı ile oluşturulmuş bir dizi mükemmel kullanım örneğini inceliyor.

17. Kesişme Noktası Filtresi

Bu mükemmel Photoshop rehberi ile Kesişme Noktası Filtresi'nin (bir görselin perspektifini değiştiren Photoshop Filtresi) uzmanı olun.

18. Photoshop Fırça Aracının Gizli Gücü

Fırça aracı sulu boya, yağlı boya ya da karakalem çalışması gibi farklı tekniklerin uygulanabildiği sanatsal fırçaların yer aldığı değişken bir çizim özelliğidir. Bu rehber, Photoshop üzerindeki fırça aracının en iyi ve kullanışlı özelliklerini inceliyor.

19. Arkaplan Silme Aracı

Bu rehber, Photoshop'un Arkaplan Silme aracını inceliyor.

Sık Kullanılan Teknikler ve Görevler

20. Photoshop Seçim Tekniklerine Derinlemesine Bir Bakış

Bir Photoshop Uzmanı olabilmeniz için kompozisyonunuzdaki farklı bölümleri ve nesnelerin nasıl seçilebileceğini iyi bilmeniz gerekmektedir. Bu rehber bir ya da birden fazla nesneyi seçerek, kompozisyonun geri kalanından nasıl ayırabileceğinizi inceliyor.

21. Detayları Keskinleştirmek

Görsel düzeltmesi için genellikle fotoğraflarınızı keskinleştirme ihtiyacı hissedeceksiniz. Bu video rehberinde çeşitli keskinleştirme tekniklerini öğreneceksiniz.

22. Web İçin Görselleri Kaydetmek

Photoshop'un en güçlü özelliklerinden birisi de bir görseli web üzerinde kullanılabilecek farklı biçimlerde kaydedebilmesidir. Bu rehber görsellerin web için kaydedilebilmesinde uygulanabilecek farklı seçenekleri ve ayarları inceliyor.

23. Photoshop'ta Kendi Özel Şekillerinizi Oluşturun

Özel şekiller Photoshop üzerinde tekrar tekrar kullanılabilen nesnelerdir. Bir kez oluşturulduktan sonra kütüphanede depolanırlar ve siz daha sonra onları farklı Photoshop belgelerinde kullanabilirsiniz. Bu ders özel şekillerin nasıl oluşturulabileceğini, yazılıma dahil edilebileceğini ve kaydedilebileceğini anlatıyor.

24. Photoshop Akıllı Nesneler, Zeki ama her zaman değil

Smart Objects (Akıllı Nesneler), kanıtlanabilir nesnelerdir. Bunun anlamı kaynak bir nesnenin farklı sürümlerini oluşturabilir ve o sürümler üzerinde değişiklik yaparken kaynak nesneyi koruyabilirsiniz. İşte bu rehber de bu özelliğin kullanım yöntemlerini inceliyor.

Verimliliğinizi Arttırmak

25. Photoshop Üzerinde Kalem Tabletlerini Kullanmak

Kalem Tablet kullanarak uygulama üzerine doğrudan kalemle çizim yapabilirsiniz. Fareye kıyasla kalem kullanmak daha doğru sonuçlar almanıza yardımcı olur. Bu rehber, çalışma ortamınızı desteklemek için Kalem Tablet kullanımını inceliyor.

26. Eylemler ile Photoshop'u Otomatikleştirmek

Photoshop'ta Eylemler, tekrar tekrar kullanabileceğiniz bir dizi Photoshop görevidir. Örneğin sürekli olarak bir nesneyi önce 550px genişliğinde yeniden boyutlandırıp ardından onu PNG biçiminde kaydediyorsanız, bu işlemi tek bir fare tıklaması ile gerçekleştirebilecek bir eylem oluşturabilirsiniz. Bu mükemmel makale, Photoshop'ta Eylem oluşturmanın temel noktalarını inceliyor.

27. Photoshop'ta Palet Kullanımı

Paletler, Photoshop'un arayüzünü düzenlemenize yardımcı olan bir dizi aracı ve seçeneği içeren pencerelerdir. Bu rehberde Palet kullanımı hakkında detaylı bilgi sahibi olacağınız bazı ipuçları bulunuyor.

28. Fırçaları ve Diğer Ayarları Kurmak ve Yönetmek

Kendi fırçalarınızı oluşturmaktansa başkalarının oluşturduğu fırçaları Photoshop'a dahil edebilir ya da bazı önemli ayarları daha sonra kullanmak üzere kaydedebilirsiniz. Bu rehber Photoshop'un bu özelliğini nasıl verimli bir şekilde kullanabileceğinizi inceliyor.

29. Photoshop CS'de Katman Karşılaştırmaları (Layer Comps)

Bir Layer Comp, üzerinde çalıştığınız kompozisyonun farklı bir sürümünü içerir ve karşılaştırma yapmak için kullanılır. Bu rehber işte bu özelliği inceliyor.

30. Photoshop'un Gizli Kısayolları

Kısayollar verimliliğinizi önemli ölçüde arttırırlar. Bu mükemmel rehberde Photoshop'un az bilinen ancak çok kullanışlı olan Photoshop kısayollarını bulacaksınız.

31. Photoshop'ta Kısayolları Yönetmek

Eğer Photoshop ile birlikte gelen ön tanımlı kısayolları beğenmiyorsanız, o zaman onları nasıl kendi tercihlerinize göre değiştirebileceğinizi bu yazıda bulacaksınız.

Yaparak Öğrenin

32. Betikleme İle Görsel Değiştirmek

Betikleme Photoshop'un özelliklerini kendi kodunuzla değiştirebilmenizi sağlar. Photoshop betikleme tekniklerinin nasıl kullanılacağını bu makale ile öğrenin.

33. Temel Photoshop İllüstrasyonları Oluşturmak İçin Photoshop İllüstrasyonları Kullanın

Photoshop Filtreleri kullanarak bir görseli nasıl illüstrasyona dönüştürebileceğinizi öğrenin.

34. Özel Yapım Döşeme Oluşturma Rehberi

Photoshop üzerinde nasıl döşeme (texture) oluşturabileceğinizi öğrenin.

35. Photoshop'ta Basit Organik Şekiller

Bu rehber, Photoshop'un Şekil Aracı ve Geçiş Maskeleri gibi bazı araçlarını ve tekniklerini kullanarak nasıl basit organik şekiller oluşturabileceğinizi anlatıyor.

Siz Neler Biliyorsunuz?
Sizin Photoshop'a yeni başlayanlara önerebileceğiniz rehberler var mı? Yorumlarınızla paylaşın.

Kaynak: Six Revisions

Size Sıfırdan XX Öğretecek XX Kaynak Serisi

Photoshop Hakkında Yazdığım Diğer Yazılar

Bu yazı zee 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ının Hayatını Kolaylaştıracak 13 Ücretsiz Web Uygulaması

zee — Fri, 27 Feb 2009 15:23:00 GMT

Web tasarımcılarının İnternet üzerinde sadece dersler ve kaynaklar üzerinde arama yaptıklarını sanmıyorum. Tasarımcılar ayrıca hayatlarını kolaylaştıracak uygulamalar üzerinde de arama yapıyorlar ve eğer kullanılması kolay bir uygulama bulurlarsa, ilgili uygulamayı derhal yer imlerine ekleyerek daha sonra kısa yoldan bu uygulamalara ulaşıyorlar. Geçmişte çeşitli kesimler için pek çok farklı ücretsiz web uygulamalarını listeledim. Bugünkü yazımda ise kullanması en kolay ve en sade web uygulamalarını listeleyeceğim. İster tasarımcı olun ister geliştirici, ofis görevlisi, yönetici, asistan, öğrenci ya da sadece sıradan bir İnternet kullanıcısı, bu yazıdaki uygulamalarla hepiniz çalışma ortamınızı kolaylaştıracak bir uygulama bulacaksınız. Uygulamaların pek çoğu tanınmış uygulamalar değil, ancak özelliklerine ve kullanım kolaylıklarına bakıldığında bu uygulamaların da kısa süre içerisinde popüler olacağına eminim. Siz de uygulamalara bir göz gezdirin ve görüşlerinizi yorumlarınızda paylaşın.

SnapBits

SnapBits üzerinde pek çok farklı alandaki bilgi parçalarını güvenli bir şekilde depolayabilir daha sonra toplanan veriler üzerinde arama yapabilirsiniz. Bu bilgi parçacıkları hatırlamak istediğiniz herhangi bir bilgi olabilir. Sıradan kağıtların aksine dilediğiniz miktarda bilgiyi depolayabilir ve daha sonra bu bilgiler üzerinde kolayca arama yapabilirsiniz.

Are My Sites Up?

Are My Sites Up sitesi oldukça sade bir tasarıma sahip ve sitelerinizin çalışır durumda olup olmadığını düzenli bir şekilde kontrol ediyor. Eğer sitenizde bir problem oluşursa site sizi elektronik posta ile uyarıyor.

Whisper Bot

WhisperBot sayesinde arkadaşlarınızla paylaştığınız dosyaları meraklı gözlerden koruyabilirsiniz. Hassas bilgiler için elektronik posta kullanmayı bırakın ve Whisper Bot'a bir göz atın.

Exploratree

Özellikle proje planlama aşamasında kullanılabilecek ve fikirlerinizi görsel olarak organize edebilmenize olanak sağlayan, "mindmapping" adı verilen bir sistemi kullanan bir uygulama.

WebToMail

Web sayfalarını elektronik posta olarak almak istiyorsanız bu servis işinizi görecektir.

1link.in

1link.in bir URL kısaltma (URL Shortening) servisi olup doktor yazısına dönmüş URLleri kısa ve anlaşılır URLlere dönüştürebilmenizi sağlıyor.

TinEye

TinEye, geriye dönük bir arama motoru. Şöyle ki: Siteye dilediğiniz bir resmi gönderiyorsunuz ve site ilgili resmin kaynağını size sunuyor. Daha da güzeli site, gönderilen görselin farklı sürümlerinin olup olmadığını ya da daha büyük boyutlu sürümlerinin İnternet üzerinde yer alıp almadığını da size gösterebiliyor.

AyeNotes

AyeNotes, not alma işlemini baştan yaratıyor ve çeşitli şablonların da yardımı ile kısa girdileri tam ve okunabilir notlara dönüştürüyor. AyeNotes sayesinde İnternet üzerinde not tutabilir ve daha sonra bu notlara dilediğiniz herhangi bir yerden ulaşabilirsiniz.

SUMO Paint

SUMO Paint bir çevrimiçi görsel düzenleyicisi. Özellikle doğrudan tarayıcı üzerinden görsel düzenlemesi yapmak isteyenler için biçilmiş kaftan.

Spending Diary

Spending Diary (Harcama Günlüğü) sayesinde harcamalarınızın kaydını tutabilirsiniz.

Picupine

Hızlı bir şekilde görsel paylaşmak istiyorsanız bu siteyi kullanabilirsiniz. Sitenin sunduğu bir diğer kullanışlı özellik ise birden fazla sayıda görseli tek bir bağlantı altında toplayabilmeniz ve tüm bu işlemleri siteye üye olmadan gerçekleştirebilmeniz.

Memiary

Her günün önemli ayrıntılarını ve unutmak istemediğiniz anlarını bu uygulamaya kaydederek onları önemsiz kılabilirsiniz.

uSend.io

Görüp görebileceğiniz en sade dosya paylaşım sitelerinden biri. Site kayıt olmanızı bile gerektirmiyor. Tek yapmanız gereken dosyalarınızı seçmek ve gönder tuşuna basmak.

Kaynak: CSS Globe ~ Smashing Apps

Web Araçları İle İlgili Yazdığım Diğer Yazılar

Yazılarımı RSS İstemcisi Üzerinden Takip Etmek İçin Buraya Tıklayın

Bu yazı zee 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