bildirgec.org - umg - beğendikleri

İçinizdeki Tasarımcı İçin Kullanmanız Gereken 17 Ücretsiz Yazı tipi

umg — Fri, 16 Jan 2009 12:36:00 GMT

Tipografi her yerdedir. Öğle yemeği çantanızda, biranızın üzerinde, en beğendiğiniz gömleğinizin üzerinde... Yazı tipi (font) üzerinde kullanılan ufak bir değişiklik mükemmel tasarım ile korkunç tasarım arasındaki değişikliğe sebep olabilir. Yazı tipleri önemli bir mesajı iletirler. Aşağıda listeleyeceğim yüksek kaliteli bu ücretsiz yazı tipleri, sitenizi allak bullak etmeyecek türden yazı tipleridir... Siteniz derken tasarımınızı kastediyorum... Onları akıllıca kullanın.

Dikkat:

Her bir yazı tipini kullanmadan önce onların lisans bilgilerine bir göz atın... Her an değişebilirler... Kurumsal projeler için bazı ücretsiz yazı tiplerini kullanmak yasadışı olabilir.

İçinizdeki Tasarımcı İçin Ücretsiz Yazıtipi Listesi

Medium Condensed - Alphabet

Petit Latin

SlabTallX

Vera Sans Mono

Museo 500 ve (Museo 300 + Museo 700)

Scriptina

Mank Sans

Qlassik (Bold)

Diavio

Cicle

Fertigo

Greyscale

Existence Light

Steiner

Anivers

Geo Sans Light

District Thin

Sizin de sık kullandığınız ücretsiz yazıtipleri var mı? Yorumlarınızla paylaşın.

Kaynak: TheThemeBlog

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

Klasik Amigalar için İşletim Sistemi : Amiga OS 4

umg — Wed, 12 Dec 2007 06:26:00 GMT

amiga os 4

Daha önce Amiga One donanımı için üretilen Amiga OS 4 işletim sistemi Power PC işlemcisiyle güçlendirilmiş klasik amigalar için de piyasaya sürüldü..

OS 4 ile birlikte Amiga tamamen Power PC tabanlı bir işletim sistemine sahip olacak..

Eski Amiga OS işletim sistemleri ile de uyumlu olan Amiga OS 4, 680x0 işlemcisi için yazılan eski Amiga programlarını Power PC'de 680x0 işlemci emulasyonu (JIT) yaparak daha hızlı çalıştırıyor..

Amiga OS 4'ün özellikleri :

Just in Time (JIT) 68K emulasyonu
PPC native TCP/IP stackları ve PPP sürücüleri
Amiga Dosya Sistemi FFS2'nin PPC uyarlaması
PPC tabanlı CD Dosya Sistemi
FFS2 ve SFS Dosya sistemleri için Disk Araçları
PPC tabanlı CD back-up aracı
PPC tabanlı RTG (Amigada yüksek renk ve çözünürlükde görüntü alma) modu
PPC tabanlı aritmetik kütüphaneler (library)
PPC tabanlı AHI ses sistemi
PPC tabanlı GUI
PPC tabanlı shell
PPC tabanlı yeni version "Amidock"
PPC tabanlı arşivleme yazılımları
AmigaInput API (multimedia kontrol araçları için)
USB stack
PPC tabanlı data tipleri (datatypes)
Yeni HDToolbox ("Media Toolbox") (Amiganın Harddisk Yönetim Aracı)
TrueType/OpenType font desteği
PPC tabanlı yeni yazılan DOS library
PPC tabanlı aygıt sürücüleri

Amiga OS 4'ü hakkında daha detaylı bilgiye ulaşmak ve sipariş vermek için Vesalia sitesini kullanabilirsiniz..

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

usta bir tasarımcı olmanın kuralları #5

umg — Fri, 08 Aug 2008 11:00:00 GMT

kural 5: derinlik

Bu yazıyı okumadan önce usta bir tasarımcı olmanın birinci, ikinci, üçüncü ve dördüncü kurallarını okumak isteyebilirsiniz.

Derinlik. Tamam, burada pop-up kitaplardan veya hologramlardan bahsetmiyoruz. İki boyutlu tasarımlarınızda veya illüstrasyonlarınızda derinliği simule etmekten bahsediyoruz. Yazı dizisindeki ilk dört kural, benim temel olarak gördüğüm kurallardı. Derinlik ise benim eğlenceli kısma giriş yaptığını düşündüğüm bir kuraldır. Temel olarak, derinlikle bir şeyi çok güzel gösterebilirsiniz. Sanatınıza derinlik katmak, sayfadan çıkmaya yardımcı olacak veya tam tersi, izleyiciyi içine çekecektir.

Tasarımlarınıza boyut katmak için çok iyi bir kaç teknik vardır. İlk olarak en basitlerden başlayacağım, daha sonra karmaşık olanlara doğru ilerleyeceğiz.

Objeleri üst üste bindirmek
Tamam. Bu çok belli zaten. Bunu büyük ihtimalle ana okulunda öğrenmişsinizdir. Eğer bir otobüs ve ev içeren bir resim çizerseniz, ve otobüs evle üstüne biniyorsa, o zaman açıkça evin önünde duruyordur. Ama ev otobüsün üzerine biniyorsa, o zaman ev öndedir.

Peki, bundan neden bahsediyoruz ki? Şey... sadece size hatırlatmak için –tasarım öğelerini üst üste bindirebilirsiniz. Her öğenin arasına boşluk bırakmayı huy edinmek çok kolaydır. Eğer fotoğrafların ve tasarım öğelerinin arasına boşluk koyarsanız temiz bir tasarım elde edebilirsiniz ama biraz tekdüze görünebilir. Bazen sırf diğer öğelerin üzerine bir öğe getirmek için tasarıma bir şeyler eklediğim oluyor.

Aşağıdaki örnekte basit bir üst üste bindirmeyi ve tasarıma biraz derinlik katmayı görebiliriz.

Bu Dave Tevenal ve benim üzerinde çalıştığımız bir poster. Dave adamın genel skecini yaptı, ben de ayağının etrafına biraz su sıçraması ekledim, daha sonra arkasındaki koi balığını yaptım.

