Bu dersimizde Photoshop ile blurred (bulanık) arkaplan resimleri hazırlıyoruz.
(daha&helliip;)
gradient
CSS ile Yumuşak Geçişli Arka Planlar
CSS3’ün gradient özelliği ile dikkat çekici arka planlar hazırlamak mümkün.
Renk geçişleri için genelde büyük boyutlarda JPG ve PNG dosyaları kullanılır. Bu da web sayfanızın aşırı yavaşlamasına sebep olabilir. CSS Gradient sayesinde oluşturacağımız renk geçişleri performans açısından görsel dosya formatlarından fazlasıyla önde.
Şimdi ilk bu yeni özelliği tanıyalım, sonra ise birkaç kaliteli örnek üzerinde çalışalım. (daha&helliip;)
CSS Gradient Arkaplan ve Performans
CSS in background kod satırı içerisinde desteklenen onlarca arka plan türü var. Bu yazımda ise gradient (renk geçişlerini) türünü konuşacağız.
Görsel sıkıştırma üzerine konuştuğumuzda renk geçişleri içeren bir objenin dosya boyutunun yüksek olduğundan bahsetmiştik. Hele ki bu görsel zıt tonlamalar arasında geziyorsa onu yayınlamak hem sunucunuzu hem de ziyaretçinizi fazlasıyla rahatsız eder.
CSS ise bunu farklı bir yolla yapıyor. Rengin atanması ve gradient olarak arka plana yerleşmesi kişinin siteyi ziyaret ettiği bilgisayarda işlenmekte ve bant genişliğini rahatsız etmemekte. (daha&helliip;)
CSS ile Yazılara Gradient Efekti
Bu dersimizde ilk olarak Nick La’nın web sayfasında gördüğüm CSS Text Gradient tekniğini öğreneceğiz.
Bu teknik minik bir hile üzerine kurulu. Web sayfanızın arka plan rengiyle uyumlu gradient dosyaları hazırlayıp onları span halinde yazıların üstüne ekliyoruz.
Nasıl mı? Beyaz bir arka plan, üzerinde siyah bir başlığın olduğu sayfanız var diyelim. Beyazdan 0% opacity e doğru giden bir gradient çizip .PNG uzantısı ile kayıt ediyorum ve yazının üzerine gelecek şekilde yerleştiriyorum. Böylece gayet kullanışlı bir yazı efekti elde ediyorum.
(daha&helliip;)Photoshop ile Denize Yansıyan Işık Efekti
Geçtiğimiz hafta güzel bir okyanus fotoğrafı gördüm. Fotoğrafa biraz yaklaştığımda beyaza yakın tonlarda birkaç pikselin seçilebilir olduğunu gördüm. Kısa bir süre araştırdıktan sonra görselin Photoshop ile hazırlandığını, görünen ışığın ve ışık kaynağının sonradan eklendiğini anladım. Fakat ilk bakışta yeterince gerçekçi gözüküyordu.
Bu makalem ise o ışık efekti üzerine çalışırken kendiliğinden oluştu.
Photoshop ile Gökkuşağı
Bu dersimizde Photoshop ‘un Gradient (eğim) aracından faydalanarak gökkuşağı hazırlayacağız.
Çoğu dersimizde olduğu gibi bu sefer de sadece Photoshop’un araçlarını kullanacağız.
Bu efekti uygulamak için bir manzara fotoğrafı bulun. Size tercihim içinde yağmur bulutları olan bir fotoğraf kullanmanız.