Home » » Membuat Template Website dengan Photoshop

Membuat Template Website dengan Photoshop

Written By Pontianus Setiawan on Tuesday, January 14, 2014 | 9:30:00 AM

The Great Spayser's (Pengunjung blog spays corp), 
Pernahkan anda mencoba membuat sebuah website dengan photoshop?

Jika belum dan bahkan belum pernah mendengarnya, saya akan mencoba memberikan sebuah cara atau tutorial membuat sebuah template website dengan menggunakan Photoshop. Cara ini sangat mudah, karena dapat mempercepat kita dalam membuat sebuah website dengan tampilan yang sangat mennarik dan dalam waktu yang sesingkat singkatnya dan dengan cara yang saksama (hehehehehee jadi kayak teks proklamasi).

Tapi sebelumnya neh, Spayser's mesti agak paham dulu dengan photoshop donk. Jadi agar lebih mudah dan gampang dalam pembuatannya. Jika emang belum paham, Spayser's dapat mencarinya tutorial Photoshop di Mbah Google. Pasti anda akan mendapatkannya.
Oke dah! tanpa berlama-lama lagi, inilah Tutorialnya:

- Buka Photoshop
- Pilih New
- Pada bagian Preset, pilih web dengan size terserah anda. Tapi yah disesuaikan dengan kebutuhan website      agan-agan Spayser's.
- Kemudian buatlah beberapa kotak dengan Rectangular Marquee Tool (M)
- Warnailah kotak kotak tersebut sesuai dengan keinginan anda.  Contoh:



- Silahkan abaikan pada bagian menu (home, profil, setting). Anda buat saja kotak yang berwarna merah,       hijau dan hitam tersebut dan jangan lupa kotak footer di paling bawah sendiri (di gambar tidak terlihat).
- Kemudian buatlah line/garis untuk membatasi setiap kotak kotak yang telah dibuat. Gunanya untuk      mempermudah ketika melakukan pemotongan gambar dengan Slice Tool (C).
- Potonglah setiap kotak dengan Slice Tool (C), sehingga semua bagian akan terpisah pisah. Seperti di gambar berikut:

Ket:

Potonglah dengan slice tool setiap kotak kotak di gambar ini, yaitu kotak warna merah (header), kotak warna hijau, kotak warna putih dan kotak warna hitam.









- Setelah itu klik file dan pilih Save for web & devices...
- Simpanlah dengan nama index  dan format .html.
- Jika sukses maka akan ada file index. html dan 5 potongan gambar.


Tugas Photoshop untuk sementara ini udahan dulu Spayser's, nah sekarang tugasnya dreamweaver dalam tahap perancangan selanjutanya. Buka Dreamweaver sob, lalu:
- buka index yang tadi kita simpan.
- maka akan muncul template yang sudah kita bikin tadi. 
- lalu, bukalah file css3menu yang kita buat. Klo belum pernah buat, silahkan kunjungi http://corspays.blogspot.com/2014/01/membuat-css3-menu.html.

- copy koding pada file css3 tersebut, yang disalin adalah koding yang terletak di antar <body> dan </body> saja ya. (jangan lupa!)

- Lalu sisipkan/ pastekan kode tersebut di tempate index, terutama pada kotak yang berwarna hijau. Lihat gambar di atas.

- Cara menyisipkannya, klik bagian yang berwana hijau, pindahkan modenya menjadi code. lalu hapus kode berikut ini:   <img src="images/index_04.gif" width="787" height="554" alt=""> dan gantilah dengan kode yang terdapat pada css3.

lalu simpan dan pencet F12 di keyboard....
so, sukses dah template dengan Photoshop anda.

let's try.



loading...

2 komentar: