ADOBE PHOTOSHOP

Membuat Design Website dengan Adobe Photoshop (1)

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:

1. Pastikan dulu tool yang saya pilih saat ini adalah Move Tool (V), ada di tools section, gambar panah, di sebelah kanan atas
2. Klik kanan di gambar sepatu, kemudian muncul daftar layer berikut (ini berbeda untuk website template)
header
`,.//d
layer 24
midbox
…

3. 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:

1. Tentukan dulu layernya, sudah saya jelaskan tadi di atas kan
2. Pilih Horizontal Type Tool (T)
3. Blok tulisan yang ingin kita edit
4. 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.

Modifikasi Gambar

Ada kalanya kita perlu memodifikasi gambar tertentu, baik mengubah ukuran gambar, rotasi, dll.

Langkah-langkahnya adalah sebagai berikut:

1. Tentukan dulu layernya
2. 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.

3. Lakukan modifikasi yang diperlukan
4. 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

Membuat Design Website dengan Adobe Photoshop (2)

Belajar belajar belajar… praktek praktek praktek praktek praktek… ayo kita belajar buat design website lagi… :idea: :arrow:
Sebelumnya aku mohon maaf lahir dan batin dulu yaaaa :mrgreen: , baru sekarang ini aku sempet bikin episode lanjutan dari Membuat Design Website dengan Adobe Photoshop(1) :mrgreen:
Langsung aja yaaaa… :arrow: aku anggap semua udah selesai utak atik template photoshop, jadi sekarang tinggal gimana caranya supaya website template yang masih berformat adobe photoshop document (*.psd) itu bisa diubah jadi html :idea:

1. Potong-potong templatenya
Gunakan slice tool, lalu kita potong template nya jadi beberapa bagian

Yang harus “dipotong” itu adalah bagian-bagian yang nantinya akan jadi button/menu navigasi. Kalo bagian yang lain sih tinggal disesuaikan saja dengan kebutuhan kita, misal untuk bagian content ya sebaiknya jadi 1 potongan saja, biar gampang nanti utak-atik di HTML nya. Memang sih, dulu waktu awal-awal juga aku berapa kali ubrak abrik potongannya, tapi ya memang harus begitu kayaknya, harus banyak coba-coba sendiri karena berbeda untuk tiap design. Kalau sudah sering coba, nanti juga tau sendiri gimana “pola potongan” yang efektif, efisien dan optimal :idea:
2. Ubah template photoshop jadi file HTML
Pilih menu File > Save for Web, lalu save dengan nama file yang kita inginkan


sehingga nantinya akan ada 2 file baru:

Dan website template pun siap untuk digunakan