Web Effect

WEB EFFECT

Tujuan Pembelajaran Khusus Setelah mempelajari modul ini diharapkan peserta mampu: 1. Menjelaskan dan mengaplikasikan image editing menggunakan Adobe Photoshop. 2. Menjelaskan dan mengaplikasikan pembuatan animasi menggunakan Captivate. A. Image editing menggunakan Adobe Photoshop Tampilan sebuah website harus menarik, supaya website tersebut dikunjungi banyak orang. Ada berbagai cara untuk membuat tampilan web menarik dan indah, diantaranya melalui proses image editing dan penambahan animasi, yang biasa disebut sebagai web effect. Adobe Photoshop adalah software

pengolah gambar yang sangat powerfull dengan segala fasilitasnya. Hasil image editing dengan Adobe Photoshop ini banyak dilihat di berbagai website, brosur, koran, majalah, dan media lainnya. Penggunaan adobe Photoshop ini dapat mendukung pembangunan sebuah web, misalnya dalam pembuatan banner, dimana dapat dilakukan berbagai cara image editing untuk menghasilkan banner yang menarik. Berikut ini adalah beberapa tahapan yang dilakukan dalam proses image editing menggunakan photoshop. 1. Jalankan Adobe Photoshop kemudian pilih menu File -> Open. Kemudian pilih gambar apa saja. Sebagai contoh gambar zhaow.jpg yang terlihat pada gambar berikut.

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

Web Effect

Seringkali letak tool-tool (palette) Adobe Photoshop sudah berubah dimodifikasi oleh pengguna sebelumnya. Untuk mengembalikan letak palette ini gunakan menu Windows -> Workspace -> Reset Palette Location. Area kerja Adobe Photoshop yang terlihat pada gambar 1.1, yaitu: A : Menu Bar, berisi perintah utama untuk membuka file, save, mengubah ukuran gambar, filter dan lain-lain. B : Option, berisi pilihan dari tool yang Anda pilih. Misalnya dipilih kuas/brush, maka ukuran/diameter brush ada di sini. C : Gambar, menampilkan gambar yang sedang dibuat atau diedit. D : Pallete Well, cara cepat untuk mengakses palet brushes, tool resets dan Layer Comps. Juga dapat digunakan untuk meletakkan palet yang sering digunakan. E : Toolbox, berisi tool untuk menyeleksi dan memodifikasi gambar.
Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

Web Effect

F : Palette, berisi jendela-jendela kecil yang di dalamnya terdapat perintah dan pilihan untuk dokumen/gambar yang sedang dikerjakan. 2. Membuka dokumen dan membuat duplikat dokumen Untuk membuka gambar gunakan menu File -> Open, sedangkan untuk membuat duplikat gambar gunakan menu Image -> Duplicate. 3. Mengubah ukuran gambar dan kanvas Jika ukuran gambar diubah, maka gambar akan membesar atau mengecil, lakukan dengan menu Image -> Image Size. Jika ukuran kanvas diubah, maka ukuran gambar tetap, akan ada kertas putih di sekeliling gambar, lakukan dengan menu Image -> Canvas Size. 4. Mencerminkan dan Memutar Gambar Cobalah menu Image -> Rotate Canvas -> Flip Canvas Vertikal, Image -> Rotate Canvas -> Flip Canvas Horisontal. Untuk memutar gambar, pilih menu Image -> Rotate Canvas -> pilih sudut yang dikehendaki. a. Undo Undo digunakan untuk membatalkan perintah terakhir, tekan Alt+Ctrl+Z, atau gunakan pallete history. b. Memindahkan gambar ke dokumen lain Untuk memindahkan gambar gunakan Move Tool.

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

Web Effect

5. Save for web Gunakan menu File -> Save for Web untuk menghasilkan gambar dengan ukuran kecil yang biasa digunakan pada web site. 6. Mencoba ToolBox Toolbox berisi berbagai tool untuk melakukan proses image editing. Toolbox dalam Photoshop terlihat pada gambar berikut.

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

Web Effect

Berikut ini adalah penjelasan beberapa tool yang dapat digunakan pada proses image editing.

