Efendim yeniden merhabalar. Aşağıda birazdan okuyacağınız makaleyi ben yazmadım. Perfectgate.net sitesinden C-Nem yazmış. Sitede okuyunca hoşuma gitti. Yayınlamak için izin istedim ve sağolsun iznini aldım.

Bu yazımızda bir resme yağmur efekti uygulayacağız. Kaynak bir resmin üzerinde yapacağımız bir iki basit Photoshop efekti ile yağmur yağıyormuş izlenimi uyandıracağız. Dilerseniz hemen makalenin devamına geçelim.
Gönderinin Devamını Okuyun…

Digg‘de gezintilerimden birini yaparken bir gönderiye rastladım. Photoshopla klasör yapımını anlatan hoş bir makale ilgimi çekti. Aşağıda okuyacağınız yöntemle, kolay ve yapması fazla uzun sürmeyen bir biçimde kendi klasörlerimizi oluşturabiliriz. Lafı fazla uzatmadan hemen uygulamamıza geçelim. (Bu uygulama için Photoshop versiyonunuz önemli değil, ben 7 versiyonda bu uygulamayı yapabiliyorum)

ADIM 1
Öncelikle 400*400 px boyutunda RGB özellikli ve 72 resulation’a sahip bir doküman açın. Daha sonra aşağıdaki şekle benzer bir şekli Tool bölümünden Polygonal Lasso Tool (L) ile çizin. Shift tuşuna basılı tutarak düz çizgiler elde edebilirsiniz. Dilerseniz Photoshop’ta View >> Show >> Grid diyerek çalışma alanınızı karelere bölebilir bu sayede çiziminizi daha kolay yapabilirsiniz.

Yazının Devamını Göster ▼

Gradient Overlay bölümünde renk geçişleri #FFd27A -> #FFB912 arasında olacak.

Stroke alanında ise Size: 1px - Position: Outside - Renk: #C07C33

Inner Glow bölümünde Blend Mode: Normal - Renk: #FFFFFF - Choke: 100% ve Size: 1px şeklinde ayarlayın. Bu aşamadan sonra aşağıdakine benzer bir görünüm elde etmiş olmalısınız. (Bu katmanı, katman 1 olarak adlandırın)

ADIM 3
Bu adımda ise mevcut katmanımızı Ctrl+J tuş fonksiyonuyla kopyalıyoruz. Kopyalanan katman üzerinde Ctrl+T tuş kombinasyonunu kullanarak eğip bükme işlemlerini yapacağız. Lütfen aşağıdaki şekle benzer biçimde değişiklikleri yeni layerınıza uygulayın. Yeni katmanın önce üst köşelerinden yana doğru bir miktar çekiyoruz. Daha sonra üst orta bölümden bir miktarda boyunu kısaltıyoruz. Şekilde yaptığımız işlemleri görebilirsiniz. (Bu katmanı, katman 2 olarak adlandırın)

