Advertisement
  1. Code
  2. Effects

Buat Bling Logo Flash Anda dengan Masking Alpha Gradient

Scroll to top
Read Time: 9 min

Indonesian (Bahasa Indonesia) translation by Riska Aprianti (you can also view the original English article)

Dua kali sebulan, kami mengunjungi kembali beberapa posting favorit pembaca kami dari sepanjang sejarah Activetuts+. Tutorial ini pertama kali diterbitkan pada Agustus 2009.

Dalam tutorial ini kita akan melihat cara membuat logo yang menggabungkan masking gradien alfa dalam animasinya. Saya akan menjelaskan beberapa tips dan trik tentang cara membuatnya bekerja dan menghindari beberapa masalah umum.


Hasil akhir

Pertama, intip apa yang kita tuju:


Pengenalan

Ini adalah tutorial tingkat pemula di mana saya akan menjelaskan secara rinci cara membuat logo ini dan animasinya. Sepanjang pembahasan saya akan menyebutkan beberapa kata tentang masking gradien, bitmap dan dalam bentuk flash, dan ActionScript yang dibutuhkan. Awalnya kita akan membahas secara singkat beberapa teknik Photoshop, tetapi sebagian besar perangkat lunak pengeditan gambar sudah cukup.

Ayo kita mulai!


Langkah 1: Desain Awal

Pastikan Anda memulai dengan mengunduh file source. Buka Logo.psd di file zip.

Anda juga dapat mengunduh dan menginstal font yang digunakan dalam contoh ini, Lubalin Graph Bold. Ini opsional, karena ketika Anda membuka file, Photoshop akan memberi Anda peringatan bahwa font tersebut hilang, tetapi untuk latihan ini Anda masih dapat mengikuti tanpa itu.

Membuka Logo.psd Anda akan melihat ini:

Seperti yang Anda lihat, kita memiliki background layer abu-abu dan layer teks bernama "Text". Jika Anda menginstal font Lubalin, Anda dapat mengubah teks menjadi sesuatu yang lebih pribadi, atau Anda dapat mengubah font sesuai keinginan Anda. Background layer abu-abu sangat redup dan saya hanya memilihnya untuk membantu menggambarkan hasil akhir.


Langkah 2: Jika Anda tidak memiliki Photoshop

(Anda dapat melewati langkah ini jika menggunakan Photoshop.)

Di sini saya akan menjelaskan secara singkat layer style yang digunakan di Photoshop, sehingga Anda yang ingin menyalin logo sebagai Verbatim mungkin memiliki kesempatan untuk melakukannya di perangkat lunak pengeditan gambar Anda sendiri. Tidak penting bahwa logo Anda terlihat sama.

  • Drop shadow, jarak 6 px, sebarkan 23%, ukuran 10 px.
  • Inner shadow, jarak 5 px, ukuran 5 px.
  • Outer glow, kekuningan, ukuran 6 px.
  • Inner upwards bevel, ukuran 32 px, 21% kedalaman.
  • Contour, lurus, kisaran 50%.
  • Texture, cukup pola garis diagonal 4x4 piksel.
  • Color overlay, #A84D4A pada teks.
  • Stroke, ukuran 2 px, warna #E5C477.

Semoga ini akan memberi Anda ide tentang cara membuat sesuatu yang serupa. Sekali lagi, itu tidak penting demi memahami teknik yang dijelaskan dalam tutorial ini.


Langkah 3: Membuat Effect Outline

Sebelum kita beralih ke Flash, sebaiknya kita lakukan satu hal lagi yang diperlukan di Photoshop; yaitu membuat outline untuk effect yang akan kita buat. Jangan khawatir jika itu belum masuk akal, Anda akan segera melihat seluruh gambar!

  • Matikan layer styles pada layer teks Anda untuk saat ini. Pastikan layer ini dipilih.
  • Ctrl-click layer teks untuk memilihnya.
  • Pergi ke Select > Inverse, atau tekan Shift-Ctrl+I
  • Pergi ke Select > Modify > Expand, pilih 2 pixel atau tekan OK.
  • Tekan Ctrl-C untuk menyalin pilihan Anda 
  • Buat layer baru bernama "Outline" dan pilih.
  • Tekan Ctrl-V untuk menempelkannya.

