Sejak kedatangan versi CS6, Adobe menerapkan Photoshop dalam pilihan yang sangat berguna untuk tata letak dan mengembangkan desain web. Operasi itu sangat mudah dan yang terpenting cepat. Melalui aplikasi ini kita akan dapat menghasilkan style sheet bertingkat yang diambil sebagai referensi bentuk dan layer teks kita. Prosedurnya sesederhana mengembangkan mockup kami, menyalin versi kode elemen kami dan menempelkannya di lembar kami.
Ini adalah pilihan yang sangat bagus terutama karena memungkinkan kita untuk melihat evolusi desain kita secara visual dan real time. Berikut adalah beberapa tip untuk menggunakan opsi ini dan mendapatkan kinerja maksimum:
Cobalah untuk tepat
Untuk mendapatkan hasil yang profesional, Anda disarankan untuk mempertimbangkan ukuran dan proporsi situs Anda. Atur nilai Width dan Heigh dari template yang Anda rancang dan terapkan ke mockup Anda. Saat Anda menyalin kode CSS, kami akan menempatkan setiap elemen sebagai referensi jarak dalam piksel antara setiap elemen dan tepi kanvas. Juga pertimbangkan ukuran dan alasan hierarki yang akan Anda sertakan dalam desain Anda, termasuk penyelarasan setiap elemen dan jarak di antara masing-masing untuk memberikan keterbacaan maksimum kepada pengguna Anda.
Penggunaan panduan dan aturan antarmuka akan membantu Anda membangun template yang rapi dan bersih dengan semua elemennya selaras dengan sempurna.
Konfigurasikan semua karakteristik setiap elemen
Opsi untuk menyalin kode CSS memberi kami kemungkinan untuk mendesain situs kami dengan sangat presisi menggunakan lapisan bentuk dan teks. Konten dari setiap lapisan akan disalin ke Clipboard dan kami dapat dengan cepat menempelkannya ke lembar gaya kami. Dari lapisan bentuk, tangkap nilai pengaturan berikut:
- Tamano
- Posisi
- Warna guratan
- Warna isian (termasuk gradien)
- Bayangan jatuh
Dari lapisan teks kita dapat menangkap nilai-nilai berikut:
- Keluarga font
- Ukuran font
- Ketebalan font
- Tinggi garis
- Digarisbawahi
- Dicoret
- Superskrip
- Subskrip
- Perataan teks
Ingatlah hal itu dan tetapkan masing-masing nilai ini untuk memberikan gaya yang Anda cari.
Bekerja dengan kelompok lapisan
Fungsi ini menerjemahkan pekerjaan kita yang diatur oleh dua jenis kelas, satu untuk setiap grup yang menyatukan lapisan bentuk atau teks dan kelas untuk setiap lapisan dari salah satu jenis ini. Setiap kelas grup akan mewakili elemen div induk yang akan berisi elemen div turunan dan itu akan sesuai dengan lapisan yang disisipkan di setiap grup. Dengan cara ini, nilai atas dan kiri dari wadah anak akan disetel dengan mengacu pada wadah induk. Anda harus ingat bahwa opsi ini tidak tersedia dengan objek pintar dan tidak akan berlaku untuk lebih dari satu lapisan secara bersamaan kecuali mereka dikelompokkan.
Langkah-langkah untuk mengonversi
Setelah Anda membuat maket Anda, Anda telah menyesuaikan setiap elemen dan Anda telah mengelompokkannya berdasarkan kelompok, Anda hanya perlu mengikuti langkah-langkah ini:
- Buka panel lapisan dan pilih salah satu dari dua opsi ini:
- Klik kanan pada bentuk atau lapisan teks atau sekelompok lapisan dan pilih Salin CSS dalam menu konteks.
- Pilih bentuk atau lapisan teks atau sekelompok lapisan, lalu pilih opsi Salin CSS di menu panel Lapisan.
-
Tempel kode ke dalam dokumen stylesheet Anda dan terapkan ke halaman Anda melalui html5.
