CS6 sürümünün gelişinden bu yana Adobe, Photoshop'ta web tasarımlarını düzenlemek ve geliştirmek için çok kullanışlı bir seçenek uyguladı. Operasyon çok kolay ve özellikle hızlı. Uygulama aracılığıyla şekillerimizi ve metin katmanlarımızı referans alarak basamaklı stil sayfaları oluşturabileceğiz. Prosedür, mockup'ımızı geliştirmek, öğelerimizin kod sürümünü kopyalamak ve sayfamıza yapıştırmak kadar basittir.
Özellikle tasarımımızın gelişimini görsel olarak ve gerçek zamanlı olarak görmemize izin verdiği için çok iyi bir seçenektir. İşte bu seçeneği kullanmak için bazı ipuçları ve maksimum performans:
Kesin olmaya çalışın
Profesyonel bir sonuç elde etmek için, sitenizin ölçülerini ve oranlarını dikkate almanız önerilir. Tasarladığınız şablonun Genişlik ve Yükseklik değerlerini ayarlayın ve bunları modelinize uygulayın. CSS kodunu kopyaladığınızda, her bir öğeyi, her öğe ile tuvalin kenarları arasındaki piksel cinsinden mesafeyi referans alarak yerleştireceğiz. Ayrıca, kullanıcılarınıza maksimum okunabilirlik sağlamak için her bir öğenin hizalanması ve her biri arasındaki boşluk dahil olmak üzere tasarımınıza dahil edeceğiniz boyutları ve hiyerarşik nedenleri hesaba katın.
Kılavuzların kullanımı ve arayüz kuralları, tüm unsurları mükemmel şekilde hizalanmış düzgün, temiz bir şablon oluşturmanıza yardımcı olacaktır.
Her bir elemanın tüm özelliklerini yapılandırın
CSS kodunu kopyalama seçeneği bize sitemizi şekil ve metin katmanlarını kullanarak büyük bir hassasiyetle tasarlama imkanı verir. Her katmanın içeriği Pano'ya kopyalanacak ve hızlıca stil sayfamıza yapıştırabiliyoruz. Şekil katmanlarından, aşağıdaki ayarlar için değerleri yakalayın:
- boyut
- Pozisyon
- Fırça rengi
- Dolgu rengi (degradeler dahil)
- Düşen gölge
Metin katmanlarından aşağıdaki değerleri yakalayabiliriz:
- Font ailesi
- Yazı tipi boyutu
- Yazı tipi kalınlığı
- Satır yüksekliği
- Altı çizili
- çizili
- Üst simge
- Alt simge
- Metin hizalama
Bunu aklınızda bulundurun ve aradığınız stili sağlamak için bu değerlerin her birini ayarlayın.
Katman gruplarıyla çalışın
Bu işlev, iki tür sınıfa göre organize edilmiş çalışmamızı çevirir; her grup için bir şekil veya metin katmanlarını bir araya getirir ve bu türlerden birinin her katmanı için bir sınıf. Her grup sınıfı, alt div öğelerini içerecek ve her gruba eklenen katmanlara karşılık gelecek bir ana div öğesini temsil edecektir. Bu şekilde, alt kapsayıcıların üst ve sol değerleri, üst kapsayıcıya atıfta bulunularak ayarlanacaktır. Bu seçeneğin akıllı nesnelerde kullanılamayacağını ve gruplanmadıkça aynı anda birden fazla katmana uygulanamayacağını unutmamalısınız.
Dönüştürme adımları
Modelinizi yaptıktan sonra, her bir öğeyi özelleştirdiniz ve bunları gruplar halinde gruplandırdınız, yalnızca şu adımları izlemeniz gerekecek:
- Katmanlar paneline gidin ve şu iki seçenekten birini seçin:
- Bir şekle veya metin katmanına veya bir katman grubuna sağ tıklayın ve CSS'yi kopyala seçin.
- Bir şekil veya metin katmanı ya da bir katman grubu seçin, ardından seçeneği seçin CSS'yi kopyala Katmanlar paneli menüsünde.
-
Kodu stil sayfası belgenize yapıştırın ve html5 aracılığıyla sayfalarınıza uygulayın.
