Ubah Gambar Mockup Menjadi File HTML


Andriek Kristianto - Ubah Gambar Mockup Menjadi File HTML. Mencari template untuk desain website saat ini susah-susah gampang, kadang sudah ketemu eh bayar. Trus ketemu yang gak bayar ternyata malah tampilannya gak sesuai harapan. Kalau seperti ini kan jadi gak mulai-mulai deh, karena tampilan yang kita inginkan tidak kunjung dapat.

Setelah mencari berbagai cara akhirnya saya menemukan website yang bisa memecahkan masalah saya, yaitu Sketch2code. Sketch2code merupakan aplikasi web gratis dari microsoft yang berfungsi untuk mengubah file gambar menjadi file HTML. 

Aplikasi ini menggunakan model custom computer vision yang dapat mengenali objek dan pola, model ini membuat prediksi untuk mendeteksi elemen desain yang dibuat atau diupload oleh pengguna melalui halaman web sketch2code. Jika sudah selesai maka hasil file HTML dari gambar yang diupload sudah bisa di download, dan bisa digunakan ke aplikasi web yang Anda bangun. 

Tips Mengubah Gambar Mockup Menjadi File HTML dengan Sketch2code

Aplikasi web Sketch2code ini didukung oleh Microsoft Azure Cloud Platform AI, sehingga objek dari tulisan tangan pun bisa didetek menggunakan aplikasi web ini. Bahkan jika Anda ingin foto secara langsung gambar yang Anda buat pun bisa, dengan tombol ' Take a Picture ' di aplikasi web tersebut. Namun pastikan gambar yang Anda buat jelas, mulai dari garis, teks, gambar, dan lain sebagainya. 


Bagi Anda yang tertarik menggunakan aplikasi ini, Anda dapat mengunjungi halaman Sketch2code disini . Aplikasi web sketch2code ini bisa menjadi solusi untuk mendesain website berdasarkan kriteria yang Anda harapkan, hasil dari konversi ini sangat bagus sekali meskipun tergantung pada desain yang Anda buat. 

Semoga bermanfaat. 

Post a Comment

45 Comments

  1. kalau aku biasanya upload di blogger aja terus klik html code
    udah dapet deh htmlnya :D

    ReplyDelete
  2. wah keren juga mas, bagusnya mas pake wordpress atau blogger?

    ReplyDelete
  3. Wah gitu ya kang, tapi kalo aku masih pakai template bawaan blogger, ngga utak Atik karena ngga paham html.😂

    ReplyDelete
  4. Wah sy sebenernya paling ga ngerti yg ginian, btw itu footer blognya kita kembaran yaak. 😆

    ReplyDelete
    Replies
    1. Wahhh iyakah mba, saya iseng liat di codepen sih mba

      Delete
  5. Ternyata ada yaa teknik merubah gambar Mockup jadi kode Html..Dan caranyapun sangat simple dan sederhana.😊😊

    Ok thanks sob atas infonya lain waktu bisa saya coba nih caranya..😊

    ReplyDelete
  6. Baru tau nih, ada yang bisa convert langsung ke html dari gambar. Gak perlu repot lagi potong2 di potosop :)

    ReplyDelete
    Replies
    1. Hemmm bisa modifikasi tampilan blogger dengan mudah dan gampang nih cuma dari mockup aja

      Delete
  7. Wow, praktis banget, ya. Tinggal bikin gambar yang rapi, foto, terus terdigitasi sendiri. Kayaknya kapan-kapan perlu dicoba ini. :D

    ReplyDelete
    Replies
    1. Heheheh iya, udah dicoba belum? ayooo coba mumpung gratis

      Delete
  8. duh gue kaga paham.. wkwk btw templatenya bagus mas... milennial gtu.

    ReplyDelete
  9. wah baru berkunjung kesini lagi makin cantik wkwk

    ReplyDelete
  10. wah Sketch2code emang keren, jadi ingin mencobanya

    ReplyDelete
  11. emang keren nih aplikasi ini haha. sudah nyoba, lumayan baik..

    ReplyDelete
  12. Mantap tipsnya mas, terima kasih buat infonya.

    ReplyDelete
  13. ternyata caranya mudah juga ya :D

    ReplyDelete
  14. Jaman sekarang udah canggih bener ya

    ReplyDelete
    Replies
    1. Iya dong, di zaman yang serba mudah dan canggih ini udah apa saja yang diberikan untuk negara ini?

      Delete
  15. ii ilmu tingkat tinggi wajib dipraktekan nih

    ReplyDelete
  16. Wih keren tapi aku udah terlanjur mal3s ganti templete ,selalu berantakan akhirnya

    ReplyDelete
    Replies
    1. Wuehehehe, pake template apa ada nya saja.. Dan gak perlu neko neko :D

      Delete
  17. Beberapa waktu lalu saya bahkan sempat lihat tools ubah sketch mockup jadi file Android Interface (entah ini nama nya apa) wkwk

    ReplyDelete
    Replies
    1. wuehehe coba diinget lagi, siapa tau inget

      Delete
  18. Menarik.. Harus dicoba ne.. Buat blog harus coba-coba. Kecuali, buat anak jangan coba coba :D

    ReplyDelete
    Replies
    1. Menggunakan teknologi, bisa jauh lebih mudah dan efisien :)

      Delete

Silahkan memberikan komentar sesuai dengan topik diatas, dan dimohon untuk tidak memberikan link aktif yang tidak sesuai dengan topik yang dibawakan.