HTML5 ve CSS3 Uygulamaları

Selamlar,

Html 5 ve Css3 kafa kafaya verip Flash'ın pabucunu dama atmaya çalışıyorlar gibi.





Bu iki yeni teknolojinin birleşmesiyle ortaya çıkan, gayet hoş çalışmaların birkaçını, bildirgeç derleyip toparlamış.

Buradan ulaşabilirsiniz.

PHOTOSHOP PATTERNLERİ

Selamlar,

30'un üzerinde photoshop pattern tutorialinin derlendiği bi çalışma.








Derlemeye buradan ulaşabilirsiniz.

İyi çalışmalar.

PHOTOSHOP YAZI EFEKTLERİ

Selamlar,

Yazılar üzerine derlenmiş, bir tutorial arşivi. Elbet işinize yarayan bir tutorial bulabilirsiniz.









Birbirinden orjinal tutoriallere buradan ulaşabilirsiniz.

MEDİKAL WEB SİTELERİ

Selamlar,

Medikal web site tasarımlarının derlendiği bir çalışma.







Sağlık ile ilgili tasarımlarda ilham kaynağı olabileceğini düşündüğüm çalışmaya ulaşmak için Buraya tıklayınız.

İyi çalışmalar.

HOŞ BİR WEB TASARIMI

Selamlar,






Gördüğümde çok hoşuma giden bir tasarım, eğitim için ne çok şatafatlı ne de çok resmi.
Olması gerektiği gibi. Kullanılan renklerle tutarlılık sağlanırken, jquery gibi teknolojileri de kullanarak, gayet hoş ve kullanıcı dostu bir web sitesi çıkartmışlar ortaya.


Buradan bahsi geçen web sitesine

Buradan da web sitesini tasarlayan şirkete bakabilirsiniz.

WEB 2.0 BUTONLARI

Selamlar,

Çeşitli web 2.0 butonlarının nasıl yapıldığını anlatan bir çalışma, hoş bir tutorial.



Buradan tutorial'ı inceleyebilirsiniz.


İyi Çalışmalar.

GOOGLE CHROME: SPEED TEST

Selamlar,

Google Chrome reklamları, her biri birbirinden etkileyici.

Bu reklamlarında yine Chrome'un hızından dem vurulmuş.

Akıl dolu bir çalışma.

20 ADET PORTFOLYO TEMASI (ÜCRETSİZ)

Selamlar,

Web site tasarımları, web2.0 ile birlikte neredeyse tamamiyle yepyeni bir hal almaya başladı. Dolayısıyla örnekler de arttı.







Yukarıda birkaçının önizlemesini paylaştığım tasarımların, psd dosyalarına buradan ulaşabilirsiniz.

HEADER TASARIMLARI

Selamlar,

Aşağıdaki birkaç örneği bulunan header tasarımları, esinlenmek için güzel örnekler.





30'un üzerindeki header tasarımını buradan inceleyebilirsiniz.

40 ADET PHOTOSHOP (WEB) TEMPLATE

Selamlar,










Yeşil renklerin kullanıldığı 40 adet web sitesinin derlemesine buradan ulaşabilirsiniz.

ICON ARŞİVİ

Selamlar,

Özellikle web tasarımlarında çok işimize yarayan, ufak ama vazgeçilmez araç onlar bizim için. Tasarımlardaki zenginliği sağlayabilen yegane minik şeyler :)




Aralarında, .jpg, .ai, .psd, .gif, .png dosyalarının bulunduğu 31 farklı icon setine buradan ulaşabilirsiniz.

GOOGLE EARTH ile NEW YORK CITY

Selamlar,

Google bakalım daha ne kadar büyüyecek? Şimdilik, evinde internet olan herkesi NY sokaklarında gezdirebilecek kadar büyümüş bunu farkedebiliyoruz.
Mağaza isimleri rahatlıkla görülebiliyor. Yakın zamanda araçların hareketleri de görünür hale gelirse hiç şaşmam.

60 ADET PHOTOSHOP (WEB) TEMPLATE

Selamlar,








Web 2.0 ile birlikte site tasarımları, ister istemez belli bir değişikliğe uğradı. Şeffaf görsellerin kullanımı, parlak ve kocaman butonlar gibi yenilikler geldi. Güzel de oldu. 2010 itibariyle önceki site tasarımlarının modası geçmiş oldu diyebiliriz.

Aşağıdaki linkten bulunan, her biri birbirinden farklı ve orjinal olan tasarımlar, ilham için birebir.


Buradan 60 farklı site tasarım tutorialine ulaşabilirsiniz.


İyi çalışmalar.

FLASH ile MOUSE ETKİLEŞİMLİ ARKA PLAN

Selamlar,

Web sitelerinde mouse hareketine bağlı olarak hareket eden arkaplanlar kullanılabiliyor. Yalnızca birkaç satır actionscript (2.0) ile basit bir şekilde bunu yapabilmek mümkün.


Flash'ta 800x400 ölçülerinde bir çalışma dosyası açıp, arkaplanda olmasını istediğimiz görseli, File > Import > Import to Stage ile (CTRL + R) ile çağırıyoruz.




Çalışma alanımıza çağırdığımız görseli, F8 tuşuna basıp movie clip haine getiriyoruz ve bu movie clibin instance name alanına arkaplan_mc gibi bir değer veriyoruz.


Sonrasında actions layerımıza

onEnterFrame = function ()
{

arkaplan_mc._x = (A - (_xmouse)/a)
arkaplan_mc._y = (B - (_ymouse)/b)
}

yazarak işin kabasını bitirmiş oluyouz.

Yukarıdaki kodda kullanılan;

"onEnterFrame" : sürekliliği sağlayacak.
A : swf üzerinde arkaplanın ilk bulunacağı "x" koordinatı
B : swf üzerinde arkaplanın ilk bulunacağı "y" koordinatı
a : arkaplanın mouse ile "x" düzlemi üzerinde hareket etme hızı
b : arkaplanın mouse ile "y" düzlemi üzerinde hareket etme hızı

Birkaç deneme ile gerekli değerleri sağlayabilirsiniz.

Sonuç olarak çıkan çalışma bu gibi olmalı.



Örnek çalışmaya buradan ulaşabilirsiniz.

İyi çalışmalar.

SOSYAL İCONLAR

Selamlar,




Sosyal ağlar virüs gibi yaygınlaşmaya devam ederken, hemen hemen her site de içeriklerini bu ağlar üzerinde paylaşımlara açıyor.
Bu paylaşımlar için buton olarak yüzlerce tasarımlar var.

Buradan izometrik icon tasarımlarına ulaşabilirsiniz.