1 | Buletindo ● Download Gratis Buletin Komputer Terbaru di : http://komputer.buletindo.

com

Edisi 048 | Desain Grafis | Senin, 01 Februari 2010

BULETIN KOMPUTER ● Jurnal Pembelajaran Komputer ● www.buletindo.com

Buletindo
Oleh : Andi Yujayanto (andiyujayanto@yahoo.com)

Teknik Menyimpan Foto dan Membuat Animasi untuk Web dengan Adobe Photoshop
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. 2. 3. Buka foto (File > Open). Pilih menu File > Save As. 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. Klik Save. 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. 2. Buka Foto dalam Adobe Photoshop. . Pada baris Properties ada Pilih Slice Tool beberapa style yang dapat Anda pilih, yaitu Normal, Fixed Aspect ratio atau Fixed Size. Jika Anda bingung, pilih saja Normal.

4. 5.

BULETIN BEBAS DIGANDAKAN DAN DIDISTRIBUSIKAN KEMBALI UNTUK KEPENTINGAN NON KOMERSIAL . hanya ukuran file-nya saja yang menjadi lebih kecil. Tampilkan foto dengan tab 4-Up. dengan pilihan GIF. Klik Save. Atur luasan potongan dengan menggeser tepat pada titik-titik yang dihasilkan.buletindo. Klik Save. Semakin blur maka membuat size foto kecil. Melalui cara ini. Anda masih bisa mengatur sehingga ukurannya lebih kecil lagi. 8. Ada 3 pilihan. 5. Pilih menu File > Save for Web. dimensi/luas gambar berukuran tetap. Lebih Lanjut dengan Save for Web Buka foto dengan tab 4-up. 6. Mengatur Blur Atur Blur jika diperlukan saja. Tip: Anda juga dapat menyimpan gambar berukuran file besar agar menjadi lebih kecil dengan fitur Save for Web.com 3. Memilih Preset Pilih Preset yang ada.2 | Buletindo ● Download Gratis Buletin Komputer Terbaru di : http://komputer. yaitu dengan mengiriskannya baik dari atas ke bawah atau dari kanan ke kiri. 4. tanpa memotongnya dengan Slice Tool. Mengatur Quality Atur Quality dengan menggeser slider atau memasukkan angka.jpg) dan HTML only (*. Pilih foto dengan size yang kecil. yaitu HTML and Image (*. Angka kecil membuat size foto juga kecil.html). Potong langsung pada foto. Jpeg dan PNG. 7. Pilih foto dengan ukuran yang kecil.html). Image Only (*. Pilih Save As Type-nya pada kotak Save Optimized As. Kini simpan potongan tersebut dengan menggunakan fitur Save for Web. 9.

dan Background putih. DILARANG MENGUBAH SEBAGIAN ATAU SELURUH ISI BULETIN TANPA IJIN TERTULIS DARI BULETINDO . Mengatur Width (panjang) dan Height (lebar/tinggi) foto. 3. Sebagai contoh. Menjaga warna agar ikut tak terbuang. Bilinear. Desainlah terlebih dulu iklan yang Anda inginkan. Gunakan tool Gradasi . Memilih warna untuk dijadikan warna transparan dengan cara klik Menggunakan Tab Image Size Di dalam tab ini Anda dapat mengatur ukuran foto. Background sebagai contoh menggunakan warna gradasi. Bicubic. 4. • Pengaturan Quality yang dapat Anda pilih yaitu Nearest Neighbour. teks International tampil dan diikuti dengan Jurnalist. Klik Apply. Pengaturannya meliputi : 1. Proportions agar 2. Resolution 72 pixels/inch. lalu klik dari tengah menuju bawah dokumen untuk membuatnya. . Memilih warna untuk palet warna web. yaitu dengan klik . Hati-hati dengan fitur membuang warna ini. Membuat Animasi Iklan Cara mengatur warna-warna ini adalah : • Membuang warna yang sama dengan cara klik warna yang akan dibuang dan kemudian klik tong sampah . 2. Bicubic Smoother atau Bicubic Sharper. Centang Constrain tetap proporsional. selanjutnya ornamen dan Yogyakarta. Buat dokumen baru. Berikut cara membuatnya : 1. Anda dapat berkarya membuat animasi iklan. dengan durasi 5 detik. 3.Teknik Menyimpan Foto dan Membuat Animasi untuk Web dengan Adobe Photoshop | 3 Menggunakan Tab Color Table Warna-warna dalam Color Table ini muncul bila Anda memilih GIF pada kotak Preset. Ketikkan International. Jurnalist dan Yogyakarta. misal ukuran 125 x 125 pixels. yaitu dengan cara klik warna tersebut dan klik Kunci • • . Mode Color: RGB Color. Atur jenis dan besar font.

(024) 3560597 Redaksi: redaksi @ buletindo.50131 Telp. 6. Pilih pada tampilan yang memiliki ukuran kecil. Jika sudah merasa cukup.com Kerjasama & Iklan: marketing @ buletindo. Palet animasi ini dapat Anda temukan dalam Adobe Photoshop mulai versi CS2 hingga CS4.30 detik. Caranya yaitu : 1. Geser keseluruhan timeline pada ujung kanan menuju garis ini. Geser juga untuk layer jurnalist lebih ke kanan. Bagi Anda yang hanya ingin mendapatkan output image-nya saja. 5. Geser tepat pada ujung kiri layer International ke kanan. Anda tinggal melakukan klik dan geser pada timeline (garis tebal berwarna hijau) obyek yang ingin Anda lakukan animasi.com Lakukan Preview dengan cara tekan Spacebar pada papan keyboard Anda. maka pilihlah Images only (*. Tetapi. Anda tidak perlu takut dengan kepesatan yang ada ini. Tambahkan ornamen sebagai pemanis iklan dengan menggunakan brush. Selanjutnya aktifkan palet animasi dengan cara pilih menu Windows > Animation. Untuk memastikan lagi jalannya animasi. Lakukan hal yang sama untuk timeline ornamen dan Yogyakarta. BULETIN BEBAS DIGANDAKAN DAN DIDISTRIBUSIKAN KEMBALI UNTUK KEPENTINGAN NON KOMERSIAL . Langkah terakhir adalah menyimpan desain animasi Anda. 4. Pilih ekstensi GIF pada pilihan Preset. Selamat berkarya ! Buletindo www. Selanjutnya klik timeline sesuai obyek masing-masing: 1. Pilih menu File > Save for web & Device.buletindo.com Kontak: Jl.gif) pada pilihan Save As type. maka tekan tombol Save. 4.com 4. 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. Sedangkan Photoshop pada versi CS dan sebelumnya palet ini ada dalam Adobe Image Ready yang terbundel jadi satu dengan Adobe Photoshopnya.buletindo. Atur sedemikian rupa agar tampak menarik. 2.4 | Buletindo ● Download Gratis Buletin Komputer Terbaru di : http://komputer. 5. Secara default rentang waktu keseluruhan adalah 9. Geser garis penunjuk tepat pada angka 0:00:05:00 (5 detik). 3. 3. 5. 2. Abimanyu VI / 22 Semarang . tekan tombol Play.

Sign up to vote on this title
UsefulNot useful