Membuat Desain Layout Halaman

Membuat Desain Layout Halaman

Seiring dengan perkembangan jaman dan kemajuan teknologi di bidang internet, layout sebuah halaman web juga banyak mengalami kemajuan. Dulu banyak desainer web membuat layout halaman web dengan lebar 780 piksel, namun sekarang cara itu sudah banyak ditinggalkan karena dirasa tidak maksimal lagi hasilnya. Sekarang ini banyak desainer web membuat layout halaman dengan lebar ± 900 piksel, misalnya 850 piksel atau bahkan 1000 piksel.

Dengan semakin lebarnya layout halaman, maka Anda akan semakin leluasa untuk menempatkan unsur-unsur halaman web. Dalam halaman ini, akan digunakan layout halaman dengan ukuran lebar 900 piksel.

Ikuti langkah-langkah berikut untuk membuat lembar kerja baru yang akan dijadikan layout utama halaman web :

1. Pilih menu File ► New.

2. Dalam kotak New Document yang tampil, buat setting halaman sebagai berikut:

hal-120-new-document

3. Ubah warna kanvas menggunakan warna #000033, Klik palet warna Canvas di dalam panel Properties, dan pilih warna yang telah ditentukan.

hal-120-warna-kanvas

4. Tambahkan sebuah objek Rectangle menggunakan Rectangle tool dalam panel Tools grup Vector. Buat ukuran objek menjadi W=874 dan H=663, dengan posisi X=13 dan Y=279.

5. Tambahkan kembali sebuah objek Rounded Rectangle menggunakan Rounded Rectangle tool dalam panel Tools grup Vector. Buat ukuran objek menjadi W=874 dan H=321, dengan posisi X=13 dan Y=52.

6. Atur properti kedua objek di atas dengan menggunakan panel Properties. Pasang ukuran stroke menjadi 2, dengan warna stroke #666666.

7. Pilih kedua objek tersebut menggunakan kombinasi Shift dan klik pada keyboard, kemudian pilih menu Modify ►Combine Path ►Union.

Hasilnya adalah kedua objek tersebut akan disatukan hingga membentuk sebuah objek baru.

hal-123-edit-inside

8. Imporlah sebuah gambar ke dalam kanvas dengan menggunakan menu File ►Import. Dalam kotak dialog Import, pilih gambar kemudian klik tombol Open.

hal-122-objek-kanvas

9. Klik tahan geser mouse untuk meletakkan objek gambar tersebut di dalam kanvas. Buat ukuran objek menjadi W=874 dan H=668, dengan posisi X=13 dan Y=0.

Jika posisi gambar belum sesuai dengan kebutuhan dalam grafis halaman, geser kembali untuk mendapatkan hasil yang lebih bagus.

10. Pilih objek gambar, lakukan pemotongan gambar untuk menyesuaikan ukuran kebutuhannya dalam desain. Pilih menu Edit ► Crop Selected Bitmap, sehingga gambar akan dikelilingi handel untuk memilih area hasil pemotongan.

hal-122-area-pemotongan

11. Ubah area pemotongan sesuai kebutuhan dalam desain Anda, sebagai contoh buat objek menjadi W=874 x H=200, dengan posisi X=13 dan Y=40; Tekan Enter pada keyboard untuk menampilkan hasil pemotongan.

hal-123-memotong-gambar

12. Lakukan masking antara objek gambar dan objek vektor hasil langkah ke-7, Pilih objek gambar dan pilih menu Edit ► Cut, selanjutnya pilih objek vektor dan pilih menu Edit ► Paste Inside.

Hasil masking tersebut akan d’igunakan sebagai header dalam grafis halaman web Anda.

13. Pilih menu File ► Save As untuk menyimpan desain Anda dengan nama index.png.

Langkah selanjutnya adalah membuat grafis bagian footer, yang letaknya ada di bagian paling bawah layout halaman.

Bagian footer biasanya berisi tentang hak cipta desain. Selain itu Anda juga dapat menambahkan beberapa objek lain untuk mendapatkan hasil grafis yang cantik.

1. Gulung jendela dokumen ke bagian halaman paling bawah.

2. Tambahkan 3 buah objek garis dengan menggunakan Line tool .

• Garis1 : W=300, H=1,X=14, Y=972.

• Garis1 : W=400, H=1IX=250, Y=985.

• Garis1 : W=300, H=1,X=587, Y=972.

3. Pilih ketiga objek tersebut, buat ketebalan garisnya menjadi 2 dengan warna garis (stroke) #666666.

4. Berikan efek live filter dengan pilihan Glow, atur warna cayaha dengan warna putih.

5. Tambahkan 2 buah objek kotak dengan menggunakan Rectangle tool .

• Kotak1 : W=300, H=50, X=0, Y=950.

• Kotak2 : W=400, H=1, X=587, Y=985.

6. Pilih kedua objek tersebut, pasang warna objek (fill) #FF66FF. Pasang Blend Mode untuk kedua objek tersebut dengan pilihan Luminosity dalam panel Properties.

7. Langkah terakhir adalah mengetikkan teks keterangan hak cipta. Klik tombol Text tool , letakkan di dalam jendela dokumen dan ketik teksnya.

8. Untuk menambahkan simbol copyright (©), buka panel Special Character, kemudian klik simbol © dari daftar yang ditampilkan.

9. Sebagai contoh ketikkan teks “copyright©maharani2009”. Format teks dengan menggunakan panel Properties, dan atur letaknya di posisi X=362, Y=967. Berikan efek live filter dengan pilihan Glow.

  hal-125-bagian-footer1-2

Share

Submit a Comment

Desain Web, Membuat Website