MEDIA PEMBELAJARAN DESAIN WEB MENGGUNAKAN PHOTOSHOP CS6 DAN ADOBE DREAMWEAVER BERBASIS MULTIMEDIA
Ahmad Surahmat 1 , Sukarta Atmaja 2
Dosen Fakultas Ilmu Komputer, Universitas Banten Jaya Jl. Syeh Nawawi Al-Bantani, Boru, Serang - Banten Email: ahmadsurahmat@unbaja.ac.id 1 , sukartaatmaja@gmail.com 1

## ABSTRACT
In  designing  a  beautiful  and  attractive  web,  for  ordinary  people  it  certainly  looks  very difficult. So from that the advantage of learning to use learning media using multimedia is that people can see firsthand how and the steps? And the results of how they are made can  be  seen  immediately.  Compare  this  with  a  book  that  has  a  step  by  step  guide,  but people will feel confused because not a few books give results that are not in accordance with the method. Learning media that will be displayed in the form of a website display. With the help of Photoshop CS6 and Adobe Dreamweaver application we can make web display  easier  and  also  create  websites  without  direct  contact  with  the  programming language.  Multimedia-based  learning  aims  to  facilitate  students  in  understanding  each method  of  web  design  techniques.  In  this  study  discussed  how  to  design  web  using Photoshop CS6 with the help of slice tool. Multimedia-based web design learning media uses  three  methods,  namely  web  designing  in  Photoshop  CS6,  adding  code  with  Adobe Dreamweaver, and making learning videos using Camtasia Studio 8, the learning videos produced can be seen with the .wav .flv .swf format with CD quality, DVD. The results of this  study  were  conducted  to  develop  multimedia-based  learning  media  so  that  the material delivered was easier to understand.
Keywords: Dreamweaver, Multimedia, Photoshop.

## PENDAHULUAN
Perkembangan  pendidikan  di  Indonesia  kini  semakin  inovatif,  di  mana berbagai  macam  teknologi  telah  dikembangkan  untuk  meningkatkan  mutu pendidikan.  Untuk  mencapai  tujuan  pembelajaran  tersebut,  dengan  menerapkan pembelajaran  yang  berbasiskan  multimedia.  Dalam  teknologi  pembelajaran  ini menggunakan  teknologi  informasi  sebagai  media  utama  yang  didukung  dengan berbagai  macam  aplikasi (software) untuk  membuat  sistem  pembelajaran.  Ada empat  komponen  yang  mendukung  sistem  ini  yaitu sistem  operasi,  software, hardware, dan internet.
Salah  satu  pemanfaatan  multimedia  dalam  bidang  pembelajaran  adalah dengan membuat media belajar. Pembuatan media ini nantinya dikhususkan hanya
pada  penggunaan  Photoshop  untuk  desain  web  sebagai  obyek  pembelajaran. Media pembelajaran yang akan ditampilkan dalam bentuk tampilan website.
Bagi kebanyakan orang  yang belum pernah  mengenal pembuatan desain web tentu akan terlihat sangat sulit. Apalagi bila desain web dengan menggunakan code atau tag HTML  yang  begitu  banyak.  Dengan  bantuan  aplikasi  Photoshop, sekarang  mendesain  tampilan  web  menjadi  lebih  mudah  dan  cepat.  Dengan bantuan  aplikasi  Adobe  Dreamweaver  kita  dapat  membuat  situs  web  tanpa bersentuhan  langsung  dengan  bahasa  pemograman,  cukup  mengetahui  dasar dasarnya  saja,  karena  di  dalam  aplikasi  ini  sudah  disediakan  alat  -  alat otomatis. Bahkan  tampilan  yang  dihasilkan  dapat  dilengkapi  dengan  berbagai  macam background yang menarik.
Maka  belajar  mendesain  web  menggunakan  multimedia  akan  lebih mudah  untuk  dipahami.  Karena  didukung  dengan  tampilan  video  yang  mudah diikuti  dan  dipelajari.  Dari  hasil  penelitian  penggunaan  Photoshop  dengan Dreamweaver  untuk  desain  web  dengan  menggunakan  media  belajar  berbasis multimedia materi yang disampaikan dapat dipahami dengan baik. Adapun tujuan penelitian  ini  adalah  untuk  membuat  media  pembelajaran  dengan  menggunakan aplikasi Camtasia Studio.

## METODE PENELITIAN

## 1. Konsep Dasar Belajar
Lingkungan  belajar  multimedia  interaktif  dapat  dikategorikan  dalam tiga  jenis  yakni  lingkungan  belajar  preskriptif,  demokratis  dan  sibernetik. Lingkungan  preskriptif  menekankan  bahwa  prestasi  belajar  merupakan pencapaian  dari  tujuan-tujuan  belajar  yang  ditetapkan  secara  eksternal. Interaksi  belajar  terjadi  antara  siswa  dengan  bahan-bahan  belajar  yang  sudah tersedia  dan  belajar  merupakan  suatu  kegiatan  yang  bersifat  prosedural. Lingkungan belajar demokratis menekankan kontrol proaktif siswa atas proses belajarnya  sendiri,  yang  mencakup  penetapan  tujuan  belajar  sendiri,  kontrol siswa  terhadap  urutan-urutan  pembelajaran,  hakekat  pengalaman  dan kedalaman  materi  belajar  yang  dicarinya.  Sedangkan  lingkungan  belajar
sibernetik menekankan saling ketergantungan antara sistem belajar dan siswa. (Schwier, 1993).
Gambar 1. Evolusi Media Pembelajaran
Beberapa penelitian yang telah dilakukan terhadap media pembelajaran  yang  statis  dan  media  pembelajaran  dalam  bentuk  multimedia menjelaskan  bahwa  dengan  tampilan  statis  suatu  gambar  seharusnya menggambarkan  fungsi pembelajaran, sasaran pembelajaran, dan  materi  yang dapat  diimplementasikan  yang  dibutuhkan  oleh  pelajar,  biasanya  dalam  text dokumen  atau  diagram.  Sedangkan  tampilan  animasi  untuk  pembelajaran relatif lebih efektif karena lebih menarik, dan biasanya dalam bentuk aplikatif (Davidson, 2003).
Salah satu usaha  yang dikembangkan  mulai diarahkan kepada  belajar kooperatif  dalam  pembelajaran  multimedia  (Klien  &  Pridemore,  1992). Hooper  (1992)  memperluas  pendekatan  belajar  kooperatif  ini  dalam lingkungan  belajar  yang  berbasis  komputer.  Ia  mengemukakan  beberapa keuntungan dan penerapan belajar kooperatif dalam pembelajaran multimedia antara lain : 1) adanya ketergantungan dan tanggung jawab dari setiap anggota kelompok. 2) Adanya interaksi yang promotif di mana usaha seorang individu akan  mendukung  usaha  anggota  kelompok  lainnya.  3)  Kesempatan  latihan untuk  bekerjasama.  4)  Pengembangan  dan  pemeliharaan  kelompok.  Proses kelompok  yang  terjadi  di  dalam  lingkungan  belajar  ini  bisa  mendorong anggota  kelompok  untuk  merefleksikan  efektif  atau  tidaknya  strategi  yang digunakan.
Black Board / White Board
Overhead Projector (OHP)

## Presentation File with LCD
Learning Model

## 2. Media Pembelajaran
Media  pembelajaran  diartikan  sebagai  media  yang  membawa  pesan- pesan atau informasi  yang  mempunyai tujuan  instruksional atau mengandung maksud  pengajaran  (Azhar  Arsyad,  2003).  Media  pembelajaran  meliputi  alat yang secara fisik digunakan untuk menyampaikan isi materi pengajaran, yang terdiri  antara  lain  buku, tape  recorder ,  televisi,  komputer,  dan  lainnya. Banyaknya  media  pembelajaran  tersebut  disesuaikan  dengan  tingkat kebutuhan  dari  pengguna.    Karena  tingkat  keefektifan  tergantung  dari  tujuan yang ingin dicapai.
Di  era  informasi  seperti  sekarang  ini  maka  pilihan  yang  tepat  atas media  yang  digunakan  akan  sangat  menentukan  proses  dan  hasil  yang  di didapatkan. Perlu adanya suatu kriteria didalam pemilihan media, diantaranya:
a. Sesuai dengan tujuan yang ingin dicapai.
b. Tepat untuk mendukung isi pelajaran.
c. Praktis, luwes, dan bertahan.

