Sunday, April 5, 2015

Tutorial Cara Membuat Flat Design dan Long Shadow di Illustrator

1:54:00 AM

Desain Flat | adalah suatu Desain tren saat ini yang banyak bermunculan di Internet sebagai pendukung tampilan seperti logo produk, aplikasi, bahkan tampilan desain Web. Sedangkan Long Shadow adalah bayangan halus yang dipadukan kedalam desain flat agar tidak terkesan kaku sama sekali. Namun perlu diketahui bahwa tidak semua jenis Desain Flat yang dipadukan dengan Long Shadow.
Dengan kata lain mungkin desain flat ini telah sering kamu jumpai, atau sekedar pengingat mari kita melihat tampilan OS dari Microsoft Windows 8.

Kita bisa melihat segi tampilan desain Windows 8 ini yang biasa disebut (Metro), betapa simpelnya Desain seperti ini, namun tetap enak dan ringan dipandang mata..

Bahkan sering juga kita melihat dari yang mendominasi seperti smartphone, yaitu menggunakan Logo logo Aplikasi yang terkesan flat namun cukup menarik



Seperti contoh lain
 

Nah, sekarang sobat sobat sudah tahu kan, bentuk /konsep desain Flat dan Long Shadow seperti apa?

Namun Blog ingin memberi sedikit cara bagaimana membuat sebuah logo sederhana dengan Flat Desain dan Long Shadow menggunakan Illustrator. (Namun bukan berarti selain Illustrator tidak bisa melainkan Aplikasi yang lain Seperti (corelDraw, Inkscape, bahkan Photoshop) juga bisa namun caranya berbeda. Baik, mari di simak.


STEP 1 : Membuat Kotak Persegi
Buka Illustrator  dan buat file baru dengan berukuran (800x800 pt)


Buat Objek dengan menggunakan Rectangle Tool (M), Buat Persegi pada layer dengan sambil menekan Sift + Alt (agar Proporsi ukuran sama)


STEP 2 : Ubah Persegi jadi Shape  Rounded
Klik Persegi tadi kemudian Klik "Effect" pada panel atas, lalu cari "Convert to Shapes", dan klik "Rounded Rectangle".

Maka akan muncul kotak "Shape Option" , centang "Preview" lalu aturlah "Corner radius" menjadi 80 (80 dikarenakan persentase layer 800x 800). Sehingga bisa saja kamu berbeda, tinggal disesuaikan.


Namun karena garis Bingkainya belum mengikuti lekukan alias masih kotak, maka harus diubah ;
Klik "Objek" lalu "Expand Appearance".

kemudian lihat hasilnya garis telah mengikuti lekukan "shape" yang telah di rounded


STEP 3 : Ubah Warna
Selanjutnya Ubahlah Rectangle "Shape" tersebut dengan memberi Fill Warna Cerah.
 (Strokenya di silang/putih).


STEP 4 : Cangkir pada Shape 
Selanjutnya Klik Objek Tool , pilih Ellipse kemudian tempatkan tepat di tengah objek sebelumnya (Shape Biru).
Setelah itu Beri (Fill)  Warna Gelap pada Ellipse, dan (Stroke) Putih, dan aturlah stroke Elipse tersebut dengan ketebalan kira kira 30, untuk lebih jelasnya lihat gambar dibawah ini

(Klik untuk memperbesar)

beri sedikit polesan sebagai tanda tangkai cangkir nantinya;
dengan menggunakan Pentool, Lalu tarik dari garis Stroke Putih Ellipse


Sampai tahap ini logo yang kita buat sudah tergolong Flat Desain, Namun Sesuai Judul yaitu kita masih harus membuat Long Shadow.


STEP 5 : Membuat Long Shadow
 Gunakan Pen Tool Untuk membuat suatu bayangan cangkir tersebut, buat titik anchor hingga membentuk seperti bayangan ke sudut pojok kanan, lebih jelas lihat gambar dbawah ;


Setelah itu kembali klik bayangan tadi, ambil warna dari shape biru menggunakan Eye Dropper pada tool box 

 1. klik Eye Dropper Klik Shape Biru, sehingga warna  warna bayangan pun menjadi sama dengan shape pertama.

2. setelah itu klik ikon Fill Warna, lalu Ganti Warna Menjadi sedikit lebih gelap daripada Shape pertama. Lihat gambar dibawah

STEP 6 : Menyatukan bayangan dengan shape.
Kita harus membuat bayangan berada dibawah posisi cangkir tersebut dengan cara ;
Klik kanan pada Shadow  - lalu pilih "Arrange" - kemudian "Send Backward".


Selanjutnya posisi bayangan sudah berada dibelakang cangkir seperti dibawah

Selanjutnya klik Shape biru terang (Kotak), lalu copy dengan cara Ctrl + C, Duplicate       Ctrl + f. Sehingga di layer Shape (Persegi menjadi 2)



Klik Shape Biru dan Shadow bersamaan (pakai SIFT) Kemudian cari "Pathfinder" atau bisa dengan CTRL + SIFT + F9 - Tekan Intersect.

Lihat Gbr ini (klik Perbesar)
Maka Jadilah Hasil Sederhananya seperti ini


Nah, Demikian seperti inilah cara membuat Logo sederhana bertema "Flat Design dan Long Shadow",mungkin jika masih ada yang kurang jelas boleh meninggalkan pesan di kotak komentar,
Jangan lupa klik tombol Like Facebook dibawah ini, atau bagikan ke sobat sobat lain, jika perlu.

Baca Juga Tutorial Desain Lainnya : DISINI


Semoga bermanfaat dan dapat menambah refrensi Ilmu kamu, 
Sekian dan terima kasih telah berkunjung,
Salam.

Ditulis oleh

Flamingo Solution | Media Informasi Seputar Teknologi dan Seni Visual

21 komentar:

  1. mantap tutorialnya :D , ditunggu tutorial lainnya ..

    ReplyDelete
  2. Ini dia yang saya cari. Thanks ya gan tutorialnya..

    ReplyDelete
  3. Tutorialnya jelas dan mudah dipraktekkan. Terimakasih flamingsolution.com sudah berbagi. Bermanfaat abiz! :D

    ReplyDelete
  4. masih awam sama begituan :v agak ribet kyaknya

    ReplyDelete
    Replies
    1. Dicoba aja mas. hehe
      g ada salahnya kan.

      Salam

      Delete
    2. Silahkan dicoba aja .

      Good luck

      Delete
  5. bro tolong dikasi tau ini untuk CS berapa, kan jadi bbingunng
    klo di cs6 ga working dan ribet penjelasan lu

    ReplyDelete
    Replies
    1. CS 6 Mas. :)
      Soal ribetnya mungkin bisa dijelaskan lebih detail lagi , langkah mana yang mas rasa terlalu rumit.?

      Salam

      Delete
    2. saya ikuti tutorial ini pake CS 6, dan berhasil, gak rumit :)

      Delete
  6. ternyata gampang jugaa hihi
    Terimakasih :)

    ReplyDelete
  7. Mantab tutor flat design nya
    Makasih bro

    ReplyDelete
  8. hnice tutorials. it help me from design. thanks

    ReplyDelete
  9. mantap gan, tertarik bgt ;) Oia utk tutor photoshop engga disedia in yaa?

    ReplyDelete
  10. setelah search di google cara buat gambar kek gini, baru nemu.. ternyata namanya "flat desain".. wkwkkwkw...pantesan keliling2 gk dapet2..

    makasih bnyak..om

    ReplyDelete
  11. keren yuhu :) kunjungi juga yahh http://koclakdesign.blogspot.co.id/2016/10/tutorial-membuat-flat-shadow-di-corel.html

    ReplyDelete
  12. keren dan sangat bermanfaat.
    Makasih banyak gan

    ReplyDelete

Mari Saling Berbagi, Membangun dengan memberi kritik, saran jika ada yang kurang jelas, dan tentunya Komentar yang tidak mengandung hal NEGATIF, SARA, BERBAU PORNO GRAFI.
Salam BLOGGER

 

© 2013-2019 Flamingo Solution. All rights resevered. Designed by Templateism

Back To Top