Breaking News:

Celebrity Gossip

World News

    Animasi Tulisan Bergerak


    Diarsipkan dalam kategori: Efek Teks tanggal: 28 July 2008 oleh Mbah Dewo
    Tutorial Photoshop kali ini akan membahas cara pembuatan efek tulisan bergerak ( animasi ) dengan format file gif. Animasi ini dibuat dengan program photoshop pada awalnya, kemudian proses pembuatan animasinya dengan menggunakan Adobe Image Ready. Jika photoshop yang digunakan adalah versi CS3, maka animasi ini bisa dibuat langsung dengan Photoshop, tanpa harus menggunakan image ready.

    Tutorial pembuatan animasi tulisan dengan Photoshop

    Langkah 1
    Buatlah sebuah file baru dengan Photoshop. Ukuran file bisa disesuaikan dengan kebutuhan Anda. Pada tutorial ini, saya menggunakan sebuah file yang berukuran 468 x 60 pixel; 72 dpi; RGB; content=white.
    tutorial photoshop animasi 1
    Langkah 2
    Buatlah sebuah tulisan dengan menggunakan Type tools pada Photoshop.
    tutorial photoshop animasi 2
    Langkah 3
    • Jika Anda menggunakan versi Photoshop 7 hingga CS:
      Klik icon Jump to Image ready. Icon ini terletak di sebelah bawah pada Tools Box. Anda juga bisa memilih menu File > Jump To > Adobe ImageReady 7.0 (pada Photoshop 7), atau File > Edit in Image Ready (pada Photoshop CS). tutorial photoshop animasi 3
    • Jika Anda menggunakan versi Photoshop CS3:
      Pilih menu Window > Animation tutorial photoshop animasi 4
    Langkah 4
    Akan Anda dapati sebuah palet panjang di sebelah bawah (bentuk tampilan relatif sama baik pada Image Ready ataupun Photoshop CS3).
    tutorial photoshop animasi 5
    Jika perlu, perlebar tampilan palet ini dengan melakukan klik dan geser pada sudut kanan bawah palet tersebut.
    Langkah 5
    Geser tulisan hingga ke sebelah kiri luar dari background yang putih, hingga seluruh tulisan tidak nampak.
    tutorial photoshop animasi 6
    Langkah 6
    Klik icon Duplicate current frame.
    tutorial photoshop animasi 7
    Langkah 7
    Sekarang ada 2 frame pada palet Animation. Pastikan yang terpilih sekarang adalah frame kedua.
    Geser lagi tulisan hingga sisi kanan luar dari background.
    tutorial photoshop animasi 8
    Langkah 8
    Klik icon Tweens animation frames.
    tutorial photoshop animasi 9
    Tujuan penggunaan Tween ini adalah untuk mempermudah pembuatan frame-frame animasi. Tween akan menambahkan frame secara otomatis berdasarkan perbedaan posisi, ukuran, tranparansi, dan efek pada obyek.
    Kemudian akan muncul kotak dialog baru, seperti gambar tutorial berikut ini.
    tutorial photoshop animasi 10
    Pada kotak dialog ini, kita bisa mengatur:
    • Tween with: digunakan untuk memilih frame mana yang akan kita gunakan sebagai dasar animasi berdasarkan frame yang aktif. Karena kita aktif pada frame kedua, maka yang tepat adalah Previous Frame.
    • Frame to Add: digunakan untuk memilih jumlah frame yang akan ditambahkan. Semakin banyak jumlah frame, animasi akan semakin nampak halus, tetapi ukuran file hasil jadinya akan semakin besar.
    • Layers: digunakan untuk memilih animasi pada antara semua layer, atau hanya pada layer yang aktif saja.
    • Parameters: digunakan untuk memilih jenis perubahan obyek yang digunakan sebagai dasar animasi
    Langkah 9
    Klik icon Plays/stops animation.
    tutorial photoshop animasi 11
    Animasi sudah jadi. Jika Anda menginginkan pengaturan kecepatan animasi, bisa Anda pilih dari tulisan 0 sec disebelah bawah frame.
    tutorial photoshop animasi 12
    Jika pengaturan kecepatan ini akan dilakukan pada banyak frame sekaligus, maka klik sebuah frame, kemudian tekan dan tekan tombol Shift, lalu klik frame yang lain. Bisa juga dengan Ctrl + klik frame yang lain. Setelah terpilih banyak frame sekaligus, baru ubah kecepatannya. Pengubahan kecepatan animasi akan berlaku pada semua frame yang terpilih.
    Untuk menyimpan hasil animasi, pilihlah menu File > Save Optimized pada Adobe ImageReady. Atau File > Save for Web & devices pada Photoshop CS3. Pastikan format file yang dipilih adalah gif.
    Berikut ini adalah hasil dari tutorial ini, sebuah tulisan dengan efek gerak yang disimpan dengan format file gif.
    tutorial photoshop animasi 12
    Silahkan dicoba dan digunakan sebagai tambahan materi belajar photoshop. Berikut ini ada 2 buah contoh file lain. Silahkan dicoba sendiri juga untuk membuat seperti gambar-gambar berikut ini.
    Gambar contoh animasi 1
    animasi photoshop 1
    Gambar contoh animasi 2

    Posted in

    Pasang Shoutbox di blogspot


    Shout merupakan salah satu asesoris yang paling umum ditampilkan di dalam blog. Digunakan sebagai media interaksi dengan pengunjung sehingga ada komunikasi timbal balik antara pemilik blog dengan pengunjung. Penyedia shotbox gratis cukup banyak di internet, diantaranya: Oggix, Shutmix, Myshotbox.

    Oggix dipilih karena kemudahan dalam register dan tools yang cukup banyak. Untuk menampilkan asesoris ini ikuti langkah-langkah berikut:


    1. Pada browser ketik www.oggix.com

    2. Klik Register (sebelah home bagian diatas) atau klik GET IT NOW, terlihat seperti gambar disebelah.

    3. Selanjutnya isi formulir pendaftaran (identitas anda) meliputi:

    • alamat email
    • password
    • nama lengkap
    • nama website
    • alamat website
    • deskripsi website
    • negara
    • security code sesuai dengan gambar yg ditampilkan

    4. Periksa apa data yg anda input sudah lengkap dan benar, lalu klik Register

    5. Kalau pendaftaran sukses, maka akan ada pemberitahuan seperti "you have finish the registration process. Please login to manage your account."

    6. Login dengan username alamat email dan password yang anda masukkan saat mengisi formulir pendaftaran sebelumnya.

    7. Setelah berhasil login, untuk memasang shoutbox keblog pilih menu "Install Shoutbox (sebelah kiri). Hingga muncul menu HTML Code, klik dan pilih settingan yang anda sukai (lihat pada gambar dibawah ini),untuk melanjutkan klik Next.

    8. Langkah selanjutnya memilih konfigurasi, type, warna, template, anda bisa memilih settingan yang sesuai dengan selera dan background blog anda. Ikuti Step by Step mulai dari 1 s/d 5 dan setiap selesai melakukan setting klik "Choose This >>".

    STEP BY STEP:
    1. Set shoutbox configuration
    2. Choose shoutbox type
    3. Choose shoutbox color <= you're here 4. Choose shoutbox template 5. Copy and paste the HTML codes to your HTML page where you want to put the shoutbox

    9. Setelah berhasil dari step 1 s/d 5, maka anda akan mendapatkan kode html/java script, kode ini akan kita gunakan untuk menampilkan shoutbox diblog. Copy code tersebut dengan cara blok semua kode, klik kanan pilih Copy.

    10. Login ke blogger.com, dan pilih "layout" pada halaman Dashboard. Klik "Add a Page Element", tunggu sampai muncul tampilan "Choose a New Page Element", klik "Add to Blog" pada bagian "HTML/JavaScript".

    11. Selanjutnya akan muncul tampilan baru "Configure HTML/JavaScript", nah paste kode disini. Klik "Save Change".

    12. Setelah proses penyimpanan sukses, klik "View Blog" untuk melihat hasilnya.

    Akhirnya setelah melewati tahapan yang cukup panjang, anda dan pengunjung sudah bisa menikmati hasilnya :).

    Kalau menginstall widget oggix ini menunurut anda terlalu rumit, silahkan lihat tutorial pasang Shoutbox diblogspot (2). Jika menurut anda tutorial ini bermanfaat, silahkan berkomentar :)

    Posted in