1. Menyeleksi Gambar Menyeleksi berarti memilih bagian tertentu dari gambar. Dengan seleksi kita dapat mengcopy, mengubah, menggeser, atau menambahkan efek kepada bagian yang terseleksi tanpa mempengaruhi bagian lain. Ada tiga cara menyeleksi yaitu: a. Marquee Tool, yaitu menyeleksi dalam bentuk kotak, elips, row, dan kolom b. Lasso Tool, untuk menyeleksi dalam bentuk bebas, poligonal atau kekontrasan gambar (Magnetic Lasso Tool). c. Magic Wand Tool, untuk menyeleksi berdasarkan persamaan warna. Tipe seleksi ada dua (dapat dipilih pada Option Bar), yaitu: a. Normal, memiliki pinggiran yang tajam. b. Feather, memiliki pinggiran yang halus atau kabur. 2. Rectangular Marquee Tool Gunakan rectangular marquee tool untuk memotong gambar dalam bentuk kotak. Gunakan menu Select -> Transform Selection untuk mengubah seleksi dan menu Select -> Feather untuk mengatur ketajaman pinggiran potongan. 3. Elliptical Marquee Tool Digunakan untuk membuat seleksi elips atau lingkaran. Anda dapat menggunakan Select -> Transform Selection (atau klik kanan) untuk
Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

Web Effect

mengubah bidang yang mau diseleksi. Gunakan menu Select -> Feather untuk mengatur ketajaman tepi gambar. Gunakan Select -> Inverse untuk membalik seleksi. 4. Lasso Tool Seleksi ini digunakan untuk menyeleksi bentuk bebas dengan mouse. 5. Polygonal Lasso Tool Polygonal Lasso Tool digunakan untuk menyeleksi gambar yang memiliki tepi garis lurus, misalnya piramida pada gambar 2.5. Jika tombol Alt ditekan maka Polygonal Lasso Tool akan berfungsi seperti Lasso Tool biasa. Contoh gambar hasil seleksi piramida diperkecil dan diletakkan pada sudut kanan bawah. 6. Magnetic Lasso Tool Magnetic Lasso Tool penggunaanya cukup mudah, karena dengan tool ini seleksi gambar akan secara otomatis membuat garis seleksi pada gambar yang berwarna kontras. 7. Magic Wand Tool Magic wand tool akan menyeleksi gambar yang memiliki warna sama.

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

Web Effect

8. Crop Tool Crop tool digunakan untuk menghilangkan bagian yang tidak diseleksi. Contoh penggunaanya di sini digunakan untuk memperbaiki hasil scan yang miring. 9. Healing Brush Tool Healing Brush Tool digunakan untuk memperbaiki gambar pada bagian tertentu. Aktifkan tool ini, kemudian tekan Alt + Klik pada objek pada bagian yang tidak berkeriput, kemudian klik pada bagian yang keriputnya ingin dihilangkan. 10. Patch Tool Patch Tool digunakan untuk memperbaiki gambar. Tool ini dibuat dengan cara membuat selection dengan mouse atau dengan menahan tombol ALT untuk menghasilkan bentuk poligonal. Selanjutnya drag ke daerah yang akan dijadikan patokan perbaikan.

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

Web Effect

11. Red Eye Tool Red Eye Tool digunakan untuk memperbaiki warna merah pada mata. 12. Clone Stamp Tool Clone Stamp Tool digunakan untuk membuat duplikat area pada gambar, atau yang disebut cloning. Tekan ALT pada objek yang akan dikloning, kemudian gunakan mouse pada area tempat objek baru mau diletakkan. 13. Background Eraser Tool Tool ini digunakan untuk menghapus background yang memiliki kemiripan warna. Misalnya digunakan untuk menghapus background langit pada gambar kupu-kupu.

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

Web Effect

14. Magic Eraser Tool Seperti Background Eraser Tool, tool ini akan menghapus area dengan warna sama, namun efeknya adalah ke seluruh gambar, bukan hanya area yang diklik. 15. Color Replacement Tool Color Replacement Tool akan mengubah warna gambar tanpa mengubah bentuk dari gambar tersebut. Tool ini akan secara otomatis hanya mengubah area dengan warna sama menjadi warna lain yang dikehendaki. 16. Blur, Sharpen, dan Smugde Tool Blur Tool digunakan untuk mengaburkan area. Misalnya digunakan untuk menghilangkan bintik-bintik pada wajah. Sharpen Tool merupakan kebalikan dari Blur Tool. Dengan Sharpen Tool, gambar akan menjadi lebih tajam. Smugde Tool digunakan untuk mengubah bentuk gambar dengan cara drag mouse. 17. Dogde, Burn, dan Sponge Tool Dogde Tool digunakan untuk membuat area menjadi lebih terang. Burn Tool digunakan untuk mempergelap area. Spong Tool digunakan untuk mencerahkan (saturate) atau mengurangi warna (desaturate). 18. Paint Bucket Tool Paint Bucket Tool digunakan untuk mengganti background yang memiliki warna sama atau mirip. Background dapat diganti dengan pattern.

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

Web Effect

19. Gradient Tool Gradient tool digunakan untuk menghasilkan warna gradasi. Jangan lupa lakukan seleksi terlebih dahulu bagian mana yang akan diisi warna gradasi. Jika tidak, maka seluruh kanvas terisi dengan gradasi. 20. Brush Tool Brush Tool digunakan sebagai kuas dalam mengambar dengan mouse. Atur besar kecilnya brush, hardness, opacity, dan flow. Bush Tool dapat juga bekerja pada mode Air Brush. 21. Brightness/Contrast Brightness digunakan untuk mengatur kecerahan gambar. Contrast digunakan untuk mengatur ketajaman gambar. Gunakan menu Image -> Adjustment -> Brightness/Contrast. 22. Photo Filter Photo filter digunakan untuk memberikan filter pada gambar. Mirip seperti filter yang diletakkan di depan lensa kamera. Gunakan menu Image -> Adjustment -> Photofilter. 23. Match Color Match Color akan menyamakan warna gambar source kepada gambar yang akan diubah. Misalnya di sini akan diubah gambar danau3.jpg, menjadi suasana matahati terbit seperti gambar acuan. Gunakan tool ini melalui menu Image -> Adjustment -> Match Color.

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

10

Web Effect

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

11

Web Effect

24. Horisontal Type Tool Horisontal Type Tool digunakan untuk membuat teks secar horisontal. Hasil teks dapat dipindahkan dengan Move Tool.

25. Horisontal Type Mask Tool Horisontal Type Mask Tool digunakan untuk menyeleksi dalam bentuk teks. 26. Pen Tool Peen Tool digunakan untuk membuat garis lurus dan garis lengkung dalam bentuk vektor. Klik sekali untuk membuat anchor point, kemudian jika kurva telah terbentuk, drag anchor point untuk membuat direction point. Path yang dibuat oleh Pen Tool dapat diubah menjadi selection. 27. Rectangle, Ellipse, Poligon, dan Custom Shape Tool Tool ini berguna untuk menghasilkan bentuk kotak (rectangle), ellips, poligon, dan berbagai macam bentuk lain yang telah disediakan oleh Adobne Photoshop. Bentuk-bentuk tersebut misalnya hati, lampu, not balok, dan lain sebagainya.
Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

12

Web Effect

28. Filter Blur Filter Blur digunakan untuk mengaburkan gambar. Yang menarik dalam filter ini adalah mengaburnya gambar dapat dibuat secara radial. Gunakan filter ini melalui menu Filter -> Blur.

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

13

Web Effect

7. Materi Praktek a. Edit Background

NO 1.

Gambar

Keterangan Buka Photoshop CS5

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

14

Web Effect

2.

Klik File

3.

Pilih Open

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

15

Web Effect

4.

Pilih file yang akan di Edit

5.

Klik Open

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

16

Web Effect

6.

Klik kanan

7.

Pilih Duplicate Layer...

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

17

Web Effect

8.

Ini layer Duplicate dari Background Hilangkan visibility Background dengan klik icon mata pada layer

9.

Gunakan Magic Wand Tool (w) untuk menyeleksi background gambar

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

18

Web Effect

10.

lakukan seleksi background sehingga yang tersisa objek burung saja

11.

Tekan Delete pada keyboard untuk menghapus objek yang telah diseleksi

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

19

Web Effect

12.

13.

Selanjutnya kita akan memasukan background baru Klik kanan Tombol Start

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

20

Web Effect

14.

Pilih Explore

15.

Pilih file background yang akan ditambahkan

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

21

Web Effect

16.

Drag file ke Photoshop

17.

Ini merupakan layer background baru

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

22

Web Effect

18.

Atur background sehingga sesuai dengan ukuran layar kerja

19.

kemudian tekan Enter pada keyboard jika sudah selesai

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

23

Web Effect

20.

Drag layer baru, sehingga berada dibelakang objek utama

21.

Kemudian klik layer objek utama

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

24

Web Effect

22.

Ubahlah ukuran objek utama sesuai keinginan

23.

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

25

Web Effect

b. Crop Gambar NO 1. Gambar Keterangan Klik File Open

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

26

Web Effect

2.

Pilih file yang akan diedit Open

3.

Gunakan Crop Tool (C) untuk memotong gambar/objek

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

27

Web Effect

4.

Pilih bagian yang akan di Crop

5.

Kemudian tekan Enter

*bagian yang dilingkari akan hilang

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

28

Web Effect

6.

gambar hasil Crop

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

29

Web Effect

c. Text Effect NO Gambar 1. Keterangan Klik File

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

30

Web Effect

2.

Pilih New untuk membuat layar kerja baru

3.

Ubah ukuran dan properties dari canvas yang akan dibuat

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

31

Web Effect

4.

Klik OK

5.

Gunakan Horizontal Type Tool (T)

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

32

Web Effect

6.

Tuliskan kata yang akan diedit pada layar kerja

7.

blok kata yang telah dibuat

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

33

Web Effect

8.

Pilih Ukurun huruf

9.

Klik kotak warna Geser untuk memilih warna atau masukan kode warna yang diinginkan

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

34

Web Effect

10.

11.

Gunakan Move Tool (V) untuk mengatur posisi objek

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

35

Web Effect

12.

Klik kanan pada layer DESIGN

13.

Pilih Blending Option...

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

36

Web Effect

14.

Pilih Drop Shadow untuk memberikan effect bayangan

15.

Atur Distance, untuk mengatur jarak bayangan dengan objek utama

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

37

Web Effect

16.

Atur Spread untuk mengatur kejelasan bayangan

17.

Atur Size untuk mengatur ukuran bayangan

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

38

Web Effect

18.

Pilih Inner Shadow untuk memberikan effect bayangan kedalam...

19.

Atur Properties dari bayangan

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

39

Web Effect

20.

Pilih Inner Glow untuk memberikan effect glow/cahaya kedalam objek...

21.

Atur pula Properties dari glow

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

40

Web Effect

22.

Pilih Texture untuk meberi effect texture pada objek... Atur properties dari effect exture yang akan diberikan

23.

Pilih Gradient Overlay untuk mengatur agar objek memiliki effect warna gradient...

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

41

Web Effect

24.

Pilih Pattern Overlay untuk memberikan effect pola pada objek...

25.

Atur properties dari effek pola yang akan diberikan

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

42

Web Effect

26.

Klik OK

27.

Untuk memasukkan objek baru sebagai background Buka folder dimana anda menyimpan file gambar yang akan dimasukkan

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

43

Web Effect

28.

Pilih file gambar yang akan dimasukan menjadi background dengan teknik Drag

29.

Atur ukuran gambar sehingga menutupi layar kerja

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

44

Web Effect

30.

Kemudian tekan tombol Enter

31.

Kemudian geser posisi layer baru tersebut dibawah layer DESIGN

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

45

Web Effect

32.

Proses edit text selesai

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

46

Web Effect

d. Membuat Banner NO Gambar 1. Keterangan Klik File

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

47

Web Effect

2.

Pilih New...

3.

Berikan nama file dan ukuran banner yang akan dibuat

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

48

Web Effect

4.

Klik OK

5.

Klik kotak warna

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

49

Web Effect

6.

Masukan kode warna Atau geser untuk menemukan warna yang diinginkan

7.

Gunakan Paint Bucket Tool (G) untuk merubah warna latar belakang...

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

50

Web Effect

8.

Klik pada banner untuk mengganti warna background

9.

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

51

Web Effect

10.

Gunakan Brus Tool (B) untuk menambahkan brus pada layar kerja

11.

Pilih brus yang akan digunakan

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

52

Web Effect

12.

13.

Tentukan ukuran brus

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

53

Web Effect

14.

Pilih Flow untuk mengatur tingkat warna brus

15.

Klik icon Create a new layer untuk membuat layer baru

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

54

Web Effect

16.

Kemudian sapukan brus (Klik)

17.

Tekan Ctrl + t untuk masuk ke mode Free Transform. Lalu ubah ukuran brush dan posisikan sesuai keinginan

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

55

Web Effect

18.

19.

Tekan tombol Enter bila sudah

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

56

Web Effect

20.

Klik kanan pada layer 1

21.

Pilih Layer Properties... untuk merubah nama layer (Rename)

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

