yazi-portre-poster-tasarimi

Photoshop ile Şık Yazı Portre Tasarımı

Geçtiğimiz günlerde Photoshop ile şık poster ve afiş tasarımları hazırlamıştık. Bugün onlara bir yenisini katacağız.

Birlikte Mario Puzo‘nun dünya klasiklerine armağanı olan Godfather için bir tasarım hazırlayacağız. Kitap karakterlerinden olan Vito Corleone‘den (Marlon Brando) bir alıntı ve portreden oluşacak bu tasarım hem şık hem de basit.
(daha&helliip;)

Devamını Oku


photoshop-serbest-calisma-2

Photoshop ile Serbest Çalışma #2

Uzun bir aradan sonra Photoshop ile yaptığımız serbest çalışmaların ikinci adımına geçiyoruz. Hepinizin bildiği birkaç hızlı adımla fotoğraf ve rötuş sanatçısı Matthieu Garnier‘in eserini sıfırdan Photoshop ile hazırlayacağız. Stratocumulus isimli bu çalışma oval yapıdaki bulutların üzerine atılmış ince oval bir katmandan ve beraberindeki stratocumulus kelimesinden oluşuyor.

Sözü geçmişken, stratocumulus, oval köşeli, koyu tonlar içeren ve diğerlerinin alt katmanlarında barınan bulutlara verilen latince bir isim. (daha&helliip;)

Devamını Oku

CSS ile Duyarlı Altı Çizgili Yazı

CSS UnderlineHTML serüvenine başladığımızda kullandığımız bold, underline ve italic gibi tanımlamalar CSS‘in gelişiyle değişime uğradı. Daha önceleri <u></u> elemanı ile yaptığımız altı çizgili yazılar artık CSS’in text-decoration:underline tanımlamasıyla yapılır hale gelmişti. İşlem yapısıyla birlikte yelpazemiz de genişledi. Bu tip yazı elemanlarının CSS’in kontrolü ile gerçekleşir olması, özgünleştirme ayarlarını da beraberinde getirdi.

Bu makalemizde sizlere altı çizgili yazının web üzerindeki son evriminden bahsedeceğiz. Satır çizgisini geçen (kuyruklu, örn: y, ğ, p, j, g) harfleri gizlenmiş bir gölge ile imkansız gibi gözüken tipografik yapıya çevireceğiz. (daha&helliip;)

Devamını Oku

CSS ile SEO ve performans dostu harika resim açıklamaları

Merhaba arkadaşlar. Bu makalemizde görsel açıdan olduğu gibi performans ve SEO açısından da inanılmaz başarılı olan bir resim efektini anlatacağız.

Okumakta olduğunuz makalenin türevleri olabilir, fakat tarafımızdan hazırlanan bu CSS kodu yerli ve yabancı kaynaklarda bulabileceğinizin en iyilerinden biri. Neden mi?

  1. Sadece tek division kullanıyor.
  2. Köprü bağlantılar a block veya onclick ile değil, klasik href türünde. Böylece ziyaretçinin browserinin java desteği kapalı olsa bile tam performans ile çalışmakta.
  3. Yukarıda dediğim gibi, kod satırlarının içersinde JS yok. Bu yüzden hızlı ve her kullanıcı tarafından görülebilir.
  4. CSS3 ‘ün yeni teknikleriyle süslü.
  5. Yazılar paragraf içinde, yani tam anlamıyla açıklama metinleri oldular. Böylece arama motorlarının botları görsel arandığında <p> içindeki geniş açıklama metnini yayınlar. Kısaca SEO dostu diyebiliriz.
  6. Yazılar seçilerek kopyalanamaz.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

Makaleleriniz İçin Google Web Fonts

Google Web Fonts

Uzun makaleleri okunulabilir kılan kullanılan yazı tipleridir.

Arial, Verdana, Tahoma veya Helvetica gibi klasikler dışında güzel yazı tipleri bulmak artık çok zor değil. Google, Web Fonts üzerinden binlerce kaliteli yazı tipini ücretsiz olarak sunmakta. Yelpaze bu kadar genişken yeniliğe ne dersiniz?

Bu makalemizde sizlere Google Web Fonts‘un en çok kullanılan 25 yazı tipini sunacağız. Ayrıca hepsi Türkçe karakter destekli! (daha&helliip;)

Devamını Oku

CSS ile Yazı Arka Planı : text-fill-color

text-fill-colorCSS3 ile yelpazeye dahil olan text-fill-color ile alışılagelmiş color arasındaki farkları inceleyeceğimiz bir makaleyle devam ediyoruz.

Sol tarafta görmekte olduğunuz gibi bu teknik ile fotoğrafları rahatlıkla metin üzerine yerleştirebiliyoruz. Sadece fotoğrafları değil, gradient (renk geçişleri) de bu teknik ile kullanılabilmekte. (daha&helliip;)

Devamını Oku

HTML5 Video Oynatıcı (Altyazı ve Logolu)

HTML5 Video Player

Merhaba arkadaşlar.

HTML5‘in dünyamıza girmesiyle kazandığımız kolaylıklardan en büyüklerinden biri kuşkusuz video oynatıcılar. Bu makalemde HTML5’in video yapısını inceleyeceğiz ve mükemmel bir video oynatıcı hazırlayacağız. Görselde gördüğünüz gibi kanal logosu ve alt yazı desteğini de bu örnekle birlikte öğreneceğiz.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku