Cara Desain WEB

Pembahasan ini akan mempelajari cara mendesain tampilan sebuah web. Tampilan web akan dikerjakan menggunakan Corel Draw X3 dan selanjutnya diekspor ke dalam Adobe Photoshop CS2.

Proses Corel Draw X3

1.Jalankan Program Corel Draw X3
2.Buat Lembar kerja baru, klik Ctrl+N

3.Atur setting lembar kerja seperti tampak pada gambar

4.Langkah pertama kita akan membuat tampilan logo fadzlicious.
5.Aktifkan Ellipse Tool atau tekan F7
6.Buat beberapa objek lingkaran dan atur posisinya seperti tampak pada gambar. Tekan ctrl pada saat membuat lingkaran.

7.Berikutnya adalah memberikan warna pada masing-masing lingkaran.
8.Pilih objek lingkaran 1.
9.Aktifkan fill tool – Fountain fill dialog atau tekan F11.
10.Kemudian akan tampak kotak dialog Fountain Fill dan atur beberapa parameter seperti tampak pada gambar

11.Ubah pilihan type menjadi Radial . Pilihan ini untuk mengatur tipe gradasi .
12.Atur center offset gradasi
13.Atur kombinasi warna pada group Color Blend. Dalam contoh kita menggunakan Two Color dengan kombinasi warna hitam dan putih.
14.Akhiri dengan OK dan hasil akan tampak seperti gambar

15.Selanjutnya pilih objek lingkaran 2.
16.Berikan warna gradasi pada objek lingkaran 2 dan atur parameter yang diinginkan.
17.Ubah pilihan Type menjadi Linear.
18.Ubah nilai Angels menjadi 38,0 pada group Option.
19.Pilih Custom dalam group Color Blend. Atur kombinasi warna yang diinginkan. Untuk lebih jelas lihat gambar

20.Klik OK dan hasilnya akan seperti gambar

21.Pilih lingkaran 3. Berikan gradasi pada lingkaran 3 dengan warna gradasi pada lingkaran 3 dengan warna yang sama dengan lingkaran 2. Hanya saja pada objek lingkaran 3, nilai angle diubah menjadi -138,0. Lihat gambar .

22.Klik OK dan hasilnya akan tampak seperti pada gambar

23. Pilih objek lingkaran 4 . Berikan warna gradasi kombinasi merah dan hitam dengan tipe gradasi Radial. Lihat gambar

24. Klik OK dan Hasilnya

25. Dari objek yang terbentuk , kita akan menghilangkan garis outline pada masing- masing objek.
26. Pilih objek dan klik kanan pada tombol no color dalam palet color.Hasil Lihat gambar .

27. Pilih semua objek lingkaran dan tekan Ctrl + G untuk mengelompokkan objek terpilih menjadi satu group.

28. Buat Duplikat dari objek logo dengan menekan Ctrl + D

29. Atur ukuran dan Posisi masing-masing objek seperti tampak pada gambar

30. Logo sudah selesai dikerjakan. Untuk sementara, sisihkan dulu objek logo keluar area lembar kerja.
31. Langkah berikutnya membuat tampilan web.
32. Aktifkan beberapa pilihan pada menu view seperti tampak pada gambar

33. Aktifkan pilihan Rulers, Guidelines, Snap to Guidelines, Snap to Objects dan Dynamic Guides.

34. Tambahkan guideline pada masing-masing sisi lembar kerja. Klik pada ruler horizontal atau vertical dan drag ke sisi lembar kerja untuk membuat guideline.

35. Sekarang buatlah objek yang pertama.

36. Gunakan Polyline tool dan gunakan guidline sebagai garis panduan untuk membuat objek. Dengan mengaktifkan pilihan snap to guidelines maka node dari objek yang dibentuk akan secara otomatis menempel pada guideline yang digunakan sebagai garis Bantu. Lihat Gambar

37. Usahakan sisi kiri dan kanan objek menempel pada guideline kiri dan kanan pada lembar kerja.

38. Dalam contoh ketebalan garis dibuat 1 pt agar mempermudah anda mengenali contoh objek yang dibuat.

