13 Apr 2013

Keajaiban File PNG

Aku khan tukang vector yak. Otomatis aku setiap hari bermain-main dengan bitmap, vector, lalu bitmap lagi. Bingung nggak? Jadi kronologinya begini sayang..

Aku dikirimi photo (bitmap) sama klien > Aku bikin vectornya di corel draw > Lalu vectornya aku export jadi bitmap lagi (PNG) biar bisa dilihat pakek picture viewer biasa > Lalu saya kirim file bitmap (beserta file vector .CDR tentu saja) ke email klien.

Trus bayaran? NO! Bayarnya di awal sayang. Jadi saya hanya mau bekerja setelah bayaran didapat. Maklum aku orangnya pemalas. Jadi kalo orang lain habis kerja keras baru dibayar, kalo saya habis bayaran baru kerja keras! HAHAHA..

Habis ngevector, biasanya saya export ke PNG. Karena vector itu warnanya solid. Gradasinya pun solid. Maka saya memilih PNG. Karena file PNG itu bagus untuk warna-warna solid. Sekaligus ukuran filenya NGIRIT!

Bukti? OKEH!!!

FILE PNG WARNANYA SOLID

Perhatikan perbedaan PNG dan JPG di bawah ini:

PNG dan JPG

Sekilas memang sama persis yak. Tapi coba kita zoom..

JPG pecah

File JPG akan terlihat pecah warnanya. Walaupun seharusnya satu blok warna coklat muda, tapi entahlah dia memecah sendiri kayak sedang galau gitu.

Di beberapa sisi, warnanya bimbang banget, mau coklat muda atau agak tua, gak jelas. Jadi kalo ada anak alay yg lagi galau, dia kayak JPG banget tuh.. #apaansih

Yuk, kita lihat kalo PNG di zoom…

PNG di zoom warnanya solid

Lihat perbedaannya dengan JPG di atas. Beda banget khan? PNG warnanya lebih solid. Lebih yakin. Lebih satu tujuan. Lebih fokus. Lebih bersih. Jadi kalo kalian mau bikin nama organisasi dengan moto satu tujuan, fokus, yakin, mending kasih nama PNG saja! #apaansih #partII

FILE PNG UKURAN FILENYA LEBIH NGIRIT

JPG lebih besar ukurannya

Coba kalian save gambar di atas ini. Ukuran file JPG di atas adalah 46,3 KB. Kualitasnya di photoshop saya kasih maksimum, soalnya saya ingin kualitas terbaik.

Maksimum gimana sih ndop?

Itu loh, pas dirimu ngesave for web & devices di photoshop, khan kalo kita pilih JPG, akan ada pilihan low, medium, high, very high, atau maximum. Nah saya pilih maksimum biar warnanya mendekati solid. JPG ga bisa solid 100 persen soalnya, selalu saja akan ada warna yg pecah, walaupun seharusnya solid.

Oke dicatat ya, ukurannya 46,3 KB (bukan Keluarga Berencana!)

PNG ukurannya lebih slim

Lalu coba save file gambar PNG di atas ini. Ukurannya cuma 17,8 KB saja!!! Saya save for web & devices di photoshop dengan pilihan PNG-8 dengan pilihan 256 warna. Karena vector saya kali ini gak pakek warna gradasi. Kalo pakai warna gradasi atau gradien atau sembur, mendingan save as PNG-24. PNG-24 jumlah warnanya tak terbatas.

Jadi begini, kalo kalian bikin logo yang hanya pakek 2 warna, misalnya hitam dan putih. Ngesavenya di photoshop pakek pilihan PNG-8 dengan pilihan 4 warna aja. Atau 8 warna. Jangan pas 2 warna, nanti hasilnya kasar. Atau kalian bisa lihat perubahannya di sebelah kiri ketika kamu ubah ke jumlah warna tertentu.

Daripada bingung, yuk kita langsung praktek:

PNG-8 2 warna

