Ingin buat website, tapi bingung membuat
designnya? Atau ingin punya website dengan tampilan bak professional
webmaster? Ada beberapa cara yang bisa ditempuh. Cara yang paling
praktis adalah, tentu saja membeli website template yang sudah siap pakai. Tapi kalau kita ingin sedikit berhemat, mudah-mudahan uraian berikut bisa sedikit membantu
Supaya nggak terlalu pusing belajarnya,
maka saya akan bagi bab ini menjadi 2 bagian. Bagian pertama ini saya
hanya akan membahas tentang membuat dan memodifikasi website templates
saja. Insya Allah di bagian berikutnya, saya baru akan membahas mengenai
menggunakan template tersebut untuk website kita.
Banyak website template yang bisa kita
download dari internet, baik yang berbayar maupun yang gratisan. Kalau
mau yang berbayar, salah satu rekomendasi saya adalah
JogjaTemplate.com, karena selain designnya OK, pelayanannya juga sangat memuaskan
. Kalau mau yang gratisan, bisa cari lewat google, misal dengan keyword
“free website templates” atau sejenisnya. Website templates ini
biasanya disediakan dalam format HTML atau PSD. Mana yang mau dipakai,
itu tergantung kebutuhan kita.
Cara yang paling praktis memang menggunakan template yang sudah dalam bentuk HTML.
Template ini bisa langsung kita gunakan, kalau memang layout dan
susunan menunya benar-benar sesuai dengan kemauan kita. Masalahnya
adalah template HTML ini kurang fleksibel, karena biasanya sebagian
besar elemennya, misalnya navigation atau menu nya sudah dalam bentuk
image, sehingga sulit untuk mengubahnya.
Karena itu, saya pribadi lebih suka memakai template dengan format PSD
(Photoshop Document), karena template jenis ini lebih fleksibel dan
lebih mudah dalam mengeditnya. Jika semua sudah sesuai dengan keinginan
kita, baru nanti kita konversi ke dalam format HTML.
Ok, saya asumsikan Anda sudah memilih website template yang ingin Anda edit, dan Adobe Photoshop sudah terinstall di komputer Anda.
Gambar berikut ini adalah contoh website template yang akan saya edit.
Pada dasarnya, gambar PSD ini terdiri
dari beberapa layer/lapisan. Layer-layer ini yang nantinya dapat kita
modifikasi atau kita hilangkan, sesuai dengan kebutuhan dan selera kita.
Untuk memodifikasi bagian tertentu dari
template tersebut, kita harus tahu dulu bagian itu termasuk ke dalam
layer yang mana. Supaya lebih mudah, saya langsung jelaskan dengan
contoh saja ya
Misalnya saya ingin mengetahui, di template saya, gambar sepatu di samping tulisan “Red Tag Diva” itu layer yang mana ya? Inilah yang akan saya lakukan:
- Pastikan dulu tool yang saya pilih saat ini adalah Move Tool (V), ada di tools section, gambar panah, di sebelah kanan atas
- Klik kanan di gambar sepatu, kemudian muncul daftar layer berikut (ini berbeda untuk website template)
header
`,.//d
layer 24
midbox
…
- Untuk memastikan gambar sepatu tersebut termasuk layer yang mana,
saya harus memastikan melalui layer window (biasanya di bagian kanan
bawah window photoshop Anda), trial and error, sampai menemukan layer
yang tepat. Misal saya coba header dulu. Cari layer dengan nama header,
kemudian klik gambar mata di sebelah kirinya. Perhatikan apa yang
terjadi. Jika bagian yang hilang adalah tepat bagian yang kita maksud,
berarti kita sudah menemukan layer yang tepat. Namun jika bagian yang
hilang adalah bukan bagian yang kita maksud, berarti kita harus mencoba
layer yang lain lagi.
Nah, sekarang kita sudah belajar menentukan layer yang tepat untuk bagian yang ingin kita modifikasi. What’s next?
Saatnya memodifikasi template kita!!!
Berikut ini adalah beberapa modifikasi dasar yang bisa kita lakukan.
Modifikasi Text
Ini adalah modifikasi yang hampir pasti
perlu kita lakukan, karena kita harus mengubah website title atau
navigation menu sesuai dengan kebutuhan kita kan
Langkah-langkahnya adalah sebagai berikut:
- Tentukan dulu layernya, sudah saya jelaskan tadi di atas kan
- Pilih Horizontal Type Tool (T)
- Blok tulisan yang ingin kita edit
- Ketik tulisan yang kita inginkan
Oya, kita juga bisa memodifikasi atribut
font nya juga, seperti jenis font, ukuran, style, dll. Caranya tidak
jauh berbeda dengan ketika kita modifikasi font di MS Word atau text
editor lainnya. Font attributes akan otomatis muncul (biasanya di bagian
atas) ketika kita memilih layer yang berupa text.
Gimana mudeng po ra? hahaha abis ini modifikasi lagi ribet lagi dah XD
Modifikasi Gambar
Ada kalanya kita perlu memodifikasi gambar tertentu, baik mengubah ukuran gambar, rotasi, dll.
Langkah-langkahnya adalah sebagai berikut:
- Tentukan dulu layernya
- Untuk mengatur ukuran gambar, pilih menu Edit > Transform,
kemudian pilih menu sesuai kebutuhan kita: Scale/Rotate/Skew/… , atau
kita bisa juta pilih menu Edit > Free Transform jika kita hanya ingin
merubah ukuran dan/atau merotasi gambar.
- Lakukan modifikasi yang diperlukan
- Pilih Move Tools (V), lalu biasanya sistem akan meminta konfirmasi tentang perubahan yang kita lakukan
Menghapus Bagian yang Tidak Diperlukan
Untuk yang ini caranya cukup mudah kok, tinggal pilih layernya, klik kanan, lalu pilih menu Delete Layer. Selesai
Mengubah Posisi Layer
Yang satu ini juga sangat simple. Tinggal pilih layernya, lalu atur posisinya dengan menggunakan mouse atau tombol panah
Ok, sekarang kita sudah punya template yang sudah siap untuk digunakan
. Bagi yang belum terbiasa menggunakan Adobe Photoshop, mungkin awalnya
akan terasa sedikit ribet, tapi jangan kuatir, kalau sering
dipraktekkan, lama-lama juga akan terbiasa dan paham kok
