Membuat Web Personal dari Foto dengan Photoshop( Lanjutan )

Catatan ini merupakan lanjutan dari catatan saya sebelumnya Membuat template Web Personal dari Foto dengan Photoshop...Bagi saudara yang ingin melanjutkan membaca catatan ini alangkah lebih baiknya membaca catatan saya sebelumnya yang saya sebut diatas.

Pada catatan ini saya akan menjelaskan bagaimana memfungsikan semua menu dan mengisi conten  dengan menu yang telah kita buat pada tutorial sebelumnya.

Sebelum melangkah lebih mundur eh lebih jauh dalam catatan ini terlebih dahulu saudara harus menginstal aplikasi PSPad untuk editor kode program. Jika saudara belum punya silahkan downlond atau saudara cari sama si mbahnya google juga boleh, aplikasi ini di jamin gratis dan ringan untuk digunakan .

Okay mengintip sedikit pada catatan sebelumnya, pada catatan sebelumnya kita telah menyimpan hasil akhirnya pada sebuah folder yang diberi nama folder Myweb, di dalam folder ini terdapat  satu folder dengan namaimages dan satu file dengan nama index.html, didalam folder images terdapat potongan-potongan gambar yang telah kita seleksi menggunakan slice tool (penjelasan pada catatan sebelumnya), sedngkan file index.html berisi script yang memanggil potongan-potongan gambar didalam folder images untuk ditampilkan dihalaman browser kesayangan anda, dan pada catatan ini kita akan bermain-main pada file index.html.

Langsung saja jalankan aplikasi PSPad yang sudah terinstal dikomputer saudara dan mari kita lanjutkan pada langkah-langkah berikut ini :

Langkah pertama :

1. Buka file index.html dengan browser kesayangan saudara ( disini saya menggunakan firefox ), pada browser terlihat tampilan website disebelah kiri, disini kita akan mengarahkan tampilan web ke tengah browser, caranya bagaimana....? ikuti cara ke2
2. Buka file index.html dengan aplikasi PSPad, caranya : pada pojok kanan atas aplikasi PSPad click File -> Open terus cari file index.html di dalam folder ygang saudara simpan terus click tombol open (mudah bukan...hehe). Terus dalam script < table id=... width=... height=... border=... cellpadding=... cellspasing=...> tambahkan dengan align=center, sehingga menjadi < table id=... width=... height=... border=... cellpadding=... cellspasing=... align=center> seperti contoh gambar berikut :
   
                                         
3. Buka kembali file index yang di browser saudara dan refresh, sekarang tampilan web saudara sudah berada di tengah, selanjutnya untuk kita melangkah lagi..

Langkah Kedua bagian Menu :

1. Ada 4 menu yang akan kita link kan dengan masing-masing file, yaitu menu HOME dengan file index.html, PROFILE dengan profile.html, GALERY FOTO dengan galery.html dan LINK dengan link.html...loh file profile.html, galery.html dan link.html nya dmn...sabaaarrr kita kasih link dulu semua menunya, ikuti cara kedua :
2. Buka file index.html dengan PSPad terus cari script yang memanggil nama potongan gambar dari tiap menu ( silahkan lihat potongan gambar dalam folder images jika ngung-bingung ), terus tambah kan script berikut sebelum script image < a href=index.html> untuk menu Home, < a href=profile.html>untuk menu Profile, < a href=galery.html> untuk menu Galery Foto dan < a href=link.html> untuk menu Link dan tiap akhir script image tambahkan dengan < /a> sehingga scriptnya menjadi :

Script Menu HOME	< a href=index.html> < img src=images/index_04.gif width=... height=...  alt="" > < /a>
Script Menu PROFILE	< a href=profile.html> < img src=images/index_05.gif width=... height=...  alt="" > < /a>
Script Menu GALERY FOTO	< a href=galery.html> < img src=images/index_06.gif width=... height=...  alt="" > < /a>
Script Menu LINK	< a href=link.html> < img src=images/index_07.gif width=... height=...  alt="" > < /a>
Ket: Tulisan yang di cetak merah yang ditambahkan, fungsinya untuk membuat link pada masing-masing menu.

3. Selanjutnya Buka file index.html dengan browser firefox, ow ow oww tampilan layout jadi hancur berantakan seperti gambar berikut, jangan takut kita akan atur kembali :
   
4. Tambahkan border=0 seperti pada tabel di bawah, 

