TUGAS PEMROGRAMAN WEB Slicing Tampilan Website

Oleh :

AGUS PRISTIANTO 1031140014 Manajemen Informatika

Program Studi Manajemen Informatika Jurusan Teknik Elektro Politeknik Negeri Malang

Pendahuluan
Pembuatan website merupakan rangkaian cara untuk membentuk sebuah website dengan content dan tampilan yang menarik. Tampilan dalam sebuah website merupakan hal ynag sangat penting. Tentu orang yang membuka website kita akan melihat tampilan terlebih dahulu. Dalam mendesain website terdapat cara untuk mengatur agar gambar dalam website , supaya gambar tidak telalu berat pada saat blog anda di loading oleh pengunjung. Dalam pendesainannya banyak cara yang bisa digunakan dengan software pengolah gambar, misalnya Photoshop.

Pengertian Slicing
Menampilkan image atau gambar dalam sebuah halaman web merupakan tantangan tersendiri bagi seorang desainer web. Terlebih jika ukuran image cukup besar, baik dalam dimensi maupun ukuran file. Desainer harus mempertimbangkan kecepatan downloading situs dan keindahan (grafis) dalam situs web yang dibuat. Salah satu jalan keluar adalah menggunakan slicing. Slicing adalah metode memecah gambar berukuran (dimensi dan file) besar menjadi gambar-gambar dengan ukuran yang lebih kecil. Kemudian gambar-gambar tersebut disatukan kembali menjadi sebuah gambar utuh seperti sebelum di-slice dengan bantuan tabel.

Pembuatan Slicing
Sebelum pembuatan , kita harus mengetahui bahwa resolusi setiap monitor berbeda, untuk itu perlu ada penyesuaian agar user dapat nyaman ketika membuka website kita. Untuk sekarang, monitor yang digunakan berukuran 800 X 600 pixel.

Langkah-langkah: Buka Photoshop, lalu buka lembar kerja baru , pilih new dan setting dengan: Width Height Resolusi : 600 pixel : 800 pixel : 72 pixel

2. Pilih Rounded Rectangle Tools pada Tools bar.

3. Buatlah sebuah persegi panjang/objek (desain untuk halaman website).

4. Atur gradien supaya tampilan lebih menarik. Klik kanan layer Shape 1,klik Blending Option dan pilih warna serta skalanya.

5. Buat Objek untuk header ,disini saya menggunakan pen tools supaya dapat dibuat ojek lengkung. Caranya pilih icon pen tools dan buat objek persegi panjang, lalu pilih convert point tools, kemudian tekan ujung sisi siku , lalu tarik sampai terbentuk objek lengkung seperti dibawah.

6. Buat kotak sejumlah 4 buah untuk Link ke page lain. New layer dan buat objek, lalu copy layer sebanyak 4 buah. Hasil seperti gambar dibawah.

7. Isikan objek dengan Teks yang kita kehendaki. Caranya klik Type Tools , kemudian letakkan di objek yang ingin ditambah teks.

8. Tambahkan Rules untuk memulai slicing. Dengan pilih view, kemudian pilih Rules, atau CTRL+R.

9. Tarik garis horisontal untuk bagian bagian memanjang kebawah. Kemudian tarik garis vertikal untuk bagian-bagian ke samping. Tentukan brapa jumlah garis yang akan dipakai.

10. Gunakan Slice Tools untuk proses slicing. Caranya pilih slice di tools bar.

11. Gunakan slice tool untuk memotong bagian-bagian yang ingin anda potong. Sesuaikan dengan objek yang sudah anda buat.

Untuk layout yang isinya tanpa objek, seperti gambar disamping, maka potong hanya sebagian kecil, karena dalam penerapannya gambar tersebut akan berulang (seperti ubin), samapai memenuhi layar. 12. Langkah terakhir adalah penyimpanan Gambar yang telah di slicing. Klik File > Save for Web >

13. Kemudian Akan muncul

Pilih save, kemudian beri nama file yang sudah dibuat dengan tipe html. Jangan lupa membuat folder untuk menampung hasil slicing. Disini saya beri nama website. Kemudian hasilnya akan seperti pada gambar dibawah ini.

Selesai.