57

Web Effect

22.

Tuliskan nama layer baru contoh brus1

23.

Klik kanan pada brus1

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

58

Web Effect

24.

Pilih Blending Option...

25.

Pilih Drop Shadow, untuk memberi effect bayangan pada objek

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

59

Web Effect

26.

Atur properti dari bayangan

27.

Klik tombol OK

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

60

Web Effect

28.

Selanjutnya memasukan file dari folder Buka folder tempat file yang akan dimasukan

29.

Pilih File dan Drag ke layar kerja Photoshop

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

61

Web Effect

30.

Atur Posisi gambar dengan Move Tool (V)

31.

Atur kemiringan dan ukuran gambar dengan cara masuk ke mode Free Transform

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

62

Web Effect

32.

Atur propeti gabar dengan cara masuk ke Blending Option

33.

Masukkan beberapa gambar baru

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

63

Web Effect

34.

35.

Dalam Blending Option pilih menu Stroke untuk memberi outline pada gambar

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

64

Web Effect

36.

Ini hasil akhirnya

B. Pembuatan animasi dengan Captivate Web effect berupa animasi tulisan dapat memperindah sebuah tampilan web. Captivate adalah sebuah software yang dapat digunakan untuk membuat animasi sederhana namun terlihat menarik dengan cara yang mudah. Berikut ini adalah cara pembuatan animasi menggunakan captivate, tentunya captivate sudah harus terinstall di komputer. 1. Captivate diaktifkan, kemudian pilih record or create new movie seperti terlihat pada gambar berikut ini.

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

65

Web Effect

2. Kemudian akan terlihat tampilan seperti pada gambar berikut ini, pilih blank movie

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

66

Web Effect

3. Setelah itu, akan terlihat tampilan pengaturan ukuran screen, pilih user defined (custom) untuk menentukan ukuran sesuai keinginan.

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

67

Web Effect

4. Selanjutnya akan muncul tampilan blank movie, seperti terlihat pada gambar berikut ini.

Blank movie

5. Untuk memperbesar ukuran blank movie, klik dua kali pada blank movie sehingga terlihat tampilan seperti berikut ini.

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

68

Web Effect

6. Langkah berikutnya adalah menambahkan gambar dengan cara pilih menu insert, lalu pilih image, seperti terlihat pada gambar berikut ini.

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

69

Web Effect

7. Selanjutnya pilih gambar sesuai keinginan, kemudian akan muncul command crop atau resize, pilih crop jika ukuran gambar lebih besar dari ukuran blank movie, dan pilih resize jika ingin mengubah ukuran gambar, sehingga gambar akan ditempatkan dengan rapih pada blank movie seperti terlihat pada gambar berikut ini.

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

70

Web Effect

8. Langkah berikutnya adalah membuat animasi tulisan, dengan cara pilih menu insert, lalu pilih text animation, seperti pada gambar berikut ini.

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

71

Web Effect

9. Jika sudah memilih text animation, maka akan muncul tampilan pemilihan animasi text seperti berikut ini.

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

72

Web Effect

Penulisan text dilakukan pada kotak text, misalnya text yang ditulis yaitu lezat, murah, sehat. Kemudian pilih animasi tulisan pada kotak effect, misalnya dipilih animasi balloons. Selanjutnya klik tombol ok.

10. Langkah berikutnya untuk melihat tampilan movie yang telah dibuat, dilakukan dengan cara memilih menu preview, pilih movie. 11. Lakukan penyimpanan file movie tersebut dengan cara memilih menu file dan pilih save, dan file diberi nama sesuai keinginan. 12. Selanjutnya supaya file movie tersebut dapat dijadikan banner web, maka file movie harus dipublish dengan cara memilih menu File, lalu pilih Publish seperti terlihat pada gambar berikut ini.

Selanjutnya file ini akan mempunyai ekstension swf dan dapat dijadikan banner sebuah website.

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

73

Web Effect

1. Praktek Animasi NO Gambar 1. Keterangan

Klik tombol Start

2.

Buka Macromedia Flash 8

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

74

Web Effect

3.

Untuk membuat file baru klik Flash Document

4.

Untuk merubah ukuran dummy stage Klik tombol Size 550 x 400 pixels

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

75

Web Effect

5.

Masukkan lebar dan panjang

6.

lalu pilih warna background

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

76

Web Effect

7.

Klik tombol OK

8.

