Kamis, 11 Agustus 2011

Efek Dream Photoshop


Tutorial Photoshop ini untuk yang udah ngerti tool-tool di photoshop.. Kalo yang belum ngerti silahkan baca-baca dulu teori dasarnya dan praktekin dulu tutorial tingkat dasar. tapi kalo mau coba silahkan aja.. gak ada yang ngelarang kok.. :D
Efek Dream maksudnya kita harus bisa menghayal sesuatu yang kira-kira enggak mungkin menjadi mungkin..dan diaplikasikan menjadi sebuah foto yang unik. Teknik yang dipake banyak alias campur aduk, makanya tadi saya bilang harus ngerti dulu tool-tool photoshop.
Semua gambar pendukung bisa download. Klik gambar tumbnail untuk memperbesar lalu Klik kanan > Save file
auntum lake-district
butterfly girl water-rippling
ya udah sekarang kita mulai aja.. sediakan gambar hutan seperti....
ini :
mistik1
Perbesar canvas nya.. klik Image > Canvas size
mistik2
hasil perbesarannya kayak gini
mistik3
sekarang buka gambar danau, lalu drag ke gambar hutan
mistik4
Seleksi bagian yang di tandai merah
mistik5
Lalu tekan DELETE
mistik6
Sekarang kita buat bayangan pohon.. duplikat layer background dengan menekan ctrl + J, simpan layer hasil duplikasi di paling atas.
mistik7
Klik Edit > Transform > Flip Vertical
lalu ubah opacity nya
mistik8
Seleksi bagian foto yang ditandai merah
mistik9
Tekan DELETE dan hasilnya
mistik10
sampe segini bisa kan ? udah mulai keliatan keren tuh..
sekarang buat bayangan seolah-olah beriak.. Klik Filter > Distrort > Ripple
mistik11
Gabungkan semua layer dengan menekan CTRL + E dari mulai layer paling atas..
mistik12
bayangan gunung masih keliatan.. gpp.. nanti juga tersamarkan
mistik13
kita buat efek dream .. menggukana diffuse glow.. Tekan CTRL + J untuk menduplikat layer background .. Klik Filter > distort > diffuse Glow.
mistik15
Sekarang pake teknik clone untuk menghilangkan bayangan gunung.. Cara Clone sudah saya posting disini
mistik16
Hasil setelah di Clone
mistik17
Sampe disini udah keliatan keren kan ? hehehe..
ayo kita terusin..
klik Image > Adjustment > Brightness/contrast
mistik18
klik Image > Adjustment > Hue/Saturation
mistik19
Buka file Butterfly girl lalu seleksi dengan penTool
mistik20
Cara buat Butterfly Girl sudah saya posting disini
yang belum bisa silahkan buat dulu..
klik kanan yang sudah terseleksi > make selection
mistik21
Klik Select > Modify > Feather
mistik22
Drag foto yang udah terseleksi ke dalam gambar hutan
mistik22a
Klik Image > Adjustment > Hue/Saturation
mistik23
Klik Image > Adjustment > Brighness /Contrast
mistik24
Klik kanan layer butterfly girl atau layer 5 > Blending Option atau klik 2 kali di layer 5
Kita buat orang nya sedikit bercahaya.
mistik25
Sekarang buat seolah-olah kakinya nyelup ke aer.. jadi musti ada riakan dong… nah buka gambar air lalu drag ke foto hasil edit tadi
mistik27
atur sedemikian rupa .. lalu hapus bagian pinggirnya supaya gak keliatan kotak.
mistik28
Klik Image > Adjustment > Hue/saturation buat air ..
mistik29
Buat Opacity nya menjadi 50 %
mistik30
sekarang Hapus sebagian kaki biar keliatan nyelup..
mistik31
Duplikat riakan air dan tempatin di kaki sebelahnya
mistik32
hapus bagian kaki biar keliatan nyelup..
mistik33
Duplikat lagi riakan air tadi.. dengan menekan CTRL + J.. lalu perbesar..
mistik34
Hapus bagian tengah riakan yang besar dengan eraser tool
mistik35
Buat bayangan orang nya.. cara bikinnya sama kok sama waktu buat bayangan pohon.. .. dan Hasilnya
nadya
Gimana ? bingung ya ? Coba terus sampe Bisa !!
Selamat mencoba..