## 3. Pembelajaran Berbasis Visual
Media berbasis visual ( image atau perumpamaan) memegang peranan yang  sangat  penting  dalam  proses  belajar.  Media  visual  dapat  memperlancar pemahaman  (misalnya  melalui  elaborasi  struktur  dan  organisasi)  dan memperkuat ingatan. Visual dapat pula menumbuhkan minat siswa dan dapat memberikan  hubungan  antara  isi  materi  pelajaran  dengan  dunia  nyata.  Agar menjadi  efektif,  visual  sebaiknya  ditempatkan  pada  konteks  yang  bermakna dan  siswa  harus  berinteraksi  dengan  visual  ( image )  itu  untuk  meyakinkan terjadinya proses informasi.
Bentuk  visual  bisa  berupa  (a)  gambar  representasi  seperti  gambar, lukisan atau foto yang menunjukkan bagaimana tampaknya sesuatu benda; (b) diagram  yang  melukiskan  hubungan-hubungan  konsep,  organisasi,  dan struktur  isi  materi;  (c)  peta  yang  menunjukkan  hubungan-hubungan  ruang antara unsur-unsur dalam  isi  materi; (d) grafik seperti tabel, grafik, dan chart (bagan) yang menyajikan gambaran/ kecenderungan data atau antar hubungan seperangkat gambar atau angka- angka.

## 4. Pembelajaran Berbasis Audio-Visual
Teknologi  audio  -  visual  merupakan  cara  menghasilkan  atau menyampaikan materi dengan menggunakan mesin-mesin mekanis- elektronik untuk menyajikan pesan-pesan audio dan visual. Pembelajaran melalui audio- visual  jelas  bercirikan  pemakaian  perangkat  keras  selama  proses  belajar, seperti  mesin  proyektor  film,  tape  recorder,  dan  proyektor  visual  yang  lebar. Jadi,  pembelajaran  melalui  audio-visual  adalah  produksi  dan  penggunaan materi  yang  penyerapannya  melalui  pandangan  dan  pendengaran  serta  tidak seluruhnya tergantung pada pemahaman kata atau simbol-simbol yang serupa.

## 5. PembelajaranBerbasis Multimedia
Pembelajaran  dengan  multimedia  merupakan  gabungan  dari  berbagai macam  media  yang  terintegrasi  yang  secara  bersama-sama  menampilkan informasi, pesan, atau isi pelajaran.
Konsep  penggabungan  ini  dengan  sendirinya  memerlukan  beberapa jenis peralatan perangkat keras yang masing-masing tetap menjalankan fungsi utamanya  sebagaimana  biasanya,  dan  komputer  merupakan  pengendali seluruh peralatan itu. Jenis peralatan itu adalah komputer, video kamera, video casette  recorder (VCR), overhead  projector ,  multivision  (atau  sejenisnya),
CD  player , campact  disc . CD  Player yang  sebelumnya  merupakan  peralatan tambahan  ( exsternal  peripheral )  komputer,  sekarang  sudah  menjadi  bagian unit  komputer  tertentu.  Kesemua  peralatan  itu  haruslah  kompak  dan  bekerja sama dengan menyampaikan informasi kepada pemakainya.
Informasi  yang  disampaikan  melalui  multimedia  ini  berbentuk dokumen  yang  hidup,  dapat  dilihat  dilayar  ketika  diproyeksikan  melalui overhead  projector ,  dan  dapat  didengar  suaranya,  dilihat  gerakannya  (video atau  animasi).  Multimedia  bertujuan  untuk  menyajikan  informasi  dalam bentuk yang menyenangkan, menarik, mudah dimengerti, dan jelas. Informasi akan mudah dimengerti karena sebanyak mungkin indera, terutama telinga dan mata, digunakan untuk menyerap informasi itu.
Bentuk informasi grafis, video, animasi, diagram, suara, dan lain-lain dengan  mudah  dapat  dihasilkan  dengan  mutu  yang  cukup  baik.  Misalnya, video kamera  berfungsi  merekam  video  yang diinginkan kemudian ditransfer dan  digabungkan  dengan  animasi,  grafik,  dan  teks  yang  dihasilkan  oleh komputer. Teks, grafik, animasi, video, sudah banyak tersedia dalam compact disc.  Misalnya, Encyclopedia  Americana sudah  direkam  kedalam  compact disc, yang apabila ditampilkan didalam komputer melalui CD drive komputer itu maka informasi yang ada dalam disc baik berupa teks, gambar grafik, dan lain-lain  dapat  diakses  dan  dipindahkan  untuk  digabung  dengan  informasi lainnya.