Untuk membuat kotak klik Rectangle tool

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

77

Web Effect

9.

10.

Klik kanan pada frame berikutnya lalu pilih Insert Keyframe

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

78

Web Effect

11.

Untuk merubah ukuran objek klik Free Transform Tool

12.

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

79

Web Effect

13.

Klik Tween pada timeline antara keyframe pertama dan keyframe yang objeknya baru diubah ukurannya

14.

Pilih Shape

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

80

Web Effect

15.

Untuk membuat layer baru Klik Insert Layer

16.

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

81

Web Effect

17.

Untuk menambahkan keyframe baru Klik Insert Blank Keyframe

18.

Untuk membuat garis Klik Line tool

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

82

Web Effect

19.

Tambahkan keyframe

20.

Ubah ukuran garis pada keyframe yang baru dibuat Setelah itu Klik Tween lalu Pilih Shape

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

83

Web Effect

21.

22.

Tambahkan keyframe

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

84

Web Effect

23.

24.

Buat garis

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

85

Web Effect

25.

Tambahkan keyframe

26.

klik selection tool

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

86

Web Effect

27.

Seleksi garis yang baru dibuat

28.

Ubah ukuran garis

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

87

Web Effect

29.

30.

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

88

Web Effect

31.

Lakukan berulang-ulang hingga membentuk objek seperti ini

32.

Tambahkan layer baru

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

89

Web Effect

33.

Untuk menambahkan keyframe Klik Insert Keyframe

34.

Untuk memasukkan teks Klik Text Tool

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

90

Web Effect

35.

Pindahkan teks hingga keluar dummy stage

36.

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

91

Web Effect

37.

Tambahkan keyframe

38.

Klik kanan lalu Pilih Create Motion Tween

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

92

Web Effect

39.

Tambahkan keyframe

40.

Untuk memasukkan teks klik Text tool

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

93

Web Effect

41.

42.

Tambahkan keyframe

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

94

Web Effect

43.

Klik Selection tool

44.

Ganti warna teks yang baru dibuat dengan cara Klik Text (fill) colour

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

95

Web Effect

45.

46.

ulangi langkah yang sama seperti pada langkah 42-44 untuk menambahkan animasi warna yang lebih banyak

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

96

Web Effect

47.

48.

Untuk menambahkan keyframe yang kosong Klik Insert Blank Keyframe

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

97

Web Effect

49.

Untuk membuat layer baru Klik Insert layer lalu buat kotak memanjang

50.

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

98

Web Effect

51.

Untuk menambahkan keyframe klik Insert Keyframe

52.

Buat objek kotak menjadi lebih besar

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

99

Web Effect

53.

Klik Tween

54.

Pilih Shape

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

100

Web Effect

55.

Untuk membuat keyframe yang kosong Klik Insert Blank Keyframe

56.

Lalu klik menu File

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

101

Web Effect

57.

Pilih Import

58.

PIlih Import to Library

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

102

Web Effect

59.

Pilih gambar

60.

Klik menu Window

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

103

Web Effect

61.

Pilih Library

62.

Drag gambar yang baru dimasukkan ke dummy stage

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

104

Web Effect

63.

64.

Untuk menambahkan keyframe Klik Insert Keyframe

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

105

Web Effect

65.

Ubah gambar menjadi lebih besar menggunakan Free Transform tool

66.

Ubah gambar menjadi transparan

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

106

Web Effect

67.

Untuk membuat objek menjadi transparan Pilih Alpha lalu atur tingkat transparansi

68.

Klik kanan lalu Pilih Create Motion Tween

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

107

Web Effect

69.

Untuk membuat layer baru Klik Insert layer

70.

Klik menu Window

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

108

Web Effect

71.

Pilih Common Libraries

72.

Pilih Buttons

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

109

Web Effect

73.

Masukkan tombol pause, play, stop

74.

Klik kanan salah satu tombol lalu Pilih Actions

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

110

Web Effect

75.

Masukkan Script untuk tombol pause Yaitu: On (release) { stop(); }

76.

Masukkan Script untuk tombol start Yaitu: On (release) { play (); }

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

111

Web Effect

77.

Masukkan Script untuk tombol start Yaitu: On (release) { gotoAndStop (); }

78.

Untuk melihat hasil tekan Ctrl + Enter pada keyboard

Dwi wahyu Widiastuti Dep. Elektronika dan Informatika P4TK BMTI Bandung

112