Button Bercahaya


Waduh dah lama banget g’ nulis bagi ilmu, nah kali nie bagi ilmunya buat memenuhi request temen2 yg sebenernya dah lama di-request tapi bru sempet kuwujudkan kali ini… Soale sejak kerja bener2 waktuku habis buat kerja, malah pas Ramadhan kemaren sempet lembur 3 hari, g’ tidur n g’ sahur… (g’ diijinin mas si bos… xb)
Ya udah lah daripada kebanyakan ngomong yang g’ jelas, langsung aja nie dia langkah2nya :
PS : Eh ya sebelumnya, kali nie diriku pakai Photoshop CS3, jadi bisa langsung dianimasikan di Photoshop-nya, kalau temen2 masih pakai Photoshop dengan versi dibawah CS3, misal Photoshop 7, Photoshop CS, tow Photoshop CS2 silahkan pakai Image Ready yang udah keinstall satu paket ma installasi Photoshop-nya.
  1. Buat file baru, dan beri nama terserah, misal “button”, lalu berhubung button yang akan kita buat ukurannya kecil, pada preset pilih web saja, lalu pilih yang Rectangle ukuran 180x50px, truz kli OK.new file
  2. Gunakan Rounded Rectangle Tool (U) untuk membuat sebuah layer objek button seperti pada gambar, tapi sebelumnya tentukan radius sebesar 70px biar tiap objek siku nampak bulat halus :
  3. 2
  4. Sekarang kita akan memberikan efek glossy pada button tersebut, klik 2x pada layer button tersebut pada jendela layer, centang/pilih Stroke, ukuran 1px, warna hitam, lalu centang/pilih Gradient Overlay, buat pola warna seperti pada gambar :3
  5. Nah setelah itu kalau mau diberi tulisan silahkan, misal dalam hal ini sebagai contoh diriku akan membuat tulisan Glossy dan Button, 2 tulisan ntu dipisah cz nanti mau dibuat efek transisi. Pertama buat tulisan Glossy dengan Horizontal Type Tool (T), kugunakan jenis huruf yang umum, yaitu Arial, dengan kondisi bold-italic, ukuran 30pt, lalu ketik kata Glossy, beri efek pada layer tersebut, klik 2x pada layer teks Glossy, pilih/centang Drop Shadow atur Angle:120|Distance:3|Spread:0|Size:3, lalu pilih/centang Bevel and Emboss dan atur Depth:7|Size:0|Soften:0|Angle:100|Altitude:32|Highlight Opacity:100|Shadow Opacity:0, lalu pilih/centang Stroke dan atur Size:1 dengan warna biru tua, terrakhir pilih/centang Gradient Overlay dan buat pola warna seperti pada gambar :4
  6. Sekarang buat tulisan “Button”, cukup ulangi langkah no.4 tapi tulisan Glossy diganti dengan Button, atau duplicat-kan layer teks Glossy dengan Ctrl+J, lalu klik 2x icon “T” pada layer Glossy copy dan ketik kata Button untuk menggantikan kata Glossy.
  7. Nah sekarang kita akan membuat layer terakhir, yaitu cahaya, buat layer kosong baru dengan pilih Layer >> New >> Layer atau klik CTRL+Shift+N, sekarang gunakan Rectangle Tool (U) untuk membuat sebuah layer/objek persegi panjang seperti gambar :6aLalu klik 2x pada layer baru tersebut untuk mengatur efek/pewarnaan, pada Blending Option: Default atur nilai Opacity:100%|Fill:0%, lalu pilih/centang Gradient Overlay dan atur pola warna seperti pada gambar, buat 3 point/titik warna, putih semua, bagian kiri-kanan Opacity:0%, bagian tengah Opacity:100%, lalu klik OK, setelah itu masih di pilihan Gradient Overlay atur Angle:06b
  8. Nah sekarang buat layer baru dibawah layer cahaya dengan Ctrl+Shift+N, lalu klik Ctrl+E untuk menggabungkan layer baru tersebut dengan layer cahaya (hal ini bertujuan agar nanti jika layer cahaya dirotasikan, efek cahaya nggak kacau ^^) NP : Untuk mengatur posisi layer (menggeser keatas/kebawah gunakan tombol Ctrl+] atau Ctrl+[
  9. Kini kita akan mengatur agar layer cahaya agak condong ke kanan, caranya pilih layer 1 (hasil penggabungan layer cahaya dengan layer baru), lalu klik Ctrl+T dan pada Rotate isikan nilai -30, lalu klik “Enter” pada keyboard.8
  10. Huh, bahan2 udah lengkap, kini saatnya ber-animasi… ^^ Sebelumnya pastikan jendela Animation aktif dulu, kalau belum aktifkan lewat menu Windows >> Animation, 9alalu buat 2 Frame tambahan lewat tombol anak panah disebelah kanan atas dari jendela Animation, 9blalu pilih New Frame dan lakukan 2x sampai ada 3 Frame di jendela Animation.9c
  11. Sekarang saatnya mengatur animasinya, mohon temen2 ikuti langkah berikut ini dengan seksama dan berurutan agar animasi yang dihasilkan sama atau mirip dengan yang saya hasilkan : a. Pilih Frame 1 dan pada Frame 1 atur Layer teks Glossy dengan Opacity:100%, Layer teks Button:0%, layer 1 (cahaya):30% dan geser ke pojok kiri layar sampai tidak kelihatan. b. Pindah ke Frame 2 dan pada Frame 2 atur Layer teks Glossy dengan Opacity:0%, Layer teks Button:100%, lalu layer 1 (cahaya):100% dan geser ke tengah2 canvas kerja. c. Pindah ke Frame 3 dan pada Frame 3 atur Layer teks Glossy dengan Opacity:100%, layer teks Button:0%, dan layer 1 (cahaya):30% dan geser ke pojok kanan layar sampai tidak kelihatan.
  12. Nah untuk membuat animasi secara otomatis maka akan kita gunakan fasilitas Tween, ikuti cara berikut : a. Pilih Frame 1 dan klik kanan panah kecil disebelah pojok kanan atas jendela Animation, lalu pilih Tween, lalu pada TweenWith pilih Next Frame karena akan kita animasikan dengan frame selanjutnya, yaitu Frame 2, lalu pada Frames to Add pilih 7 saja (angka favoritku ^^), semakin banyak Frame gerakan semakin halus tapi ukuran file jadi besar, kalau semakin sedikit ya sebaliknya.11a1b. Kini kita punya 10 Frame, yang tadinya Frame 2 sekarang jadi Frame 9 (2+7, ingat kan yang tadi), maka sekarang pilih Frame 9 dan lakukan hal yang sama, yaitu gunakan Tween, pada TweenWith pilih Next Frame dan pada Frames to Add pilih 7… ^^ Sekarang total kita punya 17 Frame…11a2
  13. Langkah selanjutnya adalah mengatur timing, pilih semua frame, caranya pilih dulu Frame 1, lalu sambil menahan tombol Shift klik pada Frame 17, pada bagian bawah tiap frame kan udah ada timing default yaitu no delay/0 sec, nah akan kita ubah dengan cara klik bagian itu (timing) lalu tentukan timing-nya, berhubung kita akan tentukan timing sendiri pilih Other, lalu pada Set Delay isikan 0.05 seconds biar animasi berjalan agak cepat.12a
Nah sudah jadi nie, untuk mengetes-nya klik tombol Play pada jendela Animasi atau tekan tombol Spasi pada keyboard… gimana hasilnya? pasti jelek kan ^^, soale diriku low bagi ilmu g’ pernah bener sih… :b biasa ilmu yang sesat dan menyesatkan… he7x… ^^
Untuk menyimpannya pilih menu File ?? Save for Web & Devices (Alt+Shift+Ctrl+S) lalu tentukan format file-nya, dalam hal ini diriku biarkan format pada GIF, klik tombol Save, tentukan nama dan lokasi penyimpanan dan klik Save…
simpan
Dan inilah hasilnya :
button
Atau yang mau download file Photoshop (.psd) yang kubuat (sebagai contoh) silahkan klik link dibawah ini :
Yah akhir kata walaupun hasilnya ancr diriku tetep berharap aja moga bagi ilmu kali ini bisa bermanfaat bagi temen2, khususnya buat yang sedang belajar animasi dasar… ^^