Team RPL – smkn1 dps
Modul Design Grafis
dan Animasi Dasar
oleh : Team RPL
Rekayasa Perangkat Lunak
Teknologi Informasi dan Komunikasi
SMK Negeri 1 Denpasar
Team RPL – smkn1 dps
KONSEP DASAR DESIGN DAN ANIMASI
Unsur – unsur dasar design
Dalam Pembuatan sebuah desain kita perlu memperhatikan bentuk desain yang
Anda inginkan. Tentunya supaya desain Anda dapat dilihat bagus (sesuai maksud
dan tujuan Anda membuatnya), maka unsur-unsur pembuatan desain yang perlu
diperhatikan adalah:
1. Garis (Line)
Sebuah garis adalah unsur desain yang menghubungkan antara satu titik poin
dengan titik poin yang lain sehingga bisa berbentuk gambar garis lengkung
(curve) atau lurus (straight). Garis adalah unsur dasar untuk membangun bentuk
atau konstruksi desain.
2. Bentuk (Shape)
Bentuk adalah segala hal yang memiliki diameter tinggi dan lebar. Bentuk dasar
yang dikenal orang adalah kotak (rectangle), lingkaran (circle), dan segitiga
(triangle). Sementara pada kategori sifatnya, bentuk dapat dikategorikan menjadi
tiga, yaitu:
2.1) Huruf (Character) : yang direpresentasikan dalam bentuk visual yang dapat
digunakan untuk membentuk tulisan sebagai wakil dari bahasa verbal dengan
bentuk visual langsung, seperti A, B, C, dsb.
2.2) Simbol (Symbol) : yang direpresentasikan dalam bentuk visual yang
mewakili bentuk benda secara sederhana dan dapat dipahami secara umum
sebagai simbol atau lambang untuk menggambarkan suatu bentuk benda nyata,
misalnya gambar orang, bintang, matahari dalam bentuk sederhana (simbol),
bukan dalam bentuk nyata (dengan detail).
2.3) Bentuk Nyata (Form) : bentuk ini betul-betul mencerminkan kondisi fisik dari
suatu obyek. Seperti gambar manusia secara detil, hewan atau benda lainnya.
Team RPL – smkn1 dps
3. Tekstur (Texture)
Tekstur adalah tampilan permukaan (corak) dari suatu benda yang dapat dinilai
dengan cara dilihat atau diraba. Yang pada prakteknya, tekstur sering
dikategorikan sebagai corak dari suatu permukaan benda, misalnya permukaan
karpet, baju, kulit kayu, dan lain sebagainya.
4. Ruang (Space)
Ruang merupakan jarak antara suatu bentuk dengan bentuk lainnya yang pada
praktek desain dapat dijadikan unsur untuk memberi efek estetika desain. Sebagai
contoh, tanpa ruang Anda tidak akan tahu mana kata dan mana kalimat atau
paragraf. Tanpa ruang Anda tidak tahu mana yang harus dilihat terlebih dahulu,
kapan harus membaca dan kapan harus berhenti sebentar. Dalam bentuk fisiknya
pengidentifikasian ruang digolongkan menjadi dua unsur, yaitu obyek (figure) dan
latar belakang (background).
5. Ukuran (Size)
Ukuran adalah unsur lain dalam desain yang mendefinisikan besar kecilnya suatu
obyek. Dengan menggunakan unsur ini Anda dapat menciptakan kontras dan
penekanan (emphasis) pada obyek desain anda sehingga orang akan tahu mana
yang akan dilihat atau dibaca terlebih dahulu.
6. Warna (Color)
Warna merupakan unsur penting dalam obyek desain. Karena dengan warna orang
bisa menampilkan identitas, menyampaikan pesan atau membedakan sifat dari
bentuk-bentuk bentuk visual secara jelas. Dalam prakteknya warna dibedakan
menjadi dua: yaitu warna yang ditimbulkan karena sinar (Additive color/RGB)
yang biasanya digunakan pada warna lampu, monitor, TV dan sebagainya, dan
warna yang dibuat dengan unsur-unsur tinta atau cat (Substractive color/CMYK)
yang biasanya digunakan dalam proses pencetakan gambar ke permukaan benda
padat seperti kertas, logam, kain atau plastik.
Team RPL – smkn1 dps
Dengan menggunakan unsur-unsur desain tersebut, Anda akan membuat bentuk
desain yang Anda inginkan. Tentunya supaya desain Anda dapat dilihat bagus
(sesuai maksud dan tujuan Anda membuatnya), maka Anda harus mengenal
unsur-unsur di atas secara baik.
DefinisiDesain Komunikasi Visual adalah ilmu yang mempelajari konsep
komunikasi dan ungkapan kreatif, teknik dan media untuk menyampaikan pesan
dan gagasan secara visual, termasuk audio dengan mengolah elemen desain grafis
berupa bentuk gambar, huruf dan warna, serta tata letaknya, sehingga pesan dan
gagasan dapat diterima oleh sasarannya.
PrinsipPesan visual harus kreatif (asli, inovatif dan lancar), komunikatif, efisien
dan efektif, sekaligus indah/estetis.
Istilah
1. Seni Grafis / Graphic Arts, termasuk ke dalam kelompok bidang ilmu Seni
Murni.
2. Grafis / Graphic, adalah hal yang berkaitan dengan tulisan atau gambar
yang mengandung makna untuk menyampaikan suatu pesan atau
informasi.
3. Desain Grafis / Graphic Design, istilah yang dipakai sebelum
menggunakan istilah Desain Komunikasi Visual, berasal dari kata bahasa
Yunani “Graphos” yang berarti “tulisan/gambar”.Untuk mengantisipasi
perkembangan dunia komunikasi visual serta perannya yang semakin luas,
maka digunakan istilah: Desain Komunikasi Visual.
Team RPL – smkn1 dps
Perlunya Pendidikan Desain Komunikasi Visual
1. Mengenal konsep Desain Komunikasi Visual sebagai Dasar
Perancangan/Desain dan Strategi Komunikasi.
2. Mengenal Desain Grafis (Desain Komunikasi Visual) dan Bahasa Rupa
sebagai Pengolah Visual Data Informasi.
3. Mengenal secara teknis prinsip, proses teknologi informatika dan sistem
informasi manajemen.
4. Memahami elemen desain grafis sebagai alat penyampai pesan yang
efektif, efisien, komunikatif dan estetis kreatif dalam konteks konsep-
policy/planning/ strategy dan implementasi serta evaluasi.
5. Memahami strategi komunikasi, psikologi dan sosial/ antropologi
budaya.
6. Memahami beberapa media baru, terutama dunia media / ruang cyber
serta tekniknya, yaitu:a. Animasi – Audio Visual (Mix Media)b.
Interaktif media dan web/website yang biasa dipergunakan untuk
melengkapi E-media dan Mixmedia/Multimedia.
7. Menguasai konsep perancangan / desain komunikasi visual dan
pemasaran global secara universal.Menguasai proses dan tehnik
perancangan /desain yang dapat mengantisipasi perkembangan dunia
kewirausahaan/enterprenuership.
Apakah Desain Grafis?
Umpamakan anda ingin mengumumkan, menginformasikan atau menjual sesuatu,
menghibur atau membujuk seseorang, menjelaskan suatu sistem yang rumit atau
mempertunjukkan suatu proses yang panjang dan berbelit-belit. Dengan kata lain,
anda mempunyai suatu pesan yang harus dikomunikasikan. Bagaimana anda
“mengirimkan” itu? Mungkin anda bisa menceritakan atau bertutur kepada setiap
orang satu persatu atau menyiarkan dengan radio atau pengeras suara. Namun
yang anda lakukan itu adalah komunikasi lisan. Sementara jika anda
menggunakan media visual atau rupa seperti poster, mengetik surat, menciptakan
logo perusahaan, iklan majalah, atau cover album DVD dan sejenisnya, walaupun
Team RPL – smkn1 dps
sekedar menggunakan printout komputer dan didalamnya secara pasti
menggunakan format visual, maka yang anda lakukan sudah dapat dikatakan
sebagai sebuah kerja desain grafis.
Dari segi keilmuan, hakekatnya desain grafis adalah salah satu bentuk dari ilmu
seni rupa terapan. Dalam prosesnya diberikan kebebasan kepada sang desainer
atau perancang untuk memilih, menciptakan dan mengatur elemen-elemen rupa
dasar seperti garis, warna, bidang, raut, tekstur, value serta bekerja berdasarkan
prinsip-prinsip dasar desain diantaranya adalah balance/keseimbangan,
rhythm/irama, emphasis/penekanan dan unity/kesatuan. Desainer juga bekerja
dengan didukung beberapa aspek lain seperti pemahaman dalam
mengorganisasikan proses kreasi dan memiliki kemampuan dalam menyampaikan
atau menangkap pesan. Pesan-pesan tersebut digarap oleh desainer dalam sebuah
karya yang bertujuan untuk diproduksi atau dikomunikasikan melalui berbagai
media.
Desain grafis adalah sebuah proses kreatif yang mengkombinasikan seni dan
teknologi dalam mengkomunikasikan gagasan. Desainer bekerja dengan
seperangkat ‘alat’ untuk menyampaikan pesan yang berasal dari sumber pesan
atau client kepada audience. Beberapa perangkat yang digunakan antara lain
gambar, ilustrasi, lukisan, photography, huruf, angka, grafik dan atau image yang
telah di-generate oleh beberpa aplikasi komputer. Desainer membuat, memilih
dan mengorganisasikan semuanya atau sebagian dari element dan perangkat
tersebut ke dalam sebuah bidang yang dinamakan “white space” dan selanjutnya
disampaikan kepada publik sebagai sebuah media komunikasi.
Desain grafis memiliki beberapa macam basis karya dengan melihat komposisi
elemen-elemen yang terdapat dalam karya tersebut, diantaranya adalah:
Desain berbasis Image
Desainer membangun image yang merupakan representasi dari gagasan
pribadinya atau client bisnisnya. Image sangat kuat untuk dipercaya dan
merupakan alat komunikasi yang dapat mempengaruhi, mampu menyampaikan
tidak hanya informasi tetapi juga suasana hati dan emosi. Orang akan bereaksi
Team RPL – smkn1 dps
terhadap image secara instinktif berdasar pada kepribadian mereka, asosiastif
berdasarkan lingkunganya, dan experientatif akibat pengalaman sebelumnya.
Image diambil dengan berbagai cara dan teknik yang disesuaikan dengan
kebutuhan aplikasi dan media. Di dalam Desain berbasis Image, hal utama yang
harus diperhatikan seorang desainer adalah memahami bahwa image-image yang
diekspose harus membawa keseluruhan pesan, untuk itu terkadang desainer
memberi sedikit teks untuk bantuan. Karena setiap image yang tampil merupakan
bahasa yang harus disampaikan, maka pada sebuah proses eksekusi sebuah image,
seorang desainer juga harus memahami bagaimana pentingnya memanajemen
kepekaan terhadap calon penerima pesan, sehingga desainer tidak membabi buta
dengan mengandalkan selera estetisnya belaka dalam menampilkan image
tersebut. Bukankah sebuah gambar dapat memunculkan ribuan makna dan
maksud? Maka, arah dari maksud tersebut harus dapat tersampaikan dengan
image yang dieksekusi oleh desainer.
Desain berbasis Type
Dalam beberapa hal, para desainer bersandar pada teks untuk menyampaikan
suatu pesan, tetapi mereka menggunakan kata-kata dengan cara yang berbeda dari
tatacara yang biasa dilakukan oleh para penulis. Bagi para desainer, mereka
melihat visual teks adalah sama pentingnya seperti maksud atau arti dari teks itu
sendiri. Format visual teks, baik tipography yang dicetak atau penulisan buatan
tangan, memiliki fungsi yang sama yaitu untuk melaksanakan fungsi komunikasi
dan seorang desainer pasti sadar bahwa keberadaaan teks harus memiliki fungsi
readibility/keterbacaan. Teks juga dapat menghentikan perhatian pada suatu
maksud tertentu dan mengidentifikasi sebuah makna pada suatu tampilan visual.
Namun keterbacaan teks akan diolah oleh desainer tidak hanya mengandalkan arti
sebuah teks secara leksikal saja atau hanya sesuai dengan tata bahasa saja , tapi
juga menyebutkan maksud atas peranan teks itu sendiri secara fisik. Sebagai
contoh, kita tidak akan menemukan dalam sebuah kemasan pasta gigi yang
menuliskan merk-nya dengan menggunakan teks bergaya ‘Stencil’, karena image
Stencil font identik dengan style Army Look.
Team RPL – smkn1 dps
Hampir semua desainer sepakat bahwa penggunaan teks sebagai sebuah tampilan
visual dengan tanpa mengabaikan fungsi keterbacaan adalah penting. Mari kita
perhatikan pada suatu “halaman umum” yang didalamnya tercetak sebuah teks,
pernahkah muncul sebuah pertanyaan, apakah kerja desain grafis dilibatkan
didalam merancang halaman yang nampaknya sederhana seperti itu? Pikirkanlah,
apa yang anda akan lakukan jika anda diminta untuk mendesain kembali halaman
itu. Akankah anda merubah jenis typeface atau ukurannya? Akankah anda
membagi teks ke dalam dua kolom yang lebih ramping? Bagaimana dengan garis
tepi dan pengaturan jarak antar paragrap? Akankah anda menekuk atau memberi
spasi pada setiap paragrap atau mungkin memulai dengan perubahan teks berupa
rekayasa tulisan hias? Apakah anda akan memberikan kekuatan pada teks dengan
dengan cara memberi nomor, jumlah halaman atau penulisan teks tertentu pada
setiap bab? Akankah anda merubah sebuah terminologi dengan cara membuat
cetak tebal pada teks tersebut, atau barangkali menggunakan huruf italic/miring
dan atau huruf yang bergaris bawah? Adakah hal lain yang dapat memberikan
kekuatan dan tekanan dalam sebuah perubahan yang anda pertimbangkan, atau
seberapa kuat teks-teks ini akan mempengaruhi reaksi para pembaca? Perlu
diketahui, bahwa semua pertanyaan diatas dilakukan dan dijawab oleh Designer
pada saat memulai pekerjanya hingga proses evaluasi sebelum teks-teks itu
diputuskan untuk dikomunikasikan.
Desain berbasis Image dan Type
Para desainer sering mengkombinasikan antara tipography dan image untuk
mengkomunikasikan satu pesan pada audience. Eksplorasi dengan berbagai
kemungkinan kreatif yang dipresentasikan dalam kombinasi tipography (teks dan
sebagainya) dan image (fotografi, ilustrasi, dan seni rupa), bertujuan memberi
tampilan serta informasi yang lengkap. Sehingga para desainer tidak hanya
menciptakan kesesuaian antara ‘letterforms’ dan image belaka tetapi juga untuk
menetapkan keseimbangan terbaik diantara keduanya.
Desain berbasis Simbol, Logo dan Logotype
Simbols dan logo adalah hal yang spesial, berbentuk informasi yang sangat
ringkas dan berfungsi sebagai ‘identifers’. Simbol adalah reperentasi abstrak dari
Team RPL – smkn1 dps
gagasan atau identitas tertentu. Logo adalah visual dalam format simbolis yang
berfungsi mewakili konsep-konsep atau kelompok tertentu. Logotypes adalah
identifikasi-identifikasi baik konsep maupun kelompok yang visualnya didasarkan
pada suatu deretan kata atau teks yang dirangkai khusus. Beberapa identitas
merupakan ‘hybrid’ atau kombinasi antara logotypes dengan simbol. Dalam
menciptakan ‘identifiers’, desainer akan menetapkan sebuah visual yang jelas dan
sesuai dengan visi dan misi sebuah korporasi, kelompok, konsep atau gagasan
sehingga terwakili dan sesuai dengan masing-masing tujuannya.
Desainer Grafis, Sumber Pesan dan Audience
Pada suatu pihak, sebuah sumber pesan terkadang terlalu dekat dengan isi pesan
itu sendiri, tentunya mengandung unsur subyektifitas yang sangat tinggi, sehingga
perlu dicari cara untuk dapat memperkenalkan dan memahamkan pesan-pesan
tersebut. Audience, pada sisi lain, adalah sebuah komunitas kompleks, yang
sangat luas dan memiliki macam ragam karakter. Hal itu berdampak langsung
dengan bagaimana cara atau mekanisme dalam mengkomunikasi pesan-pesan
tersebut. Lebih dari itu, pada umumnya sukar untuk membuat audience menjadi
bagian dari proses komunikasi.
Berbeda dengan sumber pesan dan audience, para desainer grafis belajar
bagaimana cara membangun sebuah pesan dan bagaimana cara menyajikan itu
dengan sukses dan baik. Karena para desainer grafis adalah mata rantai diantara
sumber pesan dan audience, mereka memiliki dua sisi pekerjaan yang harus
dilakukan. Pertama, mereka bekerja dengan sumber pesan (dalam hal ini adalah
client) untuk memahami isi dan tujuan pesan. Kedua, bekerja sama dengan
peneliti-peneliti pasar dan spesialis-spesialis lain bahkan dengan kondisi riil dari
masyarakat untuk memahami sifat alami para audience.
Belajar Mendesign Web
Sering kita temui website yang tipikal: "Welcome to my homepage," animasi e-
mail, background dengan tulisan miring (diagonal), animasi garis pembatas, tabel
dengan border tiga-dimesi dan lain-lain. Hal ini terjadi akibat dari fasilitas
Template yang disediakan oleh software pembuat web seperti: FrontpageT, Corel
Team RPL – smkn1 dps
WebDesignerT, dan sebagainya yang ditujukan untuk mempermudah
penggunanya dalam membangun website.
Jika anda puas dengan hasil kerja anda membangun website dengan fasilitas
template, sudahlah cukup sampai disini. Tetapi jika anda tidak puas dengan apa
yang anda buat, dan anda merasa ingin lebih baik, maka anda perlu mengetahui
bagaimana Web Designer membangun suatu Website, terlepas anda punya bakat
seni atau tidak.
1. Unik : Dalam membuat karya apapun seorang designer mempunyai
kesadaran untuk tidak meniru atau menggunakan karya orang lain. Begitu
pula seorang Web Designer harus mempunyai budaya malu untuk
menggunakan icon, animasi, button, dll, yang telah digunakan atau dibuat
oleh orang lain.
2. Komposisi : Seorang Web Designer selalu memperhatikan komposisi
warna yang akan digunakan dalam website yang dibuatnya. Pergunakan
selalu Palette 216 WebColor, yang dapat diperoleh dari Adobe.com, hal
ini untuk mencegah terjadinya dither pada image yang berformat GIF.
Dalam membangun website suatu perusahaan, Web Designer selalu
menyesuaikan warna yang digunakan dengan Corporate Color perusahaan
tersebut. Sebagai contoh: Telkom Corporate Color-nya adalah biru, Coca-
Cola : merah dan putih, Standard-Chartered : hijau dan biru, dsb. Untuk
kemudian warna-warna tadi digunakan sebagai warna dominan atau
sebagai elemen pendukung (garis, background, button, dsb).
3. Simple : Web Designer banyak yang menggunakan prinsip "Keep it
Simple", hal ini ditujukan agar tampilan website tersebut terlihat rapi,
bersih dan juga informatif.
4. Semiotik : Semiotika adalah ilmu yang mempelajari tentang tanda-tanda.
Dalam hal ini diharapkan dengan melihat tanda atau gambar, user/
audience dapat dengan mudah dan cepat mengerti. Sebagai contoh: Jangan
membuat gambar/image yang berkesan tombol, padahal itu bukan tombol/
link.
Team RPL – smkn1 dps
5. Ergonomis : Web Designer selalu memperhatikan aspek ergonomi.
Ergonomi disini adalah dalam hal kenyamanan user dalam membaca dan
kecepatan user dalam menelusuri website tersebut. Web Designer memilih
ukuran Fonts yang tepat sehingga mudah dibaca, Web Designer
menempatkan link sedemikian rupa sehingga mudah dan cepat untuk di
akses dan lebih penting lagi adalah Informatif.
6. Fokus : Tentukan hirarki prioritas dari pesan yang akan disampaikan,
misalnya: Judul harus besar, tetapi jangan sampai akhirnya akan konflik
dengan subjudul yang berukuran hampir sama. Hal ini akan
membingungkan user/audience untuk menentukan pesan mana yang harus
lebih dahulu dibaca/ dilihat.
7. Konsisten : Tentukan font apa yang akan digunakan sebagai Body-text,
Judul, Sub Judul dan sebagainya, sehingga website tersebut akan terlihat
disiplin dan rapi. Sesuaikan jenis huruf yang digunakan dengan misi dan
visi website tersebut, misalnya: hindari menggunakan font Comic dalam
membangun website suatu perusahaan resmi.Demikian beberapa aspek
dan prinsip yang digunakan Web Designer dalam membuat website,
selebihnya merupakan ekspresi dari pembuat website itu sendiri yang
terwujud dalam penggayaan penyusunan website.
Software-software pembuat suatu websiteDesain : Untuk membuat desain suatu
homepage biasanya para web designer dimulai dengan software ini sebagai
tampilan sementara atau dalam membuat layout homepage.
1. Adobe Photoshop : Desain berbasis titik ( bitmap )
2. Adobe Image Ready : Memotong gambar-gambar ke dalam format html
3. Adobe Illustrator : Desain berbasis vector
4. CorelDraw : Desain berbasis vector
5. Macromedia Freehand : Desain berbasis vector
Efek Desain : Hal ini dilakukan untuk menghidupkan desain yang telah kita
rancang. Seperti menambah efek cahaya, textur dan manipulasi teks.
1. Macromedia Firework : Efek teks
Team RPL – smkn1 dps
2. Painter : Memberikan efek lukisan
3. Ulead Photo Impact : Efek frame dan merancangan icon yang cantik.
4. Plugins Photoshop : Seperti Andromeda, Alien Skin, Eye Candy, Kai's
Power Tool dan Xenofex juga sangat mendukung untuk memberi efek
desain sewaktu anda mendesain layout homepage di Photoshop.
Animasi : Penambahan animasi perlu untuk membuat homepage agar kelihatan
menarik dan hidup.
1. 3D Studio Max : Untuk membuat objek dan animasi 3D.
2. Gif Construction Set : Membuat animasi file gif
3. Macromedia Flash : Menampilkan animasi berbasis vector yang berukuran
kecil.
4. Microsoft Gif Animator : Membuat animasi file gif
5. Swift 3D : Merancang animasi 3D dengan format file FLASH.
6. Swish : Membuat berbagai macam efek text dengan format file FLASH.
7. Ulead Cool 3D : Membuat animasi efek text 3D.
Web Editor : Menyatukan keseluruhan gambar dan tata letak desain, animasi,
mengisi halaman web dengan teks dan sedikit bahasa script.
1. Alaire Homesite
2. Cold Fusion
3. Microsoft Frontpage
4. Macromedia Dreamweaver
5. Net Object FusionProgramming : Hal ini dilakukan setelah sebagian besar
desain homepage telah rampung.
Programming bertugas sebagai akses database, form isian dan membuat web lebih
interaktif. Contoh : Membuat guestbook, Form isian, Forum, Chatting, Portal,
Lelang dan Iklanbaris.
Team RPL – smkn1 dps
1. ASP ( Active Server Page )
2. Borland Delphy
3. CGI ( Common Gateway Interface )
4. PHP
5. Perl
Upload : File html kita perlu di letakkan ( upload ) di suatu tempat ( hosting ) agar
orang di seluruh dunia dapat melihat homepage kita.
1. Bullet FTP
2. Cute FTP
3. WS-FTP
4. Macromedia Dreamweaver : dengan fasilitas Site FTP
5. Microsoft Frontpage : dengan fasilitas Publish
Sound Editor : Homepage kita belum hidup tanpa musik. Untuk mengedit file
midi atau wav, perlu alat khusus untuk itu.
1. Sound Forge : Mengedit dan menambah efek file yang berformat mp3 dan
wav.
2. Cakewalk : Mengedit dan menambah efek untuk file yang berformat midi
Banyak sekali memang software untuk membuat suatu homepage dan kita tidak
perlu mempelajari semua software tersebut di atas. Tapi untuk mempermudah,
bagi pemula lebih baik dimulai terlebih dulu dengan mempelajari software
Microsoft Frontpage atau Macromedia Dreamweaver agar lebih mengenal aturan-
aturan membuat homepage dan mengenal bahasa html. Setelah itu baru Adobe
Photoshop yang dipakai kebanyakan para desainer.
Langkah-langkah Membuat HomepageBermacam-macam langkah yang
digunakan profesi web kita untuk membuat suatu homepage. Berikut ini adalah
proses secara umum yang dilakukan kebanyakan profesi web di Indonesia untuk
membuat web.
1. Membuat Sketsa Desain : Desainer bisa saja menuangkan ide dalam
membuat interface suatu homepage dalam bentuk sketsa di kertas dahulu.
Untuk kebanyakan orang, biasanya langkah ini dilewatkan dan langsung
pada langkah membuat layout desain dengan menggunakan software.
Team RPL – smkn1 dps
2. Membuat Layout Desain : Setelah sketsa sudah jadi, kita menggunakan
software seperti Adobe Photoshop, Adobe Illustrator, Macromedia
Fireworks dan Macromedia Freehand untuk memperhalus sketsa desain.
3. Membagi gambar menjadi potongan kecil-kecil : Setelah layout desain
homepage sudah jadi. File gambarb tersebut dipecah menjadi potongan
kecil-kecil untuk mengoptimize waktu download. Untuk melakukan hal
tersebut dapat menggunakan software Adobe Image Ready. Software ini
dapat langsung memotong gambar yang besar tadi dan otomatis juga
menjadikannya ke dalam format html. Langkah ini bisa saja dilewatkan
bila ukuran gambar kita tidak terlalu besar.
4. Membuat Animasi : Animasi diperlukan untuk menghidupkan homepage
kita agar menarik pengunjung. Macromedia Flash dan Gif Construction
Set dapat dipakai untuk melakukan hal tersebut.
5. Membuat HTML : Setelah itu kita merapikan layout desain kita seperti
menempatkan beberapa tombol dan gambar, menambah text, mengedit
script HTML, membuat layout form ke dalam format HTML. Untuk itu
kita perlu software HTML Editor seperti Macromedia Dreamweaver,
Microsoft Frontpage dan Allaire Homesite.
6. Programming dan Script : Untuk website e-commerce, iklan baris, lelang,
database, membuat guestbook, counter dan forum diskusi. File HTML kita
perlu programming untuk melakukan aktivitas semacam itu. Programming
dan script ini bisa dibuat dengan menggunakan ASP, Borland Delphy,
CGI, PHP, Visual Basic. Dan perlu diperhatikan bahwa programming dan
script ini biasanya dilakukan setelah desain homepage kita telah jadi.
7. Upload HTML : Setelah file kita telah menjadi html beserta gambar dan
scriptnya. Kita perlu meng-upload file kita ke suatu tempat ( hosting ),
agar semua orang di dunia dapat mengakses halaman html kita. Biasanya
Macromedia Dreamweaver dengan fasilitas site FTP dan Microsoft
Frontpage dengan Publishnya telah menyediakan fasilitas upload ini. Atau
dapat menggunakan software seperti WS-FTP, Cute FTP, Bullet FTP.
Team RPL – smkn1 dps
8. Homepage Pribadi : Untuk homepage pribadi atau yang sekedar ingin
coba-coba biasanya setelah file html sudah jadi dapat hosting di tempat-
tempat gratis, memakai guestbook dan counter gratis dan menambah
macam-macam accesories dalam mempercantik homepage pribadi
tersebut.
Bagaimana memulai belajar DESIGN GRAFIS???
Definisi Desain Grafis: adalah salah satu bentuk seni lukis (gambar) terapan yang
memberikan kebebasan kepada sang desainer (perancang) untuk memilih,
menciptakan, atau mengatur elemen rupa seperti ilustrasi, foto, tulisan, dan garis
di atas suatu permukaan dengan tujuan untuk diproduksi dan dikomunikasikan
sebagai sebuah pesan. Gambar maupun tanda yang digunakan bisa berupa
tipografi atau media lainnya seperti gambar atau fotografi.Desain grafis umumnya
diterapkan dalam dunia periklanan, packaging, perfilman, dan lain-lain.
Menurut Suyanto desain grafis didefinisikan sebagai ” aplikasi dari keterampilan
seni dan komunikasi untuk kebutuhan bisnis dan industri“. Aplikasi-aplikasi ini
dapat meliputi periklanan dan penjualan produk, menciptakan identitas visual
untuk institusi, produk dan perusahaan, dan lingkungan grafis, desain informasi,
dan secara visual menyempurnakan pesan dalam publikasi.
Sedangkan Jessica Helfand dalam situs http://www.aiga.com/ mendefinisikan
desain grafis sebagai kombinasi kompleks kata-kata dan gambar, angka-angka dan
grafik, foto-foto dan ilustrasi yang membutuhkan pemikiran khusus dari seorang
individu yang bisa menggabungkan elemen-eleman ini, sehingga mereka dapat
menghasilkan sesuatu yang khusus, sangat berguna, mengejutkan atau subversif
atau sesuatu yang mudah diingat.
Menurut Danton Sihombing desain grafis mempekerjakan berbagai elemen seperti
marka, simbol, uraian verbal yang divisualisasikan lewat tipografi dan gambar
Team RPL – smkn1 dps
baik dengan teknik fotografi ataupun ilustrasi. Elemen-elemen tersebut diterapkan
dalam dua fungsi, sebagai perangkat visual dan perangkat komunikasi.
Menurut Michael Kroeger visual communication (komunikasi visual) adalah
latihan teori dan konsep-konsep melalui terma-terma visual dengan menggunakan
warna, bentuk, garis dan penjajaran (juxtaposition).
Warren dalam Suyanto memaknai desain grafis sebagai suatu terjemahan dari ide
dan tempat ke dalam beberapa jenis urutan yang struktural dan visual.
Sedangkan Blanchard mendefinisikan desain grafis sebagai suatu seni
komunikatif yang berhubungan dengan industri, seni dan proses dalam
menghasilkan gambaran visual pada segala permukaan.
Kategori Desain GrafisSecara garis besar, desain grafis dibedakan menjadi
beberapa kategori:1. Printing (Percetakan) yang memuat desain buku, majalah,
poster, booklet, leaflet, flyer, pamflet, periklanan, dan publikasi lain yang
sejenis.2. Web Desain: desain untuk halaman web.3. Film termasuk CD, DVD,
CD multimedia untuk promosi.4. Identifikasi (Logo), EGD (Environmental
Graphic Design) : merupakan desain profesional yang mencakup desain grafis,
desain arsitek, desain industri, dan arsitek taman.5. Desain Produk, Pemaketan
dan sejenisnya.
Program Pengolah GrafisOleh karena desain grafis dibagi menjadi beberapa
kategori maka sarana untuk mengolah pun berbeda-beda, bergantung pada
kebutuhan dan tujuan pembuatan karya.
1. Aplikasi Pengolah Tata Letak (Layout)Program ini sering digunakan untuk
keperluan pembuatan brosur, pamflet, booklet, poster, dan lain yang
sejenis. Program ini mampu mengatur penempatan teks dan gambar yang
diambil dari program lain (seperti Adobe Photoshop). Yang termasuk
dalam kelompok ini adalah:- Adobe FrameMaker- Adobe In Design-
Adobe PageMaker- Corel Ventura- Microsoft Publisher- Quark Xpress
Team RPL – smkn1 dps
2. Aplikasi Pengolah Vektor/GarisProgram yang termasuk dalam kelompok
ini dapat digunakan untuk membuat gambar dalam bentuk vektor/garis
sehingga sering disebut sebagai Illustrator Program. Seluruh objek yang
dihasilkan berupa kombinasi beberapa garis, baik berupa garis lurus
maupun lengkung. Aplikasi yang termasuk dalam kelompok ini adalah:-
Adobe Illustrator- Beneba Canvas- CorelDraw- Macromedia Freehand-
Metacreations Expression- Micrografx Designer
3. 3. Aplikasi Pengolah Pixel/GambarProgram yang termasuk dalam
kelompok ini dapat dimanfaatkan untuk mengolah gambar/manipulasi foto
(photo retouching). Semu objek yang diolah dalam progam-program
tersebut dianggap sebagai kombinasi beberapa titik/pixel yang memiliki
kerapatan dan warna tertentu, misalnya, foto. Gambar dalam foto
terbentuk dari beberapa kumpulan pixel yang memiliki kerapatan dan
warna tertentu. Meskipun begitu, program yang termasuk dalam kelompok
ini dapat juga mengolah teks dan garis, akan tetapi dianggapa sebagai
kumpulan pixel. Objek yang diimpor dari program pengolah vektor/garis,
setelah diolah dengan program pengolah pixel/titik secara otomatis akan
dikonversikan menjadi bentuk pixel/titik.Yang termasuk dalam aplikasi ini
adalah:- Adobe Photoshop- Corel Photo Paint- Macromedia Xres-
Metacreations Painter- Metacreations Live Picture- Micrografx Picture
Publisher- Microsoft Photo Editor- QFX- Wright Image
4. 4. Aplikasi Pengolah Film/VideoProgram yang termasuk dalam kelompok
ini dapat dimanfaatkan untuk mengolah film dalam berbagai macam
format. Pemberian judul teks (seperti karaoke, teks terjemahan, dll) juga
dapat diolah menggunakan program ini. Umumnya, pemberian efek
khusus (special effect) seperti suara ledakan, desingan peluru, ombak, dan
lain-lain juga dapat dibuat menggunakan aplikasi ini. Yang termasuk
dalam kategori ini adalah:- Adobe After Effect- Power Director- Show Biz
Team RPL – smkn1 dps
DVD- Ulead Video Studio- Element Premier- Easy Media Creator-
Pinnacle Studio Plus- WinDVD Creater- Nero Ultra Edition
5. Aplikasi Pengolah MultimediaProgram yang termasuk dalam kelompok
ini biasanya digunakan untuk membuat sebuah karya dalam bentuk
Multimedia berisi promosi, profil perusahaan, maupun yang sejenisnya
dan dikemas dalam bentuk CD maupun DVD. Multimedia tersebut dapat
berisi film/movie, animasi, teks, gambar, dan suara yang dirancan
sedemikian rupa sehingga pesan yang disampaikan lebih interktif dan
menarik.Yang termasuk dalam kelompok ini adalah:- Macromedia-
Macromedia Authorware- Macromedia Director- Macromedia Flash-
Multimedia Builder- Ezedia- Hyper Studio- Ovation Studio Pro-
Macromedia Director- Macromedia Flash- Multimedia Builder- Ezedia-
Hyper Studio- Ovation Studio Pro
Team RPL – smkn1 dps
KONSEP TENTANG GRAFIK
• Bitmap
• vektor grafik
• pengenalan photoshop
Komputer didalam merepresentasikan gambar memiliki dua cara yaitu
dengan bitmap dan vektor grafik.
Bitmap
Beberapa pengertian yang berhubungan dengan bitmap
pixel
Jika kita melihat foto atau gambar yang ada di komputer maka gambar
tersebut sesungguhnya adalah kumpulan dari ribuan titik titik yang sangat kecil
dan tiap tiap titik tersebut memiliki warna tertentu. Titik titik itulah yang umum
dikenal sebagai pixel. Setiap pixel mempunyai satu warna dan bergabung dengan
pixel-pixel yang lain sehingga membentuk suatu pola dan menghasilkan gambar.
Gambar seperti ini hampir tidak mungkin dibuat oleh tangan manusia. Bisa
dibayangkan betapa rumitnya hanya untuk untuk membuat sebuah garis lurus, bila
harus dilakukan dengan meletakkan titik-titik yang berjajar rapi secara manual.
Karena itu, gambar atau foto yang kita lihat biasanya dihasilkan oleh mesin
seperti kamera, monitor, televisi, komputer, proyektor film, scanner, printer dan
sebagainya.
resolusi
Jumlah pixel per centimeter disebut sebagai resolusi. Dan resolusi itulah
yang menentukan kualitas dari gambar yang dihasilkan. Gambar yang sering kita
lihat dalam komputer umumnya mempunyai resolusi 72 pixel per inchi atau
disingkat dpi. Sebagai contoh gambar yang berukuran satu sentimeter persegi
akan memiki 72 X 72 = 5184 titik atau pixel. Misal gambar tersebut diperbesar
dari 1 cm persegi menjadi 10 cm persegi maka jumlah pixel keseluruhan adalah
tetap yaitu 5184 pixel yang berubah adalah resolusinya, yaitu 5184 : 100 = 5,184
Team RPL – smkn1 dps
pixel per cm. Berarti jika suatu gambar diperbesar maka resolusinya akan semakin
kecil dan mengakibatkan gambar menjadi tidak tajam. Semakin tinggi resolusi
suatu gambar maka akan semakin tinggi kemampuan perbesarannya.
gambar resolusi 30 dpi diperbesar 7 kali gambar resolusi 70 dpi diperbesar 7 kali
intensitas
Pixel pixel yang membentuk gambar tersebut memiliki warna warna tertentu dan
jumlah warna yang boleh dimiliki oleh suatu gambar dinamakan intensitas.
Biasanya dikenal istilah 256 warna, high color, 16 juta warna (true color)
gradasi abu-abu (grayscale), serta hitam-putih (black & white). Semakin
banyak jumlah warna dalam suatu gambar maka gambar yang dihasilkan akan
semakin bagus. Jumlah warna maksimum dari gambar dapat dilihat dari jenis
filenya. Misal file gambar yang berekstensi .jpg akan memiliki maksimum 16
juta warna, atau file yang berekstensi .gif memiliki jumlah warna maksimum
256.
Vektor Grafik
Berbeda dengan bitmap, vektor grafik merepresentasikan gambarnya tidak dengan
menggunakan pixel, tetapi dengan kurva dan garis yang didefinisikan dalam
persamaan matematis yang disebut vektor. Misal untuk menggambar
lingkaran maka didefinisikan persamaan matematis dari lingkaran sehingga
membentuk garis pembatas lingkaran. Didalam garis pembatas tersebut diberi
warna sehingga terbentuklah lingkaran.
Kedua cara perepresentasian gambar tersebut mempunyai kekurangan dan
kelebihan masing masing. Pada gambar bitmap sangat baik digunakan untuk
Team RPL – smkn1 dps
merepresentasikan gambar yang sangat kompleks dan detail. Tetapi
kekurangannya adalah ukuran filenya tergantung dari ukuran gambar dan
resolusinya. Jika file bitmap diperbesar maka ketajaman gambar akan
berkurang.
Sedangkan pada vektor grafis ukuran gambar tidak mempegaruhi ukuran file.
Jika gambar diperbesar maka ketajamannya tetap sama dengan sebelumnya.
Ukuran file dari gambar vektor grafis dipengaruhi oleh kompleksitas dari
persamaaan vektor yang digunakan. Misal ada dua gambar yang besarnya
sama. Gambar yang pertama adalah gambar lingkaran sedangkan gambar yang
kedua adalah gambar tali yang melingkar tidak beraturan. Ukuran file gambar
tali akan lebih besar daripada gambar lingkaran. Kekurangan dari vektor grafis
tidak mampu menampilkan gambar secara detail dan kompleks.
Gambar bitmap gambar vektor grafik
Perangkat lunak untuk Image editor yang menggunakan gambar jenis bitmap
antara lain adobe photoshop, corel photopaint, dll. Sedangkan yang
menggunkan gambar vektor grafik antara lain corel draw adobe ilustrator,
macromedia flash. Dari kelebihan dan kekurangan kedua jenis gambar
tersebut maka sebelum mendesain suatu obyek perlu dipertimbangkan terlebih
dahulu tujuan dari pembuatan obyek tersebut. Pada bab selanjutnya kita akan
mempelajari image editor jenis bitmap yaitu adobe photoshop dan image
editor jenis vektor grafik yaitu macromedia flash.
Team RPL – smkn1 dps
Pengenalan photoshop
Photoshop adalah salah satu software yang sangat baik untuk membuat
desain grafis dalam bentuk bitmap. Selain itu photoshop sudah sangat umum
digunakan para desainer karena fasilitas-fasilitasnya yang sangat banyak yang
memanjakan para pemakainya.
Pada bab ini dan seterusnya kita akan menggunakan adobe photoshop
versi 6 yaitu versi yang terbaru.
Gambar di atas adalah gambar tempat kita bekerja di dalam photoshop,
ruang kerja ini terdiri set standard tools, tool option, menus dan palletes.
Toolbox :tempat dimana tool-tool dari photoshop yang digunakan untuk
menggambar tersebut berada.
Tool option :setiap tool mempunyai fungsi yang berbeda dan fungsi tersebut
dapat dimodifikasi melalui tool option. Setiap tool mempunyai tool
option yang berbeda-beda.
Team RPL – smkn1 dps
Pallete :tambahan dari setting untuk tool tool dan terdapat berbagai alat
bantu lainnya.
Cara memulai membuat gambar baru pilih menu file>new sehingga
muncul kotak dialog seperti dibawah. Ada beberapa option yang harus diisi:
• nama gambar yang akan dibuat
• Tinggi dan lebarnya (satuan panjang bisa diubah sesuai keinginan)
• Resolusi ( sesuai dengan penjelasan sebelumnya)
• Mode untuk mengatur jenis warna yang digunakan
Contoh RGB (red, green, blue) semua warna yang dipakai dalam gambar
adalah campuran primer merah, hijau, biru dengan kadar tertentu. Begitu
juga dengan CMYK(cyan, magenta, yellow, black). Jika memilih
grayscale maka warna gambar yang dihasilkan hanya terdiri dari hitam,
putih dan gradasi antara keduanya.
Mode yang Umum dipakai untuk membuat gambar adalah mode RGB
• Content untuk menentukan jenis background dari gambar yang akan
dibuat. White berarti background akan berwarna putih, background color
berarti warna bckground akan sesuai dengan warna yang telah ditentukan
pada toolbox, transparent berarti gambar tidak mempunyai background
setelah selesai pilih tombol OK
Team RPL – smkn1 dps
MENU PADA PHOTOSHOP
• file, edit, image, layer, select, filter, view, window, help
Penjelasan bagian-bagian dari photoshop meliputi menu, toolbox, pallete.
Penjelasan bagian bagian ini tidak mencakup secara keseluruhan, tetapi
menjelaskan hal- hal yang penting dan perlu bagi pemula dalam membuat desain.
File
Menu File berisi pilihan-pilihan seperti, membuat gambar baru,
menampilkan gambar, menyimpan, mencetak, mengimpor gambar, mengekspor
gambar, dan keluar program. Menu file ini sudah umum dan hampir semua
program mempunyai isi yang sama sehingga tidak perlu dijelaskan lebih lanjut.
Edit
Terdiri dari pilihan-pilihan, seperti, copy, paste, dan tool tool untuk
modifikasi gambar. Tool tool dibagian edit sebagian besar sudah diwakili oleh
toolbox dan pallete
Image
bagian bagian yang penting:
• Mode untuk menetukan mode dari gambar. Mode ini sudah ditanyakan pada
saat membuat gambar baru, dan fasilitas ini kita gunakan untuk mengubah
mode gambar yang telah kita tentukan sebelumnya.
Misal pada saat membuat file baru kita tentukan mode dari gambar adalah
grayscale sehingga gambar yang dibuat tidak bisa mempunyai warna lain
selain hitam dan putih. Kemudian ditengah perjalanan kita berubah pikiran
untuk mengisikan warna lain selain hitam dan putih maka mode warna harus
diubah ke mode warna yang lain, misal RGB.
Team RPL – smkn1 dps
• Adjust untuk memanipulasi pewarnaan pada gambar. Dalam adjust diberikan
fasilitas yang sangat banyak yang digunakan untuk mengubah pewarnaan dari
gambar. Untuk dapat memahaminya tidak bisa melalui pengertian tetapi harus
sering melakukan latihan. Bagian ini tidak dijelaskan tetapi langsung
diterapkan pada latihan latihan pada bab bab selanjutnya. Diharapkan melalui
latihan tersebut bisa lebih bisa memahami kegunaannya masing masing.
• Duplicate digunakan untuk menduplikat gambar yang sudah dibuat. Jika kita
menggunakan fasilitas ini maka akan terbentuk dua gambar yang sama.
• Image size untuk mengubah ukuran gambar baik memperbesar maupun
memperkecil. Image size tidak bisa merubah bagian bagian tertentu saja dari
gambar tetapi mengubah secara keseluhan.
Ukuran awal setelah diperkecil
• Canvas size untuk mengubah ukuran kertas. Pengubahan ukuran kertas tidak
akan berpengaruh pada ukuran gambar
Team RPL – smkn1 dps
Gambar awal setelah canvas diperbesar
• Rotate canvas untuk memutar gambar
o 90ocw = clock wise artinya memutar gambar 90
derajat searah jarum jam
o 90o ccw = counter clock wise artinya memutar
gambar 90 derajat berlawanan arah jarum jam
o arbitrary memutar gambar sesuai dengan nilai
derajat yang dimasukkan
o flip horizontal mencerminkan gambar horisontal.
Artinya bagian kiri gambar pindah ke kanan dan
sebaliknya
o flip vertikal mencerminkan gambar vertikal.
Gambar yang diatas akan berada di bawah dan
juga sebaliknya. Hal ini berbeda dengan memutar
180o.
gambar asli flip vertikal diputar 180o
layer
berhubungan dengan layer dan akan dibahas pada bab selanjutnya.
Select
Berhubungan dengan seleksi dan akan dibahas pada bab selanjutnya
Team RPL – smkn1 dps
Filter
Berguna untuk memberikan efek pada gambar dan akan dijelaskan pada
bab selanjutnya.
View
Bagian bagian yang penting:
• show/hide rulers untuk menampilkan alat bantu penggaris
• show >grid untuk menampilkan alat bantu grid
snap berguna pada saat kita menggeser sebuah object. Jika fasilitas snap
digunakan maka pada saat menggeser object akan mudah menyesuaikan atau
menempel pada grid atau dengan object lain.
Setting dari grid dan rullers, misalnya satuan yang digunakan, warna dari grid,
dapat diubah melalui menu edit>preferences>units and rulers…/guides and
grid…
Fasilitas fasilitas diatas dapat kita gunakan untuk membantu mengatur
posisi gambar agar letaknya lebih presisi. Karena hanya merupakan alat bantu
maka tidak akan muncul jika gambar dicetak.
rulers grid
Window
Digunakan untuk mengatur lingkungan kita bekerja membuat desain
seperti pilihan yang menampilkan atau menyembunyikan toolbox dan pallete,
serta pilihan untuk mengatur gambar di dalam workspace.
Team RPL – smkn1 dps
Help
Terdiri dari pilihan, online help, informasi plug-in dan versi photoshop.
Help digunakan untuk mencari solusi dari masalah yang dihadapi ketika
menggunakan photoshop serta mencari tahu kegunaan dari tool dan pallete.
Help yang paling sering digunakan adalah content yaitu semua informasi tentang
tool tool yang ada dalam photoshop dan bagaimana memakainya. Sebenarnya kita
belajar sudah cukup melalui help ini tetapi yang menjadi kendala adalah masalah
bahasa karena bahasa yang digunakan adalah bahasa Inggis.
PENGENALAN TOOLBOX
• cara penggunaan toolbox
• painting tools
Toolbox ini adalah bagian yang paling penting didalam kita bekerja untuk
membuat desain. Bagian ini terdiri dari banyak tool yang digunakan untuk
membuat gambar dan memanipulasi gambar.
Setiap tombol tool yang tampak didalam toolbox bisa mempunyai
lebih dari satu pilihan tool karena masih ada kemungkinan tool
tersebut terbagi lagi menjadi sub tool.
Misal tool paint brush memliki dua pilihan yaitu paint brush tool atau pencil tool. Untuk mengetahui apakah tool tersebut hanya terdiri satu macam atau lebih maka tekan tool tersebut sekitar satu detik. Jika tool tersebut memiliki lebih dari satu macam, maka pilihan tersebut akan muncul.
Team RPL – smkn1 dps
Setiap tool juga mempunyai tool option, yaitu pilihan untuk mengatur
setting dari tool itu sendiri. Tool option otomatis akan muncul jika kita menekan
salah satu tool. Letak dari tool option secara default berada dibawah menu dan
bisa diubah letaknya sesuai dengan yang diinginkan.
Misal ditekan tool paint brush maka akan muncul tool option seperti berikut
dari tool option tersebut ada beberapa pilihan yang digunkakan untuk mengatur
konfigurasi dari paint brush. Fungsi dari masing-masing tool option akan
dijelaskan dibagian selanjutnya.
Tidak semua tool akan dijelaskan disini karena ada tool-tool tertentu yang
membutuhkan pemahaman yang agak lama dan kegunaanya untuk tingkat yang
lanjut.
Painting tools
Painting tool yaitu peralatan untuk menggambar dan mendesain. Ada
beberapa macam pilihan tool yaitu:
paint brush pencil air brush
membuat gambar dengan memakai kuas
Membuat gambar dengan memakai pensil
Membuat gambar dengan menggunakan cat semprot
Team RPL – smkn1 dps
eraser background eraser paint bucket
blur sharpen smudge
type custom shape
Selain tool untuk menggambar disediakan juga tool untuk alat bantu.
Menghapus bagian yang salah
Menghapus background agar gambar menjadi transparan
Memberi warna pada gambar
Mengaburkan gambar Menajamkan gambar Mengaburkan gambar sehingga nampak seperti dihapus dengan tangan
membuat tulisan membuat bentuk sesuai dengan bentuk yang disediakan
Team RPL – smkn1 dps
hand zoom
untuk menggerakkan untuk memperbesar dan
gambar memperkecil gambar
untuk tool paint brush, pencil, air brush, eraser, backgroud eraser, blur, sharpen,
smudge mempunyai tool option yang hampir sama satu sama lain yaitu:
Brush: untuk menentukan bentuk alat dan besarnya alat gambar. Tekan tombol
panah bawah kemudian akan muncul bentuk dan ukurannya. Pilih ukuran
dan bentuk sesuai dengan yang diinginkan.
jika pilihan brush masih kurang atau masih belum memenuhi yang kita perlukan
maka klik tanda panah yang ada pada ujung kanan
atas sehingga muncul menu pilihan seperti disamping.
Di tempat tersebut disediakan pilihan yaitu assorted
brushes, calligraphic brushes, drop shadow brushes,
Team RPL – smkn1 dps
faux finish brushes, natural brushes, dan square brushes.
Jika kita memilih salah satu dari option tersebut maka akan muncul pertanyaan
seperti berikut:
jika dipilih OK pilihan brush yang sebelumnya digantikan dengan pilihan yang
baru. Jika dipilih append maka pilihan sebelumnya akan digabungkan dengan
pilihan yang baru sehingga jumlahnya banyak.
Ketika pilihan brush yang sudah dimasukkan terlalu banyak dan dapat
membingungkan maka bisa dikembalikan lagi ke keadaan semula dengan
mengklik tanda panah dan memilih menu reset brushes.
Opacity: digunakan untuk menentukan transparansi dari alat gambar. Jika opacity
digunakan 100 % maka hasilnya tidak akan transparan. Semakin kecil opacity
maka hasilnya akan semakin transparan.
Wet edges digunakan untuk memberikan tambahan
seperti cat yang basah
Contoh disamping adalah paint brush dengan opacity
50% yang disapukan pada gambar
PEWARNAAN
• warna dalam toolbox
• warna gradasi
Pewarnaan merupakan bagian yang penting dalam membuat sebuah desain dan
photoshop memberikan fasilitas yang sangat banyak dalam hal pewarnaan
tersebut.
Team RPL – smkn1 dps
Warna dalam toolbox
Didalam toolbar disediakan dua macam warna yaitu warna foreground dan
background
Foregroud color :digunakan untuk warna atas, digunakan juga untuk warna
dari tool paint brush, air brush, pencil, paint bucket, custom
shape dll
Backgroud color :digunakan untuk warna background dari gambar. Agar
background mengikuti warna yang ada pada toolbox maka
pilih option background color pada saat awal membuat
gambar seperti yang dijelaskan pada bab sebelumnya.
Default color :digunakan untuk mengembalikan kedua warna kembali ke
warna asal yaitu hitam untuk foreground dan putih untuk
background.
Swap color :digunakan untuk menukar warna antara foreground dan
background.
Kedua warna tersebut foreground dan background bisa diubah-ubah sesuai dengan
keinginan. Untuk mengubahnya tekan salah satu warna kemudian akan muncul
pilihan warna seperti berikut:
Dibagian ini
disediakan pilihan
warna dengan
jumlah 2563 =
16.777.216 warna.
Klik salah satu
warna yang
diinginkan Setelah
selesai tekan OK.
Team RPL – smkn1 dps
Selain cara diatas, warna foreground dan background bisa disetting melalui pallete
color dan swatches
pallete swatches pallete color
Didalam pallete swatches telah disediakan warna warna pilihan dan kita tinggal
mengambilnya.
Untuk memberi warna pada object, gunakan tool paint bucket
kemudian klik dibagian yang ingin dirubah warnanya.
Tool eye droper bergunak untuk mengambil
contoh warna dari gambar. Caranya adalah klik ditempat
warna yang ingin diambil maka secara otomatis warna
foreground pada toolbox akan berubah mengikuti contoh
warna yang diambil tersebut.
Warna gradasi
Selain warna yang solid kita juga bisa memberikan warna gradasi. Di bagian
toolbox, klik tool paint bucket sekitar satu detik maka akan muncul pilihan
gradasi
Tool option dari gradasi seperti berikut:
Team RPL – smkn1 dps
setting linear radial angle reflected diamond
bentuk dari gradasi bisa dipilih dari kelima option yaitu: linear, radial angle,
reflected, diamond
radial linear angle reflected diamond
untuk mengubah warna atau model dari gradasinya, klik bagian setting, maka
akan muncul kotak dialog seperti dibawah. Dibagian tersebut dapat dipilih model
gradasi, warna gradasi, serta tingkat kehalusan gradasi.
Model gradasi
kehalusan
gradasi
Warna 1 warna 2
Team RPL – smkn1 dps
Untuk mengubah warna 1 atau warna 2, klik salah satu panah sehingga muncul
pilihan warna.
Gradien diatas bisa dibuat lebih dari dua warna sesuai dengan keperluan.
Pilihan model warna dari gradient yang diberikan secara
default masih sedikit. Untuk menambahnya klik tanda
panah yang ada pada sudut kanan atas dari pilihan
gradien. Pilihan gradien yang disediakan yaitu color
harmonies 1, color harmonies 2, metals, noise samples,
pastels, simple, special effects, spectrums.
Pada saat memilih salah satu pilihan tersebut maka akan muncul kotak dialog
seperti berikut:
Jika diklik OK maka pilihan gradien pada yang sebelumnya digantikan dengan
pilihan gradien yang baru.
Jika diklik append maka pilihan gradien yang baru akan ditambahkan pada pilihan
gradien yang sebelumnya sehingga menjadi bertambah banyak.
Pilihan gradien yang dimasukkan terlalu banyak maka akan membingungkan,
untuk mengembalikan ke kondisi semula, klik tanda panah dan pilih option
reset gradien.
SELEKSI
• penggunaan marque tool
• penggunaan lasso tool
• penggunaan magic wand
Team RPL – smkn1 dps
Seleksi adalah tool untuk menyeleksi suatu bidang dari gambar dan membedakan
dari bidang lainnya. Seleksi berperan penting dalam memanipulasi gambar atau
desain. Sebagian besar dari tool memerlukan seleksi untuk membantu
mengaplikasikannya. Tanda dari bidang yang diseleksi adalah dibatasi oleh garis
putus putus yang berkedip-kedip.
seleksi
Tool tool yang berfungsi untuk seleksi adalah:
Marque tool , lasso tool , dan magic
wand . Kegunaan dari masing masing tool
tersebut akan dibahas satu persatu.
Marque tool
Marque tool adalah untuk membuat seleksi dengan dengan bentuk seperti
yang disediakan. Untuk memilih bentuknya, tekan sekitar satu detik maka pilihan
bentuk akan muncul. Pilihan bentuk yang disediakan yaitu persegi, elip, garis
vertikal dan garis horisontal
Pilihan dari marque tool
Lasso tool
Lasso tool adalah untuk membuat seleksi dengan bentuk yang tidak beraturan
sesuai dengan yang kita inginkan. Pilihan dari lasso tool ada tiga macam yaitu:
lasso tool, polygonal lasso tool, magnetik lasso tool.
• Lasso tool
Team RPL – smkn1 dps
Lasso tool berguna untuk membuat seleksi yang bentuknya tidak
beraturan. Cara memakainya adalah klik dimana lintasan dari seleksi akan
dimulai. Dengan keadaan masih menggklik geraakkan mouse dengan
lintasan sesuai dengan yang diinginkan. Setelah selesai lepaskan mouse
maka akan terbentuk seleksi tertutup mengilkuti lintasan yang telah dibuat.
Lasso tool magnetik lasso tool
• Magnetik lasso tool
Ketika kita suatu obyek dengan menggunakan lasso tool terkadang mengalami
kesulitan untuk menggerakkan agar tepat berada di sisi terluar gambar. Untuk
mengatasi hal tersebut maka dapat kita gunakan magnetik lasso tool. Jika kita
gerakkan magnetik lasso secara otomatis akan mengikuti sisi terluar gambar
walaupun gerakan kita tidak persis di sisi gambar. Cara melakukannya klik di
awal lintasan dari seleksi lalu lepaskan dan sisir lintasan gambar yang
dikehendaki. Setelah kedua ujung bertemu lalu doube klik maka akan terbentuk
seleksi.
Team RPL – smkn1 dps
• Polygonal lasso tool
Polygonal lasso tool berfungsi untuk menyeleksi
dengan bentuk polygon atau banyak sisi. Cara
membuatnya klik titik sudut dari poligon seleksi yang
dikehendaki.
Magic wand
Magic wand adalah salah satu kemudahan yang ditawarkan oleh
photoshop didalam membuat seleksi. Prinsipnya adalah tool ini akan menyeleksi
daerah yang warnanya sama atau hampir sama. Daerah yang diseleksi akan
meliputi tempat yang diklik dan daerah disekitarnya yang memiliki warna hampir
sama.
Caranya klik daerah yang dikehendaki maka seleksi
akan terbentuk. Sebagai catatan bahwa magic wand akan
mencari warna yang hampir sama dengan warna pada
daerah yang diklik. Jika grafiknya sangat komplek dan
menggunakan banyak warna yang berbeda, misalnya foto,
maka magic wand tidak akan berfungsi dengan optimal.
Di bagian tool option dari magic wand terdapat option tolerance.
Option tersebut digunakan untuk mengatur
toleransi warna yang diperbolehkan untuk ikut dalam
Team RPL – smkn1 dps
seleksi. Jika dipilih nilai toleransi yang sangat tinggi maka walaupun perbedaan
warna agak jauh, daerah tersebut masih tetap masuk dalam seleksi.
Seperti contoh disamping, karena setting tolerance diisi 100 maka ketika
yang diklik adalah lingkaran didalam, lingkaran yang kedua akan ikut dalam
seleksi walaupun perbedaan warnannya agak jauh.
Setting tolerance=100
Posisi dari seleksi yang sudah dibuat dapat dipindah ke tempat lain.
Caranya klik bidang didalam seleksi lalu pindahkan ke tempat yang diinginkan.
Dari ketiga tool diatas terdapat tool option yang hampir sama yaitu tentang
pengaturan bidang seleksi.
Seleksi baru menambah seleksi Mengurangi seleksi Irisan dua seleksi
o Seleksi baru
Jika kita memilih option seleksi baru maka setelah dibuat seleksi dan
dibuat seleksi ditempat lain maka seleksi yang pertama akan hilang. Hal ini
disebabkan karena option seleksi baru tidak memperbolehkan lebih dari satu
seleksi.
seleksi pertama dibuat
seleksi kedua dibuat,
maka seleksi yang
pertama akan hilang
Team RPL – smkn1 dps
o Menambah seleksi
Jika kita pilih option ini maka akan diperbolehkan lebih dari satu seleksi.
o Mengurangi seleksi
Mengurangi seleksi adalah digunakan untuk memotong seleksi yang sudah
terbentuk. Jadi seleksi ini tidak membuat seleksi baru tapi mengurangi seleksi
yang sudah ada. Jika kita memilih option ini pastikan bahwa sebelumnya sudah
terdapat seleksi pada gambar, jika tidak maka seleksi ini tidak berfungsi.
seleksi yang akan dikurangi seleksi dikurangi hasil
o Irisan dua seleksi
Irisan digunakan untuk membuat irisan dari dua buah seleksi. Seleksi yang
berada diluar dari irisan akan hilang.
seleksi pertama diiris dengan seleksi kedua hasil
Team RPL – smkn1 dps
MANIPULASI DENGAN SELEKSI
• merubah seleksi yang sudah dibuat
• memberi warna pada bidang
• memanipulasi gambar
Pada bab sebelumnya telah kita pelajari segala macam yang berhubungan dengan pembuatan seleksi. Pada bab ini akan membahas tentang apa yang dapat dilakukan dengan seleksi.
Merubah seleksi yang sudah dibuat
Hal hal yang berhubungan dengan seleksi diatur dalam menu select. Sekarang
akan kita bahas satu persatu kegunaanya.
� All: digunakan untuk menyeleksi seluruh area dari
gambar
� Deselect: digunakan untuk menghilangkan seleksi
yang sudah dibuat sebelumnya
� Reselect: kembali memunculkan seleksi yang
sebelumnya telah dihilangkan.
� Inverse: untuk membalikkan daerah yang
diseleksi. Misal daerah yang diseleksi adalah
setengah area gambar bagian bawah. Jika kita
perintahkan operasi inverse maka seleksi akan
berpindah pada daerah yang sebelumnya tidak terseleksi yaitu setengah area
gambar bagian atas.
seleksi setelah dilakukan operasi inverse
Team RPL – smkn1 dps
� color range: digunakan untuk menyeleksi warna yang kita inginkan.
� feather: digunakan untuk mengaburkan batas antara daerah yang diseleksi
dengan daerah luarnya. Jika kita memberikan warna pada seleksi yang telah
diberikan feather maka batas dari gambarnya akan kabur.
tanpa feather dengan feather
� modify digunakan untuk mengubah seleksi yang sudah dibuat. Terdapat empat
pilihan yaitu border, smooth, expand, contract
o border digunakan untuk membuat seleksi baru dengan ketebalan tertentu
yang mengikuti lintasan dari seleksi sebelumnya.
seleksi diberi border
o smooth digunakan untuk memperhalus lintasan dari seleksi yang sudah
dibuat
o expand digunakan untuk memperbesar ukuran seleksi
seleksi diberi expand sebesar 4px
Team RPL – smkn1 dps
o contract digunakan untuk memperkecil ukuran seleksi
Seleksi diberi contract sebesar 4 px
� grow digunakan untuk memperbesar area dari seleksi hingga seleksi
memenuhi daerah yang memiliki warna yang sama. Fungsi ini hampir sama
dengan magic wand tool.
� Transform selection digunakan untuk mengubah seleksi sesuai dengan
keperluan.
� Save selection digunakan untuk menyimpan seleksi yang sudah kita buat
sehingga bisa kita gunakan lagi pada lain waktu. Fasilitas ini umumnya
digunakan untuk menyimpan seleksi yang cukup rumit dan membutuhkan
waktu untuk membuatnya.
Memberi warna pada bidang
Memberi warna terhadap suatu bidang akan lebih mudah jika bidangnya
kita seleksi terlebih dahulu. Tool yang digunakan adalah paint bucket dan
dituangkan pada seleksi yang sudah dibuat.
seleksi yang akan diberi warna setelah dituagkan paint bucket tool
Team RPL – smkn1 dps
Untuk membuat gambar dengan menggunakan
tool agar gambar tersebut hanya ada di daerah gambar
tertentu maka daerah tersebut sebaiknya dibatasi oleh
seleksi. Dengan adanya seleksi jika terdapat coretan
yang keluar dari daerah seleksi maka coretan tersebut
akan hilang. Jadi tool-tool yang dioperasikan pada
gambar dan gambar tersebut terdapat seleksi maka yang
berlaku hanya didalam daerah seleksi tersebut.
Untuk menggambar diluar daerah seleksi maka seleksi harus dihilangkan terlebih
dahulu.
Memanipulasi gambar
Seleksi juga mampu memanipulasi gambar yang sudah ada sehingga
menjadi sesuai dengan yang kita inginkan. berikut ini beberapa hal yang bisa
dilakukan oleh seleksi.
Menduplikat gambar
Gambar yang telah diseleksi bisa dikopi dan ditempel sebanyak yang kita
suka atau ditempelkan ke gambar yang lain. Caranya bagian gambar yang telah
diseleksi dikopi dengan memilih menu edit > copy. Kemudian tempel di gambar
tersebut atau di gambar lain dengan memilih menu edit>paste.
dikopi bagian kepala dipaste ke tempat lain
Team RPL – smkn1 dps
memotong gambar
seleksi juga bisa kita gunakan untuk memotong. Jadi hanya bagian yang
diseleksi yang akan hilang. Caranya dengan menekan keyboard delete atau
memilih menu edit>cut.
Mengkopi gambar ke dalam gambar yang lain
untuk mengkopi gambar yang diseleksi ke gambar lain bisa dilakukan
dengan cara didrag lalu dimasukkan ke dalam gambar lain.
Caranya buat seleksi untuk gambar yang akan dikopi, lalu buka file
gambar yang akan ditempel oleh gambar yang telah diseleksi tersebut. Letakkan
kedua gambar berdampingan agar pada saat mendragnya lebih mudah. Lalu drag
gambar yang diseleksi dengan menggunakan move tool menuju gambar yang
kedua. Atur posisinya agar sesuai.
gambar pertama yang akan gambar kedua yang akan ditempel
diambil kepalanya oleh gambar 1
Team RPL – smkn1 dps
drag gambar yang sudah diseleksi ke arah gambar dua
merubah gambar yang diseleksi
Gambar yang telah diseleksi dapat diubah ubah sesuai dengan keinginan
kita, perubahan itu dapat berupa ukuran, warna, dll. Untuk memutar,
memperbesar, atau memperkecil, setelah gambar diseleksi pilih menu edit>free
transform . Kemudian gambar yang diseleksi tersebut akan dibatasi oleh persegi
empat. Setelah selesai memanipulasi bentuknya maka tekan keyboard enter atau
jika membatalkan perubahan yang sudah dibuat dan ingin dikembalikan ke
keadaan semula maka tekan keyboard escape. Pada saat kita menggunakan
fasilitas ini maka kita tidak bisa mengoperasikan yang lainnya sebelum kita
menekan tombol escape atau enter.
gambar diseleksi gambar diputar & diperkecil hasil
Team RPL – smkn1 dps
MEMBUAT DESAIN DENGAN SELEKSI
• membuat chrome ellips
• membuat chrome letter
Setelah kita mempelajari cara menggunakan seleksi , pada bab ini akan kita coba
praktekkan. Dibawah ini terdapat contoh beberapa obyek yang cara
pembuatannya banyak menggunakan seleksi.
Chrome ellips
gambar diatas akan dapat dibuat dengan mudah jika kita sudah benar benar
memahami tentang seleksi. Membuat obyek seperti diatas cukup hanya dengan
menggunakan dua jenis tool yaitu tool untuk seleksi dan tool untuk memberi
warna gradasi. Langkah langkah untuk membuat adalah sebagai berikut:
1. pilih menu file>new, ukuran kertas terserah
dan background white.
2. buat seleksi ellips dengan menggunakan
tool seleksi dan tool optionnya pilih new
selection
Team RPL – smkn1 dps
3. buat warna gradient hitam ke putih dari atas
ke bawah dengan menggunakan tool
gradient. Tool option pilih linear
, klik di bagian atas
seleksi dan geser hingga ke bawah seleksi.
4. buat seleksi ellips yang kedua yang
ukurannya lebih kecil dari ellips yang
pertama dan letaknya didalamnya. Tool
optionnya pilih new selecion
sehingga pada saat membuat seleksi kedua,
seleksi yang pertama akan hilang.
5. tekan delete untuk menghilangkan obyek
yang berada di dalam seleksi
6. buat seleksi ellips yang ketiga yang
ukurannya lebih kecil dari yang kedua dan
letaknya didalamnya. Untuk kali ini pada
saat membuat seleksi yang ketiga, seleksi
yang kedua jangan sampai hilang. Caranya
dengan memilih tool optionnya mengurangi
seleksi .
7. buat warna gradasi yang kedua didalam
seleksi tersebut yang arahnya kebalikan
dari gradasi yang pertama yaitu dari bawah
ke atas.
8. hilangkan semua seleksi yang ada
Team RPL – smkn1 dps
dengan memilih menu select>deselect.
Dengan cara yang hampirsama anda juga bisa membuat obyek seperti berikut:
Chrome letter
Pada pembuatan chrome letter ini kita menggunakan seleksi dari tulisan,
dan kita manipulasi sehingga menjadi tampak seperti warna krom.
1. buat sebuah file baru yang berukuran
400X100px
2. buat seleksi yang melingkupi setengah
dari area gambar, seperti contoh
disamping.
3. buat gradien didalam seleksi tersebut dari
hitam ke abu-abu dengan arah dari atas
ke bawah.
4. pilih menu select>inverse untuk
membalikkan seleksi ke arah atas
5. isikan dengan gradien lagi, kali ini
dengan gradasi dari abu abu ke putih
dengan arah dari atas ke bawah.
6. seleksi seluruh area dengan memilih
menu select>all
Team RPL – smkn1 dps
7. pilih menu edit>copy untuk mengkopi
gambar yang sudah kita buat
8. buat lagi file gambar yang baru dengan
ukuran yang sama dengan sebelumnya
yaitu 400X100px
9. buat teks didalamnya. Teks yang
dimasukkan tidak berupa suatu warna
tetapi berbentuk seleksi. Caranya klik
tipe tool pada toolbox lalu pada tool
option yang terletak pada bagian atas
pilih bagian selection .
10. buat gradasi didalam tulisan tersebut
dengan warna dari hitam ke putih dengan
arah dari bawah ke atas.
11. pilih menu select>modify>contract untuk
memperkecil seleksi yang sudah dibuat.
Isikan setiing contract by: 2 px
12. pilih menu edit>paste into. Perintah ini
digunakan untuk memanggil gambar
yang sebelumnya kita kopi dan
diletakkan pada seleksi pada tulisan
tersebut. Dan menghasilkan tulisan
seperti disamping
Team RPL – smkn1 dps
ALAT BANTU PHOTOSHOP
• penggunaan pallete history
• penggunaan pallete navigator
• penggunaan pallete info
Kita sebaiknya juga mengoptimalkan alat bantu yang diberikan oleh
photoshop agar dalam membuat desain jadi lebih nyaman dan lebih cepat. Akan
dijelaskan disini beberapa hal yang penting dan sering digunakan untuk membuat
desain.
Penggunaan pallete history
History berfungsi mencatat langkah langkah yang sudah dibuat dalam photoshop
selama membuat desain. langkah langkah tersebut dicatat berurutan dari awal
hingga akhir sehingga kita bisa melihat langkah langkah yang sudah kita buat.
Kita bisa juga mengembalikan langkah yang sudah dibuat ke langkah langkah
sebelumnya sesuai dengan yang kita inginkan. Fungsi ini mirip dengan fungsi
pada undo yaitu kembali ke langkah sebelumnya. Tapi keunggulan dari pallete
adalah bisa langsung melompat kembali ke langkah sebelumnya sedangkan undo
harus mundur satu persatu hingga mencapai langkah yang kita inginkan.
Dibawah ini contoh dari pallete history
Langkah langkah sebelumnya
Langkah yang terakhir
Langkah terakhir yang kita buat akan berada pada paling bawah,
sedangkan langkah langkah yang diatasnya adalah langkah sebelumnya. Jika kita
ingin kembali melompat ke langkah sebelumnya maka kita cukup meng-klik
langkah tersebut. Misal kita telah membuat 45 langkah lalu kita ingin kembali ke
Team RPL – smkn1 dps
langkah ke 33 maka kita cukup meng-klik langkah 33 tersebut. Perlu diingat
bahwa jika kita telah membuat langkah 45 kemudian kembali ke langkah 33, lalu
dari langkah 33 tersebut kita buat lagi sebuah langkah baru sehingga masuk ke
langkah 34 maka langkah pada saat sebelum diubah yaitu langkah 34 hingga 45
akan hilang dengan sendirinya dan tidak bisa dikembalikan.
Pallete history ini mempunyai keterbatasan yaitu hanya mampu mengingat
hanya sampai dua puluh langkah yang terakhir. Misal kita sudah membuat desain
hingga langkah ke 100 maka yang tersimpan hanya dari langkah 80 hingga seratus
sehingga kita tidak bisa kembali ke langkah dibawah 80. untuk mengatasi hal
tersebut maka dapat digunakan fasilitas snapshot.
Snapshot adalah fasilitas untuk mengambil salah satu bagian dari history.
Misal kita sudah membuat langkah hingga 40 lalu langkah tersebut kita jadikan
snapshot. Kemudian kita lanjutkan hingga langkah ke 100. jika suatu saat kita
ingin kembali ke langkah ke 40 kita bisa mengambil snapshot tersebut dan kita
jadi kembali ke langkah 40.
snapshot
Kita bisa membuat snapshot berapapun yang kita mau. Misal kita
membuat desain hingga 200 langkah, maka dapat kita buat snapshot pada langkah
ke 30,70,150, dll.
Dalam mendesain umumnya kita lakukan dengan cara mencoba-coba, jadi
kita mendesain sambil mencari mana yang terbaik. Dalam mendesain kita tidak
bisa dengan sekali membuat misal dalam 100 langkah langsung jadi, terutama
untuk desain yang rumit. Kita harus melakukan pilihan pilihan dan mengulang-
Team RPL – smkn1 dps
ulang mencari mana yang terbaik, untuk itu kita manfaatkan fasilitas history ini
agar untuk melakukan hal hal tersebut diatas menjadi lebih mudah.
Kita menggunakan snapshot bertujuan untuk menyimpan bagian history
yang penting. Misal pada langkah 40 kita sudah membuat suatu bentuk yang
sudah cukup bagus lalu akan kita lanjutkan dengan menambah lagi desainnya
dengan cara mencoba-coba. Jika dalam mencoba coba tersebut kita melakukan
kesalahan atau hasil desainnya kurang bagus dan kita ingin bisa kembali ke
langkah 40 maka sebelumnya langkah ke 40 tersebut kita jadikan snapshot
terlebih dahulu, jadi kita tidak akan takut lagi hasil desain pada langkah 40
tersebut hilang.
Cara membuat snapshot, klik kanan salah satu
langkah dari history yang akan dijadikan snapshot lalu
muncul menu seperti disamping, lalu pilih menu new
snapshot
Penggunaan pallete navigator
Pallete navigator digunakan untuk memperbesar dan memperkecil
tampilan dari desain pada photoshop dan fungsinya mirip dengan zoom.
kotak merah
tampilan dalam layar utama memperkecil memperbesar
Fasilitas yang lainnya adalah untuk menunjukkan bagian gambar yang
dimunculkan pada layar utama jika gambar tersebut lebih besar dari layar utama.
Team RPL – smkn1 dps
Pada contoh gambar diatas, dalam tampilan layar utama adalah sebagian gambar,
dan gambar keseluruhannya tampak pada pallete navigator tersebut. Sebagian
gambar yang muncul pada layar utama pada pallete navigator ditunjukkan dengan
kotak yang berwarna merah. Jika kita ingin menggeser gambar ke daerah yang
lain maka kita tidak perlu menggeser tampilan pada layar utama tapi kita cukup
menggeser kotak merah pada pallete navigator tersebut ke tempat yang kita
inginkan. Hal ini sangat membantu sekali karena kita tidak akan kesulitan mencari
bagian dari gambar pada pallete navigator yang ukurannya kecil dibandingkan
jika kita mencari sendiri pada layar utama dengan gambar yang ukurannya sangat
besar dengan cara menggeser kursornya.
Penggunaan pallete info
Pallete info digunakan untuk memberikan informasi letak titik
tertentu pada gambar, dan juga memberikan informasi warna dari titik titik tertentu.
Informasi warna
Informasi posisi
Informasi ukuran
Jika kita menggerakkan mouse diatas gambar maka pallete info akan bekerja.
Pallete ini akan memberikan informasi tentang warna dan posisi tepat dimana
mouse berada.
Posisi x menunjukkan posisi horisontal diukur dari batas kiri gambar, sedangkan
posisi y menunujukkan posisi vertikal diukur dari batas atas gambar. Satuan dari
posisi bisa diubah melalui menu pada tanda panah di pojok kanan atas yaitu
pallete option.
Informasi ukuran akan menunjukkan ukuran panjang dan lebar dari seleksi yang
kita buat. Jika pada bagian gambar tidak terdapat seleksi maka informasi ukuran
ini tidak bekerja.
Team RPL – smkn1 dps
LAYER
• konsep layer
• penggunaan pallete layer
Konsep layer
Layer digunakan untuk menggabungkan beberapa gambar menjadi satu
gambar. Setiap gambar diletakkan dalam satu lapisan layer dan digabungkan
dengan lapisan lapisan layer yang lain sehingga membentuk gambar. Lapisan
tersebut saling bertumpuk sehingga menghasilkan sebuah gambar. Gambar yang
berada pada layer atas maka akan berada pada tumpukan yang paling atas dan bisa
menutupi tumpukan gambar yang berada dibawahnya.
Pada saat membuat gambar baru maka secara default akan mempunyai
sebuah layer yaitu layer background. Layer tersebut adalah layer dasar didalam
membuat desain. Jika kita membuat beberapa layer baru maka layer background
akan tetap berada pada lapisan yang terbawah.
Sebaiknya dalam membuat desain, setiap obyek berada pada layer yang
berbeda. Sehingga jika kita memanipulasi salah satu obyek maka perubahannya
tidak akan mempengaruhi obyek yang lain.
Penggunaan pallete layer
Dalam photoshop segala hal
yang berhubungan dengan layer
diatur dalam pallete layer.dari
gambar disamping dapat kita lihat,
gambar zebra berada pada layer
diatas layer gambar singa. Oleh
karena itu gambar zebra dapat
menutupi gambar singa karena zebra
Team RPL – smkn1 dps
berada pada tumpukan yang paling atas. Sedangkan background dapat ditutupi
oleh gambar singa dan zebra karena layer background berada paling bawah.
Gambar singa masih tampak
walaupun ditutup oleh gambar zebra.
Hal ini karena layer zebra adalah
transparan sehingga hanya gambar
zebra yang menutupi gambar singa.
Jika kita membuat layer baru maka
layer tersebut adalah transparan.
Sekarang kita akan membahas fungsi dari masing masing bagian dalam pallete
layer.
option
mode
layer visibility
active layer
delete layer
new layer
layer visibility
Layer visibility digunakan untuk memunculkan atau menyembunyikan
tiap tiap layer. Misal layer visibility dari miki dihilangkan dengan cara
mengkliknya, maka gambar dari miki tersebut tidak akan tampak dalam gambar.
Hal ini diperlukan jika kita ingin mengedit salah satu layer, agar tidak terganggu
dengan adanya gambar gambar dari layer yang lain maka untuk sementara layer
lain dihilangkan sehingga yang muncul dalam gambar hanya layer yang akan kita
edit saja.
Team RPL – smkn1 dps
Seperti contoh disamping, hanya
layer miki yang ditampilkan
sedangkan layer yang lain
dihilangkan untuk sementara.
Dengan cara seperti ini maka kita
bebas mengedit layer miki tanpa
terganggu dengan layer yang lain.
Active layer
Active layer berguna untuk menentukan di layer mana kita akan bekerja.
Seperti contoh diatas berarti kita sedang bekerja di layer miki. Jika kita
memasukkan gambar, coretan atau yang lainnya maka kesemuanya hanya akan
masuk ke layer miki dan tidak ke layer yang lain. Jika ingin bekerja di layer lain
maka kita cukup memindah active layer ke layer yang kita inginkan. Didalam
keseluruhan layer kita tidak bisa memberikan lebih dari satu active layer.
Active layer adalah bagian yang penting, dan kita harus selalu memastikan
dilayer mana kita bekerja sebelum memanipulasi layer. Sebagai contoh jika kita
ingin menggeser gambar miki tetapi active layer berada pada layer donal, maka
yang berpindah bukan gambar miki melainkan gambar donal.
lock
Lock berfungsi untuk mengunci layer agar tidak dapat kita edit. Lock ada 4
macam yaitu:
lock transparant pixel : untuk mengunci layer yang transparan. Misalkan
jika kita memberikan coretan pada gambar, maka yang tercoret hanya gambarnya
saja sedangkan yang bagian transparan tidak berubah
lock image pixel: untuk mengunci layer agar tidak bisa dimanipulasi.
Tetapi letak gambar masih bisa diubah.
lock position: kebalikan dari lock image pixel, gambar bisa dimanipulasi
tetapi posisi tidak bisa dirubah.
lock all: untuk mengunci layer agar tidak bisa dilakukan apapun
terhadapnya
Team RPL – smkn1 dps
untuk melakukan lock maka pastikan terlebih dahulu layer mana yang akan
dikunci, letakkan active layer di tempat tersebut, kemudian layer dikunci.
Opacity
Opacity digunakan untuk menetukan tingkat transparansi suatu layer
terhadap layer yang lain. Seperti contoh gambar diatas memiliki opacity 100 yang
artinya gambar sama sekali tidak transparan. Jika opacity diberi nilai kurang dari
100 maka layer akan tampak transparan dan semakin kecil nilainya maka layer
akan semakin transparan. Jika suatu layer dibuat transparan maka gambar yang
berada pada layer dibawahnya akan dapat
menembus gambar pada layer transparan
tersebut.
layer miki memiliki opacity 50%
mode
Didalam menu mode disediakan berbagai model layer dan pengaruhnya
terhadap layer yang lain. Untuk mengetahui fungsi dan hasilnya terhadap layer
maka sebaiknya dicoba satu persatu dan dilihat perubahan pada layernya. Pada
saat membuat layer baru secara default mode layer diset sebagai normal dan
selanjutnya dapat diganti ke mode yang lain.
new layer digunakan untuk membuat layer baru.
delete layer digunakan untuk menghapus layer yang sudah dibuat.
Caranya letakkan tanda active layer pada layer yang akan dihapus. Baru kemudian
menekan tombol delete layer.
Team RPL – smkn1 dps
Jika kita tekan panah kecil yang berada di ujung kanan atas maka akan
muncul option. Diantara option tersebut yang paling penting adalah bagian merge.
Merge berfungsi untuk menggabungkan beberapa layer menjadi satu layer.
Merge down artinya menggabungkan layer yang sedang aktif dengan layer
dibawahnya. Merge visible menggabungkan semua layer yang visibility-nya diset
aktif. Sedangkan layer yang visibility-nya tidak diset aktif masih tetap berdiri
sendiri.
Terbentuk layer yang merupakan Gabungan keduanya. Sedangkan Layer donal tetap terpisah Layer dessy dan miki akan dilakukan Merge visible
PENGGUNAAN LAYER STYLE
• penggunaan layer style
• penggunaan pallete style
Layer style adalah tambahan efek yang akan diberikan terhadap suatu
layer. Effect effect tersebut telah disediakan kita tinggal memilih dan
menerapkannya pada layer tersebut. Kita akan sering menggunakan efek ini
karena cara penggunaanya yang mudah dan hasilnya yang bagus. Sebenarnya kita
bisa membuat sendiri efek yang dihasilkan oleh layer style dengan menggunakan
drawing tool tetapi akan membutuhkan waktu yang sangat lama. Oleh karena itu
Team RPL – smkn1 dps
kita menggunakan efek ini dengan tujuan penghematan waktu. Effect tersebut
hanya bisa diberikan pada layer baru dan tidak bisa diberikan kepada layer
background.
Penggunaan layer style
Macam macam layer style dapat dilihat pada menu layer>layer style dan
akan muncul pilihan pilihan. Untuk bisa melihat semua pilihan tersebut maka pilih
menu blending option sehingga muncul kotak dialog seperti berikut:
kotak dialog layer style
sebelah kiri dari kotak dialog terdapat pilihan berbagai layer style dan akan
dijelaskan satu persatu
contoh obyek sebelum diberi layer style
Team RPL – smkn1 dps
• drop shadow untuk memberikan
bayangan dibawah obyek
• inner shadow untuk memberikan bayangan didalam obyek
• outer glow untuk memberikan sinar dibawah obyek
• inner glow untuk memberikan sinar
didalam obyek
• bevel and emboss untuk memberikan
effect timbul dari obyek
• satin untuk memberikan effect bayangan yang menyeluruh dalam obyek
• color overlay untuk menimpa obyek dengan warna lain
• gradient overlay untuk menimpa obyek dengan warna gradient
• pattern overlay untuk menimpa obyek dengan warna pattern
• stroke untuk memberikan warna di
tepi obyek
Setiap option diatas mempunyai setting tersendiri yang satu dengan
lainnya berbeda. Untuk melihat dan merubah settingnya klik salah satu dari
option diatas maka akan muncul setting dari option yang diklik tersebut. Misal
jika dipilih option color overlay maka akan muncul option warna, ketebalan, dan
mode.
Team RPL – smkn1 dps
Untuk mengaplikasikan layer style tersebut ke dalam obyek cukup dengan
memberi tanda cek disamping tulisan option masing masing. Option bisa dipilih
lebih dari satu atau bahkan bisa dipilih semuanya sesuai dengan kebutuhan.
Agar lebih memahami dan membiasakan menggunakan layer style ini
maka sebaiknya setiap layer style dicoba satu persatu dan dilihat pengaruhnya
terhadap obyek.
Cara lain untuk mengaplikasikan
layer style adalah dengan menggunakan
tombol pada pallete layer. Sebelum
mengaplikasikan layer style pilih terlebih
dahulu layer yang akan diberi layer style
tersebut dan berikan tanda aktif layer pada
layer tersebut. Kemudian tekan tombol
layer style dan pilih option yang diinginkan. Layer style
Seperti dijelaskan diawal bahwa layer style tidak bisa diterapkan pada background
layer.
Suatu layer yang sudah diberi layer style
maka pada layernya akan muncul tanda seperti
disamping. Jumlah effect tergantung dari jumlah
option yang dipilih.
Jika suatu layer sudah dikenai layer style
maka setiap warna dan tekstur dari goresan atau
pewarnaan yang diberikan pada gambar akan
mengikuti setting pada layer style dan tidak lagi
mengikuti setting warna foreground pada toolbox.
P
a
ppaint brush digoreskan pada
layer yang diberi style
Team RPL – smkn1 dps
Style
Photoshop juga memberikan fasilitas
layer style yang sudah jadi dan kita tinggal
memakainya. Layer style yang sudah jadi
tersebut dapat dilihat pada pallete style. Dalam
pallete style tersebut dapat dilihat bentuk
bentuk style yang bisa dipilih.
Cara menggunakannya hampir sama dengan penjelasan sebelumnya, yaitu
tentukan terlebih dahulu layer yang akan dikenai layer style pada pallete layer
dengan memberikan tanda aktif layer pada layer tersebut. Lalu klik salah satu
style pada pallete styles, maka layer tersebut otomatis akan mengikuti style yang
sudah kita pilih.
Jika kita sudah memberikan layer style pada suatu layer dan ingin
menghilangkan layer style tersebut maka klik tanda yang berada di bagian
ujung kiri atas pada pallete styles. Dengan mengklik tanda tersebut maka semua
layer style yang kita berikan pada suatu layer akan hilang.
Tidak semua style yang dimiliki oleh photoshop dimasukkan dalam pallete
styles. Untuk memunculkan style dari photoshop yang lain, klik tombol menu
dibagian kanan atas pada pallete styles. Kemudian akan muncul option seperti
berikut
Dibagian paling bawah terdapat beberapa pilihan
yaitu buttons, glass buttons rollover, glass buttons,
image effects, text effects, textures.
Pilih salah satu dari styles lalu muncul pertanyaan
Team RPL – smkn1 dps
jika dipilih OK maka style yang ada pada pallete styles akan diganti dengan style
yang baru kita pilih. Jika memilih append maka style dimasukkan pada pallete
style dan style yang lama masih tetap ada.
Membuat desain dengan Layer
• menggabungkan gambar
• memilih , Menghapus Objek pada Layer dan Mengumpulkan Layer-Layer
• menerapkan style pada layer
• membuat gradasi pada layer
• menambahkan teks pada layer
Pada bab ini kita akan berlatih mendesain dengan memanipulasi gambar
yang sudah ada serta dengan mengaplikasikan pallete layer. Pertama kita buka
gambar yang akan digunakan sebagai gambar utamanya dengan nama bear.psd
pada folder C:\Program Files\Adobe\Photoshop 6\samples\bear.psd
Team RPL – smkn1 dps
file yang akan disunting
Klik menu File>Sava As dan beri nama, misal berlatih.psd lalu save.
Untuk memulai bekerja denga layer kita buka file gambar yang lain untuk kita
gabungkan dengan gambar file gambarnya bernama ducky.tiff dan letaknya pada
folder yang sama dengan yang atas.
Gambar dari ducky terlalu besar, akan kita perkecil
ukurannya dengan memilih menu image>image size
sehingga muncul kotak dialog. Lalu isikan ukuran yang
baru yaitu 150X164 pixel
Menggabungkan gambar
1. Klik Move Tool di toolbox dan tunjuk
ducky.psd lalu geser ke berlatih.psd
sehingga gambar bebek tersebut menumpuk
diatas gambar bear. Gambar bebek sekarang
mempunyai layer tersendiri pada pallete
layer berlatih.psd. sekarang kita tidak
memerlukan lagi gambar ducky.tiff karena gambar tersebut sudah dimasukkan
ke dalam gambar berlatih.psd. Untuk seterusnya kita hanya bekerja pada
gambar berlatih.psd
2. Pada layer palette akan tampak gambar
beruang berada pada layer 1, dan gambar
bebek berada pada layer2. Agar lebih
mudah nama layer 1 diganti menjadi
beruang, dan layer dua menjadi bebek
caranya dengan meng-klik kanan layer
tersebut dan pilih menu layer properties
Team RPL – smkn1 dps
lalu ganti namanya.
Memilih, Menghapus Objek pada Layer dan Mengumpulkan
Layer-Layer
Pada gambar diatas masih terdapat kotak putih dibelakang gambar bebek
bebek. Gambar putih tersebut akan kita hilangkan dengan cara seperti berikut:
1. pastikan aktif layer berada pada layer bebek karena kita akan bekerja pada
layer tersebut.
2. agar tidak menggangu, layer visible dari layer beruang dihilangkan untuk
sementara
3. gunakan magic wand tool lalu klik daerah yang
berwarna putih. Maka seleksi akan melingkupi
seluruh daerah yang berwarna putih tersebut.
4. tekan keyboard delete untuk menghilangkan daerah
yang dilingkupi oleh seleksi, dalam hal ini adalah
daerah yang berwarna putih.
5. kembalikan layer visible dari layer beruang agar kembali bergabung dengan
gambar bebek
Sekarang akan kita buat empat gambar bebek yang sama dengan cara mengkopi layer bebek. Caranya klik kanan layer bebek lalu pilih menu duplicate layer dan beri nama bebek2, bebek3, bebek4.
Setelah kita kopi menjadi 4 buah
gambar bebek, gambar yang tampak hanya
satu, hal ini disebabkan keempat gambar
bebek tersebut bertumpuk sehingga saling
menutupi. Agar gambar bebek tampak
berjumlah empat buah maka tiap gambar
harus kita geser satu persatu. Pertama letakkan
aktif layer pada layer bebek1, kemudian geser
Team RPL – smkn1 dps
gambar bebek dengan menggunakan move tool. Lalu pindah aktif layer ke layer
dua dan pindahkan gambar bebek2 ke tempat yang lain lagi, dan begitu seterusnya
hingga gambar yang keempat.
Selanjutnya akan kita putar dan kita balik sedemikian rupa sehingga gambar akan
menjadi seperti disamping. Untuk memutar atau membalik gunakan menu
edit>transform. Ada lebih dari satu operasi yang dilakukan terhadap masing-
masing gambar. misal gambar bebek yang
berada di kiri atas diberi operasi flip
horisontal untuk membalikkan gambar
secara horisontal, lalu diberi operasi free
transform dan diputar sesuai dengan
kebutuhan.
Jika kita ingin menggerakkan keempat gambar dengan menggunakan move tool
secara bersamaan, hal itu dapat dilakukan dengan menggunakan link layer.
Pertama tentukan terlebih dahulu layer yang mana yang akan menjadi aktif
layer lalu klik kotak kecil disebelah layer visible sehingga muncul tanda .
Layer yang akan mengikuti gerakan aktif layer boleh lebih dari satu.
seperti contoh disamping, yang digerakkan
adalah layer bebek1 dan layer bebek2,
bebek3, bebek4 mengikuti gerakan layer
bebek1.
Team RPL – smkn1 dps
Menerapkan style pada layer
Layer style dapat diterapkan pada masing masing layer yang berbeda. Untuk menentukan style yang cocok dengan gambar sebaiknya dicoba satu persatu dengan menggunakan pallete style.
seperti gambar disamping, bebek di kiri atas menggunakan style double ring glow. Dan bebek di kanan bawah menggunakan style chiseled sky.
chiseled sky doble ring glow
Menambahkan Efek Gradien pada Layer
Sekarang kita bisa menambahkan sebuah layer baru dan menambahkan efek gradien pada layer tersebut. Gradien yang akan kita buat berada diatas layer beruang dan dibawah layer bebek sehingga gradient tersebut menutupi layer beruang.
Pada layer palette pastikan layer background sedang aktif, pilih New Layer pada menu Layer Palette dengan mengklik tanda dibagian bawah pallete layer. agar lebih mudah Ganti nama new layer menjadi gradien. Lalu buat gradien dengan menggunakan gradient tool pada layer baru tersebut dengan cara seperti dijelaskan sebelumnya. Setelah anda membuat gradien maka gambar beruang akan hilang diganti oleh gambar gradien. Hal ini disebabkan karena layer gradien berada diatas layer beruang sehingga gambar beruang tertutupi oleh gambar gradien. Untuk menggabungkan kedua gambar yaitu gambar beruang dan gambar gradien maka ubah mode dari layer gradien. Mode dari layer berada di bagian atas dari pallete layer dan ubah dari mode normal ke mode yang lain sesuai dengan keperluan.
Team RPL – smkn1 dps
seperti disamping, mode dari layer gradien diubah dari mode normal ke mode screen. Sehingga gambar beruang menjadi tampak kembali dan bergabung dengan gambar gradasi.
Menambahkan Teks pada Layer
Teks mempunyai karakteristik yang berbeda dibandingkan dengan alat
gambar yang lain. Berikut ini akan kita pelajari sifat sifat dari teks.
Segala hal yang berhubungan dengan teks diatur dalam pallete character. Untuk
memunculkannya pilih menu window>show
character
Dibagian tersebut kita bisa menentukan jenis
font, ukuran font, warna dan setting setting
yang lainnya.
Jika kita mengklik type tool maka pada bagian tool option akan mencul setting
seperti berikut
Text selection horisontal vertical
Tekt: digunakan untuk membuat teks biasa
Team RPL – smkn1 dps
Selection: digunakan untuk membuat seleksi yang berbentuk sesuai dengan teks
yang diisikan. Jika kita memilih option ini maka tidak akan terbentuk teks yang
berwarna tetapi hanya terbentuk seleksi
Horisontal: untuk membuat teks horisontal dari kiri ke kanan
Vertikal: untuk membuat teks vertikal dari atas ke bawah
Jika kita membuat sebuah teks dengan menekan type tool maka secara
otomatis akan terbentuk sebuah layer baru. Layer yang baru tersebut khusus hanya
bisa diisi oleh teks saja, tidak bisa digabungkan dengan tool yang lain. Misal kita
ingin menggunakan paint brush dan menggoreskan pada layer teks tersebut maka
hal itu tidak akan bisa dilakukan.
Layer yang digunakan untuk teks selalu
ditandai dengan huruf T
Jika kita sudah selesai dalam pembuatan teks, ukuran, serta jenis fontnya
sudah pasti dan tidak akan dirubah lagi maka kita bisa merubah teks tersebut
menjadi sebuah gambar. Perlu diingat bahwa jika sebuah layer teks diubah
menjadi gambar maka kita tidak bisa lagi mengedit teksnya misal jenis font atau
ukuran font karena teks tersebut sudah dianggap sebagai gambar dan bukan lagi
sebagai teks. Panel character sudah tidak berlaku lagi terhadap gambar teks
tersebut.
Cara merubah layer teks menjadi
layer gambar dengan mengklik kanan
layer teks tersebut dan pilih menu rasterize
layer
Tanda bahwa layer teks sudah dirubah
menjadi gambar adalah tanda T pada layer
akan hilang
Jika kita sudah merasterize layer teks
Team RPL – smkn1 dps
maka tool tool yang lain bisa dioperasikan kembali kepada layer teks tersebut.
Kita akan sering berhubungan dengan pembuatan teks ini pada bab selanjutnya
yaitu contoh desain efek teks.
Sekarang akan kita coba menerapkan layer tersebut ke dalam desain yang sudah
kita buat.
Tuliskan sejumlah teks kedalam
gambar. Karena teks tersebut akan kita
manipulasi maka rasterize terlebih dahulu
layer teks tersebut.
Pilih menu edit>free transform
untuk mengedit bentuk dari tulisan, sehingga
muncul tulisan dibatasi persegi empat. Klik
kanan tulisan tersebut dan pilih perspective.
Geser kotak kecil yang berada pada sudut
kanan atas kearah kiri secukupnya.
Setelah selesai tekan keyboard enter
Team RPL – smkn1 dps
Tambahkan efek pada tulisan, misal
dengan menggunakan style
PENGGUNAAN FILTER
• penjelasan berbagai macam jenis filter
Filter merupakan tambahan fasilitas yang diberikan oleh photoshop.
Dengan adanya filter maka untuk memberikan efek pada suatu desain menjadi
lebih mudah.
Dibagian ini tidak semua filter akan dibahas, tetapi akan diajarkan secara
garis besarnya serta cara pemakaian. Filter yang ada dalam photoshop jumlahnya
mencapai ratusan buah, dan itu masih bisa ditambah lagi dengan plug-ins dari luar
dengan cara mendownload atau membeli. Karena tidak dijelaskan satu persatu
maka penulis menyarankan agar filter dicoba satu persatu dan dilihat pengaruhnya
terhadap gambar. Dari cara tersebut maka akan lebih mudah memahami
fungsinya. Filter ini akan dipakai dalam contoh contoh pada bab selanjutnya
sehingga dapat dipelajari penggunaanya melalui praktek langsung.
Team RPL – smkn1 dps
Filter dapat kita lihat dibagian menu filter. Dibawah
ini contoh filter yang diberikan secara default oleh
photoshop.
Dibagian ini filter secara garis besar dibagi menjadi
13 jenis. Dan akan dibahas satu persatu fungsinya. Jika
ingin mengaplikasikan salah satu filter tersebut maka
sebaiknya kita tentukan terlebih dahulu bagian mana dari
gambar yang akan kita beri effect, lalu bagian tersebut
diseleksi.
Setiap filter mempunyai option untuk mengatur
hasilnya sesuai agar sesuai dengan keinginan kita. Jadi
pada saat kita memilih salah satu filter maka akan muncul
kotak dialog yang akan meminta setting seperti apa yang kita inginkan.
Artistic
Artistic memberi effect untuk merubah gambar menjadi seperti lukisan. Didalam filter artistic disediakan berbagai pilihan. Sebagai contoh kita gunakan filter colored pencil, filter ini berfungsi untuk mengubah gambar menjadi seperti gambar yang dibuat dari arsiran pensil warna.
gambar awal setelah diberi filter colored pencil
blur
Team RPL – smkn1 dps
Blur sesuai dengan artinya digunakan untuk mengaburkan gambar. Filter
ini adalah salah satu filter yang paling sering digunakan didalam membuat desain.
Didalam filter blur disediakan 4 pilihan utama yaitu gaussian, motion, radial dan
smart.
Gaussian : digunakan untuk mengaburkan gambar tanpa ada gerakan.
Motion blur : untuk mengaburkan gambar dengan gerakan menyamping dan
arahnya bisa ditentukan.
Radial : digunakan untuk mengaburkan dengan gerakan memutar.
Smart :hampir sama dengan gaussian tetapi dengan option yang lebih
banyak sehingga kita bisa lebih leluasa mengaturnya.
Radial blur motion blur dengan sudut 450
Brush stroke
Fungsi dari filter brush stroke hampir sama dengan filter artistic yaitu
memberikan efek pada gambar menjadi seperti lukisan dengan berbagai pilihan
alat untuk melukis.
Team RPL – smkn1 dps
distort
Filter ini berfungsi untuk mengacak gambar dengan suatu keteraturan tertentu.
Misalkan gambar dibuat bergelombang atau membentuk seperti zig-zag
Noise
Filter noise digunakan untuk memberikan gangguan pada gambar, misalkan
diberikan gangguan bintik bintik disekitar gambar.
Pixelate
Filter pixelate digunakan untuk memanipulasi
pixel pixel dari suatu gambar. Seperti telah
dijelaskan sebelumnya bahwa gambar terdiri
dari titik titik kecil atau pixel.
Seperti contoh disamping digunakan filter
mosaic yang fungsinya yaitu membuat gambar
seperti memiliki resolusi yang kecil padahal
pada saat sebelum diberi filter dan sesudah
tidak ada perbedaan resolusi. Sehingga
hasilnya adalah gambar akan tampak kabur
karena dan nampak pixel-pixelnya membesar.
Menggunakan filter mosaic
render
filter render digunakan untuk memberikan efek
tiga dimensi terhadap suatu gambar.
Seperti contoh disamping diberikan filter 3D
transform sehingga gambar tampak seperti
ditempelkan pada permukaan bola.
Team RPL – smkn1 dps
Sharpen
Filter sharpen digunakan untuk membantu mempertajam suatu gambar. sketch filter ini berguna untuk memanipulasi permukaan dari suatu gambar. seperti contoh dibawah, gambar dibuat seperti rilief dalam permukaan batu.
menggunakan filter bas relief
stylize
filter ini memberikan effect tiga dimensi serta mengubah tekstur dari gambar
texture
Filter ini fungsinya hampir sama dengan filter sketch yaitu memanipulasi
permukaan dari suatu gambar.
Menggunakan action
• konsep action
• vektor grafik
• pengenalan photoshop
Inilah salah satu kelebihan program adobe photoshop daripada program
image ediotor yang lain yaitu adanya action dan style. Action adalah kumpulan
perintah perintah yang sudah dibuat dan diletakkan menjadi sebuah file.
Team RPL – smkn1 dps
Konsep action
Misalkan kita membuat sebuah tombol yang rumit dan membutuhkan
langkah yang cukup panjang untuk membuatnya. Dengan menggunakan
photoshop maka langkah tersebut dapat kita rekam dan kita simpan menjadi
sebuah file. Jika kita suatu saat membutuhkan gambar tombol tersebut maka kita
tidak perlu membuatnya dari awal lagi. Kita hanya perlu memanggil file yang
berisi rekaman langkah langkah yang sudah kita buat sebelumnya dan kita tinggal
meng-klik tombol play maka proses akan berjalan dengan sendirinya hingga
selesai dan terbentuk sebuah tombol. Itulah yang didalam photoshop dinamakan
action.
contoh contoh hasil action
contoh contoh hasil action
Kita bisa juga memakai action yang dibuat oleh orang lain dengan
mengkopi file action tersebut. Atau bisa juga action didownload dari internet baik
yang gratis atau yang harus membayar. Action yang berasal dari internet memiliki
desain yang bagus karena umumnya dibuat oleh desainer kelas dunia. Untuk
Team RPL – smkn1 dps
mencoba mendownload action secara gratis di internet silahkan buka web
www.actionxchange.com. Tempat tersebut merupakan kumpulan action dari para
desainer dari seluruh dunia.
Jika kita mendownload suatu action yang bagus kita bisa melihat langkah-
langkahnya dari awal hingga menjadi suatu hasil. Dari langkah langkah tersebut
kita bisa belajar bagaimana para desainer kelas dunia tersebut membuat suatu
desain.
Dengan adanya action orang awampun bisa menghasilkan desain yang
bermutu tanpa harus memahami lebih dalam tentang desain. Sehingga action
bisa menyebabkan seseorang menjadi malas untuk membuat desain sendiri karena
semua yang ia butuhkan sudah disediakan oleh action. Oleh karena itu jika kita
sedang dalam proses belajar mendesain maka jangan terlalu sering menggunakan
fasilitas yang digunakan oleh action.
Photoshop juga menyediakan action action yang bisa kita gunakan. Action
tersebut atomatis masuk pada saat kita menginstallnya. Untuk melihat apa saja
action yang diberikan oleh photoshop silahkan buka file di c:\program
files\adobe\photoshop_6.0\presets\photoshop_actions\action.pdf. untuk bisa
membuka file tersebut anda harus menginstal terlebih dahulu program adobe
image ready yaitu program yang digunakan untuk membaca file dalam bentuk
pdf.
Action yang paling sering digunakan ada tiga macam yaitu action untuk
tulisan, action untuk memanipulasi gambar atau membuat teksture, dan action
untuk membentuk suatu obyek misal tombol. Untuk action jenis tulisan kita bisa
mengisikan tulisan yang akan dikenai action tersebut. Begitu juga dengan action
untuk memanipulasi gambar maka kita harus membuka terlebih dahulu gambar
yang akan kita dimanipulasi.
Penggunaan pallete action
Action photoshop diatur dalam pallete action seperti berikut ini
Team RPL – smkn1 dps
Pilihan pilihan action
play
stop
cara menjalankannya pilih salah satu action yang diinginkan dan klik
action tersebut lalu tekan tombol play maka otomatis action akan berjalan sendiri
hingga selesai. Tombol stop digunakan untuk menghentikan langkah dari action
pada saat saat tertentu. Pada saat action sedang berjalan kadang muncul perintah
untuk memasukkan sesuatu yang dibutuhkan oleh action. Misal jika kita
menjalankan action untuk tulisan maka pada saat menjalankannya ditengah
perjalanan akan muncul perintah untuk menuliskan kata atau kalimat yang akan
diberi effect oleh action tersebut.
Sekarang akan kita coba salah satu action yang paling sederhana
yang ada dalam photoshop yaitu defult action untuk text yang bernama water
reflection. Pertama buka terlebih dahulu pallete action dan cari action yang
bernama water reflection tersebut. Karena action tersebut adalah untuk text maka
kita harus membuat terlebih dahulu textnya.
Setelah semua sudah siap maka kita jalankan action tersebut
dengan menekan tombol play. Pada saat ditengah perjalanan muncul option
seperti berikut:
option ini
menanyakan apakah
tulisannya akan diubah ke
dalam gambar. tekan
Team RPL – smkn1 dps
tombol don’t flatten
maka action akan berlanjut hingga selesai.
awal hasil
contoh dari action diatas adalah yang paling sederhana, hampir semua
action yang ada diberikan dalam photoshop mudah untuk mengoperasikannya.
Apalagi untuk action dalam membuat tekstur akan lebih mudah lagi. Kita tinggal
memanggil action tersebut, dan action akan berjalan sendiri hingga terbentuk
hasilnya. Untuk lebih mengerti bagaimana cara mengoperasikan action sebaiknya
dicoba setiap action yang ada dalam photoshop.
Tidak semua action perilakunya sama seperti diatas, terutama
untuk action yang diperoleh dengan cara mendownload mempunyai perilaku yang
berbeda beda. Misal contoh diatas kita mengisikan tulisannya pada awal sebelum
membuat action, sedangkan pada action yang lain kita diminta mengisikan
tulisannya pada saat action sudah berjalan. Untuk itu kita harus fleksibel memakai
setiap action. Caranya adalah dengan sering mencoba-coba, maka nantinya akan
terbiasa dengan perilaku action tersebut.
Umumnya ketika photoshop baru diinstal, action yang ada dalam
pallete action hanya default action. Untuk menambah action milik photoshop yang
lain maka tekan tombol panah yang ada di pojok kanan
atas sehingga muncul menu seperti disamping
dibagian bawah menu terdapat pilihan pilihan dari
action yaitu: frames, image effects, production, text
effects, textures. Pilih salah satu untuk dimasukkan de
dalam pallete action. Atau bisa juga dimasukkan kesemuannya. Untuk
mengembalikan action yang ada dalam pallete seperti semula pilih menu reset
Team RPL – smkn1 dps
actions karena jika action yang masuk ke dalam pallete terlalu banyak akan
membingungkan kita.
Agar tidak kebingungan untuk memilih action mana yang harus kita pakai,
maka sebaiknya dilihat terlebih dahulu model model action yang ada dalam
action.pdf seperti dijelaskan sebelumnya. Setelah dipilih dan dilihat namanya,
kemudian cari action yang namanya sesuai didalam pallete action.
Sebenarnya kita bisa meniru membuat hal yang sama dengan yang ada
didalam action secara manual, dengan cara melihat langkah langkah yang
digunakan oleh action tersebut.
Klik untuk memunculkan langkah langkahnya
Langkah langkah action water reflection
Action action lain
CONTOH BEKERJA DENGAN EFEK TEKS
• allien fx
• exploding
• fire
• ice
• outline text
• glowing objects
Team RPL – smkn1 dps
Sekarang kita akan belajar mendesain teks dengan mengaplikasikan tool tool yang ada dalam photoshop. Hal ini sangat penting jika kita membuat desain dari sebuah web, bagaimana agar tulisan yang kita tampilkan dalam web tampak bagus dan tidak membosankan.
Allien FX
1. Pilih menu File > New dengan mode RGB lalu
ubah warna background berwarna hitam atau gelap
2. Tambahkan sejumlah text dengan Type Tool dan
warnanya pilih yang agak terang, misal biru. Ubah
teks tertsebut menjadi gambar dengan cara klik
kanan layer teks pada pallete layer dan pilih menu
rasterize layer.
3. masih tetap pada layer text, pilih menu
filter>blur>>Radial Blur gunakan setting sebagai
berikut : Amount : 60, Blur Method : Zoom ,
Quality : Best. Dan hasilnya akan tampak seperti
disamping
.
Exploding
1. Buat file baru dalam mode RGB dan
tambahkan sejumlah teks padanya lalu
rasterize layer teks tersebut
2. duplikat layer dari teks dengan cara klik
kanan layer teks pada pallete layer dan
pilih Duplicate Layer dan beri nama
text2 pastikan layer text2 berada diatas
layer text. Untuk sekarang dan seterusnya
kita akan selalu bekerja pada layer text2
untuk itu pastikan aktif layer berada pada
Team RPL – smkn1 dps
layer text2. dan untuk sementara layer
yang lain termasuk background
dihilangkan terlebih dahulu.
3. beri warna putih disekitar tulisan dengan
memilih menu edit>fill dengan setting
use: white dan mode:multiply
4. pilih menu Filter->Blur->Gaussian Blur
pilih harganya sampai 1,4 pixel untuk
membuat gambar nampak kabur
5. pilih menu Filter->Distort->Polar
Coordinates. Dengan setting
Options:Polar to Rectangular. Filter ini
digunakan untuk mengubah koordinat dari
polar ke persegi sehingga gambar tidak
lagi tampak berbentuk tulisan
6. putar gambar 900 searah jarum jam
dengan memilih menu Image->Rotate
Canvas->90 CW.
7. beri efek angin dengan memilih menu
Filter->Stylize->Wind. Dengan setting
method: wind, direction:from the left
8. ulangi sekali lagi Filter->Stylize->Wind
dengan setting yang sama seperti
sebelumnya
9. pilih menu Image>Adjust>AutoLevels
untuk memperbaiki ketajaman gambar
10. Image->Adjust->Invert untuk menukar
warna
11. berikan lagi efek angin
Filter>Stylize>Wind dengan setting
method:wind, direction:from the right.
Dan ulangi sekali lagi dengan setting yang
Team RPL – smkn1 dps
sama
12. kembalikan gambar ke posisi semula
dengan memutar gambar 900 berlawanan
jarum jam dengan memilih menu
Image>Rotate Canvas>90 CCW
13. pilih menu Filter->Distort->Polar
Coordinates.
Options: Rectangular to Polar. Hal ini
dilakukan untuk mengubah kembali
koordinat dari persegi ke polar.
14. munculkan kembali tulisan yang ada di
layer lain yang sebelumnya dihilangkan
untuk sementara
15. Set Layer Mode yang sebelumnya mode
normal menjadi Hard Light. Mode layer
dapat dilihat pada pallete layer bagian
atas
16. atur warna tampilan dari gambar dengan
memilih menu
Image>Adjust>Hue/Saturation.
pilih Chekbox "Colorize" dan geser-geser
settings dari "Hue" dan"Saturation".
Hue diset ke 32 dan Saturation ke 79.
Fire
1. buat file baru dengan Mode: Grayscale dan
background berwarna hitam. Tambahkan sejumlah
teks dan tempatkan teks agak bawah dari layar.
Rasterize layer text tersebut.
2. gabungkan layer text dengan background dengan
Team RPL – smkn1 dps
memilih menu Layer->Flatten Image.
3. putar gambar 900 berlawanan jarum jam dengan
memilih menu Image->Rotate Canvas->90 CCW.
4. pilih menu Image->Adjust->Invert untuk menukar
warna dari gambar
5. berikan efek angin Filter->Stylize->Wind , set
Direction ke From the left
6. kembalikan warnanya ke keadaan semula dengan
memilih menu Image->Adjust->Invert .
7. berikan efek angin Filter->Stylize->Wind .
8. putar kembali gambar ke posisi semula
Image->Rotate Canvas->90 CW
9. berikan efek gelombang Filter->Distort->Ripple . set
Amount ke 61
10. ubah mode dari gambar yang sebelumnya adalah
grayscale menjadi indexed color dengan memilih
menu Image->Mode->Indexed Color
11. kemudian ubah komposisi warna dengan memilih
menu Image->Mode->Color Table, set Table: ke
Black Body.
Ice
1. Buat file baru dengan backgroud putih dengan mode
grayscale, dan tambahkan sejumlah teks hitam padanya
kemudian rasterize layer text tersebut
2. berikan efek noise dengan memilih menu
Filter>Noise>Add Noise, set Amount ke 145 dan
Team RPL – smkn1 dps
Distribution to Gaussian.
3. gabungkan layer text dengan backgroud dengan memilih
menu Layer->Flatten Image
4. pilih menu Filter->Pixelate->Crystallize, set Cell Size
ke 3.
5. pilih menu Filter->Stylize->Find Edges.
kemudian Filter->Blur->Gaussian Blur , set Radius ke
0,8.
6. putar gambar 900 searah jarum jam dengan memilih
menu Image->Rotate Canvas->90CW.
7. Image->Adjust->Invert untuk menukar warna dari
gambar
8. berikan efek angin Filter->Stylize->Wind dengan
setting Method: Wind, Direction: From the right
9. putar kembali gambar ke posisi semula Image>Rotate
Canvas>90CCW.
10. ubah mode dari gambar ke RGB agar gambar memiliki
warna dengan memilih menu
Image->Mode->RGB Color.
11. ubah komposisi warna dengan memilih menu
Image->Adjust->Hue/Saturation ( pilih checkbox
Colorize , Hue: 215, Saturation: 75, Lightness: 0 ).
outline text
1. Buat file baru dengan mode RGB dan
tambahkan sejumlah teks berwarna
biru, kemudian rasterize layer teks
tersebut.
2. buat seleksi yang melingkupi tulisan
tersebut dengan cara: tekan keyboard
Team RPL – smkn1 dps
ctrl, tahan dan klik layer teks pada
pallete layer.
3. buat layer baru, dan seleksi yang sudah
dibuat sebelumnya jangan sampai
hilang
4. pastikan aktif layer berada di layer yang
baru tersebut. Kemudian pilih menu
edit>stroke dengan setting: width:5 px
location center dan warna: hitam
5. untuk sementara hilangkan layer teks
sehingga yang tampil hanya tepi dari
teks. Tekan ctrl, tahan dan klik layer
baru tersebut, sehingga muncul seleksi
yang melingkupi garis tepi
6. buat gradasi dari warna hitam ke putih
dan gerakkan dari atas ke bawah.
7. pilih edit>stroke dengan setting:
witdh:1px location:outside warna:hitam
8. munculkan kembali layer teks
Glowing objects 1. buat sebuah file baru dengan ukuran
400X100px dengan background berwarna
hitam
2. buat sebuah text didalamnya dan
rasterize layer tersebut
3. duplikat layer dari teks tersebut.
Team RPL – smkn1 dps
4. letakkan aktif layer pada layer glowing
yang pertama kali dibuat.
5. tekan tombol control, tahan dan klik
layer glowing untuk menyeleksi teks yang
sudah dibuat.
6. pilih menu select>expand untuk
memperbesar ukuran seleksi
7. gunakan paint bucket tool untuk
menambahkan warna putih pada seleksi.
Klik berulang ulang hingga seluruh seleksi
dipenuhi warna putih
8. hilangkan seleksi, dan masih tetap pada
layer teks yang pertama, pilih menu
filter>blur>gaussian blur dan isikan
setting 10px
9. pindahkan aktif layer pada layer teks
yang kedua yaitu layer glowing copy
Team RPL – smkn1 dps
10. berikan style pada teks, sesuai dengan
keinginan
. Pada
contoh
disampin
g
menggun
akan style
color target(button)
color target
CONTOH MEMBUAT DESAIN
• round plastic button
• water ripple
• lekukan pada bidang
• tvlines
• realistic wires
Team RPL – smkn1 dps
Round plastic button
1. buat file baru dengan mode:RGB, ukuran 200X200px. Buat
seleksi berbentuk lingkaran dengan marque tool. Agar dapat
membuat lingkaran dengan sempurna pada saat
menggerakkan mouse untuk membuat lingkaran sambil
menekan keyboard shift
2. buat layer baru dan isikan warna pada seleksi dengan
menggunakan paint bucket tool pada layer baru tersebut.
Gunakan warna yang agak muda, sebagai contoh orange
dengan R=255, G=125, B=96
3. perkecil ukuran dari seleksi dengan memilih menu
select>modify>contract dengan setting contract by:6
4. geser seleksi kebawah seperti contoh disamping. Cara
menggesernya gunakan marque tool dan letakkan mouse
ditengah seleksi, lalu geser ke bawah
5. kurangi seleksi yang berada didalam lingkaran sehingga
yang tersisa hanya seleksi yang diluar. Caranya gunakan
magic wand tool dan tool option pada posisi
mengurangi . Lalu klik seleksi yang berada
didalam lingkaran
6. kembalikan posisi seleksi ketempat semula dengan
menggerakkannya dengan menggunakan marque tool
Team RPL – smkn1 dps
7. buat layer yang baru, dengan seleksi yang masih ada pilih menu
select>feather dengan setting 5px
8. isi warna putih pada seleksi di layer yang baru tersebut
dengan menggunakan paint bucket tool.
9. hilangkan seleksi dengan menu select>deselect kemudian
pilih menu filter>blur>gaussian blur dengan setting 5px
10. ubah mode layer dari normal menjadi color dodge dan
opacity nya diubah menjadi 75%
11. kembali ke layer lingkaran yang pertama dan ulangi langkah 3 hingga 6 untuk
membuat seleksi kedua yang berada diatas
12. pilih menu select>feather dengan setting 5px
13. gunakan gradient tool dan pilih pada tool option warnagradient dari putih ke
transparan
Putih ke transparan
Team RPL – smkn1 dps
14. gerakkan gradient tool dari bagian atas seleksi ke bawah seleksi
15. buat layer yang baru dan letaknya paling atas dibanding
layer yang lain
16. tekan keyboard ctrl, tahan dan klik layer lingkaran pada
pallete layer yang pertama kali kita buat.
17. isikan pada layer yang baru tersebut warna hitam, sehigga
lingkaran hitam tersebut menutupi semua gambar yang
sudah kita buat.
18. pilih menu select>modify>contract dan isikan setting 3px
untuk memperkecil seleksi lingkaran
19. pilih menu select>feather dan isikan setting 5px
20. tekan keyboard delete sehingga menghasilkan gambar
seperti disamping
water ripple
1. buat file baru dengan ukuran 250X250px
2. buat gradient yang menutupi seluruh area
gambar. Pilih warna gradient sesuai dengan
selera. Jumlah warna gradient sebaiknya lebih
Team RPL – smkn1 dps
dari dua kombinasi. Seperti contoh disamping menggunakan 5 kombinasi
warna
menggunakan 4 kombinasi
3. buat seleksi berbentuk persegi seperti
contoh disamping. Kemudian pilih menu
select>feather dan isikan setting 8px
4. dengan seleksi yang masih tetap ada
pilih menu filter>distort>zigzag
dengan setting:
style:pound ripples dan setting
amount dan ridges dapat dipilih sendiri
sesuai dengan selera.
Cones
1. buat file baru dengan ukuran 300X300 px dan buat
seleksi berbentuk persegi seperti contoh disamping
2. buat layer yang baru
Team RPL – smkn1 dps
3. gunakan gradient tool dan pilih
warna gradasi copper
4. buat gradasi horisontal ke dalam seleksi
yang sudah dibuat, seperti gambar
disamping
5. dengan seleksi yang masih ada pilih
menu edit>free transform sehingga
muncul kotak kecil di tiap tiap titik
sudutnya
6. klik kanan gambar tersebut dan pilih
menu persperctive
7. geser kotak kecil yang berada di sudut kanan
atas menuju ke kiri dan bertemu dengan kotak
kecil yang berada di kiri atas sehingga
membentuk sebuah kerucut.
8. Setelah selesai tekan keyboard enter
9. buat seleksi berbentuk elips seperti contoh
gambar disamping
Team RPL – smkn1 dps
10. buat seleksi kedua yang berbentuk persegi,
pastikan pada tool option dari seleksi pada
kondisi menambah . Seleksi
dibuat dari atas gambar hingga berpotongan
dengan seleksi yang berbentuk ellips seperti
contoh gambar disamping
11. pilih menu select>inverse untuk membalikkan daerah yang diseleksi.
Kemudian tekan keyboard delete
12. tambahkan bayang bayang dengan
memilih menu layer>layer style>drop
shadow dan buat setting yang sesuai
dengan menggunakan sedikit kreatifitas, akan bisa
membuat gambar seperti berikut
Team RPL – smkn1 dps
Membuat lekukan pada bidang
1. buat file baru dengan ukuran 200X200px dengan resolusi 72 dpi
2. buat layer baru dan gunakan paint bucket tool
untuk memberi warna abu-abu pada bidang
3. perbesar tampilan bidang hingga
1600% dengan menggunakan pallete
navigator
4. anda sekarang sedang bekerja
pada gambar yang telah
diperbesar 16X sehingga sedikit
membutuhkan ketelitian. Buat
sebuah seleksi persegi yang
mempunyai tinggi 3px dan
Team RPL – smkn1 dps
lebarnya sama dengan lebar bidang.
5. gunakan paint bucket tool untuk memberi warna pada bidang yang diseleksi.
Isikan dengan warna hitam
6. pilih menu select>feather dan isikan radiusnya 1px
7. geser seleksi I pixel keatas
dengan menggunakan selection
tool
8. pilih menu image>adjust>brightness contrast dan isikan brightness –100
Team RPL – smkn1 dps
9. geser seleksi dua pixel ke bawah
10. pilih menu image>adjust>brightness contrast dan isikan brightness 100
11. hilangkan seleksi, dan
kembalikan gambar ke ukuran
semula 100%
Team RPL – smkn1 dps
TV lines
1. buat file baru yang berukuran sangat kecil yaitu tinggi 3px dan lebar 5 px
dengan resolusi 72dpi
2. karena canvas sangat kecil, perbesar
hingga 1600% dengan menggunakan
pallete navigator
3. buat seleksi sepertiga bagian atas dari area gambar dan
isikan dengan warna hitam
4. buat seleksi lagi sepertiga area gambar dan kali ini bagian
tengah. Isikan dengan warna abu-abu
5. buat lagi seleksi yang melingkupi keseluruhan dari
gambar
6. pilih menu edit>define pattern dan beri nama Tvlines, setelah selesai tekan
OK
Team RPL – smkn1 dps
7. buka file gambar yang ingin dibuat bergaris garis seperti
pada TV. Misalnya C:\Program Files\Adobe\Photoshop
6\samples\bear.psd
8. buat layer baru diatas gambar tersebut
9. klik paint bucket tool dan pilih pada tool option yang letaknya di bawah menu
utama sebagai berikut: fill pattern
dan pada bagian pattern klik tanda panah arah ke bawah , dan
cari pattern Tvlines yang sebelumnya sudah kita buat
pattern TVlines
10. tuangkan pattern yang sudah kita tentukan kedalam
layer baru pada gambar sehingga menutupi seluruh
area gambar
Team RPL – smkn1 dps
11. ubah mode dari layer yang terletak dalam pallete
layer yang sebelumnya adalah normal diubah
menjadi softlight sehingga gambar menjadi
tampak bergaris garis seperti pada televisi.
Realistic wires
1. buat file baru yang berukuran 300X300px dengan background berwarna putih.
2. tambahkan layer yang baru dan buat didalam
layer yang baru tersebut gambar tali yang
berwarna hitam dengan menggunakan paint
brush tool dan dengan pilihan brush
yang sesuai sehingga
membentuk gambar seperti disamping
3. duplikat layer dari tali dengan mengklik kanan
layer tali pada pallete layer dan pilih menu
duplicat layer.
Team RPL – smkn1 dps
4. kita sekarang bekerja pada layer tali copy,
pastikan aktif layer berada pada layer
tersebut. Tekan keyboard control, tahan dan
klik layer tali copy untuk membuat seleksi
yang melingkupi tali.
5. pilih menu filter>blur>gaussian blur dan
isikan dengan setting 2,5
6. pilih menu filter>stylize>emboss dan
isikan setting seperti berikut angle:120,
height:3, amount 230 sehingga
membentuk gambar seperti disamping.
7. ganti mode dari layer yang sebelumnya adalah normal
menjadi hardlight
8. kembali ke layer tali yang pertama dan
ganti warna dari tali dengan warna yang
diinginkan, misalnya merah, dengan
menggunakan paint bucket tool
9. tambahkan efek bayang bayang dengan
menggunakan layer style drop shadow sehingga
tampak seperti gambar disamping.
Team RPL – smkn1 dps
MENYIMPAN DAN OPTIMASI DALAM WEB
• hal hal yang penting dalam penyimpanan desain
• vektor grafik
• menyimpan dalam ekstensi gif dan png
• menyimpan dalam ekstensi jpg
Setelah kita bekerja dalam photoshop dan sudah menghasilkan suatu desain yang
perlu kita lakukan selanjutnya adalah menyimpan file desain tersebut atau
mengekspor file tersebut agar dapat digunakan dalam web.
Hal hal yang penting dalam penyimpanan desain
Jika kita membuat desain untuk web misalnya maka kita harus mengoptimalkan
desain tersebut. Artinya adalah bahwa kita harus membuat desain sebagus
mungkin tetapi dengan ukuran file sekecil mungkin. Untuk bisa melakukan
hal tersebut maka banyak faktor yang harus dipertimbangkan.
Jika kita menyimpan file dengan menekan menu file>save atau save as maka file
akan tersimpan dengan ekstensi .psd .file gambar yang disimpan dengan
eksetensi psd tersebut adalah file dari photoshop yang masih asli dan belum
diekspor ke dalam file yang lain. Jika kita buka file tersebut dalam photoshop
maka masih lengkap semua unsur unsurnya. Misal jika kita membuat desain
dengan 10 layer lalu filenya kita simpan dan kita buka lain waktu, maka layer
akan tetap berjumlah 10. Berbeda jika filenya sudah kita ekspor ke dalam file
lain misal ke dalam ekstensi .jpg, jika kita buka kembali file .jpg tersebut
maka layernya hanya tinggal satu.
Team RPL – smkn1 dps
Didalam menu file terdapat pilihan menu save for web, pilihan tersebut kita
gunakan jika kita ingin mengekspor hasil desain kita agar dapat digunakan
dalam web. Syarat agar hasil desain dapat dimasukkan dalam web adalah
ukuran filenya harus kecil. Menu save for web tersebut memberikan beberapa
option agar gambar yang dihasilkan mempunyai ukuran yang kecil dan masih
tetap bagus.
Jika kita memilih menu save for web akan muncul option seperti diatas dan
akan kita pelajari satu persatu cara penggunaanya. Pertama yang harus kita
tentukan adalah ekstensi dari file yang akan kita ekspor tersebut.
Ekstensi file
Jumlah warna
Team RPL – smkn1 dps
Ekstensi file diberikan tiga pilihan yaitu png, gif, jpg. Kita harus
menyesuaikan desain yang kita buat dengan ekstensi file ini agar bisa optimal
pada saat ditampilkan dalam web.
Ekstensi gif dan png hampir sama fungsinya yaitu untuk menyimpan gambar yang
tidak terlalu banyak menggunakan warna karena jumlah warna maksimal yang
mampu disimpan oleh file ini hanya 256 buah. Keuntungan dari kedua file ini
adalah ukurannya yang relatif lebih kecil dibandingkan file file yang lain.
Karena hanya dibatasi sampai 256 warna maka jika desain yang kita buat
menggunakan lebih dari 256 maka gambar akan tampak tidak halus atau patah
patah. Seperti contohnya foto, jika foto tersebut kita simpan dalam ekstensi gif
maka foto tersebut tidak akan nampak halus karena foto umumnya
menggunakan warna yang sangat banyak.
Untuk gambar yang menggunakan warna sangat banyak sebaiknya disimpan
dalam ekstensi .jpg. Ekstensi file ini dapat menampung warna hingga 16 juta
sehingga bisa menampilkan gambar dengan sangat halus. Sebagai konsekuensi
dari warna yang sangat banyak tersebut maka ukuran file menjadi lebih besar
daripada jika disimpan dalam gif atau png.
Oleh karena itu kita harus bisa menentukan file-file yang akan disimpan dalam gif
atau jpg. Jika kita membuat suatu web yang didalamnya menggunakan banyak
desain dan gambar maka kita bisa menggunakan kedua jenis file tersebut.
Gambar gambar yang menggunakan warna sedikit kita simpan dalam gif atau
png dan gambar yang menggunakan warna yang banyak kita simpan dalam
jpg.
Menyimpan dalam ekstensi gif dan png
Dibawah menu ekstensi file terdapat tulisan selective yang artinya adalah kita bisa
memilih sendiri warna dan jumlah warnanya dari desain yang kita buat.
Sebaiknya setiap menyimpan hasil desain kita pilih option tersebut karena kita
bisa menentukan sendiri jumlah warnanya. Lalu disebelahnya kita tentukan
jumlah warna yang kita inginkan.
Team RPL – smkn1 dps
Untuk memilih jumlah warnanya kita lakukan dengan coba-coba karena jika kita
menentukan jumlah warnanya terlalu sedikit maka gambar akan pecah. Kita
bisa saja memilih jumlah warnanya sebanyak mungkin, contohnya untuk
ekstensi gif warnanya maksimalnya 256 sehingga gambarnya akan menjadi
agak halus. Tetapi jika kita menginginkan ukuran filenya menjadi lebih kecil
maka jumlah warnanya dapat kita kurangi misal menjadi hanya 32 warna saja.
Untuk itu kita harus mencoba coba sehingga memperoleh jumlah warna yang
paling optimal dari desain tersebut.
Karena jumlah warna mempengaruhi ukuran web maka sebaiknya pada saat
memulai mendesain kita rencanakan untuk menggunakan warna yang
sesedikit mungkin tapi masih bisa terlihat bagus. Semakin sedikit warna yang
digunakan maka ukuran file akan semakin kecil.
File jenis gif dan png sebenarnya hampir sama, perbedaan adalah terletak pada
kebebasan penggunaanya. Ekstensi gif diperlukan izin terlebih dahulu karena
ekstensi gif telah dipatenkan oleh orang yang menciptakan algoritma
pembuatannya. Karena disebabkan hal tersebut maka muncullah algoritma
yang baru yaitu png dan ekstensi tersebut bebas untuk dipakai.
Menyimpan dalam ekstensi jpg
Untuk ekstensi jpg tidak ada pilihan
yang menanyakan jumlah warna karena
secara otomatis semua warna akan
dipakai. Option yang muncul adalah
menanyakan kualitas dari desain yaitu
low, medium, high, maximum. Semakin tinggi kualitasnya maka gambar akan
semakin bagus dan ukuran filenya juga lebih besar.
Team RPL – smkn1 dps
Dibagian atas kotak dialog terdapat pilihan sebagai berikut:
Pilihan tersebut digunakan untuk membandingkan ukuran file dan kualitas
gambarnya dari gambar dari yang asli hingga gambar setelah dioptimasi.
Original adalah menunjukkan gambar yang asli
Optimized adalah gambar setelah ukuran filenya diperkecil.
2-up adalah gambar yang ukuranya diperkecil, dan diberikan dua pilihan
4-up adalah gambar yang ukurannya diperkecil, dan diberikan empat pilihan
PENGENALAN FLASH
• toolbar
• stage
• panel
• menggunakan grid dan ruler
• perbesaran gambar
Flash adalah salah satu program pembuatan animasi yang sangat handal.
Kehandalah flash dibandingkan dengan program yang lain adalah dalam hal
ukuran file dari hasil animasinya yang kecil. Untuk itu animasi yang dihasilkan
oleh program flash banyak digunakan untuk membuat sebuah web agar menjadi
tampil lebih interaktif.
Seperti telah dijelaskan pada bab sebelumnya bahwa salah satu kendala
dari pembuatan sebuah web adalah ukurannya yang harus kecil, sehingga
kesulitan untuk memasukkan animasi kedalamnya disebabkan oleh ukuran file
animasi yang umumnya sangat besar. Program flash mengatasi kendala kendala
Team RPL – smkn1 dps
diatas dengan baik, sehingga hampir semua web yang interaktif saat ini
menggunakan flash sebagai bagian didalamnya.
menu bar
time line
toolbar panel
Stage
Toolbar
Toolbal berisi kumpulan tool yang digunakan untuk membuat dan memilih
isi di dalam Timeline dan Stage. Toolbar terbagi menjadi tool dan modifier. Setiap
tool memiliki ukuran Modifier tertentu yang ditampilkan ketika kita memilih tool
tersebut. Sebagai contoh, jika kita memilih Text tool maka modifier seperti huruf,
ukuran huruf, warna huruf dapat kita atur.
Team RPL – smkn1 dps
Timeline
Jika anda membayangkan movie Flash sebagai sebuah buku, Timeline
merupakan tabel interaktif dari isinya. Setiap adegan seperti sebuah bab, setiap
frame seperti halaman. Imajinasikan bahwa anda mendapatkan poin sampai bab
10 pada tabel isinya, dan buku akan membalik ke halaman pertama dari bab ini.
Pada Flash, ketika anda meng-klik sebuah frame pada Timeline (atau ketika play-
head memasuki kerangka), frame itu muncul pada dokumen anda.
Movie Flash lebih kompleks daripada buku. Setiap movie “page” dapat
menjadi beberapa lembar transparan ditumpuk satu di atas yang lain. Flash
menjaga track dari “sheet” ini yang dinamakan layers. Dan keseluruhan buku
muncul menjadi gerak seperti anda bergerak melalui tabel isi, dengan beberapa
tangan yang tak terlihat membalik halaman.
Timeline adalah organisasi dan pengaturan tool yang besar dan kompleks.
Anda akan menggunakan keuntunngannya ketika anda membuat animasi.
Kemudian anda akan perlu untuk lebih mendalami komponen-komponennya pada
bab selanjutnya. Sekarang anda hanya memerlukan untuk mengerti Timeline
secara umum.
Gambar dibawah menunjukkkan timeline dari flash. Anda dapat
mengaitkan Timeline ke sembarang sisi dari window Flash atau melayang di atas
sebagai window terpisah.
Stage
Stage adalah daerah yang berisi semua elemen gambar yang membentuk
movie Flash.. Kita akan selalu bekerja membuat gambar, membuat animasi, dll di
Team RPL – smkn1 dps
tempat ini. Pada Flash, anda dapat mengontrol seberapa besar layarnya, dan apa
warnanya, melalui kotak dialog Movie Properties.
Panel
Pada versi Flash sebelumnya, anda mengeset properties dan atribut dari
elemen (seperti mengisi warna, bentuk garis, dan font) dengan menggunakan tool
dan pengubah pada Toolbar atau beragam kotak dialog. Pada Flash 5 setting
tersebut dilakukan melalui Panel-window yang dapat tetap terbuka pada desktop
untuk akses cepat saat anda bekerja. Jadi panel merupakan bagian tambahan dari
flash 5 yang baru dan tidak terdapat pada flash versi sebelumnya. Panel digunakan
untuk mengubah atribut dari elemen yang dipilih. Anda akan belajar
menggunakan sendiri panel pada bab berikutnya dari buku ini.
Untuk membuka panel yang diinginkan pilih menu window>panel
kemudian muncul berbagai pilihan dari panel, dan klik yang diinginkan. Panel
dapat dimunculkan atau dihilangkan sesuai dengan kebutuhan, jadi sebaiknya
tidak semua panel dimunculkan pada tampilan utama karena dapat mengganggu
dalam bekerja.
Menggunakan Grid dan ruler
Grid adalah sebuah set garis-garis yang saling berpotongan vertikal dan
horisontal yang berguna sebagai penuntun menggambar dan meletakkan elemen-
elemennya, fungsinya mirip seperti kertas grafik pada dunia nondigital. Flash juga
menggunakan grid untuk meluruskan benda jika anda mengaktifkan fitur Snap to
Grid. Karena grid hanya sebagai alat bantu maka grid tidak muncul pada hasil
movie anda.
Cara memunculkan grid dari menu View, pilih Grid > Show Grid. Jika
fasilitas grid ini dalam keadaan aktif maka terdapat tanda cek disampingnya dan
pada stage memperlihatkan suatu set garis-garis berpotongan sebagai bagian dari
Stage.
Team RPL – smkn1 dps
Grid yang ada dalam stage dapat diatur sesuai dengan keinginan kita yaitu
warna dan ukuran panjang dan lebarnya. Caranya adalah gunakan menu
view>grid>edit grid sehingga muncul kotak dialog mengenai setting dari warna
dan ukuran dari grid.
Contoh grid
Ruler dan guides membantu anda dalam menggambar obyek dengan
presisi ukuran, bentuk, dan posisi pada Stage.
Untuk memunculkan ruler, pilih menu view>rulers.
Guides digunakan untuk meluruskan antara gambar yang ada pada stage
dengan ruler. Caranya klik rulers yang ada di pinggir yang horisontal atau yang
vertikal. Kemudian drag ke arah stage dan letakkan pada tempat yang sesuai
dengan keperluan.
rulers
guides
untuk mengatur warna dan ukuran dari guides pilih menu
file>guides>edit guides.
Perbesaran gambar
Flash memiliki beberapa cara untuk perbesaran elemen pada Stage. Salah
satu caranya adalah dari menu View, pilih Magnification. Pada bagian tersebut
Team RPL – smkn1 dps
terdapat pilihan ukuran dari gambar dalam %. Ukuran yang sebenarnya dari
gambar adalah ketika dipilih magnification 100%.
Cara yang lain adalah pilih zoom control dari stage yang
terletak pada kiri bawah, dan pilihannya sama dengan pada
magnification.
Fasilitas lainnya dari flash adalah untuk memperbesar atau memperkecil suatu
daerah yang diinginkan. Caranya adalah gunakan zoom tool yang ada pada
toolbox dan pada tool option yang terletak dibawahnya terdapat pilihan .
Tanda + digunakan untuk memperbesar dan tanda - digunakan untuk
memperkecil. Ada dua cara untuk menggunakan tool ini yaitu:
- Klik daerah atau elemen yang ingin anda perbesar. Flash menggandakan
persentase perbesaran pada bidang Zoom Control dan menempatkan bintik
yang diklik pada pusat dari stage yang ditampilkan.
- Klik dan geser untuk membuat kotak seleksi yang melingkupi elemen yang
ingin dilihat. Flash mengisi window dengan daerah yang dipilih.
MENGGAMBAR DALAM FLASH
• penjelasan berbagai tool menggambar dalam flash
Bab ini akan mengajarkan tentang cara menggunakan drawing tool dari
Macromedia Flash. Sebenarnya fungsi fungsi dari tool hampir sama dengan pada
photoshop sehingga pada bagian ini tidak dibahas secara mendalam.
Flash juga memungkinkan anda mengimpor gambar dari program lain.
Jika anda membuat gambar pada sebuah program lain seperti Macromedia
FreeHand atau Adobe Illustrator, anda dapat mengimpor gambar tersebut ke
dalam Flash. Hal ini dilakukan jika kemampuan yang dibutuhkan dalam flash
Team RPL – smkn1 dps
masih kurang sehingga dibutuhkan untuk menggambar dengan program image
editor yang lain dan kemudian diekspor ke dalam flash.
Perubahan terbesar antara flash 5 dengan flash yang sebelumnya adalah
dalam hal atribut dari tool toolnya. Untuk flash 5 atribut dari tool toolnya
kebanyakan dilakukan melalui panel.
Line tool
Line tool digunakan untuk membuat garis lurus. Untuk mengaktifkan line
tool kita cukup mengklik yang ada pada toolbar. Cara menggambar garis klik,
tahan dan geser pointer di dalam stage. Ketika kita menggeser pointer maka garis
akan muncul dari titik kita mengklik mouse. Garis yang kita buat belum
sepenuhnya jadi sampai kita melepaskan mouse. Kita juga dapat menetapkan
sudut dari garis yang kita buat sebesar 45 derajat yaitu dengan menekan [shift]
pada saat kita menggambar garis. Setting pada Line tool terdiri dari warna garis,
ketebalan garis dan bentuk garis.
Jika kita ingin merubah warna, bentuk, dan tebal garis pilih panel yang
bernama stroke. Untuk merubah warna garis, klik bagian warna sehingga muncul
kotak palet warna.
Palet warna berisi 228 contoh
warna. Semua warna yang ada di palet
warna tersebut aman untuk digunakan
dalam web, artinya warna-warna tersebut
dapat ditampilkan di browser 8-bit
(maksimal 28=256 warna). Palet warna
yang dapat dengan baik ditampilkan terdiri bentuk tebal warna
dari 216 yang dapat ditampilkan baik oleh dua browser Netscape dan Internet
Explorer.
Untuk memilih warna, klik contoh warna di palet warna. Palet warna akan
menghilang dan contoh warna garis akan berubah sesuai dengan warna yang kita
pilih.
Untuk merubah bentuk garis. Klik panah drop-down dari bentuk garis lalu
pilih bentuk garis yang kita inginkan.
Team RPL – smkn1 dps
Untuk merubah ketebalan garis, klik panah drop-down menu dari
ketebalan garis. Kemudian pilih ketebalan garis yang diinginkan. Dapat dipilih
dengan skala maksimal 10.
Oval tool
Oval tool digunakan untuk membuat bentuk melingkar. Klik Oval tool
pada toolbar untuk mengaktifkannya. Cara membuat bentuk melingkar, klik, tahan
dan geser mouse. Maka akan muncul bentuk melingkar yang mengikuti arah
pointer mouse kita. Gambar lingkaran baru terbentuk jika kita melepas mouse
kita. Untuk membuat lingkaran yang tepat tekan [shift] pada saat kita menggeser
mouse.
Setting dari Oval tool sama dengan pada line tool yaitu warna garis, tebal
garis, bentuk garis dan warna. Dan cara pengaturannya juga sama juga sama yaitu
pada panel stroke.
Setting warna yang terdapat pada panel
stroke adalah setting warna dari garis yang
melingkupi oval, sedangkan untuk mengatur
warna isinya dilakukan pada panel fill atau pada
toolbar fill.
warna
Rectangle tool
Rectangle tool digunakan untuk membuat bentuk persegi. Klik rectangle
tool pada toolbar untuk mengaktifkannya. Cara membuat persegi, klik, tahan, dan
geser mouse. Maka akan muncul bentuk persegi mengikuti arah pointer dari
mouse. Bentuk persegi baru terbentuk jika kita melepas mouse. Untuk membentuk
bujur sangkar klik [shift] pada saat menggambar.
Pengaturannya sama dengan pada oval tool dan terdapat tambahan yaitu
round rectangle radius yang terdapat pada toolbar modifier. Rectangular radius
Team RPL – smkn1 dps
digunakan untuk membuat sudut persegi manjadi bentuk kurva, klik tombol
Round Rectangle Radius sehingga muncul kotak dialog Rectangel Settng.
Masukkan nilai jari-jari dari sudut rectangle.
Persegi yang kita buat akan memiliki sudut
berbentuk kurva.
Pencil Tool
Pencil Tool digunakan untuk membuat garis luar secara bebas (garis tidak
tepat lurus). Klik tombol Pencil Tool untuk mengaktifkannya. Untuk menggambar
lintasan klik, tahan, dan geser mouse sehingga lintasan yang kita buat terbentuk.
Pengaturan warna, ukuran dan jenis pada pencil tool sama dengan line tool yaitu
pada panel stroke.
Pencil Tool Modifier pada toolbar adalah pencil
mode. Pencil mode membantu kita ketika membuat lintasan
sehingga kita dapat memperhalus atau memperlurus lintasan
yang kita buat. Terdapat tida model : Straighten, Smooth dan
Ink.
Straighten
Straighten digunakan untuk
membantu memperlurus
lintasan yang kita buat.
Tetapi hasilnya tidak akan
selurus garis yang dibuat
dengan Line Tool. Lintasan yang dibuat hasilnya dengan strighten
Smooth
Smooth digunakan untuk
membantu memperhalus
lintasan yang kita buat.
Lintasan yang dibuat hasilnya dengan smooth
Team RPL – smkn1 dps
Ink
Ink digunakan untuk menghilangkan bantuan Flash dalam memperhalus suatu
lintasan. Dengan menggunakan ink maka hasilnya akan sama dengan lintasan
yang kita buat dan tidak mendapat bantuan dari flash didalamnya.
Brush Tool
Brush Tool digunakan untuk menggambar isi (fill). Untuk menggambar isi
aktifkan Brush Tool dengan mengklik icon. Kemudian klik dan geser pointer
mouse ditempat kita ingin memulai menggambar, maka akan terbentuk coretan.
Untuk mengakhiri menggambar lepaskan mouse.
Brush Tool Modifier terdiri dari : model kuas
(Brush Mode), warna isi, ukuran kuas (Brush
Size), bentuk kuas (Brush Shape), dan Lock Fill.
Model Kuas
Model Kuas digunakan untuk menentukan jenis
coretan kuas yang akan dihasilkan ketika kita
menggambar menggunakan Brush Tool. Model kuas
mengatur berhubungan antara kuas dengan obyek lain.
Jadi agar terdapat perbedaan, pada saat akan mencoba
model model dari kuas, buatlah obyek terlebih dahulu.
Terdapat lima pilihan yaitu Paint Normal, Paint Fill, Paint Behind, Paint
Selection dan Paint Inside.
� Paint Normal
digunakan untuk
membuat coretan kuas
yang akan menutupi
semua bentuk garis luar,
isi, atau keduanya.
Team RPL – smkn1 dps
� Paint Fill digunakan untuk menggambar di atas
isi tanpa menutupi garis luar. Selain itu, dengan
Paint Fill kita juga dapat menggambar di luar
kedua bentuk tersebut.
� Paint Behind digunakan untuk
menggambar isi di belakang bentuk yang ada
tanpa menutupi bentuk tersebut.
� Paint Selection
digunakan untuk
memberi isi hanya pada
daerah yang telah kita
pilih (Selection).
Selection belum dibahas
dan akan dibahas pada bab selanjutya.
� Paint Inside digunakan untuk memberi isi
hanya di dalam bentuk yang ada, sehingga
daerah luar dari bentuk tersebut tidak akan
terpengaruh
.
Brush Size
Brush Size digunakan untuk mengatur ukuran dari kuas yang kita gunakan.
Brush Shape
Team RPL – smkn1 dps
Brush Shape digunakan untuk memilih bentuk kuas yang kita gunakan.
Lock Fill
Lock Fill digunakan untuk tidak menggunakan (mengunci) gradient fill pada
Brush Tool. Kita akan lebih dalam membahas Lock Fill ketika membahas Paint
Bucket Tool.
Ink Bottle Tool
Ink Bottle Tool digunakan untuk merubah garis pembatas atau menambah
garis pembatas pada suatu bentuk, misal pada bentuk oval. Untuk merubah garis
yang sudah ada tentukan warna, tebal dan bentuk garis dari Ink Bottle Modiefier
pada panel stroke lalu klik pada lintasan garis yang ingin kita dirubah.
Paint Bucket Tool
Paint Bucket Tool digunakan untuk merubah isi atau memberi isi suatu
bentuk. Untuk merubah isi, pilih warna isi kemudian klik isi yang ingin dirubah.
Untuk memberi isi, pilih warna isi pada panel fill kemudian klik pada daerah yang
ingin dirubah warnanya.
Warna yang dipilih dapat berupa warna solid yaitu warna yang monoton, linear
gradient, dan radial gradient.
Paint Bucket Tool Modifier terdiri dari : warna isi, Gap Control, Perubahan isi
(Transform Fill) dan Lock Fill.
Gap Control
Gap Control digunakan untuk memberi isi suatu
garis luar yang tidak benar-benar tertutup. Pilihannya
Team RPL – smkn1 dps
adalah Don’t Close Gaps untuk memberi isi garis luar yang tertutup. Close Small
Gaps untuk memberi isi garis luar yang tidak tertutup karena ada jarak yang kecil
antara ujung garis yang satu dengan ujung garis yang lain. Close Medium Gaps
untuk memberi isi garis luar yang mempunyai
jarak cukup besar. Dan Close Large Gaps untuk
memberi isi garis luar yang mempunyai jarak
besar.
Lintasan setelah diisi
Lock Fill
Jika kita memilih
gradient sebagai warna isi,
maka titik pusat dari gradient
akan terletak di tempat kita
mengklik Paint Bucket dalam
Stage. Titik pusat gradient
dapat dianggap sebagai titik sumber dari cahaya.
Ketika kita mengaktifkan Lock Fill dengan mengklik tombol Lock Fill,
maka kita masih bisa memberi isi dengan warna gradient tetapi kita tidak bisa
merubah titik pusat gradient yang sudah ada. Titik pusat gradient tetap tidak
berubah posisinya meskipun kita mengklik Paint Bucket di tempat lain dalam
Stage.
Transform Fill
Transform Fill digunakan untuk
merubah isi gradient. Aktifkan Transform
Fill dan klik bentuk yang mengandung isi
berupa warna gradient, maka Transform
Fill Modifier akan muncul di sekeliling
bentuk yang kita pilih.
Team RPL – smkn1 dps
Dropper Tool
Dropper Tool digunakan untuk mengambil contoh warna dari bentuk yang
ada sehingga kita bisa menggunakan contoh warna tersebut untuk memberi warna
bentuk lain agar sama dengan warna dari bentuk yang kita ambil contoh
warnanya.
Eraser Tool
Eraser Tool digunakan untuk menghapus bagian dari bentuk yang terdapat
dalam Stage.
Eraser Tool Modifier terdiri dari : Erase Mode,
Faucet dan Brush Size.
Erase Mode
Erase Mode digunakan untuk menentukan cara
menghapus dari Eraser Tool. Fungsi masing masing
mode sama dengan fungsi mode pada fill tool.
Faucet
Faucet digunakan untuk menghapus semua isi atau garis luar dengan sekali klik.
Erase Shape
Erase Shape digunakan untuk menentukan bentuk penghapus yang kita gunakan.
Text tool
Text tool digunakan untuk memasukkan teks kedalam stage. Cara
memasukkan teks terdapat dua cara.
Team RPL – smkn1 dps
Cara pertama kita klik tombol
text tool pada toolbar lalu kita klik
pointer mouse di stage sehingga
muncul kotak teks dengan lingkaran
kecil di ujung kanan atas kotak. Kotak
teks tersebut merupakan tempat kita
memasukkan teks. Jika kita
memasukkan teks maka kota tersebut
akan langsung menyesuaikan besarnya
dengan teks yang kita masukkan.
Cara kedua adalah dengan menggeser mouse
untuk menentukan panjang dari kotak teks yang
dalam hal ini disebut kotak paragraf. Maka kotak box
akan muncul dengan panjang tertentu. Panjang kotak
tersebut akan tetap. Jika teks yang kita masukkan
lebih panjang dari panjang yang telah kita buat maka
secara otomatis huruf yang tidak cukup akan pindah
ke baris berikutnya.
Setting dari Text tool terdiri dari : Font, Font
Size, Font Color, Bold, Italic, Alignment,
Paragraf dan Text field.
Untuk mengatur jenis font, ukuran font, warna
font, bold, italic dapat dilakukan pada panel
character.
Ukuran warna jenis
Sedangkan untuk mengatur Aligment atau perataan dari paragraf dapat dilakukan
pada panel paragraf.
Team RPL – smkn1 dps
Merubah teks
Kita bisa merubah teks dengan dua
cara.
Cara pertama adalah mengklik
salah satu huruf dengan menggunakan
arrow tool sehingga muncul kotak
teks. Dengan teks modifier kita bisa merubah seluruh teks yang ada dikotak teks
sesuai keinginan.
Cara kedua adalah dengan
mengklik salah satu huruf dengan
menggunakan teks tool sehingga
muncul kotak teks. Kemudian kita
blok teks yang ingin kita rubah. Lalu kita dapat merubah teks dengan teks
modifier. Cara kedua ini hanya akan merubah teks yang kita blok.
Ketika kita memilih teks maka akan
berbeda dengan ketika kita memilih bentuk.
Jika kita memilih teks maka akan muncul
kotak pilihan yang mengelilingi teks tersebut. Tetapi jika kita memilih bentuk
maka akan muncul suatu pola yang menandakan bahwa bentuk tersebut sedang
kita pilih.
Drawing tool aktif dapat aktif pada bentuk yang kita buat tetapi tidak dapat
aktif pada text. Misal kita menggunakan pencil tool dan kita coretkan pada suatu
bentuk maka coretan tersebut akan muncul pada bentuk tersebut. Berbeda jika
pencil tool tersebut kita coretkan pada text maka tidak akan tampak hasilnya.
Agar drawing tool dapat aktif pada text tersebut maka tulisan tersebut
harus kita ubah menjadi suatu bentuk dan bukan lagi sebagai tulisan. Caranya
adalah pilih menu modify>break apart
Ketika kita me”break apart” teks, maka kita sudah tidak
dapat lagi merubah teks tersebut, misal dirubah jenis font,
ukuran font, dll. Sekarang teks tersebut bukan lagi merupakan
text tetapi merupakan kumpulan dari bentuk. Tetapi kita sudah
Team RPL – smkn1 dps
bisa merubah teks dengan menggunakan drawing tool.
MEMANIPULASI OBYEK
• selection tool
• arrow tool
• pewarnaan dengan gradien
Selection tool
Bagian yang tidak dapat dipisahkan dalam membuat dan memanipulasi
bentuk di Flash adalah memfungsikan selection tool. Fungsi ini mirip dengan
selection tool pada photoshop yang sudah kita pelajari pada
bagian sebelumnya, sehingga dianggap sudah
memahaminya.
Perbedaan dari seleksi dalam flash dengan seleksi
dalam photoshop adalah pada photoshop bidang yang
diseleksi dibatasi dengan garis putus putus yang berkedip
kedip sedangkan pada flash, tanda suatu bidang yang sudah
diseleksi adalah terdapat titik titik dalam bidang tersebut.
Perbedaan lainnya adalah pada flash hanya bisa menyeleksi suatu bidang atau
obyek dan tidak bisa membuat seleksi pada daerah kosong dalam stage.
Lasso tool
Tool yang digunakan untuk membuat seleksi pada flash hanya satu yaitu
lasso tool. Untuk membuat selection menggunakan lasso tool, klik, tahan, dan
gerakkan mouse. Penggunaan lasso tool mirip dengan penggunaan pencil tool
pada ink mode. Selection yang kita buat akan tampak berupa area berpola dan
terdapat titik titik.
Team RPL – smkn1 dps
Lasso tool modifier terdiri dari : Magic wand, Magic wand properties
dan Polygon mode.
Magic Wand
Magic wand dan Magic wand properties digunakan untuk membuat
selection pada bidang yang fungsinya mirip dengan magic wand pada photoshop
yaitu untuk menyeleksi suatu bidang yang memiliki warna sama.
Polygon Mode
Polygon mode memungkinkan kita membuat
selection berupa daerah yang tertutup oleh garis-
garis lurus. Untuk membuat selection dengan
polygon mode
Arrow tool
Arrow tool memiliki fungsi yang banyak sekali didalam flash. Dan fungsinya
adalah sebagai berikut
� arrow tool bisa digunakan untuk membuat seleksi pada suatu bidang baik
secara keseluruhan atau sebagian. Jika ingin membuat seleksi keseluruhan dari
suatu obyek maka cukup dengan mengklik obyek tersebut.
Kemampuan dari arrow tool untuk membuat
seleksi hanya yang berbentuk persegi. Caranya
letakkan arrow tool diluar obyek kemudian drag
sehingga melingkupi obyek baik sebagian atau
keseluruhan, tergantung dari keperluan.
Obyek yang diseleksi sebagian
Team RPL – smkn1 dps
� Arrow tool juga bisa digunakan untuk menggeser obyek. Caranya klik obyek
yang ingin dipindah kemudian geser ketempat yang diinginkan.
� Fungsi lain dari arrow tool adalah untuk merubah bentuk obyek. Ada beberapa
cara dalam merubah bentuk obyek dengan menggunakan arrow tool
Cara yang pertama, klik bagian tepi dari suatu obyek kemudian geser ke arah
yang diinginkan
.
mouse letakkan pada tepi obyek geser arrow tool
cara yang kedua adalah dengan menggunakan option rotate dan scale yang
terletak pada bagian tool modifier.
scale digunakan untuk mengubah ukuran obyek, baik itu memperbesar
ataupun memperkecil. Sedangkan rotate digunakan untuk memutar obyek.
Sebelum melakukan fungsi scale atau rotate, seleksi terlebih dahulu obyek
yang akan dikenai fungsi tersebut.
Untuk melakukann rotate, klik bentuk yang ingin kita rubah. Lalu klik tombol
rotate sehingga muncul kotak rotate demgam titik pembantu untuk
memutar(rotate) dan
memiringkan (skew).
Geser titik pembantu
tersebut sesuai
keinginan kita maka
bentuk akan berputar
atau bergeser sesuai
arah dari titik pembantu
yang kita rubah.
Team RPL – smkn1 dps
Untuk melakukan Scale, klik
bagian yang ingin kita ubah lalu
klik tombol scale sehingga
muncul kotak scale dengan titik
pembantu. Geser titik pembantu
tersebut sehingga kita
memperoleh bentuk yang lebih
besar ataupun lebih kecil dari
bentuk aslinya.
Pewarnaan dengan Gradien
Pengaturan dari warna gradien dapat dilakukan pada panel fill. Dalam
panel tersebut terdapat dua pilihan gradien yaitu linear gradient dan radial
gradient. Linear gradient adalah gradien yang perubahan warnanya mendatar
mengikuti garis lurus. Sedangkan
radial gradient adalah gradien yang
warnanya berubah membentuk suatu
lingkaran.
pilihan warna
Warna 1 warna 2
Cara pemilihan warna hampir sama dengan pada photoshop yaitu klik terlebih
dahulu warna 1, atau warna 2, kemudian ganti dengan warna yang diinginkan
pada pilihan warna.
Team RPL – smkn1 dps
Seperti pada photoshop, gradien pada flash ini juga bisa memiliki gradien
yang memiliki lebih dari dua warna. Untuk menambah jumlah warnanya klik
tempat yang diinginkan pada panel fill, misal ditengah antara warna 1 dan warna2
sehingga muncul tanda panah yang baru.
Ketika kita menggunakan gradient sebagai warna isi kita bisa mengatur
orientasi dari warna tersebut. Bila menggunakan linear gradient kita bisa
menentukan horizontal vertikal ataupun diagonal. Jika kita menggunakan paint
bucket untuk memberi warna dengan orientasi vertikal kita hanya perlu
menggeser mouse secara vertikal dari atas ke bawah melewati bentuk yang ingin
kita beri warna atau sebaliknya dari bawah ke
atas. Hal sama juga berlaku untuk horisontal
kita hanya perlu menggeser mouse secara
horisontal dari kiri ke kanan atau sebaliknya.
Bila menggunakan Radial Gradient kita bisa menentukan
letak titik pusatnya.
Jika kita menggunakan paint bucket tool untuk memberi
warna maka titik tempat kita mengklik paint bucket tool
tersebut menjadi titik pusat dari radial gradient.
Titik pusat
Team RPL – smkn1 dps
KONSEP SYMBOL DAN LIBRARY
• pengertian Symbol
• pengertian Library
• pengertian instance
Symbol dan library adalah termasuk salah satu bagian yang paling penting
dalam membuat animasi dengan flash. Jika kita tidak bisa memahami konsep ini
maka kita akan kesulitan untuk bisa melangkah ke bagian selanjutnya.
Untuk membuat suatu bentuk bisa beranimasi, kita harus membuat bentuk
tersebut menjadi symbol. Pada bab ini kita akan membahas tentang symbol,
bagaimana symbol dibuat, bekerja, diatur dan di perbaiki.
Symbol
Dengan merubah suatu obyek menjadi symbol, itu artinya obyek tersebut
sudah menjadi bentuk yang pasti dan kita tidak bisa
memanipulasinya lagi didalam stage misalnya merubah
warna, memberikan coretan diatasnya atau yang lainnya.
Jadi sebelum merubah suatu obyek menjadi symbol maka
sebaiknya obyek tersebut harus benar benar sudah siap
untuk digunakan sehingga tidak lagi ingin melakukan
perubahan terhadap obyek tersebut.
Tetapi kita bisa melakukan operasi merubah bentuk di dalam stage seperti
memutar, memperbesar atau memindahkannya.
Merubah obyek menjadi symbol
Sebelum sebuah obyek dirubah menjadi symbol, blok
terlebih dahulu obyek tersebut dengan menggunakan arrow tool
Team RPL – smkn1 dps
yang ada pada toolbar bagian kiri atas. Jika suatu obyek sudah diblok maka
obyek tersebut akan muncul titik titik kecil pada permukaanya.
Selanjutnya pilih menu insert>convert to symbol sehingga muncul menu seperti
berikut:
isikan nama sesuai dengan keinginan pada bagian name. Dan pada bagian
behavior terdapat tiga pilihan yaitu:
movie clip : obyek digunakan untuk beranimasi
button : obyek dibuat sebagai tombol
grafik : obyek dibuat sebagai gambar yang statis atau tidak beranimasi
sebelum kita mengubah obyek menjadi symbol, kita harus mempunyai tujuan dari
pembuatan symbol tersebut sehingga dapat kita isi salah satu dari ketiga option
diatas.
Setelah selesai tekan tombol OK.
Jika suatu obyek sudah berubah menjadi symbol maka
obyek tersebut akan dibatasi oleh persegi empat berwarna biru
dan muncul tanda + ditengahnya. Hal itu bertujuan untuk
membedakan antara obyek yang sudah diubah menjadi symbol
dengan yang belum.
Library
Library didalam flash fungsinya sesuai dengan namanya adalah sebuah
tempat penyimpan symbol yang sudah kita buat. Jika kita membuat sebuah
symbol maka secara otomatis symbol tersebut akan masuk ke dalam library. Jadi
selama kita bekerja semua symbol yang sudah pernah kita buat, walaupun sudah
kita hapus, symbol tersebut masih tersimpan dalam library.
Team RPL – smkn1 dps
Untuk menampilan library, pilih window>library dari menu bar. Library
window akan muncul.
Daftar semua symbol yang ada
ditampilkan di bawah preview
window. Icon disebelah nama symbol
menunjukkan tipe dari simbol
(behavior). Untuk melihat simbol di
preview window, klk simbol yang
ingin ditampilkan.
icon graphic behavior
icon movie clip behavior
icon button behavior
Untuk mengatur simbol yang ada, kita
bisa menggunakan folder. Klik icon
“new folder” untuk membuat
folder baru.
Untuk merubah nama dan behavior
dari simbol klik icon “properties”
Untuk menghapus simbol dari library klik icon “delete” . Perlu diperhatikan
bahwa jika kita menggunakan tombol delete maka symbol yang telah hilang tidak
bisa dikembalikan lagi serta tidak bisa lagi menggunakan fasilitas undo untuk
mengembalikannya.
Library mempunyai kegunaan yang cukup penting, dan jika kita
mengoptimalkan pemakaiannya maka akan membantu mempermudah didalam
membuat animasi.
Misalnya symbol yang ada dalam stage terlanjur dihapus dan tidak bisa
dikembalikan lagi maka kita bisa mengambil symbol yang masih tersimpan dalam
library dengan cara mendragnya ke dalam stage
Team RPL – smkn1 dps
Obyek didrag menuju stage
Instances
Instances adalah duplikat dari symbol yang ada dalam stage. Kita bisa
menduplikat symbol yang ada dalam library berapapun jumlahnya. Untuk
menggunakan instances dari simbol, kita pindahkan simbol ke dalam stage dengan
cara mendragnya. Simbol yang sesungguhnya tetap di library sedangkan yang di
dalam stage adalah instance dari simbol.
Drawing tool tidak dapat digunakan terhadap instance hal ini disebabkan
karena instance merupakan duplikat dari symbol. Tetapi kita masih bisa merubah
instance misal memutar, memperbesar, atau memperkecil. Jika instance kita rubah
maka hal itu tidak berpengaruh terhadap simbol sesungguhnya. Inilah keuntungan
utama dari simbol dan instance. Kita bisa menggunakan banyak instance
berdasarkan satu simbol.
Sebagai contoh, kita membutuhkan empat lingkaran merah. Maka kita
hanya perlu memindahkan instance dari simbol “ball” ke dalam stage sebanyak
empat kali. Kita bisa membuat perubahan yang berbeda dari setiap instance
tersebut.
Team RPL – smkn1 dps
Empat instance yang sudah diedit dan berasal dari satu symbol
MEMANIPULASI SYMBOL
• memperbaiki symbol
• penggunaan panel effect
Seperti telah dijelaskan pada bab sebelumnya, untuk memanipulasi
symbol tidak bisa dilakukan dengan cara cara yang biasa, misal dengan
menggunakan drawing tool yang langsung dioperasikan pada stage. Cara
memanipulasi symbol harus menggunakan cara yang berbeda dengan jika kita
memanipulasi obyek. Berikut ini cara cara bagaimana memanipulasi symbol.
Memperbaiki Simbol
Mengedit symbol bisa dilakukan melalui stage symbol. Stage symbol
adalah suatu ruangan khusus yang digunakan untuk mengedit obyek dari symbol
tersebut. Stage symbol ini tidak mempunyai hubungan dengan stage utama.
Dalam contoh sehari hari stage symbol bisa disebut sebagai bengkel.
Jika kita ingin memperbaiki symbol maka symbol tersebut kita masukkan dalam
Team RPL – smkn1 dps
bengkel yang terpisah dengan dunia luar. Jika sudah selesai maka symbol akan
keluar dari bengkel tersebut dan akan dikembalikan ke halaman utama.
Untuk merubah simbol, klik kanan simbol tersebut
kemudian pilih Edit. Maka stage utama akan berubah menjadi
stage simbol yang ditandai dengan tanda silang ditengahnya.
Didalam stage symbol ini yang ada hanya symbol
yang ingin kita edit dan tidak bercampur dengan symbol symbol yang lain.
Didalam stage symbol tersebut kita bisa melakukan apa saja terhadap obyek, baik
diubah warnanya, bentuknya atau ditambahkan obyek yang lain, jadi semua
operasi dari toolbox bisa dilakukan terhadap obyek tersebut.
Jika kita sudah memperbaiki symbol tersebut maka kita kembali ke
stage utama dengan menekan tombol scene 1 seperti gambar diatas dan obyek
yang ada di library akan berubah sesuai dengan perubahan yang baru dibuat.
Stage utama stage symbol
Perubahan yang kita lakukan terhadap symbol akan mempengaruhi semua
instance yang berasal dari symbol yang sama. Sebagai contoh symbol lingkaran,
kita menambahkan lingkaran baru dengan warna lain ditengahnya maka semua
instance akan ikut berubah.
Obyek sebelum diubah Obyek sesudah diubah
Team RPL – smkn1 dps
instance sebelum obyek diubah instance setelah obyek diubah
Menggunakan panel effect
Selain dari cara diatas ada lagi cara lain untuk memanipulasi symbol yaitu
dengan menggunakan panel effect. Panel effect digunakan untuk mengatur
pewarnaan dan transparansi pada obyek tetapi tidak bisa digunakan untuk
mengubah bentuk obyek. Perbedaan mengedit menggunakan panel effect
dibandingkan dengan cara sebelumnya
adalah kita bisa memanipulasi tiap tiap
instance, dan instance tersebut tidak
berpengaruh terhadap instance yang lain
walaupun berasal dari satu obyek. Jadi
instance yang satu bisa berbeda dengan yang
lainnya.
Untuk mengedit instance, klik salah satu instance yang diinginkan
kemudian munculkan panel effect dengan memilih menu window>panel>effect
Dibagian panel effect terdapat empat pilihan yaitu brightness, Tint, Alpha dan
Advanced.
Brightness
Brighness digunakan untuk mengatur
kecerahan warna dari instance.
Setting disediakan antara –100
Team RPL – smkn1 dps
hingga 100. semakin kecil setting yang digunakan maka gambar akan semakin
gelap dan begitu juga sebaliknya.
Tint
Tint digunakan untuk menambahkan suatu
warna kedalam warna asal dari instance simbol.
Kita pilih warna yang ingin ditambahkan
kemudian pada Tint Amount tentukan kadar
warna yang ingin ditambahkan dalam persen.
Warna yang ingin ditambahkan kadar
alpha
Alpha digunakan untuk memberikan efek tranparan
terhadap instance. Kita bisa mengatur besarnya efek
tranparan dalam persen dari 0 hingga 100%. Jika dipilih
0% maka obyek akan nampak menghilang
effect alpha 50%
Advanced
Advanced adalah merupakan gabungan dari tint
dan alpha. Untuk tint pemilihan warnanya
dengan menentukan kadar dari warna pokok
yaitu merah hijau dan biru.
Setiap instance dari symbol yang sama bisa kita
berikan effect yang berbeda beda sesuai dengan keperluan.
Team RPL – smkn1 dps
contoh instance yang diberi effect yang berbeda beda dan berasal dari satu symbol
KONSEP TENTANG ANIMASI
• Dasar animasi
• Penggunaan timeline
• Penggunaan layer control
Animasi merupakan satu fungsi utama dari Flash. Animasi, dan cara
pembuatannya tidak sesederhana menggerakkan sesuatu dari titik A ke titik B.
Ada banyak faktor yang harus dipertimbangkan untuk membuat animasi yang
efektif dan efisien.
Dasar Animasi
Animasi pada awalnya berupa kumpulan atau potongan gambar yang
ditampilkan bergantian secara cepat. Karena keterbatasan mata kita, kita tidak bisa
membedakan setiap gambar yang satu dengan yang lainya dan yang tampak dalam
mata kita adalah sebuah gerakan yang disebut animasi.
Team RPL – smkn1 dps
Dalam film, setiap bagian gambar itu disebut frame. Frame frame tersebut
berganti dengan kecepatan tertentu sehingga tidak nampak oleh mata kita.
Kecepatan banyaknya frame yang ditampilkan dihitung dalam satuan frame per
detik(fps = frame per second). Film yang kita saksikan di bioskop menampilkan
24 frame per detik. Videotape dan televisi menampilkan 30 frame per detik.
Semakin tinggi kecepatan dari frame maka gambar yang dihasilkan akan semakin
halus tetapi kerugiannya adalah memerlukan jumlah frame yang lebih banyak
dengan waktu yang sama.
Misalnya film kecepatan 50 frame perdetik lebih baik daripada 25 frame
perdetik, tetapi dengan waktu yang sama misal dua jam, untuk kecepatan 50 frame
perdetik membutuhkan lebih banyak frame daripada yang kecepatannya 25 frame
perdetik dan itu berarti sebuah pemborosan. Dengan menggunakan flash kita bisa
menentukan kecepatan frame dari animasi yang kita buat sehigga bisa optimal
pada saat dimasukkan dalam web.
Penggunaan Timeline
Didalam flash frame-frame dari animasi diletakkan dalam bagian time
line. Ditempat tersebut kita dapat mengatur frame yang digunakan untuk animasi.
Timeline-
header
playhead
timeline
didalam time line terdapat timeline header yaitu bagian yang terdapat angka 1, 5,
10, dst itu berguna untuk menunjukkan letak frame. Jadi jika kita membuat sebuah
Team RPL – smkn1 dps
animasi maka gerakan dari gambar akan dimulai dari frame ke satu, dilanjutkan
kedua dan seterusnya hingga animasi berakhir.
Playhead yang selanjutnya kita sebut sebagai penunjuk frame yaitu garis
vertikal berwarna merah berguna untuk menunjukkan posisi dari frame yang
ditampilkan pada stage. Playhead dapat dipindah ke frame yang kita inginkan
cukup dengan mengklik frame tersebut.
Misalnya terdapat animasi bola yang bergerak dari kiri ke kanan
Penggunaan layer control
Didalam flash juga terdapat layer yang fungsinya sama dengan didalam
photoshop yaitu untuk memisahkan beberapa gambar atau animasi. Konsep
tentang Layer sudah dibahas secara mendalam didalam pelajaran photoshop
sehingga tidak dibahas lagi pada bab ini.
New Layer
New layer digunakan untuk menambah layer di dalam timeline
playhead diletakkan pada frame 1 maka stage utama akan menampilkan gambar yang ada dalam frame 1
Playhead diletakkan pada frame 10 maka stage utama menampilkan gambar yang ada dalam frame 10
Team RPL – smkn1 dps
Guide layer
Ada dua tipe dari layer yaitu mask dan guide. Keduanya digunakan untuk animasi
yang khusus dan akan dijelaskan pada bab selanjutnya.
Delete layer
Delete layer digunakan untuk menghapus layer.
Hide/Show layer
fungsinya sama dengan pada photoshop
yaitu untuk menampilkan atau
menyembunyikan suatu layer
Lock/ Unlock layer
Kita bisa melindungi layer dengan
cara menguncinya sehingga tidak
bisa kita ubah ketika kita sedang
bekerja dengan layer lainnya.
Outline layer
Outline layer digunakan untuk
menyembunyikan obyek dan hanya
menampilkan tepinya saja.
Seperti yang ada dalam photoshop, layer
yang saat itu sedang aktif ditunjukkan dengan
gambar pensil. Untuk memindah letak layer aktif
tinggal mengklik layer lain yang diinginkan
sehingga gambar pensil pindah ke layer baru
tersebut.
Team RPL – smkn1 dps
Setiap layer mempunyai timeline sendiri yang layer3 sedang aktif
letaknya sejajar dengan masing masing layer dan pada
saat animasi dijalankan maka timeline dari tiap tiap layer tersebut akan berjalan
secara bersamaan mulai dari frame pertama hingga animasi berakhir.
KEYFRAME DAN FUNGSINYA
• pengertian keyframe
• pengertian in-between frame
• animasi antara dua keyframe
Pengertian key frame
Pada film animasi, memainkan 24 frame perdetik dengan durasi waktu 90
menit, membutuhkan 129600 frame yang harus dibuat. Sebelum ada bantuan
komputer semua frame tersebut harus dibuat secara manual satu persatu sehingga
membutuhkan waktu yang sangat lama.
Dalam flash kita tidak perlu membuat frame satu persatu persatu karena
dibantu oleh adanya keyframe. Key Frame adalah frame yang berperan sebagai
titik referensi, yang biasanya menggambarkan momen waktu utama. Sebagai
contoh jika ingin membuat animasi lari jarak pendek 100 meter, maka kita bisa
memiliki key frame berikut
Key frame 1 : pelari berdiri
Key frame 2 : pelari menempatkan posisi kakinya
Key frame 3 : pelari mengambil posisi siap
Key frame 4 : pelari melawati garis star
Jika dari awal adegan sampai akhir dibutuhkan 15 detik (dengan kecapatan 24 fps)
maka kita membutuhkan 360 frame. Dari 360 frame tersebut, empat diantaranya
kita jadikan keyframe yaitu sebagai titik referensi, sedangkan sisanya disebut
sebagai in-between frame.
Team RPL – smkn1 dps
Tanda bahwa suatu frame sudah menjadi keyframe adalah adanya bulatan
kecil berwarna hitam pada frame tersebut,
keyframe
agar suatu frame bisa diedit, misalnya dimasukkan gambar, diberi warna, tulisan
dll maka frame tersebut harus diberi keyframe. Jadi keyframe merupakan syarat
mutlak pada suatu frame agar frame tersebut bisa diisi atau diedit. Jika frame
tersebut tidak mempunyai keyframe maka tidak bisa dilakukan pekerjaan apapun
terhadapnya.
contoh:
kita letakkan penunjuk frame
pada posisi frame 1 sehingga
pada stage menunjukkan
gambar yang ada dalam frame1. Karena pada frame 1 terdapat keyframe maka
kita bisa memanipulasi gambar tersebut.
kemudian kita letakkan playhead pada posisi frame 10, maka kita tidak bisa
memanipulasi gambar yang ada
dalam frame 10 karena dalam
frame 10 tersebut tidak terdapat
keyframe.
In-Between Frame
In-Between Frame berfungsi untuk memainkan film diantara Key Frame.
In-Between frame ini akan menjembatani keadaan transisi dari satu Key Frame ke
Key Frame yang lain. Misal key frame yang pertama adalah gambar bola
disebelah kiri, dan keyframe yang kedua gambar bola disebelah kanan, maka in-
betweeen framenya adalah gambar perubahan letak bola secara perlahan dari kiri
ke kanan.
Team RPL – smkn1 dps
Seperti telah dijelaskan sebelumnya jika suatu keyframe berada dalam
keadaan in-between frame maka frame tersebut tidak bisa dimanipulasi.
in-between frame
Untuk memasukkan keyframe kepada suatu frame pilih frame yang
diinginkan kemudian klik kanan. Pada
menu tersebut ada dua pilihan yang bisa
digunakan untuk memasukkan keyframe
ke dalam frame yaitu insert keyframe
dan insert blank keyframe
insert keyframe
Jika kita memilih menu insert keyframe itu artinya adalah kita
memasukkan keyframe ke dalam frame tersebut sekaligus mengkopi gambar yang
ada dalam keyframe sebelumnya
Contoh:
pada keyframe 10 terdapatgambar bola
kemudian kita insert keyframe pada frame 20,
maka gambar yang ada di frame 10 akan terkopi
pada frame 20
Team RPL – smkn1 dps
insert blank keyframe
Jika kita memilih blank keyframe itu berarti kita mengisikan keyframe
pada frame tersebut dan isinya masih kosong, belum terdapat gambar apapun.
Animasi diantara dua keyframe
Untuk membuat sebuah animasi minimal kita harus menggunakan dua
buah keyframe. Keyframe yang pertama diberi suatu gambar, dan keframe yang
kedua diberikan gambar yang berbeda, misalnya berbeda letak atau warna.
Kemudian kita gerakkan diantara keduanya sehingga terjadi perubahan yang
perlahan lahan dari keyframe yang pertama hingga keyframe yang kedua, itulah
yang disebut sebagai animasi.
Panel yang digunakan untuk
mengatur gerakan antara dua buah keyframe
adalah panel frame. Untuk memunculkan
panel tersebut pilih menu
window>panel>frame sehingga muncul
panel seperti disamping:
Sekarang akan kita pelajari bagaimana mengaplikasikannya melalui praktek.
1. Buat file baru dan buat sebuah obyek sederhana didalamnya,
misalnya sebuah lingkaran
2. Blok gambar bola tersebut dengan menggunakan arrow tool yang ada
pada toolbar bagian kanan atas. Kemudian pilih menu insert>convert to
symbol dan isikan option grafik atau movie clip.
Seperti telah dijelaskan pada bab sebelumnya bahwa obyek yang akan kita
gunakan untuk animasi sebaiknya diubah terlebih dahulu menjadi symbol.
3. Obyek yang baru saja kita buat berada pada frame 1, sekarang kita akan
membuat sebuah keyframe di frame 20 dan mengkopi gambar yang ada di
frame 1 dengan cara klik kanan pada frame 20 dan pilih menu insert keyframe.
Team RPL – smkn1 dps
keyframe 1 keyframe 2
4. sekarang kita sudah mempunyai dua buah keyframe dengan dua gambar yang
sama. Agar membentuk suatu animasi maka gambar yang ada pada keyframe
pertama harus berbeda dengan gambar yang ada pada keyframe kedua karena
konsep dari animasi adalah adanya suatu perubahan. Oleh karena itu agar
terdapat perbedaan maka geser gambar yang ada pada frame 20 ke arah kanan
dengan jarak secukupnya.
5. Karena gambar yang dipindah adalah gambar yang ada pada frame 20 maka
gambar yang ada pada frame 1 masih tetap ditempatnya semula sehingga
gambar pada keyframe 1 dan keyframe 2 terdapat perbedaan letak.
gambar pada keyframe 1 gambar pada keyframe 2
6. Selanjutnya letakkan penunjuk frame pada frame1 dan kita gerakkan
lingkaran tersebut dari kiri ke kanan dengan menggunakan panel frame.
Dalam panel frame pilih menu motion.
7. setelah dipilih menu motion maka in-between
frame akan berubah menjadi seperti disamping,
itu artinya sudah terdapat gerakan diantara kedua keyframe.
Untuk menjalankan hasilnya, pilih menu control>test movie jika langkah langkah
yang disebutkan diatas sudah dilakukan dengan benar maka akan muncul animasi
lingkaran yang bergerak dari kiri ke kanan.
Team RPL – smkn1 dps
MEMBUAT ANIMASI SEDERHANA
• mengatur movie properties
• penggunaan panel frame
• Penggunaan layer control
Contoh membuat animasi yang ada pada bab keyframe dan fungsinya
adalah masih merupakan pengenalan, pada bab ini akan kita bahas lebih mendetail
bagaimana konsep membuat animasi.
Mengatur movie properties
Sebelum membuat sebuah animasi kita harus melakukan setting dari
animasi yang akan kita buat. Untuk itu pilih menu modify>movie sehingga
muncul kotak dialog movie properties.
Frame rates: digunakan untuk mengatur kecepatan dari animasi seperti yang
telah dijelaskan pada bab sebelumnya. Didalam animasi flash
kecepatan yang optimal adalah 12 fps. kita bisa menambah atau
mengurangi kecepatan file tersebut. Jika semakin kecil
kecepatannya maka ukuran file lebih kecil tetapi gambar akan
tampak patah patah. Dan begitu juga sebaliknya.
Dimension: untuk mengatur ukuran dari stage, dan juga ukuran animasi pada
saat dimasukkan dalam web. Satuannya bisa diubah pada ruler
units.
Team RPL – smkn1 dps
Backgroud color: untuk menentukan warna dari background
Sebaiknya anda harus melakukan penyettingan movie properties ini setiap akan
membuat sebuah animasi.
Penggunaan panel frame
Seperti contoh yang ada pada bab sebelumnya, panel frame ini bisa
digunakan untuk mengatur animasi dan pada bab ini akan kita bahas secara detail
tentang kegunaanya.
Pada option tweening terdapat 2 pilihan
animasi yaitu motion dan shape. Syarat dan
fungsi kedua jenis animasi tersebut sangat
berbeda sehingga harus disesuaikan dengan
pemakaian.
Motion
Motion digunakan untuk menggerakkan diantara dua buah
keyframe dengan syarat obyek yang ada didalam kedua keyframe
tersebut sudah berupa symbol. Jika obyek tersebut tidak berupa
symbol maka operasi ini tidak bisa dilakukan.
Animasi tweening motion digunakan untuk membuat
animasi yang berupa perubahan letak, warna, ukuran, dll. Animasi tweening
motion tidak bisa melakukan animasi yang berupa perubahan bentuk, misal dari
lingkaran menjadi kotak.
Dua buah keyframe yang akan diberi tweening motion harus berisi obyek
yang hanya berasal dari satu symbol.
Contoh:
Obyek yang ada pada
keyframe 1 dan pada
keyframe 20 tidak boleh berasal dari symbol yang berlainan.
Obyek yang berupa symbol
Team RPL – smkn1 dps
Misal kita membuat sebuah lingkaran pada frame 1 dan diubah ke symbol,
kemudian kita insert blank key frame pada frame 20 dan kita gambar lingkaran
yang sama seperti gambar frame 1 lalu diubah ke symbol. Hal ini tidak bisa
dilakukan operasi tweening motion karena kedua gambar walaupun bentuknya
sama tetapi berasal dari symbol yang berlainan.
Jadi langkah yang benar tidak membuat gambar yang baru tetapi
mengkopi gambar yang ada pada frame 1 kedalam frame 20 dengan memilih
menu insert key frame. Kemudian obyek yang ada pada frame 20 kita manipulasi
warna, letak, dan ukurannya dengan menggunakan panel effect sehingga terdapat
perbedaan antara gambar yang ada pada keyframe 1 dengan keyframe 20.
Suatu frame yang sudah dikenai oleh tweening motion maka akan muncul
panah yang menghubungkan keyframe pertama dengan yang kedua dan in-
between frame diantara kedua keyframe berwarna ungu.
tanda ini menunjukkan bahwa motion sudah benar
jika kita melakukan kesalahan dalam membuat tweening motion, misalnya
obyek belum diubah menjadi symbol maka kedua frame tidak lagi dihubungkan
dengan anak panah tetapi dihubungkan oleh garis putus putus. Dan jika dicoba
hasilnya tidak akan sesuai dengan yang kita inginkan.
tanda ini menunjukkan bahwa motion salah
Pada saat kita membuat animasi dan muncul tanda salah tersebut maka
yang harus kita lakukan adalah menggunakan tombol undo untuk mengulang
langkah sebelumnya dan memperbaiki kesalahan yang sudah kita buat.
setting yang bisa dilakukan pad tweening
motion adalah:
easing: untuk mengatur percepatan dari gerak
gambar. Terdapat pilihan dari –100 sampai
100. misal kita menggerakkan gambar dari kiri
Team RPL – smkn1 dps
ke kanan. Jika kita memilih easing lebih besar dari 0 maka gerakan gambar akan
mengalami perlambatan, artinya gerakan semakin ke kanan akan semakin lambat.
Begitu juga sebaliknya jika kita memilih easing kurang dari 0 maka gerakan
gambar akan mengalami percepatan.
Rotate: untuk memutar gambar sambil bergerak. Misal kita menggerakkan gambar
dari kiri ke kanan dan memilih rotate maka pada sambil bergerak ke kanan
gambar akan berputar. Option yang bisa kita pilih: CW (putaran searah jarum
jam), CCW (putaran berlawanan jarum jam). Dan disebelahnya dapat kita isikan
jumlah putaran yang diinginkan dalam satu kali bergerak.
Shape
Shape memiliki syarat yang berlawanan dengan tweening motion. Jika
membuat tweening motion gambarnya harus berupa symbol,
sedangkan tweening shape obyek tidak boleh berupa symbol. Jadi
pada saat membuat obyek baru jika ingin diberikan animasi
tweening shape maka obyek tidak perlu diubah menjadi
symbol. Tweening shape bisa melakukan semua yang bisa
dilakukan oleh tweening motion dan ditambah dengan kemampuan untuk
merubah bentuk gambar, misal dari lingkaran menjadi persegi.
Suatu frame yang sudah dikenai oleh tweening shape Maka akan muncul
panah yang menghubungkan keyframe pertama dan kedua, serta in-between frame
diantara keduanya berwarna hijau muda.
tanda ini menunjukkan bahwa motion sudah benar
Jika kita melakukan kesalahan dalam membuat tweening shape, misalnya obyek
diubah menjadi symbol maka kedua frame tidak lagi dihubungkan dengan anak
panah tetapi dihubungkan oleh garis putus putus. Dan jika dicoba hasilnya tidak
akan sesuai dengan yang kita inginkan.
Obyek yang belum menjadi symbol
Team RPL – smkn1 dps
tanda ini menunjukkan bahwa motion salah
Kesalahan menggunakan tweening shape umumnya adalah obyek yang digunakan
untuk animasi adalah berupa symbol. Untuk mengubah obyek yang menjadi
symbol dikembalikan menjadi obyek biasa, pilih menu modify>break apart.
Perlu diperhatikan bahwa sebelum melakukan kedua operasi animasi
diatas, penunjuk frame atau playhead harus diletakkan pada frame yang pertama,
karena jika tidak maka animasi tidak akan berjalan sesuai dengan yang kita
inginkan.
CONTOH MEMBUAT ANIMASI SEDERHANA
• gambar berubah bentuk
• tulisan berubah menjadi tulisan lain
• gambar menghilang
• tulisan berputar
Gambar berubah bentuk
Contoh ini adalah contoh yang paling mudah yaitu dengan menggunakan
tweening shape
1. Buat file baru dan buat sebuah obyek didalamnya, misal
lingkaran dengan warna terserah. Untuk kali ini karena
menggunakan tweening shape maka obyek tidak perlu diubah
menjadi symbol. Gambar yang kita buat tersebut berada pada frame 1
2. Insert blank keyframe pada frame akhir animasi, misal 20 dengan mengklik
kanan frame tersebut dan memilih menu insert blank keyframe.
Team RPL – smkn1 dps
3. Buat pada frame 20 tersebut sebuah gambar yang berbeda
bentuk maupun warnanya dengan gambar pada frame 1, misal
persegi empat
4. Sekarang kita sudah mempunyai dua buah keyframe dan didalamnya terdapat
dua obyek yang berbeda, selanjutnya akan kita gerakkan diantara keduanya
dengan menggunakan tweening shape.letakkan penunjuk frame pada frame 1
kemudian pilih menu window>panel>frame dan pilih option tweening shape.
Tulisan berubah menjadi tulisan lain
Untuk membuat tulisan yang berubah menjadi tulisan yang lain caranya
hampir sama dengan contoh diatas tetapi dengan menambahkan fungsi break
apart.
1. Buat file baru dan buat tulisan didalamnya. Blok tulisan tersebut kemudian
pilih menu modify>break apart
tulisan yang telah di break apart
2. Insert blank keyframe di frame 20 dan buat tulisan yang lain. Kemudian pilih
menu modify>break apart. Sebaiknya tulisan yang dibuat pada frame 20
mempunyai lebar dan tinggi yang tidak berbeda jauh dengan tulisan pada
frame 1.
3. Letakkan penunjuk frame pada frame 1 dan kita perintahkan tweening shape.
Team RPL – smkn1 dps
proses perubahan tulisan secara perlahan
Gambar tampak menghilang
Contoh berikut ini adalah membuat gambar yang menghilang secara perlahan
lahan dengan menggunakan fasilitas alpha yang ada dalam panel effect.
1. Buat file baru kemudian dan sebuah obyek didalamnya, misal
lingkaran
2. Ubah obyek tersebut menjadi symbol dengan cara memblok obyek dan pilih
menu insert>convert to symbol. Pilih option grafik atau movieclip
3. Kopi gambar yang ada pada frame 1 ke dalam frame 20 dengan cara klik
kanan frame 20 dan pilih menu insert keyframe.
4. Sekarang gambar yang ada pada frame
20 kita hilangkan dengan menggunakan
effect alpha. Klik terlebih dahulu
obyeknya kemudian pilih menu
window>panel>effect. Pada panel
effect tersebut pilih option alpha dan isikan setting transparansinya menjadi
0% sehingga gambar menjadi menghilang,
5. kembalikan penunjuk frame ke frame 1 dan kita gerakkan gambar dengan
menggunakan tweening motion pada panel frame.
Team RPL – smkn1 dps
Tulisan berputar
Kita akan membuat tulisan yang tampak berputar dengan sumbu garis vertikal
dengan menggunakan fungsi scale.
1. buat file baru dan buat sebuah tulisan didalamnya.
2. insert key frame pada frame dua puluh
3. kurangi lebar dari tulisan yang ada pada frame 20 sehingga hampir menyatu
membentuk sebuah garis dengan menggunakan scale. Caranya klik
kanan tulisan tersebut dan pilih menu scale. Usahakan tulisan yang
diperkecil tersebut letaknya ditengah dari tulisan sebelumnya.
4. kembali keframe 1 dan berikan tweening motion
5. selanjutnya kita buat tulisan kembali membesar dengan bentuk yang terbalik.
Insert keyframe pada frame 21, sehingga gambar yang ada pada frame 20
terkopi ke frame 21
6. insert keyframe lagi pada frame 40.
7. sekarang kita ubah tulisan yang ada pada frame 40. klik kanan tulisan dan
pilih menu scale.
8. geser sisi sebelah kiri ke arah kanan, dan sisi sebelah kanan ke arah kiri
sehingga menghasilkan tulisan yang terbalik.
Geser ke kiri
Team RPL – smkn1 dps
geser ke kanan
hasilnya
usahakan lebar dari tulisan yang terbalik tersebut sama dengan tulisan yang
dibuat pertama kali dan terletak pada tempat yang sama
9. kembali ke frame 21 dan gerakkan dengan menggunakan tweening motion
10. animasi diatas sudah bisa dicoba, tetapi masih belum sempurna. Tulisan
berputar hanya 1800 sehingga masih perlu dilanjutkan ke frame berikutnya
agar tulisan tampak berputar 3600 penuh dengan cara yang hampir sama
seperti contoh diatas.
ANIMASI FRAME BY FRAME
• konsep animasi frame by frame
• penggunaan onion skinning
Konsep animasi frame by frame
Jika kita bicara tentang dunia nyata, maka setiap gerakan tergantung dengan
lingkungan. Contohnya pelari tidak akan berlari dengan kecapatan konstan. Untuk
membuat animasi yang efektif kita harus memperhatikan aspek nyata tersebut.
Kita bisa membuat animasi yang bergerak secara konstan namun hal itu tidak
akan menghasilkan gambar yang menunjukkan keadaan sebenarnya. Penggunaan
animasi sederhana seperti yang telah diajarkan pada bab sebelumnya tidak bisa
digunakan untuk membuat animasi yang mempunyai gerakan alamiah.
Untuk mengatasi hal tersebut maka dapat kita gunakan animasi frame by
frame, karena dengan animasi tersebut kita bisa membuat gerakan sesuai dengan
keinginan kita.
Team RPL – smkn1 dps
Kerugian dalam pembuatan animasi frame by frame adalah kita harus
mengisikan gambar satu persatu pada tiap tiap frame sehingga membutuhkan
waktu yang lama. Untuk itu dalam membuat sebuah animasi, tidak perlu
menggunakan animasi frame by frame untuk keseluruhan animasi tetapi hanya
bagian bagian yang diperlukan saja, sedangkan bagian yang lainnya dapat kita
gunakan tweening motion atau shape. Jadi dalam keseluruhan sebuah animasi
merupakan gabungan dari animasi frame by frame, tweening motion, dan
tweening shape.
Tidak seperti animasi tweening, animasi frame demi frame meletakkan satu
key frame pada setiap framenya dan tidak menggunakan in-between frame. Untuk
membuatnya kita harus memasukkan satu persatu keyframe pada setiap frame.
tiap tiap frame terdapat keyframe
kita bisa memasukkan keyframe secara berurutan dari frame yang pertama,
kedua, dan seterusnya. Caranya seperti yang telah dijelaskan sebelumnya yaitu
dengan mengklik kanan dan memilih menu insert keyframe, atau insert blank key
frame sesuai dengan keperluan.
Sekarang kita akan belajar membuat animasi frame by frame melalui
sebuah contoh sederhana yaitu animasi sebuah bola yang memantul pada lantai.
kita buat layer pertama berisi
instance dari simbol yang bernama
Floor. Kita perlu meletakkan lantai
dimana bola kita akan memantul.
Lantai kita tidak akan bergerak
sehingga kita hanya perlu
menyimpan informasi tentang
instance Floor dalam beberapa
frame, misal 20 frame. Untuk
Team RPL – smkn1 dps
melakukannya buat sebuah gambar lantai pada frame 1 dan kita kopi gambar yang
ada pada frame 1 tersebut ke dalam frame 2 hingga 20. Caranya dengan mengklik
kanan frame 10 dan pilih menu insert frame.
Perbedaan antara insert frame dengan insert key frame adalah dengan
insert frame kita hanya mengkopi gambar yang ada pada keyframe kedalam frame
berikutnya sesuai dengan jumlah yang kita inginkan dan diakhir dari frame
tersebut kita tidak
membuat sebuah
keyframe baru. Dengan
menggunakan insert frame maka keyframe hanya ada pada frame 1, sehingga jika
kita mengedit gambar yang ada pada frame 1 maka gambar yang ada pada frame
lainnya juga ikut berubah.
Kita sekarang memerlukan layer baru untuk membuat ball dan
menganimasikannya. Kita buat layer baru kemudian kita ubah namanya menjadi
“ball”. Dan secara otomatis layer kedua
tersebut sudah memiliki 20 frame
namun dengan key frame yang masih
kosong karena menduplikasi layer
sebelumnya.
Kita perlu membuat gambar bola ke
dalam stage untuk mengisi key frame
dari layer “ball” pada frame 1.
Selanjutnya insert key frame pada frame
2 sehingga mengkopi gambar yang ada
pada frame 1 kedalam frame 2. kita
geser gambar bola yang ada pada frame
2 tersebut sedikit ke bawah.
Team RPL – smkn1 dps
Insert key frame dilanjutkan terus hingga seluruh frame terisi semua dan kita
mengkopi gambar bola kedalam tiap tiap frame dan kita gerakkan bola tersebut
satu persatu dan kita buat agar bola tampak memantul.
Menggunakan Onion Skinning
Dalam pembuatan
animasi frame by frame kita bisa
menggunakan fasilitas onion
skinning. Dengan onion skinning
kita bisa melihat keadaan dari
key frame sebelumnya atau sesudahnya dari satu frame tertentu. Untuk
mengaktifkan fungsi onion skinning, klik salah satu tombol onion skinning yaitu
Onion skinning button atau Onion skinning outline button yang terletak
pada bagian bawah time line. Perbedaan antara onion skinning dan onion skinning
outline adalah pada onion skinning outline keadaan key frame sebelumnya
muncul dalam bentuk garis luar (outline).
Kita juga bisa mengatur jangkauan frame yang akan ditampilkan dalam
onion skinning dengan menggeser pengatur tanda dari onion skinning.
Atur sehingga onion skinning mencakup 20 frame yang kita
buat.
Team RPL – smkn1 dps
Keuntungan dari animasi frame by
frame ini dibandingkan dengan
tweening adalah kita bisa mengedit
gambar yang ada dalam tiap tiap
frame sesuai dengan keinginan kita
sehingga kita lebih bebas dalam berkreasi.
Contoh diatas adalah contoh yang paling sederhana dalam pembuatan
animasi frame by frame. Sebenarnya pembuatan animasi tersebut tidak
sesederhana seperti yang dicontohkan karena umumnya gerakan gerakan yang
digunakan sangat kompleks contohnya seperti dalam pembuatan film kartun.
PEMBUATAN TOMBOL
• mengubah obyek menjadi tombol
• memanipulasi tombol
Didalam flash diberikan fasilitas yang sangat banyak untuk pembuatan
tombol sehingga kita bisa membuat tombol yang interaktif yang berbeda dengan
tombol tombol yang ada pada umumnya. Tombol bisa kita gunakan untuk
membuat link dari satu halaman ke halaman yang lain atau juga digunakan untuk
untuk fungsi fungsi yang lain yang bisa membuat web kita menjadi lebih
interaktif.
Mengubah obyek menjadi tombol
Agar suatu obyek bisa berubah menjadi tombol dan diberi fasilitas fasilitas
yang berhubungan dengan tombol maka obyek tersebut harus diubah terlebih
Team RPL – smkn1 dps
dahulu menjadi symbol button. Jika hal tersebut tidak dilakukan maka obyek
tersebut tidak akan berfungsi sebagai tombol dan tidak akan bisa dimanipulasi
karena semua fasilitas fasilitas yang diberikan oleh flash akan tertutup.
Untuk mengubah suatu obyek menjadi tombol maka blok terlebih dahulu
obyek yang akan dijadikan tombol lalu pilih menu insert>convert to symbol dan
pilih menu button. Setelah hal tersebut dilakukan maka obyek tersebut sudah
menjadi sebuah symbol button dan obyek tersebut diberi fasilitas segala sesuatu
yang berhubungan dengan tombol. Tanda bahwa obyek tersebut telah dikonversi
ke dalam symbol yaitu muncul garis tepi persegi yang berwarna biru muda.
obyek lingkaran yang telah diubah menjadi symbol button
Memanipulasi tombol
Sekarang akan kita pelajari apa saja yang dapat kita lakukan terhadap
obyek yang telah diubah menjadi symbol button. Tombol yang interaktif biasanya
bisa berubah ubah sesuai dengan kondisi dari mouse. Misal jika mouse berada
diatas tombol maka bentuk atau warna tombol berubah. Kemudian jika tombol
diklik maka warna atau bentuk akan berubah lagi ke yang lainnya.
mouse diluar tombol mouse diatas tombol mouse menekan tombol
Kita bisa membuat hal seperti diatas dengan sangat
mudah terhadap symbol button. Untuk membuatnya klik
kanan tombol yang akan dimanipulasi, kemudian pilih
menu edit
Jika kita sudah memilih option edit maka obyek
tombol yang kita klik tersebut akan masuk ke ruangan
Team RPL – smkn1 dps
tersendiri khusus untuk memanipulasi tombol yang kita pilih tersebut.
didalam edit stage tersebut dibagian timeline
bentuknya berubah menjadi seperti disamping
Ditempat tersebut terdapat empat pilihan frame yaitu up, over, down,hit.
Up : bentuk tombol pada saat mouse berada di luar tombol
Over : bentuk tombol pada saat mouse berada diatas tombol
Down : bentuk tombol pada saat mouse menekan tombol
Hit : untuk menentukan luas area dari tombol
Kita bisa memasukkan bentuk bentuk atau warna yang berbeda beda terhadap
setiap frame diatas.
Khusus untuk frame hit tidak akan muncul dalam hasilnya. Pada saat
mouse berada didaerah tombol maka pointer dari mouse yang sebelumnya
berbentuk panah akan berubah menjadi bentuk tangan. Ini artinya bahwa kita bisa
menekan tombol tersebut dan akan menjalankan perintah tertentu. Luas dan
bentuk dari daerah tombol yaitu pada saat pointer mouse berubah menjadi bentuk
tangan ditentukan oleh bentuk dan luas daerah yang diberikan pada frame hit.
Luas area dari frame hit bisa lebih luas atau lebih sempit dari area dari tombol
tergantung dari kebutuhan. Jika pada frame hit ini tidak diisi maka secara default
ukuran dari area tombol akan sama dengan ukuran tombol itu sendiri.
Agar lebih jelas akan kita lakukan praktek membuat tombol sederhana
dan memanipulasi bagian up, over, down, dan hit. Pertama buat halaman yang
baru dan buat obyek didalamnya, misal lingkaran. Lingkaran tersebut akan kita
gunakan sebagai tombol, untuk itu lingkaran diblok lalu pilih menu
insert>convert to symbol dan pilih kedalam symbol button.
selanjutnya akan kita manipulasi tombol tersebut dengan mengklik
kanan dan pilih menu edit
dibagian time line akan muncul keyframe pada bagian up dan
frame yang lain masih kosong itu artinya adalah obyek yang
kita buat pertama kali sebagai tombol secara default akan
Team RPL – smkn1 dps
menjadi bagian up yaitu keadaan tombol pada saat mouse berada diluar area
tombol. Kita bisa juga mengganti bentuk atau warna tombol pada bagian up.
Selanjutnya akan kita isi bagian over yang
sebelumnya masih kosong. Jika kita ingin menggunakan
obyek sama dengan pada up maka kita isikan keyframe
pada over, caranya dengan mengklik kanan frame over dan pilih menu insert
keyframe. Setelah hal tersebut dilakukan maka akan muncul obyek yang sama
pada frame over.
Jika kita hanya melakukan sampai disini saja maka setelah dicoba tidak
akan tampak perbedaanya karena gambar yang kita buat pada bagian up dan
bagian over sama bentuk dan warnanya sehingga pada saat mouse berada diluar
tombol dan pada saat didalam tombol akan sama dan tidak menunjukkan
perubahan. Untuk itu agar terjadi perbedaan maka kita ubah tombol yang ada
dibagian over. Perubahannya bisa berupa warna atau bentuk.
Langkah yang sama juga kita lakukan pada bagian
down, yaitu bentuk tombol pada saat mouse mengklik pada
tombol. Disini juga bisa kita ubah bentuk atau warna sesuai
dengan keinginan.
Untuk frame hit sebaiknya luas dari area tombol sebaiknya sama atau
hampir sama dengan ukuran tombol pada up, over, down karena jika ukurannya
lebih besar atau lebih kecil maka akan membingungkan pemakai.
Jika sudah selesai memanipulasi tombol maka kita akan kembali ke
halaman utama dengan mengklik tombol scene1
yang berada disebelah kanan atas dari timeline.
Untuk mencoba apakah yang kita buat sudah berhasil atau belum maka
pilih menu control>test movie. Jika langkah yang kita buat sudah benar maka
pada saat mouse diluar tombol dan pada saat didaerah tombol atau pada saat
mengklik tombol akan menunjukkan perbedaan.
Flash juga menyediakan tombol tombol yang sudah jadi dan sudah
memiliki frame up, over, dan down. Untuk menggunakannya pilih menu
window>common library sehingga muncul library yang berisi berbagai macam
pilihan tombol yang bisa digunakan. Untuk mengambil tombol tersebut pilih salah
Team RPL – smkn1 dps
satu tombol, drag gambar tombolnya kearah halaman utama dan letakkan ke
daerah sesuai yang diinginkan.
Tombol tersebut sudah dalam bentuk jadi, jika
kita coba dengan memilih menu control>test movie
maka tombol tersebut akan menunjukkan perubahan
pada saat mouse diluar tombol, diatas tombol, atau
mengklik tombol.
Tombol yang disediakan oleh flash pilihannya
tidak terlalu banyak, dan kebanyakan digunakan
dalam web web yang lain sehingga jika kita juga
menggunakan tombol tersebut maka web kita tidak
akan mempunyai ciri khas tersendiri. Untuk itu
sebaiknya dalam web kita gunakan tombol yang kita buat sendiri dengan
menggunakan ciri khas dan kreativitas sendiri.
PENGGUNAAN GUIDE LAYER
• pengertian guide layer
• cara penggunaan guide layer
• contoh penggunaan guide layer
Pengertian guide layer
Jika kita membuat gerakan obyek dengan menggunakan motion tween
biasa maka gerakan dari obyek akan membentuk gerakan yang mengikuti garis
lurus dari obyek yang pertama menuju obyek yang terakhir. Dengan
menggunakan Guide layer kita bisa membuat gerakan dari obyek mengikuti
lintasan tertentu sesuai dengan yang kita tentukan.
Lintasan yang kita buat harus diletakkan dalam sebuah layer yang
dinamakan dengan guide layer. Layer tersebut khusus digunakan untuk lintasan
dari suatu obyek. Lintasan yang berada didalam guide layer tidak akan muncul
Team RPL – smkn1 dps
pada saat animasi di publish karena guide layer hanya berfungsi sebagai pemandu.
Jika kita meletakkan obyek apapun kedalam guide layer juga tidak akan tampak
pada saat animasi dipublish.
Cara penggunaan guide layer
Guide layer dapat kita munculkan
dengan mengklik tanda yang berada pada
timeline bagian kiri bawah.
Setelah guide layer terbentuk maka bisa dibuat lintasan di layer tersebut
sesuai dengan yang kita inginkan. Lintasan dapat dibuat serumit apapun tapi yang
perlu diingat adalah bahwa lintasan tersebut harus mempunyai pangkal dan ujung
dan jangan sampai pangkal dan ujung lintasan bersatu, karena obyek akan
bergerak menurut lintasan yang berawal dari pangkal hingga ke ujung.
Pangkal ujung
Agar sebuah obyek dapat mengikuti lintasan yang kita buat maka obyek
tersebut harus diubah ke dalam symbol terlebih dahulu yaitu menjadi grafik atau
movie clip. Kemudian kita tentukan panjang atau jumlah frame dari lintasan yang
akan digunakan oleh obyek mengikuti lintasan yang sudah dibuat. Kita buat
keyframe di awal dan akhir frame, obyek yang berada di awal frame kita letakkan
pada pangkal lintasan dan obyek yang berada di akhir frame kita letakkan diujung
frame. Kemudian kita gerakkan kedua obyek tersebut dengan menggunakan
tweening motion.
Team RPL – smkn1 dps
Contoh penggunaan guide layer
Agar lebih jelas maka akan kita coba langkah satu persatu dari awal
hingga akhir dalam pembuatan motion guide ini.
1. buat obyek yang sederhana yang akan kita gerakkan dengan menggunakan
guide layer, misal sebuah lingkaran
2. ubah obyek tersebut menjadi symbol grafik atau motion tween
dengan cara blok obyeknya dan pilih menu insert>convert to
symbol
3. obyek yang kita buat tersebut berada di frame kesatu, kemudian kita tentukan
frame akhir dari animasi. Jumlah frame tergantung dari kebutuhan, biasanya
disesuaikan dengan panjang lintasan dan lama waktu yang dibutuhkan. Dalam
contoh ini kita buat frame akhirnya adalah 30, klik kanan di frame tersebut
dan pilih menu insert keyframe. Maka akan muncul obyek yang sama di frame
ke tiga puluh tersebut.
4. buat guide layer dengan menekan tombol guide layer sehingga muncul
layer yang baru.
5. sekarang kita akan bekerja di guide layer dan
pastikan bahwa aktif layer yaitu tanda yang
berbentuk pena berada di guide layer
aktif layer
6. buat lintasan sesuai dengan kebutuhan di
layer tersebut dan di frame pertama
letak frame dari lintasan
7. setelah lintasan selesai dibuat kita kembali bekerja di layer satu dan pindahkan
aktif layer ke layer satu. Pada layer tersebut dan frame yang pertama kita
Team RPL – smkn1 dps
gerakkan obyek menuju pangkal dari lintasan. Pada saat
menggerakkan pastikan bahwa tombol snap to object yang berada
dibagian option dalam keadaan aktif karena snap to object membantu
agar object lebih mudah menempel pada lintasan.
snap to object
8. letakkan pusat dari obyek tepat berada di pangkal dari lintasan. Jika letaknya
sudah tepat akan muncul lingkaran kecil di pusat obyek. Jika lingkaran kecil
tersebut masih belum tampak berarti letak obyek belum tepat berada di
pangkal lintasan.
9. kemudian kita pindah ke frame yang terakhir yang dalam contoh ini adalah
frame 30 dan ditempat tersebut terdapat keyframe. Sama seperti langkah pada
nomor 8, kita letakkan pusat dari obyek tepat pada ujung lintasan.
10. Selanjutnya kita cek, apakah letak obyek sudah
sesuai dengan yang diharapkan. Untuk itu klik
frame yang pertama, dan obyek harus berada di
Team RPL – smkn1 dps
pangkal tali. Kemudian klik frame yang terakhir dan obyek harus berada di
ujung tali
11. jika letaknya sudah benar maka akan kita gerakkan obyek tersebut mengikuti
lintasan yang sudah dibuat. Sebelum digerakkan, pastikan bahwa penunjuk
frame harus berada di frame yang pertama dan aktif layer berada di layer 1.
Kemudian gunakan panel frame dan pilih tweeningnya motion.
12. setelah dipilih motion maka frame pada layer 1 muncul tanda panah dari frame
satu ke frame
tiga puluh. Itu
berarti sudah ada gerakan dari frame 1 ke frame 30
Jika yang muncul adalah tanda garis putus putus seperti dibawah maka
menunjukkan ada kesalahan dalam langkah yang kita buat dan tidak akan ada
gerakan obyek dari frame 1hingga frame 30. Kita harus mencari dimana letak
kesalahannya dan jika sudah ditemukan dan diperbaiki maka tanda garis putus
putus akan berubah menjadi tanda panah.
13. selanjutnya kita coba hasilnya dengan memilih menu control>test movie.
Jika obyek bergerak mengikuti lintasan yang kita buat berarti kita sudah
berhasil dalam menggunakan guide layer.
Ada kemungkinan bahwa gambar tidak bergerak mengikuti lintasan yang
sudah kita tentukan, berarti ada kesalahan pada langkah langkah yang kita buat
sebelumnya. Umumnya kesalahannya adalah pusat dari obyek tidak tepat berada
pada ujung atau pangkal lintasan. Untuk itu perlu dicek kembali apakah letak
obyek sudah benar atau belum.
Langkah langkah yang baru kita pelajari diatas tidak perlu dihapalkan karena
langkah tersebut hanya sebagian dari penggunaan guide layer. Jika kita sudah
Team RPL – smkn1 dps
memahami konsepnya maka langkah tersebut dapat kita lakukan tanpa harus
menghafalnya.
PENGGUNAAN MASK
• pengertian mask
• cara penggunaan mask
• contoh penggunaan mask
Pengertian mask
Mask yang artinya adalah penutup mempunyai fungsi sesuai dengan
namanya yaitu untuk menutupi suatu layer. Mask dapat diterapkan kepada suatu
layer dan layer yang sudah dikenai mask bisa berfungsi untuk menutupi layer
dibawahnya. Untuk lebih jelasnya perhatikan contoh dibawah ini
1.
tulisan sebelum dikenai mask
2.
3.
4.
setelah dikenai mask
Team RPL – smkn1 dps
contoh tersebut menampilkan suatu lingkaran yang bergerak dari kiri ke kanan.
Tulisan yang muncul hanya yang dilalui oleh lingkaran tersebut.
Cara pembuatan contoh diatas adalah sangat mudah
Pertama anda membuat tulisan yang akan
dikenai mask
Kemudian tambahkan layer baru dan
buat dilayer tersebut animasi
sederhana misal sebuah
lingkaran yang bergerak dari kiri ke
kanan dan gerakan tersebut menutupi tulisan dari awal hingga akhir tulisan.
Selanjutnya layer yang dimiliki oleh animasi lingkaran gunakan sebagai mask dan
gunakan tulisan sebagai link dari mask tersebut. Maka terbentuklah animasi
seperti contoh diatas.
Cara penggunaan mask
Untuk membuat sebuah layer menjadi
mask, klik kanan layer yang diinginkan
kemudian pilih menu mask. Jika sebuah layer
sudah dikenai mask maka akan muncul tanda
pada layer tersebut. Dan layer yang
mempunyai link terhadap layer mask muncul
tanda . Layer yang mempunyai link
terhadap suatu layer mask bisa lebih dari satu.
Jika kita membuat suatu layer menjadi mask maka secara default satu
layer yang berada dibawahnya akan menjadi link dari layer mask tersebut.
Layer mask
Link dari layer mask
Layer lain yang tidak terpengaruh oleh mask
Team RPL – smkn1 dps
Layer yang tertutupi oleh mask adalah layer link dari mask tersebut
sedangkan layer yang lain tetap seperti biasa tidak terpengaruh oleh adanya mask.
Seperti contoh diatas, layer 3 sebagai layer mask, layer 2 sebagai layer link dari
mask, dan layer 8,7,1 tidak terpengaruh oleh mask.
Jumlah dari link bisa ditambah atau dikurangi sesuai dengan kebutuhan.
Caranya untuk merubah suatu layer menjadi link dari mask diatasnya maka pilih
menu modify>layer kemudian beri tanda cek pada type: masked.
Contoh penggunaan mask
Pemahaman dari konsep tentang mask ini akan lebih mendalam jika kita
mencobanya. Untuk itu kita akan mencoba membuat contoh salah satu
penggunaan mask yang sederhana.
1. buat tulisan pada layer 1 yang nantinya
akan ditutupi oleh mask
2. tentukan frame akhir dari animasi, jumlahnya terserah dalam contoh ini kita
buat frame akhirnya adalah 30. kemudian insert key frame dengan mengklik
kanan frame tersebut dan pilih menu insert key frame
3. buat layer yang baru yang letaknya diatas layer yang pertama.
4. buat sebuah animasi sederhana di
layer baru tersebut. Animasinya
berupa lingkaran yang bergerak
dari kiri ke kanan. Akhir frame dari
animasi sebaiknya sama dengan akhir frame dari layer yang pertama yaitu 30.
Cara membuat gerakan dari lingkarann sudah dijelaskan pada bab sebelumnya
5. setelah selesai membuat gerakan lingkaran, klik kanan layer dari lingkaran
dan pilih menu mask sehingga muncul tanda . Secara otomatis layer 1
akan menjadi link dari mask.
6. coba hasilnya dengan memilih menu control>test movie. Hasilnya adalah
lingkaran yang bergerak dari kiri ke kanan, tetapi lingkarannya tidak lagi
berwarna seperti yang kita buat sebelumnya tetapi menjadi transparan dan
memunculkan tulisan pada saat dilalui oleh lingkaran tersebut.
Team RPL – smkn1 dps
7. perhatikan gambar disamping, pada saat kita
memberikan perintah mask pada suatu layer
maka layer mask dan layer link tidak bisa dirubah lagi karena layernya
dikunci. Tandanya muncul gambar kunci disebelah layer mask dan layer link.
Jika kita ingin mengedit gambar yang kita buat pada layer mask atau layer link
maka hilangkan gambar kunci yang ada di tiap layer. Setelah selesai mengedit,
kembalikan gambar kuncinya karena jika kedua layer tersebut tidak dikunci
pada saat dijalankan maka mask tidak akan berfungsi
MEMASUKKAN SUARA DALAM ANIMASI
• library sound
• memasukkan suara dalam animasi
• penggunaan panel sound
• memasukkan sound ke dalam tombol
Inilah salah satu keunggulan dari flash dan tidak bisa dilakukan oleh
program animasi ataupun script yang lain yaitu memasukkan suara dalam animasi.
Suara yang dimasukkan adalah berupa file file yang khusus untuk suara seperti
contohnya mp3, waf, wma, vqf, dll. File file suaran tersebut bisa kita buat sendiri
atau mengambil dari yang sudah ada. Misalnya kita potong dari sebuah lagu.
Yang harus dipertimbangkan adalah ukuran dari file suara tersebut,
umumnya ukuran file dari suara cukup besar. Sebagai contoh lagu dalam bentuk
file mp3 yang lama waktunya 3 menit ukuran filenya adalah 2,7 megabyte. Akan
sangat tidak mungkin jika file tersebut dimasukkan ke dalam sebuah web karena
tidak ada sebuah web yang ukuran satu halamannya mencapai 2,7 megabyte.
Untuk itu kita menggunakan file yang ukurannya relatif kecil seperti contohnya
vqf, wma, dll. Dan suara yang kita masukkan jangan terlalu lama waktunya
karena ukuran file dari suara ditentukan oleh lamanya waktu dari suara tersebut.
Team RPL – smkn1 dps
Web web yang ada saat ini umumnya memasukkan suara yang waktunya pendek,
misalnya mempunyai waktu 5 detik, tetapi diulang secara terus menerus sehingga
dapat melakukan banyak penghematan ukuran file.
Library sound
Flash juga menyediakan berbagai contoh suara yang ukurannya relatif
kecil dan waktunya juga pendek sehingga kita tidak perlu berpikir lagi jika ingin
memakainya. Untuk melihat contoh dari suara yang
diberikan flash pilih menu window>common
library>sound sehingga muncul pilihan pilihan
suara. Untuk mencobanya, klik tanda play yang ada
di ujung kanan atas dari library.
Memasukkan suara ke dalam animasi
Jika kita ingin menggabungkan suara dengan animasi maka kita harus
memasukkan suara tersebut kedalam timeline dan kita siapkan sebuah layer
khusus untuk suara agar tidak rancu dengan layer yang digunakan untuk animasi.
Layer untuk suara
Layer untuk animasi
Cara memasukkannya adalah sebagai berikut:
Team RPL – smkn1 dps
1. tentukan terlebih dahulu diframe dan layer yang mana akan kita letakkan suara
dan insert keyframe ditempat tersebut. Hal ini sangat penting karena akan
menentukan kapan suara akan dimulai pada saat animasi berjalan.
2. drag suara yang ada dalam library sound ke dalam stage yang telah ditentukan
frame dan layernya.
Seperti contoh diatas, suara diletakkan pada layer dua, frame 10. ketika
animasi dijalankan maka gambar bergerak dari frame 1 ke frame 20. pada saat
bergerak dari frame 1 hingga 9 masih belum muncul suara. Suara baru muncul
pada saat animasi memasuki frame ke 10 dan seterusnya. Lamanya suara muncul
tergantung dari lama waktu suara yang dimasukkan serta perulangannya dan tidak
tergantung dari frame. Walaupun animasi sudah berhenti pada frame ke 20 jika
suara belum habis waktunya maka suara akan tetap berlanjut hingga selesai.
Dari contoh diatas dapat diambil kesimpulan bahwa sebelum memasukkan
suara kita harus menentukan terlebih dahulu, pada saat diframe ke berapa suara
akan kita munculkan dan berapa lama suara itu akan muncul.
Team RPL – smkn1 dps
Penggunaan panel sound
Pengaturan segala hal yang berhubungan dengan suara dapat dilakukan
pada panel sound. Berikut ini penjelasan dari
tiap tiap option dalam panel sound.
sound: berisi suara suara yang ada dalam
library kita. Jika kita belum memasukkan
suara dalam library maka bagian ini akan
kosong.
Effect: untuk mengatur efek dari suara yaitu pengaturan keseimbangan kiri dan
kanan dari speaker.
sync: singkatan dari synchronisation digunakan untuk mengatur suara didalam
frame. Ada 4 option yang bisa dipilih:
Event: suara akan mulai pada frame dimana sound tersebut berada. Tetapi lama
dari suara ini tidak tergantung dengan panjang frame. Jika frame
berhenti dan suara belum habis waktunya maka suara tersebut akan terus
melanjutkan hingga selesai.
Stop digunakan untuk menghentikan suara pada frame yang kita inginkan,
walaupun suaranya belum waktunya untuk berhenti.
Start fungsinya hampir sama dengan event, bedanya adalah pada saat
diberikan perintah stop di frame tertentu dan suara diberikan lagi ke
frame selanjutnya pada start suara akan mememulai dari awal lagi,
sedangkan jika menggunakan event maka suara akan melanjutkan suara
yang tidak selesai karena diberikan perintah stop pada frame
sebelumnya.
Stream digunakan untuk memasukkan suara yang bisa dipengaruhi oleh frame.
Jika animasi sudah berada pada frame terakhir dan animasi berhenti
maka suara juga ikut berhenti.
Loop: digunakan untuk menentukan berapa kali suara tersebut diulang. Jika loop
diset 0 maka suara hanya berbunyi sekali.
Team RPL – smkn1 dps
Kita bisa membuat sendiri suara yang kita inginkan dengan menggunakan
software software tertentu tentang atau bisa juga mengambil dari file suara yang
sudah ada, misalnya mengambil sebagian nada dari sebuah lagu. Cara
memasukkan file suara kedalam flash pilih menu file>import dan cari file suara
yang diinginkan, kemudian tekan OK. File yang baru kita import tidak langsung
masuk ke dalam frame tetapi masuk ke dalam library milik kita sendiri. Untuk
melihatnya pilih menu window>library sehingga muncul kotak library dimana
suara yang baru kita masukkan tersebut berada. Cara memasukkan suara sama
seperti diatas yaitu dengan cara mendrag ke dalam stage.
Memasukkan suara dalam tombol
Selain digabungkan dengan animasi, suara juga bisa digabungkan dengan
tombol, sehingga pada saat mouse mendekati tombol atau pada saat mengklik
tombol maka akan muncul suara.
Caranya hampir sama dengan contoh diatas, bedanya adalah untuk
memasukkan suara kita harus masuk dulu ke tempat mengedit symbol button.
Untuk masuk ke tempat ke tempat edit symbol, klik kanan button yang ingin diisi
suara dan pilih menu edit sehingga masuk ke tempat edit symbol. Seperti telah
dijelaskan pada bab sebelumnya, dibagian time line terdapat bagian up, over,
down, hit. Dibagian itulah kita bisa memasukkan suara.
Umumnya suara dimasukkan pada bagian over, dan down. Sedangkan
dibagian hit tidak perlu diisi suara karena tidak ada gunanya dan tidak akan
berfungsi pada saat ditampilkan. Sedangkan pada bagian up sebaiknya tidak diisi
dengan suara, karena jika diisi maka suara akan berbunyi ketika mouse berada
diluar tombol.
Seperti telah dijelaskan sebelumnya sebelum memasukkan suara, buat
sebuah layer baru dan masukkan suara ke dalam layer baru tersebut dan cara yang
sama dapat kita lakukan pada tombol.
suara yang diletakkan pada over
Team RPL – smkn1 dps
suara yang diletakkan pada down
jangan lupa untuk mengisikan keyframe terlebih dahulu pada frame yang akan
diisi suara.
MELETAKKAN ANIMASI KE DALAM WEB
• jenis file dalam flash
• memasukkan animasi ke dalam web
Setelah kita membuat gambar, animasi, atau tombol yang interaktif
sekarang kita akan belajar bagaimana memasukkan obyek obyek yang sudah kita
buat tersebut kedalam sebuah web dan digabungkan dengan script html dan script
yang lainnya sehingga yang lainnya sehingga menjadi sebuah web yang utuh.
Ada fasilitas dari flash yang langsung membuatkan kode htmlnya dan
menyertakan animasi yang kita buat kedalamnya sehingga kita bisa langsung
melihatnya didalam browser. Tapi kode html yang dibuatkan oleh flash isi
webnya hanya animasi itu sendiri. Oleh karena itu kode html tersebut masih perlu
digabungkan dengan kode html yang lain dengan menggunakan web editor
misalnya frontpage, macromedia dreamweaver, dll sehingga menjadi sebuah web
yang lengkap.
Jenis file dalam flash
Sebelum belajar bagaimana mempublish suatu animasi kedalam web,
terlebih dahulu akan kita pelajari jenis jenis file yang ada dalam flash. Untuk itu
buat sebuah animasi yang sederhana kemudian simpan dalam sebuah folder baru
Team RPL – smkn1 dps
yang masih kosong dan beri nama terserah, misalnya coba. Kemudian pilih menu
file>publish untuk mengekspor animasi yang kita buat kedalam web.
Selanjutnya buka kembali folder kosong yan telah kita buat dimana file
animasi tersebut disimpan, maka akan kita temui tiga buah file
dengan nama yang sama dan ekstensi yang berbeda. File file
tersebut adalah coba.swf, coba.fla, dan coba.html akan kita bahas
satu persatu kegunaan dari file tersebut.
Coba.fla adalah file yang berisi semua perkerjaan kita. Jika kita membuat
sebuah animasi yang mempunyai beberapa layer, menggunakan
beberapa obyek, berapa frame yang digunakan dll semuanya masih
tersimpan dalam file ini. Jika kita membuat animasi tetapi
pembuatannya belum selesai dan akan kita lanjutkan di hari
kemudian maka dapat simpan pada file tersebut dan dapat kita buka
pada lain waktu. File ini tidak kita perlukan jika animasi sudah
dimasukkan ke dalam web tetapi sebaiknya tetap disimpan karena
file ini diperlukan jika suatu saat ingin melakukan perubahan dari
animasi yang sudah dibuat. Jika kita klik file ini maka kita akan
membuka program flash dan pekerjaan animasi kita sudah ada
didalamnya.
Coba.swf adalah file animasi dalam bentuk yang sudah jadi sehingga kita tidak
bisa lagi mengeditnya. File ini tidak lagi menyimpan data jumlah
layer, obyek yang digunakan, dll karena sudah menjadi sebuah
tampilan animasi yang hanya bisa dilihat. File inilah yang perlu
diikut sertakan dalam web yang berisi animasi. Jika kita buka file ini
maka akan muncul sebuah program yang dinamakan flash
standalone player yaitu sebuah program yang bisa menampilkan
animasi flash. Program ini akan terinstal dengan sendirinya pada saat
kita menginstal program flash.
Coba.html adalah file dari html yang sudah memasukkan animasi flash tersebut
didalamnya. Jika kita klik file ini maka akan masuk ke dalam
browser dan menampilkan animasi yang kita buat. Jika kita lihat
Team RPL – smkn1 dps
source html nya maka dapat kita lihat sintag yang memasukkan file
coba.swf yaitu file animasi yang sudah jadi ke dalam web. Sintag
tersebut tidak perlu dihapalkan. Yang kita perlukan hanyalah
mengkopi dan menggabungkan dengan sintag html yang lain
sehingga menjadi sebuah web yang utuh.
Jadi yang diperlukan jika animasi kita gabungkan dengan web adalah file
animasi dengan ekstensi swf dan sintag yang ada dalam ekstensi html.
Memasukkan animasi ke dalam web
Sintag html yang ada dalam coba.html adalah seperti berikut:
<HTML>
<HEAD>
<TITLE>coba</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<!-- URL's used in the movie-->
<!-- text used in the movie-->
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,
0,0"
WIDTH=550 HEIGHT=400>
<PARAM NAME=movie VALUE="Movie1.swf"> <PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#FFFFFF>
<EMBED src="Movie1.swf" quality=high bgcolor=#FFFFFF WIDTH=550 HEIGHT=400
TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Versio
n=ShockwaveFlash"></EMBED>
</OBJECT>
</BODY>
</HTML>
sintag yang digunakan untuk memasukkan animasi flash ke dalam html yaitu yang
diapit oleh tag <object…> dan </object>. Jika kita ingin menggabungkan animasi
Team RPL – smkn1 dps
yang kita buat ke dalam web editor maka cukup kita kopi sintag tersebut dan
diletakkan ditempat yang diinginkan. Kita bisa meletakkan animasi yang kita buat
dibagian manapun yang kita inginkan tergantung dimana kita meletakkan sintag
tersebut ke dalam html.
misalnya kita lihat contoh dibawah ini
letak animasi
contoh diatas adalah sebuah web yang sederhana yang berisi tabel dengan dua
baris dan dua kolom. Baris pertama kolom pertama adalah gambar, baris pertama
kolom kedua adalah tulisan, baris kedua kolom pertama adalah link, dan kita
letakkan animasi pada baris kedua kolom kedua. Maka sintag diatas yang diapit
oleh tag <object…> dan </object> seperti yang dijelaskan sebelumnya kita
masukkan pada sintag html bagian tabel yaitu pada baris dua kolom dua
Team RPL – smkn1 dps
Baris1 kolom 1
Baris1 kolom2
Baris2 kolom 1
Baris2 kolom 2
<html><head>
<title>coba2</title>
</head>
<body>
<table border="6" width="100%" height="3">
<tr>
<td width="22%" height="1" align="center"><img border="0"
src="file:conan3.gif" width="186" height="151"></td>
<td width="78%" height="1">
<p align="center"><b><i><font face="Arial Black" size="7">selamat
datang
di </font></i></b></p>
<p align="center"><b><i><font face="Arial Black" size="7">pustena
official
web site</font></i></b></td>
</tr>
<tr>
<td width="22%" height="3" align="center"><font size="5">link 1</font>
<p><font size="5">link 2</font></p>
<p><font size="5">link 3</font></td>
<td width="78%" height="3">
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflas
h.cab#version=5,0,0,0"
WIDTH=550 HEIGHT=400>
<PARAM NAME=movie VALUE="Movie1.swf"> <PARAM
NAME=quality VALUE=high> <PARAM NAME=bgcolor
VALUE=#FFFFFF>
<EMBED src="Movie1.swf" quality=high bgcolor=#FFFFFF WIDTH=550
HEIGHT=400></EMBED>
</OBJECT>
</td>
</tr>
</table>
</body>
</html>
Team RPL – smkn1 dps
Pada contoh diatas, sintag dari animasi diletakkan dalam sintag baris 2 kolom 2
yaitu yang diapit tag <td…> dan </td>
Misal kita letakkan sintag dari animasi dibawah sintag </table> maka letak
animasi akan berada dibawah tabel.
Jadi letak dari animasi tergantung dimana kita meletakkannya dalam sintag html.
Ada hal hal yang perlu diperhatikan agar animasi dapat masuk dalam web
sesuai dengan yang kita inginkan dan tidak terjadi kesalahan didalamnya.
- letak file swf dan file html harus satu folder, karena sintag html yang
dibuatkan oleh flash dibuat terletak dalam satu folder. Jika kita
menginginkan letak flash tidak berada satu folder dengan file html maka
sebagian sintag harus kita ubah. Seperti contoh diatas yang harus diubah
adalah pada bagian <EMBED src=”coba.swf” … diubah dengan
ditambahkan alamat dari coba.swf berada. Misal coba.swf berada di folder
c:\animasi maka sintag harus diubah menjadi <EMBED
src=”c:\animasi\coba.swf… .
- jika kita membuat html dengan menggunakan image editor, misalnya
frontpage, pada saat kita mengkopi sintag animasi ke dalam sintag html
biasanya html tidak langsung muncul. Agar dapat muncul maka pekerjaan
html kita harus di save dalam folder yang sama dengan folder file animasi.
PENGENALAN ACTION
• pengertian action
• penggunaan basic action
• memasukkan action
Pengertian action
Dengan adanya action memungkinkan pemberian perintah terhadap
animasi yang kita buat. Misalnya kita buat tombol play, stop dan sebuah obyek
Team RPL – smkn1 dps
lingkaran. Jika kita tekan tombol play maka lingkaran bergerak dari kiri ke kanan
dan jika kita klik tombol stop maka lingkaran akan berhenti. Semua itu bisa
dilakukan dengan memberikan perintah kepada tombol serta lingkarannya
sehingga mengikuti apa yang kita inginkan.
Selain memberikan perintah pada animasi, kita juga bisa mengisikan
pemrograman dengan action. Misalnya kita bisa membuat kalkulator yang dapat
digunakan untuk menghitung atau bahkan membuat game sekalipun. Tetapi
pembuatan hal tersebut sangat kompleks dan membutuhkan banyak usaha. Pada
bab ini kita belajar action yang sederhana dan yang umum digunakan dalam web.
Flash menggunakan bahasa ActionScript untuk menambahkan
interaktivitas ke dalam animasi. Bahasa ActionScript ini mirip dengan bahasa
JavaScript. Pada dasarnya ActionScript ini adalah suatu kumpulan perintah yang
digunakan untuk mengaktifkan suatu action tertentu.
Untuk memunculkan menu action script, pilih window>action maka akan
muncul kotak dialog berisi pilihan pilihan action yang bisa kita gunakan.
bentuk panel action
Menggunakan Basic Actions
Team RPL – smkn1 dps
Belajar action membutuhkan kesabaran yang tinggi dan membutuhkan
waktu. Karena kita masih baru tahap pengenalan dengan action maka kita belajar
action yang paling dasar yaitu basic actions. Sebenarnya dengan menggunakan
basic action sudah cukup digunakan untuk membuat web kita interaktif tetapi jika
menginginkan sesuatu yang lebih, baru kita menggunakan action lainnya yang
lebih rumit.
Basic Actions pada Action Panel mengijinkan kita untuk mengendalikan
navigasi dan interaksi pemakai pada sebuah animasi dan membuat Flash yang
menuliskan ActionScript tersebut. Untuk melihat apa saja yang terdapat dalam
basic action klik menu basic action pada panel action sehingga muncul beberapa
sub menu.
- Go To untuk melompat ke frame atau scene
tertentu.
- Play and stop untuk memainkan dan
menghentikan animasi.
- Toggle High Quality untuk mengatur kualitas
penampilan animasi tersebut.
- Get URL untuk sebagai link ke suatu situs.
- FSCommand untuk mengendalikan player Flash
yang menjalankan animasi.
- Load Movie dan Unload Movie untuk menampilkan ataupun
menghilangkan animasi.
- Tell Target untuk mengendalikan animasi dan klip lainnya.
- If Frame is Loaded untuk menjalankan action yang akan mengawasi
apakah frame tertentu telah dijalankan.
Untuk mengetahui kegunaan action yang lainnya pada ActionScript dapat dilihat
pada bagian Help > ActionScript Reference
Team RPL – smkn1 dps
Memasukkan Action
Action bisa dimasukkan ke dalam dua macam bagian yaitu pada bagian
frame dan pada bagian obyek. Hal ini sangat penting karena kedua bagian tersebut
sangat berbeda. Jika kita memberikan action pada frame itu artinya kita
memberikan perintah hanya terhadap frame, dan begitu juga dengan obyek. Kita
tidak bisa memberikan perintah pada suatu obyek jika action tersebut kita berikan
pada layer, begitu juga sebaliknya. Sehingga sebelum memasukkan action harus
kita lihat terlebih dahulu tujuan dari action tersebut digunakan.
Tandanya bahwa kita sedang memasukkan action pada frame, muncul
tulisan frame action pada bagian
paling atas panel action.
Begitu juga jika kita memasukkan action pada object, maka muncul tulisan object
action pada bagian paling atas
panel action.
Petunjuk ini akan membantu kita jika ada kesalahan dalam meletakkan action.
Memasukkan action pada layer
Sekarang kita akan belajar bagaimana memberikan perintah kepada suatu
layer. Pertama tentukan frame dan layer keberapa yang akan diisi oleh action, klik
ditempat tersebut.dan buat keyframe ditempat tersebut. Seperti telah dijelaskan
pada bab sebelumnya pada saat kita ingin memanipulasi suatu frame maka kita
harus mengisikan keyframe ditempat tersebut.
Kemudian buka panel action dan isikan action yang diinginkan. Jika suatu
frame sudah diisi oleh action maka frame tersebut akan memiliki tanda huruf a .
Agar lebih jelas ikuti contoh berikut ini. Buat file baru dan buat didalamnya
sebuah animasi yang sederhana dengan menggunakan 20 frame.
Team RPL – smkn1 dps
Kita akan mengisikan action stop yaitu digunakan untuk menghentikan
gerakan animasi pada frame yang kita inginkan. Action tersebut kita isikan pada
frame 10, maka klik kanan frame 10 tersebut dan pilih menu insert key frame.
Pastikan penunjuk frame berada pada frame 10 kemudian munculkan panel
action.
Pilih action stop pada bagian basic action dengan cara double klik atau dengan
mendrag ke arah action list yaitu halaman putih disebelah kanannya.
Double click atau didrag ke sebelah kanan script
Jika sudah kita double click atau kita drag maka dibagian action list muncul script
sesuai dengan yang kita buat, dalam hal ini adalah stop.
Setelah action diberikan maka dibagian frame 10 akan muncul tanda .
Contoh diatas adalah memberikan action stop pada frame 10, jika kita jalankan
maka animasi akan berhenti pada frame ke sepuluh dan tidak akan melanjutkan
ke frame yang selanjutnya kecuali jika kita tambahkan action yang lain.
Karena kita berikan action pada frame 10 maka jika kita mengklik frame
yang lain misal frame satu maka script pada pada action list yang sebelumnya
sudah kita isikan akan hilang.
Team RPL – smkn1 dps
Hal ini disebabkan karena kita tidak mengisikan action pada frame satu.
Script yang ada dalam action list akan menyesuaikan dengan action yang
kita isikan pada setiap frame. Misal kita mengisikan 3 action pada 3 frame yang
berbeda. Jika kita klik pada frame satu maka
pada action list akan memunculkan action
yang diisikan pada frame satu, begitu juga
dengan frame dua dan tiga.
Memasukkan action pada obyek
Memasukkan action pada obyek caranya hampir sama seperti pada frame.
Bedanya adalah jika pada frame sebelum memasukkan action kita harus mengklik
framenya terlebih dahulu maka jika memasukkan pada obyek kita harus mengklik
obyek yang akan kita beri action tersebut. Misal kita
mempunyai tiga buah tombol. Jika kita ingin memberi
action pada tombol yang pertama maka tombol tersebut harus kita klik terlebih
dahulu kemudian kita munculkan panel action dan kita isikan action yang kita
inginkan.
Sama seperti pada layer, kita bisa mengisikan action pada masing masing
tombol dengan cara seperti diatas. Jika kita sudah mengisikan action yang berbeda
pada ketiga tombol, pada saat kita klik tombol yang pertama, maka action list
pada panel action akan berisi action yang kita berikan pada tombol satu, dan
begitu juga dengan tombol dua dan tiga.
Team RPL – smkn1 dps
Perlu diperhatikan bahwa sebelum suatu obyek diberi action, pastikan
obyek tersebut sudah menjadi sebuah symbol karena action hanya bisa diberikan
pada obyek yang berupa symbol.
CONTOH PENGGUNAAN ACTION
• Membuat link pada tombol
• Membuat tombol play dan stop
• Obyek yang mengikuti gerakan mouse
Membuat link pada tombol
Tujuan utama memasukkan tombol pada web adalah untuk digunakan sebagai
link ke halaman yang lain. Cara memasukkan link ke dalam tombol adalah dengan
menggunakan action.
1. klik tombol yang sudah dibuat kemudian buka panel action. Pastikan
bahwa tulisan yang ada diatas panel action adalah object
action.
2. pilih bagian basic action yaitu get URL
dan klik dua kali option tersebut,
sehingga muncul script pada action list
3. isikan pada bagian URL dengan alamat dari link yang dituju. Misal :
www.yahoo.com
setelah selesai maka dapat dicoba dengan memilih menu control>test movie. Jika
langkah yang kita lakukan diatas sudah benar maka pada saat tombol tersebut
Team RPL – smkn1 dps
diklik maka akan pindah ke halaman lain yang kita isikan alamatnya pada URL
tersebut.
Kita juga bisa menggunakan tombol tersebut untuk mengirimkan email,
jadi pada saat kita mengklik tombol tersebut muncul program outlook express
untuk mengirimkan email pada alamat yang kita kehendaki. Caranya sama dengan
diatas dan isikan pada option URL dengan kata mailto: <alamat email yang
dituju>. Misal mailto: huget.students.ee.itb.ac.id.
Membuat tombol play dan stop
Sekarang kita akan menggunakan tombol play dan stop dan dihubungkan
dengan sebuah animasi
1. buat file baru dan buat didalamnya sebuah animasi yang sederhana, misalnya
lingkaran yang bergerak dari kiri ke kanan.
2. buat sebuah layer baru dan letakkan aktif layer yaitu gambar pensil pada layer
baru tersebut dan letakkan penunjuk frame pada frame 1.
3. buat ditempat tersebut dua buah tombol yang nantinya digunakan untuk
tombol play dan stop. Agar tidak terlalu lama dalam membuat tombol,
gunakan tombol yang sudah ada dalam common library, dengan memilih
window>common library>button dan pilih tombol yang sesuai.
Gambar berada pada layer 1
tombol berada pada layer 2
Team RPL – smkn1 dps
4. kembali ke layer 1 dan frame 1. Kita akan mengisikan perintah stop pada
frame tersebut agar jika pada saat dicoba, animasi tidak akan berjalan kecuali
ditekan tombol play yang kita buat. Caranya klik frame 1 pada layer 1
kemudian munculkan panel action. Pastikan bahwa tulisan yang ada diatas
panel action adalah frame action.
pilih action stop pada basic action.
5. jika action sudah masuk maka akan muncul tanda a pada layer 1 frame 1
tanda action
6. selanjutnya kita isi action play pada tombol play. Klik tombol play kemudian
buka panel action dan pilih action play.
7. begitu juga dengan tombol stop, diisi action stop.
Setelah selesai kita coba dengan memilih menu control>test movie. Jika
langkah yang kita buat diatas sudah benar, maka animasi tidak bergerak, dan akan
bergerak jika kita tekan tombol play dan berhenti jika kita tekan tombol stop
Obyek yang mengikuti gerakan mouse
Ini adalah contoh pembuatan animasi menggunakan action tingkat lanjut.
Action yang kita isikan tidak hanya dengan mengkliknya saja tetapi harus
mengisikan script didalamnya.
Team RPL – smkn1 dps
1. buat sebuah obyek sederhana, misal sebuah lingkaran dan seperti biasa ubah
obyek tersebut menjadi symbol grafik atau movieclip
2. kita akan mengisikan action pada frame 1 maka klik terlebih dahulu frame 1
dan munculkan panel action.
3. pilih actions yang letaknya ada dibawah basic actions dan pilih action start
drag
4. double click action startDrag tsb dan akan muncul option seperti dibawah
isikan option sesuai dengan diatas, yaitu cek list option lock mouse to center
dan option ekspression. Dan isikan pada option target dengan _x_y (strip
bawah x strip bawah y). Jangan sampai salah dalam mengisikan pada bagian
target karena jika salah maka action tidak akan bekerja.
5. setelah selesai kemudian dicoba, hasilnya berupa obyek yang selalu mengikuti
gerakan mouse.
6. agar obyek yang mengikuti mouse selalu berada
tepat diatas mouse, maka pindahkan letak obyek
tepat pada ujung kanan atas dari stage.
Team RPL – smkn1 dps
CONTOH MEMBUAT ANIMASI
• cahaya bergerak diatas tulisan
• tombol yang beranimasi
• tombol yang memiliki informasi
Contoh ini merupakan contoh yang lebih sulit dibandingkan dengan yang
sebelumnya sehingga membutuhkan ketelitian dan kesabaran dalam membuatnya.
Pembuatan contoh ini membutuhkan pemahaman dari konsep konsep yang telah
diajarkan. Jika sekali mencoba masih belum berhasil maka harus dicoba lagi dan
begitu seterusnya karena proses belajar memang membutuhkan waktu dan
kesabaran.
Cahaya bergerak diatas tulisan
1. buat file baru dan sebuah
tulisan didalamnya. Sebaiknya
tulisan berwarna abu abu
dengan background berwarna hitam. Ukuran stage sebaiknya jangan terlalu
besar, secukupnya sehingga dapat memuat tulisan.
2. klik kanan tulisan tersebut dan pilih menu copy, untuk mengkopi tulisan
tersebut.
3. buat layer yang baru yaitu layer 2 dan
pastikan aktif layer berada pada layer 2
tersebut. Klik kanan pada stage dan pilih menu paste in place, untuk
menempelkan tulisan yang sebelumnya sudah kita kopi kedalam layer 2.
Sehingga kita mempunyai dua tulisan yang sama pada layer 1 dan layer 2 dan
bertumpuk. Karena tulisan bertumpuk maka pada stage yang tampak hanya
satu tulisan
Team RPL – smkn1 dps
4. buat sebuah layer baru lagi yaitu layer
3, dan letakkan aktif layer pada layer 3
5. buat sebuah persegi yang tingginya sama dengan dua kali tinggi tulisan dan
lebar secukupnya. Gunakan warna linear gradien dengan menggunakan panel
fill dengan settingnya seperti berikut:
6.
warna sama dengan
warna huruf Warna putih
dan buat alur gradient vertikal sejajar dengan tinggi gambar
hasilnya
7. hilangkan garis tepi dari persegi empat dengan cara mengklik tepinya
dan tekan tombol delete
8. putar gambar 450 searah jarum jam dengan menggunakan
fungsi rotate
9. blok gambar tersebut dan pilih menu insert>convert to symbol untuk
merubah gambar tersebut ke dalam symbol grafik atau movie clip
Team RPL – smkn1 dps
10. letakkan gambar pada sebelah kiri dari tulisan
11. masih tetap pada layer 3, insert keyframe pada frame 20 sehingga gambar
yang ada pada frame 1 terkopi ke frame20
12. karena tulisan hanya ada pada frame 1 maka pada frame 20 tidak terdapat
tulisan. Agar tulisan muncul pada frame 20 maka pilih menu insert frame pada
frame 20 di layer 1 dan begitu juga dengan layer 2.
13. kembalikan aktif layer pada layer 3 dan letakkan penunjuk frame pada frame
20. Pindahkan gambar yang ada pada frame 20 layer 3 ke sebelah kiri tulisan.
14. letakkan penunjuk fram pada frame 1 layer 3 dan gerakkan gambarnya dengan
menggunakan tweening motion pada panel frame.
15. layer 3 yang digunakan untuk animasi yang berada paling atas pindahkan
menjadi di tengah dan bertukar dengan layer 2 menjadi diatas. caranya dengan
mendrag tulisan layer 3 ke arah bawah
Team RPL – smkn1 dps
16. klik kanan layer 2 dan pilih menu mask dan pastikan layer 3 menjadi link dari
mask tersebut sehingga nampak seperti gambar dibawah
17. jika langkah langkah yang dilakukan sudah benar maka hasilnya akan tampak
cahaya putih yang melewati tulisan.
Tombol yang beranimasi
Pada pembuatan tombol yang diajarkan sebelumnya, pada saat mouse
diletakkan diatasnya maka tombol akan berubah bentuk atau warnanya. Sekarang
akan kita buat lebih interaktif lagi yaitu pada saat mouse mendekati tombol maka
tombol tersebut beranimasi.
1. buat file baru dan buat didalamnya sebuah obyek yang
akan kita gunakan sebagai tombol. Pada contoh ini kita
buat tulisan sebagai tombolnya.
2. blok tulisan ini dan pilih menu insert>convert to symbol dan kali ini harus
diubah menjadi movie clip, jika diubah menjadi symbol yang lain maka akan
mendapatkan masalah nantinya
3. kita akan mengedit tulisan ini, jadi kita
harus masuk ke dalam edit symbol dan
tidak lagi bekerja pada stage utama.
Caranya dengan mengklik kanan tulisan
tersebut dan pilih menu edit.
Team RPL – smkn1 dps
4. kita sekarang sudah berada ditempat edit
symbol dan tidak lagi berada pada stage
utama. Tandanya terdapat tulisan symbol 1
atau nama symbol yang sudah ditentukan sebelumnya pada ujung kiri atas dari
timeline. Untuk saat ini dan seterusnya kita selalu bekerja didalam edit symbol
ini. Jangan sampai kembali ke dalam scene 1 sebelum diberikan instruksi.
5. kita buat agar tulisan tersebut beranimasi. Salah satu contohnya adalah seperti
berikut ini. Animasi tidak harus seperti yang dicontohkan, bisa dibuat sesuai
dengan kreasi sendiri.
6. blok tulisan tersebut dan pilih menu insert>convert to symbol kita ubah
tulisan yang ada dalam edit symbol tersebut ke dalam symbol grafik.
7. insert key frame pada frame 10 sehingga gambar pada frame 1 terkopi ke
frame 10.
8. kita manipulasi gambar pada frame 10. perbesar ukuran dari tulisan menjadi
satu setengah kali dari ukuran semula.
Tulisan pada frame 1 tulisan pada frame 10
9. Usahakan bahwa tulisan selalu berada ditengah. Masih tetap pada frame 10,
gunakan panel effect alpha, dan ubah settingnya menjadi 0% sehingga tulisan
yang ada pada frame 10 tersebut menjadi hilang.
10. Kembali ke frame 1, dan gunakan tweening motion untuk membuat animasi
diantara kedua keyframe.
11. Isikan action stop pada frame 10 agar
animasi hanya berjalan sekali saja.
Team RPL – smkn1 dps
Caranya klik frame 10 dan munculkan panel action dan pilih action stop pada
basic action
12. Jika sudah selesai maka kembali ke scene 1 dengan menekan tulisan scene 1
yang ada di kiri atas, sehingga kita kembali ke stage utama. Kita sudah selesai
dalam mengedit symbol.
13. pilih menu window>library untuk membuka library milik kita
14. lihat dalam library tersebut, jika didalam symbol 1
terdapat tulisan yang kita buat dan ada tombol
play di kanan atas serta jika tombol play tersebut
ditekan tulisan akan beranimasi berarti langkah
yang kita buat dalam contoh diatas sudah benar.
Jika tidak itu artinya pembuatannya masih salah
dan jangan dilanjutkan ke langkah berikutnya.
Perbaiki terlebih dahulu sehingga hasilnya sesuai
dengan kriteria tersebut.
15. simpan file animasi yang sudah kita buat ini kedalam folder tertentu dan beri
nama, ingat-ingat nama file ini dan letaknya karena nanti akan kita perlukan
16. buat file yang baru dan buat tulisan yang sama persis
baik ukuran font maupun jenis font seperti yang kita
buat sebelumnya.
17. blok tulisan tersebut dan pilih menu insert>convert to symbol dan ubah
menjadi symbol button. Tulisan inilah yang nantinya akan kita jadikan tombol.
18. klik kanan tulisan tersebut dan pilih menu edit
sehingga kita masuk ke tempat edit symbol
19. pilih menu file>open as library dan cari file animasi yang
sebelumnya sudah kita buat dan kita simpan untuk
dimasukkan dalam library yang baru ini.
20. munculkan library milik kita dengan memilih menu
window>library dan pastikan bahwa animasi yang sudah
kita buat sebelumnya ada didalam library tersebut.
Team RPL – smkn1 dps
21. perhatikan pada bagian
timeline dari tombol. Frame
yang terdapat keyframe
hanya pada bagian up saja, sekarang kita isikan keyframe pada bagian over
dengan cara klik kanan frame tersebut dan pilih insert keyframe sehingga
tulisan yang ada pada
bagian up terkopi ke bagian
over
22. pastikan penunjuk frame berada pada bagian over, animasi yang sudah kita
buat sebelumnya dan terletak didalam library drag menuju ke dalam stage dan
letakkan symbol tersebut bertumpuk dengan tulisan yang sudah ada, sehingga
tulisan tampak tidak ada perubahan.
23. setelah selesai kembali ke scene 1 dengan menekan
tulisan scene 1 pada pojok kiri atas
24. pembuatan sudah selesai dan coba hasilnya dengan memilih menu
control>test movie. Hasilnya adalah berupa tulisan tombol dan jika didekati
maka tombol tersebut beranimasi.
25. pembuatan tombol animasi ini hanya sebagai contoh dan bisa dimodifikasi ke
dalam bentuk bentuk yang lain sesuai dengan kreatifitas masing masing.
Team RPL – smkn1 dps
Tombol yang memiliki informasi
Kita bisa membuat sebuah tombol jika tombol tersebut didekati maka akan
memunculkan informasi mengenai tombol tersebut. Seperti contoh berikut
mouse diluar tombol ketika mouse diatas tombol muncul informasi
pembuatannya adalah sangat mudah, ikuti langkah berikut ini
1. buat sebuah obyek yang digunakan untuk tombol, atau agar lebih
cepat ambil tombol yang sudah ada dalam window>common
library>button
2. insert keyframe pada frame 2 sehingga kita mengkopi tombol yang ada dalam
frame1. tambahkan disamping
tombol tersebut informasinya buat
dengan kreatifitas masing masing
key frame 1, obyek tombol keyframe 2, tombol beserta informasinya
3. sekarang kita sudah mempunyai dua buah keyframe. Keyframe yang pertama
berisi obyek tombol, dan keyframe yang kedua berisi tombol beserta
informasinya. Selanjutnya akan kita buat agar jika mouse diletakkan pada
tombol yaitu frame 1 maka gambar akan berpindah pada frame 2. Untuk itu
kita harus menggunakan action.
Team RPL – smkn1 dps
4. isikan action stop pada frame1. caranya klik
frame 1 tersebut dan munculkan panel action
dan pilih action stop pada basic action. Perintah
ini diberikan agar pada saat dijalankan maka
frame akan tetap pada frame 1 dan tidak berpindah pada frame 2, kecuali jika
tombol didekati oleh mouse.
5. kemudian kita isikan action pada tombol yang ada pada frame 1. klik tombol
tersebut dan munculkan panel action. Pilih action on mouse event pada basic
action dan isikan settingnya event : roll over
6. kemudian tambahkan action go to dan isikan setting go to frame 2. dan
hilangkan ceklist go to and play
Team RPL – smkn1 dps
action diatas artinya adalah jika mouse diletakkan diatas tombol maka gambar
berpindah ke frame2. Sekarang kita harus mengisikan action agar gambar kembali
ke frame 1 ketika mouse keluar dari area tombol. jika action ini tidak kita isikan
maka gambar tidak akan kembali ke frame 1.
7. klik tombol yang ada pada frame 2. Munculkan panel action dan pilih action
on mouse event yaitu sama dengan action sebelumnya tapi kali ini yang dicek
list adalah bagian roll out yang artinya action bekerja pada saat mouse keluar
dari tombol.
8. tambahkan action goto pada bagian basic action dan dengan setting: goto
frame 1, dan hilangkan cek list goto and play.
Top Related