## 6. Multimedia

## Pengertian Multimedia
Dalam  Kamus  Amerika  didefinisikan  bahwa  multimedia  adalah kombinasi  dari  penggunaan  beberapa  media  seperti  film,  slide,  musik, penerangan  dengan  text,  image,  khususnya  untuk  tujuan  pendidikan,  dan hiburan. Unsur-unsur seperti teks, audio (narasi, dialog, sound effect), musik, film,  video,  fotografi,  animasi  dan  grafik  merupakan  media  pendukung  yang tergantung  dan  terintegrasi  menjadi  satu-kesatuan  karya  multimedia.  Bentuk Interaktif  Multimedia  termasuk  didalamnya WebSite,  CDRom  Interactive, Program / software, Presentasi, Tutorial, Help section, dan bahkan Games .

## Elemen-elemen Multimedia
Seperti  yang  telah  diuraikan  pada  sub  bab  sebelumnya,  multimedia merupakan  sebuah  penggabungan  beberapa  elemen-elemen  ke  dalam  sebuah media, elemen-elemen yang digabungkan tersebut antara lain :
a. Teks ,  teks  merupakan  salah  satu  elemen  terpenting  dalam  multimedia, dengan  penggunaan  teks  penyampaian  informasi  akan  lebih  mudah dimengerti oleh pamakai. Teks biasanya merupakan informasi utama pada sebagian besar program multimedia.
b. Gambar ,  gambar  dapat  berupa  hasil  dari  foto,  gambar  yang  telah  diedit dan scanning .  Berdasarkan  cara  pembuatannya,  format  file  gambar  dapat dibagi menjadi dua, yaitu:
1. Bitmap , bitmap yaitu  sebuah  gambar  yang  terdiri  dari  kumpulan  bit pada memori komputer yang mendefinisikan warna dan intensitas setiap pixel dari gambar.
2. Vector , vector yaitu  sebuah  gambar  yang  disimpan  dalam  bentuk sekumpulan instruksi geometris
c. Suara (Audio),  Suara  yang  dihasilkan  dalam  multimedia  berisikan informasi suara yang kompleks, informasi tersebut antara lain :
 Berupa suara orang berbicara
 Musik,  berupa  suara  yang  dihasilkan  untuk  alat  musik  baik  akustik maupun elektrik.
 Efek  suara  (sound  effect)  adalah  suara  selain  percakapan  dan  musik, seperti suara gelas pecah, halilintar dan lain- lain.
Suara terdiri dari berbagai format file, antara lain:
1. WAV (Waveform),  m erupakan  format  audio  digital  yang  disimpan secara  digital.  File  ini  disimpan  dalam  bentuk  extension  *.WAV. (Yuswanto, 2003)
2. MIDI  ( Music  Instrument  Digital  Interface ),  merupakan  protokol  yang menghubungkan  informasi  yang  bersifat  musik  antara  lain  musik  dan soundcard .  File-file  MIDI  disimpan  dengan  ekstensi  *.MID  dengan menggunakan soundcard sebagai MIDI device. File MIDI tidak memuat data  bentuk  suara  apapun,  yang  ada  dalam  sebuah  file  MIDI  adalah informasi digital yang memerintahkan alat MIDI. (Yuswanto, 2003)
3. Animasi,  merupakan  gambar  yang  bergerak  dan  dihasilkan  dari pemasangan frame-frame gambar secara tepat yang untuk menghasilkan efek  pergerakan,  sehingga  tampil  seperti  hidup.  Animasi  ini  dapat dibagi menjadi 2 bagian, antara lain:
1. Computer Based Animation, animasi dihasilkan oleh komputer untuk membuat  suatu  visual  efek  yang  meliputi  perubahan  posisi,  bentuk, warna, struktur tekstur dari suatu objek.
2. Full  Motion  Video, merupakan  hasil  rekaman  dari  kamera  video yang berubah menjadi gambar hidup.
4. Video, merupakan sebuah animasi grafis yang mengambil objek secara langsung  melalui  video  dan  disimpan  dalam  dalam  bentuk  file  audio dan video.

