Cara Mengekspor Gambar Tajam dari Figma dan Photoshop

Masalah: Desain Tajam, Ekspor Buram

Anda menghabiskan berjam-jam membuat desain sempurna di Figma atau Photoshop. Di kanvas, semuanya terlihat sempurna hingga piksel terakhir. Tapi ketika diekspor ke JPG atau PNG dan dilihat di browser, gambarnya terlihat lembut, buram, atau… tidak pas.

Ini adalah keluhan umum para desainer. Gambar buram biasanya disebabkan oleh dua hal: resolusi salah saat ekspor atau pengaturan ekspor yang tidak tepat. Panduan ini memberikan alur kerja andal di Figma dan Photoshop untuk memastikan hasil tajam setiap kali.

Aturan Emas: Ekspor 2x, Tampilkan 1x

Kunci untuk gambar tajam di layar resolusi tinggi modern (seperti layar Retina Apple) adalah mengekspor gambar pada dua kali ukuran dimensi tampilan yang sebenarnya.

Contoh: Jika banner hero di situs web Anda akan ditampilkan dengan lebar 1200px, ekspor dari alat desain dengan lebar 2400px. Lalu, di HTML atau CSS Anda, batasi lebarnya menjadi 1200px.

<!-- File gambar lebarnya 2400px, tapi kita perintahkan browser menampilkannya dengan lebar 1200px -->  
<img src="my-banner-2400px.jpg" alt="Teks alternatif deskriptif" width="1200">  

Teknik ini memberikan browser kepadatan piksel dua kali lipat, menghasilkan gambar lebih tajam di layar beresolusi tinggi.

Mengekspor dari Figma

Figma adalah alat berbasis vektor, sehingga mudah mengekspor sumber daya yang tajam.

Panduan langkah demi langkah:

1. Pilih frame atau aset: Klik item yang ingin diekspor. Bisa berupa ikon, komponen, atau seluruh frame.
2. Buka panel Ekspor: Di bilah sisi kanan, temukan bagian “Export” dan klik ikon +.
3. Pilih ukuran ekspor: Ini langkah terpenting. Di pengaturan “Export”, ubah 1x menjadi 2x. Ini memberi tahu Figma untuk me-render aset dengan dua kali ukuran kanvasnya. Untuk grafis kritis seperti logo, Anda bahkan bisa memilih 3x.
4. Pilih format:
   • JPG: Terbaik untuk foto dan gambar kompleks. Atur kualitas sekitar 80-90%.
   • PNG: Terbaik untuk grafis dengan garis tajam, teks, atau transparansi (logo dan ikon).
   • SVG: Pilihan terbaik untuk logo dan ikon sederhana. Karena berformat vektor, tetap sempurna tajam di ukuran apa pun.
5. Klik “Export”: Simpan file. Ingat, sebelum mengunggah ke situs web, kompres file dengan alat seperti kompresor gambar kami.

Mengekspor dari Photoshop

Photoshop berbasis raster, jadi bekerja di dokumen beresolusi tinggi sejak awal sangat penting.

Metode Modern: “Export As”

Direkomendasikan untuk alur kerja grafis web. Buka File > Export > Export As....

1. Atur ukuran: Di bagian “Image Size” sebelah kanan, pastikan lebar dan tinggi benar. Jika mengikuti aturan 2x, dokumen Anda seharusnya sudah dua kali ukuran tampilan yang direncanakan.
2. Pilih format:
   • JPG: Gunakan penggeser “Quality”. Nilai antara 70-85 adalah titik awal yang baik untuk keseimbangan kualitas dan ukuran file.
   • PNG: Untuk gambar yang membutuhkan transparansi. Jika palet warna terbatas (seperti logo sederhana), biasanya Anda bisa mencentang “Smaller File (8-bit)” untuk menghemat ukuran file secara signifikan.
3. Pastikan ruang warna sRGB: Di bagian bawah dialog, di bawah “Color Space”, pastikan “Convert to sRGB” dicentang. Ini adalah profil warna standar web, mencegah warna Anda terlihat kusam di browser.
4. Klik “Export All”: Simpan gambar Anda.

Metode Tradisional: “Save for Web”

Untuk versi Photoshop lama: File > Export > Save for Web (Legacy).

1. Pilih preset: Di pojok kanan atas, pilih preset seperti “JPEG High” atau “PNG-24”.
2. Sesuaikan kualitas: Untuk JPEG, gunakan penggeser “Quality”. Nilai sekitar 70-80 biasanya sempurna. Untuk PNG, pilih antara PNG-8 (file lebih kecil, warna terbatas) dan PNG-24 (kualitas tinggi, warna penuh).
3. Periksa ukuran gambar: Di pojok kanan bawah, verifikasi ukuran akhir.
4. Konfirmasi sRGB: Pastikan opsi “Convert to sRGB” dicentang.
5. Klik “Save”.

Dengan selalu mengekspor dalam ukuran 2x dan memastikan aset Anda dikompresi dengan benar dalam ruang warna sRGB, Anda akhirnya bisa mengucapkan selamat tinggal pada gambar buram dan memastikan desain Anda terlihat setajam di web seperti di kanvas Anda.