İçerik
Birkaç ay önce, duyarlı web tasarım aracı Edge Reflow CC ile Adobe'de büyük bir ilerleme gerçekleşti. Bu, Photoshop'u (Photoshop'u nasıl indireceğinizi buradan öğrenebilirsiniz) Edge Reflow'a bağlayan ve kodlamaya gerek kalmadan web mizanpajınızı Photoshop'ta doğrudan Edge Reflow'a hızla dışa aktarmanıza olanak tanıyan Generator eklentisinin oluşturulmasıydı.
Önceden, bir tasarımcı bir web mizanpajı oluşturmak isterse, bir mizanpaj oluşturması, onu ayrı bileşenlere ayırması ve bunları bir web tasarım programına taşıması gerekiyordu. Bu çok zaman alır.
Generator eklentisi bu süreci basitleştirir.
Nasıl yapılır
Yapmanız gereken ilk şey, Photoshop CC'yi indirip ardından Edge Reflow CC'yi indirip yüklemektir. Bu, Generator eklentisinin doğru çalıştığından emin olmak içindir.
Başlamazsa, Generator eklentisini indirin ve doğrudan kurun. Bu, bağlantıyla ilgili tüm sorunları çözmelidir.
Ardından, Düzenle: Tercihler: Eklentiler'e gidin. Jeneratör bölümünde, Ayarı kaydetmek için Jeneratörü Etkinleştir onay kutusuna ve Tamam'a tıklayın.
Generator kullanılırken bilinmesi gereken başka bir şey de, bunun dosyaya özel olması, yani her dosya için açılması gerektiğidir.
Bunun nedeni, bu özelliğin her projede etkinleştirilmesini istemeyebilmenizdir.
Belirli bir dosya için Generator'ı açmak için Dosya: Oluştur: Görüntü Varlıkları'na tıklayın.
Resim Varlıklarını etkinleştirdiğinizde, bu, burada gösterildiği gibi, dosyalar dizinimde BracketsIO-assets klasörünü oluşturur:
BracketsIO-assets klasörünü açtığımızda, bu proje için bu proje için otomatik olarak oluşturulan tüm görüntü varlıklarını görürsünüz.
İlginç olan kısım, bu dosyaların nasıl yaratıldığıdır. Bu yanıt için Katmanlar paneline gidin.
Izgara klasörünün açıldığını unutmayın. Yukarıda vurgulanan alanda, birkaç katmanın .webp uzantısıyla adlandırıldığını göreceksiniz. Bu, Jeneratör işlevinin bir parçasıdır.
Görüntü Varlıkları etkinleştirildiğinde varlıklar oluşturulur. Sadece bu değil, katmanlardan herhangi birinde bir değişiklik yaparsanız, bu değişiklik hemen varlıklar klasöründe güncellenecektir.
Bir sonraki aşama, yerleşim projenizden memnun kaldığınızda bir Edge Reflow projesi oluşturmaktır. Bunu yapmak için File: Generate: Edge Reflow Project seçeneğine tıklayın.
Edge Reflow aracılığıyla açabileceğiniz tüm Edge Relow varlıklarını içeren bir klasör oluşturulur.
Ardından, Edge Reflow'u başlatın. Ekranın sağ üst köşesindeki Photoshop CC Connect simgesine dikkat edin. Üstüne tıkla.
Bu iletişim kutusunu açacaktır. Edge Reflow'u Photoshop ile senkronize etmek için sol alt köşedeki Photoshop Sync düğmesine tıklayın.
Photoshop CC Connect panelini kullanarak mizanpajı, projeniz için tüm CSS ile tamamlanan Edge Reflow'a içe aktarabilirsiniz.
Daha önce belirtildiği gibi, orijinal Photoshop dosyasında değişiklik yaparsanız, bu değişiklikler varlıklar klasöründe güncellenir ve Edge Reflow'da görüntülenebilir.
Edge Reflow ipuçları
Edge Reflow dosyasındaki tüm metnin düzenlenebilir HTML olduğunun farkında olmak önemlidir. Bir projeyi Reflow'a aktardıktan sonra, gerektiğinde kesme noktaları içeren duyarlı bir düzen oluşturabilirsiniz.
Mizanpajınız bittiğinde, HTML ve CSS'yi çıkarabilir ve tasarım sürecini tamamlamak için tüm projeyi Dreamweaver gibi bir HTML programına taşıyabilirsiniz. Projeyi, tasarım sürecinin bir parçası olarak diğer profesyonellerle de paylaşabilirsiniz.
Temel olarak, Edge Reflow, farklı tasarım düzenlerini hızlı ve kolay bir şekilde deneyebileceğiniz bir prototip oluşturma aracıdır.
Birden çok sayfa içeren bir site oluşturuyorsanız, Photoshop CC Connect panelini kullanarak bu tasarımın her sayfasını Yeniden Akıt'a içe aktarabilirsiniz. İlk olarak, sayfayı Photoshop'ta açın, ardından Edge Reflow'da Yeni Sayfa Oluştur düğmesine tıklayın ve projenin bu kısmı içe aktarılacaktır.
Sadece görüntüler üzerinde çalışıyor olsanız bile bu tasarım bağlantısından yararlanabilirsiniz. Her görüntüyü uygun görüntü uzantısıyla (.webp, .PNG, .GIF gibi) adlandırırsınız. Bu uzantıları katmanlara, gruplara veya akıllı nesnelere ekleyebilirsiniz. Projeniz Photoshop'ta tamamlandığında, tüm dosyayı Edge Reflow'a içe aktarabilirsiniz.
Photoshop'a ek olarak, tasarımcılar Fireworks ve Illustrator CC'yi de kullanabilir. Edge Reflow ayrıca Edge Inspect ve Edge Web Yazı Tipleri ile entegre edilmiştir.
Sonuç
Photoshop ve Reflow arasındaki köprü, tasarımcılara bazı harika yeni araçlar sağlar ve birçok tasarım zorluğunu çözer. Görüntüleri ayırma ve parçaları bir HTML tasarım programına aktarma ihtiyacını ortadan kaldırır. Elbette mükemmel değil, ancak tasarlandığı işi verimli ve hızlı bir şekilde yapıyor.
Reflow ile hızlanmak için, bazı proje dosyalarını indirip sürecin nasıl işlediğini görmek için bunları kullanmak iyi bir fikirdir. Bir PSD şablon dosyasına ve tamamlanmış bir Yeniden Düzenleme dosyasına ihtiyacınız olacak.
Kelimeler: Nathan Segal
