Konversi PSD menjadi CSS

Mockup Photoshop harus diubah menjadi antarmuka browser ketika seorang desainer menyerahkan file .psd berlapis kepada web developer. Hasilnya bukan format gambar lain: hasilnya adalah HTML yang diberi gaya dengan stylesheet .css, ditambah aset gambar atau vektor yang diekspor jika diperlukan.

Apa itu format PSD

PSD adalah format gambar raster berlapis native Adobe Photoshop. Format ini dapat menyimpan layer piksel, teks yang dapat diedit, bentuk vektor, mask, adjustment layer, guides, efek layer, smart object, dan data pengeditan lainnya dalam satu dokumen.

Fotografer, ilustrator, desainer grafis, desainer UI, dan agensi web menggunakan file PSD untuk komposisi yang dapat diedit, mockup antarmuka, artwork iklan, dan desain cetak. PSD dapat menampilkan halaman atau layar aplikasi yang lengkap, tetapi tidak mendefinisikan struktur HTML, makna semantik, interaksi, aksesibilitas, atau perilaku responsif.

Apa itu format CSS

CSS adalah format stylesheet teks biasa yang mengontrol presentasi dan tata letak HTML dan SVG. Properti di dalamnya mencakup color, font-family, font-size, margin, padding, display, grid-template-columns, border, bayangan, transformasi, dan aturan media responsif.

CSS membuat desain dapat diedit di situs web atau aplikasi, memungkinkan teks dan tata letak beradaptasi dengan berbagai layar, serta memisahkan presentasi dari konten HTML. Stylesheet tidak dapat menyimpan layer Photoshop, riwayat adjustment, teks PSD yang dapat diedit, atau data piksel arbitrer.

Cara mengonversi PSD ke CSS

Tidak ada konversi PSD-ke-CSS yang lengkap dan tanpa kehilangan data karena PSD menjelaskan komposisi visual yang dapat diedit, sedangkan CSS menjelaskan aturan yang diterapkan pada elemen dokumen. Konversi praktisnya adalah handoff desain dan implementasi front-end.

1. Buka file di Adobe Photoshop dan atur layer ke dalam grup yang bermakna seperti header, navigasi, kartu, dan footer. Ganti nama layer agar mengidentifikasi elemen antarmuka yang sesuai.
2. Periksa dimensi, jarak, warna, tipografi, opasitas, dan efek menggunakan guides, rulers, panel Character, serta color sampler Photoshop. Gunakan sistem pengukuran berbasis piksel atau rem yang konsisten.
3. Untuk layer teks, bentuk, dan gambar yang kompatibel, gunakan perintah Copy CSS pada menu konteks layer. Tempel deklarasi tersebut ke file seperti styles.css, lalu hapus selector dan properti yang tidak sesuai dengan markup sebenarnya.
4. Buat elemen HTML semantik yang merepresentasikan desain, lalu hubungkan elemen tersebut ke stylesheet menggunakan class atau selector lain yang sesuai. Ganti koordinat canvas Photoshop dengan Flexbox, CSS Grid, normal flow, atau model tata letak lainnya.
5. Ekspor aset yang tidak dapat direproduksi langsung oleh CSS. Gunakan File → Export → Export As untuk foto sebagai .jpg, grafik raster yang bergantung pada transparansi sebagai .png, dan artwork vektor sederhana yang sesuai sebagai .svg. Referensikan aset tersebut dengan <img> atau background-image sesuai kebutuhan.
6. Uji implementasi di browser pada ukuran viewport yang diperlukan. Bandingkan tipografi, pembungkusan baris, jarak, pemotongan gambar, dan efek visual dengan PSD, lalu tambahkan aturan responsif alih-alih memaksakan satu canvas tetap.

Adobe Photoshop adalah opsi desktop yang paling langsung karena dapat membaca data PSD native serta menyediakan ekspor aset dan penyalinan CSS. Photopea adalah alternatif berbasis browser yang tepercaya untuk pekerjaan sesekali: aplikasi ini dapat membuka file PSD, menampilkan properti layer, dan menyalin CSS untuk layer yang didukung. Namun, aplikasi ini tetap memerlukan HTML manual, pekerjaan tata letak, ekspor aset, dan pengujian responsif.

Alat inspeksi desain dan handoff seperti Avocode dapat menampilkan pengukuran layer, warna, tipografi, dan cuplikan CSS, tetapi fitur impor dan ekspor PSD berbeda-beda berdasarkan produk dan langganan. Pastikan dukungan PSD terbaru sebelum mengandalkannya. Konverter online “PSD to CSS” generik biasanya hanya menghasilkan deklarasi dasar atau cuplikan dengan posisi tetap; jangan mengunggah file desain rahasia ke layanan yang tidak dikenal.

Batasan kualitas dan kompatibilitas

CSS Photoshop yang disalin sering kali merepresentasikan canvas tetap dengan posisi absolut. CSS tersebut mungkin cocok dengan satu screenshot, tetapi gagal ketika viewport menyempit, panjang teks berubah, konten bertambah, atau pengguna memperbesar ukuran font. Bangun ulang tata letak menggunakan HTML semantik, Flexbox atau Grid, unit relatif, dan media query.

Gaya layer, blend mode, clipping mask, smart filter, adjustment layer, dan bayangan kompleks mungkin tidak memiliki padanan CSS langsung. Jika memungkinkan, buat pendekatan menggunakan gradient, bayangan, filter, pseudo-element, dan properti blending; jika tidak, ekspor hasil yang terpengaruh sebagai aset raster atau vektor.

Tipografi browser bergantung pada font web-safe yang tersedia, webfont berlisensi, atau @font-face. Font yang hilang atau digantikan akan mengubah pembungkusan baris dan dapat mengubah seluruh tata letak. CSS juga tidak dapat mempertahankan riwayat layer Photoshop yang dapat diedit, jadi simpan .psd asli sebagai file sumber.