Gambar di atas ini saya Save for web & devices dengan settingan PNG-8 trus saya pilih 2 warna. Hasilnya bisa di lihat di preview sebelah kirinya. Tampak gambar vectornya berubah jadi cuma dua warna. Hijau dan krem. Ukuran file juga mengecil menjadi 2,87 KB saja!

Yuk kita coba menaikkan jumlah warnanya:

PNG-8 32 warna

Nah, kalo jumlah warnanya kita naikkan menjadi 32 warna, maka gambar akan terlihat lebih jelas. Hanya saja warna bibirnya masih coklat karena keterbatasan warna yang cuma 32.

Ukuran filenya juga naik menjadi 10,48 KB. Ya wajar soalnya jumlah warnanya bertambah.

Enaknya PNG ya begini, besarnya ukuran file tergantung jumlah warna. Tapi dengan kualitas yang sama (warna solid atau tidak pecah). Beda sama JPG, yang membedakan besarnya ukuran file adalah kualitas, bukan jumlah warna.

Nah, pekerja seni jangan kayak JPG ya, yang kualitasnya berubah-ubah sesuai tarif. Jadilah kayak PNG, dengan tarif yang berubah-ubah, yang dikurangi bukan kualitasnya, tapi “porsi”nya. #ndopquote

Kalian bisa eksperimen sendiri pakek foto wajah biasa. Kurangi warnanya, maka akan terlihat perubahannya dan besar ukuran filenya.

Sebagai produsen vector terbesar sedunia!!! yang baik hati, saya selalu ngesave file vector ke bitmap memakai jenis PNG-24. Karena saya tidak mau mengecewakan pelanggan. Ukuran file vector saya rata-rata 800 KBan. Soalnya ukurannya 60x80cm dengan 72dpi (standar web, bukan standar cetak).

Kenapa saya pakek standar 72 dpi? Karena file bitmap itu untuk keperluan preview saja. Untuk dilihat di layar komputer gitu maksudnya. Bisa sih dicetak, tapi jangan lebih besar dari 60x80cm, kualitasnya akan menurun nanti. Untuk keperluan cetak mencetak, pakai file CDR (Corel DRaw) aja, yang sudah saya kirimkan berduet dengan PNG.

Lha kalo vectornya gak ada gradasi, kenapa nggak pakek PNG-8 saja ndop? Khan lebih irit ukuran filenya?

Pertanyaan yang sangat bagus! Tepuk tangan buat saya sendiri! :tepuk:

PNG-8 itu ukuran size gambarnya solid. Jadi kalao kamu punya file gambar yg disave menjadi PNG-8, maka gak akan bisa diresize. Kalo dipaksa, akan rusak!

Perhatikan contoh di bawah ini:

PNG-8 rusak diresize

Gambar di atas adalah file PNG-8 yang ukuran aslinya 225 piksel trus saya resize menjadi 200 piksel. Perhatikan banyak sekali garis yang patah. Yup, itulah PNG-8. Sangat egois dan gak mau diatur kayak saya!!!. Bahkan kalo kamu tambahkan tulisan di atasnya pun, dia nggak mau menerima!

Trus cara mengatasinya?

Hadeuh, pertanyaan standar! Caranya gampang beroh! Cukup ganti modenya dari yang index (perhatikan gambar di atas ada tulisan index) menjadi RGB atau CMYK terserah yg mana. Lihat gambar di bawah ini:

RGB

Sudah ngerti khan letaknya? Image > Mode > RGB. Setelah kau ubah menjadi RGB, file PNG-8 mu yang sekarang sudah berubah jinak-jinak merpati dan mau diapain saja. Gak percaya?

PNG-8 mulus

File PNG-8 yang sudah dijinakkan
ketika diresize akan tetep mulus, gak rusak.
Pokoknya bisa diapa-apain kayak file JPG biasa

Nah, aku gak mau dong klienku aku kasih file PNG-8. Kalau dia ngerti design grafis sih gak masalah. Lha kalo dia orang awam? Masak dia mau ngaplod foto profil di facebook seukuran dua ribu piksel? Ya mubadzir tingkat dewa! Trus kalo dia resize ukurannya biar pas diupload di FB, trus ternyata hasil resizenya rusak, siapa yang mau tanggung jawab hah?? *ekting marah*

