Selamat Berkreasi.

Animasi pastinya anda sering melihatnya, yaitu gambar yang suka bergerak gerak, bagaimana cara membuatnya animasi yang bergerak tersebut, sebut saja animasi gif sederhana membuatnya dengan menggunakan Photoshop dan ImageReady.

 

Sebelumnya Anda pasti sudah mengetahu animasi GIF bukan? Animasi sederhana yang biasanya ada dalam ponsel Anda ataupun yang sering Anda lihat pada sebuah website, seperti banner. Cara membuat animasi GIF tidaklah sulit, ada banyak sekali software yang bisa Anda gunakan untuk membuat animasi GIF namun kali ini kita akan menggunakan perpaduan Photoshop dan ImageReady.Meskipun animasi yang akan kita buat sangat sederhana namun ini merupakan dasar dalam membuat animasi gif yang lain.

 

Untuk membuat sebuah animasi GIF coba fokuskan pada tulisan di bawah ini :

 

Buat file baru dengan ukuran 90 x 90 atau terserah selera Anda. Caranya pilih menu File > New atau tekan Ctrl + N.

 

Buat lingkaran menggunakan Elliptical Marquee Tool atau tekan M. Jangan lupa menekan tombol Shift + Alt untuk membuat lingkaran.

 

 

Isi lingkaran tersebut dengan warna merah. Caranya : Tekan tombol Alt+Del untuk memasukkan warna yang sudah Anda pilih di Foreground Color.

 

Duplikasi layer pertama ini dan buat 2 layer sejenis dengan warna kuning dan hijau sehingga nantinya kita akan memiliki 3 layer yang berisi lingkaran dengan warna merah, kuning dan hijau.

 

 

Buat agar ketiga layer terebut tidak terlihat/invisible. Caranya : Klik ikon mata yang ada di sebelah kiri layer.

 

Setelah ini kita akan berlanjut menggunakan ImageReady. Pada toolbox bagian paling bawah, pilih Edit in ImageReady atau tekan Shift + Ctrl + M.

 

 

Setelah membuka ImageReady pastikan Anda sudah menampilkan Window Animation. Jika belum pilih menu Window > Animation atau tekan F7. Pastikan juga Window Layers telah muncul dan bila belum pilih menu Window > Layers atau tekan F11.

 

Sekarang kita akan membuat animasi dari ketiga layer yang telah kita buat di Photoshop sebelumnya. Cara membuatnya tidak jauh beda dengan animasi pada umumnya namun disini kita akan membuat sebuah animasi sederhana. Perlu diketahui, inti dari apa yang akan kita lakukan adalah permainan layer.

 

Sekarang lihat pada Window Animation, disana ada sebuah layer, pada layer pertama inilah kita akan memulai membuat animasi. Tampilkan layer lingkaran berwarna merah pada Window Layers, caranya tinggal klik untuk menampilkan ikon mata.

 

Maka tampilan frame pertama dalam Window Animation adalah seperti gambar berikut :

 

Sekarang kita akan menambahkan frame pada Window Animation, caranya klik icon Duplicates current frame dan sebuah duplikasi dari frame pertama telah terbuat. Selanjutnya pada Window Layers, tampilkan layer lingkaran berwarna kuning dan nonaktifkan layer berwarna merah.

 

Langkah terakhir, buat lagi frame baru pada Window Animation, pada Window Layersaktifkan layer lingkaran berwarna hijau dan nonaktifkan layer lingkaran berwarna kuning.

 

Atur timing dari masing-masing frame di Window Animation dengan meng-klik tulisan waktu yang ada di bagian bawah frame.

Coba Anda jalankan animasi sederhana yang telah Anda buat dengan cara klik ikon Plays/stops animation.

Setelah semuanya selesai jangan lupa untuk menyimpan hasil kerja Anda.

 

Catatan :

Untuk menyimpan file PSD, Klik File > Save.

Untuk menyimpan hasil kerja Anda menjadi animasi GIF, Klik File > Save Optimized As…

 

Silakan mencobanya sendiri untuk animasi pada blog / site anda. semoga bermanfaat.

