Mendesain Halaman Web di Photoshop untuk Dreamweaver
Hello Sobat Grafisnesia kali ini saya akan membagikan artikel Cara Mendesain Halaman Web di Photoshop untuk Dreamweaver, Meskipun Photoshop terutama merupakan program pengeditan gambar dan efek, ini juga merupakan alat yang hebat untuk mendesain tampilan halaman web.
Menggunakan alat yang di sediakan, Photoshop dapat dengan mudah digunakan untuk membuat desain yang tampak profesional yang kemudian dapat ditransfer ke Dreamweaver untuk pekerjaan kode yang sebenarnya.
Sesudah pekerjaan desain yang sebenarnya dilakukan di Photoshop, Anda akan menemukan bahwa menghidupkan halaman web dengan Dreamweaver tidaklah sulit.
Desain halaman Web dengan Photoshop
Langkah 1
Buka Photoshop, klik menu “File”, dan pilih “New.” Pilih “piksel” sebagai unit pengukuran Anda, lalu ketik lebar dan tinggi yang diinginkan untuk halaman web Anda.
Untuk kompatibilitas pengguna akhir maksimum, Anda harus memilih lebar kurang dari 1100 piksel. Biarkan latar belakang putih, atur resolusi ke “72” dan pastikan mode warna diatur ke “RGB Color”. Klik Oke.”
Langkah 2
Klik alat “Bentuk” pada bilah alat dan pilih jenis bentuk yang diinginkan untuk desain Anda. Setelah dipilih, klik dan seret pada dokumen untuk membuat bentuk Anda. Ulangi ini sesuai kebutuhan dengan berbagai bentuk untuk membuat desain halaman web Anda.
Untuk mengubah warna atau gaya bentuk setelah Anda membuatnya, klik dua kali bentuk di palet “Lapisan” dan lakukan pengeditan yang diinginkan. Cara Mendesain Halaman Web di Photoshop untuk Dreamweaver
Langkah 3
Tambahkan teks yang diinginkan ke desain halaman web dengan alat “Teks” di bilah alat. Kecuali Anda membuat logo, Anda harus selalu menggunakan font standar yang sangat mudah dilihat, seperti Verdana, Georgia, atau Times New Roman (hanya untuk beberapa nama saja).
Setelah Anda memiliki semua lapisan yang Anda inginkan untuk halaman web Anda, klik dua kali satu lapisan pada satu waktu untuk mengganti namanya. Ini akan membantu Anda mengingat kegunaan setiap lapisan.
Transfer atau kirim desain ke Dreamweaver
Langkah 1
Klik dua kali setiap bentuk dan lapisan teks yang telah Anda aktifkan warna tertentu, dan klik carikan warna untuk melihat kode HEX untuk warna tersebut. Anda memerlukan kode-kode ini saat mentransfer desain Anda ke Dreamweaver.
Setelah selesai, simpan halaman dalam format default (PSD) Photoshop, lalu simpan salinan JPEG. JPEG akan digunakan sebagai gambar referensi dan Anda dapat menggunakan PSD jika ingin melakukan perubahan.
Baca juga artikel : Cara Membuka File CR3 di Photoshop
Langkah 2
Buka Dreamweaver dan buat dokumen HTML baru. Buka tab “Sisipkan” dan sisipkan tabel atau DIV baru dan atur atribut elemen agar cocok dengan yang digunakan dalam tata letak Photoshop Anda (misalnya lebar/tinggi dan warna latar belakang).
Saat mereferensikan gambar JPEG tata letak halaman web Photoshop Anda, ketikkan teks yang diperlukan di tempat yang sesuai dan sejajarkan berbagai elemen agar sesuai dengan tata letak Photoshop Anda.
Langkah 3
Kembali ke gambar JPEG desain Anda dan gunakan alat potong di Photoshop untuk memotong bagian logo gambar. Simpan di folder tempat Anda menyimpan file HTML.
Kembali ke Dreamweaver, buka tampilan Desain dan klik di mana Anda ingin menyisipkan logo. Buka tab “Sisipkan” dan klik “Gambar” untuk memasukkan logo Anda ke halaman web.
Halaman Anda yang dirancang dengan Photoshop/Dreamweaver sekarang siap digunakan.
Terima kasih telah membaca artikel! Kami harap Anda menemukan tutorial ini bermanfaat dan kami ingin mendengar tanggapan Anda di bagian Komentar di bawah