Biar aman, maka klienku aku kasih file PNG-24. Karena file PNG-24 gak ada “index”nya di photoshop. Jadi aman sekali kalo mau diedit sendiri.

Btw, kenapa sih aku pakek photoshop? Bukannya pakai corel saja sudah cukup?

Pertanyaan yang sangat bagus! Tepuk tangan buat saya sendiri! :tepuk:

Entahlah yah, mengeksport file vector ke bitmap mentah dari corel draw itu selisihnya besar banget dibanding kita save lagi pakek photoshop.

Yuk, kita langsung praktek:

PNG Export Mentah Corel Draw

Coba kalian save gambar di atas, ukurannya 27,9 KB. Beda jauh khan dengan ukuran PNG yang sudah saya save for web & device di photoshop yang cuma 17,8 KB. Bahkan untuk ukuran gambar yang besar, bedanya bisa jauh banget, bisa selisih 300 KB an.

Tapi kadang file PNG mentah exportan dari corel draw pun bisa lebih kecil dibanding PNG-24 nya photoshop. Jadi untuk kasus PNG-24, hanya perlu coba-coba saja. Kalo untuk PNG-8, tentu akan jauh lebih kecil dibanding PNG mentahan corel. Coba saja deh.

Udah ah. Terlalu detail ini penjelasan saya. Harusnya ditulis di buku saja kali yak. Kayaknya aku berbakat nulis buku. Betul nggak? BETUUUUUULLLL!!! <-- tumben mendukung, tapi kenapa saya coret ya? :lol: KEUNGGULAN PNG dibanding JPG

  • Untuk gambar dengan jumlah warna tertentu, ukuran file bisa jauh lebih kecil karena PNG menghitung jumlah warna
  • Gambar lebih bagus dan solid dibanding JPG. Contoh nyata pada gambar hasil exportan dari vector
  • PNG bisa bikin background transparant. Tips: Pilih PNG-24 yah. Kalo PNG-8 hasil transparannya kasar soalnya warnanya dibatasi. Jangan lupa centang “transparency”nya.
  • Dilihat dari namanya, PNG lebih ekslusif dibanding JPG. Ibarat gejet, PNG itu Iphone, JPG itu hape cina #eh
  • Foto biasa pakek ekstensyen file PNG terlihat kayak orang kaya. Karena ukuran filenya akan besar sekali dibanding JPG, perbedaannya bisa 9 (PNG) dibanding 1 (JPG)! Nah, itu bisa jadi bukti kalo harddiscnya bertera-tera bait cuma buat nyimpen photo high resolution PNG saja!!!
  • Semakin ngaco, udah ah..

Muhammad Ali Mudzofar a.k.a ndop. Punya motto hidup: Think less feel more. Lebih banyak merasa, lebih banyak manfaatnya. Lebih banyak mikir? Cepet tua loh! #eh



105 KOMENTARS YUK KOMEN ↓

