15 Cara Membuat Desain Web Dengan Photoshop Dan Dreamweaver

December 1, 2020 by No Comments

Photoshop dan Dreamweaver adalah dua software terbaik dari Adobe, dan dapat membantu penggunanya untuk membuat desain website yang menarik. Dalam desain website yang baik dan benar, tentunya anda harus memperhatikan tentang penggunaan warna, kombinasi warna dan lain sebagainya sehingga desain website anda menjadi lebih menarik.

Pada saat ini, kami telah menyusun 15 cara membuat desain web dengan Photoshop dan Dreamweaver. Nah, untuk pembahasannya, anda bisa simak ulasan yang telah kami sediakan seperti berikut ini.

  1. Yang pertama anda dapat membuka aplikasi Photoshop terlebih dahulu dalam cara membuat desain web dengan Photoshop dan Dreamweaver. Pastikan resolusi monitor anda berupa 1024 x 768 pxl.
  2. Dalam Photoshop anda akan menemukan fitur Slice yang akan digunakan sebagai pemotong gambar, Convert Images for Web berfungsi untuk mengoptimalisasi gambar yang akan di olah. Selanjutnya ada ImageReady yang dapat mempermudahkan penggunanya dalam melihatnya di browser.
  3. Kemudian anda dapat mengkonvert ke ImageReady. Lalu tekan File dan kemudian Save Optimezed As, setelah itu anda dapat memilih HTML – Images.
  4. Sesudah itu, anda dapat mendesain tampilan dari website di dalam Photoshop. Dalam hal ini, anda dapat memakai Guide Line, lalu anda dapat memotongnya hingga menjadi beberapa bagian kecil.
  5. Gunakan Slice tool dalam memotong gambar. Setelahnya anda dapat mengoptimized gambar yang sudah di slice tadi.
  6. Jika sudah anda dapat memilih menu File, lalu Save for Web.
  7. Bagi anda sudah melakukan beberapa cara yang ada diatas. Maka selanjutnya anda dapat memanfaatkan software Dreamweaver. Pilih Create New HTML, lalu anda dapat mengisikan Judul website.
  8. Kemudian, anda dapat memilih mode Design, lalu simpanlah hasilnya dengan format index.html (di tempatnya yang sama seperti folder gambar sebelumnya).
  9. Nah, jika anda ingin melihatnya, anda dapat klik File, lalu Preview in Browser, pilihlah IE/Firefox.
  10. Kembali lagi ke software Dreamweaver, di panel sebelah kananya telah tersedia CSS.
  11. Selanjutnya anda bisa mengklik Plus, lalu Pilih tag pada kolom Selector type. Pilih body pada kolom Tag. Di kolom Devine in, anda dapat memilih This document only.
  12. Cara membuat desain web dengan Photoshop dan Dreamweaver, dimana anda dapat mengklik OK. Lalu anda dapat menyimpanya kembali dengan menekan CTRL + S.
  13. Lakukan cara yang sama seperti sebelumnya, hanya saja anda memilih Advanced pada Selector type, ketik #logo di bagian Selector, dan pilihlah This document only pada Devine in. Ikutlah petunjuk selanjutnya hingga anda dapat menghasilkan desain website yang rapi saat di tampilkan ke browser. Jika sudah, maka anda dapat mengklik OK.
  14. Pilih Insert Div Tag, dan kemudian anda akan melihat beberapa mode berupa Insert, Class, ID. Buatlah sesuai dengan apa yang menjadi keinginan anda.
  15. Bagi anda yang sudah mengikuti beberapa cara yang ada diatas, maka anda dapat simpan dan lihatlah hasilnya yang seperti apa.