İnternet üzerinde görmüş olduğumuz birçok web sitesi ve kaynak üzerinde onlarca bağlantı görürüz ve bunları kullanırız. Bu bağlantıların gelişen web akımlarına ve özellikle de Web 2.0 tasarım özelliklerine göre şekillendirildiğini biliyoruz. Zira özelleştirilmiş bağlantılar sayesinde tıklayacağımız bağlantı sonucunda bir harici sayfaya mı gideceğimizi yoksa bir dosyayı mı indireceğimizi bilir hale geliyoruz. Bunu bizlere bildiren elbette bağlantımız başında kullandığımız küçük ikon ve resimler oluyor.

Şüphesiz uygulamanın yapılmasında en büyük pay Css’nin. Xhtml ile de bu özelleştirilen bağlantıları kullanarak site ziyaretçilerimize değişik bağlantı profilleri sunmuş oluyoruz. Bu makalemizde en basit yöntemiyle gönderilerimizde ve hazırlamış olduğumuz websitelerinde kullanılan bağlantılara nasıl resim ekleyeceğimizi anlatacağız.
Gönderinin Devamını Okuyun…

Herkese selamlar, Photoshop Uygulamalarına elimizden geldiğince sitemizde yer vermeye çalışıyoruz. Bu makalemizde de bunlardan birine yer vereceğiz. Basit Photoshop uygulamalarıyla sitelerimiz için rahatlıkla birkaç adımda oluşturulabilecek butonlar ve navigasyonlar yapabiliriz. Aslına bakılırsa yukarıdaki navigasyonu 1-2 dakika içinde oluşturmak hiçte zor değil. Şimdi dilerseniz hemen nasıl adımlar izleyeceğimizi ve navigasyonumuzu nasıl şekillendireceğimizi anlatalım.
Gönderinin Devamını Okuyun…

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…

E-günce sahipleri çok iyi bilirler ki (özellikle tasarım ve teknoloji konularında yazanlar) makale yazmak, bir bilgiyi görsel ögelerle destekleyip ilgilere anlatmak çok zahmetli ve bir o kadar da dikkat gerektiren bir iştir. Bazı zamanlarda bu makaleleri (tutorial) kendimiz bulup uygulamak isteyebiliriz. Sizlere sürekli olarak kullandığım ve her zaman takıldığım konularda başvurduğum bir kaynağı tanıtmak istiyorum; Pixel2life.com

Pixel2life.com, aklınıza gelebilecek tüm konularda makaleler barındıran ve sizleri ilgili sayfalara yönlendiren bir derleme sitesidir. Photoshop, Dreamweaver, Flash, 3d Max, Illustrator, Inkspace ve daha birçok ana başlıkta makaleler derleyen site aynı zamanda Forum ve Developer alanına da sahip. Siteye dilerseniz üye olabilirsiniz ancak üye olmadan da sitenin tüm bölümlerinden yararlanabilirsiniz. Özellikle çoğu muadili sitede görülmeyecek biçimde ana kategoriler alt kategorilere ayrılmış ve böylelikle ziyaretçinin binlerce kaynak içinde kaybolması önlenmiş. Açıkçası her zaman kullandığım ve takip ettiğim bir kaynak. Sizlere de (özellikle tutorial arayan arkadaşlarıma da) şiddetle tavsiye ediyorum.

Tasarladığımız web sayfaları ve sitelerinde çoğunlukla resim değişim efektleri (image rollover) kullanırız. Bu efekti gerek Javascript yardımıyla gerekse de Xhtml ve Css bileşimiyle rahatlıkla web sayfalarımızda uygulayabiliriz. Bahsettiğimiz özellikte fare ile resmimizin üzerine gelindiğinde yine aynı boyutta başka bir resim ile resmimizin yer değiştirdiğini görürürüz. Bu yazımızda sizlere kısaca bu işi Adobe Dreamweaver ile nasıl yapacağımızı anlatacağız. Böylelikle çok kolay ve zahmetsiz bir biçimde sayfalarımıza image rollover efekti ekleyebileceğiz. Ayrıca bu teknik ile yapmış olduğumuz işlemde geçerli (valid) bir kod elde etmiş olacağız.
Yazının Devamını Göster ▼

Başlığın çok karışık olduğunun farkındayım. Bu yazımda sizlere anlatmak istediğim şey birçok blog sitemizin kullandığı küçük soluk resimlerin fare ile üzerine gelince asıl rengini alması ve bağlantı alanı olarak kullanılması. (Örnek olarak, Sesebian ve Fikirbozan‘ın sidebar bölgesine bakabilirsiniz) Fikirbozan.net’in gönderisinden esinlenerek yazdığm bu makalede hem geçerli (valid) bir kod yazımı ve kolaylıkla sitemize uygulayacağımız bir örnek yapacağız. Aslına bakarsanız bu işi filter parametresi ile de yapabiliyoruz ancak bu yöntem W3C’nin Xhtml Validation alanından geçemiyor. Bu yüzden hali hazırda DynamicDrive.com üzerinde kullanılan şuradaki scripti geçerli bir hale getirdim. Localde yaptığım denemelerde scriptin hem çalıştığını hem de Geçerlilik Testinden geçtiğini gördüm. Bu küçük ön bilgiden sonra hemen uygulamamıza geçelim.

Öncelikle bu uygulamayı bir blog sitesinde kullanacaksanız header.php dosyanızı açın ve aşağıdaki kodları girin. Şayet bunu html/css bazlı bir sitede kullanacaksanız head etiketinin bitiminden önce aşağıdaki kodu yazın.
Yazının Devamını Göster ▼

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.