ADIM 4
Bu adımda ise klasörümüzün içinde bir belge varmış izlenimi vermek için yeni bir katman oluşturacağız. Bu katmanda klasörlerimizden daha küçük bir dörtgen çizerek işe başlıyoruz. Bu dörtgeni dilerseniz Marquee Tool (M) ile dilerseniz de Rectangle Tool (U) ile çizebilirsiniz. Katman renginin beyaz olmasına (#ffffff) dikkat ediniz. (Bu katmanımızın adı da katman 3 olsun)

Çizimimizi yaptıktan sonra katmanımıza aşağıdaki özellikleri uyguluyoruz.

Gradient Overlay bölümünde Opacity: 10% renk geçişleri #000000 -> #FFFFFF - Angle: 50°

Stroke alanında ise Size: 1px - Position: Outside - Renk: #D6D6D6

Bu özellikleri verdikten sonra aşağıdakine benzer bir şekil elde etmiş olacaksınız.

ADIM 5
Klasörümüzü ve içinde görünecek olan belgeyi oluşturduktan sonra artık son rötuşlara geliyoruz. Bu bölümde son çizmiş olduğumuz beyaz dörtgen katmanı seçiliyken Ctrl+T tuş kombinasyounnu kullanıyoruz ve dörtgenimizi (shift tuşuna aynı anda basarak) biraz yukarı kaldırıyoruz. Böylelikle belge görünümü sanki klasörün içine girmiş gibi olacak. Daha sonra Katman 2′yi seçiyoruz ve burada katman özelliklerinden Opacity (görünüm) değerini %70′e getiriyoruz. Böylelikle bu katmanımız biraz daha şeffaf bir hale gelmiş olacak ve içindeki belgemiz daha görünür hale gelecek.

Katman 3′ün katman 2′nin altında olduğuna dikkat ediniz. Aksi durumda katmanlarımız arasında görünüş farkı olacaktır. Layer penceresinde hangi katmanın hangisinin altında veya üstünde kalmasını istiyorsanız fare yardımıyla o katmanı bir sonrakinin üzerine sürükleyebilirsiniz. (Bu da başka bir Photoshop ipucu oldu)

Çalışmamız burda noktalanıyor, dilerseniz farklı renklerde klasörler oluşturabilir, Katman 3′ü kendinize göre tasarlayabilirsiniz. Şayet bu şekilde bırakacaksanız Katman 3′ün üst köşesine aşağıdaki gibi bir katlanma efekti verebilirsiniz. Sadece Katman 3′ün sağ üst köşesini kesip koyu bir renge boyayıp yapıştırmanız yeterli olacaktır.

Evet nedir, ne değildir, nasıldır, kime aittir derken hepimiz öyle ya da böyle bir Web 2.0 havası yaşıyoruz. (ve farkında olmadan başkalarına da yaşatıyoruz) Web 2.0 nedir veya nasıl bir olgudur tartışmasına girmek değil amacım. Sadece kendi bakış açımdan bu oluşuma yaklaşmak. Web 2.0′ın bizlere tasarım alanında büyük bir yol katettirdiği aşikar. Tabi bunda kesinlikle Css ve Xhtml’nin katkılarını unutmamak gerekir. Semantik kod yazımı ve bu yöndeki işleyiş Web 2.0′ın vazgeçilmezleri arasında. Ben bu yazımda Web 2.0 sitelerinin ortak özelliklerini ve böylelikle Web 2.0′ın genel karakteristik tasarım yapısını ortaya koymaya çalışacağım. Bir nevi Web 2.0 ne demek değil Web 2.0 neyi ortaya koyar yazısı olacak bizler için. Hemen başlayalım dilerseniz.

1) BÜYÜK ve KALIN FONTLAR

Evet Web 2.0′ın hayatımıza soktuğu en büyük tasarım değişikliklerinden birisi de “Büyük Fontlar”. Büyük fontla yapılan başlık ve duyurular; nedense daha çok ilgi çektiğinden midir yoksa diğer web sitelerinin bunun bir kural olduğunu düşünerek yaptığından mıdır bilinmez birçok sitede görmeye alıştığımız bir durum oldu. Büyük fontların kullanılması elbetteki hepimizin hoşuna gidiyor ve bunu çokça yapıyoruz. İncelemede bulunacağınız sitelerin birçoğunda vurgulanması istenen alanların büyük ve kalın fontlarla yazıldığını göreceksiniz. Açıkçası daha küçük metin boyutlarıyla yazılan yazılarımız kaybolup gidiyordu. Bunun yerine benimsenen büyük ve kalın fontla yazı örnekleri birçoğumuzun daha çok hoşuna gidiyor sanırım. Kalın fontları birçok sitenin logo tasarımında da kullandığını söylemeden geçmeyelim. Özellikle bir kuralmış gibi birçok büyük site logo ve grafik tasarımını hayata geçirirken elindeki fontun “bold” versiyonunu kullanmaya özen gösteriyor.
Gönderinin Devamını Okuyun…