Tutorial photoshop membuat banner animasi tulisan bergerak berformat gif dapat dilakukan dengan aplikasi adobe photoshop, dan dengan membuat banner animasi sendiri yang jelas akan memberikan kepuasan tersendiri dari pada membuat animasi gif di beberapa situs yang memang untuk menyediakan pembuatan animasi gif secara online.

 

Membuat Banner Animasi Tulisan Bergerak Dengan Photoshop

Langkah pertama

Buka aplikasi adobe photoshop, buat layer baru dengan klik Ctrl +N, kita akan membuat banner animasi berukuran 125 x 125 pixel, lihat gambar dibawah

 

Langkah kedua
Pada toolbox klik klik Set Foreground Color buat warna misalnya dengan warna ungu #a800ff dan klik Paint Bucket Tool (G) dan klik pada layer kosong yang dibuat tadi.

Langkah ketiga
Buat tulisan dengan klik Horizontal Type Tool (T), lihat contohnya dibawah ini buat sebanyak 6 atau lebih menurut keperluan anda.

Langkah keempat
Setelah anda buat beberapa layer, selanjutnya kumpulkan / drag semua gambar dalam satu layer, lihat contohnya

Langkah kelima
Pada menu bar klik Window => Animation.

Langkah keenam 
Pada Layer Thumbnail, aktifkan layer 1 dan nonaktifkan layer 2,3,4,5,6 dan duplikat gambar pada Animationdengan klik Duplicates Selected Frames

Langkah ketujuh
Lalu aktifkan layer 2 dan nonaktifkan layer lainnya, maka hasilnya seperti ini.

Langkah ketujuh 
Begitu juga seterusnya ikuti langkah keenam, dengan mengkopi / duplikat layer dan tinggal aktifkan salah satu layer dan nonaktifkan layer lainnya, maka hasilnya seperti ini.

Langkah kedelapan
Atur kecepatan/delay dari masing-masing animasi gambar misalnya 0,5 second dan setelah diatur kecepatannya lalu klik Plays Animation untuk melihat hasilnya, coba lihat gambar dibawah ini

Langkah kesembilan
Simpan hasilnya dengan cara klik File => Save for Web and Devices => Save dalam format Gif

Lihat hasil animasi gif banner bergerak dengan photoshop dibawah ini

Langkah 1
Buatlah sebuah file baru dengan Photoshop. Ukuran file bisa disesuaikan dengan kebutuhan Anda. Pada tutorial ini, saya menggunakan sebuah file yang berukuran 468 x 60 pixel; 72 dpi; RGB; content=white.

Langkah 2
Buatlah sebuah tulisan dengan menggunakan Type tools pada Photoshop.

Langkah 3

• Jika Anda menggunakan versi Photoshop 7 hingga CS:
  Klik icon Jump to Image ready. Icon ini terletak di sebelah bawah pada Tools Box. Anda juga bisa memilih menu File > Jump To > Adobe ImageReady 7.0 (pada Photoshop 7), atau File > Edit in Image Ready (pada Photoshop CS).
  
• Jika Anda menggunakan versi Photoshop CS3:
  Pilih menu Window > Animation
  

Langkah 4
Akan Anda dapati sebuah palet panjang di sebelah bawah (bentuk tampilan relatif sama baik pada Image Ready ataupun Photoshop CS3).

Jika perlu, perlebar tampilan palet ini dengan melakukan klik dan geser pada sudut kanan bawah palet tersebut.
Langkah 5
Geser tulisan hingga ke sebelah kiri luar dari background yang putih, hingga seluruh tulisan tidak nampak.

Langkah 6
Klik icon Duplicate current frame.

Langkah 7
Sekarang ada 2 frame pada palet Animation. Pastikan yang terpilih sekarang adalah frame kedua.
Geser lagi tulisan hingga sisi kanan luar dari background.

Langkah 8
Klik icon Tweens animation frames.

Tujuan penggunaan Tween ini adalah untuk mempermudah pembuatan frame-frame animasi. Tween akan menambahkan frame secara otomatis berdasarkan perbedaan posisi, ukuran, tranparansi, dan efek pada obyek. 
Kemudian akan muncul kotak dialog baru, seperti gambar tutorial berikut ini. 

Pada kotak dialog ini, kita bisa mengatur:

• Tween with: digunakan untuk memilih frame mana yang akan kita gunakan sebagai dasar animasi berdasarkan frame yang aktif. Karena kita aktif pada frame kedua, maka yang tepat adalah Previous Frame.
• Frame to Add: digunakan untuk memilih jumlah frame yang akan ditambahkan. Semakin banyak jumlah frame, animasi akan semakin nampak halus, tetapi ukuran file hasil jadinya akan semakin besar.
• Layers: digunakan untuk memilih animasi pada antara semua layer, atau hanya pada layer yang aktif saja.
• Parameters: digunakan untuk memilih jenis perubahan obyek yang digunakan sebagai dasar animasi

Langkah 9
Klik icon Plays/stops animation.

Animasi sudah jadi. Jika Anda menginginkan pengaturan kecepatan animasi, bisa Anda pilih dari tulisan 0 sec disebelah bawah frame.

Jika pengaturan kecepatan ini akan dilakukan pada banyak frame sekaligus, maka klik sebuah frame, kemudian tekan dan tekan tombol Shift, lalu klik frame yang lain. Bisa juga dengan Ctrl + klik frame yang lain. Setelah terpilih banyak frame sekaligus, baru ubah kecepatannya. Pengubahan kecepatan animasi akan berlaku pada semua frame yang terpilih.
Untuk menyimpan hasil animasi, pilihlah menu File > Save Optimized pada Adobe ImageReady. Atau File > Save for Web & devices pada Photoshop CS3. Pastikan format file yang dipilih adalah gif.
Berikut ini adalah hasil dari tutorial ini, sebuah tulisan dengan efek gerak yang disimpan dengan format file gif.

Silahkan dicoba dan digunakan sebagai tambahan materi belajar photoshop. Berikut ini ada 2 buah contoh file lain. Silahkan dicoba sendiri juga untuk membuat seperti gambar-gambar berikut ini.
Gambar contoh animasi 1

Gambar contoh animasi 2

 

Ada beberapa cara yang bisa kita lakukan untuk menambahkan sayap pada photo/gambar yang akan kita edit menggunakan Photoshop. Salah satunya adalah dengan menggunakan tool brus wing yang beberapa waktu lalu saya sudah saya posting. Jika anda belum baca silahkan buka Menambah Gambar Sayap Dengan Brush wing Pada Photoshop

Selain itu juga ada cara yang lebih praktis dengan hanya menambahkan wing/sayap pada photo/gambar yang akan anda edit. Jika anda belum memiliki gambarnya, anda bisa mendonload menggunakan beberapa gambar wing/sayap berikut :

 

 

 

 

 

Membuat animasi bisa juga menggunakan Shopware Adobe Photoshop CS 3, CS4 dan CS5, untuk persi sebelumnya harus menggunakan Adobe Image Ready.

Pada panduan kali ini Admin Khocet Blog akan memberikan contoh sederhana cara membuat animasi dengan Photoshop yang bisa anda kembangkan sendiri nantinya.

 

Lankah-langkahnya adalah sebagai berikut : 

 

• Buatlah layer baru dengan memilih menu File > New atau dengan menekan tombol CTRL+N. Saya sendiri membuat layer dengan ukuran 200px x 200px dengan resolusi 72. 

 

 

 

 

 

• Setelah Layer Baru telah terlihat di lembar kerja Photoshop anda buatlah layer baru dengan cara mengelik Create New Layer yang terdapat pada di bawah palet layer Photoshop.

• Selanjutnya buatlah sebuah gambar yang anda sukai. Saya contohkan dengan menggunakan Brus Photoshop yang sudah saya posting sebelumnya.

• Setelah buat gambar,selanjutnya buat layer baru lagi dan buat gambar yang lainnya.bisa juga dengan cara menduplikat gambar dengan cara menekan tombolCTRL+J. Semakin banyak layer yang anda buat, semakin panjang juga durasi animasinya. Saya sendiri menggunakan lima layer dengan gambar yang beda warbanya seperti gambar berikut : 

• Aktifkan palet Animasi pada Photoshop anda dengan memilih Menu Windows > Animation.

• Tampilannya seperti berikut :

• Selanjutnya perbanyak frame animasi dengan mengelik Duplikates Selected Frames, semakin banyak duplikatnya, semakin lama juga durasinya.

