Create Slice of Uploaded Artboard for Export in Sketch 3
Indonesian (Bahasa Indonesia) translation past ⚡ Rova Rindrata (you can besides view the original English article)
Mengekspor aset dari desain Anda adalah tugas yang umum dilakukan. Anda memulai dengan membuat dan menyiapkan grafis Anda, lalu Anda memilih format ekspor, mengatur propertinya dan selesai. Alat ekspor di Sketch 3 termasuk di antara fitur terbaiknya. Sebenarnya, Sketch three membantu kami mengekspor konten dengan berbagai cara sehingga saya yakin Anda akan memperbaiki alur kerja Anda dengan membaca artikel ini.
Kami akan menggunakan beberapa contoh dasar untuk memahami pilihan ekspor yang tersedia di Sketch 3 dan saya akan membantu Anda menentukan metode mana yang terbaik untuk Anda, tergantung pada apa yang sedang Anda kerjakan.
Omong-omong, jika Anda menggunakan Sketch untuk banyak karya desain Anda, Anda dapat menghemat banyak waktu dengan menggunakan beberapa template Sketch di Envato Market. Anda dapat mengunduh file Sketch dengan elemen UI yang paling sering digunakan yang sudah dibuat sebelumnya dan dapat disesuaikan, sehingga Anda dapat menyesuaikannya dengan kebutuhan Anda dengan cepat, daripada mulai dari nol setiap saat.
one. Dasar-dasar Ekspor
Langkah 1
Buka Sketch. Kita membutuhkan satu objek di kanvas kita jadi mari kita buat bentuk vektor. Pergi ke Insert > Shape dan pilih salah satu alat yang tersedia. Untuk contoh ini saya akan membuat kotak 300x300px menggunakan Insert > Shape > Rectangle (R).
Ingat Anda bisa menggambar persegi panjang acak dan menyesuaikan propertinya melalui panel Inspector.
Langkah 2
Sekarang masuk ke menu File. Anda akan melihat bahwa opsi Export telah menjadi aktif. Di toolbar Anda bisa mengklik ikon Export juga, jadi silakan klik. Anda akan melihat beberapa perubahan pada kanvas, pada daftar layer dan panel inspector. Apa yang telah terjadi?
Pada panel layer, Sketch telah secara otomatis membuat piece baru dengan dimensi dan posisi yang sama dengan objek yang kita miliki di atas kanvas. Slices adalah layer khusus yang memungkinkan kita mengekspor daerah di kanvas ke file-file. Semua konten dalam area yang ditentukan oleh sebuah irisan, akan disertakan dalam file tersebut. Anda dapat memiliki irisan sebanyak yang Anda inginkan dengan menggunakan opsi Insert > Slice (S). Setiap irisan akan diekspor ke file yang berbeda.
Ketika hadir, ikon pisau dan garis putus-putus menunjukkan bahwa layer yang dimaksud adalah sebuah irisan. Anda bisa mengubah posisinya, lebar dan tinggi seperti objek lainnya dalam Sketch. Anda dapat memindahkan atau mengukurnya secara langsung di kanvas, atau dengan menggunakan inspector untuk mengubah propertinya.
Panel Inspector
Berbicara tentang inspector, lihatlah sambil menyimpan potongan yang dipilih. Seperti yang sudah saya katakan kita bisa mengubah posisi irisan, lebar dan tinggi. Tapi kita juga bisa melihat beberapa pilihan baru:
- Trim Transparent Pixels. Nyalakan opsi ini jika Anda memerlukan file yang diekspor agar piksel transparan terpangkas dari tepi-tepinya. Misalnya, katakanlah Anda memiliki ikon 32x32px di dalam potongan 80x80px. Mencentang opsi ini secara otomatis akan mengekspor file 32x32px tanpa mengubah ukuran irisan Anda. Sketch akan memangkas piksel transparan.
- Export Group Contents Only. Ini sangat berguna saat membuat desain yang rumit dengan konten yang tumpang tindih. Kita tidak bisa menyalakannya sekarang, jadi kita akan meninggalkannya untuk contoh berikutnya.
- Pilihan Groundwork Color memungkinkan kita memilih warna latar belakang untuk potongan yang dipilih, mengisi piksel transparan di dalam area yang diekspor.
Di samping label Export, kita menemukan kolom dropdown dan masukan yang berbeda:
- Size memungkinkan kita menambahkan faktor pengali jika kita perlu mengubah ukuran konten yang akan diekspor untuk potongan ini. Sketch 3 dilengkapi dengan beberapa pilihan dan variabel yang telah ditentukan untuk ini.
- Masukkan sesuatu ke dalam input Suffix jika Anda ingin menambahkan sesuatu ke nama file agar bisa deskriptif. Misalnya Anda bisa menambahkan akhiran
@2xuntuk gambar berukuran ganda. - Pilih format file menggunakan dropdown Format. Format ekspor yang didukung Sketch adalah
.png, .jpg,.tiff,.pdf,.epsand.svg.
Secara default, opsi ekspor Sketch diatur ke Size=1x (ukuran asli 100%), tidak ada sufiks dan format .png. Biarkan pilihan ini dengan nilai default atau mainkan dengan mereka jika Anda mau.
Tip: Sketch mendukung ekspor ke ukuran yang sewenang-wenang, jadi jangan khawatir jika Anda memerlukan sesuatu seperti ekspor 100x atau ekspor one.75x. Anda juga bisa mengetikkan nilai piksel yang diikuti oleh w untuk lebar dan h untuk tinggi untuk mengekspor aset pada berbagai ukuran. Misalnya, ketik 60w pada alat ekspor dan Sketch akan mengekspor aset Anda pada lebar 60px dan memberi nilai ketinggian yang sesuai. Sama, jika Anda mengetik 60 diikuti dengan h Sketch akan mengekspor aset Anda dengan tinggi 60px dan nilai lebar secara proporsional.
Langkah 3
Sekarang, mengingat agar potongan Anda tetap dipilih, lihat bagian bawah panel inspector. Anda akan melihat tombol besar dan yang lebih kecil di sebelahnya. Yang pertama akan menunjukkan langkah ekspor terakhir. Yang lain memberi Anda beberapa opsi tambahan untuk langsung melampirkan file Anda ke berbagai aplikasi. Jangan ragu untuk mengklik tombol-tombolnya untuk melihat apa yang terjadi saat Anda menyelesaikan proses ekspor.
Tip: ganti nama layer slice untuk secara otomatis menetapkan nama file ke konten yang Anda ekspor. Salah satu trik bagusnya adalah memasukkan garis miring / dalam namanya, menginstruksikan Sketch untuk membuat subfolder untuk Anda. Gambar berikut menggambarkan hal ini dengan lebih jelas:
2. Menentukan Apa yang Ingin Anda Ekspor
Langkah 1
Buka file export_what_you_want yang telah saya berikan sebagai lampiran tutorial ini.
Catatan: Anda memerlukan Sketch three untuk membukanya, tapi jika Anda menggunakan versi lama jangan khawatir. Seharusnya tidak terlalu sulit untuk meniru konten Anda sendiri, tapi ingat beberapa opsi yang kami sampaikan mungkin tidak tersedia untuk Anda. Lihat gambar berikut untuk referensi:
Anda akan melihat beberapa objek dikelompokkan, artboard dan elemen lainnya ditempatkan langsung di kanvas, di luar artboard.
Langkah 2
Pergi ke File > Export. Atau Anda bisa mengklik ikon Export pada toolbar.
Saat Anda mengeklik Consign untuk pertama kalinya, Sketch akan menganggap Anda ingin mengekspor artboard Anda dan akan membuat mereka dapat diekspor secara otomatis, membuang semua benda di luar artboard. Anda juga akan melihat tidak ada layer irisan yang tersedia pada daftar layer.
Artboards dalam Sketch 3 dapat langsung diekspor tanpa perlu menambahkan irisan ekstra. Jika Anda menambahkan artboards baru ke dokumen Anda, tambahkan saja ukuran ekspor ke artboards ini dengan mengeklik ikon + di samping label export di panel inspector, sembari artboards tetap dipilih. Lain kali Anda mengklik ikon Export, Sketch akan menyertakan artboards tersebut juga.
Langkah 3
Mari kembali ke file kita. Sekarang kita akan mengekspor satu layer tunggal. Pilihlah kotak biru secara langsung, atau melalui daftar layer. Lihatlah bagian bawah panel inspector: Anda akan melihat opsi baru Make exportable. Klik itu.
Inspector akan memperbarui untuk menunjukkan bahwa Anda akan mengekspor satu gambar pada 1x (ukuran asli) tanpa akhiran dan, secara default, dalam format .png.
Lihatlah daftar layer dan perhatikan bahwa ikon dalam daftar untuk layer kotak biru telah diberi ikon pisau kecil. Ini untuk menunjukkan bahwa layer-nya bisa diekspor. Lain kali Anda pergi ke File > Consign atau klik Export dari toolbar, layer yang bisa diekspor baru ini akan muncul juga di sana, di antara layer irisan biasa Anda.
Langkah 4
Fokuskan perhatian Anda pada kotak ungu. Kita tidak akan menggunakan opsi Make exportable saat ini, kita akan membuat irisan secara otomatis.
Buka Insert > Slice. Perhatikan bagaimana kursor berubah saat Anda bergerak di atas objek di kanvas. Ingat ikon pisau itu? Klik kotak ungu. Irisan baru akan muncul dengan posisi, lebar dan tinggi yang sama!
Tip: mengikuti metode yang sama Anda dapat membuat irisan untuk seluruh grup juga. Dan untuk irisan individu di dalam sebuah grup, tekan tombol Command saat melayang di atas objek yang ingin Anda iris.
Langkah 5
Ok, kita telah menggunakan irisan dan pilihan Make exportable. Kita sudah melihat apa yang terjadi saat kita memiliki artboards... tapi kita belum melihat apa yang terjadi dengan opsi Export Group Contents Only!
Pergi ke Insert > Slice dan pindahkan kursor di atas kotak oranye dan hijau, yang sudah dikelompokkan. Klik mereka. Anda baru saja membuat irisan baru untuk grup.
Langkah vi
Pindahkan layer irisan ke dalam grup oranye + hijau.
Jika Anda melihat inspector saat irisan dipilih, Anda akan melihat opsi Export Group Contents Only dapat dipilih sekarang. Tapi jangan mencentangnya dulu!
Pada tahap ini, dalam prosesnya, cukup berguna untuk memeriksa pratinjau gambar untuk melihat konten mana yang akan disertakan dalam file kita.
Langkah 7
Mencentang pilihan Consign Group Contents Only.
Melihat perbedaannya? Elips merah telah dihapus dari pratinjau.
Saat Export Group Contents Only dicentang, irisan hanya akan mengekspor layer di dalam grupnya sendiri, membuang konten apa pun di luarnya. Layer-layer di belakang grup akan dibuang juga. Ini adalah pilihan yang sangat berguna pada desain besar dengan banyak objek yang tumpang tindih!
Tip: Jika Anda memiliki banyak irisan pada daftar layer dan tidak ingin terganggu olehnya, Anda dapat mematikannya sementara dengan menggunakan tombol pisau kecil di bagian bawah daftar layer.
Seperti yang telah kami tunjukkan, kita bisa mengekspor konten dengan berbagai cara. Mana yang harus Anda pilih? Nah, itu tergantung pada apa yang Anda butuhkan. Misalnya opsi Make exportable sangat berguna untuk mengekspor ikon atau layer tunggal. Saya akan merekomendasikan Anda membuat irisan atau artboards saat mengekspor seluruh dokumen Anda (tapi itu hanya saran).
iii. Beberapa Ekspor Sekaligus
Salah satu fitur hebat yang perlu dipertimbangkan saat menggunakan Sketch 3 adalah Anda dapat mengekspor beberapa gambar sekaligus. Saya tidak bermaksud bisa mengekspor gambar yang berbeda dari irisan atau artboards yang berbeda (meski mungkin saja). Yang saya maksud adalah bahwa Anda dapat mengekspor berbagai versi secara bersamaan dari satu layer atau irisan.
Langkah 1
Tambahkan irisan dari kotak pirus persegi, atau buatlah dapat ekspor melalui console inspector. Apa pun yang Anda lakukan, itu harus berakhir dengan pengaturan ekspor baru dengan nilai default di panel inspector.
Langkah 2
Klik ikon + tepat di atas dropdown format. Anda telah secara efektif memberi tahu Sketch bahwa Anda menginginkan dua file ekspor yang berbeda, dari satu layer tunggal! Klik ikon sebanyak yang Anda inginkan untuk mendapatkan setiap ukuran atau format yang Anda butuhkan.
Sekarang, Anda mungkin berpikir bahwa kita telah membahas semua yang perlu diketahui tentang opsi ekspor Sketch, tapi masih ada lagi! Berikut adalah beberapa tips tambahan:
v. Ekspor Langsung
Menyeret layer dari daftar ke desktop, atau ke aplikasi lain, secara otomatis akan mengekspornya untuk Anda dalam format .png. Tahan tombol selection (⌥) untuk mengubah ke format PDF saat menyeret keluar.
6. Sketch Generator & Sketch Commands
Kami telah membicarakan fitur asli dalam Sketch, namun ada komunitas yang sangat aktif di luar sana yang mengembangkan plugin sepanjang waktu. Sketch Generator, misalnya, adalah cara baru untuk mengekspor konten menggunakan Sketch. Anda harus melihat plugin ini terutama jika Anda sebelumnya telah mencoba fitur Adobe Generator dari Photoshop CC.
Sketch Commands adalah kumpulan perintah skrip. Beberapa dari mereka terkait dengan tugas ekspor, jadi ini adalah perpanjangan lain yang akan saya sarankan untuk Anda lihat.
Kesimpulan
Semua hal yang telah saya bahas selama tutorial ini akan mempersenjatai Anda dengan keterampilan untuk memahami bagaimana mengekspor konten dalam Sketch iii. Jika Anda memiliki pertanyaan tentang mengekspor, atau Sketch secara umum, tinggalkan komentar di bawah ini. Saya akan senang untuk membantu!
Source: https://webdesign.tutsplus.com/id/tutorials/understanding-sketchs-export-options--cms-22207
Post a Comment for "Create Slice of Uploaded Artboard for Export in Sketch 3"