Script Menu HOME	< a href=index.html> < img src=images/index_04.gif width=... height=...  alt="" border=0> < /a>
Script Menu PROFILE	< a href=profile.html> < img src=images/index_05.gif width=... height=...  alt="" border=0> < /a>
Script Menu GALERY FOTO	< a href=galery.html> < img src=images/index_06.gif width=... height=...  alt="" border=0> < /a>
Script Menu LINK	< a href=link.html> < img src=images/index_07.gif width=... height=...  alt="" border=0> < /a>
Ket: Tulisan yang di cetak biru yang ditambahkan, fungsinya untuk menghilangkan border pada gambar.

5. Setelah saudara menambahkan script tersebut buka kembali file index saudara dengan browser firefox dan lihat hasilnya.

6. Selanjutnya kita membuat file profile.html, galery.html dan link.html, caranya : buka file index.html dengan PSPad, terus Save As file index.html ini dengan nama profile.html dan lakukan sekali lagi Save As dengan nama galery.html dan terakhir Save As dengan nama link.html, tempat Save As file harus dalam folder MyWeb Sehingga sekarang kita memiliki 4 file html seperti gmbar berikut:  
   
7. okelahlah kalaw begitu kita lanjut lagi....^_*

Langkah Ketiga, bagian Content :

1. Pada bagian content kita akan modif sedikit tag html dengan menambahkan Cascading Styles Sheet (CSS), caranya Buka file index.html dengan PSPad kemudian tambahkan CSS dalam tabel dibawah diantara tag < head> seperti dalam tabel berikut :

< html> < head> < title>My-Web< /title> < style type="text/css"> #content {  background:url(images/index_10.gif);     padding:0;     border:0;     width:499px;     height:386px; } #content #dalam{     background: none;     width: 450px;     height: 350px;     margin-left: 30px;     } .content-text{     font: 12px Comic;     background:none;     margin-left: 30px;     color: Gray;     } .img2{     float: left;     margin: 0 5px 5px 0;     border: 4px solid gray;     } < /style> < /head>

Ket : bagian background: url(images/index_10.gif); memanggil potongan gambar pada bagian content

2. Selanjutnya pada bagian tag html yang memanggil potongan gambar untuk content ganti dengan tag CSS berikut, seperti dalam tabel :

< tr>    < td colspan="5">       < div id=content>          < div id=dalam>< span class=content-text>     < p> ISI Content < /p> < /span>< /div>< /div> < /td>     < /tr>

Ket : yang dicetak biru tempat mengisi  content.

3. Kemudian isi bagian Content, diisi pada bagian Isi content yang ditulis biru pada tabel diatas seperti tabel di bawah ini mengisi bagian content file index.html...

< p>Welcome to Avril Lavigne website, and its dedicated to her smoldering lips, big blue eyes and pale skin which make for an enticing package, one that will only get better with age. < /p>

4. Buka file index.html dengan browser firefox saudara, kita telah berhasil mengisi content index, berhasil...berhasil...berhasiiil....
5. Selanjutnya Untuk mengisi content Profile, Saudara tinggal ikuti Langkah Ketiga cara 1 sampai 2 atau copy-kan aje script tersebut dalam file profil.html. Di bagian content Profil kita akan menampilkan sebuah foto dihalaman web Profile, sebelum lanjut maju kedepan buat dulu sebuah folder didalam folder Myweb dengan nama folder img dan simpan didalam folder tersebut sebuah foto dengan nama avril.jpg, tag menampilkan foto dan isi content untuk profile lihat tabel berikut:
6.  

< p>< img class=img2 src="img/avril.jpg" mce_src="img/avril.jpg" width="105" height="140">             Avril Lavigne dilahirkan disebuah kota kecil,             Napanee, Ontario. Kemampuan Avril dalam bernyanyi telah diketahui sejak ia berumur 2 tahun,              Keluarga Avril pindah ke Napanee saat dia berumur 5 tahun. Pada tahun 1998,             Avril memenangkan kompetisi bernyanyi dalam tour resmi penyanyi Kanada, Shania Twain.             Avril menyanyikan lagu Shania yang berjudul What Made You Say That.< br />

Ket : Bagian yang dicetak biru untuk memanggil gambar dengan nama avril.jpg yang berada di dalam folder img dan ditampilkan di halaman profile web.

7. Selanjutnya untuk content galery foto saudara tinggal mengikuti langkah ketiga cara 5 diatas, sebelumnya saudara harus menambahkan beberapa foto kedalam folder img untuk ditampilkan di halaman galeri foto, tag untuk memanggilnya lihat dalam tabel berikut :

< p>< img class=img2 src="img/avril2.jpg" width="105" height="140">        < img class=img2 src="img/avril3.jpg" width="105" height="140">       < img class=img2 src="img/avril4.jpg" width="105" height="140">< /p>

Ket: tulisan yang saya cetak biru tebal merupakan nama file foto

8. Selanjutnya untuk content link, ikuti cara 5 diatas, dan isi contentnya seperti dalam tabel berikut :

< p>Link Music : < /p> < a href=http://www.stafaband.info target=_blank>Stafaband  < /a>

Ket: tulisan yang warna biru adalah link ke webnya stafaband.com, dan tulisan yang saya cetak tebal biru adalah link yang ditampilkan di halaman web.

9. Sekarang saudara tinggal jalankan webnya di browser dan click masing-masing menu untuk melihat hasilnya...horeee webnya dah jadi...hehehee 

Okay saudara...selesai sudah pembuatan Web Personal ini, saudara bisa download hasil akhir dari pembuatan web ini di menu download pada website ini dengan nama project website personal. Untuk masing-masing halaman webnya silahkan lihat di bawah ini :

1. Halaman HOME 
   
2. Halaman PROFILE  
   
3. Halaman GALERY FOTO 
   
4. Halaman LINK 
   

Catatan : Pembuatan Web ini merupakan salah satu cara merancang web dengan TABEL, selain menggunakan tabel ada cara lain dengan menggunakan DIV ( full script CSS ). Ada Kelebihan dan kekurangan dalam membangun web dengan menggunakan TABEL dan DIV ini, semakin saudara banyak belajar membangun web dengan menggunakan 2 cara ini semakin tau kekurangan dan kelebihannya...makanya kalau ingin pintar...ya belajar...hahaha..kayak iklan aj...Di lain waktu saya akan menuliskan tutorial membangun web dengan menggunaka CSS ini. Maaf kalau dalam penyampaian dalam catatan ini agak beribet...maklum baru belajar....kekkekekeee 

SemangArt Belajar...:)

Read More

Membuat Template Web Personal dari Foto dengan Photoshop

Kali ini kita akan membuat sebuah template web personal dengan editor photoshop. Dalam pembuatan template ini kita mengunakan sebuah foto ato gambar dengan memberikan nuansa full color pada foto dan membentuknya menjadi sebuah template web dan selanjutanya kita bisa membangun template ini menjadi website personal. Walaupun bisa dibilang pembuatan tempalate web ini tidak terlalu rumit atau sangat sederhana sekali tapi bukankah lebih baik belajar dari yang mudah dan yang sederhana dulu untuk mencapai sebuah yang wah wah wah atau yang lebih baik,hehehe.

Sebelum kita lanjut pada catatan ini cara membuat template web personal dari foto dengan menggunakan photoshop, tentunya terlebih dahulu saudara telah menyediakan sebuah gambar atau foto (disini saya menggunakan fotonya Avril Lavigne, kenapa fotonya Avril Lavigne...? hmmm...kenapa ya.....kenapa ya....mbuh....*_^ ) dan juga jangan lupa seperti penggalan judulnya " dengan photoshop " tentunya di komputer saudara telah ter-instal aplikasi Photoshop. Jika sudah...mari kita mulai pembuatan template sederhana ini:

Langkah pertama:

1. Jalankan Phothoshop saudara lalu pada pojok kiri atas click File -> Open, cari gambar yang telah saudara sediakan lalu click tombol open, disini saya menggunakan fotonya Avril Lavign :

2. Selanjutnya buat kanvas/layer baru, caranya click File ->New, untuk setingan Width dan Height sesuaikan dengan gambar saudara ( disini saya menggunakan Width: 770pixel dan Height: 570pixel ) sedangkan untuk background contentnya pilih transparant, trus click OK. 
3. Selanjutnya drag/tarik gambar kedalam layer yang baru kita buat, lalu sesuaikan gambar dengan layar yang baru caranya tinggal menarik ke pinggiran layar baru dengan menggunakan Move tool  
   
4. jika sudah click move tool sekali lagi, klw ada peringatan click aja tombol apply...
5. Ok langkah pertama sudah selesai, saudara dapat lihat pada pojok kanan bawah pada photoshop sudah memiiki dua buah layer, layer1 berupa layer kosong dan layer2 berupa gambar yang sudah didrag...selanjutnya kita akan bermain-main pada layar ini. 

Langkah Kedua, memberi style :

1. Click kanan pada Layer2 yang saya sebut diatas terus pilih dan click Blending Option seperti gambar.
   
2. Kemudaian muncul Layer Style, pada layer style silahkan saudara ceklis dan bermain-main untuk menentukan setingan style atau efect yang diberikan menurut selera saudara sendiri...disini saya memberikan effect atau ceklis pada -> Inner Shadow , Inner Glow dan Satin seperti gambar berikut. 
   

Langkah Ketiga, membuat bagian header :

1. Membuat Tulisan MY WEB pada header, caranya click Horizontal Type Tool ( huruf T pada tool panel sebelah kiri ) . 
   
