Membuat Website Profesional Tanpa Coding Menggunakan Adobe Muse CC

Posted by Tutorial Thuval on

Thursday, June 16, 2016

Tutorial kali ini saya akan sharing tutorial Membuat Website Profesional Tanpa Coding Menggunakan Adobe Muse CC, selain adobe CC software adobe yang biasa di gunakan untuk membuat website adalah Dreamweaver, tapi permasalahan nya untuk membuat website menggunakan dreamweaver itu kita harus mengerti coding, sedangkan untuk membuat website menggunakan adobe muse cc anda tidak perlu jago coding, yang perlu anda lakukan adalah mencari inspirasi design di website-website yang sudah ada. misalnya kalau anda ingin membuat website flat design maka anda tinggal mencari website flat design maka anda bisa meniru gaya nya dan hanya tinggal di modifikasi sesuai dengan selera anda.

untuk mempersingkat waktu mari kita mulai bagaimana cara membuat website profesional tanpa coding menggukan software adobe muse cc 2015 tanpa coding yang tentu nya akan memudahkan anda dalam menciptakan website yang anda inginkan.

1. setelah anda membeli software adobe muse cc tentu nya anda jalankan software tersebu.
2. pada saat awal anda membuka software adobe muse maka anda akan di hadapakan pada welcome screen seperti yang terlihat pada gambar berikut ini
3. untuk membuat website baru cara nya silahkan klik Site pada pilihan creat New
4. maka tahap selanjutnya adalah anda di hadapkan pada jendela untuk mengatur proferti website anda seperti yang terlihat pada gambar berikut ini 
   
5. disana anda bisa mengatur lebar dari website anda, mengatur padding dan mengatur column website anda, silahkan di sesuaikan dengan yang anda inginkan, untuk mengetahu setingan ini anda bisa mencari referensi dari website yang sudah ada. silahkan di atur sesuai dengan keinginan anda, setelah selesai silahkan klik OK.
6. maka akan terbukan Plan website anda, di plan ini anda bisa mengatur untuk menambahkan halaman baru, menambahkan website tampilan tablet maupun sampilan smartphone, untuk membuat desain pada website anda maka yang harus anda lakukan adalah klik pada master page, master page sendir adalah yang saya berit kotak berwarna merah sementar yang saya beri kotak warna biru adalah Home dari website anda. untuk menambahkan halaman about maupun kontak maka anda tinggal klik icon tambah yang ada di samping plan Home. 
   
7. mulailah design website anda dengan klik master page yang saya beri tanda dengan kotak merah. sehingga nanti nya tampil halaman design, dimana disana anda bisa mengatur segala sesuatu nya, membuat header membuat footer menambahkan gambar, menambahkan widget, maupun menambahkan objek lain nya. 
   
8. kalau anda sudah pernah menggunakan photoshop maka anda sudah familiar dengan tool yang saya beri kotak biru, disana ada text tool, rectangle tool dan lain-lain, jadi cara menggunakan nya anda tinggal memilih tool yang tersedia dan gunakan di halaman website anda. kalau anda ingin menambahkan tulisan.

barikut ini adalah cara menambahkan gambar pada Header di adobe muse

langkah pertama silahkan atur terlebih dahulu ukuran header website anda berapa tinggi nya dengan menggeser 

 ke ukuran yang anda inginkan. setelah anda menentukan tinggi dari header, sekarang gunakan rectangle tool dan buat retanggle sesuai dengan ukuran website yang sudah anda buat tadi. 

 silahkan lihat contoh gambar header yang sudah buat, lalu sekarang klik pilihan fill 

 

untuk mengganti rectangle tadi menjadi gambar, maka silahkan klik icon folder yang ada di samping tulisan image, dan cari gambar yang akan anda jadikan header. pada pengaturan fitting pilih scale to fill sementara untuk posision ganti jadi center atau tengah. agar lebih profesional tampilan header website anda maka sekarang buat rectangle lagi dan tutup gambar yang sudah anda jadikan header.

 

pada contoh diatas saya menutup header gambar dengan rectangle dengan fill warna merah, lalu sekarang silahkan klik tab Fill lagi seperti yang saya jelaskan ketika akan menambahkan gambar ke dalam heade. lalu sekarang pilih opacity rectangle warna merah menjadi 70-80% sehingga akan tampak seperti berikut ini.

anda bisa mengganti fill warna merah dengan warna yang lebih anda suka yang jelas bagaimana cara nya agar website anda memiliki tampilan warna yang profesional.

tahap menambahkan header sudah selesai, untuk memudahkan anda dalam mendesign header website profesional maka anda bisa mencontoh header website profesional yang sudah ada di internet, anda tinggal melihat objek apa saja yang ada pada header. contoh nya seperti menu, Herro text atau objek lain nya, jadi sekali lagi lebih baik anda mencari website yang menurut anda tampilan nya sangat bagus, dan contoh bagaimana desain website tersebut, bukan berarti anda harus mencontek 100% tapi anda bisa mengembangkan sesuai dengan kreasi anda.

membuat website profesional menggunakan adobe muse memang sangat gampang, anda tidak harus menguasai coding, inti nya anda harus memiliki referensi website yang tampilan nya sudah profesional, untuk itu carilah website di internet bukan blog.

berhubung tutorial ini akan panjang kalau di jadikan satu artikel, maka saya akan melanjutkan di artikel selanjutnya, yang jelas sekarang anda paham dulu bagaimana membuat header di website di artikel selanjutnya insya Allah saya akan menjelaskan bagaimana menambahkan widget, menambahkan objek lain nya ke dalam website dengan mudah sampai ke tahap upload website anda ke penyedia hosting agar website anda bisa di akses oleh semua orang.

untuk anda yang ingin membaca tutorial lanjutan dari artikel ini, silahkan terus kunjungi blog ini karena dalam beberapa hari kedepan saya akan terus menulis artikel tentang cara membuat website profesional tanpa coding menggunakan adobe muse cc.

salah satu landing page yang saya buat menggunakan adobe muse bisa anda lihat di www.vektor.mandiri-chiller.com.

Labels: Tutorial

Terima kasih sudah membaca Membuat Website Profesional Tanpa Coding Menggunakan Adobe Muse CC . Silahkan share ke teman anda...!