Notes from Eny

eny erawati wrote:

Notes from Eny

Notes from Eny’s Library :

Sebenarnya, aku malu menuliskan ini. Kalian selalu lebih canggih dariku. Dan karya kalian selalu membuatku ngiler. Tapi, prinsipku sederhana. Seperti halnya aku, kalo ndak mudheng pada sesuatu, biasanya aku sembunyi dulu. Menunggu dan mencari tahu, siapa dan berapa banyak yang sama-sama tidak tahunya denganku. Kalo banyak, baru aku maju ke bapak dosen dan menceritakan masalah berjamaah di kelas itu. Kalo sedikit, karena malu, aku tetep duduk di pojok, dan belajar sampai keringetan, sebisaku. Sambil menunggu helper, ngintip kerja teman di sebelah mejaku. Hehe.

Biasanya, aku cukup beruntung punya sesuatu untuk dimasukkan di Kantung atau Kotak ajaib bapak bapak itu. (kalian tahu kan siapa maksudku). Dan kubagikan pada siapapun yg mengulurkan flashdisk bersih padaku. Tapi kali ini, aku menemukan jalanku tanpa cara seperti itu. Jalan yang ketemu karena PSDku rusak. Maka aku harus nyasar ke Firework dan bergantung disitu. Lalu seorang teman ganteng pernah mengatakan sesuatu yang menyentak otakku. “Flash ya?! Cuma perlu sedikit logika” … ‘Sedikit’, katanya. Padahal saat itu, aku sedang diajari si bapak, untuk yg kedua kalinya, dan aku belum juga bisa, babar blas. ‘Sedikit’ katanya. (cukup membuatku cemberut pdnya)

Maka, aku sekolah di Help nya Adobe sampai keringetan. Dan jawaban yg kudapat benar benar membuatku terpojok. Aku harus belajar sendirian (lagi). Karena waktu aku bertanya, dengan sabar beliau menjawabku ‘emang mau bikin yang seperti apa sih, kok sampe perlu pindah ke catalyst?’ … whuah. Malluww .. aku.

Dan ini lah cerita kronologis kejadiannya. Karena kalau kalian hanya melihat karyaku, ndak akan mudheng apa istimewanya. Buatanku kan belum pernah ‘istimewa’. Tapi asli, selalu buatan saya J

Meski tanpa validasi dari dosen web,tapi semoga, catatan kecil ini bisa menjadi helperku, dan helpermu teman….

WEB DESIGN STATIS :

  • Selalu masuk dari keluarga Adobe. Sementara ini, corelnya di-laci-kan dulu lah. Pilihannya ada dua. Boleh memilih dari Photoshop (software bitmap sejuta umat) atau dari Ilustrator (jika kalian pecinta vektor sepertiku). Tak perlu di safe as. Tetap pada file asli. Atau sederhananya, bekerjalah dengan 3 jendela. (FB nya matiin dulu lah)
  • Jika tujuannya web statis, maka, jendela kedua adalah Firework. Kenapa? Jika selama ini kalian hanya menggambar (copas, pen tool, opacity dan perlakuan apapun di dalam sana) maka kalian tidak akan terganggu dengan typeface yang diraster ketika hasil desain di ekspor ke Dreamweaver. Tapi jika kalian penyuka huruf sepertiku, (maklum, lebih senang menjadi tukang tulis) maka desain terasa ‘garing’ jika tak ada kalimat sebagai elemen aktor kedua nya. Dan rasterasi, membuat tampilan huruf menjadi jelek tenanan. Solusinya adalah memasukkan tulisan dari Firework.
  • Begitu pula slicing, pakailah penggaris ketika menggambar di photoshop atau ilustrator. Dan tetap memakai penggaris ketika akan menata di firework. Penggaris itulah penunjuk jalan slice kita. Jangan lupa menyalakan ‘snap to guide’ nya. Supaya pisau cutter ‘slice’ kita menempel pada penggaris.
  • Masukkan konten kalimat-kalimat indah itu dari Firework. Memakainya persis sama dengan photoshop. Lebih mudah dari ilustrator malah. Tatalah konten kalian sebagus mungkin, tapi jangan melupakan si penggaris.
  • Pasang link. Ketika melakukan seleksi, maka properti akan memunculkan jendela link. Itu berarti si firework bertanya, apakah kita akan memberinya alamat htm, atau dia akan menjadi elemen grafis yang statis? Firework memberi 2 opsi, memberi alamat htm, atau kosong. Opsion itu hanya berarti bahwa Firework akan memberitahu siapapun di dalam keluarga adobe, bahwa seleksi tersebut adalah sebuah amplop yang akan dipakai untuk mengirimkan isi amplop dengan alamat tujuan tertentu. Belum ada alamatnya, tapi sudah ada isinya, yakni konten yang kita seleksi itu.
  • Maka route WEB DESIGN STATIS akan menjadi seperti ini :

 