2. Selanjutnya saudara tinggal menuliskan kata MY WEB pada layer gambar, disini silahkan saudara ganti jenis font, warna atau ukuran font sesuai yang diinginkan, untuk mengatur letak font gunakan move tool. Jika ingin memberikan style pada tulisan my web caranya sama pada langkah kedua cuma disini yang di click pada layer my web seperti gambar. 
   
3. Pada header saya menambah sebuah kotak cara membuatnya click Rounded Rectangle Tool ( gambar kotak pada tool panel sebelah kiri ) seperti pada gambar : 
   
4. Selanjutnya tinggal membuat kotak pada bagian header, tambahkan style pada kotak caranya sama dengan langkah kedua diatas tapi disini dengan meng-click Shape 1 pada tab layer seperti pada gambar :
   

Langkah Keempat, Membuat Menu :

1. Disini saya membuat Menu HOME, PROFILE, GALERY FOTO dan LINK. Untuk membuat menu ini caranya sama dengan langkah ketiga cara 1 dan 2 membuat Tulisan MY WEB, cuma disini saudara harus membuatnya satu-satu dan untuk mengatur penempatannya gunakan move tool. 
2. Untuk membuat menu menjadi bentuk tombol, caranya tambah Rounded Rectangle Tool pada      tiap menu dan atur Style, Opacity dan Fill seperti gambar berikut : 
   
3. Pada gambar diatas dapat saudara lihat saya memberikan Style Effect : Inner Shadow, Outer Glowdan Gradient Overlay yang saya lingkari kotak orange dan pada kotak merah Opacity 47% dan Fill 89%,  disini saudara bisa mengatur sendiri sesuai style yang saudara inginkan dengan cara diatas.   

Langkah Kelima, membuat Ruang Content :

1. Sedikit penjelasan, Apa itu ruang content...? Disini saya artikan sebagai ruang untuk menampilkan isi dari menu. Semoga Aja kagak salah...hehehee
2. Cara Membuat ruang content, Disini saya menempatkan sebuah Rectangle Tool, caranya Click Rectangle Tool atau gambar kotak pada tool panel sebelah kiri, lalu buatlah kotak pada layer gambar sesuai dengan ruang content yang telah saudara sediakan dan aturlah stylenya seperti penjelasan Langkah kedua diatas, disini saya memberikan ceklis pada Outer Glow dan Inner Glow.
3. Untuk Mengatur agar kotak kelihatan Transparant, Pada Tab Layers Kanan Bawah Atur Opacity: 25% dan Fillnya: 13%.
4. okay....sampai disini layout template sudah jadi seperti gambar dibawah :
   

Langkah Enam, Menyeleksi bagian layout template :

1. seleksi bagian-bagian layout yang akan di fungsikan pada website dengan menggunakan Slice Tool (gambar pisau pada tool panel ). 
   
2. Pertama, seleksi pada bagian header,
3. Kedua, seleksi pada bagian menu, disini kita harus seleksi satu-satu bagian menu, jadi disini terdapat 4 bagian seleksi
4. Ketiga, seleksi pada bagian Content
5. Dan terakhir seleksi pada bagian-bagian lain yang tersisa pada layout template, seperti pada gambar berikut :
   
6. Sampai disini saya anggap seleksi layout sudah topmarkotop deh....*_^

Langkah Tujuh, Menyimpan Layout Template :

1. Okay Langsung Saja, pada pojok kanan atas Click File -> Click Save For Web & Devices. lalu akan muncul layar wizard untuk setingan savenya. Disini saudara bisa memilih format gambar yang akan di save dan setingan lainnya.
2. Jika saudara sudah memilih format gambarnya lalu tekan tombol save, lalu akan muncul layar Save Optimized As.
3. Disini saya sarankan saudara membuat sebuah folder dulu, caranya langsung Click kanan aja pada ruang kosong pada Save optimized As -> pilih New -> Folder -> beri nama Myweb -> lalu simpan Template Saudara di dalam folder tersebut, sebelum di save beri file name saudara dengan index dan pilih opsiHTML dan Images untuk save as type. 
   
4. Silakan buka folder Myweb lalu click file index yang telah kita simpan dengan browser kesayanagan saudara...sip markusip template yang kita buat telah selesai...tapi disini baru berbentuk gambar...hehehee

Okay Sampai disini Template Web Personal dari foto yang kita buat dengan photoshop sudah selesai, selanjutnya saya akan menjelaskan bagaimana memfungsikan semua menu dan menjadikan Website Personal untuk Saudara ... Tapi berhubung mata udah setengah watt dan saya mw mimpi indah malam ini saya tidur dulu...hahihuheho.....

Read More