15 April 2017

Cara Membuat Gambar Flat Design Ala Tutorial Umum Blog

Cara Membuat Gambar Flat Design Ala Tutorial Umum Blog - 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.
Cara Membuat Gambar Flat Design Ala Tutorial Umum Blog

Sehingga saya juga menggunakan flat design ini sebagai gambar utama dalam sebuah artikel. Sebelum memulai membuat, ada baiknya saya menjelaskan sedikit tentang flat design.
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.

(Baca juga : 3 Langkah Mudah Download Video Youtube Tanpa Plugin)


Kalau masih bingung, dan masih bertanya-tanya apa itu flat design. Lebih baik kita langsung saja praktekan cara membuat gambar flat design ala Tutorial Umum Blog. Berikut adalah langkah-langkahnya :


Cara Membuat Gambar Flat Design Ala Tutorial Umum Blog

1. Langkah pertama buka halaman https://flat-icon.surge.sh/ 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 Gambar Flat Design Ala Tutorial Umum Blog
Cara Membuat Gambar Flat Design Ala Tutorial Umum Blog - Tutorial Umum


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.
Cara Membuat Gambar Flat Design Ala Tutorial Umum Blog
Cara Membuat Gambar Flat Design Ala Tutorial Umum Blog - Tutorial Umum


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 Flat Design Ala Tutorial Umum Blog
Cara Membuat Gambar Flat Design Ala Tutorial Umum Blog - Tutorial Umum


(Baca juga : Cara Membuat Share Button Melayang Dengan Sumo Me)

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.
Cara Membuat Gambar Flat Design Ala Tutorial Umum Blog
Cara Membuat Gambar Flat Design Ala Tutorial Umum Blog - Tutorial Umum


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 Gambar Flat Design Ala Tutorial Umum Blog
Cara Membuat Gambar Flat Design Ala Tutorial Umum Blog - Tutorial Umum


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.
Cara Membuat Gambar Flat Design Ala Tutorial Umum Blog
Cara Membuat Gambar Flat Design Ala Tutorial Umum Blog - Tutorial Umum


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 Gambar Flat Design Ala Tutorial Umum Blog
Cara Membuat Gambar Flat Design Ala Tutorial Umum Blog - Tutorial Umum


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 Gambar Flat Design Ala Tutorial Umum Blog
Cara Membuat Gambar Flat Design Ala Tutorial Umum Blog - Tutorial Umum


9. Jika sudah selesai semua, silahkan klik tombol DOWNLOAD untuk mengambil gambar yang sudah kalian buat.
Cara Membuat Gambar Flat Design Ala Tutorial Umum Blog
Cara Membuat Gambar Flat Design Ala Tutorial Umum Blog - Tutorial Umum


(Baca juga : Cara Membuat Button Responsive 13 Gaya dengan CSS)

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.

26 comments

nice artikel ijin coba ya makasih

wah keren blognya mas
itu sesuai langkah di artikle ini?

Jadi gk perlu pakai aplikasi ya,ijin nyoba gan

bisa dicoba nih, keren dah kalau pake flat gitu :D

saya pakai di next artikel (matur thank you)

Untuk gambar flat yang didownload itu dapat dari mana ya?

dapat darimana?
maksud anda?

mantab kang tutorualnya.. nyimak aj gan, cocok buat logo :D

wah... bermanfaat sekali.. seperti saya yang jurusan multimedia..😁😁👍👍

Nice artikel gan, Baru tau ada program yang bisa bikin Flat Design selain Photoshop dan Corel draw :D

ijin coba buat ya gan thanks infonya...

Thanks gan tutorialnya

Yey akhirnya tau juga namanya, kirain "Motion Graphic" ternyata "Flat Design" , nice info gan :D

Nyoba sambil belajar gan...

Bisa dicoba nih kayaknya..

Sip. Saya sedang butuh ini, masbro. Tengs, sangat bermanfaat bagi saya.

Wah begitu caranya yah boleh di coba nih biar ikutan flat hhe

pas tutorialnya
buat loggo / pavicon bisa?

akhirnya ketemu juga tutorialnya, bisa buat flat design lagi deh. thanks gan

sama-sama

terima kasih sudah berkunjung

Tinggalkan Komentar anda...
Karena itu sangat membantu saya dalam membangun sebuah blog.

Perhatian, dilarang membuat Link aktif di dalam komentar.
EmoticonEmoticon