Membuat Flat Design Website

Membuat Flat Design Website - 1

Posted by : Siti Jubaidah Senin, 01 September 2014

Disini saya akan memberikan langkah-langkah dalam pembuatan flat design website. Contoh flat design yang ingin dibuat adalah seperti gambar berikut ini :

hasil akhir

Untuk membuat flat design website, terlebih dahulu mempersiapkan software-software yang dibutuhkan, seperti photoshop sebagai software design nya dan dreamweaver sebagai software utama untuk membuat web.

Ikutilah langkah-langkah berikut :

1. Instal software photoshop dan dreamweaver

2. Buka photoshop dan buat file baru

Klik file – new – atau – tekan ctrl + N secara bersamaan, sehingga muncul gambar seperti dibawah ini :

0.1

3. Atur Name : flat design website, preset : custom, width : 1000px, height : 600px, resolution : 300px, color mode : rgb color 8 bit, background contents : white. Kemudian klik OK

4. Akan muncul layar putih seperti :

0.2

5. Untuk membuat berbagai bentuk desain, harus menambah layer setiap kali ingin memasukkan content ataupun warna. Klik create a new layer pada bagian bawah kotak layer.

0.3

6. Setelah muncul layer 1 pada bagian yang berwarna biru diatas, ganti namanya menjadi header dengan cara klik tulisan layer1 sebanyak 2x, setelah diganti nama kemudian enter.

0.4

7. Pastikan layer header masih aktif, kemudian pilih tools Rectangular Marquee Tool pada toolbox.

0.5

8. Setelah dipilih, kemudian tarik memanjang pada kanvas

0.6

9. Beri warna dengan mengatur warna terlebih dahulu pada set foreground color

0.7

10. Pilih warna yang diinginkan, kemudian klik OK

0.8

11. Setelah warna diatur, pilih paint bucket tool

0.9

12. Tempelkan pada bagian yang diseleksi.

1.0

13. Kemudian tambah lagi layer dengan cara yang sama seperti gambar 0.3, ganti namanya menjadi footer, content.

1.1

14. Aktifkan layer content, lalu buat seleksi dan beri warna yang diinginkan

1.2

15. Lalu aktifkan layer footer, dan buat seleksi seperti sebelumnya

1.3

16. Lalu mulailah untuk membuat berbagai tulisan seperti bagian logo, menu, isi, dll. Caranya kilk tool horizontal type tool

1.4

17. Kemudian ketikkan pada bagian header atas dan atur type font, ukuran teks pada toolbar.

1.5

18. Buat lagi teks pada bagian menu dan atur ukuran font

1.6

19. Beri teks juga sebagai isi content

1.7

20. Untuk memberi bentuk-bentuk pada design, klik custom shape tool

1.8

21. Kemudian pada bagian toolbar pilih bagian shape dan akan muncul berbagai gambar, pilih bentuk circle

1.9

22. Setelah dipilih maka tarik pada bagian yang diinginkan, seperti :

2.0

23. Pada bagian layer secara otomatis terbuat layer shape1, dan untuk memperbanyak maka haruslah diduplikat dengan cara klik kanan pada layer shape1 – pilih duplicate layer

2.1

24. Setelah itu akan muncul kotak duplicate, klik OK

2.2

25. Kemudian klik ctrl + t, lalu geser ke kanan

2.3

26. Duplicate lagi pada layer dengan cara yang sama sehingga menghasilkan 3 bentuk bundaran

2.4

27. Ganti warna dengan cara mengklik 2x pada kotak yang berwarna

2.5

28. Setelah muncul kotak warna, pilihlah warna yang diinginkan, lalu klik OK

2.6

29. Lakukan juga perubahan warna untuk bundaran yang kedua

2.7

30. Buatkan teks lagi pada bagian bawah menu bundar, tulis sesuai keinginan

2.8

31. Kamu juga bisa menambahkan foto untuk menunjukkan profil mu. Masukkan foto dengan cara tekan ctrl + o, lalu cari foto yang diinginkan, setelah itu akan muncul seperti ini :

2.9

32. Untuk memberikan potongan berbentuk lingkaran, aktifkan tool elliptical marquee tool

3.0

33. Seleksi bagian yang ingin diambil pada foto, jangan lupa menekan shift agar lingkaran rapi

3.1

34. Lalu aktifkan kembali move tool

3.2

35. Tarik bagian yang diseleksi ke kanvas flat design website

3.3

36. Untuk mengecilkan gambar, tekan ctrl + t lalu tarik gambar ke bawah

3.4

37. Ketika titik ujung gambar sudah terlihat, sambil menekan tombol shift tarik titik kebawah

3.5

38. Tarik lagi gambar keatas dengan mengklik bagian foto

3.6

39. Lalu tarik lagi titik ujung gambar kebawah sambil mengklik shift

3.7

40. Saat ukuran sudah pas, arahkan ke tempatnya

3.8

41. Beri teks untuk menu bundar, my resume ; my work ; my skill

3.9

42. Terakhir untuk membuat bagian footer, masukkan beberapa informasi kontak diri seperti telpon, email dan jejaring social. Dan untuk mencari ikon yang diperlukan dapat ditemukan di shape, seperti mencari bentuk bundaran tadi.

4.0

43. Pilih ikon yang berbentuk telepon, amplop, tanda tambah, dan copyright.

4.1

(note : pada gambar diatas saya salah memasukkan icon, seharusnya adalah icon copyright berlambang C bukan R)

44. Atur letaknya ikon dan beri keterangan tambahan dengan teks

4.2

45. Masukkan gambar ikon facebook dan twitter, kemudian tarik kedalam kanvas

4.3

46. Atur ukurannya dan tata letak ikon

4.4

47. Setelah dirasa sudah cukup rapi peletakannya, saatnya disimpan dengan klik file – save setelah tampil kotak penyimpanan, buat folder baru dengan mengklik tool dokumen berbintang dan akan muncul folder baru. Namai folder dengan nama ekskul 1 kemudian klik open

4.5

48. Kemudian klik save, dan lihat di direktori tempat anda menyimpan, sudah terbuat secara otomatis folder ekskul 1 dan didalamnya ada file berbentuk .psd