Sağ alt köşede, siyah bir şeridin hemen üzerine çıkan müşteri logosu var (the Grog Shop). Şimdi, orada siyah bir şeride ihtiyacım yoktu. Şeritteki bütün yazılar siyah olabilir ve logo da çizimin üzerinde durabilirdi. Ama posterin altındaki yazılara biraz dikkat çekmek istedim.

Alttaki siyah şerit olmadan aynı poster:

Şimdi ikisini altta şerit olanla karşılaştıralım.

Bu şeridi, müşterinin bilgisini ve logoyu ekleyerek tasarımda yarattığım derinlik şöyle: Klüp logosu, şerit ve bilgiler, sonra da poster çizimi. Aynı zamanda önceliği ayarlamada da yardımcı oluyor. Müşterinin logosu en önemlisi, sonra klüp bilgisi, ve son olarak da karmaşık çizim ve detaylar.

İllüstrasyon aynı zamanda bir sürü üst üste binmiş objeyi içeriyor. Adam koi balığının üstünde, adamın ayağındaki su sıçramaları vs.

Obje boyutu değişkenliği
Tasarımımda, objelerin büyüklüğündeki değişkenliği kullanmayı severim. Bu özellikle aynı boyutta olan, birbirinin tıpatıp aynısı objelerle uğraşırken çok etkilidir. Bir insanın fotoğrafını çekerken uzaklığın değişkenliği bununla ilgili güzel bir benzetmedir. Arkadaşlarınızın fotoğraflarını 1-2 metre uzaktan çekmek genelde yapılan bir şeydir. Büyük ihtimalle, onların bütün bedenini, en azından belden yukarısını alabilirsiniz. Bu iyi bir fotoğraftır, ama eğer böyle 30 fotoğraf çekerseniz, sıkılmaya başlarlar. Ve çoğu fotoğraf böyle çekildiğinden, oldukça yaygın olduğunu varsayıyorum. Şimdi, eğer işleri biraz heyecanlandırmak isterseniz, süper yakın bir çekim yapın. Belki arkadaşınızın yüzünün yalnızca yarısını çekebileceksiniz. Ya da belki arkadaşınızı başka uzaklıklardan çekebilirsiniz. Ya da, en iyisi, hepsinin birleşimini yapabilirsiniz. Birini önplana, birini ortaya, diğerini de daha uzak bir yere koyun. Bu, fotoğraftaki derinlik hissini arttıracaktır.

Şimdi objelerin büyüklüğünün nasıl derinlik katabileceğine bir bakalım. Bu ilk örnek çok basit, sadece bir sürü daire var. Burada bir şeyin boyutunu ayarlamak gibi basit bir işlemle nasıl derinlik katabileceğimizi görüyoruz.

Her birinin boyutu bir öncekinden daha küçük. Boyutlarındaki değişikliğin nasıl derinlik hissi verdiğini görün. Hangi daire size daha yakın görünüyor?

Bir sonraki örnek biraz daha karmaşık. Bu, Jeff Finley’nin Paint the Stars için yaptığı bir t-shirt. Burada birden fazla derinlik katma tekniği uygulanmış ancak biz sadece obje büyüklüğüne odaklanalım.

Bu örnekte, her bir kafatası, shirt’ün üzerine gidildikçe hafifçe küçülüyorlar. Aynı zamanda, ip gibi görünen dokunaçlar da göz yuvalarının içinden geçerken her seferinde küçülüyorlar. Bir önceki teknik olan objeleri üst üste bindirmeyle birleştirildiğinde gerçekten ortaya derinlik hissi yüksek bir tasarım çıkmış.

Çizgi kalınlığı
Obje boyutu değişkenliği ile yakından bağlantılı olan çizgi kalınlığı değişkenliği, özellikle çizim için harika bir tekniktir, ama çizdiğiniz çizgilerin kalınlığı da olsa tasarıma eklediğiniz çizgilerin kalınlığı da olsa, ağırlık (weight) önemlidir.

Çizgi ağırlığı, aynı obje boyutlarındaki gibidir. Ne kadar kalınlaşırsa o kadar yakın, ne kadar incelirse o kadar uzak görünür.

Şimdi böyle bir çizimin nasıl olabileceğini örnekleyelim.

Bu çizgi roman sayfası, çizgilerinizin ağırlığının derinlik katmaya nasıl yardımcı olduğu hakkında mükemmel bir örnektir. Önplandaki gladyatöre bakın ve onun çizgileriyle arkaplandaki binaların çizgilerini karşılaştırırsanız, açıkça aradaki farkı göreceksiniz. İnce çizgiler uzakta, kalın çizgiler yakında.

Netlik derinliği (depth of field)
Netlik derinliği, bir resimin daha keskin görünen kısmıdır. Netlik derinliği, aslında sadece kamera lensinde değil, kendi gözümüzde de doğal olarak oluşan bir şeydir. Eğer elinizi yukarıda tutup ona odaklanırsanız, elinize olan odağı bozmadan çevrenizdeki şeyleri görmeye çalışın. Elinizin arkasındaki şeyler odak içinde mi? Hayır. Gördüğümüz her şeyin odak içinde olduğuna dair bir algımız vardır. Ama aslında olan şey, gözünüzün baktığınız yere olan odağı sürekli ayarlamasıdır. Gerçekte, sadece o ayar içindeki objeler odak içindedir, diğer her şey bulanıktır.

Netlik derinliğiyle ilgili örnekleri fotoğraflarda görüyoruz ve böylece beynimiz bu görüntüyü nasıl yorumlayacağını biliyor. Odak içindeki objeler, odak dışındaki objelerden farklı bir derinliktedirler.

Dave Romsey’in çekmiş olduğu bir makro (çok yakın çekim) örümcek fotoğrafını görebilirsiniz:

Gerçekten mükemmel bir örümcek fotoğrafı olmasının dışında, yalnızca örümceğin gövdesinin tam odakta olduğunu görebilirsiniz. Sağ köşedeki yaprak gibi, örümceğin önünde va arkasında olan her şey odağın dışındadır. Hatta örümceğin gövdesinden çıkan bacaklarının bile odak dışında olduğunu gözlemleyebilirsiniz.

Japon animasyonu veya “japonimasyon”, bu küçük numaradan yıllardır yarar sağlıyor. Uzaktaki ve önplandaki objelere bulanıklık efekti veriyorlar. Bence bu çok hoş bir detay! Aşağıda bunu uygulamış olan bir animasyondan bir kareyi görebilirsiniz:

Renk
Renkler bile derinlik katmamıza yardımcı olabilir. Bu genellikle büyük uzaklıklarda söz konusudur. Atmosfer trilyonlarca küçük buhar, toz ve yarı-saydam molekküllerden oluşmuştur. Ve “hava” her ne kadar kısa uzaklıklarda yüzde yüz temiz gibi görünse de, öyle değil. Aslında uzaklık ne kadar artarsa o kadar görünür olmaya başlayan uysal bir zar gibidir. Yani, bir dış sahne için renk seçerken, önplandaki objelerin güçlü, enerjik renklere sahip olması gerekir. Daha uzaktaki objelerin ise daha az canlı renklere.

İnternette bulduğum, Ulusal Park Mavi Dağları’nın bu fotoğrafında atmosferin uysal zarının renkleri nasıl etkilediğini görebilirsiniz. Solda, önplanda, taşların ve tırmanıcıların rengi temiz, tam canlı görünmekte. Sağ tarafta, uzaktaki ormanın renklerinin ise nasıl silik çıkmış olduğunu görebilirsiniz.

Efektler – Gölgelendirme (Drop Shadow)
Ah, tüm tasarım efektlerinin en klasiği: Gölgelendirme! Hem Photoshop hem de Illustrator, tasarımlarınıza kolayca gölgelendirme ekleyebilir. Bu noktada klişe olarak görünebilir, ama ben hala kullanıyorum ve çok seviyorum. Sanırım bir çok insan bunu efekt olarak görmüyor. Uygun bir şekilde kullandığınız zaman, tasarıma güzel bir derinlik hissi katarken kolayca harmanlanabiliyorlar.

Aşağıda kendi yaptığım; biri gölgelendirmeli diğeri ise gölgelendirmesiz iki tasarım:

Şimdi, bu zekice yapılmış bir gölgelendirme örneğiydi. Üstteki tasarımda yok, alttakinde var. İlk olarak, reklamın en üstündeki başlığa bakın. Gölgelendirmenin yazıyı arkaplandan nasıl da ayırdığını, öne çıkmasını sağladığını fark edin. Şimdi dövüşçünün başlığı hafifçe altına alan kafasına bakın. Her iki durumda da derinliğe yardımcı olması için hafifçe, belli belirsiz bir şekilde gölgelendirme kullanıldı. Ayrıca diğer yazılarda ve yumruğunun altında da görebilirsiniz.

Perspektif
Perspektif, bir çizim ve düz bir yüzeydeki bölgesel ilişkileri kurmak için kullanılan bir teknik olarak tanımlanır. Tamam, bu bize pek yarar sağlamadı değil mi? İzin verin perspektifi meslekten olmayan biri gibi açıklayayım. Temel olarak, bir sıfır noktasında birleşen gittikçe uzaklaşan çizgilerdir. Bunun için klasik bir örnekte, ufuğa doğru ilerleyen bir yol görülür. Yoldaki çizgiler tek bir noktada birleşir. Belki bu resim yardımcı olur:

İşte o yolun klasik bir resmi. Yoldaki çizgiler uzağa ilerlerken, bir noktada birleşiyorlar.

Tüm çizgilerin; çimenlerin, çiçeklerin, yoldaki gölgelerin ve yol çizgilerinin tek bir sıfır noktasında birleştiğini fark edin.

Bu senaryodaki yol, esasen düz. Çünkü, çizgileri tek bir sıfır noktasında birleşebiliyor. Ama bir çok kenarı olan bir obje (yani düz olmayan), iki sıfır noktasında birleşecektir, bir değil. Bir başka örneğe göz atalım:

Penceresi olan küçük bir kutu. Her iki tarafında nasıl da iki sıfır noktası olduğunu görebilirsiniz.

Şimdi, perspektif bir iki paragrafta özetlenebilecek bir şey değil. Yani bu derste daha fazla detaya giremeyeceğiz. Ama söylemek zorundayım ki, perspektif hakkında araştırma yapıp kendinizi eğitmenizin zorunlu olduğu, çok önemli bir konu.

Yazar: Bill
Kaynak: GoMediaZine

Çeviri bana aittir.

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

usta bir tasarımcı olmanın kuralları #1

umg — Sun, 27 Jul 2008 18:48:00 GMT

1- Kullandığınız Yazı Tiplerini Sınırlayın
Tamam, “usta tasarımcı” lafı biraz zorlama olabilir. Ama en azından bu yedi kuralı takip ederek “uzman tasarımcı” olabilirsiniz. Bu, nasıl daha iyi bir tasarımcı olabileceğiniz hakkında okuduğunuz blog yazılarının en kısası ve en bilgilendiricisi olacaktır. Lütfen aklınızda bulundurun: bu kurallar KIRILABİLİR... çünkü yasa değiller, sadece benim bir tasarımı bir araya getirirken uyguladığım genel kurallardır.

Aşağıdaki kuralları izlediğinizde sanatsal mükemmelliğe giden yoldasınız demektir:
Kural Bir: Yazı tiplerini sınırlayın. İyi bir tasarımı bir araya getirmenin büyük bir kısmı, gördüğünüz gibi, görünüşün birbiriyle tutarlı olmasıdır. Tutarlı bir görünümü elde etmenin en iyi yolu tasarımını kullandığınız bir kaç motifle (temalar) sınırlamanızdır. Seçtiğiniz yazı tipleri sınırlamak isteyeceğiniz ilk değişkendir. Ben genellikle tasarım başına 2 yazı tipi seçerim.

İlk yazı tipi süslü veya sanatsal olabilir. Bu yazı tipi tasarımınıza biraz karakter, kişilik ve kabiliyet kazandırmak için kullanılır. Tasarımın ruh halini belirleyen bu yazı tipidir. Bir kızın partisi için fırıl fırıl dönen eğlencelik bir yazı tipi mi, yoksa bir rock grubu için kötülük dolu karanlık bir yazı tipi mi? Bu süslü yazı tipini üst kısım için kullanırdım –büyük olan herhangi bir yere, bu yazı tipini kullanırım. Süslü yazı tipi, tasarımın odak noktası olacaktır. Genellikle bu yazı tipini az yerde kullanırsınız ama daha büyük olacağından insanların odaklanacağı ve ilk göreceği şey bu olacaktır.