Anda harus berakhir dengan ini:

Pilih layer Outline dan tekan "V" untuk memilih tool move. Dengan menggunakan keyboard Anda, sejajarkan outline sehingga posisinya tepat di atas teks asli, seperti ini:

Pastikan garis sepenuhnya putih.


Langkah 4: Mengekspor Gambar untuk Flash

Sembunyikan layer Outline dan layer Background. Buka "Save for web and devices" dan simpan sebagai file PNG. Beri nama itu logo.png. Seharusnya terlihat seperti ini:

Selanjutnya, sembunyikan layer Teks dan bawa kembali layer Outline. Simpan sebagai "outline.png". Seharusnya terlihat seperti ini:

Pastikan Anda menyimpan PNG dengan kualitas tinggi dan transparansi!


Langkah 5: Persiapan di Flash

Mulai Flash dan buat file AS3 baru. Karena logo yang kita buat berukuran 580 x 170 piksel di Photoshop, kita akan menggunakan dimensi yang sama untuk file Flash kita. Biarkan FPS dan background warna apa adanya.

Buat dan beri nama layer ini:

  • Shine
  • Mask
  • Outline
  • Logo
  • Background
  • Actions

Masukkan semuanya dalam urutan seperti dalam daftar, sehingga "Actions" berada di level Z terendah dan "Shine" di level tertinggi. Sekarang pilih layer Background dan buat rectangle yang menutupi tahapan. Jadikan warnanya gradien dari abu-abu gelap (#222222) ke abu-abu terang (#AAAAAA). Gunakan Gradient Transform Tool (hotkey F) untuk meluruskannya seperti ini:

Kunci layer background karena kita tidak akan mengubahnya lagi.


Langkah 6: Mengimpor Logo ke Flash

Pilih Logo layer. Buka File > Impor > Impor ke Tahapan, atau tekan Ctrl+R. Pilih logo.png yang sebelumnya Anda ekspor dari Photoshop. Gambar harus berbaris sempurna di file Flash Anda. Anda sekarang dapat mengunci layer Logo juga.

Pilih layer Outline dan sekali lagi tekan Ctrl+R, kali ini mengimpor outline.png. Itu juga, harus berbaris tepat. Karena outline saat ini dipilih, sekarang akan menjadi saat yang tepat untuk menekan F8 dan mengubahnya menjadi MovieClip. Namai MovieClip "Outline", lalu lanjutkan dan masukkan nama instance "outline" di dalam panel properties. Anda harus melihat sesuatu yang mirip dengan ini:

Sekarang, buka panel Library dan periksa properti logo.png Anda. Secara pribadi saya akan mengatur ini ke kualitas lossless, karena logo ini adalah sesuatu yang cenderung digunakan sebagai header atau sesuatu yang serupa dan saya merasa bahwa dalam kasus-kasus itu Anda tidak boleh berhemat pada kualitas. Ini terserah Anda, tetapi pasti akan terlihat terbaik dengan kualitas lossless!


Langkah 7: Penyesuaian Kecil (tetapi Diperlukan)

Pilih outline instance Anda dan tambahkan filter blur. Atur ke 2 piksel di properti blur X dan Y, dan pilih kualitas tinggi. Ini akan membuat hasil akhirnya jauh lebih baik.

Harap dicatat bahwa menambahkan filter blur secara otomatis memaksa Flash untuk membuat garis besar sebagai bitmap. Jika Anda tidak menambahkan filter blur maka Anda harus setidaknya mencentang kotak "Cache as bitmap". Lebih lanjut tentang ini di Langkah 10.

Anda dapat melanjutkan dan mengunci layer ini juga. Dan juga, sekarang akan menjadi saat yang tepat untuk menyimpan file Flash Anda!


Langkah 8: Membuat Mask

Pilih Mask layer dan kemudian rectangle tool. Hapus stroke color jika Anda memiliki satu yang saat ini diterapkan.

Gambar rectangle, dekatkan dengan lebar 60 piksel dan tinggi 320 piksel. Kemudian, dengan bentuk yang Anda pilih, masuk ke color panel dan berikan linear gradient dengan tiga titik tersebar merata (maksud saya pegangan kecil yang menentukan warna gradien). Pilih warna apa pun untuk poin, tetapi pastikan Anda memiliki warna tengah di 100% alpha dan yang luar di 0% alpha. Seharusnya terlihat seperti ini:

.Tekan F8 dengan bentuk yang dipilih dan buatlah ke dalam Movienclip yang disebut "Mask". Nama contoh mask "themask". Terakhir, putar topeng 45 derajat jam-tepat. Cara mudah untuk melakukan ini adalah dengan terlebih dahulu menekan Q untuk transform tool, kemudian tahan shift sambil berputar sehingga terkunci hingga 45 ° berhenti.


Langkah 9: Animasi Mask

Pergi ke frame 70 dari layer Mask di timeline utama kita dan tekan F5 untuk memasukkan frame ke titik ini. Klik kanan setiap frame sebelumnya dan buat gerakan tween. Tahan shift dan kemudian tarik mask ke sisi kanan tahapan kita. Juga, buat frame untuk membingkai nomor 70 untuk layer Backround, Logo dan Outline. Mask harus hilang dari sini:

Ke sini:


Langkah 10: Memahami Gradien Alpha

Seperti yang mungkin sudah Anda ketahui sekarang, kita akan menggunakan bentuk gradien alpha mask untuk secara bertahap memudar outline luar dan dalam. Biasanya ketika Anda memiliki mask di Flash, Anda memilikinya di satu layer dan mengubahnya menjadi layer mask. Layer mask kemudian memiliki layer "child" yang isinya akan di-mask. Sekarang, apa yang terjadi jika kita melakukan ini dengan pengaturan kita saat ini? Ini hasilnya:

Seperti yang Anda lihat, ini jauh dari transisi yang mulus. Tidak ada tindakan gradien sama sekali.

Lalu mengapa ini?

Agar gradien alfa berfungsi, Flash harus menjadikan objek Anda sebagai Bitmap, bukan bentuk. Mask kita saat ini jelas merupakan bentuk (meskipun di dalam MovieClip) dan ditampilkan seperti itu. Itu dapat diperbaiki dengan dua cara:

  • Cara Flash IDE:

    Di Flash CS4, pilih mask Anda. Di bawah Display section di panel properti, centang kotak "Cache as bitmap".
    Di Flash CS3, Anda dapat menemukannya tepat di bawah blend mode yang dilabeli sebagai "use runtime bitmap caching".

  • Cara ActionScript:

    Pendekatan yang saya sukai adalah dengan menggunakan ActionScript. Terutama karena sebagai pengembang (lebih dari seorang desainer), saya ingin mengontrol semua aspek melalui kode sehingga saya dapat menerapkan effect apa pun pada objek yang dibuat secara dinamis. Setiap objek subkelas DisplayObject memiliki properti boolean cacheAsBitmap. Jadi, dalam contoh kita dengan contoh bernama "theMask" hanya itu:

Silakan dan buat keyframe dalam Action layer dan masukkan garis kode itu.


Langkah 11: "Tapi Masih Tidak Berfungsi!"

Untuk beberapa alasan misterius, Flash tidak dapat mencapai efek yang diinginkan tanpa ActionScript. Layer Mask di timeline Flash tidak memungkinkan masking gradien alfa!

Solusinya sangat menguntungkan sangat sederhana:

Karena Anda benar-benar dapat membaca dari kode, ini menetapkan instance "theMask" sebagai mask untuk instance outline kami. Silakan dan letakkan di layer action.

Harap pertimbangkan hal-hal berikut:

Ada bug dalam flash mengenai kasus mask dan timeline. Saya telah memperhatikan bugnya dalam skenario hipotetis berikut ini:

Contoh mask kita membentang dari frame 1 hingga 70. Aset kita yang lain (logo) membentang hingga frame 90. Ketika Flash diputar antara frame 71 dan 90, instance mask tidak berada di atas tahapan. Jika Anda melihat logo di tab Firefox, misalnya, lalu beralih ke tab lain, lalu kembali lagi ke logo, Anda akan melihat bug. Anda akan melihatnya, jika pemutarannya antara frame 71 dan 90, itu. Bug akan muncul dengan sendirinya saat Outline muncul dan terbuka masknya. Ketika pemutaran kembali ke frame satu itu kembali normal.

Kesimpulan yang dapat kita tarik dari ini adalah bahwa jika Anda menutupi mask itu dengan ActionScript, pastikan Anda menyimpan mask di atas tahapan setiap saat untuk menghindari objek yang sedang diperlihatkan menunjukkan dirinya.


Langkah 12: sentuhan

Silakan dan uji filmnya sekarang. Seharusnya terlihat seperti ini:

Efeknya sedikit lebih kuat, sehingga Anda dapat mengurangi alfa contoh garis menjadi 75% dan itu akan terlihat sedikit lebih halus.

Sebagai sentuhan akhir terakhir, kita akan menambahkan sedikit shine effect ke logo.

  • Lihat di file source zip dan Anda akan menemukan shine.png.
  • Silakan impor ini ke stage onto ke layer Shine pada frame 59.
  • Letakkan di sudut kanan atas karakter "g" dari logo kita.
  • Konversikan menjadi simbol agar kita dapat mengubahnya.
  • Pergi ke frame 69 dari layer yang sama dan tekan F5 untuk memasukkan frame.
  • Klik kanan bagian yang relevan dan pilih Buat Motion Tween.
  • Memperbesar area kerja Anda:
  • Pergi ke frame 59 dan transform gambar ke ukuran yang nyaris tidak terlihat.
  • Pergi ke frame 64 dan ubah ke ukuran aslinya (atau dekat dengan).
  • Pergi ke  frame 69 dan ubah ke ukuran yang nyaris tidak terlihat.
  • Tambahkan warna kekuningan pada shine MovieClip di panel properti.
  • Atur alpha menjadi sekitar 70%.
  • Tambahkan glow filter kekuningan juga.

Langkah 13: Ringkasan

Logo Anda sekarang harus 99% selesai. Anda mungkin masih ingin menyesuaikan ketika animasi dimulai kembali dengan memasukkan lebih banyak frame setelah mask telah dianimasikan. Ingatlah apa yang saya sebutkan sebelumnya; pastikan Anda menyimpan instance mask di atas tahapan sampai ke akhir loop animasi untuk menghindari tampilan mask bug!

Di sini, di akhir tutorial ini, Anda diharapkan akan menyadari betapa mudahnya Anda dapat membuat perubahan pada logo, atau menerapkan efeknya ke logo teks apa pun dengan hasil yang memuaskan. Coba bereksperimen dengan mengubah ketebalan outline (Ingat? Kita membuatnya 2 piksel tebal). Mengubah teks, font, dan warna dapat dengan mudah dilakukan juga. Ubah warna pada overlay dan stroke warna, atau bahkan lebih baik; bereksperimenlah dengan gaya layer Anda sendiri!

Inti dari animasi terletak pada garis alfa gradien yang terletak di dalam jenis huruf, jadi ketika Anda bereksperimen sendiri, Anda harus mencoba untuk memiliki semacam stroke atau out border untuk mempertahankan effect ini. Tentu saja, apa pun yang terjadi, apa pun yang cantik bagimu itu bagus!

Saya harap Anda menyukai tutorial ini, terima kasih untuk membaca!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.