CSS3 Text-Shadow Özelliği ile Photoshop Kalitesinde Gölge Efektleri

Merhaba arkadaşlar,

Uzun zamandır Css kategorisi altında paylaşım yapamıyordum fakat bugün twitter üzerinde rastladığım bir tweet ile hemen kolları sıvadım ve bu güzel özelliği sizlerle paylaşma kararı aldım.Bildiğiniz üzere css tasarımın vazgeçilmezidir ve gün geçtikçe kullanıcılar için farklı özelliklerle üzerindeki ilgiyi arttırıyor.

Ben bu paylaşımımda sizlere CSS3 ile gelen text-shadow özelliğiyle sanki photoshop’ta yapılmış gibi gölge efektlerini 1 satır kodla nasıl hazırlayabileceğimizi anlatıcağım.Şimdi geçelim örneklerimize.

 

 

1 – Vintage – Retro CSS3

text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;

(daha&helliip;)

Devamını Oku

Grunge Tasarımlar için Mükemmel Kaynak Derlemesi

Ben bir webmaster olarak bu paylaşımı yaparken tamamen içimden geçenleri yansıtarak sizlere aktarmak istiyorum bu bilgiyi.Webmaster’lık sadece belirli kalıplarla tasarım yapmaktan ziyade kişinin hayal dünyasını kullanarak yaptığı bir sanattır aslında,buda gerçek webmaster’ın farkını ortaya koyandır.Her zaman kalıp tasarımlardan kaçıp kendi zevkime göre hazırladığım tasarımlar yaptım ve bunu yapmanın ne kadar zevkli birşey olduğunu bildiğim için bir tasarımın oluşması için çok uzun zaman beklediğim bile olmuştur.

Yukarıdada söylediğim gibi tasarım webmaster’ın hayal dünyasıyla orantılıdır.Ben her zaman grunge bir tasarım yapmak istediysemde içeriğe uygun bir site hazırlamadığım için bu hevesimi ertelemek zorunda kaldım.Bu yazımda tasarım konusunda acemi olan yada kendini bu konuda geliştirmiş kişiler için güzel bir derlemeden bahsetmek istiyorum.

Google+ accountıma göz atarken rastladım bu kaynağa ve hemen sizlerle paylaşmak istedim.Uzun zamandır paylaşım yapamıyor olmamın verdiği moral bozukluğunu en azından bu şekildede biraz üzerimden atmış olacağımı düşünüyorum 🙂 (daha&helliip;)

Devamını Oku

Photoshop Gömülü Yazı Efekti Uygulaması

Merhaba arkadaşlar,
Bu paylaşımımda sizlere yine Web tasarımında sıkça kullanılan bir yazı efekti uygulamasının nasıl yapıldığını anlatıcağım.
Photoshop’la haşır neşirseniz çoğu sitede bu dersin bulunduğunu görmüşsünüzdür,Inset Text Effect diye geçen bu uygulamanın
adına biz türkçe karşılık olarak Gömülü Yazı Efekti diyoruz.Bu uygulama sayesinde sitenizin header kısmına güzel grafikler
tasarlayabilirsiniz.

Şimdi geçelim dersimize
1 – İlk olarak belli boyutlardaki sayfamızı Photoshopla açıyoruz ve arkaplan rengini #d9cfc0 olarak ayarlayıp,Layer ismini
arkaplan olarak değiştiriyoruz.

2 – Daha sonra arkaplan için ufak birkaç değişiklik daha yapıyoruz.Buradan indirdiğimiz texture’lardan birini arkaplanımıza ekliyor ve (daha&helliip;)

Devamını Oku

Photoshop 3D Ribbon Uygulaması

Merhaba arkadaşlar.
Bu paylaşımımda sizlere Photoshop ile web tasarımında en sık kullanılan uygulamalardan birini daha anlatıcağım. Bundan önceki yazımda Noise Texture uygulamasıyla web sayfaları ve masaüstü için güzel arkaplanları nasıl yapıcağımızı anlatmıştım, bu yazımdada bir önceki ders kadar faydalı olduğunu düşündüğüm başka bir uygulamadan bahsetmek istiyorum.
Uygulamanın son hali paylaşımın thumbnail’ında gözüktüğü gibidir,
Artık dersimize geçebiliriz.

1 – İlk adım olarak belirlediğimiz boyutlarda bir sayfa açıyoruz ve daha sonra arkaplan rengi olarak istediğimiz rengi seçiyoruz.

Ben pattern yardımıyla üstteki gibi bir arkaplan belirledim,Bu sizin zevkinize göre değişebilir.