İkinci yazı tipi çok basit olmalıdır. Bu ikincil yazı tipini izleyici fark etmemelidir bile. Bu ikinci yazı tipi, çok kolayca okunabilir olmalıdır. Tasarımda yaygın olan metinlerde kullanılacak genel yazı tipi bu olacaktır. Açıkça, yaygın metinlerde artsitik yazı tiplerini okumak çok zor olacağından bu ikinci yazı tipinin amacı, sadece işlevsellikten ibaret olmalıdır.

İşte bir tasarımda kullanılan uygun yazı tiplerine örnek. Gördüğünüz gibi, burada sadece iki yazı tipi kullanıldı. Süslü yazı tipi, üst kısım için ve basit yazı tipi de genel metin için. Temiz ve tutarlı görünüyor.

solda: "basit yazı tipi" / sağda: "süslü yazı tipi"

Burada da yazı tiplerinin kötü kullanımı söz konusu. Bu durumda, bir çok süslü yazı tipip kullandım. Sadece tasarımı tutarsız gösteriyor. Alt kısım, ana başlıkla uyuşmuyor bile.

solda: "basit yazı tipi" / sağda: "çok fazla süslü yazı tipi"

Bir tasarımda çok fazla yazı tipi kullanmak en büyük hatadır. Broşüründe 8 farklı yazı tipi kullanan birinden daha kötü görünen bir şey yoktur. Daha da kötüsü genel metinleriniz için çok süslü bir yazı tipi kullanmanızdır. İşte yazı tiplerinin en kötü nasıl kullanılabileceğine dair bir örnek:

solda: "yazı tipleri genel metin için fazla süslü" / sağda: "çok fazla süslü yazı tipi"

Sizi göndermeden önce son bir düşünce. Eğer süslü yazı tipiniz modern veya çağdaş görünüyorsa, o halde basit yazı tipiniz bir sans-serif yazı tipi olmalıdır. Eğer süslü yazı tipiniz eski moda görünüyorsa, o zaman ikincil yazı tipi olarak serif kullanın.

Yazar: Bill
kaynak
Not: Yazar bu yazıyı okuyucunun ilgisini çekecek mi diye yazmış, ben de aynı amaçla çevirdim. eğer ilginizi çekerse bu henüz tamamlanmamış yazı dizisinin devamı olan ve bu yazıdan çok daha detaylı olan; "Tasarımınıza Derinlik Katın", "Renklerinizi Sınırlayın" ve "Kontrast, Kontrast, Kontrast" yazılarını çevirebilirim. Şu anda 7 bölümlük yazı dizisinin 5'i yazılmış durumda. Her hafta yenisi yazılıyor.

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

usta bir tasarımcı olmanın kuralları #2

umg — Tue, 29 Jul 2008 16:08:00 GMT

Kural İki: Renklerini sınırla.
Usta bir tasarımcı olmanın yedi kuralının ikincisidir. Önce ilk kuralı okumak isteyebilirsiniz.

Yazı tiplerininizi sınırlamanın son kuralıymış gibi geliyor kulağa değil mi? Aynen! Renklerimizi, yazı tiplerimizle aynı nedenden sınırlamak istiyoruz. Tasarımda kullandığımız renkleri sınırlamak, tasarımımızın daha tutarlı olmasını sağlayacaktır. Yani, her şey uyumlu görünecektir. Aynı bir spor takımının üniforması veya bir şirketin markalaması gibi.

Yazı tipi seçiminde olduğu gibi, renkleri sınırlamak sadece bir rehberdir, kural değildir. Tasarımınızda bir hayli gökkuşağı gibi bir sürü renk kullanabilirsiniz, ve harika görünebilir. Ama bir renklendirme stratejisiyle başlamalı ve buna sonuna kadar uymalısınız. Renklerinizi tasarımınızla uyumlu bir şekilde kullanın.
Yeni başlayanlar için, önce renk değerlerinden bahsedelim. Bir rengin değeri, rengin ne kadar aydınlık veya ne kadar karanlık olduğudur. Bir sarı örneğin, epeyce aydınlıktır. Bir mor epeyce karanlıktır. Tabii ki, bir rengin değer yelpazesi vardır. Örneğin mor, çoğumuzun karanlıkla özdeşleştirerek düşündüğü, ama aynı zamanda oldukça açık değerde bir mor elde edebileceğiniz renktir. Aşağıda renklerin ve onların ilgili değerlerini gösteren bir örnek var. Onun yanında da tek bir renk için renk yelpazesini görebilirsiniz.

renk / değer / değer yelpazesi

Renk planımı seçerken uyguladığım bir kural: renk planınızda mutlaka renklerin değer yelpazesi olduğundan emin olun. Her tasarımda, kontrastı üretmek için biraz açık renge ve biraz karanlık renge ihtiyacınız olacak. Örneğin, tasarımınızın arkaplanı karanlık ise bir de açık renge ihtiyacınız olacak ki metin rahatça okunabilsin. Ya da tam tersi, açık renk bir arkaplanınız varsa metninizin okunabilmesi için açık bir renk gerekli olacak.

Ayrıca genellikle renk planımı seçerken 2 ila 5 renk seçerim. Seçenek sayısını arttırın ve tasarımda iyi sonuçlar elde edeceksiniz. Aşağıda bir araya getirdiğim bir renk planının örneği var.

Görebileceğiniz gibi bir karanlık renk, bir orta değerli renk ve bir de açık renk seçtim. Sağa doğru ise her seçtiğim renk için bir değer yelpazesi hazırladım. Projemde palet niyetine kullanacağım renkler, bu koleksiyondaki renkler olacak. Bir kere paletim hazır olduğunda, sadece bu paletteki renkleri kullanmak için elimden gelenin en iyisini yapmaya çalışacağım.

Tamam, şimdi kaç tane renk seçeceğimiz ve hangi değerlerde olmaları gerekiyor gibi teknik renk seçimi işlemlerini hallettiğimize göre, sırada ne var? Sırada ne olacağını söyleyeyim, en zor kısım; o 2 ila 5 rengin hangileri olması gerektiğine karar vermek! Şahsen bunu zaman zaman zor bir iş olarak görüyorum. Aşağıda renk planımı yaparken aldığım yardımlar ve teknikler var:

