Prak 07 – Membuat CSS Spritesheet

-
1. Tujuan
Mengenal dan membuat CSS Spritesheet dari kumpulan gambar.

2. Alat
Adobe Photoshop CS6

3. Bahan

4. Dasar Teori
CSS Sprite
Teknik css sprite adalah teknik untuk menggabungkan beberapa images menjadi satu supaya dalam pemanggilan images hanya satu yang dipanggil meski yang digunakan adalah images yang berbeda sekaligus mengurangi permintaan http://.

Untuk membuat CSS Sprite, yang harus diperhatikan adalah posisi gambar (background-position), ukuran gambar (width - height), dan pengulangan gambar (background-repeat). Posisi dan ukuran gambar nantinya akan menentukan peletakan gambar, sedangkan pengulangan gambar akan berpengaruh terhadap tampilan gambar yang dihasilkan. Untuk itu gunakan CSS Sprite ini pada gambar - gambar yang tidak diulang (no-repeat)

Kelebihan CSS Sprite
Menggunakan css sprite bisa mempercepat dalam loading gambar karena dengan meletakkan beberapa gambar dalam 1 file gambar, dapat menghemat proses request gambar ke server. Keuntungan yang lainnya, dan merupakan keuntungan utama dari penggunaan CSS sprite adalah penggunaan bandwidth akan menjadi semakin hemat.

5. Hasil Praktikum


REFERENSI
http://www.mohhasbias.com/category/mata-kuliah/programming-multimedia-2016/

Komentar

Posting Komentar

Postingan populer dari blog ini

Praktikum 5 - Head Turn with Anticipation

-
Gambar
Tujuan Membuat animasi kepala menoleh dengan antisipasi (head turn with anticipation) Dasar Teori 1. Anticipation Anticipation adalah persiapan sebelum aksi, yang diikuti oleh sebuah aksi kemudian penyelesaian aksi tersebut. Hal ini dapat membangkitkan ketegangan atau kelucuan pada suatu aksi tertentu. Bagaimana antisipasi ini digunakan tergantung pada banyaknya aksi yang akan digunakan. Misalnya, awalan untuk lari, melompat atau perubahan ekspresi. http://www.gamasutra.com/db_area/images/feature/6026/anticipation.png 2. Timing Gambar yang jumlahnya banyak akan menghasilkan gerakan lambat dan halus. Gambar sedikit menghasilkan gerakan lebih cepat dan lebih kasar. Berbagai waktu lambat dan cepat dalam adegan menambahkan tekstur dan menarik bagi gerakan. Juga, ada waktu dalam akting dari karakter untuk membangun suasana hati, emosi, dan reaksi terhadap karakter lain atau situasi. Agar timing akurat, diperlukan pengaturan dope sheets pada animasi manual maupun timel...
Baca selengkapnya

Kober Mie Setan Surabaya

-
Gambar
Bagi pecinta kuliner pedas, makanan yang satu ini layak untuk dicoba. Terletak di Jalan Kaca Piring No 14 Surabaya ini memang selalu ramai didatangi pengunjung. Restauran ini mulai buka pukul 02.00 PM - 12.00 PM. Walau begitu pengunjung mulai ramai berdatangan ketika waktu mulai beranjak sore. Menu makanan yang dijual disana ada 2 yaitu Mie Goreng Setan dan Mie Goreng Iblis. Untuk tingkat kepedasannya kita disediakan beberapa tingkatan yaitu Level S untuk 10 cabai, Level M untuk 20 cabai, Level XL untuk 50 cabai dan Level XXL untuk 100 cabai. Selain itu juga disediakan request level yang memperbolehkan anda untuk memesan jumlah cabai sesuai keinginan anda. Minuman yang dijual disana mempunyai nama yang unik seperti Es Genderuwo, Es Kuntilanak, Es Pocong, Es Tuyul dan masih banyak lagi. Harga yang dibandrol pun cukup murah, sesuai dengan kantong pelajar. Untuk minuman antara 7000 - 8000 IDR dan untuk mie setannya 8500 - 9500 IDR.
Baca selengkapnya

Membuat Bouncing Ball dengan Pencil 2D

-
Gambar
Untuk membuat animasi bola memantul atau Bouncing Ball tidaklah sulit, ini merupakan tahap dasar dalam membuat animasi 2d. Berikut ini adalah langkah-langkah untuk membuat bouncing ball. Bukalah software Pencil 2D pada PC/Laptop anda. Klik dua kali pada Bitmap Layer, lalu ubah nama layer yang akan dijadikan sebagai background kemudian klik OK. Klik dua kali pada Vector Layer, lalu ubah nama layer yang akan dijadikan sebagai character kemudian klik OK. Setelah itu, klik Layer Background dan tambahkan beberapa key frame Klik layer Backrground, lalu kita tarik garis pada workspace untuk jalan pantulan bolanya. Klik layer Character, lalu tambahkan beberapa key frame untuk menggambar objek. Pilih tombol Select Rectangle , lalu select pada seluruh garis. Klik kedua layer sekaligus untuk membuat sebuah objek, dengan cara klik tombol diatas layer. Klik toolbar Pen tool, ubah size sesuai keinginan. Lalu buat lingkaran pada workspace. Jika sudah, klik toolbar Select Rectangle, lal...
Baca selengkapnya