Figure 1 Workflow WEB DESIGN STATIS

 

 

WEB DESIGN SEMI DINAMIS :

Untuk web SEMI DINAMIS, jalurnya agak berbeda, tapi inti routenya hampir sama. Memang perintahnya memakai FLA, dan kita juga akan ke FLA. Tapi, karena ada motionnya, maka ceritanya menjadi sedikit lebih panjang. Di keluarga Adobe, ada beberapa berundulan yang jarang keliatan oleh desainer handal seperti kalian. Beberapa malah menyebutnya, tidak penting, atau malah memberinya predikat GeJe (gak jelas). Padahal, ini berundulan yang sangat penting. Terutama jika yang harus mendesain web, adalah orang gaptek sepertiku  J

  • Seperti biasa, mulailah menggambar dari dalam keluarga ADOBE. May be it Psd or Ai, as you wish. Pokoknya dari ‘dalam’. Logikanya sama dengan web statis, tapi, kita lebih leluasa menata. Jangan pernah menyepelekan penggaris (kenapa mengingatkanku pada gambar teknik ya).
  • Buat beberapa halaman rancang, lalu mari kuperkenalkan pada berundulan pertama. Dia bernama Catalyst. (nama yg cantik). Berfungsi sama persis seperti Firewoks. Maka dia akan menyapa dengan pertanyaan standarnya, mau membuat proyek dari Psd atau dari Ai? Si nama cantik dengan tata bahasa sapa yang istimewa. (pendapat pribadi loh ya).
  • Keistimewaannya bermula dari sana, dan berlanjut hingga ke dalamnya. Tanpa Script, kita memberi perintah pada seleksi kita, may it gonna be our button or our movie clip, dengan jendela parameter/opsi yang mudah terlihat bagi mata gaptek (sepertiku). Lengkap dengan timeline-nya. Jadi, ketika kita membuat seleksi itu menjadi sebuah button misalnya, yang jika mouse berada diatasnya, maka seleksi itu akan berganti ganti warna, kita bisa mengatur perintah padanya -untuk nge’blink’ selama berapa lama. Atau bisa kita atur, ease in-ease outnya akan ber-kurva apa. (kalo lupa ease in ease out itu apa, tanya pak Dody lagi aja. hehe). Dan aneka perintah animasi lainnya. Tanpa dipusingkan dengan keharusan menuliskan scriptnya. (aku agak alergi script, kayaknya).
  • Dan sekali lagi, yang menurutku istimewa adalah, semuanya tampak mata. Movie clip logo misalnya, tidak perlu ‘click-able’ kan? Maka kita bisa memilih seleksi logo kita untuk muter muter saat mouse hover misalnya, dengan pilihan perintah yang gampang, dan user friendly banget. Dan sekali lagi, tanpa menuliskan scriptnya. Tidak percaya? Buka lah sendiri.
  • Silahkan berpuas puas memberi perintah, tanpa script, hingga masing masing halaman rancang kita siap untuk dimasukkan ke dalam amplop. Saat itulah ekspor to FLA dilakukan.
  • Tunggu, berundulan kedua yang perlu diperkenalkan adalah Flash Builder. Jangan khawatir, bahkan Help bilang bahwa FB hanya menjembatani bahasa catalyst ke FLA. Istilahnya ‘semacam men-zip-kan file catalyst’ agar gampang masuk ke FLA. Begitu saja. Istilahku, Flash Builder itu adalah ‘amplop’ nya. Dan sekarang, file kita ‘Sudah ber script tanpa menulis script’, dan sudah beramplop, maka tinggal mengirimkannya ke kantor pos.

Catatanku hanya sampai disini. Karena jalan berikutnya adalah jalan nya pak Andreas J

So, happy web design-ing.

eny_erawati@yahoo.com

*Semoga, semester besok, makin banyak sudut dengan meja dan colokan di kampus. Amin.*

Figure 2 Workflow WEB DESIGN DINAMIS

 

Iklan

About enyerawati

i am just an ordinary girl, who fall in love with al Hikam, i have a bit of phographic background from Institut Kesenian Jakarta, and having a class at Desain Komunikasi Visual Univ. Negri Malang at the moment. i am an old student, well, ... kind of :)
Pos ini dipublikasikan di eny bicara Fenomena. Tandai permalink.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s