Langsung ke konten utama

Cara Membuat Gambar Flat Design Secara Otomatis

Flat Design adalah desain gambar yang cukup populer di kalangan blogger. Selain efeknya yang simple dan menarik, flat design juga memiliki object yang terlihat tampak lebih hidup. Sehingga saya juga menggunakan flat design ini sebagai gambar utama dalam sebuah artikel. Untuk itu pada tutorial kali ini saya akan memberikan tutorial tentang cara membuat gambar flat design secara otomatis. Sebelum memulai membuat, ada baiknya saya menjelaskan sedikit tentang flat design.

(Baca juga : Membuat Widget Social Media Button Flat Design di Blog)
Cara Membuat Gambar Flat Design Secara Otomatis

Apa itu flat design ?

Flat Design adalah desain dengan pendekatan minimalis yang menekankan kegunaan, dengan desain yang bersih tanpa ada bevel, bayangan, tekstur, berfokus pada tipografi, warna-warna cerah dan ilustrasi dua dimensi. Sedangkan yang pertama kali mengenalkan teknik flat design ini adalah perusahaan Microsoft.

Kalau masih bingung, dan masih bertanya-tanya apa itu flat design. Lebih baik kita langsung saja praktekan cara membuat gambar flat design secara otomatis. Berikut adalah langkah-langkahnya.

(Baca juga : Cara Membuat Tombol Share Bergaya Flat di Blogger)

Cara Membuat Gambar Flat Design Secara Otomatis

  1. Langkah pertama buka halaman Flat Icon Generator di browser kalian. Setelah tampil halaman utamanya, silahkan pilih UPLOAD AN ICON. Atau jika kalian ingin memilih gambar icon yang ada silahkan pilih PICK AN ICON. Disini saya akan memilih UPLOAD AN ICON.
    CARA MEMBUAT FLAT DESIGN SEDERHANA
  2. Setelah memilih UPLOAD AN ICON, sekarang kalian bisa memilih gambar yang akan kalian beri efek flat design. Saya menyarankan file dengan format PNG, karena dengan format PNG biasanya bisa membuat gambar menjadi lebih hidup. Atau kalian bisa mencari di google dengan mencari gambar berformat PNG. Sebagai contoh saya akan mengupload sebuah gambar berformat PNG berbentuk TU.
    10 Tips Terbaik dalam Membuat Gambar Desain Flat
  3. Setelah memilih gambar yang tepat sekarang kalian bisa mengubah Shape dari gambar tersebut atau bentuk background dari gambar yang kalian miliki. Di kolom Shape terdapat 2 pilihan yaitu, Circle untuk bentuk background Lingkaran, dan Square untuk bentuk background Kotak. Sebagai contoh, saya menggunakan bentuk background Square (kotak).
    Cara Membuat Gambar Ilustrasi Flat Design dengan Efek Long Shadow pada Illustrator
  4. Setelah memilih bentuk background, selanjutnya kita akan memilih warna pada background gambar. Di kolom Color silahkan pilih warna yang anda inginkan, disini saya hanya akan menggunakan warna defaultnya yaitu #1abc9c.
    Tutorial Cara Membuat Flat Design dan Long Shadow di Illustrator
  5. Setelah memilih warna background, sekarang kalian bisa mengatur Padding atau jarak gambar pada sisi background. Silahkan sesuaikan jaraknya sesuai keinginan kalian, sebagai contoh saya menggunakan Padding ini sekitar 25% saja.
    Cara Membuat Flat Design dengan Adobe Photoshop
  6. Setelah mengatur Iconnya, sekarang kita masuk ke Shadow. Di kolom Angle kalian bisa mengatur sudut pengambilan bayangan yang kalian inginkan. Disini saya hanya mengaturnya dengan ukuran defaultnya saja.
    Tutorial Cara Simple Membuat Photo Flat Design Menggunakan Picsart
  7. Setelah mengatur Anglenya, sekarang kalian kalian bisa mengatur Opacity. Opacity ini berfungsi untuk mengatur warna bayangan atau Shadow pada gambar yang kalian upload. Seperti sebelumnya saya juga akan mengaturnya dengan ukuran defaultnya saja.
    Cara Membuat Flat Design Dengan Coreldraw
  8. Kemudian di kolom yang terakhir ada Length, Length ini berguna untuk mengatur jarak bayangan atau Shadow. Sama seperti sebelumnya saya juga akan mengatur ukurannya secara default.
    Cara Membuat Flat Design Gadget dengan Photoshop
  9. Jika sudah selesai semua, silahkan klik tombol DOWNLOAD untuk mengambil gambar yang sudah kalian buat.
    Cara Membuat Long Shadow dengan CorelDraw
  10. Sekarang kalian bisa upload gambar tersebut di blog kalian sebagai gambar utama sebuah artikel.

Gimana? Mudahkan, sekarang blog kalian bisa sekeren blog saya. Untuk tutorial yang lainnya dari saya, tetaplah selalu kunjungi Tutorialumum.com.

