Photoshop tasarımının kod iş akışına geçirilmesini kolaylaştırmak için Creative Cloud Extract'i kullanın. Bu işlemi hem web tasarımcıları hem de web geliştiricileri için basitleştiren Extract, bir web tasarımını üzerinde çalışılabilen koda dönüştürerek verimliliği büyük ölçüde artırır.


Photoshop kompozisyonları, tasarım özelliklerini daha sonra bu ilgili tasarımı HTML ve CSS biçimine dönüştürmeleri gereken web geliştiricileri ile paylaşmada yaygın olarak kullanılan bir yöntemdir. Tipik bir iş akışında tasarımcılar bir web tasarımı veya mobil tasarım için Photoshop kompozisyonları oluşturur. Üretim tasarımcıları daha sonra varlıkları dilimleyip kırmızı çizgi özellikleri oluşturarak PSD dosyasını geliştiriciler için hazırlar. Web geliştiricilerinden bu tasarım öğelerini ve varlıkları alıp bunları kod biçimine dönüştürmeleri beklenir.

Extract bu iş akışını yeniden oluşturarak, web tasarımcılarının Photoshop CC'de en iyileştirilmiş varlıkları rekor sürede dışa aktarmalarına ve Dreamweaver CC'de kod yazarken PSD'lerini geliştiricilerle paylaşmalarına olanak tanır.

Extract iş akışı

Extract, iş akışı kodunu yazabilmeniz için PSD tasarımında çeşitli yerlerde sunulur.

  • Tasarımcılar, Photoshop CC'nin tanıdık ortamında çalışarak görüntü varlıklarını katmanlardan veya katman gruplarından tanımlayabilir ve dışa aktarabilirler.
  • Web tasarımcıları ve geliştiriciler Extract'i tamamen bağımsız bir çözüm olan ve doğrudan kodlama ortamı içinden bağlamsal kod ipucu, varlıkları ayıklama ve daha fazlasını sunan Dreamweaver içinden kullanabilir.

Photoshop'ta varlıkları dışa aktarma

Photoshop kompozisyonları oluşturan tasarımcılar basit bir görsel arabirim kullanarak, görüntü varlıklarını tek tek katmanlardan veya katman gruplarından hızlı bir şekilde tanımlayabilir ve paket oluşturabilir. Böylece üretim süresi gözle görülür şekilde kısalarak tasarımcılara daha fazla zaman tanınmış olur.  


Adobe_Dreamweaver_CC_mnemonic_RGB_64px

Dreamweaver'da Extract

Web tasarımcıları ve geliştiriciler PSD'leri artık Dreamweaver'da görüntüleyebilir ve bağlamsal kod ipucu kullanarak CSS'lerinde kolaylıkla fontlar, renkler ve degradeler tanımlayabilir. Buna ek olarak en iyileştirilmiş görüntüleri sürükleyip Canlı Görünüm yüzeyine bırakabilir, metin kopyalayabilir ve daha fazlasını yapabilirler.



Bu çalışma Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License kapsamında lisanslanmıştır  Creative Commons şartları, Twitter™ ve Facebook sitelerinde paylaşılanları kapsamaz.

Yasal Uyarılar   |   Çevrimiçi Gizlilik İlkesi