Expression Of My Love

24 January 2010

Tips Menggunakan htaccess Pada Apache Web Server

Filed under: Web/Blog Design — Rudi Hidayat @ 12:27 am

Security / Keamanan Web merupakan bagian yang sangat penting dalam pengelolaan web. Tanpa penerapan security yang bagus, web kita akan mudah dirusak / dibobol oleh orang lain. Menerapkan security pada web salah satunya dapat menambahkan beberapa kode kedalam file htaccess.

Berikut beberapa tips security yang dapat kita gunakan dengan file htaccess:
(more…)

24 November 2009

Setting Domain di co.cc

Filed under: Web/Blog Design — Rudi Hidayat @ 3:44 pm

Seperti yang sudah kita ketahui, bahwa co.cc adalah top level domain yang bisa kita dapatkan secara gratis. Kita bisa mengganti nama blog kita dari “http://namadomain.blogspot.com” atau “http”//namadomain.wordpress.com” (dll) menjadi “http://namadomain.co.cc” . Dengan co.cc kita bisa mengontrol DNS Records, A, MX, dan CNAME records, sehinga domain co.cc bukan hanya sekedar “URL Forwarding”.
Berikut ini akan saya coba mengungkapkan tentang cara setting domain di co.cc:

Ada 3 tipe pengaturan di co.cc. Ketiganya memiliki fungsi tersendiri. berikut ini penjelasanya:

1. Managed DNS
Ini biasanya digunakan untuk sebuah web yang memerlukan web hosting dan mengharuskan untuk mengarahkan Name Server-nya ke hosting tersebut. Misal untuk membuat web di 000webhost, atau bisa juga untuk blog wordpress yg menggunakan hosting dari luar. Metode ini tidak cocok digunakan untuk blogger/blogspot yang menggunakan hosting default dari blogger/blogspot.
Cara setting untuk metode ini yaitu dengan mengisi pada kolom “Name Server 1 dan Name Server 2 dengan name server yg sesuai dengan hosting yang digunakan. Misal, bagi yang menggunakan hosting dari 000webhost maka untuk kolom “Name Server 1″ disi dengan “ns01.000webhost.com” dan kolom “Name Server 2″ disi dengan “ns02.000webhost.com”. Kemudian klik tombol “Setup”. Selesai

2. Zone Records
Zone records cocok digunakan bagi para pengguna blogger/blogspot. berikut ini cara setting untuk Zone Records

  • Pada kolom “Host” isikan dengan nama domain yg sudah km daftarkan, misal “www.namadomain.co.cc” (jangan lupa dikasih “www”)
  • Untuk option “TTL” biarkan saja, gak perlu dirubah2
  • Pada option “Type” pilih yang “CNAME”
  • Untuk kolom “Value” isikan “ghs.google.com”
  • Sehingga akan seperti pada gamabr dibawah ini:

Langkah selanjutnya yaitu merubah settingan di blogger/blogspot caranya begini:

  • Login ke blogger/blogspot kemudian masuk ke menu “Setting–>Publishing”
  • Kemudian pilih “Switch to: • Custom Domain
  • Setelah itu klik pada “Already own a domain? Switch to advanced settings
  • Kemudian isikan nama domain kamu yang baru pada kolom “Your Domain”.
  • Selanjutnya klik tombol “Save Setting”

Selesai. Kalau berhasil (Settingnya sudah benar) maka domain kamu yang baru akan aktif dalam waktu antara beberapa jam sampai 2 hari. Jadi sabar aja menunggunya. Blog kamu akan tetap bisa diakses dengan melalui domain yang lama.

3. URL Forwarding
URL forwarding bisa digunakan untuk apa aja, bisa web ato blog. Tapi URL Forwarding ini hanya memforward domain yg baru (yang di co.cc) ke domain lama. Jadi domain lama akan 100% seperti semula tanpa ada perubahan apapun, cuma kita bisa mengakses web/blog kita dengan mengetikkan nama domain baru kita di browser. Jika menggunakan URL Forwarding maka yang terindex di google atau Search engine yang lain adalah tetap Domain kita yang lama.
Untuk setting URL Forwarding sangat mudah, kita hanya mengisikan data-data yang diminta dan disesuaikan dengan web/blog kita, seperti “Redirect to:, Page Title, URL Hiding, Meta Description dan Meta Keywords”. Kita tidak perlu lagi mensetting domain di web/blog kita lagi.
Note: Metode ini tidak dianjurkan jika tidak terpaksa

