Nurdiana

Sabtu, 27 Oktober 2012

cara membuat banner dengan adobe photoshop

Cara Membuat Banner dengan Adobe Photoshop

Sobat Solution pernah pake software Adobe Photoshop? baik untuk photo editing atau web design? , tentunya Sobat Solution tahu bahwa Blog dan website akan semakin indah dan cantik apabila dilengkapi dengan banner-banner sehingga membuat sebuah website atau blog terlihat lebih hidup. Kali ini saya mencoba memberikan panduan bagaimana cara membuat sebuah banner sederhana hanya dengan menggunakan adobe photoshop. Penasaran?, Yuk kita baca bersama .........

Untuk memulai membuat sebuah banner, Sobat jalankan Adobe Photoshop nya dulu. Kemudian Sobat ikuti langkah-langkah berikut ini :

Klik file – New atau tekan Ctrl + N
Pilih custom dan ganti ukuran Width dan Height dengan ukuran 125.

Buka kunci/gembok pada layer Background atau Layer 0, dengan mengklik layer 2 kali.

Setelah dibuka, rubah warna layer menjadi merah, dengan cara klik kanan pada layer dan pilih Blending Options dan pilih Color Overlay. Lalu ganti dengan warna merah.

Setelah warna merah, kita buat satu layer dupkat dengan warna biru. Tekan Ctrl + J (untuk menduplikat layer). Dan rubah dengan warna biru seperti cara pada No. 5
Buat 5 atau 6 warna yang berbeda. Merah. Biru, hijau, kuning, ungu.
Sekarang saatnya membuat animasi pada gambar untuk membuat gambar kelap-kelip. Klik Window pada “Menubar” lalu plih animation.
Posisikan kursor pada layer pertama yaitu layer berwarna merah.
Setelah itu Klik “Make Frames From Layers” di kolom animation di pojok kanan atas.
Lalu atur semua timing animasinya bisa dimulai dari 0.1 sampai 5 detik.
Setelah selesai menyeting timingnya dan sudah bagus coba di coba dengan menekan tombol play yang ada di bawah kolom animation.

Setelah sukses tinggak di Save. Ingat dalam penyimpanannya kita menggunakan format. Gif. Jadi untuk ini klik “File” lalu Save for Web & Devices (Ctrl + Shift + S). dan pilih save dalam ekstensi file gif.

Jumat, 26 Oktober 2012

membuat animasi dengan adobe photoshop

torial membuat animasi dengan adobe photoshop

Software : adobe Photoshop CS3 – CS4 .. CS2 blom cek udah ada fasilitas animasinya ato belom yaa.. mungkin masih pake Image Ready.

By Request : Saya bikin Tutorial ini karena banyak yang request.

Saya coba buat dasar-dasar nya aja.. atau gimana sih cara buat suatu gambar itu jadi gerak.. belom masuk ke berubah bentuk ya.. cuman gerak aja..

Pembuatan animasi di photoshop ada 2 cara :

1. Import Langsung dari layer ( Make frame from layers – buat yang udah EXPERT )

2. Manual ( ini khusus buat menggerakan benda aja)

Sekarang kita mulai dengan yang manual dulu aja yaa.. dari dasar dulu la..

Pertamax.. hehehe buka dokumen baru :

Buat kotak dengan rectangle marquee tool. Klik Select > Inverse.. lalu warnai dengan warna Hitam Klik Edit > Fill > Black

Sekarang buat lingkaran dengan Elliptical Marquee tool.. ( Sambil tekan tombol SHIFT biar Bener-bener bulet jadinya )..

Warnai dengan Gradient TOol > Radial Gradient. Warna Terserah aja..

Kalo ngikutin nya bener … jadinya kayak gini ..

Sekarang kita gerakkan Bola nya..

Klik Windows > Animation, maka muncul Animation Bar..

Klik Duplicate Selected Frame .. Muncul Frame baru dengan posisi bola yang sama..

Sekarang pindahin bola yang ada di frame 2 ke tepi kiri tengah..

