Memindahkan Desain Dari Photoshop Pada Flash

Untuk memasukkan desain yang telah kita buat pada photoshop ke flash, kita perlu mengetahui bagian-bagian yang sulit dibuat pada flash dan bagian-bagian yang lebih baik dibuat langsung pada flash. Perlu kita ingat bahwa flash merupakan software berbasis vector, sedangkan photoshop merupakan software berbasis raster/bitmap.

Lalu, masih ingatkah Anda kelebihan dan kekurangan software raster dan vector ???

Berikut ini akan kita bahas perbandingan gambar berbasis raster dan vector.

Raster / Bitmap

Sifat gambar raster :

• Merupakan gambar yang terdiri dari titik-titik pixel. Apa itu pixel??

Pixel adalah titik-titik warna yang membentuk suatu gambar.

• Kekurangan gambar raster akan terlihat pecah apabila diperbesar melebihi kemampuannya.
• Karena terbentuk dari titik-titik warna yang berdiri sendiri, gambar raster memiliki lebih banyak kemungkinan warna dan gradiasi juga lebih kaya efek.

Sedangkan sifat gambar vector :

• Merupakan gambar yang terbentuk dari kurva x dan y.
• Kelebihan gambar vector kualitas gambar tidak akan menurun walaupun diperbesar sampai ukuran berapapun.
• Sebaliknya kekurangan gambar vector adalah keterbatasan pemberian gradiasi warna dan efek.

Oke, sekarang kita akan memindahkan template yang telah kita buat pada photoshop, satu per satu bagian desain.

Langkah kerja :

1. Menyimpan Background dalam format JPG dengan Save For Web

1. Buka file dengan format *.psd dari desain yang telah anda buat. Kenapa harus format psd?? Karena hanya pada format psd kita masih dapat mengedit layer pada gambar satu per satu.
2. Langkah pertama kita buat file jpeg dari desain yang telah kita buat. File ini akan kita import ke dalam flash sebagai acuan desain kita di flash.
3. Selanjutnya kita ambil background utama yang akan kita gunakan pada flash. Sedangkan bagian bagian lainnya kita Hide / sembunyikan terlebih dahulu. Bagaimana?? Yakni dengan mengklik gambar mata pada panel layer.

4. Simpan Background dengan format .*jpg, menggunakan fungsi Save for Web

Maka akan tampil window seperti :

Kenapa harus menggunakan Save for Web?? Karena dengan fungsi ini kita bisa mendapatkan gambar dengan kualitas yang hampir sama baik namun dengan beban file yang lebih ringan. Klik pada pilihan 4-up untuk mendapatkan perbandingan kualitas dan beban file gambar.

Perhatikan pada bagian bawah gambar dapat kita lihat beban file gambar dan kecepatan aksesnya.

Klik dan geser pada gambar untuk menggeser ke bagian gambar yang lain. Klik pada salah satu gambar jika ingin mengubah format gambar. Kemudian ubah format gambar pada sebelah kanan

5. Klik salah satu gambar, kemudian ubah formatnya menjadi JPEG. Perhatikanlah perbedaan beban file antara file original dengan file JPEG yang kita ubah.
6. Setelah selesai klik Save, isi nama file dan tempat kita menyimpan file tersebut.

2. Menyimpan Bagian-Bagian Desain Secara Transparan Dengan Format *.png

Setelah mengambil bagian background, maka langkah selanjutnya adalah kita akan mengambil bagian-bagian lain dari desain secara bertahap. Bagian-bagian tersebut akan kita simpan dalam format png. Mengapa png??

Jika kita perhatikan, penyimpanan gambar dengan format jpeg akan menghasilkan background berwarna putih. Apabila akan kita masukkan ke dalam bagian desain, maka background putih tersebut dapat mengganggu desain yang diinginkan. Dengan format png kita bisa mendapatkan background transparan, sehingga tidak menggangu desain di bawahnya.

Lalu bagaimana kita mengambil bagian dari desain satu per satu???

Berikut langkah-langkahnya :

1. Sembunyikan / Hide terlebih dahulu bagian lain yang tidak kita perlukan, dengan menklik tanda mata di layer tersebut.
2. Misalkan kita akan mengambil bagian line pada desain, maka kita sembunyikan bagian lain.

3. Seleksi pada bagian line yang akan kita ambil
   

   

   
   

   

   
   

4. Lalu Klik Edit – Copy Merge
   

   

   
   

   
   

5. Kemudian buat file baru : File – New. Beri nama dengan Line1, biarkan ukuran dokumen pada default. Kemudian ganti background content menjadi Transparent untuk mendapatkan background yang transparan.

Maka akan kita dapatkan pada photoshop kanvas baru yang ukurannya sama dengan ukuran seleksi yang kita lakukan pada line yang hendak kita copy.

6. Klik paste pada canvas tersebut. Maka akan kita dapatkan line berada pada canvas baru dengan background transparan.

7. Lakukan Save for Web dari menu File – save for Web and Devices
8. Ubah gambar ke dalam format PNG-24, kemudian klik Save. Maka akan kita dapatkan gambar line tersebut memiliki background transparan.

Lakukanlah hal yang sama untuk setiap bagian yang sulit dibuat pada flash dan memiliki hasil terbaik jika dibuat pada photoshop, yakni memiliki efek-efek yang dibuat pada photoshop. Ingatlah, bahwa untuk mendapatkan gambar dengan latar belakang transparan, kita harus menyimpannya dalam format png.

Nah, setelah kita membuat setiap bagian desain menjadi file gambar terpisah dengan latar transparan, apa yang harus kita lakukan selanjutnya???

Jawabannya adalah kita akan memasukkan bagian-bagian tersebut ke dalam flash. Bagaimana langkah-langkahnya?? Berikut adalah jawabannya :

Langkah memasukkan desain ke dalam flash :

1. Buat dokumen baru pada flah, dengan cara memilih Create New Flash Document atau memilih Action Script 2.0 jika anda menggunakan Adobe Flash CS3 dan versi seterusnya keatas.

2. Pertama terlebih dahulu kita masukkan desain utuh yang akan kita gunakan sebagai acuan, yakni dengan cara klik File – Import – Import to stage – lalu pilih file desain yang sudah kita buat.
3. Letakkan gambar di luar stage dokumen, agar mempermudah kita mengambil acuan.
   

   

   
   
4. Klik pada desain kemudian buka panel properties. Perhatikanlah ukuran Weight dan Height dari gambar desain tersebut.
   

   

   
   
5. Selanjutnya kita akan membuat ukuran document / stage sama dengan ukuran gambar. Buka pengaturan dokumen dengan cara klik pada menu bar Modify – Document sehingga muncul tampilan seperti berikut :
   

   

   
   
6. Ubahlah ukuran dokumen sama dengan ukuran gambar yang terdapat pada Properties.

7. Selanjutnya lakukan import to stage utk gambar background
8. Klik pada gambar, lalu buka panel Properties. Atur posisi X dan Y menjadi 0, 0. Kenapa harus 0,0?? Hal tersebut berarti kita menempatkan gambar pada posisi tengah dokumen.
   
   

   

   
   
   
   Setelah memasukkan background, selanjutnya yang harus kita lakukan adalah memasukkan bagian-bagian lain dari desain. Bagian- bagian tersebut akan kita masukkan pada layer-layer yang terpisah. Mengapa harus dimasukkan pada layer terpisah???
   Jawabannya adalah agar kita lebih mudah jika ingin memberikan animasi pada bagian-bagian tersebut.
   
   (to be continued..)