6 November 2009

Blogumus, label cloud animasi untuk blogger

Filed under: Web/Blog Design — Rudi Hidayat @ 6:42 pm

Blogumus adalah widget yang berfungsi untuk menampilkan kategori/label blog dalam bentuk animasi. Widget ini diadopsi dari WP-Cumulus, sebuah plugin yang dibuat untuk blog-blog yang berbasis WordPress tetapi dimodifikasi hingga akhirnya bisa ditampilkan di Blogger. Sebelum membuatnya pastikan widget label anda sudah terpasang di sidebar, disini saya mengganti nama label tersebut menjadi “Kategori”.
(more…)

Cara Membuat Read More di Blogger

Filed under: Web/Blog Design — Rudi Hidayat @ 6:04 pm

Sudah banyak yg tanya cara buat READ MORE atau Baca Selengkapnya atau Baca Selanjutnya di Blogger . Ada dua cara untuk membuat read more di blogger / blogspot baru (tanda Blogger Baru adalah di admin memakai layout / tata letak dan page element / elemen halaman).

Cara Pertama:

1. Buka template -> Edit HTML -> Kasih tanda tik pada menu “expand widget tempate”
2. Letakkan kode berikut persis di atasnya kode </head>
<style>
<b:if cond=’data:blog.pageType == “item”‘>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

3. Letakkan kode berikut di bawah kode
<p><data:post.body/></p>

<b:if cond=’data:blog.pageType != “item”‘>
<a expr:href=’data:post.url’> Read More..</a>
</b:if>

4. Klik Simpan. Selesai.

5. Klik SETTINGS atau Pengaturan, terus klik FORMATTING atau Format. Di paling bawah ada kotak kosong di samping menu TEMPLATE POSTING. Isi kotak kosong tsb dg kode berikut:
<span class=’fullpost’></span>

Jangan lupa klik SIMPAN PENGATURAN.
Cara Memposting

Ketika memposting, klik EDIT HTML (bukan COMPOSE). Maka, secara otomatis akan tampak kode
<span class=’fullpost’>
</span>

Letakkan posting yg akan ditampilkan di halaman muka di atas kode sementara sisanya (yakni keseluruhan entry/artikel), letakkan di antara kode

<span class=’fullpost’>

dan
</span>

Masalah yang Sering Dihadapi

1. Saat mengklik “Simpan Perubahan” kita sering mendapat pesan demikian:

XML error message: The element type “style” must be terminated by the matching end-tag “”.

Jangan panik. Itu artinya tanda petik / kutip buka tutup (quote/unquote) yakni tanda ‘ dalam kode tidak cocok dengan font template. Yang perlu dilakukan adalah buang tanda kutip ['] itu dan kasih tanda kutip yang baru di tempat yang sama. Dan coba klik lagi SIMPAN.

2. Anda sudah berhasil memasang seluruh kode di atas, tetapi ‘read more’ gak berhasil; posting tetap panjang? Dan tulisan ‘read more’ nongol di bagian bawah artikel? Tenang. Ikuti solusi berikut: klik “Pengaturan” -> klik “Format” -> buang/delete semua tanda kutip buka/tutup (quote/unquote) di “fullpost” dan ganti dengan tanda kutip yang baru. Jangan lupa klik “Simpan”.
Selesai. Selamat ngeblog di blogger / blogspot dengan READ MORE.

Apabila Anda berhasil melakukan cara bikin READ MORE di atas tak perlu lagi mencoba cara di bawah. Cara di bawah cuma sebagai alternatif dan agak lebih rumit di banding cara yang di atas.

Cara Kedua:

1. Buka template –> edit HTML
2. Kasih tanda tik/cek menu “expand widget template”
3. Cari kode berikut di TEMPLATE blog Anda:

<div class=’post-header-line-1′/>
<div class=’post-body’>

4. Kalau sudah ketemu, letakkan kode berikut DI BAWAH kode html di atas:

<b:if cond=’data:blog.pageType == “item”‘>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

5. Di Bawah kode di atas ada kode html sbb:

<p><data:post.body/></p>
<div style=’clear: both;’/> <!– clear for photos floats –>
</div>

6. Nah, di antara kode
<p><data:post.body/></p>

dan kode
<div style=’clear: both;’/> <!– clear for photos floats –>
</div>

pasang kode html ini:

<a expr:href=’data:post.url’>Read More .. </a>
</b:if>

7. Jadi, susunan kode html di template setelah ditambah dg kode READ MORE akan menjadi seperti ini (yg warna biru adalah kode tambahan untuk READ MORE, sedang kode warna hitam adalah kode asli template):

 

<div class=’post-header-line-1′/><div class=’post-body’>

<b:if cond=’data:blog.pageType == “item”‘><style>.fullpost{display:inline;}</style>

<p><data:post.body/></p>

<b:else/>

<style>.fullpost{display:none;}</style>

<p><data:post.body/></p>

<a expr:href=’data:post.url’>Read More……</a>

</b:if>

<div style=’clear: both;’/> <!– clear for photos floats –>

</div>

Klik Simpan Template. Selesai.

8. Klik SETTINGS atau Pengaturan, terus klik FORMATTING atau Format. Di paling bawah ada kotak kosong di samping menu TEMPLATE POSTING. Isi kotak kosong tsb dg kode berikut:

<span class=’fullpost’>

 

</span>

Jangan lupa klik SIMPAN PENGATURAN.

Cara Memposting

Ketika memposting, klik EDIT HTML. Maka, secara otomatis akan tampak kode

<span class=’fullpost’>
</span>

Letakkan posting yg akan ditampilkan di halaman muka di atas kode sementara sisanya (yakni keseluruhan entry), letakkan di antara kode

<span class=’fullpost’>

dan
</span>

Catatan Penting:

(A) Artikel yg diposting sebelum pemasangan kode READ MORE di atas akan tetap tampil penuh di halaman muka, Anda bisa mengeditnya dg cara sbb:

1. Klik menu EDIT POSTS
2. Klik EDIT di artikel yg akan diedit.
3. Pasang kode
<span class=’fullpost’>

di bawah paragraf yg akan ditampilkan. Dan pasang kode
</span>

di akhir artikel.

Ingat hanya ada SATU kode

<span class=’fullpost’>

dan
</span>

. Apabila terdapat lebih dari satu, dan biasanya numpuk di bagian paling bawah artikel, maka dibuang saja.

Masalah yang Sering Dihadapi

1. Saat mengklik “Simpan Perubahan” kita sering mendapat pesan demikian:

XML error message: The element type “style” must be terminated by the matching end-tag “”.

Jangan panik. Itu artinya tanda petik / kutip buka tutup (quote/unquote) yakni tanda ‘ dalam kode tidak cocok dengan font template. Yang perlu dilakukan adalah buang tanda kutip ['] itu dan kasih tanda kutip yang baru di tempat yang sama. Dan coba klik lagi SIMPAN.

2. Anda sudah berhasil memasang seluruh kode di atas, tetapi ‘read more’ gak berhasil; posting tetap panjang? Solusi: klik “Pengaturan” -> klik “Format” -> buang semua tanda kutip buka/tutup di “fullpost” dan ganti dengan tanda kutip yang baru. Jangan lupa klik “Simpan”.

 

76 go fight

Membuat Animasi Halaman Blog

Filed under: Web/Blog Design — Rudi Hidayat @ 5:39 pm
Tags: , ,

Pasti ingin dong blog kamu lebih atraktif. Buat aja gambar animasi yang bisa bergerak di halaman blog kamu.
Kamu bisa meletakkannya di pojok kiri atas, kiri bawah, kanan atas ataupun kanan bawah

Mau tau cara buatnya..?
Ikuti langkah-langkah berikut ini.

Langkah I:

1. Login ke Account Blogger-mu
2. Klik Layout / Tata Letak
3. Klik Edit HTML
4. Klik kotak kecil Expand Template Widget di pojok atas
5. Cari kode ]]></b:skin>
6. Persis sebelum kode ]]></b:skin> copykan script dibawah ini:

#KidDevilz {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+
document.documentElement.clientWidth – offsetWidth); }

Keterangan:
Text warna merah adalah lokasi animasi. Kamu bisa ganti sesukamu.
kiri=left
kanan=righ
atas=top
bawah=bottom