## PEMBAHASAN
Mendesain Web pada Photoshop
1. Buka aplikasi photoshop. Mendesain dengan menggunakan Photoshop CS6.
2. Klik file  >  New ,  pilih Web pada preset .  Pilih  size  sesuai  ukuran  kalian  atau sesuai gambar berikut.
Gambar 2. Mengatur ukuran kanvas

## 3. Lalu akan muncul tampilan seperti berikut.
Gambar 3. Tampilan kanvas
4. Buatlah folder header dengan cara klik create a new group.
5. Lalu desain sesuai dengan imajinasi dan kreativitas anda.
6. Ulangi langkah 4 dan 5 untuk membuat folder footer.
7. Kalau  desain  sudah  selesai  dikerjakan,  kemudian  desain  anda  potong  – \potong menggunakan slice tool agar menjadi layout pada web.
8. Berikut ini contoh desain yang sudah di slice .
Gambar 4. Layout desain yang sudah di slice tool
9. Lalu klik file > safe for web .

## Gambar 5. Menyimpan hasil desain web
10. Tentukan  tempat  penyimpanan.  Isikan  nama  dan  pilih  format HTML  and images ,  klik save, dan  akan  didapatkan  file  dalam  bentuk HTML dan folder images .
Menambahkan Code dengan Adobe Dreamweaver
Setelah  anda  mendapatkan  file  HTML,  selanjutnya  akan  kita  tambahkan code dengan adobe dreamweaver untuk tombol navigasi, tulisan bergerak, video, dan music supaya tampilan desain web menjadi lebih sempurna.
1. Buka  hasil  HTML  yang  sudah  dibuat  dengan  Photoshop  menggunakan aplikasi Adobe Dreamweaver.
2. Klik Split untuk memudahkan kita menambahkan code .
Gambar 6. Menambahkan code dengan split
3. Setelah  anda  selesai  menambahkan code ,  klik Prieview  in  Google  Chrome (F12) lalu klik Save untuk melihat hasilnya.
Gambar 7. Melihat hasil melalui Google Chrome

## 4. Berikut ini hasilnya.
Gambar 8. Layout desain web secara offline

## Membuat video pembelajaran menggunakan Camtasia Studio

## Langkah membuat rekaman
1. Buka Camtasia. Ketika pertama kali  memulai Camtasia, Anda akan dibawa ke jendela Editor. Di sinilah semua fitur program Camtasia dapat ditemukan. Anda akan menggunakan Editor
2. untuk mulai merekam dan kemudian membersihkannya setelah selesai.

## Gambar 9. Aplikasi Camtasia studio
3. Klik  tombol  "Record  the  screen". Tombol  ini  terletak  di  sudut  kiri  atas jendela  Camtasia.  Mengeklik  tombol  akan  otomatis  meminimalkan  jendela Camtasia Editor dan membuka panel kontrol untuk merekam layar.

## Gambar 10. Tombol untuk merekam
4. Pilihlah  area  perekaman. Jika  Anda  akan  beralih  antara  beberapa  jendela, Anda akan merasa lebih mudah untuk merekam seluruh layar. Rekaman Full Screen diaktifkan secara baku.
 Anda dapat membuat area perekaman  yang  memiliki ukuran, dengan cara mengeklik tombol Custom.
 Sebuah garis putus-putus akan muncul di sekitar area yang akan disimpan.
Gambar 11. Area perekaman
5. Pilih masukan audio dan video. Jika Anda ingin menggunakan kamera web, aktifkan  dengan  mengeklik  tombol  Webcam.  Jika  Anda  memiliki  beberapa mikrofon  yang terhubung ke komputer, klik panah  bawah disamping tombol "Audio"  untuk  memilih  salah  satu  mikrofon  yang  akan  digunakan.  Gunakan menu  Audio  untuk  beralih  atau  menonaktifkan  sistem  suara.  Jika  Anda memilih  status  On,  sistem  sinyal  dan  bunyi  bip  akan  terekam  di  presentasi Anda.