Klik Tween Animation Frame untuk membuat Frame-frame dari posisi bola di atas ke posisi bola di samping secara otomatis.. kalo mau gerakan nya halus.. frame nya banyakin aja.. saya pake 5 frame aja..

Sekarang udah jadi deh.. gerakan dari atas ke samping kiri.. coba aja tekan tombol Play.

Pake cara yang sama .. Sekarang klik frame terakhir.. Klik duplicate selected frame lagi.. Pindahkan bola ke bawah tengah.. lalu buat Tween animation frame.sebanyak 5 juga.. Lalu animasikan bola dari tengah bawah ke tengah kanan.. animasikan lagi..

Untuk yang terakhir jangan sampe kembali ke posisi awal.. tapi buat renggang sedikit..

Klik tombol Play.. Kalo udah Ok save di GIF..

Klik File > Save For Web and Devices

Hasilnya :

membuat file tanda tangan dengan adobe photoshop

Dalam membuat sertifikat atau kartu pengenal, pasti membutuhkan scan-an tanda tangan. Untuk membuat filenya, kita bisa gunakan software Adobe Photoshop.

Bagi kamu yang masih belum tau caranya, bisa ikuti tutorial dibawah ini:

Tanda tangan di kertas
Ambil gambar tanda tangan kamu dengan menggunakan scanner atau misal tidak punya bisa gunakan kamera HP atau lainnya dan disimpan dengan extension JPG atau JPEG
Jalankan Adobe Photoshop, dan buka file JPG atau JPEG tanda tanganmu
Agar terlihat jelas penyinarannya gunakan Auto Levels atau melalui keyboard Ctrl+Shift+L
Kemudian gunakan tools Magic Wand Tool dan klik di gambar tanda tanganmu tapi yang bagian kertasnya, bukan tanda tangannya .
Klik menubar Select, pilih Similar
Ke Layer, double click di Background lalu OK
Kemudian pencet tombol DELETE di keyboard kamu
Akhirnya, background menjadi transparant. Seperti inilah jadinya :

Jangan lupa kalian Save :D dalam bentuk PSD

Dan tinggal diletakkan saja di sertifikat atau kartu pengenal atau dimanapun yg anda butuhkan :D

cara pasang animasi yang mengikuti mouse pada blog

Cara pasang animasi yang mengkuti mouse pada blog, mungkin bagi sebagian blogger sudah pada tahu deh kayanya . atau mungkin belum tahu cara memasangnya .. sebenarnya mudah kok memasang animasi bergerak pada widget blog dan ketika mouse di arahkan ke animasi tersebut .. lalu animasi tersebut mengikuti gerak dari mouse tersebut .. gmnaa keren nggak ..coba lihat contohnya nih :

Catatan !!!
Coba anda arahkan mouse pada animasi atau bisa di sebut juga widget animasi tersebut ..!!
bagaimana . laba-laba nya ngikutin kan .. kalo engga ngikutin bererti ada yang salah dengan mata anda .. heheh.PISS .

Basa-basi !!!
untuk anda yang memang suka dengan animasi mengikuti arah mouse tersebut sebenarnya anda dapat langsung memasangnya pada widget blog anda , pada kesempatan kali ini aldi akan menjelaskan kepada anda cara memasang animasi mengikuti mouse tersebut khusus di blogger ,.. namun tenang jika anda bukan pengguna blogger atau anda pengguna hosting blog lain seperti wordpress anda juga bisa kok memasang animasi beregerak mengikuti mouse tersebut . animasi-animasi beregerak mengikuti mouse tersebut memanglah sangat cocok untuk anda yang gemar menghias blog dengan berbagai atribut .. apa lagi yang satu ini beda kan !!! .. sebelumnya saya ingin katakan kepada anda bahwa animsi bergerak mengikuti arah mouse ini ada banyak modelnya juga . jadi bukan hanya laba-laba mengikuti arah mouse .ada juga animasi hamster yang bisa di beri umpan dan hamster tersebut akan mengikuti umpan tersebut dan akan memakan umpan yang telah anda beri sebelemnya .. enggak percaya ??? lihat nih

Catatan !!!
Coba kalian arahkan mouse dan klik pada animasi hamster tersebut ..!!!
bagaimana hamster nya engga kelaperan lagikan .. kasih makan lagi ntuh hamsternya .. ntar mati kelaperan lagi ...heheh ..

Bukan Basa basi !!!
Untuk yang satu ini jangan kalian kira basa-basi yee .. kali ini engga usah pake panjang lebar atau panjang apapun .. langsung aja lihat nih cara-cara pemasangan animasi bergerak mengikuti arah mouse pada blog di blogger dan di wordpress..

masuk atau login ke blog kalian
klik Rancangan / Design kemudian klik Elemen laman / page Elements
Lalu klik tambah gadget / add gadget , setelah di klik akan muncul banyak pilihan ..
pilih HTML/JAVA SCRIPT
lalu copy pastekan script-script berikut ini ( sebaiknya jangan di beri judul )

untuk anda yang suka memilih milih .. sekarang anda pilih nih .. animasi beregerak mengikuti mouse di bawah ini ..:
langsung copas aja gann !!!

dan ini code script widget animasi hamster yang bergerak mengikuti arah mouse untuk blogger dan wordpress .. silakan copas :

untuk blogger

untuk wordpress

<a href="http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html" target="_blank" title="mau pelihara hamster kaya gini"></a>[gigya width="300" height="225" quality="high" src="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/hamster.swf?" ]<a href="http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html" target="_blank" title="mau pelihara hamster kaya gini"></a>

Untuk cara pemasangan animasi bergerak hamster mengikuti arah mouse silakan ikuti cara pemasangan seperti di atas ( untuk blogger ) .. kalo untuk wordpress mohon maaf belum ada masukan. soalnya belom pernah coba bikin blog di wordpress si .. hehe

Beda hamster beda juga laba-laba

dan ini code script widget animasi laba-laba yang bergerak mengikuti arah mouse untuk blogger dan wordpress .. silakan copas :

untuk blogger

untuk wordpress

<a href="http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html" target="_blank" title="mau pelihara laba-laba kaya gini"></a>[gigya width="300" height="200" quality="high" src="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/spider.swf?" scale="noscale" salign="tl" ]<a href="http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html" target="_blank" title="mau pelihara laba-laba kaya gini"></a>

Nah kalo yang ini lebih asik lagi nih gan !!
kita di ibaratkan melihara anjing hidup di blog .. yang bisa anda beri makan anda latih anda dan ada kamera untuk anda mengawasi pula ..

catatan !!
coba anda mainkan fasilitas-fasilitas yang terdapat pada kotak di atas ..!!!
bagaimana ??? kerenkan .. kaya melihara anjing di blog .

dan ini code script widget animasi anjing yang bergerak mengikuti arah mouse dan bagaikan pelihara anjing di blog untuk blogger dan wordpress .. silakan copas :

untuk blogger

untuk wordpress

<a href="http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html" target="_blank" title="mau pelihara anjing kaya gini"></a>[gigya width="300" height="225" quality="high" src="http://hosting.gmodules.com/ig/gadgets/file/102399522366632716596/dog.swf?" bgcolor="FFFFFF" ]<a href="http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html" target="_blank" title="mau pelihara anjing kaya gini"></a>

Animasi pinguin mengikuti arah mouse

dan ini code script widget animasi pinguin yang bergerak mengikuti arah mouse dan bagaikan pelihara pinguin di blog untuk blogger dan wordpress .. silakan copas :

untuk blogger

untuk wordpress

<a href="http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html" target="_blank" title="mau pelihara pinguin mengikuti mouse kaya gini"></a>[gigya width="300" height="200" quality="high" src="http://penguinsgadget.googlecode.com/svn/trunk/penguins.swf?" scale="noscale" salign="tl" ]<a href="http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html" target="_blank" title="mau pelihara pinguin mengikuti mouse kaya gini"></a>

untuk blogger

untuk wordpress

<a href="http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html" target="_blank" title="mau pelihara bola aneh mengikuti mouse kaya gini"></a>[gigya width="300" height="220" quality="high" src="http://ballclockgadget.googlecode.com/svn/trunk/ballClock.swf?" ]<a href="http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html" target="_blank" title="mau bola aneh kaya gini"></a>

untuk blogger

Untuk wordpress enggak ada !!!

untuk blogger

untuk wordpress

<a href="http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html" target="_blank" title="mau punya bola mengikuti mouse kaya gini"></a>[gigya width="300" height="225" quality="high" src="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/newtonsCradle.swf?" ]<a href="http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html" target="_blank" title="mau punya bola mengikuti mouse kaya gini"></a>

untuk blogger

untuk wordpress

<a href="http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html" target="_blank" title="mau pelihara kura-kura mengikuti mouse kaya gini"></a>[gigya width="300" height="200" quality="high" src="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/turtle.swf?" scale="noscale" salign="tl" ]<a href="http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html" target="_blank" title="mau pelihara pinguin mengikuti mouse kaya gini"></a>

Bagaimana ??? kalian mau pilih yang mana ??? tinggal copas aja kok .
jika kalian ingin memasang animasi bergerak di sudut blog kalian .. aldi ada tutorialnya juga kok ..
contohnya kaya gini nih http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html

Nanti ada nya di sudut blog kalian loh... lets try ... http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html

membuat animasi 3D kura-kura

Animasi dalam program 3ds max dapat dikatakan hasil akhir dari desain kerja yang dibuat. dengan kata lain, meskipun hasil desain sudah sempurna, namun akan kelihatan kaku jika desain itu tidak dapat bergerak. Tanpa animasi hasil desain hanya akan berupa objek diam.

Langkah-langkah agar objek kura-kura menjadi bergerak adalah :

1. klik tombol Auto Key untuk memulai pembuatan animasi. Dalam keadaan aktif, tombol auto key akan di tampilkan dengan warna merah.

2. Geser Time Sleder ke posisi frame 40/100. Dengan tombol select and move, geser objek kura-kura dengan acuan sumbu x.
3. Geser Time Sleder ke posisi frame 60/100. Dengan tombol select and move, geser objek kura-kura dengan acuan sumbu x.
4. Geser Time Sleder ke posisi frame 100/100. Dengan tombol select and move, geser objek kura-kura dengan acuan sumbu y.
5. klik kembali tombol Auto key untuk menonaktifkan proses pembuatan animasi.
6. klik tombol Play Animation untuk menjalankan animasi bergerak yang telah di buat.
7. klik tombol Stop Animation untuk menghentikan animasi yangbsedang berjalan di dalam viewport.
8. simpan hasil animasi.

Kamis, 25 Oktober 2012

cara membuat animasi harimau

Cara-cara membuat Animasi Harimau

1. Pertama buat layer baru dan beri nama dengan nama harimau

2. Selanjutnya klik file-import-import to library.

3. Cari gambar harimau di Microsoft Office-ClipArt. (Saya mengambil dari Microsoft Office 2007. Tidak yakin kalau di Microsoft Office 2003 ada. Coba saja cari). Klik Ok.

4. Setelah gambar harimau muncul di jendela library (Ctrl + L) muncul, drag gambar tersebut ke lembar kerja pada layer harimau.

5. Setelah itu tekan F8 untuk convert to symbol dan beri symbol tersebut dengan nama harimau dengan type movie clip. Letakkan di sebelah kanan di luar lembar kerja supaya tidak terlihat.

6. Kemudian buat layer baru lagi dan beri nama kijang. Seperti cara yang sama pada nomor 2 dan 3 dengan cari gambar kijang.

7. Drag gambar kijang pada jendela library ke lembar kerja. Kemudian convert menjadi movie clip dan beri nama kijang. Lalu, letakkan objek kijang sebelah kanan lembar kerja di depan objek harimau.

