Pembuatan Icon Statik

PROSES PEMBUATAN ICON statik dalam website kami menggunakan software CorelDraw 10 (Corel), Adobe Illustrator  10 (AI), dan Photoshop 7 (PS).

Prosesnya:

1. Gambar icon dengan Corel
2. Setelah icon jadi, buka AI.
3. Setting page AI seukuran dengan ukuran situs anda (mis: 800×600 pixel)
4. Strech icon di corel sebesar wilayah page, karena semakin besar ukurannya, semakin halus hasil copy paste icon ke AI.
5. Copy icon dari Corel kemudian paste ke AI.
6. Tips: untuk menghemat memory sebaiknya copy paste semua icon ke AI, kemudian tutup Corel.
7. Setelah menutup Corel, buka PS.
8. Atur ukuran icon sesuai keinginan anda (ukuran icon di AI sama dengan PS setelah di copy paste).
9. Copy paste icon dari AI ke PS.
10. Kemudian “save for web” icon dari PS menjadi GIF / JPEG (sesuai kebutuhan anda).
11. Jadi lah icon anda.

Tujuan dari proses diatas adalah mempertahankan kehalusan gambar icon. (dan selain itu menggambar kartun lebih mudah menggunakan Corel … IMHO)

Karena “gambar vektor” (di Corel / AI) dapat di strech tanpa menghilangkan kehalusan gambar.

Lain halnya jika anda menggambar icon di PS kemudian di strech lebih besar / lebih kecil, maka hasil yang didapatkan menjadi Jiggy / Bluring.

Untuk proses membuat icon animasi (seperti yang anda contohkan), anda dapat melakukan proses diatas.

Hanya saja anda harus membuat gerakan setiap frame dalam icon animasi tsb. (capek memang :)) )

Setelah setiap gambar gerakan menjadi GIF, anda dapat menggabungkannya menjadi animasi menggunakan:
Adobe Image Ready atau GIF Animator.

Oh iya … jagan lupa simpan file AI nya ….
Siapa tahu anda ingin menjadikannya animasi Flash (Macromedia Flash).
anda tinggal copy paste dari AI ke Flash.

Contohnya dapat anda lihat di http://www.psb-online.or.id/ (banner iklan Telkomnet instan / speedy),

Itu kami buat dengan proses yang sama (sampai di AI saja), kemudian copy paste ke Flash, lalu kami animasikan menjadi Flash.

Transparent Objects

This tutorial will explain how to export transparency in a bitmap image from Photoshop to Flash using the .png format.

Drag the sphere.

.png files support an 8-bit alpha channel. Meaning that each pixel has 4 values- one for Red, Green, Blue and Transparency. This allows .png files in Flash to have dynamic transparency, as opposed to a linear transparency, where the entire image is transparent the same amount.

The two parts of a .png are illustrated in the left diagram. The Image is just a normal graphic of a sphere, and the Alpha channel is the transparency. Black pixels on the Alpha channel mean that the corresponding pixel on Image will be completely transparent. White pixels on the Alpha channel mean it’s completely opaque, and everything in between makes it partially transparent.

The sphere in the left diagram was rendered and exported with 3D Studio MAX.

1.

In Photoshop 5.5, create or open the image you want transparently imported to Flash.

The image must be created in Photoshop, or have transparent layers.

If you don’t feel like creating a new image, use this e.

2.

In the Layers window, hide the Background layer, to expose the default grid.

Now, effect this layer to have the transparency you’d like in Flash.

In the menu go:
File > Save for Web…

3.

Change the Settings dropdown to PNG-24, and select Transparency.

Press OK, and save the file.

Now, when you import the .png into Flash the image won’t have a white chunk around it, and it will be anti-aliased.

To affect the alpha channel with Photoshop 5.5, read step 4. If you’re using Photohop 6+, skip to step 5

4.

Now, open the .png file you just exported in Photoshop. It will have only one layer, and one channel.

Go to the Channels palette, and select the Alpha 1 channel. Right now the e alpha channel is just anti-aliased around the edges. To make the center look transparent, drag Alpha 1 onto the Load channel as selection button.

In the menu:
Select > Modify > Contract… 7 pixels.

Select > Feather… 3 pixels.

and then fill the selection with a light gray color.

Press Ctrl+S to save the .png.

5.

Open Flash, create a new symbol or layer, and File > Import… the .png.

Drag the transparent e!
Grab the .fla.