## Gambar 12. Penggunaan audio dan video
6. Ujilah  masukan  audio. Jika  Anda  menggunakan  mikrofon,  ujilah  sebelum merekam  untuk  melihat  level  yang  muncul  di  bawah  panel  geser  volume. Sesuaikan panel geser volume sampai masukan berada di sekitar pertengahan panel geser.

## Gambar 13. Pengaturan volume
7. Bukalah  jendela  yang  dibutuhkan. Sebelum  mulai  merekam,  buka  semua jendela  yang  harus  Anda  buka  selama  presentasi.  Ini  akan  mencegah  Anda dari meraba-raba jendela yang Anda butuhkan.
8. Mulailah merekam. Ambil napas dalam-dalam, dan tekan tombol REC atau tombol  pintas  F9.  Sebuah  hitung  mundur  akan  muncul  di  layar.  Setelah menghilang,  semua  yang  Anda  lakukan  di  layar  dan  semua  yang  Anda katakan akan direkam.
9. Akhiri  rekaman. Setelah  selesai  dengan  presentasi,  tekan  F10  untuk menghentikan  perekaman.  Anda  juga  dapat  menghentikannya  dari  bilah tugas, namun tindakan ini akan direkam dan harus diedit.
 Setelah selesai merekam, pratinjau presentasi yang direkam akan muncul. Saksikan  pratinjau  tersebut  untuk  memastikan  semuanya  terlihat  bagus, kemudian tekan tombol "Save and Edit".
 Berikan  nama  yang  mudah  diingat  untuk  proyek  Anda.  Anda  dapat membuat  folder  baru  jika  Anda  ingin  membagi  proyek  ini  menjadi beberapa berkas.

## Langkah mengedit rekaman
1. Buka  proyek  tersebut  di  Editor  Camtasia. Jika  Anda  baru  saja  selesai merekam  dan  menonton  pratinjau,  proyek  secara  otomatis  akan  dibuka  di Editor.  Di  sinilah  Anda  akan  membuat  perubahan,  memotong  bagian  yang tidak diperlukan dan menambahkan transisi.
2. Pilihlah  dimensi  video. Sebelum  Anda  dapat  mengedit,  Anda  akan ditanyakan dimensi untuk video hasil akhirnya. Anda dapat memilih berbagai prasetel  dari  menu  tarik-turun.  Prasetel  ini  memiliki  tulisan  tujuan penggunaannya masing-masing.
 Gunakan  salah  satu  dimensi  otomatis.  Dimensi  ini  didasarkan  dari dimensi  rekaman  awal,  dan  ukurannya  diubah  untuk  menjaga  proporsi. Memilih  salah  satu  dari  ini  akan  membantu  mencegah  gambar  terlihat tidak bagus.
 Anda  dapat  mengubah  dimensi  editing  setiap  saat  dengan  mengeklik tombol Dimensions di bagian atas jendela pratinjau.
Gambar 14. Mengatur dimensi video
3. Buanglah  audio  dan  video  yang  tidak  diinginkan. Selalu  ada  beberapa kesalahan di dalam presentasi. Untungnya, Anda dapat menghapus kesalahan tersebut  dengan  cepat,  hanya  dengan  beberapa  klik.  Catatan:  Jika  audio  dan video berada pada trek terpisah pada lini waktu, menghapus bagian yang satu tidak akan menghapus bagian yang lain.
 Gunakan  alat  navigasi  lini  waktu  untuk  menemukan  titik  potong  yang tepat. Klik kaca pembesar untuk  memperbesar  lini waktu, untuk kontrol yang lebih tepat.
 Klik dan tarik tab merah di bagian atas alat navigasi Timeline. Tarik tab merah ke ujung bagian yang ingin dipotong.
 Tekan Space untuk memutar hanya bagian yang dipilih.
 Klik  tombol  Cut  (ikon  gunting)  di  atas  Timeline  untuk  menghapus seleksi.