• Kemudian klik Frame 1 pada Animation (Frame) dan pada palet Layer,hilangkan tanda mata pada layer 2,3,4, dan 5. Begitu juga hal yang harus anda lakukan pada Animation (Frames) 2,3,4,dan 5. Klik Animation 2,3,4,dan 5 kemudian hilangkan tanda mata pada layer 1,3,4, dan 5.

• Looping Options berfungsi untuk mengatur berapa kali animasi yang anda buat berputar (Once, 3 times, dan Forever), sedangkan tombol Play berfungsi untuk melihat preview, dan untuk mengatur jeda pergantian (display) antara Animation (Frame) 1 dengan yang berikutnya.

• Jika sudah anda anggap final, lalu simpanlah animasi yang anda buat ddengan memilihMenu File > Save For Web & Devices atau dengan menekan kombinasiAlt+Shift+Ctrl+S. Pada Optimized File Format filih GIF kemudian pilih Save. Gambar akhir seperti yang terlihat pada gambar yang paling atas pada postingan ini.

• Slamat mencoba..trus berkreasi !

Ada kiriman file foto dan minta dibuatin tutorialnya.. pas difoto orang nya ngedip.. jadi merem deh hasilnya.. nah dia pengen fotonya dibuat melek.. hmm.. saya fikir lumayan juga buat pengetahuan karena banyak hasil foto semacam itu..

Saya udah minta izin fotonya dipublish..

buka foto yang ada orang merem nya

Klik Polygonal lasso tool untuk menyeleksi mata orang yang lagi melek.. saya pilih yang berjilbab merah karena posisi matanya hampir mirip.. bagusan cari foto orang yang bersangkutan yang lagi melek.. tapi buat contoh gpp pake yang ada aja..

Seleksi di area mata yang berjilbab merah..

kalo udah terseleksi.. teken

di keyboard CTRL + C untuk mencopy bagian yang terseleksi.. lalu tekan ctrl + V untuk paste.. otomatis akan terbentuk layer baru..

 

Drag ( klik sambil digeser ) hasil copy paste di layer satu ke bagian mata yang merem.. lalu samain ukuran dan posisinya..

Untuk meminimalisasi perbedaan warna supaya tidak berdampak sistemik .. Klik Image > adjustment > brightness /contrass ..

bagian ini atur sendiri aja .. pokonya supaya keliatan mirip .. aja.. !

sekarang hapus bagian di daerah mata yang gak terlalu penting dengan eraser tool ( soft round yaa)

dan hasilnya:

.. Silahkan dicoba..

Teman-teman Ini kelebihan photoshop bisa menghilangkan kerutan ataupun jerawat di wajah hanya dengan sekejap..hebat kan? (lw mO yang nyata pilih obat yang benar dandisini ada) ini berkat tool keren yang nama nya Healing brush tool .. dari namanya juga udah keliatan kok fungsi dari tool tersebut.. Healing = menyembuhkan artinya tool ini untuk memperbaiki atau menyembuhkan sesuatu yang kurang.

Untuk menghilangkan jerawat bisa ga ? Jelas bisa dong.. nanti saya kasih contoh nya ya..

sekarang kita praktek langsung aja ya..

buka foto yang mau dibuat hilang kerutan wajah nya.. saya pake foto Om saya.. Om Sean Connery ..yang udah lumayan banyak kerutannya..

duplikat layer background dengan menekan ctrl + J .. tujuannya sebagai

pembanding aja.. jadi keliatan perubahannya..

 

sekarang klik salah satu tool keren di photoshop Healing brush tool.. ukuran brush secukupnya aja..

cara pake nya ..

tekan ALT lalu klik di tempat yang gak ada kerutannya..

kalo udah tombol ALT nya lepas.. lalu klik di tempat yang berkerut-kerut

Ayo .. hilangkan semua kerutannya.. kalo bisa zoom..

hasilnya :

sekarang lihat perbandingannya :

simple banget kan ? kalo tau caranya sih semua jadi simpel.. bener gak ?

sekarang liat wajah si mpok ini.. tadinya berjerawat akhirnya tanpa obat jerawat.. kulit nya jadi Muluuuuss lagi…

Selamat ber eksperimen..