Terimakasih sudah berkunjung diblog saya. Jika ada pertanyaan, kritik atau saran silahkan masukan di kolom komentar. Karena pertanyaan, serta kritik dan saran dari kalian akan membantu saya dalam membangun sebuah blog.

Postingan populer dari blog ini

Cara Mengganti Icon Favicon di Blogger

Pada tutorial kali ini saya akan membagikan tutorial tentang cara mengganti icon favicon yang ada di Blogger . Kita sering melihat icon favicon ini di atas address bar, biasanya pada saat awal pembuatan sebuah blog, kita akan mendapati tampilan default dari icon favicon tersebut. Baca juga :  2 Cara Termudah Mengganti Template Blog di Blogger Favicon sendiri berasal dari kata " Favorites Icon " yang berarti ikon favorit, tetapi jangan takut gambar yang kalian ingin masukan tidak sesuai, karena untuk mengupload icon ini, bisa menggunakan gambar format png ataupun gif . Favicon Icon ini bisa kalian buat sendiri menggunakan berbagai macam tools, asalkan ukuran tinggi dan lebar dari gambar tersebut sama. Kenapa sih kita harus mengganti Icon Favicon? Jawaban yang paling tepat adalah karena Icon ini melambangkan secara umum bagaimana karakter dari blog yang kita miliki, seperti dari warna, bentuk gambar ataupun bentuk teks. Lalu bagaimana cara membuat Favicon seperti blog Tutorial...

Inovasi Teknologi dan Seni Menuju Riau Berbudaya

Inovasi Teknologi dan Seni Menuju Riau Berbudaya - Riau adalah salah satu provinsi yang sedang giat dalam pembangunan jangka menengah, diantara salah satu misinya adalah meningkatkan pelayanan pendidikan. Peningkatan pelayanan pendidikan dilakukan karena peran para generasi muda dalam meningkatkan pembangunan sangatlah di butuhkan baik dari segi Inovasi Teknologi ataupun Seni, agar masyarakat Riau menjadi masyarakat yang berbudaya. Dimanakah peran generasi muda Riau dalam inovasi di bidang teknologi informasi? Peran Generasi Muda Riau Dalam Inovasi di Bidang Teknologi Informasi Program Riau Go.IT , adalah salah satu inovasi terbaru pemerintah dalam bidang teknologi informasi, sehingga memudahkan Pemerintah Provinsi Riau dalam meningkatkan pelayanan masyarakat, dan juga penyebarluasan informasi yang ada di Provinsi Riau. Sumber : http://humas.riau.go.id Program Riau Go.IT , adalah program Pemerintah Provinsi Riau pada saat ini, sehingga kemungkinan besar jika program ini sudah ter...

Cara Membuat Filter Gambar Dengan CSS

Filter gambar biasanya digunakan pada saat kita mengedit gambar. Biasanya juga kita hanya menggunakan aplikasi untuk memfilter gambar tersebut sehingga dapat berubah sesuai yang kita inginkan. Tetapi ternyata ada cara untuk memfilter gambar tersebut dengan menggunakan CSS , untuk itu pada tutorial kali ini saya akan memberikan tutorial tentang cara membuat filter gambar dengan CSS . (Baca juga :  Cara Membuat Gambar Flat Design Secara Otomatis ) Beberapa filter gambar yang bisa di gunakan antara lain. Filter Gambar yang Bisa di Gunakan dengan CSS 1. Blur Agan pasti sudah pernah mendengar istilah blur, efek blur pada gambar di gunakan untuk menyamarkan gambar. 2. Brightness Brightness di gunakan untuk membuat filter gambar menjadi lebih cerah, sehingga dapat disimpulkan filter ini di gunakan untuk mencerahkan gambar. 3. Contrast Kontras. Secara umum kontras diartikan sebagai perbedaan gradasi,kecerahan, atau nada (warna) antara bidang gelap (shadow) dengan bidang terang, atau warna...

Cara Mudah Membuat Banner Iklan Sederhana dengan Paint

Banner iklan adalah hal umum dalam sebuah blog . Dengan iklan yang muncul di sebuah blog, menandakan bahwa blog tersebut sudah terpercaya. Banner iklan ada berbagai ukuran tetapi yang paling umum adalah banner iklan sidebar dan header. (Baca juga : Cara Membuat Widget Artikel Terbaru Super Ringan di Blog ) Google AdSense adalah sebuah perusahaan yang paling terkenal untuk periklanan . Dengan bergabung menjadi publisher google adsense, hal ini memungkinkan untuk menampilkan iklan di halaman blog yang kita miliki. Lalu bagaimana cara membuat banner iklan sendiri? Sebetulnya caranya sangat mudah. Kita bisa membuat iklan kita sendiri dengan berbagai software ataupun aplikasi editor gambar yang ada. Untuk itu kali ini saya akan membagikan cara membuat banner iklan sederhana dengan software paint. Hanya dengan software Paint? Ya, software yang paling awam ini juga bisa di gunakan untuk membuat banner iklan. Kenapa memilih Paint? Paint adalah software yang pasti selalu ada di dalam se...