4. Periksa  apakah  SmartFocus  sudah  diterapkan  dengan  benar. Jika  Anda memperkecil  dimensi  video,  Camtasia  akan  menerapkan  efek  SmartFocus untuk  memperbesar  dan  menggeser  presentasi  agar  fokus  pada  elemen  aktif, dan menempatkan fokus pada kursor dan jendela aktif.
 Anda  dapat  melihat  di  mana  SmartFocus  otomatis  ditambahkan  dengan mencari ikon di Timeline.
 Klik dan tarik ikon SmartFocus untuk bergerak saat transisi terjadi.
 Klik ikon SmartFocus lalu klik tombol Properties Visual untuk mengedit persis  bagaimana  transisi  terjadi.  Anda  dapat  membuat  penggeser  lebih lambat  atau  lebih  cepat,  memperbesar  atau  memperkecil  zum,  atau menghapus transisi SmartFocus seluruhnya.
 Anda  dapat  menghapus  semua  animasi  SmartFocus  dengan  mengeklik kanan pada salah satu ikon dan memilih "Delete all visual animations on media".
5. Tambahkan seranta pada presentasi. Seranta adalah alat bantu visual yang membantu  menarik  perhatian  pengunjung  pada  aspek-aspek  penting presentasi.  Seranta  dapat  berupa  teks  atau  simbol  atau  sorotan.  Anda  juga dapat menggunakan seranta untuk mengaburkan bagian layar.
 Gunakan  Timeline  untuk  menavigasi  ke  bagian  presentasi  yang  ingin Anda tambahkan seranta.
 Klik tombol Callout di atas Timeline.
 Buatlah  seranta.  Anda  dapat  menggunakan  berbagai  bentuk  pradesain, mengetik teks sendiri, atau memilih seranta animasi.
 Klik tombol "+Add callout" untuk menambahkannya ke presentasi.
 Pindahkan  seranta  ke  sekitar  presentasi  dengan  menariknya  di  sekitar jendela  pratinjau.  Anda  dapat  menyesuaikan  panjang  seranta  dari Timeline.

## Gambar 15. Penggunaan seranta

## Menerbitkan dan berbagi rekaman
1. Klik  tombol  "Produce  and  share". Setelah  video  diedit  dan  siap  untuk dilihat,  saatnya  untuk  mengekspor  dan  membaginya.  Klik  tombol  "Produce and share" untuk memulai.

## Gambar 16. Tombol mengekspor video
2. Pilih  tujuan  berbagi. Anda  dapat  berbagi  langsung  ke  layanan  yang  telah ditentukan, seperti Screencast.com dan YouTube. Anda  juga dapat membuat berkas  video  untuk  membaginya  sendiri  atau    mengunggahnya  ke  layanan lain. Ketika membuat berkas video, pilih opsi "MP4 Only". Ini akan membuat video tersebut dapat diputar pada hampir perangkat apa pun.
3. Masuklah  ke  layanan  berbagi  Anda. Jika  Anda  mengunggah  ke  YouTube atau  Screencast,  Anda  akan  dimintai  informasi  masuk  sehingga  Camtasia
dapat  terhubung  ke  layanan  tersebut  dan  mengunggah  video  dengan  akun Anda.

## Gambar 17. Membagi video ke Youtube
4. Gunakan setelan produksi  khusus. Jika  Anda harus membuat video dalam format  selain  yang  telah  disediakan,  klik  pilihan  "Custom  production settings"  ketika  menyelesaikan  video.  Anda  dapat  memilih  berbagai  format yang ada, termasuk WMV, MOV, AVI, dan bahkan GIF.
 MP4  adalah  format  yang  paling  universal  untuk  perangkat  dan  web pengaliran.
 Hati-hati  ketika  memilih  resolusi  produk  akhir  Anda.  Meningkatkan resolusi  akan  menghasilkan  penurunan  kualitas.  Sebagai  contoh,  jika Anda  merekam  dalam  resolusi  800x450,  hindari  penerbitan  dalam resolusi 1920x1080.
 Seimbangkan antara ukuran dan kualitas. Ketika mengatur pilihan video, Anda akan melihat panel geser "Smaller file" di sebelah kiri dan "Higher quality"  di  sebelah  kanan.  Memindahkan  panel  geser  akan  berpengaruh terhadap  kualitas  akhir  video.  Jagalah  ukuran  berkas  jika  Anda  akan mendistribusikan video ke banyak orang.

## Gambar 18. Tombol pilihan menyelesaikan video
5. Putuskan  antara  video  saja  atau  mengemasnya  dengan  program pemutar. Camtasia  dapat  menghasilkan  video  yang  dibuka  dengan  bilah
pengontrol Camtasia. Meskipun Anda tidak dapat mengunggahnya ke layanan video  pengaliran,  Anda  dapat  menggunakannya  di  situs  Anda  sendiri  atau mendistribusikannya melalui cara lain.

