Bagaimana saya bisa mengekspor gambar dari gambar Illustrator dalam berbagai ukuran?

29

Saya baru mengenal Adobe Illustrator dan saya memiliki gambar logo yang perlu saya gunakan dalam 5 atau 6 ukuran berbeda. Gambar logo dibuat di Adobe Illustrator, tetapi ketika saya mencoba untuk menyimpan gambar ke PNG atau JPEG apa yang seharusnya sederhana ternyata sangat rumit.

Saya mengerti bahwa Adobe Illustrator ingin memperlakukan gambar sebagai ukuran tertentu, dan kemudian ingin mengalikan ukuran itu dengan faktor skala piksel per inci untuk menghasilkan jumlah piksel aktual yang disimpannya. Ini memiliki beberapa pilihan faktor skala terbatas yang memberikan serangkaian ukuran piksel keluaran yang sangat terbatas.

Namun untuk banyak penggunaan web pengguna sudah tahu dimensi piksel keluaran yang dibutuhkan. Apakah ada cara hanya menentukan lebar piksel atau tinggi grafik yang disimpan yang diperlukan?

Saya telah melihat saran untuk mengekspor gambar dan kemudian menggunakan Photoshop untuk mengubah ukurannya, tetapi itu menghasilkan kualitas gambar yang lebih buruk dibandingkan membuat gambar akhir dari gambar vektor.

adobe-illustrator export ppi pixel Howard
sumber
1
Terkait: Alur kerja terbaik untuk menyimpan gambar dalam 3 ukuran berbeda
JohnB
ada sejumlah cara untuk melakukan itu, milikku adalah pilih semua maka gambar yang ingin Anda ekspor kemudian ada opsi lebar dan tinggi di header, cukup ubah lalu ekspor

Jawaban:

26

File> Simpan untuk Web dan kemudian masukkan dimensi piksel dengan mengklik Image Sizetab di sebelah kanan jendela Simpan untuk Web.

Atau apakah saya tidak memahami Anda dengan benar?

Scott
sumber
Sempurna terima kasih. Saya baru saja menghabiskan sekitar 15 menit dengan fungsi "ekspor", tetapi karena ia menolak untuk menggunakan kurang dari 72ppi, saya harus mengubah skala karya seni dan artboard untuk ekspor yang sangat kecil, itulah yang bisa dilakukan oleh penanya.
Kjeld Schmidt
12

Menggunakan File → Save for Webdan memasuki dimensi akan melakukan apa yang Anda cari. Juga, Illustrator menggunakan penskalaan vektor, sehingga hasilnya lebih baik daripada jika Anda mencoba hal yang sama di Photoshop - memasukkan dimensi yang tidak cocok dengan dokumen di Photoshop berarti gambar akan diskalakan dengan bitmap.

Harap dicatat bahwa Anda harus mengklik Terapkan setelah mengubah dimensi, jika Anda menggunakan versi Illustrator sebelum CS6.

Simpan untuk Web di Illustrator

Oh, dan ada peluang yang sangat bagus untuk Convert to sRGBdimatikan - secara destruktif mengubah gambar Anda dari ruang warna saat ini menjadi sRGB, membuat warna bergeser.

masukkan deskripsi gambar di sini

Marc Edwards
sumber
Tidak ada tombol Terapkan di CS6 .... dan saya tidak setuju tentang Konversi ke RGB, Anda ingin AKTIF untuk gambar yang ditujukan untuk web.
Scott
2
Terima kasih mengenai tip CS6. Membiarkan Konversi ke sRGB aktif benar -benar pendekatan yang salah untuk kerja web dan UI. Inilah seluruh artikel tentang alasannya: bjango.com/articles/photoshop (Kontes saya tentang ini atas risiko Anda!)
Marc Edwards
2
Apakah Anda benar-benar membaca artikel itu? Saat Anda melakukan pekerjaan web dan UI, nilai warna yang tepat HARUS dipertahankan sepanjang seluruh proses. Jika Anda memasukkan # FF0010 sebagai warna, itu HARUS di-output dalam file sebagai # FF0010 jika Anda bermaksud mencocokkan warna dalam kode. Ini berarti Konversi ke sRGB HARUS dimatikan. Saya merasa Anda tidak melakukan pekerjaan semacam ini dan tidak mengerti apa yang terlibat.
Marc Edwards
1
Scott, tolong jangan anggap ini sebagai serangan hominem iklan, tetapi dari diskusi serupa saya pikir Anda mungkin telah mengambil beberapa ide yang salah tentang representasi warna RGB. Lihat juga graphicdesign.stackexchange.com/questions/7815/… .
e100
3
Konversi ke sRGB adalah pilihan yang salah di hampir setiap situasi yang mungkin terjadi saat bekerja untuk web. "Ada ALASAN tim Simpan untuk Web menerapkan opsi Konversi ke sRGB" - Saatnya untuk memperbaikinya. feedback.photoshop.com/photoshop_family/topics/…
Marc Edwards
1

Ketika saya perlu mendukung beberapa ukuran piksel, saya menipu dan mengatur skala dalam file AI yang sama. Masing-masing ukuran ditempatkan pada papan artboard terpisah berukuran benar. Saya menambahkan nama dewan dengan format file yang akan diekspor. Lalu saya menjalankan jsx yang mengekspor setiap artboard dan mengambil format file dari namanya, menggunakan pengaturan terakhir yang saya masukkan untuk format itu dalam file itu. Ini semua di CS5.

Saya menggunakan alur kerja ini untuk beberapa logo, ikon, dan iklan bergambar.

Baju biasa
sumber
Tolong, bisakah Anda membagikan .jsx?
kelin
@elin aku takut aku tidak bisa. Sudah lama sejak saya terganggu dengan produk Adobe.
pakaian biasa
1
Tidak masalah, saya menemukan skrip hebat di sini: stackoverflow.com/a/28067227/3050403
kelin
0

Anda juga dapat membuat dokumen dengan ukuran yang sesuai di Photoshop (atau kotak area dengan panduan) lalu File> Tempatkan seni vektor.

Anda bisa mengukur ukuran bentuk sebelum dirender. Jelas penskalaan setelah itu akan mengurangi kualitasnya.

Saya selalu menggunakan teknik ini untuk logo untuk memberikan kontrol yang tepat atas ukuran, misalnya mendapatkan garis dasar elemen teks logo pada batas piksel (suatu bentuk petunjuk).

e100
sumber
0

Tambahan untuk subjek ini yang saya temukan menarik bagi desainer aplikasi seluler, adalah skrip ini yang menciptakan aset retina untuk iOS dan Android dalam 1 kali klik.

numediaweb
sumber