Sıcaklık yelpazesine uyun. Ya tüm sıcak renkleri ya da tüm soğuk renkleri seçin. Sıcak renkler kırmızılar, turuncular, sarılar, kahverengiler vb. Soğuk renkler ise maviler ve morlardır. Ben şahsen, yeşilleri ise nötr olarak görmekteyim. Eğer tüm renklerinizi bir sıcaklık aralığında seçerseniz, büyük ihtimalle uyumlu olacaklardır.

İlham almak için www.colorlovers.com gibi bir siteyi kullanın. Bu mükemmel sitenin tüm olayı renk planlarıyla ilgili. Sayfa sayfa renk planları bulabilirsiniz.

Bir gözünüz etrafta olsun. Her tarafınızda renk planları vardır. Markette torbanıza bakın, Starbucks’taki tablodaki renklere bakın, Doğa Ana’ya bakın! Hoşunuza giden bir renk dizisi gördüğünüz zaman, not alın ve bilgisayarınızda bunu tekrarlayıp tekrarlayamayacağınıza bir bakın.

Var olan şirket renklerine dikkat edin. Sık sık, bazı markaların renklerinden yararlanıyorum. Logolarına ve renk yelpazesine bakıyorum daha sonra bunu başlangıç noktam olarak alıyorum. Daha sonra belki bir veya iki renk ekleyebiliyorum.

Aşağıda oldukça kısıtlı renk yelpazesi kullanarak hazırladığım bitmiş bir tasarım var.

Gördüğünüz gibi, kısıtlı renk yelpazesi ve yazı tiplerimi sınırlamak her şeyi bir arada, düzenli gösteriyor.

Bu derslerin basit olduğunu biliyorum… ama bunlar tasarımın esaslarıdır. Yani, bilgileri biraz tazelemek kimseyi öldürmez. Beş kural daha kaldı. Geri kalan beş kuralın daha enteresan olacağına söz veriyorum. Zaman ayırdığınız için teşekkür ederim!

Bill

kaynak

Tarafımdan çevirilmiştir, yazı bana ait değildir.

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

usta bir tasarımcı olmanın kuralları #3

umg — Thu, 31 Jul 2008 06:05:00 GMT

Bu yazıyı okumadan önce usta bir tasarımcı olmanın birinci ve ikinci kuralını okumak isteyebilirsiniz.
Tasarımınızdaki kontrastın iyi olması, renk seçimlerinizle doğrudan orantılıdır. Kontrast, tasarımınızdaki renklerin değerlerindeki farklılıklardır. Değer ise bir rengin ne kadar aydınlık veya ne kadar karanlık olduğudur. Hiç beyaz bir çalışma alanı üzerine birinin şöyle bir espri yaptığını duydunuz mu: “Hey, bu kar fırtınasındaki beyaz bir inek!”? Bu, sıfır kontrasta örnektir. Beyaz üzerinde beyaz sıfır kontrasttır. Hiçbir şey göremezsiniz.

Çok basit değil mi? Yani demek istediğim ne kadar aptalca bir yazı bu? Tasarladığım şeyin görünebilir olması gerektiğini açıklıyorum? Bu bir ders için çok gerizekalı bir konu değil mi?

Yanlış.

Çünkü maalesef, sürekli tasarımcıların kontrastla ilgili problemler yaşadığını görüyorum. Bir tek o da değil, kontrast, uygun bir şekilde kullanıldığında önemli bir araçtır.

Çok sık gördüğüm bir hata şu: Tasarımcılar kontrast yaratmak için değer değişikliği yerine renk değişikliği kullanıyorlar. Örneğin, orta değerde bir mavi, orta değerde bir kırmızının tam tepesinde durarak kontrast oluşturuyor. İkisi arasındaki farklılığı görebilirsiniz. Ama aynı değerden iki renk bir arada olduğu zaman (“vibrating”), mavi ve kırmızının buluştuğu çizgide, gözünüz ikisi arasında ileri geri gider, tereddütte kalır. Bu neredeyse yazının nabzı atıyormuş hissi verir.

Eğer amacınız gerçekten canlı bir şey yaratmaksa, bu tekniği kullanabilirsiniz. Ama gözlere fazla yüklenecektir ve bir çok insan bunu rahatsız edici bulacaktır. İşte aynı tasarımın daha fazla kontrast sahibi farklı renkler kullanılarak hazırlanmış hali:

Bu ikinci olan, açıkça gözlere daha az yükleniyor.
Tasarımınızın açık ve kolay okunur olup olmadığını anlamak için, her şeyi bir an için siyah beyaz yapabilirsiniz. Illustrator’da bunu tasarımı seçtikten sonra “Edit>Edit Colors>Convert to Grayscale” yönergesini izleyerek; Photoshop’ta ise tasarımınızı düzleştirdikten (flat) sonra, “Image>Adjustments>Desaturate” yönergesini izleyerek yapabilirsiniz.
Her iki şekilde de, bu testi yaptıktan sonra yaptığınız şeyi geri almanız gerekecek.
İşte aynı tasarımın, biri iyi kontrastla diğeri kötü kontrastla hazırlanmış hali. Ve her birinin altında ikisinin de siyah beyazda nasıl görüneceği var.

solda: iyi kontrast / sağda: kötü kontrast

Soldaki tasarımdaki yazıları okumanın ne kadar kolay olduğunu görebilirsiniz, özellikle siyah beyaza döndürüldüğü zaman. Sağ taraftaki tasarım ise şekilleri belirlemek için daha az kontrast ve daha çok renk farklılığı kullanmış.
Her zaman aldığım bir soru da şu: “Bir arkaplan filigranı (watermark) için hangi saydamlık (opacity) seviyesini kullanmalıyım?”. Bence iyi bir filigran arkaplanı %10-%15 saydamlıkta olmalıdır. Bir kez daha –bunların hepsinin amacı, tasarımınızdaki kontrastın sürekliliğini sağlamaktır. Eğer arkaplan açık renkse –o zaman filigran, uygun bir açıklıkta ve tam tersi olmalıdır. Aşağıda iyi ve kötü filigran için örnekler var:

arkaplandaki bu filigran %15 şeffaflığa ayarlandı. iyi kontrast!

arkaplandaki bu filigran %50 şeffaflığa ayarlandı. kötü kontrast!