Biar avatarmu muncul, daftar di gravatar.com ya

  1. Fajar #

    :pertamax: asiikk !! dapat ilmu baru lagi ! :siul:

    • hahahaha… situsmu kleru nulise.. :p

      • :rock: ehehe..saking semangate

    • PCGameFull #

      Wah, jadi tahu keunggulan dari PNG. KAlo gitu mending kalo upload k blog pake PNG aja ya, irit pemakaian disk space. . Thanks infonya sob ! Salam kenal

      • Kalo untuk gambar yg gak banyak warnanya mending PNG. Kalo foto biasa mending jpg mas.

        salam kenal juga…

  2. :pertamax: :ssst: HIDUP PNG *CAPS LOCK JEBOL BRO* NYIAHAHAHAHHA

    • Keduax Ternyata. Gara-gara lemot.

    • HAHAHAHA… kepsloknya dimakan aja mas.. lumayan buat cemilan :doh:

  3. Mantap mas artikel nya, saya paling suka bagian yang ini

    ” Dilihat dari namanya, PNG lebih ekslusif dibanding JPG. Ibarat gejet, PNG itu Iphone, JPG itu hape cina #eh”

    • HUAHAHAHAH.. itu asal2an aja sih.. murni pendapat pribadi haha..

  4. Ilmu baru dan lengkap banget masbro. Jadi tau perbedaannya sekarang. :dance:

    • Horeee.. makasih apresiasinya maass…

  5. nyimpen ke PNG pas butuh transparan aja, misalnya buat judul blog, secara kualitas juga lebih oke dibanding GIF meski sama2 bisa transparan

    • wehehehe GIF itu spesialis buat gambar bergerak soale kang..

  6. kasih tau dong gmn cara buat gambar png yang benar dan mudah

    • PNG sangat bersahabat dengan gambar yg punya banyak warna yg bisa dihitung. Kalo foto biasa itu khan warnanya sangat banyak, jadi kalo disave PNG akan membengkak. Cara membuat png? Ya tinggal di save as aja di photoshop atau export di corel :D

    • Abdalhaqq Muhammad Saih #

      juga murah :hihi:

  7. :tepuk: :tepuk:
    ini mesti unek2 karena banyak client yg ngirimke atau minta foto jadi pake JPG :D

    • Bener tom! Biyuh komenmu kok lali gak tak bales ya

  8. Saya malah suka bitmap, karena ukurannya besar…

    • Tapi lebih suka png

      • Sukanya bukan karena apa2…
        Karena suka saja.
        Dan itu sudah cukup untuk saya jadikan alasan yang kuat dan akurat…

        • Selain png, saya juga suka image dg ekstensi dot com
          Kesannya mewah dan nggak semua tukang nggambar bisa membuatnya…

  9. Kalau .CDR ; .GIF; .JPG; .PNG belum begitu gumun.
    Kalau ada gambar .COM baru gumun dan ngedab2i

    • HAHAHAHA.. sing luwih mbois maneh nek ora enek nggurine blas. Koyok foto ndik feisbuk, gak enek ekstensyen e haha..

  10. aku ngertine png iso transparan ngunu ae :D eh ternyata masih banyak keajaiban lainnya :shock:

    tapi aku kadang bingung, kalo lagi maen cmyk di photoshop gabisa ngesave png :(

    • Iyo betul, PNG akurnya sama RGB sih.

  11. Ibnu Ch #

    Wah kirain yang paling bagus selama ini Jpg…
    ternyata PNG to .

    • Kalo dibaca semuanya, kalian akan paham. Kasusnya tertentu. Gambar vector misalnya.

  12. Bener banget, PNG favorit deh. Ukuran filenya irit, tapi kualitasnya juara!

  13. foo #

    saya juga paling suering save for web pakai png karena ukuranya kecil dengan kualitas yg maksi hehehe…..selain keunggulan utamanya yaitu transparansi :kiss:

    • Yup betul sekali hihihi… Banyak yg belum tahu masalah PNG ini. hihihi…

  14. CreACTive (@whizisme) #

    wuih ada putuku :siul: vectornya keren JAGOAN

    • kangen soale hehehehe…

  15. Dhimas Kirana #

    :tepuk: lengkap banget penjelasannya, jadi tau nih perbedaannya PNG-8 dan PNG-24.
    Saya seringnya pake png-24, feeling aja biar hasil png nya bagus. hehehe..
    sama png-24 tu bagus tranparannya.. :D

    • Betuuul… pilih yg aman aja PNG-24. Kecuali kalo mau ngirit ukuran file bisa pilih PNG-8 :sip:

  16. andank #

    aku kok mulai binggung to. antara PNG-24 sama PNG-8 iku opo ne? pacar e opo dulur e? wkwlwkwkwkwk

    • hahaha, lha iyo, kudunya dijadikan satu aja yah. PNG, ntar dikasih pilihan berapa warna. Trus yg terakhir unlimited warnanya.

  17. Kalo utk urusannya spt ini, aku manggut2 saja, biar dkira paham :lol: , suerrr baru tau :sip: #asyiknya belum telat…

  18. ganti PNG ahhh,, makasih pak bos :ampun:

    • hahaha.. kalo foto ya JPG saja. Kalo kartun2, baru PNG.

  19. Wah..kirain kelebihan PNG cuma bisa bekgron transparan ajah…

    • ternyata akeeeh gunane..

  20. hantuceria #

    hmmm…. iya sih mas bagus png…
    apalagi kalo png bisa untuk alpha background (transparent) sedang yang jpg gak bisa…
    tapi ukurannya tetep gede (dari pengalaman yang pernah ane coba sih ehehehe)

    • iyo, hehehehe… Aku juga berdasarkan pengalaman soale aku nulis postingan ini tanpa baca wikipedia sedikitpun haha

  21. widih tutorialnya lengkap banget masss… btw iya mas kalau png dia lebih ringan apalagi buat web atau blog mending pake png aja ya mas :)

    • iya betul.. soalnya pas ngesave khan ngeklik yang save for web and devices.

  22. kapan-kapan ulas ekstensi .tif ya bero… :wink:

    • Kebetulan aku ga suka file tiff jadi aku gak tau banyak hehehe.

  23. Nuwun mas ndop, jadi dapet ilmu baru lagi.. sekarang ane juga jadi lebih suka save image format nya PNG.. hehe.. :ampun:

  24. duh..!

    iyah bikin buku aja mas ndop :rock:
    ** ktaun ga paham akunya :ampun:

    • hahaha… musti suka main2 sama gambar soalnya hihih.

  25. Mufid #

    wah wah..
    baru kali ini ane baca artikel dari awal sampek akhir !
    Bookmark dulu kang..
    hhe
    buat belajar PS.an ..

    • Matur suwun kang…

  26. giriayoga #

    saya kira JPG itu ekstensi gambar yang paling bagus.ternyata PNG juga punya kelebihan yang tidak dipunyai JPG :D

    • yoi, semua hebat di bidangnya masing2 :sip:

  27. Belajar Photoshop sama bang ndop ah…

  28. Baru tau kalo png lebih bagus dari jpg, selama ini saya pikir sama aja… gambar juga.

    :ampun: Salut buat mas Ndop

  29. Muslimedica #

    klo belajar sama pakarnya memang jauh beda sama belajar sendiri, keren mas bro

  30. Agung Tri Wiyono #

    ASEKKK.. MANTAPP ILMUNYA :sip: :tepuk:

  31. cupuxmovie #

    wah ni mantap artikelnya gan… thanks ya da share ^_^
    salam cupux-movie ” download film terupdate tinggal klik langsung download “

  32. Hoooh jadi tahu keunggulan lain PNG. Selama ini cm tau PNG sizenya jadi lebih kecil. Suwun ya!

    • Yup. Sama sama. Kalo pakek png asal bukan foto dg detail rumit dg banyak warna ya ukurannya akan kecil heheh..

  33. Abdalwahab Mujtaba #

    tapi menurutku mas ndop lebih baik disimpan yang filenya DZF(dzofar) atau NDP(ndop) atau MAM (muhammad ali mudzofar) itu kan bagus lho,
    versi terbaru dari ndop :hihi:

    huaaahaaha…..huahahahaha :???:

    setelah itu……

    :kabur:

    • Hahahaha.. Kejar gak yaaa…

      • Abdalhaqq Muhammad Saih #

        gak aah…..:hihi:

      • Abdalwahab Mujtaba #

        mas boleh gak minta vectorin dua gambar jadi vector line art, cartoon, dan real tapi aku mohon yang gratis, boleh gak,? :takut:

  34. bermanfaat banget nih postingannya walaupun belum mudeng

  35. Mohamad Borneafandri Abulga #

    Haha, jadi gitu mas Ndop????Pantas saja setiap kali save logo ke jpg hasilnya beda dengan yang masih PSD

    • Oh kalo bikin logo pakek PSD khan basicnya bitmap. Jadi otomatis pecah.

  36. mahos #

    Keren infonya lengkap bgt anak desain grafis ya, makasih ya. :mataduitan:

    • Aku anak statistik haha.. Sama sama..

  37. Saya nubie nih Gan, kalo export file cdr ke jpg/png supaya ngga pecah gimana caranya ya? Matur nuwun sebelumnya.

  38. dodol #

    :rock:
    mas… mau tanya, aplikasi corel dan sotoshop sampeyan asli apa bajakan. kalo asli alhamdulillah halal yo rejekimu… nuwun

    • Gak ngerti mas, aku dipinjemi temen hehehehe

  39. Lumayan juga ya hasil file dari corel. thanks

  40. pantesan ya kalau abis download gambar dari web kebanyakan format PNG, jadi penasaran ketemu nih ilmunya.
    Terimakasih

  41. pell #

    mas, kalo untuk cetak bagusnya brapa dpi?

    dan knpa wktu saya cetak yg format png ataupun jpg, yg ada wrna hitamnya, ada garis putih di pinggirnya, padahal kalo di view di komputer gk ada tuh,,, wrna hitamnya biasa aja, tnpa ada garis line smping wrna putih… keluarnya wktu di cetak aja,, tpi wrna lain gk gitu mas,,, mohon pencerahannya mas ndop…

    • Warna hitamnya itu CMYK100 atau black biasa? Aku soalnya belum pernah mengalami. Aku hitamnya pakai c100m100y100k100 alias hitam pekat.

  42. Baca Tulisannya seger mas…..bacanya santai karo ngguya ngguyu…. dan mudah dipahami. Terima kasih..

  43. awalnya sih sempet kecewa karna ane kurang jago make corel untuk buat gambar vector karna Ane kira contoh gambar” yg ada dipost ini dibikinnya pake corel draw, eh pas ane baca sampe abis ternyata make photoshop :) :D

    • Ini vectornya pakai corel. Kalau photoshop itu cuma mengolah gambarnya..

  44. marketceria #

    dari tidak tahu, sekarang jadi tahu wkwkwk :taktahu:

  45. hahaha,,,,,mantap ilmunya mas !! tapi btw sambil membaca kaya lagi lihat orang stand up comedy haha :dance:

    • Huahahahahha.. Berati selera humor kita samaaa

  46. agus hartadi #

    keren mas, sangat membantuuu

    • Halaaah, sampean kesasar ning blogku to mas? Hahaha.

  47. Thanks makasih ya infonya…
    Mau dong tutorialnya yang di photoshopnya…

  48. Bener banget setuju sama ente :lol:

  49. tp png susah

  50. cara mindahnya gmn ke png?

  51. mas jokO #
  52. suryadi #

    Kang Dzofar …..

    Semua yang ditulis sih agak2 ngerti gitu. Yang bikin ga ngerti kok bisa sih ada bayaran dulu baru dikerjain. Itu beneran atau KW?
    Siapa ajah tuh pemesannya? (klo boleh tahu)
    saya terus terang penasaran pangkat 8 nih.

    • Kalau online emang semua bayar dulu mas. Baru dikerjakan. Minimal DP dulu. Kalau di aku bayar lunas dulu baru aku kerjakan. Soal aku nipu apa enggak khan aku nulis alamat rumah no telpun dll kalau ditangkep ya bisa banget haha.

  53. ilham #

    Png kok bisa dibuat transparant kenapa?

  54. Bener banget tu mas, kalau buat blog saya lebih banyak pakai png karena ukurannya lebih kecil dibanding jpg & ga pecah2. Cuma sayangnya kalau buat blog file png susah dikompres lagi beda sama jpg

  55. edy #

    wah … baru ngerti sekarang, ternyata masing – masing format file peruntukannya tidak sembarangan. thanks sudah berbagi ilmu.



Komen dong!