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

12

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.

2

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

3

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

4

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

5

20.Klik OK dan hasilnya akan seperti gambar

6

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 .

7

22.Klik OK dan hasilnya akan tampak seperti pada gambar

8

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

9

24. Klik OK dan Hasilnya

10

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 .

11

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

12

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

13

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

14

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.

15

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

16

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

17

42. Buat objek ketiga seperti gambar .

18

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

19

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

20

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

21

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

22

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

23

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

24

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

25

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.

26

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.

27

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.

28

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.

291

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

30

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.

31

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

32

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.

full

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
Hehehe…

About these ads
Categories: Tutorial | Tags: | 37 Comments

Post navigation

37 thoughts on “Cara Desain WEB

  1. nice tutorial.. kalau mau buat tampilan website teratur bgm ya?? trims

  2. Pingback: WEB DESAIN « meyla's Blog

  3. santi

    thanks….
    berguna banget…..

  4. opik

    kok bersambung???????

  5. sayamau mencoba mendesain blog do’ain ya………heheheheh

  6. met

    gut…mana lagi postingannya,,,tunggu nee,,,

  7. mantab

  8. berikutnya kapan sob ? he he he

  9. mas kalo desain web bayar berapa??

  10. infonya menarik banget…..
    salam kenal brow…. klo bisa lanjutin dong pengajarannya tentang design web page

  11. sippp!!!
    thanx infonya

  12. bob thanks y ,,,,,,,,, atas ilmu y

  13. makasi infonya gan, ntar ane cobain dulu kbtulan pas tutorialnya. tks n salam kenal

  14. sipppp….

  15. bagus, terima kasih atas ilmunya…
    sangan bermanfaat buat saya

  16. tolong dhonk bang kirim artikelnya buat saya belajar, bener ya bang kirim ya, makasih sebelumnya

  17. black

    Lanjutan tutorialnya man bro….

  18. black

    Lanjutan nya mana bro…

  19. thanks udah shring gan…

  20. keren desain nya . .
    saya mau coba ahh ..
    thanks atas informasi nya ..

  21. pujo

    thank’s…..siiip…. kalau ada lanjutan tutorial bisa kirim filenya dunk.

  22. terima kasih tutorialnya bagus.

  23. cipz thanks infony…..

  24. Eriska

    Kirimkan lanjutan.y ke email saya erizka.ungcliqq@gmail.com ..
    sekarang yha,,, buatt tugas sekolah…

  25. wah mantap bgt ni gan….. aku perlu belajar sama agan nih.

  26. kapan gan updetnya dah gak sabar.. jangan lupa mampir di http://www.purikarimun.wordpress.com

  27. thanks infonyaaaaa…berguna banget :)

  28. Pingback: Mendesain Web | Lisan Atiqi

  29. siip… gan, segera di praktekkan

  30. Bintang Wingkleburg

    ini lanjutannya mana?? ditunggu

  31. thank’s ya tutorialnya :)

  32. Renton

    wiih hebat …………….! tapi saya gak ngerti

  33. Reblogged this on ZHIEMBLOG.

  34. thx gann !!

  35. Ervin

    keren. thanks gan!

  36. ane lagi blajar corel nie gan,
    thanks tutronya lengkap banget :D

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com. The Adventure Journal Theme.

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: