1. Project 1 : Website "My Diary"
Ada
banyak alasan mengapa orang membuat website pribadi. Antara lain, mereka ingin
agar tulisan-tulisan, gambar, serta suasana hati mereka dapat dibaca oleh
banyak orang. Pada proyek pertama ini,
kita akan menciptakan salah satu bentuk website pribadi, yaitu website
“My Diary”
- Membuat Website "My Diary"
Website
“My Diary” ini didesain dengan nuansa khas warna coklat untuk menciptakan kesan
yang soft dan tenang. Sama seperti website- website pada
umumnya, website “My Diary” ini dipenuhi gambar
serta teks yang disusun secara hati-hati agar temanya tidak me- lenceng
dari tema awalnya.
Berikut
langkah-langkah membuat website “My Diary” yang bisa Anda ikuti:
1. Pertama-tama, siapkan sebuah kanvas baru menggunakan
setting berikut
- Lebar : 720 Pixel
- Tinggi : 480 Pixel
- Resolution : 72 Pixel/Inchi
2.Klik ikon warna latar depan dan pilih warna baru
dengan rumus #FFF2AD
3.Klik menu Edit > Fill. Pada bagian Use, pilih
Foreground Color
4. Tekan tombol OK dan kanvas Anda akan
tampak seperti ini
5. Kita akan atur ulang warna latar depannya untuk
membuat persegi empat. Klik ikon warna latar depan dan masukkan rumus berikut
#FFCC00. Dengan begitu, Anda akan mendapat warna oranye.
6. Klik Rectangle Tool
dan buatlah persegi empat seperti gambar berikut ini.
dan buatlah persegi empat seperti gambar berikut ini.
- Mendesain Tombol
Idealnya,
sebuah website pasti dipenuhi oleh tombol-tombol. Dengan menggunakan
Dreamweaver MX 2004 nanti, kita akan mengaktifkan tombol-tombol itu sehingga
bisa diklik oleh orang lain.
Sekarang,
kita akan ciptakan tombol website dengan langkah-langkah berikut ini
- Klik Rounded
Rectangle Tool
dan pada bagian Radius,
isikan angka 10px
2. Sebelum kita membuat persegi empat dengan sudut
tumpul untuk membuat tombol, aturlah
terlebih dulu warna latar depan yang sedang aktif saat ini. Klik ikon warna
latar depan dan pilih warna dengan rumus #DAC75E yang akan menghasilkan warna
coklat agak tua.
3. Buatlah persegi empat kecil di atas kanvas dan raster jika sudah dengan mengklik menu Layer > Rasterize > Shape. Hasilnya seperti ini :
4.Beri ia sedikit style agar tampak bergaya. Klik menu Layer > Layer Style > Outer Glow. Masukkan
setting seperti berikut ini:
3. Buatlah persegi empat kecil di atas kanvas dan raster jika sudah dengan mengklik menu Layer > Rasterize > Shape. Hasilnya seperti ini :
6.Klik check box Stroke untuk menciptakan garis tepi bagi tombol. Masukkan setting seperti gambaran di bawah ini dan khusus untuk warna stroke-nya, kita pilih warna coklat agak tua dengan rumus #A49455.
8.Lakukan langkah 7 dua kali lagi sehingga praktis kita punya empat tombol yang sama mirip. Posisikan keempat tombol itu seperti ilustrasi berikut:
9. Sekarang, kita akan bubuhkan sebuah teks di
tiap-tiap tombol web tersebut.
Klik Horizontal Type
Tool 
dan aturlah font
seperti pengaturan berikut ini :
dan aturlah font
seperti pengaturan berikut ini :- nama font : Ex Ponto
- size : 30 pt
- style : legurer
11.Setelah selesai menulis, tekan tombol Ctrl+Enter.
12.Lakukan langkah 10-11 masing-masing untuk ketiga
tombol yang lain. Di tiap-tiap tombol, ketikkan “Gallery”, “Activities”, dan
“Links”. Lihat hasilnya berikut ini.
- Memasukkan Gambar-Gambar
Berikut
langkah-langkahnya:
1.
Ambil gambar pensil dari CD yang tersimpan di folder
\project1\image2.jpg.
Anda akan melihat gambar seperti ini:
3. Tekan tombol Shift+Ctrl+I untuk membalik bidang
seleksi. Lihat prosesnya seperti gambar di bawah ini:
4. Tekan tombol Ctrl+C dan beralihlah ke kanvas tempat kita mendesain halaman web tadi.
5. Susul dengan menekan tombol Ctrl+V untuk mem-paste gambar tersebut.
6. Mungkin, setelah Anda paste, gambar tersebut masih berukuran cukup besar. Untuk memperkecilnya, klik menu Edit > Free Transform > Scale. Perkecil sesuai selera.
7. Beri bayangan dengan mengklik menu Layer > Layer Style > Drop Shadow. Masukkan setting berikut ini:
8. Setelah selesai dengan foto pensil, kita akan memasukkan foto bayi. Caranya, ambil file image1.jpg dari folder \project1\ image1.jpg
9. Klik Ctrl+A untuk menyeleksi semua bagian dalam foto anak- anak ini dan susul dengan menekan tombol Ctrl+C untuk mengkopinya ke dalam clipboard.
10. Pindahlah ke kanvas tempat kita mendesain website dan tekan Ctrl+V untuk mem-paste gambar tersebut. Jika perlu, atur ukurannya agar sesuai dengan ukuran kanvas secara umum.
11. Set Opacity layer tempat foto anak-anak itu berada ke level 40%.
- Memasukkan Teks
Pada putaran ketiga ini, kita akan memasukkan teks ke dalam desain web. Teks yang kita masukkan ini berjenis bitmap yang tak mungkin bisa diedit menggunakan software-software pengolah kata jika nanti teks tersebut memang akan diedit, seperti menggunakan Notepad, Dreamweaver MX 2004 dan sebagainya.
Pada bagian lain, kita akan belajar cara membuat teks yang bisa diedit menggunakan Dreamweaver MX 2004 atau Notepad.
Ikuti langkah-langkah berikut ini untuk membuat teks judul:
1. Klik ikon warna latar depan dan pilihlah warna kuning dengan rumus #F0FF00.
2. Klik Horizontal Type Tool dan pakailah setting huruf seperti ini :
4. Klik menu Layer > Layer Style > Outer Glow dan masukkan setting seperti gambar di bawah. Khusus untuk warna outer glow-nya, pakai warna kecoklatan dengan rumus #B59C15.
5. Kalau sudah, klik check box Stroke dan pakai setting seperti gambar yang tersaji di bawah ini. Untuk warnanya, pilih warna oranye dengan rumus #FFAE00.
- Memasukkan Pernak Pernik
Sebenarnya, kreasi web yang telah kita ciptakan di atas sudah cukup bagus. Tapi sayangnya, kreasi web di atas kurang seramai yang kita inginkan. Untuk menambah keramaian dan keceriaan website tersebut, kita manfaatkan kreasi pernak-pernik yang akan kita ciptakan berikut ini.
Sebenarnya, kita tidak perlu susah-susah untuk menciptakan pernak- pernik di atas mulai dari awal sebab kita hanya memanfaatkan fasilitas Custom Shape dari Photoshop CS.
Inilah langkah-langkahnya:
1.Klik Custom Shape Tool dari jendela Tools
2. Klik anak panah kecil yang ada di option Shape pada toolbar dan pilih Snowflake 3
3. Atur warna latar depan dengan warna coklat terang
berumus #FCEFD3.4.Buatlah bentuk salju di atas desain web, mulai dari
pojok kiri atas seperti ilustrasi di bawah ini:
5. Perbanyak bentuk salju itu dengan mengklik menu Layer > Duplicate
Layer sampai beberapa kali.6.Bentuk-bentuk salju yang lain dapat Anda modifikasi
besar kecilnya sehingga tampak lebih dinamis. Lihat tampilannya berikut ini.
7.Selain salju, kita akan menciptakan pernak-pernik
lain, yaitu daun. Klik Custom Shape Tool dan pilih bentuk Leaf 2 seperti gambar di
bawah ini.
8. Atur warna latar depan yang aktif dengan warna kuning
muda (#F9FDBF) dan buatlah objek leaf 2 di atas kanvas.9. Klik menu Layer
> Duplicate Layer sehingga kita punya
dua buah daun.
10. Klik Move Tool dan untuk objek daun yang kedua, klik menu Edit > Free Transform > Flip Horizontal. Posisikan di samping kanan daun pertama sehingga akan menjadi seperti ini.
- Hasil Akhir
Beginilah hasil akhir yang akan Anda dapatkan begitu proses desain halaman web menggunakan Adobe Photoshop CS berlangsung mulus. Lihat Gambar 1.30. Kita akan menciptakan slice menggunakan Adobe Image Ready dan memasukkan teks serta link-link meng- gunakan Dreamweaver MX 2004.
Simpanlah hasil kreasi tersebut dengan mengikuti langkah-langkah berikut:
1. Klik menu File > Save As.
2. Simpan dengan nama project1.psd dan tekan tombol Save jika sudah.
- Membuat Slice Menggunakan Imageready
Setelah kita merancang desain web, kita akan mengedit hasil rancangan itu menggunakan Adobe ImageReady. Yang akan kita lakukan adalah, memecah satu gambar utuh tersebut menjadi beberapa bagian yang lebih kecil. Dari segi loading, memecah gambar besar menjadi bagian-bagian yang lebih kecil cukup menguntungkan karena halaman web ini akan lebih cepat diakses.
Dalam dunia website, fasilitas Slice berfungsi untuk memecah gambar besar menjadi beberapa potong gambar kecil yang tersimpan di dalam file-file yang terpisah. Beginilah caranya :
1. Pastikan Anda sudah menyimpan desain web tersebut meng- gunakan format PSD.
2. Klik menu File > Edit in ImageReady. Dalam waktu singkat, jendela Adobe ImageReady akan muncul di hadapan Anda.
3. Klik ikon Slice Tool untuk membuat
potongan-potongan kecil pada gambar.4.Cara pakainya cukup sederhana, buatlah bidang persegi
empat dan dalam waktu singkat, bagian itu akan berubah warna yang menandakan
bahwa bagian itu akan disimpan ke dalam file khusus.
5.Buatlah potongan-potongan segi empat yang lain seperti
gambar di bawah ini.
6.Sekarang, kita tinggal menyimpannya saja. Klik menu File > Save
Optimized As7.Pada jendela Save Optimized As, buatlah folder baru
dengan mengklik
ikon Create New
Folder yang ada di bagian
atas jendela tersebut
8.Buatlah folder baru dengan nama Project1 dan pastikan Anda sekarang berada di dalamnya
9.Simpanlah dengan nama project1 dan jangan lupa pada kotak Save as Type Anda pilih HTML and Images (*.htm)
10.Klik tombol Save.
- Mengedit Website Dengan Dreamweaver 2004 MX
Setelah desain web di-slice, saatnya kita melakukan sedikit modifikasi menggunakan Dreamweaver MX 2004. Luncurkanlah software buatan Macromedia ini dan Anda akan melihat tampilan seperti gambar di bawah ini.
Kalau
sudah begini, Anda bisa memulai melakukan langkah-langkah di bawah ini:1. Klik option Open yang ada di situ.
2. Pilih folder Project1 dan pilih file project1.htm. Setelah itu, tekan tombol Open
3.Anda akan melihat desain web yang kita ciptakan tadi
telah berpindah ke dalam jendela Dreamweaver MX 2004.
4. Tekan tombol Ctrl+C dan beralihlah ke kanvas tempat kita mendesain halaman web tadi.
5. Susul dengan menekan tombol Ctrl+V untuk mem-paste gambar tersebut.
6. Mungkin, setelah Anda paste, gambar tersebut masih berukuran cukup besar. Untuk memperkecilnya, klik menu Edit > Free Transform > Scale. Perkecil sesuai selera.
7. Beri bayangan dengan mengklik menu Layer > Layer Style > Drop Shadow. Masukkan setting berikut ini:
8. Setelah selesai dengan foto pensil, kita akan memasukkan foto bayi. Caranya, ambil file image1.jpg dari folder \project1\ image1.jpg
9. Klik Ctrl+A untuk menyeleksi semua bagian dalam foto anak- anak ini dan susul dengan menekan tombol Ctrl+C untuk mengkopinya ke dalam clipboard.
10. Pindahlah ke kanvas tempat kita mendesain website dan tekan Ctrl+V untuk mem-paste gambar tersebut. Jika perlu, atur ukurannya agar sesuai dengan ukuran kanvas secara umum.
11. Set Opacity layer tempat foto anak-anak itu berada ke level 40%.
- Memasukkan Teks
Pada putaran ketiga ini, kita akan memasukkan teks ke dalam desain web. Teks yang kita masukkan ini berjenis bitmap yang tak mungkin bisa diedit menggunakan software-software pengolah kata jika nanti teks tersebut memang akan diedit, seperti menggunakan Notepad, Dreamweaver MX 2004 dan sebagainya.
Pada bagian lain, kita akan belajar cara membuat teks yang bisa diedit menggunakan Dreamweaver MX 2004 atau Notepad.
Ikuti langkah-langkah berikut ini untuk membuat teks judul:
1. Klik ikon warna latar depan dan pilihlah warna kuning dengan rumus #F0FF00.
2. Klik Horizontal Type Tool dan pakailah setting huruf seperti ini :
- Jenis Font : Edwardian Script ITC
- Style : Leguler
- Size : 120 pt
4. Klik menu Layer > Layer Style > Outer Glow dan masukkan setting seperti gambar di bawah. Khusus untuk warna outer glow-nya, pakai warna kecoklatan dengan rumus #B59C15.
5. Kalau sudah, klik check box Stroke dan pakai setting seperti gambar yang tersaji di bawah ini. Untuk warnanya, pilih warna oranye dengan rumus #FFAE00.
- Memasukkan Pernak Pernik
Sebenarnya, kreasi web yang telah kita ciptakan di atas sudah cukup bagus. Tapi sayangnya, kreasi web di atas kurang seramai yang kita inginkan. Untuk menambah keramaian dan keceriaan website tersebut, kita manfaatkan kreasi pernak-pernik yang akan kita ciptakan berikut ini.
Sebenarnya, kita tidak perlu susah-susah untuk menciptakan pernak- pernik di atas mulai dari awal sebab kita hanya memanfaatkan fasilitas Custom Shape dari Photoshop CS.
Inilah langkah-langkahnya:
1.Klik Custom Shape Tool dari jendela Tools
2. Klik anak panah kecil yang ada di option Shape pada toolbar dan pilih Snowflake 3
10. Klik Move Tool dan untuk objek daun yang kedua, klik menu Edit > Free Transform > Flip Horizontal. Posisikan di samping kanan daun pertama sehingga akan menjadi seperti ini.
Beginilah hasil akhir yang akan Anda dapatkan begitu proses desain halaman web menggunakan Adobe Photoshop CS berlangsung mulus. Lihat Gambar 1.30. Kita akan menciptakan slice menggunakan Adobe Image Ready dan memasukkan teks serta link-link meng- gunakan Dreamweaver MX 2004.
Simpanlah hasil kreasi tersebut dengan mengikuti langkah-langkah berikut:
1. Klik menu File > Save As.
2. Simpan dengan nama project1.psd dan tekan tombol Save jika sudah.
- Membuat Slice Menggunakan Imageready
Setelah kita merancang desain web, kita akan mengedit hasil rancangan itu menggunakan Adobe ImageReady. Yang akan kita lakukan adalah, memecah satu gambar utuh tersebut menjadi beberapa bagian yang lebih kecil. Dari segi loading, memecah gambar besar menjadi bagian-bagian yang lebih kecil cukup menguntungkan karena halaman web ini akan lebih cepat diakses.
Dalam dunia website, fasilitas Slice berfungsi untuk memecah gambar besar menjadi beberapa potong gambar kecil yang tersimpan di dalam file-file yang terpisah. Beginilah caranya :
1. Pastikan Anda sudah menyimpan desain web tersebut meng- gunakan format PSD.
2. Klik menu File > Edit in ImageReady. Dalam waktu singkat, jendela Adobe ImageReady akan muncul di hadapan Anda.
8.Buatlah folder baru dengan nama Project1 dan pastikan Anda sekarang berada di dalamnya
9.Simpanlah dengan nama project1 dan jangan lupa pada kotak Save as Type Anda pilih HTML and Images (*.htm)
10.Klik tombol Save.
- Mengedit Website Dengan Dreamweaver 2004 MX
Setelah desain web di-slice, saatnya kita melakukan sedikit modifikasi menggunakan Dreamweaver MX 2004. Luncurkanlah software buatan Macromedia ini dan Anda akan melihat tampilan seperti gambar di bawah ini.
2. Pilih folder Project1 dan pilih file project1.htm. Setelah itu, tekan tombol Open
12. Agar warna sel yang kita hapus tadi sama dengan warna-warna yang ada di sekelilingnya, klik kotak warna Bg yang ada di jendela Properties.
13.Arahkan kursor ke arah warna yang ada di sekeliling tempat itu dan tekan tombol kiri mouse. Secara otomatis, sel tersebut akan memiliki warna yang sama
14. Ketikkan teks di dalam kotak tersebut. Tuliskan sesuka hati Anda
Catatan :
Saat Anda mengetik teks, mungkin layout website ini akan tampak berantakan seperti gambar di bawah ini. Untuk menyiasatinya, setelah Anda selesai mengetikkan sebuah kalimat, tekanlah tombol Del untuk mengembalikan layout yang berantakan tadi ke bentuknya yang normal.
Tapi, jika Anda menekan tombol Del dan ternyata layout website masih tetap berantakan, berarti ukuran teks tersebut lebih besar dibanding ukuran sel yang Anda tempati. Dalam kasus seperti ini, Anda harus memodifikasi teks tersebut agar benar-benar pas di dalam sel
- Membuat Link
Idealnya, sebuah website pasti memiliki link. Di situ ada beberapa tombol yang akan kita jadikan sebuah link. Ikuti langkah-langkah berikut ini :
1. Klik gambar About sampai berada dalam keadaan terseleksi
2.Pada bagian Link yang ada di jendela Properties, masukkan alamat web atau nama file website yang akan dituju jika gambar itu diklik, misalnya about.htm
3.. Tekan Enter jika sudah
Setelah proses ini Anda lakukan, Anda bisa menciptakan link untuk gambar-gambar yang lain, seperti Gallery, Activities, dan Links
Setelah selesai, klik menu File > Save
- Membuat Halaman Web Baru
Karena sudah ada link, maka kita bisa menciptakan halaman web yang baru. Dengan demikian, begitu link itu diklik, halaman web about.htm yang kita tuju akan diakses.
Caranya cukup gampang, ganti saja teks yang tadi kita buat lalu simpanlah dengan nama about.htm. Selesai sudah
Posts