Langkah II:

1. Cari lagi di dalam template-mu kode </body>
2. Persis sebelum kode </body> copykan script dibawah ini:

<div id=”KidDevilz”>
<a href=”http://panduan-blogger-mania.blogspot.com/”>
<img src=”http://i425.photobucket.com/albums/pp332/cookie_muncher123/4.gif/” border=”0″ /></a>
</div>

Keterangan:
Ganti http://panduan-blogger-mania.blogspot.com/ dengan alamat blog anda.
Ganti http://i425.photobucket.com/albums/pp332 cookie_muncher123/4.gif  dengan animasi pilihanmu.

Good Luck

31 October 2009

macromedia Flash 8 portable

Filed under: Web/Blog Design — Rudi Hidayat @ 5:03 am

Setelah beberapa link software portable yang telah sediakan, antara lain, Microsoft Windows Home Edition Portable, CorelDraw 11 portable, dan Adobe Photoshop CS Portable, kini kami kembali hadir untuk menyediakan link Macromedia Flash 8 Portable yang bisa anda download secara gratisan. Hampir semua fitur yang ada di macromedia flash 8 versi installasi itu ada dalam versi yang portable ini. Bisa langsung didownload di :

 

 

http://rapidshare.com/files/34611826/MacromediaFlash8Portable.rar
passwordnya : WWW.HEARTODARK.COM

30 October 2009

Joomla Flash Tutorial

Filed under: Web/Blog Design — Rudi Hidayat @ 4:08 pm

Quote:
http://rapidshare.com/files/38675501…nDay.part1.rar
http://rapidshare.com/files/38699348…nDay.part2.rar
http://rapidshare.com/files/38799783…nDay.part3.rar
http://rapidshare.com/files/38653889…nDay.part4.rar

Beginning Joomla From Novice To Professional

Code:
http://rapidshare.com/files/73118276/ABJFNtP.rar.html

Template Migration for Joomla Tutorial Series

Quote:
http://rapidshare.com/files/81157445…_lessonOne.rar
http://rapidshare.com/files/81157769…_lessonTwo.rar
http://rapidshare.com/files/81158130…essonThree.rar
http://rapidshare.com/files/81158273…lessonFour.rar
http://rapidshare.com/files/81158609…lessonFive.rar
http://rapidshare.com/files/81158992…_lessonSix.rar
http://rapidshare.com/files/81159641…essonSeven.rar

Joomla Tutorial Videos

A. Joomla! for Beginners (same as first post)

Quote:
http://rapidshare.com/files/81178132…nDay.part1.rar
http://rapidshare.com/files/81194192…nDay.part2.rar
http://rapidshare.com/files/81196874…nDay.part3.rar
http://rapidshare.com/files/81197369…nDay.part4.rar

OR

http://rapidshare.com/files/38675501…nDay.part1.rar
http://rapidshare.com/files/38699348…nDay.part2.rar
http://rapidshare.com/files/38799783…nDay.part3.rar
http://rapidshare.com/files/38653889…nDay.part4.rar

B. Building a CSS Template for JOOMLA

Quote:
http://rapidshare.com/files/81152001…onOneFinal.rar
http://rapidshare.com/files/81152667…onTwoFinal.rar
http://rapidshare.com/files/81154291…ThreeFinal.rar
http://rapidshare.com/files/81155655…nFourFinal.rar
http://rapidshare.com/files/81157164…nFiveFinal.rar


C. Increasing User Experience with Javascript

Quote:
http://rapidshare.com/files/81160016…_lessonOne.rar
http://rapidshare.com/files/81167626…_lessonTwo.rar
http://rapidshare.com/files/81168240…essonThree.rar
http://rapidshare.com/files/81168928…lessonFour.rar
http://rapidshare.com/files/81169185…lessonFive.rar
http://rapidshare.com/files/81169572…_lessonSix.rar
http://rapidshare.com/files/81169682…essonSeven.rar
http://rapidshare.com/files/81169999…essonEight.rar
http://rapidshare.com/files/81170420…lessonNine.rar


D. Template Migration for Joomla Tutorial Series

Quote:
http://rapidshare.com/files/81157445…_lessonOne.rar
http://rapidshare.com/files/81157769…_lessonTwo.rar
http://rapidshare.com/files/81158130…essonThree.rar
http://rapidshare.com/files/81158273…lessonFour.rar
http://rapidshare.com/files/81158609…lessonFive.rar
http://rapidshare.com/files/81158992…_lessonSix.rar
http://rapidshare.com/files/81159641…essonSeven.rar

E. MooTools for the Rest of Us

Quote:

http://rapidshare.com/files/81170728…_LessonOne.rar
http://rapidshare.com/files/81171353…_LessonTwo.rar
http://rapidshare.com/files/81171713…essonThree.rar
http://rapidshare.com/files/81175938…LessonFour.rar
http://rapidshare.com/files/81176549…LessonFive.rar

29 October 2009

Membuat Animasi Flash Pada Website Dengan Swish 2.0

Filed under: Web/Blog Design — Rudi Hidayat @ 2:49 am

Pada saat anda membuka salah satu situs di Internet, mungkin anda pernah menemukan situs web
yang dihiasi dengan animasi yang bagus seperti animasi video. Animasi semacam itu biasanya
dibuat dengan Flash, suatu program animasi yang sangat terkenal keluaran dari Macromedia. Lalu
apakah Flash itu? Flash adalah tool animasi yang dibuat khusus untuk Web. Seperti program
Macromedia’s Director, Flash menyediakan unsur-unsur animasi yang menarik. Tetapi Flash juga
bisa digunakan untuk membuat menu dan berbagai tipe interaktif lainnya.

Sebenarnya apa sih yang membuat file-file Flash begitu terkenal dan menjadi standart animasi dalam
website. Jawabnya adalah karena flash didesain menggunakan teknologi Grafik Vektor (vector
graphics). Grafik vektor merupakan deskripsi matematis dari suatu bentuk, berbeda dengan grafik
dalam format bitmap yang digunakan pada Web seperti file GIF maupun JPG. Grafik vector
menjelaskan bagaimana suatu grafik seharusnya ditampilkan dalam layar. Grafik vektor bukan
kumpulan titik seperti pada format gambar (GIF JPG, BMP).

Karena menggunakan vektor maka ukuran flash dapat diubah sesuai kebutuhan tanpa mempengaruhi
kualitas gambar. Dalam mengakses halaman web pengunjung menggunakan hardware dan software
yang berbeda. Perbedaan inilah yang menyebabkan kemampuan komputer dalam membuka ukuran
window dan resolusi layar. Format file gambar berbasis bitmap (GIF, JPG) kualitasnya akan
disesuikan dengan ukuran window dan layar. Hal inilah yang menyebabkan gambar baik diam maupun animasi kadang ukurannya menjadi sangat besar karena dibuka pada komputer dengan
resolusi yang rendah.
Hal ini tidak berlaku pada animasi Flash, karena Flash menggunakan vektor untuk menyimpan
informasi grafik-nya sehingga tidak terpengaruh oleh resolusi dan ukuran layar. File animasi Flash
akan selalu mempunyai ukuran yang sama tidak perduli dibuka pada ukuran window dan resolusi
layar apa pun.
File Flash disimpan dalam web server dengan ektensi *.SWF. Pada saat browser membuka
halaman web yang berisi file Flash, maka browser akan menjalankan  Flash Player  dan segera
memainkannya.


Bagaimana Membuat Animasi Dengan Flash?
Untuk membuat animasi dengan flash anda dapat menggunakan program Flash dari Macromedia.
Untuk dapat membuat animasi dengan flash, anda harus belajar program Flash. Dengan makin
berkembangnya software multi media dewasa ini telah banyak program yang meniru flash dengan
kemasan yang sangat mudah dibandingkan dengan Flash itu sendiri. Salah satunya adalah Program
Swish. Di sini akan dijelaskan bagaimana membuat animasi flash yang akan ditampilkan dalam
website anda dengan Swish 2.0.

klik here visited swish home page.

Download Dari Sini Tutorial Lengkap Membuat Flash Menggunakan Swish 2.0

Download Aplication Swish 2.0

Design using Corel Draw X3

Filed under: Web/Blog Design — Rudi Hidayat @ 2:11 am

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.

Theme: Rubric. Blog at WordPress.com.

Follow

Get every new post delivered to your Inbox.