Kontrastla ilgili olarak belirtmek istediğim diğer bir şey ise bir araç olarak kullanılabileceğidir. Eğer, örneğin, izleyicinizin dikkatini tasarımınzdaki önemli bir şeye çekmek istiyorsanız, bunu kontrastla başarabilirsiniz! Tüm tasarımı açık renkte tutabilir ve dikkat çekmek istediğiniz şeyi karartabilirsiniz. Aşağıda bu şekilde iyi tasarlanmış bir tanıtım sayfası var:

Bu, E-Harmony’nin web sitesindeki tur bölümünden bir sayfa. İnsanlara bir tur vermek isterlerken, gerçekten istedikleri insanların üye olmasını sağlamak. Yani, bu sayfaya baktığınızda, sayfadaki en büyük ve karanlık şey nedir? Bir kızın tıklanamayan resmi ve “Get Started Now/Hemen Başlayın” butonu. Açıkça, “Get Started Now/Hemen Başlayın” butonuna tıklamanızı istiyorlar. “Next Step/Sıradaki Adım” butonuna kıyasla, “Get Started Now/Hemen Başlayın” butonunun ne kadar büyük ve karanlık olduğuna bakın. “Next Step/Sıradaki Adım” butonu, turdaki birinin tura devam etmek için tıklaması gereken bir buton. Ama “Get Started Now/Hemen Başlayın” butonunun ne kadar çekici olduğunu fark ettiniz mi? Ve neden? Neden sayfadan üzerinize atlıyor? Basit: Kontrast!

Bu, tasarımda basit ama temelde kritik bir dersin sonu oluyor. Bunu okuduğunuz için teşekkür ederim. Dört basit kural daha var. Bunlar bittikten sonra söz veriyorum size nasıl çizileceğini öğreteceğim!

Bill

Kaynak

yazı tarafımdan çevrilmiştir, bana ait değildir.

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

usta bir tasarımcı olmanın kuralları #4

umg — Mon, 04 Aug 2008 10:21:00 GMT

Bu yazıyı okumadan önce usta bir tasarımcı olmanın birinci, ikinci ve üçüncü kuralını okumak isteyebilirsiniz.

Bu ders, sayfa planı (layout) ve boşluk bırakma (spacing) ilgili. Genç tasarımcıların sık sık yaptığını gördüğüm hatalardan biri de her şeyi birbirine çok sıkışık yerleştirmeleri. Çok kıstılı bir alana çok fazla içerik yerleştirmek istiyorlar. Boşluk sizin dostunuzdur! Boşluk, sizin için bir sürü şey yapabilir. Metninizin daha kolay okunmasını sağlayabilir. Boşluk, izleyicinin bitmiş kompozisoynunuzu daha kolay anlamasını sağlayabilir. Ve boşluk aynı zamanda tasarımınızı zarif gösterir. İzleyiciye şunu söylersiniz: “o kadar zenginiz ki bu koca posteri, bu tek küçük mesaj için kullanabiliyoruz.”

Yani, tasarımınızın sayfa planı için basit bir strateji vardır. Ve bu strateji şudur: bir sayfa planınız olsun! Demek istediğim bir sisteminiz olsun. Bu ilk adımdır. Amacınız bütün tasarımım tamamen karışık görünmesi değilse, bir plana ihtiyacınız olacak. Bu genellikle ızgara (grid) ile yapılır. Bir ızgara, istediğiniz her stile dönüşebilir. Ama yapmak üzere olduğunuz şey için temel bir sisteminiz olması gerekir. Aşağıda farklı ızgaralara örnekler var, böylece ızgaranızın ne kadar farklı ve benzersiz olabileceğini görebilirsiniz.

Şimdi, aynı tasarımı farklı şekillerde görelim: ikisi ızgarayla biri ızgarasız hazırlandı. Görebileceğiniz gibi, her ızgara size bir sürü plan seçeneği veriyor. Izgarasız çalışmak kaosla sonuçlanabilir.

Bu ilk resimler geleneksel bir ızgarayı ifade ediyor. Çizgiler mükemmel bir şekilde yatay ve dikey. Belli aralıklarla sıralanmışlar.

Bu ikinci ızgara ilkiyle benzer olsa da bir basit değişiklik içeriyor. Yukarıdaki logonun eğikliği ile uyumlu olması için dikey çizgileri eğdim. Böyle ufak bir değişikliğin nasıl da harika sonuçlar verdiğini görebilirsiniz.

Bu son örnekte ızgara yok. Boşluk bırakma rastgele yapıldı. Şimdi görüldüğü gibi bunu ne demek istediğimi göstermek için bilerek dağıttım. Bu tasarımda fazla içerik yok, yani iyice bozmuş olsam da o kadar da kötü görünmüyor. Ama ne kadar daha çok içeriğiniz oldukça, sistemli bir şekilde çalışmak o kadar önem kazanıyor.

Kendinize şunu sorduğunuzu biliyorum: “Gerçekten her tasarımını düzenlemek için ızgara kullanıyor mu?”. Hayır kullanmıyorum. Ama ızgarayla çalışmayı anlamak sonuçta size ızgarasız çalışma imkanını sağlayacaktır. Izgara sadece aklınızda olacaktır. Sayfada olduğunu görebileceksiniz ancak hazırlamak için zaman harcamayacaksınız.

Peki, ızgara bize ne öğretti?

Öncelikle şunu öğretti: herşeyi bir düzene oturtun! Açık görünüyor değil mi? Peki, bir kez daha –bu amatör birinin sık sık unuttuğu o basit kurallardan biri. Tasarımdaki her bir öğe tek bir çizgide düzene girmek zorunda değil ama öğeler bir grup olarak, aynı ızgara çizgisinde bütünlenmiş olarak görünmelidir. Düzenlenmiş olmalıdır. Eğer daha önce gruplandırmanın Gestalt İlkeleri’ni incelemediyseniz, şimdi mükemmel bir zaman! Hızlıca bir Google araması yapın ve kendinizi bu konseptlere alıştırın. Tasarımınızın sayfa tasarımında kritik önem taşırlar.

Öğeleri düzenlemeye ek olarak öğeleri belirli aralıklarla yerleştirmeniz gerekir. Eğer bir ana başlığın altında üç maddeniz varsa, her maddenin arasındaki aralığın aynı olmasını istersiniz.

Metninizin etrafında yeterince boşluk bırakmanız, metni okunur kılar. Aşağıda iki tasarımın örneği var. İlkinde kenarlardan ve fotoğraflardan uzakta, güzelce boşluk bırakılmış. İkincisinde ise kenarlara ve fotoğraflara çok yakın.

