Kitap İncelemesi: Photoshop'tan HTML'ye
Photoshop kullanarak web sitesi tasarımları oluşturmakta yeniyseniz, bu .PSD dosyalarını semantik, standartlara uyumlu CSS ve HTML dosyalarına dönüştürmeyi öğrenmek biraz göz korkutucu olabilir.
Sonuçta, sizin için dosyalarınızı dilimleyebilen ve kodlayabilen çok sayıda harika servis var. Ancak bu tasarımları kendiniz kesmeyi tercih edebileceğiniz durumlar vardır.
Bu nerede Photoshop'tan HTML'ye: Tasarımlarınızı Pro gibi Dilimleme Jeffrey Way, Nettuts + editörü tarafından geliyor.
145 sayfalık bu kitapta .PSD dosyasının çalışma web sitesi tasarımına dönüştürülmesinin tamamı, kod örnekleri ile ayrıntılı olarak ele alınmıştır.
Tek bir örnekle, okuyucuyu tüm süreç boyunca adım adım gezmek için bir model sitesi kullanılır. Temel kodlamadan, tasarımlarınızı çapraz tarayıcı uyumlu hale getirmeye kadar her şey kaplıdır.
Günlük olarak - eğer yakından dinlerseniz - dünyayı dolandırıcılardan bir tasarımı zorlamak için başarısız olmaya çalışan çığlıklar duyulabilir. Bu sadece dili öğrenmek meselesi değil; ezberleme kolay bir iştir. Çığlık oluşturma noktaları, sitenizi on farklı tarayıcıda görüntülediğinizde ortaya çıkar, bu da sitenizi farklı tutarlılık düzeylerinde işler.
Kitap, CSS ve HTML ile ilgili temel bir çalışma bilgisine ve ayrıca Photoshop'ta oluşturulmuş bir tasarıma sahip olduğunuzu varsayar. Kitapta kullanılan tasarım basittir, ancak tasarımı oluşturmak için kullanılan konseptler daha karmaşık tasarımlara kolayca uygulanabilir.
Kitap, HTML kodunu oluşturma sürecine girmeden önce bir tasarıma nasıl bakacağınız ile ilgili bir bölümle başlıyor.
Web sitemizin görselleri üzerinde hemen çalışmaya başlamak doğal görünmekle birlikte, aslında bu gerçeklerden daha fazla olamazdı. Bunun yerine, öncelikle üsumuzu ya da işaretlemeyi oluşturmalıyız ve tamamlandıktan sonra, görsellere geçelim.
Çoğu web sitesinin içerdiği üç temel bölümün seçilmesi: bir başlık, ana içerik alanı ve bir altbilgi, kapsanır ve daha sonra kitap temel HTML dosyanızın kurulum sürecine doğru atlar. Yine, temel bir HTML bilgisine sahip olan herkes bu bölümle ilgili hiçbir sorun yaşamaz.
Temel HTML kodunuz tamamlandıktan sonra, Photoshop'tan HTML'ye .PSD dosyalarınızı nasıl dilimleyeceğinizi kapsar.
Photoshop'taki tasarımı incelemek için bir dakikanızı ayırın. Gerekli olan her görüntüyü işaretlemeyi deneyin. Unutmayın, özellikler CSS ile yeniden oluşturulabilir; yaratıcı ol.
Dosyalarınızı dilimlemek için her iki yöntemden de bahsedilirken, kitap dilim aracını kullanmak yerine, ihtiyacınız olan görüntüleri yakalamak için kırpma ve yapıştırma ile kesme ve yapıştırma işlemlerini kullanır.
Her iki yöntem de geçerlidir. Her ikisini de denemenizi ve hangisinin sizin için en hızlı olduğunu seçmenizi öneririm.
Bu işlemi hızlandırmak için klavye kısayolları derinlemesine ele alınmıştır. Kullanmanız gereken tüm ayarlar ve hangi görüntü dosyası türünün hangi resim türleri için kullanılacağı da dahil olmak üzere, web için bu görüntülerin kaydedilmesi de CSS sprite gibi kapsamlı bir şekilde tartışılmaktadır. Son olarak, bu bölümde, kullanılan arka plan görüntülerine dayanarak HTML dosyasına yapılması gereken ayarlarla ilgili bazı notlar yer almaktadır.
HTML'niz ve görselleriniz hazır olduğunda, siteniz için CSS'ye girme zamanı. Tarayıcı sıfırları, standart hale getirilmiş, varsayılan bir CSS dosyasının nasıl yeniden yapılandırılacağı kadar vurgulanmış ve derinlemesine ele alınmıştır.
Her tarayıcı, işaretlemenizi otomatik olarak biçimlendirmek için bir "varsayılan CSS" kullanır. İlk bakışta, bunun son derece yararlı olduğunu düşünebilirsiniz… Her tarayıcı onları aynı şekilde uygularsa, bu bir sorun olmaz. Ne yazık ki, bu durum böyle değil.
Pratik ve kullanılabilir bir şekilde ele alınan göreli ve mutlak konumlandırma ve CSS şekilleri dahil olmak üzere bir dizi CSS ilkesi vardır. CSS'de uzman olmayanlar için bu bölümler özellikle bilgilendirici olacak, ancak bu bölümleri atlamak isteyebilecekler. Kapsanan bir başka büyük CSS kodu, yeni CSS tasarımcıları için can sıkıcı olabilecek, yapışkan altbilgileri nasıl oluşturacağınızdır.
Yerleşim sayfamızın ötesindeki ek sayfaların kodlanması, düzen ve içerikte küçük ayarlamalar yapma ve CSS dosyalarınıza eklemeniz gerekenler de dahil olmak üzere, kapsam dahilindedir. Bu bölümle işiniz bittiğinde, tam işlevli bir portföy web sitesi için gerekli olan tüm sayfa şablonlarına sahip olacaksınız.
Kitabın son bölümü, özellikle Internet Explorer 6 ve 7 gibi daha eski tarayıcılar söz konusu olduğunda, tarayıcınızın çapraz uyumlu tasarımını nasıl yapılacağını kapsar. Uzunlukta ele alınan en büyük sorunlardan biri, IE6'daki resimlerde saydamlık kullanımının olmamasıdır. Üstesinden gelmek için çeşitli çözümler ile.
Web sitenizi Internet Explorer 7'de ve aşağıda ilk defa görüntüleyerek sizi rahatsız edeceksiniz. Şanslı olabilirsiniz, ancak çoğu zaman, düzeltilmesi gereken çok sayıda sorun bulacaksınız.
Sonunda bir bonus bölümü, site tasarımına dahil edilen jQuery geçiş efektlerinin nasıl oluşturulacağını gösterir. JavaScript ve jQuery için yeni olan herkes için, bazı temel teknikleri öğreten ilginç bir proje.
Genel olarak, .PSD dosyalarınızın HTML'ye dönüştürülmesini dış kaynak haline getirdiyseniz veya Photoshop'ta web siteleri tasarlamayı denemek istiyorsanız, bu kitap kesinlikle okunmaya değer.
Birçok projeye ve örnek kodlara kolayca uygulanabilecek adım adım talimatlarla, Photoshop'tan HTML'ye Kendi tasarımlarınızı dönüştürmeye başladığınızdan emin olabilirsiniz. Biraz pratikle, kapsanan konseptler neredeyse her tasarımda kullanılabilir!
Kitap ayrıca, kendi projelerinizde kullanabildiğiniz, oluşturduğunuz sitenin kaynak dosyaları ile birlikte gelir.
Sadece WDD için yazılmış Cameron Chapman .
Bu kitap hakkında ne düşünüyorsun? Lütfen yorum bölümünde bizi bilgilendirin…