Halo, gaes! Kalian para desainer UI/Web pasti sering menghadapi situasi ini: setelah membuat file master .CDR yang lengkap berisi semua komponen website (icon, button, ilustrasi, dll), tim pengembang meminta kalian mengekspor setiap aset secara terpisah. "Tolong export icon home, search, dan user dalam format PNG ukuran 32x32 dan 64x64 ya!"
Daripada membuka dan mengekspor satu per satu secara manual—yang memakan waktu dan berisiko human error—mari kita terapkan strategi ekspor yang efisien dan profesional! Di artikel ini, kita akan bahas workflow terbaik untuk mengekspor puluhan bahkan ratusan aset individu dari satu file master .CDR.
Baca: [Membuat Papan Lingkungan (Signage) dan Wayfinding yang Efektif dengan Prinsip Desain Universal]
.jpg)
Bagian 1: Persiapan File Master: Struktur yang Rapi adalah Kunci Kesuksesan
Sebelum mengekspor apa pun, pastikan file master kalian sudah diatur seperti perpustakaan yang tertata rapi. Ini akan mempermudah hidup kalian dan tim pengembang.
a. Organisasi Layer dengan Docker Object Manager
Fungsi utama Docker Object Manager di sini adalah sebagai "peta" untuk semua aset. Dengan struktur layer yang jelas, kalian bisa dengan mudah mengontrol visibilitas dan memilih aset untuk diekspor.
Langkah-langkah Mengorganisir Layer:
1. Buka Docker Object Manager: Window > Dockers > Object Manager.
2. Buat Layer Berdasarkan Kategori: Jangan menumpuk semua objek di satu layer. Buat layer terpisah untuk setiap kelompok aset. Contoh struktur:
· ICONS_Header
· ICONS_Footer
· BUTTONS_Primary
· BUTTONS_Secondary
· ILLUSTRATIONS_Hero
· LOGOS
3. Gunakan Naming Convention yang Jelas: Beri nama setiap objek atau grup di dalam layer. Klik dua kali pada nama objek di docker untuk menggantinya. Contoh: icon_home, btn_submit, illus_rocket.
4. Non-Aktifkan Cetak dan Ekspor untuk Layer Panduan: Untuk layer yang berisi grid, guideline, atau catatan, klik ikon printer dan ekspor di sebelah nama layer untuk menonaktifkannya. Ini mencegahnya ikut tercetak atau terekpor.
Tips Ringan: Gunakan warna layer yang berbeda untuk membedakan kategori dengan cepat. Klik kanan nama layer > Properties > Color.
b. Persiapan Aset Individu: Pastikan Konsisten dan Siap Ekspor
Sebelum diekspor, setiap aset perlu dipastikan sudah "bersih".
1. Convert Semua Teks menjadi Kurva: Pilih objek teks, lalu tekan Ctrl+Q atau Arrange > Convert to Curves. Ini mencegah font berubah atau hilang saat file dibuka di komputer lain.
2. Expand Semua Outline: Jika ada objek yang menggunakan outline/stroke, konversi outline tersebut menjadi shape independen dengan Arrange > Convert Outline to Object. Ini memastikan ketebalan outline konsisten di semua ukuran.
3. Group yang Berkaitan: Untuk aset yang terdiri dari beberapa objek (seperti icon dengan latar belakang), seleksi semua dan group dengan Ctrl+G.
4. Ratakan Posisi di Artboard: Pastikan setiap aset yang akan diekspor individually sudah berada pada posisi yang tepat dan konsisten di dalam halaman, atau...
Bagian 2: Teknik Ekspor Massal yang Efisien dengan Power-Packed Features
CorelDRAW memiliki beberapa cara untuk mengekspor banyak aset sekaligus. Pilih yang paling sesuai dengan kebutuhan.
a. Teknik Export by Selection (Paling Sering Digunakan)
Ini adalah teknik andalan untuk mengekspor aset yang sudah dipersiapkan dengan baik.
Langkah-langkah Mengekspor Banyak Aset Terpilih:
1. Pilih Aset yang Akan Diekspor: Di halaman master, seleksi semua aset yang ingin diekspor. Kalian bisa menyeleksi silang dari Object Manager sambil menekan Ctrl untuk memilih beberapa objek sekaligus.
2. Buka Jendela Export: Klik File > Export atau tekan Ctrl+E.
3. Pilih Format dan Lokasi: Pilih format (misal, PNG), beri nama file, dan tentukan folder tujuan.
4. Kunci Langkah: Centang 'Just Export Selected': Ini adalah opsi TERPENTING. Pastikan centang pada Just Export Selected aktif.
5. Konfigurasi Setting Export:
· Di jendela berikutnya, atur Color mode: RGB, Resolution: 72 atau 96 DPI untuk web.
· Jika kalian ingin semua aset diekspor dalam ukuran yang sama (misal, 64x64 px), centang Specify size dan isi ukurannya. CorelDRAW akan secara otomatis menskalakan setiap aset untuk memenuhi ukuran tersebut.
6. Ekspor: Klik OK. CorelDRAW akan secara otomatis dan berurutan mengekspor setiap aset yang terseleksi ke dalam file terpisah, menggunakan nama objek yang ada di Object Manager sebagai nama file!
Manfaat: Cepat, akurat, dan memanfaatkan naming yang sudah kalian buat.
b. Teknik Advanced: Menggunakan Docker 'Export' (CorelDRAW 2020+)
Untuk yang menggunakan versi terbaru, Docker Export adalah solusi yang lebih powerful dan visual.
Langkah-langkah Menggunakan Docker Export:
1. Buka Docker Export: Window > Dockers > Export.
2. Tambahkan Aset ke Docker: Drag and drop objek atau grup dari halaman ke dalam docker Export. Atau, seleksi objek lalu klik ikon + di docker.
3. Atur Setting untuk Setiap Aset: Di dalam docker, kalian bisa:
· Mengganti nama file untuk ekspor.
· Memilih format file (PNG, JPG, SVG, dll) untuk setiap aset.
· Mengatur ukuran (dalam piksel) untuk setiap aset. Bahkan bisa menambahkan beberapa ukuran untuk satu aset (misal, icon_home@1x, icon_home@2x).
4. Ekspor Sekaligus: Setelah semua aset dan setting-nya ditambahkan, klik Export All. Semua file akan diekspor sesuai konfigurasi dengan sekali klik.
Kelebihan: Kalian bisa membuat preset untuk berbagai format dan ukuran, sangat cocok untuk workflow export yang berulang.
c. Teknik Batch dengan Macro (Untuk yang Sangat Advance)
Jika kalian harus melakukan tugas ekspor yang sama berulang kali untuk berbagai project, pertimbangkan untuk merekam Macro.
1. Buka Docker Macro: Window > Dockers > Macro.
2. Rekam Tindakan: Klik Record, lakukan proses ekspor untuk satu aset (dengan semua setting yang diinginkan), lalu stop recording.
3. Edit dan Jalankan: Edit macro jika perlu, lalu jalankan untuk aset lainnya. Ini membutuhkan pemahaman teknis yang lebih dalam.
Bagian 3: Strategi Penamaan File dan Manajemen Folder untuk Tim
Nama file yang terorganisir adalah hadiah terindah untuk tim pengembang.
a. Konvensi Penamaan File yang Efektif
Hindari nama seperti final_revised_v2_icon1.png. Gunakan sistem yang konsisten.
Format yang Direkomendasikan:
[jenis]_[nama]_[status]_[ukuran]. [format]
Contoh:
· icon_search_default_32px.png
· btn_cta_hover_64px.png
· logo_main_white.svg
Aturan Dasar:
· Gunakan huruf kecil dan underscore (_), bukan spasi.
· Sertakan status (default, hover, active) untuk elemen interaktif.
· Sertakan ukuran dalam nama file, terutama jika mengekspor dalam multiple size.
b. Struktur Folder yang Logis
Jangan taruh semua file dalam satu folder. Buat struktur seperti ini:
```
Assets_Web_ProjectX/
├── 01_Icons/
│ ├── 16px/
│ ├── 24px/
│ └── 32px/
├── 02_Buttons/
│ ├── Primary/
│ └── Secondary/
├── 03_Illustrations/
└── 04_Logos/
├── SVG/
└── PNG/
```
Bagian 4: Tips Kolaborasi dan Komunikasi dengan Tim Pengembang
a. Dokumentasi Sederhana
Buat file README.txt yang berisi:
· Daftar aset yang sudah diekspor.
· Penjelasan konvensi penamaan.
· Link ke file master .CDR (jika disimpan di cloud).
b. Pilihan Format File
· PNG: Untuk icon dan ilustrasi yang membutuhkan transparansi.
· JPG: Untuk foto atau gambar dengan gradien warna kompleks.
· SVG: Untuk logo dan icon sederhana yang perlu skalabel dan dapat di-edit oleh developer (pastikan sudah di-expand dan convert to curve!).
c. Komunikasi!
Tanyakan pada tim pengembang:
· Format file apa yang mereka prefer?
· Apakah mereka perlu multiple sizes (1x, 2x, 3x)?
· Apakah ada naming convention khusus yang harus diikuti?
Oke, gaes! Dengan menerapkan strategi ini, proses ekspor aset untuk tim pengembang yang semula memakan waktu berjam-jam bisa diselesaikan dalam hitungan menit. Workflow yang terstruktur tidak hanya menghemat waktu kalian sebagai desainer, tetapi juga membuat tim pengembang lebih menghargai kerja keras kalian karena semuanya tersedia dengan rapi dan mudah dicari.
Sekarang, bukalah file master .CDR kalian, luangkan waktu 30 menit untuk mengorganisir layer dan objeknya, lalu coba teknik ekspor massal yang kita bahas. Rasakan sendiri perbedaannya!
Terima kasih sudah membaca, dan selamat berkolaborasi dengan lebih efisien! 🚀
Sekian cara dan tutorial belajar CorelDRAW kali ini. Semoga semua konten yang ada di blog ecorel ini dapat bermanfaat bagi kalian semua... Terimakasih... See yoouuu!!! :D
ConversionConversion EmoticonEmoticon