Bagaimana cara mengubah gambar piksel dalam logo vektor di Inkscape?


17

Saya tidak tahu apakah saya berada di tempat yang tepat, tetapi saya ingin tahu cara mengubah gambar piksel yang saya buat menjadi logo vektor?

Saya menggunakan gambar ini untuk favicon saya di situs web pribadi saya. Dan jika Anda memiliki rekomendasi perangkat lunak , saya bekerja di mac. Saya lebih suka menggunakan yang open source.

Gambar piksel


3
Apakah Anda mencoba untuk menjaga tampilan pixelated, atau Anda mencoba untuk menghaluskannya?
Brendan



Sedikit masalah adalah bahwa gambar tidak terbentuk dengan baik, mereka tidak kuadrat sempurna ketika diperbesar.
Adam Schuld

@brendan Saya ingin menjaga tampilan pixelated
Guillaume Vincent

Jawaban:


16

Inkscape

Aplikasi grafik vektor yang kuat ini gratis, lintas platform, dan Open Source. Muncul dengan fungsi bawaan untuk melacak grafik vektor dari bitmap.

Ini adalah langkah-langkah yang terlibat:

  1. File - Impor ... : pilih untuk "menanamkan" bitmap.
  2. Pilih bitmap yang disematkan.
  3. Pilih Jalur -Trace Bitmap ... . Ini akan membuka dialog berikut:

    masukkan deskripsi gambar di sini

  4. Buat pengaturan berikut untuk menjaga tampilan kotak persegi pixelated dalam Mode , dan pada tab Opsi :

    masukkan deskripsi gambar di sini

    • Centang Warna .
    • Pilih 11 Pemindaian untuk 11 warna gambar sumber Anda.
    • Centang Stack scan untuk membuat satu objek per warna saling bertumpuk satu sama lain.
    • Hilangkan sudut halus dan Optimalkan jalur untuk kotak persegi yang dihasilkan.
    • Klik Perbarui untuk pratinjau, OK untuk melacak bitmap.
    • Pindahkan grafik vektor di sebelah bitmap untuk membandingkan hasilnya (di sini jejak vektor yang dipilih ada di sebelah kanan):

    masukkan deskripsi gambar di sini

    • Salin objek vektor ke gambar baru dan simpan dalam format file pilihan Anda.

catatan:

Panduan ini tidak akan mengarah ke hasil yang diinginkan dari grafik vektor pixelated ketika bekerja pada sumber ikon yang sangat kecil. Untuk tetap mendapatkan efek pixelated pada pelacakan, kita harus terlebih dahulu meningkatkan ikon sebelum mengimpor ke Inkscape.


Satu hal yang saya ingin tahu tentang @Takkat adalah jika kelainan yang sama ada di jejak Anda seperti halnya di Illustrator. Jika Anda melihat jawaban saya, Anda akan melihat bahwa mata itu bukan garis lurus - apakah itu sama di Inkscape atau apakah Inkscape melakukan ini lebih baik?
Adam Schuld

@AdamSchuld: di Inkscape itu adalah opsi "optimalkan jalur" yang harus kita nonaktifkan untuk mendapatkan garis lurus daripada Beziers. Mungkin tidak ada 100% sudut kanan (sulit untuk diuji). Saya percaya ada opsi serupa di Illustrator (tapi saya tidak bisa mengujinya pada semua sistem Open Source saya di sini).
Takkat

3

Saya tidak mahir dalam program ini, tetapi bisa dilakukan di Inkscape. Saya yakin seseorang akan masuk dan menjelaskannya di inkscape. Satu hal yang saya perhatikan ketika saya memperbesar gambar adalah bahwa ada ketidaktepatan dengan kotak-kotak di gambar Anda. Siapa pun yang membuat gambar ini menggunakan lebar baris bergantian 7 piksel dan 8 piksel yang membuatnya sedikit lebih terlibat dalam suatu proses saat membuat kisi untuk efek pixelated.

Cara rendah turun, cepat adalah dengan menggunakan penelusuran gambar di Adobe Illustrator, itu benar-benar membutuhkan waktu kurang dari satu menit dibandingkan dengan proses yang lebih terlibat dalam menciptakan kembali piksel menggunakan kisi-kisi. Saya tidak 100% yakin apakah pelacakan bitmap di Inkscape akan menghasilkan hasil yang sama.

Bagaimanapun proses dalam Illustrator adalah untuk mengimpor gambar dan kemudian menggunakan jejak gambar dengan pengaturan yang kira-kira sama seperti gambar di bawah ini. Ini akan menghasilkan efek seperti piksel yang kaku. masukkan deskripsi gambar di sini

Efek diperbesar. Untuk sebagian besar efek tidak akan ada kelainan. Memperbesar

Namun, area tertentu Anda harus memperbaiki jalur secara manual karena sedikit tidak aktif. Kelainan ringan


terima kasih @AdamSchuld, saya memilih solusi open source Takkat. Tetapi jawaban Anda dapat membantu pengguna ilustrator.
Guillaume Vincent

Jawabannya lebih baik! Senang saya bisa membantu
Adam Schuld

0

Tidak perlu menggunakan grafik vektor saat Anda menginginkan tampilan pixel-y. Anda bisa menggunakannya GIMPuntuk meningkatkan PNGfile Anda . Begini caranya:

  1. Buka file Anda di GIMP
  2. Pilih Image>Scale Image
  3. Ubah pengaturan untuk memperbesar file Anda
  4. Mengekspor file Anda yang upcaled sebagai yang lain PNG(tekan Ctrl+ Shift+ Eatau pilih File> Export)

Namun, jika Anda mengekstraksi ikon piksel Blender, maka Anda harus menggunakan Inkscapemetode ini.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.