Dalam membuat website, tahapan rendering desain halaman sangat penting, yang selanjutnya akan di-typeset dan dipublikasikan di jaringan. Pada artikel ini, Anda akan belajar cara menggunakan Adobe Photoshop untuk menggambar tata letak yang kompeten untuk situs web, yang nantinya dapat Anda bentuk tata letak yang lebih kompleks.
Itu perlu
Program Adobe Photoshop
instruksi
Langkah 1
Buat file baru di Photoshop (Ctrl + N) dengan dimensi 1040x1400, di mana 1400 adalah tingginya. Nyalakan tampilan penggaris (Ctrl + R) dan atur piksel sebagai satuan pengukuran dalam pengaturan penggaris.
Langkah 2
Mulailah meregangkan pemandu sehingga sesuai dengan batas kotak tata letak. Regangkan batas samping sehingga 40 piksel tersisa ke tepi. Batas atas dan bawah juga harus menyisakan 40 piksel di setiap sisi hingga batas latar belakang.
Langkah 3
Kemudian pilih panduan yang 200px ke bawah dari atas latar belakang untuk header atas.
Langkah 4
Untuk membentuk bilah sisi di kiri dan kanan tata letak, atur pemandu 240 piksel dari batas latar belakang ke kiri, dan 800 ke kanan.
Langkah 5
5px ke dalam dari bilah sisi kiri dan kanan dan gambar dua panduan vertikal lagi. Kemudian seret dua pemandu lagi 245 px ke kiri dan 795 px ke kanan.
Langkah 6
Sekarang ukur dari batas header 30px dan gambar panduan horizontal untuk menu horizontal.
Langkah 7
Pilih area sempit menu horizontal yang baru saja Anda tandai dengan pilihan persegi panjang menggunakan tombol M. Pilih alat pengisi dan isi area dengan warna abu-abu terang yang netral.
Langkah 8
Pilih alat pengisi dan isi area dengan warna abu-abu terang yang netral. Klik pada menu "Select-Modify-Compress", tentukan opsi 1-piksel dan klik "OK." Isi area dengan warna abu-abu yang lebih terang - Anda akan memiliki bingkai menu.
Langkah 9
Buat layer baru dan pilih gambar yang sesuai untuk ikon atau logo situs, lalu buka.
Langkah 10
Sisipkan gambar pada layer baru di header, letakkan di tepi kiri. Di sebelah kanan gambar, tulis judul teks situs menggunakan font apa saja.
Langkah 11
Rancang blok situs web Anda dalam skema warna yang sama dengan header yang baru dibuat. Pilih area bilah sisi kiri dan lakukan operasi pengisian dua warna yang sama seperti pada blok menu.
Langkah 12
Lakukan hal yang sama dengan blok konten lebar tengah. Salin layer bilah sisi kiri dan letakkan sebagai bilah sisi kanan.
Langkah 13
Tambahkan teks ke tata letak Anda - pilih font netral dan isi judul menu, contoh berita, foto, tag, dan bagian tautan.
Langkah 14
Selesaikan tata letak dengan membuat "footer" atau footer - tuliskan hak cipta dan kontak Anda di sana.
