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;)
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ı
Ara verdiğimiz HTML5 ve CSS3 derslerimize güzel bir giriş ekranı tasarımı ile devam ediyoruz.
Pure CSS diye tabir edilen, hiçbir şekilde JavaScript desteği kullanılmadan hazırlanan layout tiplerine örnek olarak göstereceğimiz bu tasarım barındırdığı animetif ve fonksiyonel özellikleriyle de beğeninizi kazanacaktır.
Modern bir tasarım hazırlayacağız. Renklerimiz flat, yapımız minimal ve beraberinde de responsive olmak zorunda. Ayrıca css animasyonlarıyla da bir fade-in geçişi hazırlayabiliriz.
(daha&helliip;)
Bu 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.
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.
Başlamaden önce malzemelerimizi hatırlayalım :
Bu makalemizde sadece CSS ile gazete yapısına benzer, bol kolonlu bir web tasarımı hazırlayacağız.
(daha&helliip;)
Kullanı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.
(daha&helliip;)
İlhamın nereden geleceği belli olmaz.
Günümüzde çizgisel tasarımlar fazlasıyla ilgi çekmekte. Sizde el çizimi bir web sayfası oluşturmak istiyor ve nereden başlayacağınızı bilemiyorsanız doğru yerdesiniz.
Adobewordpress olarak 25 adet el çizimi tasarımı derledik. Bu liste size kesinlikle ilham verecektir! (daha&helliip;)
Günümüz tasarımlarının en popüler öğelerinden olan yapışkan (sticky) header nasıl hazırlanır? Eğer bu soru sizin de aklınızı kurcalıyorsa doğru yerdesiniz.
(daha&helliip;)
CSS3 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;)
WordPress Kullanıcılarının En Sık Karşılaştığı Hatalar ve Çözümleri
Sitenize Kolayca Slider Ekleyin
Photoshop’u Türkçe Yapma, Türkçeleştirme
Kolayca fotoğraflarınızın kalitesini arttırın!
CSS Renk İsimleri
Neden Bitmap görselleri Vektörel’e çevirmeliyiz?
Photoshop ile Fotoğrafları Sulu Boya Resime Çevirin
Photoshop ile Metalik Yazı Efekti #1
Photoshop ile Gözlüğe Yansıma Ekleme