Jika ada satu aspek bekerja dengan Illustrator yang saya benar-benar tidak menikmatinya adalah mengubah garis seni ke svg gambar untuk seluler atau web. Menggunakan menu Export> Export As dan, untuk jujur, fitur Save For Web - Export> Save For Web - tidak mudah digunakan.
Mengonversi gambar ke format .svg membuka kotak dialog yang agak mengintimidasi, bagi orang-orang yang baru menggunakan alur kerja ini, menawarkan berbagai opsi yang membingungkan untuk tidak menyebutkan fakta ada sejumlah format .svg dan hanya salah satunya yang tepat format. Setelah Anda terbiasa dengan alur kerja ini, itu bukan masalah besar, tetapi kurva pembelajarannya sangat curam.
Itu semua telah berubah dengan fitur Ekspor Untuk Layar yang baru - Ekspor> Ekspor untuk Layar - dan panel Ekspor Aset yang diperkenalkan ke Illustrator CC 2015 pada bulan Juni 2016. Dalam "Bagaimana" ini saya akan menunjukkan kepada Anda bagaimana menggunakan keduanya fitur. Mari kita mulai.
01 04
Cara Mengakses Ekspor Untuk Layar Di Adobe Illustrator CC 2015
Telah menjadi pengguna Illustrator sejak Illustrator 88 Saya pikir Anda dapat memahami keengganan saya untuk mempertimbangkan Illustrator sebagai alat desain yang serius untuk antarmuka web dan mobile dan proyek.
Ketika artboards diperkenalkan di versi CS4 2008, saya pikir itu adalah tambahan yang menarik untuk aplikasi. Ketika saya pertama kali melihat fitur Save For Web yang sekarang ditinggalkan di Illustrator, sekali lagi, saya menemukannya menarik tetapi saya menemukan fitur yang sama dalam Adobe Fireworks lebih sejajar dengan grafik web daripada Illustrator.
Dengan munculnya pendekatan mobile-first untuk desain dan meningkatnya ketergantungan pada gambar SVG untuk proyek mobile, Illustrator adalah alat "go to" saya untuk SVG dan menjadi penghentian penting dalam alur kerja UI Design.
Namun, jika saya perlu mengekspor aset untuk seluler, Sketch 3 dan Photoshop CC 2015 adalah alat pilihan saya. Illustrator masuk daftar pada bulan Juni 2016 dengan menu Ekspor untuk Layar yang sangat bagus.
Dalam contoh di atas, saya memiliki dua layar yang ditujukan untuk iPhone dan mereka berada di Artboards terpisah bernama "Rumah" dan "Tempat". Untuk menampilkannya, saya memilih File> Ekspor> Ekspor untuk Layar. Kotak dialog Ekspor untuk Layar terbuka.
02 04
Bagaimana Menggunakan Ekspor untuk Kotak Dialog Layar
Ketika kotak dialog muncul, klik pada setiap artboard untuk dipilih. Kemudian akan memberi tanda centang. Anda juga dapat mengklik dua kali nama artboard untuk memilihnya dan mengubahnya. Ini adalah hal yang baik untuk mengetahui apakah papan nama Anda diberi nama "Artboard 1" dan "Artboard 2" yang, sejujurnya, tidak memberi tahu Anda apa pun.
Anda memiliki tiga pilihan di area Pilih:
- Semua: Pilihan ini mengekspor setiap artboard dalam dokumen sebagai file terpisah.
- Range: Masukkan berbagai artboards yang akan diekspor. Ini sangat berguna untuk proyek dengan beberapa lusin papan luncur.
- Dokumen Lengkap: Pilih ini dan semua artboards akan diratakan menjadi satu dokumen.
Area Export To memungkinkan Anda memilih folder tujuan untuk output. Folder default akan menjadi lokasi dokumen Illustrator saat ini.
Format adalah tempat “keajaiban terjadi. Anda akan melihat ada tiga ikon - iOS. Android dan Gear. Dua yang pertama sudah cukup jelas. Ikon Gear membuka Pengaturan Format yang memungkinkan Anda untuk mengontrol bagaimana masing-masing format file dalam daftar akan dioptimalkan. Pengaturan ini "format khusus" dan setelah Anda membuat perubahan, klik tombol Simpan Pengaturan dan perubahan tersebut akan diterapkan pada format yang akan dihasilkan.
Setelah Anda memilih iOS atau Android, daftar akan berubah untuk menyertakan semua resolusi yang tersedia di platform itu. Daftar iOS akan menunjukkan faktor penskalaan untuk tampilan Retina dan pemilihan Android akan memiliki skala mulai dari .75x hingga 4x yang mengakomodasi hampir semua perangkat Android di luar sana.
Jika ada format yang menunjukkan bahwa Anda ingin menghapus, klik "x". Jika ada yang ingin Anda tambahkan, klik tombol + Tambah Skala.
Setelah selesai, klik tombol Artboard Ekspor dan bilah progres akan menunjukkan Anda saat proses selesai.
03 04
Menggunakan The Export Untuk File Layar dari Adobe Illustrator CC 2015.
Ketika Anda memeriksa hasil Ekspor untuk Layar, Anda akan menemukan bahwa Illustrator telah menghasilkan versi rata-rata dari setiap layar. Di permukaan, ini mungkin tampak agak lemah terutama jika Anda mengharapkan Illustrator untuk mengekspor semua bit dan potongan sebagai gambar.
Jika Anda melangkah mundur dan memikirkannya sejenak, ini sebenarnya adalah apa yang Anda butuhkan karena Anda dapat menggunakan output ini dalam aplikasi prototipe seperti Adobe Experience Design , Principleformac, Atomic.io , UXPin atau aplikasi prototyping lainnya.
Dalam contoh ini, saya menggunakan Adobe Experience Design (XD) untuk membuat klik-tayang sederhana. Langkah pertama dalam proses adalah memilih ukuran iPhone 6 yang cocok dengan dimensi Antarmuka Illustrator
Ketika antarmuka terbuka, saya memilih alat Artboard dan mengklik sekali di papan tulis untuk menambahkan artboard lainnya. Saya kemudian menamai mereka "Rumah" dan "Tempat", memilih setiap artboard dan mengimpor gambar png dari Illustrator ke dalam artboard.
Untuk membuat "hotspot" untuk klik-thru, saya menggambar persegi panjang di atas tombol Explore di layar awal dan mengatur nilai fill dan border-nya ke none dengan tidak memilih properti tersebut di panel Properties. Saya melakukan hal yang sama dengan tombol Kembali di halaman Tempat.
Untuk menambahkan Interaktivitas, saya memilih mode Prototype dan kemudian mengklik "hotspot". Saya kemudian menyeret anak panah - yang disebut kawat - ke halaman Tempat dan mengatur target Transisi di Tempat, gerakan ke Tekan Kiri, pelonggaran untuk mengurangi keluar dan durasi transisi ke 0,6 detik.
Saya mengulangi langkah ini dengan hotspot di halaman Tempat. Satu-satunya perbedaan adalah Transisi diatur ke Dorong Kanan. Ketika saya mengklik tombol Play saya menguji prototipe saya.
04 04
Cara Menggunakan Panel Aset Ekspor Di Adobe Illustrator CC 2015
Bersamaan dengan menu Save for Screens, Adobe juga menambahkan panel baru - Asset Export - yang menghilangkan titik kesakitan besar dalam alur kerja UI Design.
Titik nyeri adalah ikon. Illustrator adalah aplikasi menggambar vektor besar tetapi untuk output, katakanlah 10 ikon, pada halaman dengan 40 atau 50 dari mereka yang diperlukan masing-masing disimpan sebagai gambar SVG. Ini pasti membutuhkan lebih banyak waktu daripada biasanya berkat perjalanan berturut-turut ke panel SVG. Titik rasa sakit ini sekarang adalah sesuatu dari masa lalu.
Panel baru ini dapat ditemukan di Window> Asset Export. Ketika panel terbuka, pilih aset yang ingin Anda konversi ke SVG atau format lain dan seret ke panel. Saat Anda melepaskan tetikus, gambar mini aset ditambahkan ke panel. Beri nama aset. Terus tarik objek ke dalam panel sampai Anda selesai.
Pilih setiap item Di area pengaturan Ekspor, atau pilih semuanya dengan menahan tombol Shift dan mengklik masing-masing. Pilih format Anda - dalam contoh ini, saya memilih SVG- dan klik tombol Ekspor. Item yang dipilih akan ditampilkan sebagai file SVG ke lokasi yang sama dengan file Illustrator.
Di mana seluruh proses ini menjadi lebih rapi adalah Anda tidak harus menggunakan panel Ekspor Aset. Jika Anda mengklik tombol Simpan untuk Layar di bagian bawah panel, kotak dialog akan terbuka.
Sebaliknya, Anda dapat mengklik tab Aset di panel Simpan untuk Layar untuk mengakses panel Ekspor Aset. Misalnya, jika Anda memiliki ikon khusus pada artboard, Anda dapat membuka panel Ekspor Aset di kotak dialog Simpan untuk Layar dan menyeret item tersebut ke panel Ekspor Aset.