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


Adobewordpress gururla sunar : “iPhone Mesajlar Ekranı”

iphone-mesajlar-css-html
Bugün sizlerle birlikte çok şık ve eğlenceli bir mesaj panosu tasarımı yapacağız.

iPhone‘un şık ve kullanışlı mesajlaşma ekranı hem sadeliği hem de kolay kullanılabilir olması sebebiyle izini sürebileceğimiz başarılı tasarımlardan birisi. Peki bu yapıyı web ortamına nasıl aktaracağız? HTML5 ve CSS3‘ün güçlendirilmiş yeni teknikleri ve jQuery‘nin fonksiyonelitesiyle bu iş sandığınız kadar zor olmayabilir.

Adobewordpress gururla sunar :
Karşınızda responsive yapıdaki iPhone mesajlar ekranı tasarımı

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

CSS ve jQuery ile Dönen Menü

css-jquery-rotate-menuBu makalemizde CSS ve jQuery desteğiyle farenin sağ tuşuna basıldığında açılan bir menü tasarımı yapacağız. Bu menüyü diğerlerinden ayıran özelliği de ekrana eğik olarak gelmesi.

Bir zamanlar tipografik animasyonlarda bol bol gördüğümüz ‘öğeleri çevirerek kadraja alma’ tekniği temel anlamıyla bu tasarımda da yer almakta. Gelişen web teknolojileri sayesinde de bu tasarımı web tarafında oluşturmak gayet basit.

Örneği görüntüleyerek başlayabilirsiniz.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

kagittan-htmle-web-tasarimi

Eskizden Kodlamaya Web Tasarımı

Eğlenceli bir makale ile yine sizlerleyiz. Bugün sizlerle deftere çizeceğimiz bir eskize hayat vereceğiz. Böylece web tasarımının en derinlerine dokunmuş olacağız. Biraz uzun soluklu olsa da gayet eğlenceli. Yukarıdaki gibi deftere karaladığımız tasarımları ilk Photoshop‘a, daha sonra da HTML ve CSS‘e dökeceğiz. Tabii bu işlemleri yaparken bütün bu teknolojilerin en son versiyonlarını ve en güncel tanımlarını kullanacağız. Herşey hazır olduğunda aşağıdakine benzer bir sonuç elde edeceğiz.

eskiz-web-tasarimi

Başlamaden önce malzemelerimizi hatırlayalım :

  • Cetvel
  • Kalem
  • Defter
  • Mac kullanıcıları için TextEdit
  • Windows kullanıcıları için Notepad

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

CSS ile Form Tasarımı

css-form-designKullanıcı arayüzü ve deneyimi söz konusuyken, form öğelerinin dizilişi ve tasarımı büyük önem taşımakta. Özellikle uzun yapıdaki formlar kesinlikle tekrar elden geçirilmeli, gerekirse tasarımla basitleştirilmeli ve adımlara bölünmeli. Hazırlayacağımız örnek yapı sayesinde varolan bir form yapısının HTML kodlarına hiç dokunmadan yepyeni bir tasarım oluşturacağız.

Bu makalemizde sadece CSS kodlarıyla bir form öğesini tüm iç detaylarıyla şekillendireceğiz. Üzerinde oynayacağımız form yapıları şöyle : Form, legend, label, input, fieldset, select, textarea, checkbox.

Örneği görüntüleyerek başlayabilirsiniz.

ÖRNEĞİ GÖRÜNTÜLE

(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