Senin, 02 Maret 2015

Tutorial Adobe Photshop dan Adobe Image ready: membuat gambar bergerak .gif

Tutorial Adobe Photshop dan Adobe Image ready: membuat gambar bergerak .gif
Nah, anda mungkin selama ini berkutat hanya dengan .jpg teruuus… tapi nggak tertarik untuk membuat gambar bergerak berformat .gif. mungkin kalau flash banyak lagi di internet kayak kartu ucapan, banner iklan, dll. Tapi khan nggak semua komputer punya flash player. Atau plugin flash.
Gampang pol kok! Buka photoshopmu, buat tulisan terserah. Lalu simpan dalam format .psd
Setelah itu buka tetangganya Photoshop, yaitu ImageReady. Lalu buka file .psd mu tadi.
Trus… jangan bengong aja. Hampir sama kok tampilannya dengan photosop. Nah, kemudian klik bagian bawah tuh. Seperti gambar di bawah. Namanya ‘duplicates current frame’ (baca: duplikeitz karrent freim).
Kemudian klik animation nomer satu. Lalu pada layer, pastikan yang terpilih adalah layer tulisan yang dalam hal ini layer bertuliskan dzofar. Kemudian, pada gambar, pastikan tool yang terpilih adalah move tool. Geser tulisan dzofar ke kiri. Seperti yang ada di gambar di bawah ini.
Nah, setelah itu, ganti klik animation nomer dua. Lalu geser tulisan dzofar ke kanan secukupnya.
Trus langkah selanjutnya adalah klik ‘tweens animation frames’. Pastikan animation yang terpilih adalah nomer 2.
Udah diklik OK aja, nggak usah ribet-ribet! Nah, hasilnya animation-nya akan bertambah banyak. Klik ‘play’. Maka gambar akan bergerak ke kiri dan ke kanan.
Tergantung u pilih bertambah berapa. Defaultnya sih ‘frames to add’-nya 5 frame. Silakan ubah-ubah sendiri. Pokoknya semakin banyak framenya, semakin halus gerakannya. Nggak patah-patah gitu! (pada contoh awal di atas, jumlah ‘frames to add’-nya 20)
Trus untuk delaynya, defaultnya 0, tinggal diganti-ganti aja, semakin lama ya semakin patah-patah. Trus untuk select all, tinggal klik segitiga sebelah pojok kanan atas, pilih select all frames.
Untuk menyimpan, klik file> ‘save optimized’ atau ‘save optimized as’. Pilih yang extentionnya gif.

Membuat Animasi (Gambar Gerak) Dengan Photoshop CS4


Langkah-langkahnya :

1. Buka Photoshop dan buat New document, disarankan untuk tidak terlalu besar baik ukuran dan pixelnya


2. Klik Window >> Animation, dibawah akan ada menu seperti gambar dibawah ini
photoshop animasi


3. Setelah itu kita buat gambarnya terlebih dahulu, saya ingatkan disini akan banyak sekali layer jadi mohon untuk bersabar dalam mengikuti tutorial ini, ini sudah saya buat sesimpel mungkin imagenya... :D

Pertama-tama Kita buat tulisan Dulu seperti dibawah ini sebagai contoh
photoshop animasi
Perhatikan Layernya: Ilmu sendiri, Grafis juga sendiri.


4. Setelah itu, kita buat beberapa background warna, Klik Layer Background, lalu buat new layer (Ctrl+Shit+N) lalu isi dengan Fill tool warna sesuka hati
photoshop animasi

Jangan lupa untuk selalu memperhatikan layer disini. Setelah itu klik Lasso kemudian seleksi sesuka hati seperti yang saya lakukan di layer 1 (layer berwarna biru disini)
photoshop animasi

Kemudian Klik kanan dibagian terseleksi lalu pilih Feather... lalu isikan Feather Radiusnya menjadi 60, kemudian tekan Ctrl + Shift + I lalu tekan Delete kemudian tekan Ctrl + D maka akan jadi seperti gambar dibawah ini
photoshop animasi
Masih saya ingatkan, jangan lupa perhatikan layernya... hahahaha


5. Setelah itu buat lagi layer baru seperti cara diatas... lakukan pewarnaan sesuka hati asal berbeda dengan layer pertama(biru), kemudian lakukan lagi langkah nomor 4 tapi beda tempat, misalkan seperti gambar dibawah ini
photoshop animasi
Caranya sama seperti langkah nomor 4 hanya beda tempat dan warna, saya tidak mau tutorial ini terlalu panjang yang sepertinya akan membosankan... hahahahaha....


6. Setelah itu lakukan langkah ini, Layer 1(biru) jadikan opacitynya menjadi 0% , layer 2(Hijau) menjadi 0% , dan Layer 3(ungu) Menjadi 0%, Layer bertuliskan “GRAFIS” geser kebawah sampai tidak terlihat seperti pada gambar dibawah ini
photoshop animasi
Jangan lupa untuk selalu menekan Shift saat memindahkan Layer-layer tersebut, lalu geser ke atas layer yang bertuliskan “ILMU” maka akan terlihat blank document yang kita buat.


7. Saatnya kita mulai menganimasikan document ini :D kita beralih ke box animation yang sudah kita aktifkan pada langkah pertama diatas tadi... dan jangan lupa masih perhatikan layernya disini :D Pertama-tama mari kita panjatkan puja dan puji syukur kehadiratnya... wkwkwk canda gan... pertama-tama klik menu Duplicate Selected Frame
photoshop animasi
Maka akan ada duplikasi dari Frame pertama yang blank ini seperti dibawah ini
photoshop animasi

Kemudian geser kebawah Layer yang bertuliskan “ILMU” ketempat semula(Awal) dikira-kira saja,
photoshop animasi
Lalu klik Tweens animation frame
photoshop animasi
Kemudian akan muncul Windows seperti dibawah ini
photoshop animasi
Isi Frames to Add dengan jumlah frame yang akan dibuat, semakin banyak frame akan semakin lembut gerak dari animasi kita tapi juga semakin besar sizenya nanti, saya pake 5 Frame disini, lalu klik OK, maka akan jadi seperti gambar dibawah ini
photoshop animasi
Kalu klik yang saya tandai merah itu maka tulisan akan berjalan.


8. Lakukan langkah 7 pada Layer “GRAFIS” hanya saja geser keatas jangan kebawah lagi... hahaha.... Jangan lupa untuk klik “Duplicate Selected Frame” dulu sebelum menggeser Layer terpilih dan melakukan “Tweens animation frame” kalau sudah akan menjadi seperti ini
photoshop animasi
Ok juragan... masuk ke perubahan yang lain seperti baja hitam RX menjadi ROBO... wkwkwk....


9. Klik  Duplicate Selected Frame lagi lalu klik layer 1(biru) kemudian Opacitynya naikan kembali menjadi 100%
photoshop animasi
Lalu Klik lagi deh “Tweens animation frame”


10. Lakukan langkah nomor 9 pada Layer 2(Hijau) dan Layer 3(Ungu)


11. sudah jadi gan, coba dulu di Klik Play, kalau sudah puas, kita tinggal Save document ini gan, cara Savenya pun berbeda, mari kita mulai lagi... wkwkwk bahasa saya ancur...
Klik File >> Save for Web & Devices...(Alt + Cntrl +Shift + S) maka akan muncul Windows seperti dibawah ini (BW Killer gan... haha...)
photoshop animasi
Zoom:
photoshop animasi
Perhatikan yang saya tandai merah diatas, Looping Optionsnya Poreper gan... haha... Kalau sudah tinggal klik Save, pilih direktorinya lalu View aja gan, kl masih blm bergerak mungkin salah ekstensi diatas yang saya tandai merah, pokoknya harus GIF.

Kalau terlalu cepat, mungkin Delaynya bisa ditambah, delay ada dibawah Frame dalam box Animation, disana akan ada pilihan 0Sec, 0.2 Sec. , 0,5 Sec. Sdan seterusnya....

12. Selesai gan...
hasilnya kira2 seperti ini:
photoshop animasi
Note:
Bagi yang masih menggunakan CS kebawah mungkin masih disertakan Adobe Image Ready, Image ready bisa mengaplikasikan tutorial ini, namun kendalanya kita harus mentransform image dari Photshop ke Image Ready dengan bersamaan, jika Photoshop di Close maka Image yang ada dalam Image ready akan hilang seketika, lebih mudah menggunakan Image Ready memang tapi di CS4 Image Ready tidak di ikut sertakan menjadi aplikasi berbeda tapi sudah disatukan dengan Photoshop CS4 itu sendiri.

Menggambar Sketsa Anime di software Paint Tool SAI


Pada artikel sebelumnya saya telah memperkenalkan pada sobat sobat tentang layer linework yang ada pada software Paint Tool SAI.nahh kali ini saya mencoba memberi sedikit ilmu mengenai penggambaran sketsa anime di software Paint Tool SAI pada sobat sobat sekalian.

Berikut adalah Tutorialnya: 

  • Buka software Paint Tool SAI, klik menu file → New → masukan ukuran kertas yang anda inginkan,dan tentukan satuan ukurannya,apakah mm atau inch,bisa juga memilih ukuran kertasnya pada tulisan preset.lalu klik OK

Contoh: menyesuaikan dengan ukuran kertas A0,dengan satuan mm
  • klik menu layer,lalu pilih new linework layer,atau bisa juga mengklik new linework layer yang berada di ujung kiri jendela kerja,perhatikan gambar berikut:
  • Buatlah kerangka gambar terlebih dahulu menggunakan tool Curve,yang berada di linework layer.Agar saat melakukan pembentukan gambar,dapat berjalan dengan lancar dan mudah ☺
tentukan ukuran curve/garis terlebih dahulu
  • Mulailah membentuk kerangka anime dengan menggunakan tool Curve,berilah nama pada layer,agar nantinya tidak ribet.contoh kerangka gambar:
layernya saya beri nama "kerangka"
  • Selanjutnya buatlah kembali linework layer,caranya sama seperti tadi,beri nama pada new linework layer.Seperti biasa,selanjutnya bentuklah rambut,mata,hidung,mulut,baju,celana,dan lain lain dengan tool Curve.Hasilnya seperti gambar berikut:
  • Lancipkan sudut pada bagian ujung rambut,dan sudut lainnya dengan tool pinted/rounded.
klik pada ujung rambut yang sudutnya akan di lancipkan atau di tumpulkan
  • Jika titik CP/garisnya dianggap kurang rapi,gunakan Translate CP,seperti yang sudah di jelaskan pada artikel yang berjudul Mengenal Layer Linework Pada Software Paint Tool SAI
  • Jika kamu sudah menganggap puas dengan gmbarnya,sembunyikan Show/hide layer atau tanda/simbol seperti mata yang ada di sebelah layer yang berjudul kerangka,menghilangkannya dengan cara di klik kiri 1x.
Klik 1x untuk hide layer
  • Jika Show/hide layer sudah d klik,artinya Show/hide layer telah di sembunyikan,klik lg jika anda ingin memunculkannya kembali.jika anda berhasil menyembunyikan Show/hide layer,maka gambarnya akan seperti berikut:
Hasil akhir Sketsa
  • inilah hasilnya ☺

  • Selanjutnya saya akan menambahkan sketsa Bird Art untuk mempercantik gambar di atas,gambar Bird Artnya pada layer sketsa,agar saat melakukan colouring tidak mengalami kesusahan,pilihlah Tool Curve,lalu pilih ukurannya,kali ini saya menggunakan ukuran Curvenya 20.pilih juga jenis curvenya,apakah jenis curve yang lancip ataupun yang tumpul
Inilah hasilnya
  • Lancipkan ujung ujung garis dengan menggunakan Tool Pressure,klik dan tekan titik CP serta geserkan ke kiri untuk memperlancip garis,sebaliknya klik dan tekan titik CP serta geserkan ke kanan untuk menumpulkan garis.
Hasil akhir setelah di edit menggunakan tool Pressure

Cara sederhana membuat website dengan Microsoft FrontPage 2003

Seperti halnya Microsoft Publisher 2007, Microsoft FrontPage 2003 juga menganut ilmu WYSIWYG (What You See is What You Get) alias apa yang kita buat designya, jika dibuka dengan web browser persis seperti design yang kita buat. Sebenarnya boleh dibilang Microsoft FontPage 2003 ini adalah “Adik Kandung” dari Microsft Publisher 2007, karena program ini lahir duluan.
Microsoft FrontPage 2003 ini bisa anda dapatkan dengan cara mengistall Microsoft Office 2003. Keunggulan program ini adalah mudah penggunaannya, anda tidak perlu dipusingkan dengan urusan pembuatan kode HTML, karena akan otomatis dibuatkan oleh program, memiliki tampilan yang mirip dengan Microsoft Word. Jadi saya yakin anda tidak akan mengalami kesulitan yang berarti jika sudah terbiasa “Utak Atik dan Surat suratan” dengan Microsoft Word.
Selain mode WYSIWYG (mode Normal), Anda bisa mendesain menggunakan tampilan HTML. Mode ini berguna saat Anda ingin menyisipkan kode JavaScript. Ini salah satu kekurangan FrontPage, yaitu tidak memiliki fasilitas dukungan penuh JavaScript.
Okey deh, nggak usah panjang panjang ceritanya, langsung aja kita praktek secara sederhana, anda siap kan?…
Langkah awal buatlah folder di computer anda, Misalkan nama folder MyWebsite. Folder ini akan digunakan untuk menyimpan web yang anda buat melalui Microsoft FrontPage 2003. Selanjutnya buat juga Sub Folder, Misalkan MyImages, dan kopikan (simpan) semua gambar yang akan ditampilkan di website anda pada sub folder ini.
Selanjutnya buka program Microsoft FrontPage 2003. Jika sudah terbuka, amati!! Mirip Microsoft Word kan? Kumudian Klik Menu Format >> Theme.. (maka dilayar sebelah kanan akan tampil pilihan tema yang bisa anda pilih. Pilih misalkan “Slate
Klik Menu Table >> Insert >> Table, kemudian isi kolom sesuai dengan yang anda inginkan misalkan seperti gambar dibawah ini ( lihat kotak warna merah)
Maka akan muncul table yang terdiri dari 4 baris, dimana baris ke 1 untuk Header, ke 2 untuk  menu halaman, misalnya Home, Product, Contact, About dll, baris ke 3 untuk konten (isi) dari halaman website dan baris ke 4 untuk footer.
Nah, sekarang kita buat headernya. Seperti yang saya katakan di awal tadi kita harus membuat sub folder MyImages. Sudah punya gambar header belum?, jika belum terpaksa minta bantuan “Mbah Google”. Cari gambar header dengan keyword “header” pasti banyak tuh..!! pilih aja mana yang anda suka, tapi jangan lupa lebarnya dibuat 950 pixel sesuai dengan kolom yang kita buat diatas. Jika sudah punya, arahkan kursor pada baris ke 1 selanjutnya Klik Menu Insert >> Picture >> From File. Nah pilih gambar heradernya.
Selanjutnya pada baris ke 2, kita buat menu link untuk halaman misalkan Home, Product, About Us, Contact Us dll. Caranya tempatkan kursor pada baris ke 2, selanjutnya Klik Menu Table >> Insert Cells, Isi “Number Of Culomns, misalkan diisi dengan angka 6. Dan tuliskan Rencana menu yang akan dibuat.
Pada baris ke 3 adalah konten (isi) dari web kita. Disini anda bisa membagi menjadi 2 atau 3 kolom, terserah mana yang anda suka. Cara membaginya sama dengan membuat menu untuk link halaman.
Dan pada bagian baris ke 4 adalah untuk footer, caranya sama dengan anda membuat header. Jika tidak punya gambar untuk footer, lagi lagi anda harus minta bantuan “Mbah Google” atau anda bisa membuatnya sendiri.
Selanjutnya simpan hasil design website anda. Jangan lupa anda harus menyimpannya dengan nama index.html. Untuk membuat halaman baru, anda tinggal mengcopy index.html kemudian di rename dengan nama yang lain, misalnya Product.html, Contact.html, About.html dll, dan selanjutnya edit halaman tersebut.
Tahap selanjutnya anda harus membuat hyperlink untuk menghubungkan halaman yang satu dengan halaman yang lain. Caranya : blok kata yang akan dipasang hyperlink, misalnya: Blok menu Product  >> klik kanan pada mouse anda >> hyperlink properties >> isi bagian addres dengan alamat yang akan dituju, misalnya Product.html >> klik ok. Daaaaaaan selesai…!!! Sekarang lihat index.html dengan web browser anda…!!! Keren kan..???
Dan tahap akhir adalah meng-upload website anda ke server. Caranya sama dengan Upload website yang dibuat dengan Publisher 2007