Bagi Anda yang memiliki problem berupa website Anda yang terasa berat saat loading karena
adanya foto berukuran terlalu besar, maka penulis akan berbagi sedikit teknik tentang
penyimpanan foto untuk web agar foto tidak memberatkan pengunjung saat loading halaman
web Anda. Selain itu, penulis juga akan menjelaskan cara membuat animasi untuk halaman
web Anda agar terlihat indah. Beberapa tool dan panel ataupun palet yang terkait akan
penulis jelaskan secara gamblang, sehingga diharapkan Anda mudah untuk memahaminya.
Menyimpan dengan Save As
Cara menyimpan foto untuk
web dengan Save As biasanya
digunakan untuk menurunkan
kualitas. Caranya :
1. Buka foto (File > Open).
2. Pilih menu File > Save As.
3. Ketikkan nama pada
kotak File Name dan pilih
ekstensi JPEG atau GIF.
Pilih GIF jika gambar
memiliki warna-warna
flat atau terdiri dari
warna solid, seperti
kartun atau animasi. Pilih
JPEG jika foto Anda
memiliki warna natural.
4. Klik Save.
5. Pilih Low atau Medium
kotak JPEG Options.
Perhatikan perbedaan
yang terjadi jika Anda
memilih antara Low,
Medium, High pada Size.
Klik OK.
Memotong Foto Menggunakan Slice Tool
Jika dimensi foto Anda terlalu besar, maka gunakan Slice
Tool untuk membaginya menjadi beberapa bagian. Caranya :
1. Buka Foto dalam Adobe Photoshop.
2. Pilih Slice Tool . Pada baris Properties ada
beberapa style yang dapat Anda pilih, yaitu Normal,
Fixed Aspect ratio atau Fixed Size. Jika Anda bingung,
pilih saja Normal.
Edisi 048 | Desain Grafis | Senin, 01 Februari 2010
BULETIN KOMPUTER ● Jurnal Pembelajaran Komputer ● www.buletindo.com
2 | Buletindo ● Download Gratis Buletin Komputer Terbaru di : http://komputer.buletindo.com
BULETIN BEBAS DIGANDAKAN DAN DIDISTRIBUSIKAN KEMBALI UNTUK KEPENTINGAN NON KOMERSIAL
3. Potong langsung pada foto, yaitu dengan
mengiriskannya baik dari atas ke bawah
atau dari kanan ke kiri.
4. Atur luasan potongan dengan menggeser
tepat pada titik-titik yang dihasilkan.
5. Kini simpan potongan tersebut dengan
menggunakan fitur Save for Web. Pilih
menu File > Save for Web.
6. Tampilkan foto dengan tab 4-Up.
7. Pilih foto dengan size yang kecil. Klik
Save.
8. Pilih Save As Type-nya pada kotak Save
Optimized As. Ada 3 pilihan, yaitu HTML
and Image (*.html), Image Only (*.jpg)
dan HTML only (*.html).
9. Klik Save.
Tip: Anda juga dapat menyimpan gambar
berukuran file besar agar menjadi lebih kecil
dengan fitur Save for Web, tanpa memotongnya
dengan Slice Tool. Melalui cara ini,
dimensi/luas gambar berukuran tetap, hanya
ukuran file-nya saja yang menjadi lebih kecil.
Lebih Lanjut dengan Save for Web
Buka foto dengan tab 4-up. Pilih foto dengan
ukuran yang kecil. Anda masih bisa mengatur
sehingga ukurannya lebih kecil lagi.
Memilih Preset
Pilih Preset yang ada, dengan pilihan GIF,
Jpeg dan PNG.
Mengatur Quality
Atur Quality dengan menggeser slider atau
memasukkan angka. Angka kecil membuat
size foto juga kecil.
Mengatur Blur
Atur Blur jika diperlukan saja. Semakin blur
maka membuat size foto kecil.
Teknik Menyimpan Foto dan Membuat Animasi untuk Web dengan Adobe Photoshop | 3
DILARANG MENGUBAH SEBAGIAN ATAU SELURUH ISI BULETIN TANPA IJIN TERTULIS DARI BULETINDO
Menggunakan Tab Color Table
Warna-warna dalam Color Table ini muncul
bila Anda memilih GIF pada kotak Preset.
Cara mengatur warna-warna ini adalah :
• Membuang warna yang sama dengan cara
klik warna yang akan dibuang dan
kemudian klik tong sampah . Hati-hati
dengan fitur membuang warna ini.
• Menjaga warna agar ikut tak terbuang,
yaitu dengan cara klik warna tersebut
dan klik Kunci .
• Memilih warna untuk palet warna web,
yaitu dengan klik .
• Memilih warna untuk dijadikan warna
transparan dengan cara klik .
Menggunakan Tab Image Size
Di dalam tab ini Anda dapat mengatur ukuran
foto. Pengaturannya meliputi :
1. Mengatur Width (panjang) dan Height
(lebar/tinggi) foto.
2. Centang Constrain Proportions agar
tetap proporsional.
3. Pengaturan Quality yang dapat Anda
pilih yaitu Nearest Neighbour, Bilinear,
Bicubic, Bicubic Smoother atau Bicubic
Sharper.
4. Klik Apply.
Membuat Animasi Iklan
Anda dapat berkarya membuat animasi iklan.
Desainlah terlebih dulu iklan yang Anda
inginkan. Sebagai contoh, teks International
tampil dan diikuti dengan Jurnalist, selanjutnya
ornamen dan Yogyakarta, dengan durasi
5 detik.
Berikut cara membuatnya :
1. Buat dokumen baru, misal ukuran 125 x
125 pixels, Resolution 72 pixels/inch,
Mode Color: RGB Color, dan Background
putih.
2. Background sebagai contoh menggunakan
warna gradasi. Gunakan tool Gradasi
, lalu klik dari tengah menuju bawah
dokumen untuk membuatnya.
3. Ketikkan International, Jurnalist dan
Yogyakarta. Atur jenis dan besar font.
4 | Buletindo ● Download Gratis Buletin Komputer Terbaru di : http://komputer.buletindo.com
BULETIN BEBAS DIGANDAKAN DAN DIDISTRIBUSIKAN KEMBALI UNTUK KEPENTINGAN NON KOMERSIAL
4. Tambahkan ornamen sebagai pemanis iklan dengan
menggunakan brush.
5. Atur sedemikian rupa agar tampak menarik.
6. Selanjutnya aktifkan palet animasi dengan cara pilih
menu Windows > Animation.
Palet animasi ini dapat Anda temukan dalam Adobe
Photoshop mulai versi CS2 hingga CS4. Sedangkan Photoshop
pada versi CS dan sebelumnya palet ini ada dalam Adobe
Image Ready yang terbundel jadi satu dengan Adobe
Photoshopnya.
Palet animasi ini memiliki kemajuan dari versi CS2-nya yang
masih sederhana dan CS4 yang sudah mendekati fitur-fitur
yang terdapat dalam Adobe After Effects ataupun Adobe
Premiere. Tetapi, Anda tidak perlu takut dengan kepesatan
yang ada ini, Anda tinggal melakukan klik dan geser pada
timeline (garis tebal berwarna hijau) obyek yang ingin Anda
lakukan animasi.
Secara default rentang waktu keseluruhan adalah 9.30
detik.
Selanjutnya klik timeline sesuai obyek masing-masing:
1. Geser garis penunjuk tepat pada angka 0:00:05:00 (5
detik).
2. Geser keseluruhan timeline pada ujung kanan menuju
garis ini.
3. Geser tepat pada ujung kiri layer International ke
kanan.
4. Geser juga untuk layer jurnalist lebih ke kanan.
5. Lakukan hal yang sama untuk timeline ornamen dan
Yogyakarta.
Lakukan Preview dengan cara tekan Spacebar pada papan
read more...
