Sekiranya terdapat satu aspek bekerja dengan Illustrator yang saya tidak benar-benar menikmatinya adalah menukar seni baris kepada imej SVG untuk mudah alih atau web. Menggunakan menu Export> Export As dan, dengan jujur kejam, ciri Simpan Untuk Web - Eksport> Simpan Untuk Web - tidak begitu mudah digunakan.
Menukar lukisan ke format .svg membuka kotak dialog yang agak menakutkan yang, bagi orang yang baru untuk aliran kerja ini, menawarkan pelbagai pilihan yang membingungkan apatah lagi terdapat beberapa format .svg dan hanya satu daripada mereka yang sesuai format. Sebaik sahaja anda terbiasa dengan aliran kerja ini, ia bukan masalah besar, tetapi keluk pembelajaran itu curam.
Ini semua telah berubah dengan ciri Eksport Untuk Skrin baru - Export> Export for Screens - dan Panel Eksport Aset yang diperkenalkan kepada Illustrator CC 2015 pada bulan Jun 2016. Dalam "Bagaimana Untuk" ini saya akan menunjukkan kepada anda cara menggunakan kedua-dua ciri-ciri. Mari kita mulakan.
01 04
Bagaimana Untuk Mengakses Eksport Untuk Skrin Dalam Adobe Illustrator CC 2015
Setelah menjadi pengguna Illustrator sejak Illustrator 88, saya fikir anda dapat memahami keengganan saya untuk mempertimbangkan Illustrator sebagai alat reka bentuk yang serius untuk antara muka dan projek web dan mudah alih.
Apabila papan iklan diperkenalkan dalam versi CS4 2008, saya fikir ia adalah tambahan yang menarik untuk aplikasi itu. Apabila saya mula-mula melihat ciri Jimat Untuk Web di dalam Illustrator, sekali lagi, saya dapati ia menarik tetapi saya mendapati ciri yang sama dalam Adobe Fireworks lebih sejajar dengan grafik web daripada Illustrator.
Dengan kemunculan pendekatan mudah alih pertama untuk reka bentuk dan kebergantungan yang semakin meningkat pada imej SVG untuk projek mudah alih, Illustrator adalah alat "pergi ke" saya untuk SVG dan menjadi perhentian penting dalam aliran kerja Design UI.
Namun, jika saya perlu mengeksport aset untuk mudah alih, Sketch 3 dan Photoshop CC 2015 adalah alat pilihan saya. Illustrator memasuki senarai pada bulan Jun 2016 dengan menu Export for Screens yang sangat bagus.
Dalam contoh di atas, saya mempunyai dua skrin yang ditakdirkan untuk iPhone dan mereka berada di Artboards berasingan bernama "Laman Utama" dan "Tempat". Untuk mengeluarkannya, saya memilih Fail> Eksport> Eksport untuk Skrin. Kotak dialog Eksport untuk Skrin dibuka.
02 04
Cara Penggunaan Eksport untuk Skrin Dialog Skrin
Apabila kotak dialog muncul, klik pada setiap papan iklan yang akan dipilih. Ia kemudian akan memaparkan tanda semak. Anda juga boleh klik dua kali nama artboard untuk memilihnya dan mengubahnya. Ini adalah perkara yang baik untuk mengetahui sama ada papan nama anda bernama "Artboard 1" dan "Artboard 2" yang, tidak langsung, memberitahu anda apa-apa.
Anda mempunyai tiga pilihan dalam kawasan Pilih:
- Semua: Pilihan ini mengeksport setiap artboard dalam dokumen sebagai fail berasingan.
- Julat: Masukkan pelbagai papan iklan yang akan dieksport. Ini amat berguna untuk projek-projek dengan beberapa seni sedozen.
- Dokumen Penuh: Pilih ini dan semua papan iklan akan diratakan menjadi satu dokumen.
Eksport ke kawasan membolehkan anda memilih folder tujuan untuk output. Folder lalai akan menjadi lokasi semasa dokumen Illustrator.
Format adalah di mana "keajaiban berlaku. Anda akan melihat terdapat tiga ikon iaitu iOS. Android dan Gear. Dua yang pertama adalah jelas. Ikon Gear membuka Tetapan Format yang membolehkan anda mengendalikan bagaimana setiap format fail dalam senarai akan dioptimumkan. Tetapan ini adalah "format khusus" dan sekali anda telah membuat perubahan anda, klik butang Simpan Tetapan dan perubahan tersebut akan digunakan pada format yang akan dikeluarkan.
Sebaik sahaja anda memilih iOS atau Android senarai itu akan berubah untuk menyertakan semua resolusi yang terdapat pada platform itu. Penyenaraian iOS akan menunjukkan faktor skala untuk paparan Retina dan pemilihan Android akan mempunyai skala antara .75x hingga 4x yang dapat menampung hampir setiap peranti Android di luar sana.
Sekiranya terdapat format yang menunjukkan bahawa anda ingin mengalih keluar, klik "x". Jika ada satu yang anda mahu tambah klik butang + Skala Tambah.
Apabila selesai, klik butang Eksport Artboard dan bar kemajuan akan menunjukkan kepada anda apabila proses selesai.
03 dari 04
Menggunakan Eksport Untuk Skrin Fail dari Adobe Illustrator CC 2015.
Apabila anda menyemak hasil Eksport untuk Skrin, anda akan mendapati bahawa Illustrator telah mengeluarkan versi rata pada setiap skrin. Di permukaan, ini mungkin agak lemah terutama jika anda mengharapkan Illustrator telah mengeksport semua bit dan potongan sebagai gambar.
Sekiranya anda melangkah mundur dan memikirkannya seketika, inilah sebenarnya yang anda perlukan kerana anda boleh menggunakan output ini dalam aplikasi prototaip seperti Adobe Experience Design , Principleformac, Atomic.io , UXPin atau aplikasi prototyping lain
Dalam contoh ini, saya menggunakan Adobe Experience Design (XD) untuk membuat klik-thru yang mudah. Langkah pertama dalam proses itu ialah untuk memilih saiz iPhone 6 yang sepadan dengan dimensi Antara Muka Illustrator
Apabila antara muka dibuka, saya memilih alat Artboard dan diklik sekali sekali pada papan pendisipel untuk menambah artboard lain. Saya kemudian menamakan mereka "Rumah" dan "Tempat", memilih setiap artboard dan mengimport imej png dari Illustrator ke artboard.
Untuk membuat "hotspot" untuk klik-thru, saya menarik segi empat tepat ke atas butang Explore di skrin utama dan tetapkan nilai isian dan sempadan kepada tiada dengan menyahpilih sifat-sifat tersebut dalam panel Properties. Saya melakukan perkara yang sama dengan butang Kembali pada halaman Tempat.
Untuk menambah Interaktiviti, saya memilih mod Prototaip dan kemudian klik pada "hotspot". Saya kemudian menyeret anak panah - dipanggil wayar - ke halaman Tempat dan menetapkan sasaran Peralihan di Tempat, usul untuk Push Kiri, pelonggaran untuk memudahkan dan tempoh peralihan kepada .6 saat.
Saya mengulangi langkah ini dengan hotspot pada halaman Tempat. Satu-satunya perbezaan ialah Peralihan telah ditetapkan untuk Tolak Hak. Apabila saya mengklik butang Main saya menguji prototaip saya.
04 04
Bagaimana Menggunakan Panel Aset Eksport Dalam Adobe Illustrator CC 2015
Bersama dengan menu Simpan untuk Skrin Adobe juga menambah panel baru - Eksport Aset - yang mengeluarkan titik sakit besar dalam alur kerja Design UI.
Titik rasa sakit adalah ikon. Illustrator adalah aplikasi lukisan vektor yang bagus tetapi untuk output, katakanlah 10 ikon, pada halaman dengan 40 atau 50 daripadanya diperlukan setiap orang disimpan sebagai imej SVG. Ini tidak dapat dielakkan memerlukan lebih banyak masa daripada biasa terima kasih kepada perjalanan berturut-turut ke panel SVG. Titik rasa sakit ini kini menjadi perkara masa lalu.
Panel baru ini boleh didapati di Window> Asset Export. Apabila panel terbuka, pilih aset yang anda ingin tukar ke SVG atau format lain dan seret ke panel. Apabila anda melepaskan tetikus, imej kecil aset ditambahkan ke panel. Namakan aset tersebut. Terus menyeret objek ke dalam panel sehingga anda selesai.
Pilih setiap item Dalam kawasan tetapan Eksport, atau pilih semuanya dengan menahan kekunci Shift dan mengklik setiap satu. Pilih format anda - dalam contoh ini, saya memilih SVG- dan klik butang Eksport. Item yang dipilih akan dikeluarkan sebagai fail SVG ke lokasi yang sama dengan fail Illustrator.
Di mana proses keseluruhan ini mendapat lebih kemas, anda tidak perlu menggunakan panel Eksport Aset. Jika anda mengklik butang Simpan untuk Skrin di bahagian bawah panel, kotak dialog terbuka.
Sebaliknya, anda boleh mengklik tab Aset di panel Simpan untuk Skrin untuk mengakses panel Eksport Aset. Sebagai contoh, jika anda mempunyai ikon tersuai pada artboard, anda boleh membuka panel Eksport Aset dalam kotak dialog Simpan untuk Skrin dan seret item itu ke dalam panel Eksport Aset.