Ingin punya bisnis sendiri? Ingin punya penghasilan tambahan? Yang satu ini bisa dikerjakan dari rumah atau dari mana pun saja!
Powered by MaxBlogPress 

Membuat Design Website dengan Adobe Photoshop (1)

belajar bisnis online

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)
  3. header
    `,.//d
    layer 24
    midbox

  4. 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 :-)

Untuk sementara sekian dulu, di kesempatan berikutnya, Insya Allah saya akan sharing mengenai cara agar template PSD yang sudah kita buat bisa digunakan di website kita. Makanya, kalau nggak mau ketinggalan berita, sering-sering saja mampir kesini ya, atau subscribe saja lewat email ;-)

panduan membuat website

Bookmark and Share

Incoming search terms:

  • desain web dengan photoshop
  • desain website dengan photoshop
  • cara membuat template website dengan photoshop
  • cara membuat desain web dengan photoshop
  • cara desain web dengan photoshop
  • membuat desain web dengan photoshop
  • tutorial desain web dengan photoshop
  • membuat template dengan photoshop
  • membuat template website dengan photoshop
  • cara mendesain web dengan photoshop

19 Responses to Membuat Design Website dengan Adobe Photoshop (1)

  1. [...] Sebelumnya aku mohon maaf lahir dan batin dulu yaaaa , baru sekarang ini aku sempet bikin episode lanjutan dari Membuat Design Website dengan Adobe Photoshop(1) [...]

  2. Forum Humor says:

    Tapi ada hal yang belum diterangin awalnya nih, terangin donk bikin template sama gambarnya dari awal….itu yang mumet :D

    eh…di langkah no 3 itu imagenya nggak ke slice sempurna….sampai-sampai keliatan ada 9 tab window yang lagi dibuka :lol:

  3. deeonyssa says:

    waduuuhhh.. klo bikin template sama gambar dari awal aku jg blm pernah bos :oops: mending tanya langsung ke ahlinya aja deh :mrgreen: , kan ada tuh pakar yang di jogja :wink:
    hihihi iya sik sik bentar ta’ edit dulu ah xixixi :lol: thanks ya :oops: :oops: :oops:

  4. eghie says:

    saya mau tanyakan bagaimana membuat formulir pendaftaran secara online. yang secara otomatis apabila mengisi formulir tersebut akan langsung tersimpan ke database. disini program database apa yang cocok untuk di gunakan (microsoft access).
    tolong yaaa bagi yang mengerti kirim tutorialnya ke alamat email saya.

  5. queen says:

    susah banget bikin web lewat photoshop

    disekolah diajarin c…
    :?:

    cmn y itu tadi…. :wink:

    ribet banget… :cry:

  6. chels says:

    terangin lebih detail dunk.. gimana c caranya buat template yang bener dari macromedia dreamweaver…. :)

  7. lena says:

    tolong kasih tau donk gimana caranya masukin adobe photoshop ke dreamweaver…..

    kalau kita ambil web gratis trus ada yg mau kita edit tp nga bisa trus gmN ????

    Gbu :( :)

  8. eghie says:

    makasih ilmunya…. saya mau minta tolong nih

  9. ichuell says:

    waw keren… makasih ya mas informasinya.. :D

    and sekalian blog walking neh :D

  10. deeonyssa says:

    @eghie
    program database nya ya bisa pake MS Access itu bro, untuk interfacenya bisa pake VB atau yang lain, atau bisa juga pake form dari MS Access itu langsung. tapi aku jarang pake sih, biasanya aku pake MS Access + Delphi, itupun udah lama ga pake lagi :D

    @queen
    hmmm iya awalnya emang rada ribet yah, tapi lama2 kalo udah biasa nggak kok :wink:

    @chels
    waduuhh gmn ya bingung juga neranginnya kalo lewat blog gini ya :D

    @lena
    soal transfer dari photoshop ke dreamweaver udah aku jelasin disini yah: http://www.deeonyssa.com/design-website-adobe-photoshop/
    hope it helps :)

    @eghie
    minta tolong apa mas? jgn susah2 ya masih belajar juga nih hihihi :p

    @ichuell
    weks… aku cewek tulen lhooooo wkkk :p

  11. Fajar says:

    thanks atas tips2nya,paz bgt aku lg btuh cra desain nii yg mnarik :wink:

  12. Achmad Dani says:

    -Buat Website dengan photo Shop
    dan Caranya masukin Button nya
    atau link???????????????
    Thank’s :) :lol:

  13. deeonyssa says:

    setauku sih biasanya photoshop itu dipake di tahap desainnya aja ya, hbs itu di save ke HTML baru deh diutak-atik HTML nya disitu…

    klo button biasanya berupa image juga, bikin sekalian aja di photoshopnya, trus kan nanti di potong2 (pake slice tool), trus pas habis convert ke HTML tinggal dikasih link biasa aja deh…

  14. dodograf says:

    pengen belajar bikin website..

  15. aji says:

    lanjut ke tutor kedua..

  16. adakah software lain selain photoshop dan jangan lupa untuk video tutorialnya

  17. Hania says:

    makasih ilmunya.. blognya bagus.. :)

  18. BJuser says:

    Mantaaap tutorialnya, sukses terus

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>