MEMBUAT WABSITE. Pertama tentunya membuka photoshop. Buat halaman baru pada File > New dan akan tampil sbb

Transkripsi

1 MEMBUAT WABSITE A. MENYIAPKAN TEMPLATE DENGAN PHOTOSHOP Untuk menyiapkan templete wabsite kita bisa mencari template gratis yang banyak disediakan oleh wab atau blog yang menyediakan template. Tetapi template yang tersedia mungkin tidak cocok dengan selera atau kemauan kita. Apabila kita inginkan template yang sesuai dengan kemauan kita tentunya kita harus membuat template itu sendiri. Bagi para programer tentunya membuat template dengan code script sangatlah mudah. Tetapi bagi orang yang sama sekali tidak tahu dengan bahasa programer tentunya tidak bisa sama sekali. Tetapi template wab atau blog dapat kita desain dengan menggunakan photoshop. Disini kami akan merusaha berbagi bagaimana cara membuat template dengan photoshop sesuai dengan pengalaman kami. Pertama tentunya membuka photoshop. Buat halaman baru pada File > New dan akan tampil sbb Pada Preset Size ada pilihan : 800 x 600 untuk halaman kecil 1024 x 768 untuk halaman besar Pilihlah sesuai dengan selera anda. Klik OK akan tampil sbb :

2 Pilih Gradient Tool untuk mrmberi warna dasar template (gambar di atas ). Dan akan jadi seperti gambar di bawah ini. Masukkan gambar yang anda inginkan sebagai Cap template. Setelah gambar sesuai lalu buatlah LAYER baru dengan klik tool pada pojok bawah

3 Dengan Rectangular Marquee Tool buatlah tempat dimana kita nantinya menempatkan tombol Home, About Us dan sebagainya sesuai keinginan anda. Beri warna dengan Paint Bocket Tool sesuai keinginan anda Setelah memberi warna, untuk menghilangkan tanda Rectangular dengan cara tekan di keyboard anta Ctrl + D. Ulangi langkah tersebut untuk buat layer baru dan tulikan tulisan yang sesuai dengan keinginan anda (Nama Wab dan calon tombol dan lain lain) misalnya seperti gambar di bawah ini.

4 Setelah dirasa sudah sesuai dengan keinginan kita, maka dilalukan pemotongan untuk memisahkan bagian bagian untuk memudahkan penggunaannya sebagaimana fungsi masing masing ( tombol, background, dan lain lain ). Simpan fail dengan mode Save for Wab seperti gambar di bawah ini Maka akan muncul menu seperti gambar di bawah ini. Lalu klik Save.

5 Untuk mudah mengingatnya simpanlah file tersebut pada folder tersendiri yang hasilnya seperti gambar di bawah ini. 1 Folder Image dan 1 file firefox Document Folder Image isinya seperti ini Setelah selesai maka langkah selanjutnya file yang dihasilkan oleh photoshop di atas diolah dengan menggunakan aplikasi Macromedia Dreamweaver.

6 B. MACROMEDIA DREAMWEAVER Aktifkan Macromedia Dreamweaver dan buka file firefox Document Membuat Rollover Image Copy image Home, About Us dan lainnya yang akan digunakan sebagai tombol Rollover. Dan hasi Copy image image tersebut rubah warnanya dengan menggunakan photoshop. Image > Adjustments > Hue/Saturation seperti gambar di bawah ini. Geser kontrol warna supaya warna Image berubah sesuai selera anda. Dan sinpan di Folder Image

7 Sebagai contoh untuk memasang Rollover Image Home. Pada Macromedia Dream weaver Klik image Home dan Delate. Lalu klik Image dan gunakan menu Rollover Image seperti gambar di bawah. Setelah muncul seperti gambar di bawah ini, Original image : dan Rollover image : Klik OK dan hasilnya seperti ini. Dan ulangi pada tombol tombol yang telah anda siapkan.

8 Membuat Background Jadikan potongan image di bawah tombol sebagai Background. Contohnya sebagai berikut : Klik potongan yang akan dijadikan background seperti gambar di bawah ini. Hapus image dan klik folder Bg seperti gambar di bawah ini, dan isi lagi dengan image semula. Setelah selesai maka potongan image tersebut sudah jadi Background. Lakukanlah pada potongan potongan image yang lain. Sekali lagi kami ingatkan untuk merubah semua potongan image yang ada di bawah tombol untuk dijadikan background.

9 Menempatkan poto dan menulis Untuk memudahkan mengisi materi pada Wabsite, akan lebih baik bila koleksi poto yang akan di pasang di kumpulkan di folder tersendiri seperti pada gambar di bawah ini. Klik tempat yang akan di tempati Foto. Klik Image seperti pada gambar di bawah ini. Pilih Foto yang ingin anda pasang.

10 Sesuaikan besarnya poto Bordir pilih sesuai keinginan anda Align pilih left agar tulisan disa berada di samping poto. Isi kolom Link untuk poto tersebut agar bisa dibuka saat di klik Pada kolom Target pilih Parent Anda siap menyertakan kata kata untuk memberi keterangan pada poto. Lalu Save

11 Membuat Menu POP- UP Sebelum pembuat Menu Pop-up siapkan dulu target pop up dengan mengcopy Firefox Document dan memberi nama yang sesuai. Kalau menu pop up di ps anda belum siap, aktifkan dengan klik Window > Behaviors Klik Image yang akan di beri Menu Pop-Up Klik tanda ( + ) pada behaviors Dan pilih Show Pop-Up Menu seperti pada gambar di bawah ini.

12 Klik ( + ) untuk tambah menu item Tuliskan text untuk pop up Pilih link yang akan di tuju Pilih parent untuk target Klik( + ) lagi untuk pop up yang selanjutnya. Selain menu Content pelajari juga menu Appearance, Advanced, Pasition agar supaya menu Pop-Up anda tertata dengan rapi dan warnanya sesuai dengan warna template wab anda. Klo sudah jadi maka akan seperti gambar di bawah ini. Lakukan lagi untuk tombol-tombol yang lain yang anda inginkan Semoga bermanfaat. Bila ada kekurangan mohon maaf. Salam dari Desa Sundul, Kecamatan Parang, Kabupaten Magetan, Jawa Timur, Indonesia