## HASIL
Penelitian  ini  dilakukan  untuk  mengembangkan  media  pembelajaran sehingga  dapat  meningkatkan  mutu  pendidikan  di  sekolah  maupun  di  Perguruan Tinggi. Penelitian ini berlangsung dalam empat tahapan yaitu pembuatan template untuk  desain  web,  menambahkan  tampilan  desain  web,  perekaman  video  dan pembuatan video.
Tahap pertama dengan Adobe Photoshop bagaimana cara membuat desain web  dengan  template  yang  sudah  ada,  dengan  langkah  –  langkah  yang  sudah diberikan.  Tahapan  dalam  pembuatan  desain  web  adalah  menyiapkan  template yang  menarik,  membuat  design,  dan  menyimpan  hasil  design  dalam  bentuk HTML.
Tahap  kedua  menambahkan  tampilan  desain  web  dengan  menyisipkan music,  video  dan  tulisan  yang  bergerak  menggunakan  bantuan  Adobe Dreamweaver. Agar hasil dari desain web tadi menjadi menarik dan hidup.
Tahap  ketiga  menggunakan  aplikasi  Camtasia  Studio  merupakan  tahapan perekaman  video  yang  digunakan  untuk  media  pembelajaran.  Tahapan  dalam perekaman video adalah
1. Membuka aplikasi Photoshop CS6
2. Membuka Adobe Dreamweaver
3. Mengaktifkan Sound Recorder
4. Mengaktifkan Camera Recorder
5. Merekam
Tahap  keempat  merupakan  tahap  terakhir  dimana  kegiatan  yang  telah direkam  tadi  dibuat  video  untuk  media  pembelajaran  dalam  bentuk  seperti  CD, DVD,  Ipod  dan  HD.  Selain  itu  video  yang  dihasilkan  dapat  dikirim  ke  Youtube, Web dan Internet.

## KESIMPULAN
1) Penggunaan  aplikasi  Photoshop  selain  untuk  desain  grafis,  seperti  editing foto, iklan, lukisan dan icon . Dapat juga untuk membuat tampilan desain web dengan mudah dan cepat.
2) Menambahkan tampilan desain web berupa music, video dan tulisan bergerak dengan menggunakan Adobe Dreamweaver.
3) Aplikasi  Camtasia  Studio  untuk  pengembangan  media  pembelajaran  berupa video pembelajaran.
4) Video  pembelajaran  yang  dihasilkan  dapat  dilihat  dengan  format  .wav  .flv .swf. Dengan kualitas CD, DVD.

## DAFTAR PUSTAKA
A.Taufiq  Hidayatullah. Cara  Mudah  Modifikasi  Foto  Digital  Menggunakan Photoshop  CS6  dan  Photo  Effects  Studio .  Buana  Pustaka.  Yogyakarta. 2013
Azhar Arsyad. Media Pembelajaran . PT. Raja Grafindo Persada. Jakarta. 2003
Davidson. Web based learning: designing, implementation, and evaluation . Upper Saddle River, NJ: Pearson Education, Inc. 2003
Dharna A. Ilustrasi Digital dan Teknik Profesional Photoshop. Universitas Atma Jaya Yogyakarta
Fundamental of camtasia studio, TechSmith Corporation, 2010
http://im-informatika.blogspot.com/2014/12/cara-desain-web-simpel-dan- mudah.html
http://www.burung-net.com/2015/03/pengertian-dan-fungsi-adobe- dreamweaver.html
https://jery21tik.blogspot.com/2015/05/pengertian-dan-penggunaan- camtasya.html
Klein, J. D., & Pridemore, D. R. Effects of individual versus cooperative learning and  type  of  reward  on  performance  and  continuing  motivation. Contemporary Educational Psychology . 1992
Richard  A.  Schwier  dan  Earl  R.  Misanchuk. Interactive  Multimedia  Instruction , New Jersey : Educational Technology Publications. 1993
Widodo, C. Buku Panduan Menyusun Bahan Ajar . PT. Elex Media Komputindo. Jakarta. 2008