Bu sıkışık ve okunaksız görünmüyor mu? Cevap evet . İkinci örnekte daha büyük bir yazı kullanılmasına rağmen sıkışık ve okunaksız görünüyor.

Ayrıca “öpücük” olarak bilinen şeyden de kaçınmak isteyebilirsiniz. Hayır, bu dudakları içermiyor. Bir “öpücük”, iki objenin neredeyse birbirine dokunması durumuna verilen isimdir. Eğer, örneğin, elinizde bir fotoğraf ve metin varsa ve neredeyse birbirine dokunacak gibiyseler. Bu kötüdür. Ya onlara yeterli alan verin ya da birbiriyle tam olarak üst üste sağlayın.

Az önceki broşüre yakından bir bakış atıyoruz. Web adresi, arkaplandaki turuncu çizgiye neredeyse dokunmak üzere.

Burada da aynı tasarım, web adresi o çizgiden uzağa çekilmiş. Bu çok daha iyi.

Ya da, eğer yere ihtiyacınız varsa –üst üste gelebilirler. Ama belirli bir miktarda üst üste geldiklerinden emin olacağım. Aynı zamanda –web adresi ve arkaplan arasında yeterince kontrast olduğundan emin olmak için bir de gölge ekledim. Bu şekilde web adresi, sayfadan dışarı fırlıyor.

Şimdi –biliyorum ki çoğu tasarımcının karşılaştığı sorun: 50 sayfalık içeriği tek bir 8.5x11 inçlik bir alana sığdırmanızı isteyen müşteridir. Elinizden gelenin en iyisini yapıp organize bir şekilde bütün bu bilgileri sığdırdıktan sonra müşteriniz şöyle der: “Oh! Daha fazla bilgi koyulacak yer var! İşte 10 sayfa daha, sıkıştır!” (bkz. Tasarımınızı müşteriye sevdirmeniz için 13 hile)

Ne yaparsınız? Çok küçük bir yer için müşteriniz size sürekli içerik veriyorsa? Evet, işte büyük bir problem. Ve bunun kolay bir cevabı olması da gerekmez. İlk tavsiyem, müşterinizi iyi tasarım ilkeleri hakkında eğitmek için elinizden geleni yapın. İzleyicilerinin bu kadar küçük bir alana sıkıştırılmış bir sürü içerikten oluşan bir reklama bakmak bile istemeyeceklerini açıklamaya çalışın. Eğer müşteri sizinle uzlaşmak istemiyorsa, berbat bir tasarım yapmaya mahkum kalabilirsiniz. Bütün bunları yapmak zorunda kaldım ben. Gerçekten can sıkıcıdır. Eğer vaktiniz varsa, temiz olan bir versiyonu hazırlayabilir ve müşterinizden arkadaşlarına sormasını ve başka görüşler almasını rica edebilirsiniz. Maalesef, genelde bu kadar çok zamanımız olmuyor. Yani, tasarımı matbaacıya götürürken kimseye görünmemek için elimizden geleni yapıyoruz.

Uzak durmamız gereken bir diğer küçük şey ise optik illüzyonlardır. Ha? Optik illüzyonların boşluklarla ne gibi bir ilgisi olabilir? Ne kadar çılgınca gelse de, objelerin arasında boşluk bırakırken optik illüzyonlara karşı da dikkatli olmak zorundasınız. Bazen, optik illüzyonlar sayesinde, düzgün olarak verilmiş boşluklarınız düzgün görünmeyebilir. Örneğin arkaplandaki kavisli bir desen, objeyi yana yatıyor gibi veya merkezden sapmış gibi gösterebilir.

Peki, optik illüzyonlardan nasıl kaçınabiliriz? Basit –gözlerinizi kullanın; nerenin yanlış olduğunu görecek ve düzeltmek için kullanacaksınız.

Optik illüzyonlara düzeltme yapmak genelde, “en iyi görünüm” olarak bilinir. Doğru olması gerekmez, ama doğru görünmesi yeterlidir.

Yani, kompozisyonunuza her zaman için son bir bakış atın ve her şeyin yerli yerinde olduğundan emin olun.

bill
kaynak

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

Beğendiğiniz flash sitelerini ameliyat edin

umg — Tue, 03 Jun 2008 11:00:00 GMT

tüm webmasterlar büyük bir çoğunlukla hemfikirdirler ki, işlerini kolaylaştıracak bazı ek program yada programcıklar, eklentiler, bileşenler vs. kullanmak gayet mübahtır. elbette flash programı için de bu geçerli, her ne kadar şart olmasa da, beklediğinizden öte değişikliklerle karşılaşabilirsiniz ve bunun da ufkunuzu açacağı kuşkusuz. kullanıcı ve uzmanlar tarafından geliştirilmiş çeşitli eklentiler, bileşenler sayesinde bu kolaylıklardan faydalanabilirsiniz. tabi bunların bazıları, daha doğrusu komplex ve işe yarar olanlarınin ücretli olması sözkonusu.

bir flash tasarımcısı olarak uygulamayı geliştirdiniz, ayarlamaları yaptınız ve son olarak test ederek swf dosyanızı oluşturdunuz. peki bu işlemi tersinden yapmak mümkün mü? yani elinize bir swf dosyası geçtiği zaman onu bir kaynak dosyasına çevirerek gerekli düzenlemeleri yapabilecek misiniz? softhink firması tarafından geliştirilmiş swf decompiler isimli program eldeki swf uzantılı dosyayı, işlemi tersine çevirerek fla uzantılı bir kaynak dosyasına dönüştürüyor. değişik firmalardan çıkmış olan ve swf dosyasını decompile eden programlar maximum veri kaybına yolaçtığı ve sağlıklı bir kaynak dosyasına dönüşemediği için, bu programın rakiplerinden önde gittiğini söyleyebiliyoruz.

bilgisayarınızda bulunan bir swf dosyasını bu programla açtığınız zaman ortada bulunan bir pencerede uygulamayı tüm özellikleri çalışabilir vaziyette görüyorsunuz. ara yüzü açısından kullanması hiç de zor olmayan swf decompiler, sağ tarafta bulunan bir bölmeyle uygulamanın içinde kullanılmış olan fontları, şekilleri, gömülü resimleri, actionscript kodlarını, movieclipleri, kullanılan kareleri ve bu kategoriye uymayan çeşitli tagları görüntülüyor. bunların arasından seçim yaptıkça ortadaki sevgili penceremiz bunun ne menem bir şey olduğunu size naklen göstermeye devam ediyor. alt kısımda ise seçtiğiniz herbir donenin özelliklerini gücünün yettiğince size bildiriyor.

