Cara Membuat Flat Design dengan Photoshop

Cara Membuat Flat Design dengan Photoshop -  kalian sudah tahu apa itu Flat Design? Flat Design adalah sebuah tren desain antarmuka dalam web design dan UI (User Interface) di tahun ini. Seperti yang kita semua tahu, di jaman sekarang kehidupan tak pernah lepas dari perangkat mobile. Kebanyakan orang sekarang sudah menggunakan perangkat mobile seperti handphone, smartphone, tablet PC, dan lainnya. dan mayoritas perangkat tersebut kini sudah menggunakan antarmuka layar sentuh alias touchscreen. Maka, untuk memudahkan penggunaan aplikasi atau website di perangkat mobile, diperlukan sebuah desain antarmuka yang minimalis dan touch-friendly, lalu lahirlah Flat Design ini.
Dalam postingan kali ini Saya akan mengajarkan cara membuat sebuah teks dengan model Flat Design ini, yang perlu kita catat disini adalah bahwa Flat Design menggunakan pallete warna pastel alias warna yang tidak mencolok, kemudian ciri khas lain Flat Design yaitu menggunakan bayangan panjang untuk memperjelas kesan flat-nya. Oke, tanpa basa-basi lagi langsung saja kita cabut ke TKP! 
 

Catatan: Disini Saya menggunakan Adobe Photoshop CC, untuk kalian yang masih menggunakan versi CS4 sampai CS6 Mang Tekno rasa tidak ada perbedaan.

Membuat Flat Design Text

1. Buka Photoshop lalu buat dokumen baru, Saya contohkan disini buat dengan ukuran 300x300 pixel kemudian berikan warna background "#34495e". Untuk pilihan pallete warna pastel lainnya bisa kalian lihat di FlatUIColors.com.

2. Kemudian buat teks bebas menggunakan "Text Tool".

3. Dengan menggunakan "Pen Tool" sobat buat titik-titik penanda di setiap ujung teks, buat sebuah titik di tengah-tengah celah antara teks dan juga sebuah garis miring panjang diakhir teks seperti yang Saya contohkan berikut. Klik gambar jika kurang jelas.

4. Hasil miring-miring tidak jelas?? Pilih "Direct Selection Tool", dengan tool ini kalian bisa memperbaiki letak dan kemiringan titik yang salah tadi.

5. Masih menggunakan "Direct Selection Tool", tekan aja "Shift + klik kiri" pada titik yang berada di tengah celah antara teks. Setelah itu tarik atau drag titik tersebut sehingga menghasilkan garis miring sebagai bayangan dari huruf tersebut nanti. Lihat contoh gambar berikut.

6. Setelah rapih hasilnya akan jadi seperti ini.

7. Kemudian buat layer baru di atas "Background" atau "Layer 0".

8. Jika sudah, tekan "Ctrl + X" kemudian "Ctrl + V". Lalu dengan "Paint Bucket Tool" di isi layer tersebut dengan warna hitam.

9. Jika benar maka kalian akan melihat hasil seperti gambar di atas.
10. Ubah level "Fill" layer tersebut menjadi "0%" sehingga bayangan hitam tersebut tidak lagi terlihat.

11. Buat efek gradasi bayangan dengan cara klik menu "Layer > Layer Style > Gradient Overlay".
12. Atur Opacity menjadi sekitar "15-50%" dan Angle "-45°" seperti gambar di bawah ini.

13. Klik "OK" lalu lihat hasilnya, dan... Taraaa! Flat Designnya udah matang. Selamat menikmati! ;)

Demikian Tutorial Membuat Flat Design dengan Photoshop.
Semoga Bermanfa'at :) Follow: https://twitter.com/IamNoval