cara membuat desain web dengan photoshop dan dreamweaver
cara membuat desain web dengan photoshop dan dreamweaver

cara membuat desain web dengan photoshop dan dreamweaver

DESAINIO – cara membuat desain web dengan photoshop dan dreamweaver

Berikut ini akan dijelaskan mengenai cara membuat desain web dengan photoshop dan dreamweaver, semoga dapat memberikan manfaat.

Inilah penjelasan mengenai cara membuat desain web dengan photoshop dan dreamweaver, simak selengkapnya berikut ini.

Ada banyak alasan mengapa Anda mungkin ingin membuat desain situs web Anda sendiri. Mungkin salah satu alasannya adalah memiliki situs web yang terlihat berbeda dari yang lain.

Bergabunglah dengan kami dalam tutorial Photoshop ini untuk mempelajari cara membuat proyek web dengan cepat dan mudah di Photoshop. Tentu saja yang akan saya tunjukkan di sini hanyalah penjelasan berupa teknik dasar untuk membuat desain dan template website. , sehingga tata letak yang sangat besar pun terlihat menarik. Sederhana. Kreativitas yang Anda miliki memungkinkan Anda untuk melakukan perubahan nanti jika diperlukan.

Padahal, membuat desain website membutuhkan dua langkah. Langkah pertama adalah membuat layout di aplikasi Photoshop. Langkah kedua adalah menggunakan aplikasi Dreamweaver Anda untuk membuat kode HTML untuk gambar.

Blog ini hanya membahas tutorial Photoshop, jadi ini baru langkah awal cara membuat layout website atau blog menggunakan Photoshop. Anda dapat mencari Google untuk tutorial tentang membuat kode HTML. Jangan khawatir, ada banyak website yang memberikan informasi tentang cara membuat HTML di aplikasi Dreamweaver. Nah, tidak perlu berlama-lama lagi. Mari kita lihat cara membuat desain website menggunakan Photoshop di bawah ini.

cara membuat desain web dengan photoshop dan dreamweaver

Langkah pertama

Langkah pertama dalam membuat desain web adalah membuat tata letak desain awal. Buat kanvas baru dengan ukuran 700 x 875 piksel dan resolusi 72 ppi. Jangan lupa untuk mengatur konten latar belakang dengan opsi transparan.

Langkah kedua

Klik alat Rounded Rectangle di kolom Toolbox dan buat persegi panjang yang memanjang ke bawah. Ini akan digunakan sebagai latar belakang untuk desain web yang Anda buat.

Langkah ketiga

Klik kanan pada layer bentuk 1 dan pilih opsi campuran. Kemudian klik Gradient untuk membuat gradien warna pilihan Anda. Agar gradasinya terlihat seperti ini, saya memilih warna hijau agak kecoklatan dengan warna dasar putih.

langkah keempat

Langkah selanjutnya adalah membuat panel menu yang nantinya akan diisi dengan berbagai kategori menu. Klik alat Rounded Rectangle lagi dan buat kotak persegi kecil di sudut kiri atas latar belakang. Tetapkan gradien warna yang sedikit berbeda sehingga tidak menyatu dengan warna latar belakang.

langkah kelima

Buat persegi panjang memanjang dengan Rounded Rectangle Tool dan berikan warna yang lebih terang seperti yang ditunjukkan pada gambar di bawah.

langkah keenam

Masuk ke kolom menu yang Anda buat. Kolom menu biasanya menampilkan berbagai kategori mulai dari halaman utama, about me, galeri foto, dan berbagai link yang mengarah ke website. Jangan lupa untuk menambahkan gambar menarik lainnya di sebelah kanan background agar desain website Anda tidak terlihat terlalu kosong dan monoton.

langkah ketujuh

Gunakan Slice Tool untuk memotong layer menjadi beberapa bagian. Daftar menu dibagi menjadi empat bagian sesuai dengan kategori yang ada. Kemudian logo website di sebelah kanan akan dipotong menjadi satu bagian. Buat satu bagian di bawah ini untuk konten atau konten web Anda

langkah kedelapan

Anda sekarang telah menyelesaikan desain web sederhana. Sekarang tinggal masuk ke menu File > Save for Web and Devices… untuk menyimpan.

langkah kesembilan

Pada layar wizard saat menyimpan, atur sebagai berikut.

Ini adalah langkah pertama dalam membuat desain web Photoshop yang cepat dan mudah. Cukup edit menggunakan Macromedia Dreamweaver dan masukkan kode HTML ke dalam desain Anda sehingga dapat digunakan sebagai template untuk situs web atau blog Anda. kamu punya.

Leave a Reply

Your email address will not be published.