TALHA KESKİN

Web Developer / UI Designer / Graphic & Web Designer

Kartal - İSTANBUL

Hoşgeldiniz. PHP, CSS, Javascript, jQuery, Bootstrap, PSD TO CSS, C#, .NET, Ajax, MsSQL, MySQL İşlerinizi yapabilirim.

Sosyal Profillerim
  • Yazı Detayı

Bu Yazı CSS İçin Yazılmıştır.

Merhaba, bu yazımda sizlere CSS temellerinden sonra gelen bir konu hakkında yazmak istedim. Konunun adı : PSD to CSS

PSD to CSS Nedir ?

Öncelikle PSD’yi CSS’e Çevirme tabirinin ne olduğunu açıklayarak konuya giriş yapayım. Bilindiği üzere ortada bir resim yokken bir web sitesinin HTML ve CSS kısmını kodlayabilmek, benim gibi yaratıcılığı nerede ise olmayan ve Back-End tabanlı birisi için son derece zor bir işlemdir. Bu durumun en büyük dez avantajlarından bir tanesi de web site sahibinin yani işverenin yapılan tasarımdan memnun olmama durumudur. Dolayısı ile böyle olumsuz durumları yaşamamak için iş verenin öncelikle yaptıracağı şeyi bir resme dökmmesi en mantıklı çözüm yolu olarak gösterilmektedir.

 

 

Herkesin malumu olduğu üzere bütün dünyadaki en iyi Grafik tasarım programlarından bir tanesi de Photoshop’dur. En yaygın grafik tasarımı olan Photoshop’un dosya formatı da PSD’dir.  Bir tasarım önce PSD ile kodlanır, Ardından front-end kısmını yapacak olan kişiye gelir. İşte bu PSD Formatındaki tasarımın HTML ve CSS kısmının kodlanma aşamasına da PSD to CSS denmektedir.

PSD to CSS

PSD to CSS Nasıl Yapılır ?

PSD to CSS PSD formatındaki Layerlere ayrılmış olan tasarım kısımlarının Front-End’ci tarafından birebir CSS’e aktarılması ile yapılmaktadır. Tasarımın layerlere ayrılması ve PSD ile kodlanması sebebi ile, renk seçiçiler, genişlik ve uzunluklar, font boyutları, font ailesi gibi CSS’sin temel taşları kolaylıkla görülebilmekte ve kodlanabilmektedir.

PSD to CSS İp Uçları

Ben Back-End tabanlı olmam sebebi ile sınırlı CSS bilgimle sizlere bazı ipuçlarını söyleyebilirim. Ancak, en doğru ipuçlarını uzman bir Front-End’ciden alabilirsiniz.

  1. PSD Dosyaları elinize geldiğinde mutlaka görüntü boyutunu kontrol etmelisiniz. Grafik tasarımcılar genellikle yüksek çözünürlüklü ekranlarda çalıştığından görüntü boyutu sizin bilgisayarınızın boyutuna uymayabilir.
  2. Zorlandığınız noktada elemente sağ tıklayarak CSS’i kopyala diyerek elementin CSS’ini Photoshop’un size vermesini sağlayabilirsiniz.
  3. Resmi bozmadan ve yüksek MB boyutlarından kaçınarak en kolay yöntemle elemente sağ tıklayarak PNG olarak dışa aktar diyerek alabilirsiniz.
  4. Hızlı seçim aracını kullanarak resimlerin BG’lerini kolayca silme işlemi yapabilirsiniz.

 

Eğer PSD to CSS ile ilgili bir sorunuz olursa yazı altındaki yorum alanından bana sorabilirsiniz. Herkese iyi çalışmalar dilerim.


Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*

*

*