Karena banyak yang minta tutorial tentang efek kertas terbakar.. saya bikinin sekarang deh.. sekarang modelnya gak tanggung-tanggung.. Luna Maya ! hehehe.. Tutorial sebelumnya saya pake model Dian Sastro.. wah.. lama-lama Model di blog ini Artis papan atas semua nih :p.

Btw.. sebelumnya .. Maaf yaa mba Luna maya… saya pake foto nya.. 🙂

Saya dapet foto ini dari kapanlagi.com, karena gak mungkin saya motret Luna Maya secara

langsung, wong dunia kita berbeda.. 🙂

 

Buka foto Luna Maya

Duplikat layer dengan menekan CTRL + J

Buat Background menjadi putih dengan menekan tombol CTRL+ Backspace di keyboard. ( settingan Background color musti putih )

Klik 2x layer hasil duplikat tadi atau klik kanan > Blending Option

Kita setting Inner glow nya

Klik Windows > Brushes .. Kita setting brush nya juga

Hapus bagian foto yang kira-kira gak kepake.. silahkan berkreasi sendiri aja ya..

Hasilnya akhirnya :

Wah.. singkat ya.. hehehe..

Selamat mencoba .. !

Bagi penyuka design web atau yang suka ngeblog mungkin tips ini bisa memberi sedikit manfaat. Kadang kita gak dapet ide untuk bikin Header untuk website atau blog kita seperti punya saya tU..

he..he.. jelek ya fotonya…

Syaratnya :

• Kita musti tau ukuran Header template blog kita, biasanya berkisar antara 720 – 760 px lebarnya.. untuk standar panjang nya 150 -200 px.
• Kita harus tahu file Nama file header template blog kita ( biasanya header.jpg) , kalo yang sering utak atik blog pasti tau.. yang gak tau, belajar ngeblog dulu ya .. hehehe..
• Kita juga musti tahu Text judulnya berada disisi mana, ini gunanya untuk menempatkan gambar supaya gak ketimpa sama Text.
• Tau juga Tema blog nya apa ( misal : photography, computer, camera, celebrity, dll)
• Kita juga harus tahu warna dasar blog nya biar nanti pas diberi header tidak Saltum ( salah kostum ) 🙂
• Itu aja kayaknya syarat yang penting.

Kalo udah tau lebar blog nya… bikin dokumen baru sesuai lebar nya ..

Tau tema website / blog, tujuannya untuk

mencari gambar-gambar yang berkaitan dengan blog atau website nya.

 

saya biasa nyari gambar di Google Images ketikan keyword nya , misal photography > Enter .. deredettt.. banyak kan hasil search nya.. kita pilih beberapa gambar yang sesuai dengan selera kita.. misalkan saya udah pilih beberapa gambar yang berhubungan dengan photography.

Buka salah satu gambar untuk diedit sebelum dimasukan ke dokumen header,

Gunakan rectangle marquee tool untuk menyeleksi bagian sisi gambar, ini tujuannya untuk membuat batas putih di setiap sisi.

Klik Select > Inverse sehingga yang terseleksi sekarang adalah selain seleksi sebelumnya. Delete deh..

Tekan CTRL+ D untuk menghilangkan seleksi..

Drag ( Klik + Tahan + tarik ) gambar camera tadi ke dalam dokumen header baru.

Puter (rotate), modifikasi ukuran gambar ( resize) secara manual, sehingga keliatan menarik. Misalkan Text di template website / blog nya berada kiri, maka kita tempatin gambar nya di kanan.

Untuk pemberian efek, cukup dengan memberi bayangan alias pake DROP Shadow aja.

Klik 2x layer 1 atau klik kanan > blending Option,

Klik Ok.

Untuk mempermudah pemberian efek yang sama untuk gambar yang lainnya, Klik kanan layer 1 > copy layer style

Skarang ulangi langkah mengedit gambar, lalu drag ke dokumen header.

untuk pemberian efek, cukup klik kanan di gambar yang mau diberi efek > Paste layer style.

hasilnya nanti :

Untuk pemberian warna background supaya sesuai tema, tinggal klik Layer background, warnai dengan Paint Bucket tool atau gradient tool

Hasil akhir nya

Kalo mau ditambah tulisan, silahkan tambahin sendiri. hehehe.

Save sesuai nama file header di template nya, misal : header.jpg ,

Selesai… sekarang tinggal UPLOAD deh ke server website / blog nya.