sağ bölümde kısayol olarak bulabileceğiniz iki özellik ise swf decompiler programının icat ediliş nedeni; export recources ve export fla. seçiminizi sağ bölümde tik koyarak yaptıktan sonra, export recources tuşuna basarsanız önünüze açılan bir popup penceresi, kullanılmış yazıları text dosyası olarak, kullanılan sesleri mp3 yada wav formatında, videoları flv dosyası olarak, gömülü resimleri jpeg, png yada bmp olarak, actioncript kodlamalarını ise as formatında bilgisayarınıza kayıt edebilmenize olarak sağlıyor, ama isterseniz swf olarak da saklayabilirsiniz. şekilleri, fontları, movieclipleri, düğmeleri, kareleri ise swf formatında kaydetmeniz gerekiyor.

export fla dediğinizde ise, tabi seçimleri yaparak, dosyayı bir fla dosyasına dönüştürerek kaydedebiliyorsunuz. hangi flash versiyonu ile export edeceğini size soruyor, fakat isterseniz otomatik algılamasını isteyerek bu soruyla tekrar muhatap olmayabilirsiniz. yalnız dikkat, çok uzun ve fazla actioncript kodlamaları ve uygulamada bulunan ama bilgisayarınızda bulunmayan fontlar, export etme aşamasında problem çıkarmamasına ve veri kaybı olmamasına rağmen, dönüşen kaynak dosyasını tekrar test ettiğinizde tasarımın istenilen performansta olmamasına yol açabiliyor.

"iyi de flash sitelerini nasıl ameliyat edeceğim" diye soruyorsanız, bunun için swf catcher isimli bir uygulamanın kurulum aşamasında browserınızda yerini almasını sağlıyabiliyorsunuz. tabii ki firefox için olan versiyonu da mevcut. hoşunuza giden sitede bu düğmeye basarak gerekli analizleri hatta ameliyatları gerçekleştirebilirsiniz.

tasarım hırsızları için bulunmaz bir hint kumaşı olma potansiyeli taşıyan bu program, flash ile oluşturulmuş siteleri yağmalamak için ideal olmasına rağmen tamamen yasal, tabi lisans ücretini ödemeniz şartıyla.

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

Onlarsız Yapamadığımız 53 CSS Tekniği

umg — Mon, 09 Jun 2008 20:55:00 GMT

53 CSS Tekniği

CSS çok önemli ve gün geçtikçe kullanımı artmakta. Cascading Style Sheets bizlere tablodan bağımsız tasarımlar ve kodlamaların yazı sıra kendine has seçici ve belirleyici , arayüz efektleriyle XHTML diline yeni başlayan arkadaşların çoğunun henüz tanışmadığı fakat bu işle biraz uğraşmış bir çok webtasarımcı arkadaşın kullanmadan yapamadığı bir çok tekniği içerisinde saklamaktadır.

Geçen bir kaç yıl içinde CSS üzerine bir çok makale yazıldı çoğu HTML dilinin tablolardan ayıklanmması ya da tablosuz tasarımda büyük bir websisteminin tasarımının tek bir dosya ile nasıl saniyler içerisinde değiştirilebileceğini anlatan makalelerdi .

bütün bunların yanı sıra CSS'e derinlemesine değinen tasarımcı arkadaşlar da var elbet fakat benim için en önemlisi web programcılarının CSS'e nasıl baktıkları ve ne yönde kullandıklarıdır, biliyorum ki onlar css'in tasarım yönüyle değil kendilerine yani webprojelerine neler getirebildikleriyle ilgilenecektir işte bu notada biraz yabancı kaynakları araştırmak hepimizin önünü açacaktır, webprogramcılarının rahat durmayıp CSS'i de bir php , asp, yada Javascript gibi kullanmaya çalışmaları kaçınılmaz oldu. :)

Sonunda CSS'i yakın geçmişte de olsa programlama adına kullanmak için bir çok teknik geliştirdiler . işte vazgeçemeyeceğimiz 53 temel CSS tekniği .
1- CSS tabanlı Navigasyon

css Navigasyon tekniği

2 - Css ile Matrix Loader Navigasyon

css Matrix Navigasyon tekniği

3 - CSS Tab Menu Tekniği

css tab Menu tekniği

4 - CSS Bar Grafikler

css Bar grafikler

5 - Adam'ın CheckBox ve Rodyo Butonu Tekniği

Adam'ın Checkbox ve radio buton tekniği

6 - CSS ile production Notları yaratmak

css production notes

daha fazla kalabalık yapmamak adına ben sadece bir kaçını yazıma ekledim, diğer 47 Css tekniğini kaynağından incelemek için tıklayın

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

jQuery öğrenmek için ideal kaynaklar

umg — Wed, 04 Jun 2008 18:35:00 GMT

jQuery kütüphanesinin nimetleri gün geçtikçe artıyor. Peki bu kütüphanenin nimetlerini nasıl öğrenebiliriz, nasıl yararımıza kullanabiliriz tarzı sorular aklınızı kurcalıyorsa aşağıdaki kaynakları zaman zaman kontrol ederek jQuery'nin kullanımı hakkında yeterli bilgiyi edinebilirsiniz.

15days of jQuery - bu site jQuery hakkında birçok örnek kod ve rehber içermekte.
Learning jQuery - aynı şekilde rehber ve örnek kodlar bulunduran nitelikli bir blog.
jQuery for Designers - daha ileri seviye rehberler bulunan bir site.
How jQuery works - jQuery’nin çalışma prensipleri yani basit kullanımları hakkında makaleleri bulunan site
jQuery Tutorials for Designers - ileri düzey 10 uygulamanın bulunduğu bir sayfa.
jQuery in 15 minutes - slayt gösterisi ile jQuery’i tanıyın.
jQuery Cheat Sheet - jQuery terimlerinin bulunduğu referans sayfası.

buradaki kaynaktan Türkçeleştirdiğim sitede ayrıca tasarım rehberleri de bulunmakta.

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