39. Berikan warna pada objek yang sudah dibuat. Dalam contoh ini digunakan warna abu-abu (10% black) untuk warna dasar menghilangkan warna garis outline. Lihat gambar.

40. Masih dengan Polyline tool, buat objek berikutnya. Lihat gambar

41. Berikan warna pada objek kedua. Dalam contoh digunakan warna Deep yellow dan menghilangkan garis outline. Lihat gambar

42. Buat objek ketiga seperti gambar .

43. Beri warna pada objek ketiga dan hilangkan garis outline. Di sini digunakan warna Brick Red . Lihat gambar.

44. Pastikan objek ketiga masih dalam kondisi terpilih. Tekan Shift + PageDown untuk meletakkan objek terpilih di posisi paling belakang. Lihat Gambar.

45. Selanjutnya buat objek kotak dengan Rectangle Tool. Lihat gambar.

46. Beri warna dan hilangkan outline. Di sini digunakan warna abu-abu (30% Black). Lihat gambar

47. Tekan Shift + PageDown untuk meletakkan objek kotak ke posisi paling bawah. Lihat gambar.

48. Buat objek selanjutnya menggunakan Polyline Tool. Lihat gambar.

49. Beri warna putih pada objek Polyline dan hilangkan garis Outline. Lihat gambar.

50. Pastikan objek Polyline masih terpilih.

51. Tekan Ctrl + C kemudian paste untuk copy objek

52. Geser Polyline sedikit ke atas, Beri warna Orange pada Polyline hasil duplikat. Lihat Gambar.

53. Selesai sudah tampilan web bagian header

54.Gunakan Rectangular Tool untuk membuat tampilan web bagian footer.

55. Buat beberapa objek kotak di sisi bawah lembar kerja. Lihat gambar.

56. Pilih semua kotak dibagian footer.

57. Klik tombol Weld untuk menggabung menjadi satu.

59. Beri warna abu-abu (10% Black) pada objek footer dan hilangkan garis outline. Lihat gambar.

60. Kemudian masukkan objek logo yang telah anda buat tadi ke bagian header dan tambahkan dengan tulisan fadzlicious.com disebelah kanan logo. Beri kombinasi warna hitam dan putih. Di sini digunakan font Arial Siza 10 pt. Gunakan Text Tool untuk membuat teks. Lihat Gambar.

61. Berikutnya tambahkan beberapa teks untuk menu. Jenis Font = Arial, Sizae = 4 pt, warna = putih. Lihat gambar.

62. Berikan pembatas antarteks menu. Gunakan Polyline Tool untuk membentuk garis batas teks antarmenu. Berikan warna putih untuk objek garis dengan ketebalan garis = Hairline. Lihat gambar.

63. Untuk variasi, tambahkan beberapa pernik seperti object polygon. Gunakan Polygon Tool dengan bentuk 5 sisi. Lihat gambar.

64. Transparansi Polygon juga dapat diatur secara bervariasi.

65. Klik Menu Effects – Pilih Lens.

66. Pilih Beberapa objek Polygon, di dalam panel Lens pilih Transparency dengan nilai Rate = 40%, Color = Putih.

67. Terakhir tambahkan warna latar belakang.

68. Untuk warna latar belakang, kita menggunakan objek kotak. Ukuran objek kotak dibuat sebesar ukuran lembar kerja yaitu 760 x 600 pixel.

69. Beri warna pada objek kotak dengan warna yang diinginkan dan hilangkan garis outline. Dalam contoh digunakan warna putih untuk latar belakang.

70. Kemudian tekan Shift + PageDown sehingga objek kotak diletakkan di posisi paling belakang.

71. Desain tampilan web sudah selesai. Anda dapat menambahkan beberapa variasi lainnya dalam bentuk teks atau objek. Secara keseluruhan hasilnya tampak pada gambar.

72. Setelah selesai membuat tampilan web, langkah selanjutnya adalah mengekspor hasilnya ke dalam Adobe Photoshop CS2.

73. Simpan terlebih Dahulu hasil kerja anda dengan nama DESAIN WEB.cdr.

Tunggu Postingan saya berikutnya :p
Hehe..