W3C standartlarında kodlama yapmaya başlamadığım zamandan bu yana klasik table aç, tr aç, td aç kapat gibi basit menüler yapıyordum. Açıkçası bunları yaparken hiç zorluk çekmiyordum çünkü klasik Html yazımına hakim bir insanım ve biraz Css ile menüme dilediğim özelliği katabiliyordum. Ancak standartlara uygun kod yazma dönemine geçişle birlikte table ve td gibi etiketleri yavaş yavaş terketmeye başladım. Şu ana kadar tasarımlarımda çokça kullandığım ve zaman zaman sitemin tüm omurgasını yaptığım table kodunun bazı parametreleri bildiğiniz gibi standart kod yazarken insanı çileden çıkarabiliyor. Bunu en çok yaptığım menülerde hissettim. Birçok kez Xhtml ve Css’e uygun bir menü kodlamayı denedim ve açıkça söylemem gerekirse table ile yaptığım menülerden daha kolay oldu. Bu yazımda sizlere biraz teknik ayrıntıya girerek bir Xhtml, Css menünün nasıl yapılacağından bahsedeceğim.
Gönderinin Devamını Okuyun…

Hasan Yalçın abimiz Webrazzi Forum‘dan duyduğum üzere bir yazı dizisine başlamış. Ne de güzel yapmış. Yazı dizisinde Web 2.0′ın ne olduğunu bize en iyi anlatan “tasarımların” nasıl ve ne şekilde oluşturulacağına dair bilgiler veriyor güzel blogunda. (Bu arada hemen söyleyeyim Hasan abi tema tasarımını yenilemiş ve çokta güzel olmuş bana kalırsa) Hasan abi ilgili yazısında “Nedir bu Web 2.0 tasarımının trendleri” diyor ve bir güzel anlatıyor. Dizi bittiğinde kesinlikle arşivlenecek ve yıllar yılı saklanılacak nitelikte olacağa benziyor. Hatta ve hatta ilk 2 yazısı yayınlandı bile. Geç kalmayın ve Hızlı Linklere Buyrun. (Kendisinden izin almadan yayınladım bu yazıyı umarım bana kızmaz)
Hızlı Linkler: Hasan Yalçın | Web 2.0 Tasarım Rehberi

Sitemin Header alanında ve yeni yazıların üzerinde stickerlar görüyorsunuz. Bu stickerları (etiket olarak Türkçe’ye çevriliyor) artık birçok web sitesinde görmeye alıştık. Web 2.0′ın bize sunduğu tasarım yeniliklerinden birisi de bunlar. Yeni haberlerimizi, yeni dosyalarımızı veya çarpıcı olduğunu düşündüğümüz birçok şeyi bu stickerlar sayesinde web sitemizden duyuruyoruz. Ben bu yazımda size sürekli kullandığım yöntem ile bu tarz etiketlerin nasıl yapıldığını anlatacağım. Başka yöntemlerde var ancak, Oval Köşeler yazımda belirttiğim kadar kolay ve zahmetsizce bu işi yapacağız. (Hemen belirtmekte fayda var Photoshop versiyonunuz ne olursa olsun bunu yapabilirsiniz, ben şahsen 7.0 kullanıyorum ve yükseltmeyi de aklımın ucundan geçirmiyorum)
Gönderinin Devamını Okuyun…

Web 2.0′ın en büyük getirilerinden birisi de “Oval Köşeler” (Rounded Corners) oldu. Hemen hemen her site bu oval köşeli dörtgen şekilleri kullanmaya başladı. Birçok yerde Photoshop ile oval köşeli dörtgenlerin nasıl yapılacağına dair makaleler bulmak mümkün. Ancak ben bu yazımda Photoshop’a başladığım günden bu yana kullandığım stili sizinle paylaşacağım. Yazının devamında ekran görüntüleriyle birlikte bu işlemi göstereceğim. Gerçekten çok kolay ve zahmetsiz.
Gönderinin Devamını Okuyun…