Bagaimana cara mendapatkan logo vektor agar terlihat sangat tajam di web?

13

Saya melakukan banyak pekerjaan dengan Illustrator, tetapi saya tidak pernah sangat senang dengan penampilan saya di situs web kami. Saya sudah mencoba berbagai teknik - menyimpan dari Illustrator, dan membuka di Photoshop dan menyimpan - tetapi saya masih kehilangan sesuatu.

Ed. Logo hanya diberikan sebagai AI. Saya mendapatkan hasil yang sedikit kabur apakah saya menyimpan untuk web & perangkat dari Illustrator, atau mengambil vektor ke Photoshop. Saya cenderung untuk skala di Illustrator ke ukuran yang diperlukan, dan kemudian simpan untuk web (tipe inc dioptimalkan - ada teks di logo).

website-design vector export Possikiem
sumber
Apakah Anda mencoba menyimpannya dalam format png / gif? Apakah tepi kabur tentang gambar mengganggu Anda?
hello_world
1
Apakah situs Anda dibangun pada CMS seperti Wordpress, karena Wordpress (dan mungkin yang lain) secara otomatis mengeruk kualitas gambar untuk mengurangi ukuran file.
deecemobile
Apakah Anda mengukur gambar di browser, baik naik atau turun? Jika demikian, jangan lakukan itu :) Karena ada tiga orang yang memiliki pertanyaan, mungkin Anda dapat mengedit pertanyaan Anda untuk ditautkan ke ekspor Anda atau yang serupa? Itu akan membantu kami menjawab.
Brendan
Jika salah satu dari jawaban di bawah menjawab pertanyaan Anda, mohon terima.
DᴀʀᴛʜVᴀᴅᴇʀ

Jawaban:

11

Saat meraster grafik vektor, garis terlihat tajam jika jatuh ke batas piksel. Ini dapat dilakukan oleh rasterizer (pembulatan), tetapi sebagian besar program grafik vektor yang saya tahu tidak mendukung hal itu. Salah satu strategi untuk mengatasinya adalah dengan menggunakan kisi yang sel-selnya merentang dan jumlah integer piksel (satu sel 1x1 atau 2x2 atau 3x3, ... piksel).

Untuk ikon, kisi 16x16 adalah awal yang baik, karena memungkinkan ikon tajam 16x16, 32x32, 48x84 dll dihasilkan dari grafik vektor yang sama.

Untuk logo, kotak piksel dengan 1 sel = 1 piksel dalam representasi logo terkecil adalah awal yang baik.

Berikut tutorial yang menjelaskan teknik ini: Ikon Bulb Vektor Cahaya di Inkscape

Peter Walser
sumber
5

Ada banyak hal yang dapat Anda lakukan.

  1. Gunakan format gambar dengan kompresi lossless, seperti PNG
  2. Pastikan jalur vektor Anda sejajar dengan grid piksel sebanyak mungkin
  3. Tingkatkan kontras antara gambar dan latar belakang (baik oleh warna, oleh kecerahan atau keduanya)
  4. Terapkan filter mempertajam dalam perangkat lunak pengedit gambar Anda
  5. Gunakan kombinasi efek, batas lebih gelap + cahaya lebih terang (pada latar belakang terang) ATAU batas lebih tinggi + cahaya lebih gelap (pada latar belakang gelap), seperti ini:

masukkan deskripsi gambar di sini

  1. Teknik lain adalah, mengubah ukuran logo vektor Anda menjadi 200%, menggabungkannya dengan latar belakang Anda, meratakannya menjadi bitmap, dan kemudian mengubah ukuran bitmap kembali menjadi 100%. Terkadang itu membuat perbedaan.

Sebagai perangkat lunak grafik web, saya sangat merekomendasikan Adobe Fireworks, karena lebih cocok untuk desain pixel-perfect, selain alasan lain.

Alph.Dev
sumber
Terima kasih. Saya pikir menyelaraskan ke pixel grid adalah tempat saya salah. Saya pernah mendengar hal-hal baik tentang Fireworks, tetapi saya tidak pernah menggunakannya. Bersulang.
Possikiem
Coba Modify > Snap to pixelopsi. Anda juga dapat membiarkan kembang api menyelaraskan masing-masing piksel untuk Anda di sudut kiri atas atau di tengah piksel. PathPanel bagian dalam , di bawah Edit pointslabel. Semoga berhasil.
Alph.Dev
5

Anda tidak memberikan banyak info tentang apa proses Anda dan ini tidak disebutkan tetapi saya pikir saya akan memberikan opsi ini kepada Anda. Jika Anda sering mendesain di Illustrator dan sedang mencari cara untuk menampilkan grafik Anda ada alternatif yang dapat dilakukan di Illustrator yang dikenal sebagai SVG.

masukkan deskripsi gambar di sini

SVG menjadi sering dengan latar belakang situs dan dengan kemampuan mengubah ukuran tanpa kehilangan secara rinci saya telah melihat lebih banyak menggunakannya dengan ikon. Saya telah memasukkan beberapa sumber yang mungkin bisa Anda baca sehubungan dengan menggunakan SVG di sini:

DᴀʀᴛʜVᴀᴅᴇʀ
sumber
1

Anda dapat mengubah ukuran file vektor di Illustrator. Simpan sebagai PDF, dengan preset: kompresi - gambar bitmap warna - bicubic downsample ke: ukuran apa pun yang Anda suka - kompresi: 'JPEG' - kualitas gambar: 'maksimum'. Simpan dan letakkan file PDF di Photoshop dalam file 300 PPI pra-ukuran (misalnya 125 x 125 piksel). Simpan sebagai PNG. Ini bisa Anda tempatkan di sebuah situs. Cukup tajam.

pengguna49293
sumber