Cara Membuat Button Responsive 13 Gaya dengan CSS

Button atau tombol adalah sebuah tampilan atau bentuk untuk mengaktifkan sebuah perintah yang di jalankan oleh admin atau penggunanya. Umumnya button atau tombol ini hanya berupa 1 atau 2 buah saja dalam bentuk terpisah-terpisah. Kali ini saya akan membagikan cara membuat button responsive 13 gaya dengan css . Button responsive ini tidak memakan loading sebuah website atau blog, karena button ini hanya menggunakan css saja. (Baca juga : Cara Membuat Efek Tombol Keyboard di Blogger Dengan CSS ) Ada beberapa pilihan untuk memilih button yang kita inginkan, diantaranya : 6 warna Biru Orange Merah Hijau Ungu Putih 4 ukuran XS (Extra Small) SM (Small) MD (Medium) LG (Large) 2 pengaturan Block Buttons Outline(Accessibility) Untuk tampilan 13 gaya buttonnya silahkan lihat di https://bttn.surge.sh/ . Tampilan Gaya Button Slant, Unite, Float Tampilan Gaya Button Pill, Material - flat, Material - circle Tampilan Gaya Button Fill, Gradient, Jelly Tampilan Gaya Button Stretch, Minimal, Bordered...

Cara Membuat Widget Popular Post Dengan Rating Bintang

D i dalam sebuah blog terdapat berbagai macam widget , dari widget recent post , random post , dan popular post . Karena sebelumnya saya sudah sering memberikan cara membuat widget recent post dan random post dengan berbagai jenis style , untuk pertama kalinya saya akan membagikan cara membuat widget popular post dengan rating bintang . E fek bintang ini sebetulnya sebagai tanda rating, rating ini bukan di dapat dari pengunjung tetapi di dapat dari banyaknya jumlah view dari artikel tersebut. Efek bintang ini di buat dengan font awesome . (Baca juga : Cara Membuat Tombol Back To Top di Blog dengan Font Awesome ) Jika sobat sering memodifikasi blog sobat, maka sobat pasti sudah mengerti tentang font awsome ini. Dimana terdapat icon yang bisa di masukan dengan mudah, dan juga font awesome ini sangat di gemari bagi para web developer khususnya pada tampilan sebuah website. Untuk lebih jelasnya mengenai cara pemasangan widget popular post ini, ikuti langkah-langkah dari saya berikut ini....

Cara Membuat Judul Blog dengan Gambar Teks Keren

Pada tutorial kali ini saya akan membagikan tutorial tentang cara membuat judul blog dengan gambar teks keren . Kita sering melihat header judul sebuah blog menggunakan teks dengan bentuk font biasa seperti Arial , tetapi kita juga sering melihat judul blog berupa gambar , tetapi menggunakan font yang unik. (Baca juga :  Cara Membuat Slideshow di Blogger Keren ) Lalu bagaimana cara membuat judul blog dengan gambar teks keren? Kita sebenarnya juga bisa menggunakan aplikasi atau software editor gambar seperti Adobe Photoshop , Corel Draw , dan editor gambar lainnya. Namun jika kalian tidak memiliki skill membuat judul blog dengan gambar teks yang bagus, kalian bisa menggunakan cara dari saya. Nah, untuk cara membuat judul blog dengan gambar teks keren, silahkan kalian ikuti langkah-langkah dari saya berikut ini. (Baca juga :  Cara Membuat Efek Tombol Keyboard di Blogger Dengan CSS ) Cara Membuat Judul Blog dengan Gambar Teks Keren Karena di sini saya tidak bilang ingin menggunak...

Cara Mudah Membuat Widget Artikel Pilihan Di Blog

Widget adalah suatu komponen yang penting dalam sebuah blog. Widget di blog ada berbagai macam jenisnya, dari mulai bawaan blog ataupun kita sendiri yang membuatnya. Pada kesempatan kali ini, saya akan memberikan cara mudah membuat widget artikel pilihan . Widget artikel pilihan ini di gunakan untuk menampilkan list atau menu postingan di widget secara acak. Widget artikel pilihan ini adalah widget yang di rekomendasikan, bagi anda yang ingin mendaftar menjadi pusblisher Google AdSense . (Baca juga : Cara Memasang Lebih Dari 2 In-Feed Ads Google AdSense ) Tampilan widget artikel pilihan ini cukup simple, yaitu hanya berupa teks saja. Bagi anda yang ingin menampilkan widget ini dengan tampilan gambar thumbnail silahkan gunakan widget ini . (Baca juga : Cara Membuat Widget Random Posts dengan Thumbnails di Blogger ) Jika anda penasaran bagaimana bentuk atau tampilan dari widget artikel pilihan ini, di bawah ini saya tampilkan bentuk tampilan dari widget artikel pilihan tersebut. Langsun...