Nah videobelajar kita kali ini akan mempelajari cara membuat design web template menggunakan software adobe potoshop. Caranya adalah :
1. Buka terlebih dahulu software potoshop
2. Klik menu file dan pilih new, di kotak dialog new kita akan tentukan ukuran widthnya yaitu 775 dan heightnya 790. Kemudian resolusinya 72, color modenya RGB Color dan background contentsnya adalah white, kemudian klik tombol ok. Sekarang kita telah mempunyai halaman kerja.
3. Lalu klik view dan pilih rulers, setelah itu kita klik pada bagian rulers secara vertical pada posisi 25 pixel dan kita letakkan kembali garis bantu pada posisi 750 pixel. Kemudian pada bagian horizontal kita posisikan di 20 pixel dan kita beri kembali garis bantu pada posisi 750 pixel. Kita pastikan bahwa posisi ini sudah benar dan untuk mencek ukuran sebenarnya kita gunakan zoom.
4. Klik rectangle tools pastikan bagian pate terpilih, lalu kita buat kotak sebesar garis bantu yang baru kita buat dan klik kanan pilih make selection dengan radius 0 lalu klik ok. Kemudian muncul seleksi dan pilih tombol edit setelah itu pilih stroke. Tentukan terlebih dahulu width adalah 1 kemudian warnanya adalah kita buat dengan kode warna b6b6b6 yaitu muncul warna abu – abu kemudian klik tombol ok.
Setelah itu cara membuat image baner yaitu kita masukkan image baner yang kita punya lalu kita tarik dan masukkan ke halaman potoshop kita. Kemudian image banner di seleksi tekan tombol Ctrl+A dan klik tombol edit pilih copy. Kita masuk kembali ke halaman kita yang baru, kemudian kita buat layer baru yaitu pada tombol create new layer lalu klik tombol edit kemudian paste. Sekarang kita sudah mempunyai image banner kemudian kita letakkan image banner tersebut di atas da harus pas dengan garis bantu. Kemudian kita buat layer baru lalu pilih warna dengan kode 2c2c2c. Untuk mempermudah kita membuat image kita harus menggunakan garis bantu dengan menggunakan rulers. Setelah itu kita klik rectangle tools pilih pada bagian optionnya adalah fill pixels untuk membuat kotak image logo yang akan di buat. Caranya sama seperti yang pertama kita membuat image banner.
Cara membuat kotak untuk design logo yaitu kita klik rectangle tools pilih fill pixels, kemudian kita buat kotak image di sebelah image baner tujuannya adalah untuk meletakkan logo maka kita masukkan gambar logo yaitu dengan mengklik gambar logo tersebut lalu bawa ke halaman potoshop lalu klik tombol seleksi dan klik tombol edit dan pilih copy lalu masuk ke halaman kerja kita kemudian kita buat layer baru lalu paste di halam di kotak design untuk logo. Setelah itu kita akan membuat kotak image untuk dibawah kotak image logo yaitu dengan membuat garis bantu menggunakan rulers. Kemudian kita klik rectangle tools dan kita pilih fill pixels dan kita buat kembali layer baru dan pilih warna dengan warna hijau, setelah itu kita buat image sesuai garis bantu yang kita buat. Dan kita tambah letakkan image dibawah kotak yang berwarna hijau caranya seperti yang sebelumnya. Yitu kita pastekan di halaman kerja kita. Setelah itu kita masukkan text, caranya dengan mengklik text tools. Kita tinggal mengetikkannya di bawah image yang baru kita letakkan. Kemudian kita akan menambahkan image di sebelah kanan yaitu dibawah baner .
Selanjutnya kita akan membuat image-image dan text untuk isi yaitu kita letakkan isi dari text di tengah atau di bawah banner dengan mengklik text tools lalu kita ketikkan isi halaman web template kita. Setelah itu di bawah text kita akan letakkan sebuah gambar pada halaman kerja kita. Kemudian yang terakhir kita akan membuat menu-menu pada halaman web template kita yaitu dengan cara klik text tools kemudian kita ubah ukurannya menjadi 14 dan warna textnya adalah warna hitam atau dengan kode 0000 dan klik ok,setelah itu kita ketikkan menu-menunya seperti home, about us, the came, support dan contact. Kemudian klik window lalu pilih character dan kita ubah jarak daripada menu-menu yaitu 100 dan kita ubah jenis hurufnya dengan reguller.




16 comments
#1FanyMay 8, 2009, 9:26 am
muat design ini pake photoshop 7.0 bisa?
aqu nyoba kok gak bisa ya?
#2adminMay 8, 2009, 11:41 am
Maaf, maksud anda membuat disignnya pake photoshop 7?, bisa
admin.
#3husniMay 14, 2009, 11:15 pm
Saya sudah membuat desain nya di potoshop, tapi bagaimana cara masukkan ke dreamwaver? dalam bentuk format apa kita simpan desain di potoshop? JPEG….ya
#4ismanJune 3, 2009, 7:39 am
Karena sekolah kami belum mempunyai website, jadi saya sangat memerlukan video tutorial ini baik yang menggunakan adobe photoshop maupun dreamweaver secara lengkap dalam bentuk CD dan tentu saja saya akan membelinya.Terima kasih.
#5dzikriJuly 3, 2009, 1:19 am
setelah selesai filenya di simpan dalam bentuk apa? terus bagaimana cara menslicenya? mohon pencerahannya terimakasih?
#6FarabyNovember 26, 2009, 2:01 am
apakah saya bisa mendapatkan gambar header,logo dan yang lainnya yang dipakai dalam materi membuat website di atas . .
Terima kasih . .
saya sangat berharap bisa, agar dapat lebih memudahkan kami semua dalam proses belajar . .
#7FitriFebruary 9, 2010, 4:10 pm
makasih banyak.
#8arnoApril 5, 2010, 9:09 pm
bagus bnget tutor nya…
#9abdilMay 23, 2010, 5:59 am
waduh….bank makasih bagt,,,nie sumpah beguna bwt saya
#10pard1August 4, 2010, 9:57 am
Belum sempet liat videonya sih.. tapi thanks sdh berbagi.. ^^
#11vidi r kasendaOctober 22, 2010, 7:12 am
memang kalo,,,desaign nya mantap tapi……///??????
#12BudiawanJuly 1, 2011, 5:21 am
Thx y dah mau berbagi’.
#13ignatiaSeptember 14, 2011, 2:30 pm
Tutorialnya berguna sekali saya yang pemula, thank’s sdah berbagi..
#14kone genOctober 1, 2011, 1:24 pm
thanks 4 r’sharing
#15FiskalOctober 27, 2011, 1:30 pm
BAGUS BGT….. TERIMAKASIH2…..
#16ArulDecember 10, 2011, 3:35 pm
Terima kasih banyak atas pencerahannya..video tutorial ini sangat membantu saya dalam pembangunan website personal..tapi akan lebih perfect lagi jika ada video tutorial tentang bagaimana cara mengabungkan atau mengedit jomla/mambo atau cms content dengan dreamweaver…
biasanya saya menggunakan jomla atau mambo dan cms tapi saya sangant sulit mengeditnya dalam artian menambah contentnya seperti gallerry dan lain2 melalui dreamweaver…mohon pencerahaannya Bapak /Ibu.
Add your comment