CSS3PS : PSD to CSS Converter

Web tasarımı ile uğraşanlar bilir, Photoshop ile çizilmiş tasarımları CSS‘e dökmek zor bir zanaattir. Bu yüzden birçok tasarımcı hazırladığı PSD dosyalarını CSS’e çevirmesi için profesyonel destek almak zorunda kalır. Kaybedilen zaman ve para da cabası.

İşte bu aşamada yardımımıza koşan onlarca Photoshop eklentisi mevcut. Bugün, bu listenin en çok dikkat çekenlerinden birini sizler için inceleyeceğiz.

CSS3PS, Photoshop’un CS3 ve sonraki versiyonlarda çalışan, katmanları otomatik olarak CSS kodlamasına çeviren bir eklenti. Ücretsiz bir şekilde kullanabileceğiniz bu eklenti sayesinde PSD to CSS çeviri işlemleriniz fazlasıyla hız kazanacak!

CSS3PS Photoshop Plugin Download

Bu kullanışlı PSD to CSS eklentisini aşağıdan indirebilirsiniz.

Adobe Photoshop CS5, CS6 ve CC versiyonları için download et.
Adobe Photoshop CS3 ve CS4 versiyonları için download et.

CSS3PS nasıl kullanılır?

Plugini indirdikten sonra Photoshop versiyonunuza göre aşağıdaki adımları izleyebilirsiniz.

Photoshop CS5, CS6 ve CC kullanıcıları için

Photoshop’ta CSS’e convert etmek istediğiniz katmanları seçtikten sonra File > Scripts > CSS3PS alanına gidiyoruz.

Photoshop CS3 ve CS4 kullanıcıları için

Photoshop’ta CSS’e convert etmek istediğiniz katmanları seçtikten sonra File > Scripts > Browse alanına gidiyoruz.

Açılan pencerede CSS3Ps.jsx dosyasını seçiyoruz.

Örnek : CSS3PS ile PSD to CSS

Örnek teşkil etmesi için Photoshop ile bir elips çizip ilgili layerın üzerini sağ tıklıyoruz ve blending options seçimini yapıyoruz. Açılan pencereden gradient overlay ve drop shadow seçenekleriyle aşağıdaki örneğe benzer bir tasarım oluşturuyoruz.

Daha sonra CSS3PS aracılığıyla bu tasarımı CSS3’e convert ediyoruz.

Bu kadar basit.