P. 1
48 Teknik Menyimpan Foto Dan Membuat Animasi Untuk Web Dengan Adobe Photoshop

48 Teknik Menyimpan Foto Dan Membuat Animasi Untuk Web Dengan Adobe Photoshop

|Views: 66|Likes:
Published by Irawan Oòô

More info:

Published by: Irawan Oòô on Apr 18, 2012
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

07/03/2013

pdf

text

original

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.

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

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

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

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->