2 – Daha sonra yeni bir layer açarak adını genel olarak değiştiriyoruz ve bunada bir arkaplan belirliyoruz.

Ben bunun içinde farklı bir pattern kullanarak beyaz üzerine çapraz çizgilerden oluşan bir arkaplan belirledim.

3 – Daha sonra 3d ribbon’umuz için belirlediğimiz şekli çizmeye geldi. Bunun için yeni bir layer açıyoruz ve adını 3d ribbon olarak değiştiriyoruz, ve bunada bir renk ataması yapıyoruz.

4 – Şimdi sıra 3d özelliğini veren eklemeleri hazırlamaya geldi. Ben sol taraftaki çıkıntı kısmının yapımını anlatıcağım diğer kısmıda aynı şekilde yapılıyor. Bunun için kırmızı renkte oluşturduğumuz şekille aynı uzunlukta fakat width değeri küçük ve rengi daha koyu olan bir şekil daha belirliyoruz. Tabi bunu yapmadan öncede yeni bir layer açıp adını Ribbon sol olarak değiştiriyoruz. Her şekil için farklı layer’da çalışmamız bize değişikliklerde kolaylık sağlayacaktır.

4 – Şimdi bu koyu renkte hazırladığımız şekil için derinlik özelliğini vermeliyiz.Bunun için ctrl+t tuşlarına aynı anda basıyoruz ve şeklimiz köşelerinden boyutlandırılabilir bir duruma geliyor, daha sonra şeklin üzerinde sağ tuşa basıp Perspective sekmesini seçiyoruz ve aşşağıdaki gibi şekillendiriyoruz.

5 – Bu adımdan sonra şekli bulunması gereken yere kaydırıyor ve fazlalık kısımları siliyoruz.

Gördüğünüz gibi sol tarafı hazır hale geldi, aynı işlemleri sağ taraf içinde yaptığımızda karşımıza şu şekilde bir sonuç çıkıyor.

Bu konu üzerinden yaratıcılığınız kullanarak farklı şekiller oluşturabilirsiniz. Umarım faydalı bir konu olmuştur,bir dahaki paylaşımımda görüşmek üzere…

Bu uygulamayı kullanarak yapılan örnek çalışmalar :

Devamını Oku

Photoshop Noise Texture Uygulaması

Merhaba arkadaşlar,
Bu paylaşımımda sizlere Photoshop‘un uygulanması en basit fakat en kullanışlı efektlerinden birini anlatıcağım.
Bu konu sonunda ulaşacağımız sonuç aşşağıdaki gibi olucaktır.

Çoğu sitede bu uygulama kullanılır ve yaratıcılıkla birleştiğinde ortaya şaşırtıcı sonuçlar çıkabilir.
Şu an internet siteleri üzerinde en çok kullanılan arkaplan uygulamalarından biridir Noise Texture efekti.
Konu hakkında bilgi sahibi olduğunuzu düşünerek paylaşımıma geçiyorum.

1 – Ben masaüstümde arkaplan olarak kullanıcağım için 1366*768 boyutunda bir sayfa açtım,bu sizin tercihinize göre değişebilir.
2 – Layerımızın adını karışmaması için Arkaplan olarak değiştirelim.

3 – Bu layerımızda arkaplan için renk seçimi yapmalıyız bunun için istediğimiz rengi seçip Arkaplan adlı layerımıza uyguluyoruz.

4 – Şimdi sıra geldi Noise efektimizi arkaplanımıza uygulamaya,Bunun için yeni bir layer açıp adını Noise Texture olarak değiştiriyoruz.
5 – Daha sonra Noise Texture adlı layerımızı beyaz renge boyadıktan sonra aşşağıdaki adımları izliyoruz. (daha&helliip;)

Devamını Oku

Photoshop Button Yapımı – Video

Arkadaşlar uzun zamandır paylaşım yapamıyordum,Bunun sebebi iş hayatımın başlaması ve baya yoğun olması.Şimdilik evim olmadığı için otelde kalıyorum ve bu tip sıkıntılıyor yaşıyorum.Belli bir süre bu şekilde idare etmeye çalışıcam fakat ilerde blogum için günlük bir zaman planlaması yapmayı düşünüyorum.
Konumuza gelicek olursak Photoshop programını kullanarak çok güzel ve sade bir button hazırlayacağız.Bu uygulamayı Csssprite tekniğiyle destekleyerek çok güzel sonuçlar alabiliriz. (daha&helliip;)

Devamını Oku