8. Insert keyframe pada frame 10, 20, 31, dan 41 pada layer kijang dan harimau. Pada frame tersebut ubahlah posisi objek kijang dan harimau seperti kejar-kejaran. Kemudian beri motion tween di antara frame-frame tersebut.

9. Saat pada frame 41, objek kijang buatlah menjadi bentuk tipis supaya berkesan tertangkap harimau menggunakan free transform. Insert frame sampai frame 165

10. Setelah itu, insert key frame pada frame 165 dan 170 pada layer harimau. Kemudian pada frame 170 pindahkan posisi objek harimau ke luar lembar kerja. Dan pada jendela properties ubah color objek harimau menjadi alpha 0%. Beri motion tween diantara frame 165 dan frame 170.

11. Setelah itu, buatlah layer baru dengan nama gas. Insert blank keyframe pada frame 48. Kemudian buatlah objek gambar awan lagi. Lalu convert menjadi movie clip dengan nama gas. Setelah itu, letakkan objek gas ke belakang harimau.

12. Insert keyframe pada frame 65 layer gas. Pada frame 48, kecilkan ukuran objek gas menjadi kecil. Beri motion tween pada frame 48 dan 65.

13. Setelah itu, insert keyframe lagi pada frame 155 dan 165. Pada frame 165 kecilkan ukuran objek gas dan ubah color pada jendela properties menjadi alpha 0%. Beri motion tween diantara frame tersebut.

14. Setelah itu, buatlah layer baru dengan nama judul rumus. Insert blank keyframe pada frame 65. Buatlah text “Present Continous Tense” kemudian convert to movie clip dan beri nama judul rumus. Setelah itu, letakkan posisi objek tersebut ke atas objek gas. Insert keyframe pada frame 85, 145, dan 155. Lalu, pada frame 65 kecilkan objek dan ubah color objek menjadi alpha 0%. Beri motion tween di antara frame 65 dan 85. Setelah itu, pada frame 155, klik objek dan ubah color objek menjadi alpha 0%. Beri motion tween di antara keduanya.

15. Setelah itu, buatlah layer baru dan beri nama rumus. Insert blank keyframe pada frame 85. Buatlah text “S+is/are/am+V-ing+O” dan convert ke dalam movie clip dan beri nama rumus. Insert keyframe pada frame 105, 111, 116, 121, 126, 131, 136, dan 145. Pada frame 85, ubah ukuran objek menjadi kecil dan ubah warna color objek menjadi alpha 0%. Kemudian setelah itu, ubahlah color objek gambar rumus pada frame 111, 121, 131, dan 145 menjadi alpha 0%. Beri motion tween antara frame 85 sampai frame 145.

16. Tekan Ctrl + Enter untuk mencoba animasi. (untuk terlebih dahulu mengurutkan layer dari atas ke bawah yaitu judul rumus, rumus, macan, kijang, dan terakhir gas

Cara Melakukan Lompat Harimau adalah sikap loncatan membusur dengan kedua tangan lurus ke depan pada saat melayang dan diteruskan dengan gerakan mengguling ke depan dan sikap akhir jongkok. Secara prinsip teknik gerakan loncat harimau tidak jauh berbeda dengan teknik gerakan roll kedepan. Loncat harimau adalah sikap loncatan membusur dengan kedua tangan lurus kedepan pada saat melayang dan diteruskan dengan gerakan mengguling kedepan dan sikap akhir jongkok.

Cara melakukannya sebagai berikut:
a. Sikap awal
Berdiri tegak, kedua lengan lurus disamping, pandangan lurus kedepan.
b. Sikap melayang
Dengan gerakan awalan jongkok melakukan gerakan meloncat kedepan atas dengan tolakan dua kaki, saat melayang kedua lengan lurus kedepan. Pada saat kedua tangan menyentuh, kepala menunduk kedada antara kedua tangan, sehingga bahu dan tengkuk menyentuh matras, lipat kedua kaki, selanjutnya mengguling ke depan dengan tangan lurus.
c. Sikap akhir
Sikap akhir jongkok kemudian berdiri.