20.04.2010
Merhaba bu makalemizde Expression Web 3 ile gelen bir diğer yeni özelliği, Expression Web’e (EW) Adobe Photoshop (PS) .PSD dosyası import etmeyi inceleyeceğiz.

Dünyanın büyük bir hızla ortak platformlar konusunda çalışmaya başladığı bir ortamda Microsoft’un da elbette çalışmaları olmaktadır. Bu kapsamda Expression Studio 3 ile gelen Adobe ürünleriyle uyumluluk çalışması bir tasarımcı olarak beni en mutlu eden gelişmelerden biri oldu. Expression Web’i ve Photoshop’u nerdeyse her gün kullanan biri olarak bu yeni özelliğin nasıl çalıştığını size anlatmaya başlayayım.

Elbette her zaman yaptığım gibi bu makale için de örnek olarak alttaki gibi bir tasarım hazırladım. Ama bu tasarımın benim için çok büyük bir önemi var. Takip edenler fark etmiştir. Bugüne kadarki makalelerimde kullandığım tasarımlar genellikle fantastik öğelerden ya da fantastik roman tanıtım uygulamalarından oluşuyordu. Alttaki site örneği de yine bir fantastik romanlar sitesi tasarımı fakat bu sefer tasarımda yazmış olduğum fantastik romanım Giddar’ı da kullandım. Giddar’ın Silverlight ile hazırlanmış sitesine buradan ulaşabilirsiniz. Alttaki diğer kitaplar iyi bir dilekten başka bir şey değildir.:)

Devam edelim. Bir site için alttaki gibi bir tasarım hazırladınız ve müşteri bu tasarımı onayladı. Yazılımı hazırlanmadan önce artık tasarımı parçalayıp bölme zamanıdır. Klasik yolla bu işe giriştiğinizde hepiniz çok iyi bilirsiniz ki bir çok Slice, crop, save for web işlemi sizi beklemektedir. Ama artık işler değişmeye başladı. EW’ye bir site tanımlayarak işe başlayalım. Bu işlemin nasıl yapıldığını bilmiyorsanız, şu makalemi inceleyebilirsiniz.

Site tanımladığına göre artık tasarım objelerini (imajlar) projeye alma vaktidir. Ama bu sefer PS’de crop, save for web’ler yerine makalemizin konusu olan yeni özelliği kullanıyoruz.

File>Import>Adobe Photoshop(.psd)...’yi seçiyoruz.

Hazırlamış olduğumuz .PSD dosyasını seçip “Open” a basıyoruz.

PSD import penceresi ilk açıldığında ben gözlerime inanamadım. Şu anda Expression Web, tüm layerları, gruplarıyla bir Photoshop dosyasına bakıyor. Enfes!!!

İstediğimiz layer’ı açıp kapayabiliyoruz. Ve bu sırada sol taraf eş zamanlı olarak güncelleniyor.

İstediğimiz layer’ın üstüne mouse’u getirince o layerda ne olduğunu gösteren bir popup açılıyor. 🙂

Bu dosyadan export edebileceğimiz dosya türleri alttadır. PNG, JPEG ve GIF olarak çıktı alabiliyoruz.

BBunu yaparken gerekli ayarlar varsa onu kullanabiliyoruz. Örneğin JPEG seçeneği için kalite ayarı yapabiliyoruz. Ayrıca export edeceğiniz imajın boyutunuda buradan öğrenebiliyorsunuz.

Layerları kapayarak sadece scroll arka planının kalmasını sağladım ve bunu transparan PNG olarak export edeceğim. br />

OK ‘e basınca dosyayı nereye kaydetmek istediğimi soran ekran geldi. İmajın adını değiştirip projenin “images” klasörüne kaydediyorum.

İşte biraz önce export ettiğim transparan PNG’nin IE’de kullanılmış hali. Çok başarılı.

İşlemlere devam etmek için PSD’yi tekrar import ettiğinizde sizi şaşırtıcı bir şey bekliyor olacak. Dosya bıraktığınız en son import haliyle açılır.

Tekrar edecek olan backgroundlar gibi özel işlem isteyen imajlar dışında işinizin ne kadar kolaylaştığının farkındasınız umarım. Bu şekilde istediğiniz tüm imajları projeniz için hazır hala getirebilirsiniz.

AMA!!!

Elbette bu kocaman amanın bir anlamı var. EW 3 ile ilk kez gelen PSD import işleminin henüz tüm PS özelliklerini desteklemediğini söylemeliyim. Bunun ilerideki EW versiyonlarında tamamen düzeltileceğini düşünüyorum. Neyin desteklendiğini neyin desteklenmediğini dert etmenize gerek yok. Çünkü EW layerların yanındaki “i” ikonu ile size bu konuda yardımcı olacak.

Hatta bununla da kalmayıp ikonun üzerine gelirseniz size oradaki hatayı bildiyor. Altta iki tane örnek hata verdim.

Elbette bu konuda tamamen çaresiz değilsiniz. Bir başka makalede bir Photoshop PSD dosyasının Expression Web 3 import işlemi için nasıl işlemlerle hazırlanacağını anlatıp desteklenmeyen özelliklerin tam bir listesini vereceğim.

Bu makalede Expression Web 3 ile bir Photoshop PSD dosyasını projemize import etme özelliğini inceledik.

İyi çalışmalar

Teşekkürler.