Welcome to kocomon.blogspot.com
go to my homepage
Go to homepage

Kamis, 22 September 2011

Bikin Efek Foto..... Gak Tau Efek Apaan nih......

Ga tau ini efek apaan, yang pasti aditan efek ini jelek keren banget,  dan patut saya Share ke anda-anda sekalian. Oh ya Tutorial ini asli bikinan saya sendiri, baru pertama kali sih bikin tutorial Photoshop, jadi harap maklum kalo editannya masih standart. Oh ya Thx buat si Wak jo a . k . a Ardhito yang udah kasih tau saya gimana caranya bikin print screen.... enjoy yah bacanya.... :)

Langkah 1
Buka Photoshop, bikin lembaran baru. Disini saya pake ukuran 3500 X 1500px

Langkah 2
Pilih foto yang mau di Edit. Disini saya pake foto Nenek  Mbak saya yang lagi nunggu angkot. Oh ya jangan lupa potong dulu fotonya, jadi yang dipake foto orangnya doang ga pake backgroundnya. Trus beri nama "Foto"



Langkah 3
Dikarenakan foto yang saya pake diambil sewaktu lagi nunggu angkot, gambar backgroundnya rada nggak pas kalo dibarengin ama fotonya. Jadi saya pake background gambar lain. saya pake foto dibawah ni.


Trus pindah'in ke layer. Jika sudah pindahkan layer ini dibawah layer foto, lalu berinama "Background".



Langkah 4
Trus kita Blurr layer Background'nya, biar kesannya kliatan nyambung ama fotonya. Klik Filter > Blurr > Gausian Blurr. Ganti radiusnya menjadi13px.



Langkah 5
Duplikat layer Background dan layer Foto. Lalu satukan menjadi satu layer menggunakan Merge Layer, Klik Layer > Merge Layer ( Ctrl+E ). Lalu beri nama "Layer Copy".



Langkah 6
Pilih "Layer Copy" kita buat layer ini sedikit lebih gelap. Klik Filter > Orther > High Pass. Ubah radiusnya menjadi 1.4px Trus ubah Blend modenya menjadi Color Burn. Ubah juga Fill'nya menjadi 40%.



Lngkah 7
Duplikat lagi "Layer Copy" Lalu Klik Filter > Other > High Pass. Ubah radiusnya menjadi 30%. Ubah Blend Modenya menjadi Color. Dan ubah Fill'nya menjadi 50%.


 
Langkah 8
Dengan menggunakan Rectagular Tool(M) Buatlah seleksi seperti gambar dibawah ini. Lalu klik Select > Inverse, lalu klik delete untuk menghapusnya.



Langkah 9
Buatlah layer baru lalu warnai dengan warna hitam. Pindah Layer ini ke tempat paling bawah dari semua layer.



Hasil akhir
Terakhir tinggal kita beri tulisan, Wait is so boring....



Gimana,, gampang kan...??

Silahkan dicomment ya......
Penasaran..?? Lanjooot disini bacanya.......

Selasa, 20 September 2011

MEMBUAT POSTER BATMAN "DARK KNIGHT"


Seperti yang anda lihat pada gambar diatas, kali ini saya akan menunjukan kepada anda bagaimana cara membuat Poster film Batman the Dark Knight, tehnik-tehnik dalam tutorial ini cukup sederhana dan sangat mudah. Saya tidak akan membuat poster ini seperti bentuk aslinya, karna saya tahu itu tidak mungkin, karena saya percaya Poster yang asli dibuat dalam bentuk 3D.

Jadi bersiaplah, karna dalam tutorial kali ini membutuhkan waktu beberapa jam, jadi buatlah senyaman mungkin dudukan anda....

Langkah 1
Buka Photoshop, lalu buat dokumen baru. disini saya menggunakan ukuran (2550 x 3500 pixels). lalu warnai baackground dengan warna abu-abu (#b0adad).


Langkah 2
Langkah selanjutnya adalah, carilah Logo Batman, anda bisa mendapatkannya di Mbah Google. Jka sudah, tempatkan posisi logo batman tersebut seperti gambar di bawah ini. Untuk urusan warna logo itu gak terlalu penting.






langkah 3
Seperti yang saya katakan di awal tutorial ini adalah kolase foto-foto besar, dimana hal yang penting adalah menemukan gambar-gambar yang tepat. Dalam tutorial ini kita harus menempatkan beberapa bangunan. Anda dapat menemuknanya di Shutterstock dan anda bisa cek dibawah ini.



http://www.shutterstock.com/pic-20863036/stock-photo-modern-buildings-in...
http://www.shutterstock.com/pic-346534/stock-photo-three-corporate-build...
http://www.shutterstock.com/pic-2286315/stock-photo-corporate-buildings-...
http://www.shutterstock.com/pic-80798674/stock-photo-corporate-buildings...



Langkah 4
Mulailah menempatkan Gambar bangunan seperti gambar dibawah ini. gunakan logo batman sebagai refrensi ukuran dan posisi gedung.



Langkah 5
Buatlah persis seperti gambar dibawah ini.




Langkah 6
Dalam rangka untuk membuat bangunan ini hancur seperti pada poster asli,  disini saya menggunakan beberapa gambar dari Shutterstock yang sudah saya download. Anda dapat menemukannya disini  http://www.shutterstock.com/pic-73243228/stock-photo-abstract-character-...



Langkah 7
Hanya dengan menyalin beberapa potongan pada gambar yang sudah anda download tadi, anda dapat anda dapat mengubah, memutar atu menjadikannya sebuah Brush. karna saya malas, jadi saya hanya akan meng Copy paste saja.



Langkah 8
Agar gambar lebih realisis, anda perlu menambahkan beberapa efek Blurr, klik Filter>Blurr>Motion Blurr.



Langkah 9
Disini gambar akan terlihat hancur.




Langkah 10
Carilah gamabar tekstur beton, lalu tempatkan pada posisi paling atas dari semua layer. lalu ubah Blend Mode'nya menjadi Multiply.





Langkah 11
Pilih semua layer, kecuali layer Background, lalu Klik Layer>Group Layers. Setelah itu gunakan Magic Wand Tool pada simbol Batman.



Langkah 12
Setelah itu Klik Layer>Layer Mask>Hide Selection, sekarang gambar pada simbol batman tadi sudah menghilang kan..?. Ini terlihat bagus, tapi terlalu sempurna. Jadi sekarang kita gunakan Brush (B) dan pilih Grunge Brush untuk menciiptakan efek hancur pada bangunan. idenya disini adalah untuk mengancurkan tepi dari simbol batman. Gunakan gambar dibawah sebagai refrensi.



Langkah 13
Buatlah layer baru, tempatkan layer ini paling atas dari layer sebelumnya. Dan dengan menggunakan Brush yang halus berwarna hitam, warnai bagian pinggir layer seperti gambar dibawah.



Langkah 14
Menurut saya bangunan yang hancur ini masih terlalu bersih, jadi saya tambahkan lagi beberap serpihan dan juga cat beberapa jendela menggunakan warna putih dan hitam dengan menggunaka Brush Grunge. Idenya adalah membuat bangunan benar benar hancur. Rincian lain adalah ketika Anda membuat tepi simbol batman kurang seragam, cobalah untuk membuat bangunan itu benar-benar jatuh pada bagian tertentu. Gunakan gambar dibawah sebagai refrensi.



Langkah 15
Jika sudah, sekarang waktunya urusan warna. Klik Layer > New Adjustment Layer > Hue and Saruation. Ubah Hue menjadi 196, Saturation menjadi 8, dan Lightness menjadi -7. Jangan lupa centang Colorize'nya






Langkah 16
Jika sudah, Klik Layer>New Adjustment Layer> Level. Gunakan gambar dibawah sebagai refrensi. Tips: kedua lapisan penyesuaian harus di atas lapisan lainya.






Langkah 17
Inilah hasil sementara






Langkah 18
Untuk lebih Real'nya kita tambahkan sebuah awan buatan. carilah gambar awan. Lalu ubah menjadi Hitam putih dengan cara Klik Layer>Adjustment>Desature. lalu ubah Blend Mode'nya menjadi Multiply. Tepatkan gambar  ini di belakang layer bangunan. 






Langkah 19
Buatlah Layer baru, dan tempatkan di blakan layer bangunan. Dan dengan menggunakan Brush kecil, gambar rangka bangunan seperti gambar dibawah.






Langkah 20
Jika anda melihat gambar poster asli DARK KNIGHT disitu terdapat gambar batu yang jatuh dari langit. Jadi sekarang kita tambahkan beberapa batu juga. Saya menggunakan gambar lain dari Shutterstock untuk referensi, Anda dapat menemukannya di sini  http://www.shutterstock.com/pic-24964786/stock-photo-zoom-of-gravel-gray ....  Saya pilih salah satu gambar batu lalu saya copy dan saya paste kedalam layer.






Langkah 21
Paste gambar batu yang anda pilih, Putar, Kecilkan atau besar'kan gambar batu hingga menyerupai gambar dibawah ini. 






Langkah 22
Jika sudah, Klik Layer>Layer Stye>Pattern Overlay. Ganti blend modenya menjadi Multiply. Dan untuk Pattern'nya pilih Black Marble.






Langkah 23
Masih di Lyer Style, Pilih Color Overlay, Ubah Blend Modenya menjadi Multiply. dan untuk warna ubah dengan warna abu-abu.






Langkah 24
Klik inner Shadow, Aturlah seperti gambar dibawah..




Langkah 25
Inilah gambar batu dengan efek yang barusan kita buat. Perhatikan bahwa lapisan penyesuaian berada diatas lapisan batu juga. Hal lain yang penting di sini adalah untuk menerapkan blur (Filter> Blur> Motion Blur) ke bebatuan seperti yang kita lakukan untuk lapisan lain dalam langkah 7-9. 



Langkah 26
Tambahkan lebih banya gambar batu dalam desai anda. Ingatlah sudut Inner Shadow akan bervariasi sesuai lokasi batu.






Langkah 27
Langkah terakhir.... 
Pilih semua Layer lalu duplikatkan lalu buatlah menjadi 1 layer dengan menggunakan Merge Layer. Lalu ubah blend mde menjadi Soft light, Dan ganti Opacity menjadi 50%. Duplikat lagi layer tadi, Lalu ubah blend modenya menjadi Screen dan ganti Opacitynya menjadi 100%. dan Klik Blurr>Motion Blurr.Buat radiusnya menjadi 20%.






Hasil Akhir



Gimana...?? rada rumit ya.... Itu mah wajar klo bwat pemula,, tp klo sering2 latihan bakalan bisa koq....


Sumber: Abduzeedo
Penasaran..?? Lanjooot disini bacanya.......

Minggu, 18 September 2011

Membuat Image Slider Carousel di Blog

Kali ini saya bikin postingan Keren neh... "Bikin Image Slider". Image slider adalah bla.. bla.. blah... males njelasinnya,, kalo pengen tau apa itu Image slidder coba deh lihat di halaman blog saya,, keren kan.?... tenang aja tu gambarnya bisa diubah sesuka otak anda,, saya dapet Trik ini dari http://lorongilmu.blogspot.com/ 
Langsung aja deh.....


Langkah 1
Login ke Blogger 


Langkah 2
Klik Rancangan > Elemen Laman > Tambah Gaget


Langkah 3
Copy Paste ko dibawah ini.:

<script type="text/javascript">
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:false, persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://1.bp.blogspot.com/_4HKUHirY_2U/S2FVY1DGRHI/AAAAAAAAAtc/BZkCromQU-I/prev.png', 30, 60 ], rightnav: ['http://4.bp.blogspot.com/_4HKUHirY_2U/S2FVWGJQahI/AAAAAAAAAtU/l-hiX3uOqBo/nxt.png', -55, 60 ]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
</script>
<div id="mygallery" class="stepcarousel">
<div class="belt">


<!-- Ganti link dengan link kalian -->

<div class="panel">
<a href="http://lorongilmu.blogspot.com/2011/06/free-ebook-wireless-kungfu-networking.html">
<img src="http://1.bp.blogspot.com/-E8I3xyQJiPQ/TeupAqrHhgI/AAAAAAAAASo/RknOdHWI5Wk/s1600/1.jpg" width="100px" height="135px" /></a>
</div>

<div class="panel">
<a href="http://lorongilmu.blogspot.com/2011/06/free-ebook-computer-worm-1.html">
<img src="http://4.bp.blogspot.com/-81VMss0m8hc/Teu38YLL9xI/AAAAAAAAASs/rsJhjgsZJz4/s320/2.jpg" width="100px" height="135px" /></a>
</div>

<div class="panel">
<a href="http://lorongilmu.blogspot.com/2011/06/free-ebook-computer-worm-2.html">
<img src="http://1.bp.blogspot.com/-iGfjN3nQpRI/Teu51PjzXJI/AAAAAAAAASw/W4Gy7P5W0ao/s320/3.jpg" width="100px" height="135px" /></a>
</div>

<div class="panel">
<a href="http://lorongilmu.blogspot.com/2011/06/free-ebook-pembobol-kartu-kredit.html">
<img src="http://3.bp.blogspot.com/-BNod3fYuxhk/TezHfbaFRtI/AAAAAAAAAS0/kGF49ZtSjkU/s320/4.jpg" width="100px" height="135px" /></a>
</div>

<div class="panel">
<a href="http://lorongilmu.blogspot.com/2011/06/free-ebook-panduan-lengkap-memakai.html">
<img src="http://3.bp.blogspot.com/-BzeCtYoUfhE/TezWWgKA3HI/AAAAAAAAATA/LfY0cT86OO8/s320/6.jpg" width="100px" height="135px" /></a>
</div>

<div class="panel">
<a href="http://lorongilmu.blogspot.com/2011/06/free-ebook-chip-spesial-networking.html">
<img src="http://1.bp.blogspot.com/-CJtJtGc1Sfs/TezdIhq-ScI/AAAAAAAAATE/NuiexuEifmg/s320/7.jpg" width="100px" height="135px" /></a>
</div>

<div class="panel">
<a href="http://lorongilmu.blogspot.com/2011/06/free-ebook-tutorial-windows-server-2003.html">
<img src="http://3.bp.blogspot.com/-Z8si66gtojE/Tezh2EwG_KI/AAAAAAAAATI/gm5cCI-W-Go/s1600/8.jpeg" width="100px" height="135px" /></a>
</div>

<div class="panel">
<a href="http://lorongilmu.blogspot.com/2011/06/free-ebook-beginning-microsoft-visual.html">
<img src="http://2.bp.blogspot.com/-s-vkZ_AtJH4/Te9suRCdJXI/AAAAAAAAATU/MmUmA__Zhyw/s1600/8.jpg" width="100px" height="135px" /></a>
</div>


</div>
</div>


Langkah 4
Klik Simpan..  


Langkah 5
Klik edit HTML, Lalu cari kode ]]></b:skin>, Lalu tambahkan kode dibawah ini tepat diatas kode  ]]></b:skin> :


.carousel{
         float:left;
         margin: 0;
         padding:0px;
         }

 .carousel .widget {
         width: 720px;
         background:#c4d5ec;
         margin: 0;
         padding:0;
 }

 .carousel h2{
         display:none;
         }
 .stepcarousel{
         position: relative;
         overflow: scroll;
         width: 765px;
         height: 160px;
 }

 .stepcarousel .belt{
        position: absolute;
        left: 0;
        top: 0;
 }

 .stepcarousel .panel{
      float: left;
      overflow: hidden;
      margin: 5px 20px 5px 0px;
      width: 140px;
 }

 .stepcarousel .panel img{
      float: left;
      background:#940f04;
      margin: 5px;
      padding:5px;
      border:1px solid #ccc;
 }

 .stepcarousel .panel img:hover{
      background:#ffffff;
      }
.quickedit{display:none}

#under_header{
opacity: 100;

 }


Langkah 6
Jika sudah,  Copy kode dibawah ini tepat di bawah kode ]]></b:skin>


<script src='http://lorong-ilmu.googlecode.com/files/gallery1.js' type='text/javascript'/>
<script src='http://lorong-ilmu.googlecode.com/files/gallery2.js' type='text/javascript'/>

Langkah 7
Klik save. dan lihat hasilnya.... :)


Keterangan:
Ganti kode berwarna Merah dengan link gambar anda
Dan ganti kode berwana Biru dengan Link yang bersangkutan dengan gambar




Selamat mencoba.... :)
Penasaran..?? Lanjooot disini bacanya.......

Sabtu, 17 September 2011

Membuat Read More Otomatis di Blog

Postingan kali ini saya bakalan kasih tau anda bagaimana cara "Membuat Read More Otomatis di Blog", apa bedanya ama read more otomatis biasa..?? ini yang keren... kita ga perlu lagi ngedit HTML postingan kita lagi, ga perlu repot-repot ngetik bahasa HTML yang  rumit, dan denga adanya readmore otomatis ini postingan blog kita bakalan lebih rapi.
Otree... lanjut menn....

Langkah 1.
Login ke blogger

Langkah 2.
Pilih Rancangan > Edit HTML.

Langnkah 3.
Jangan lupa centang kotak Expand Widget Template.

Langkah 4.
Cari kode </head>, lebih gampangnya cari kode klik Ctrl+F.
Trus paste kode dibawah ini di bawah kode </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'/> 

Langkah 5.
Trus cari kode berikut <data:post.body/> atau <p><data:post.body/></p> 

Langkah 6.
ganti kode diatas menjadi kode berikut:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>&#187;&#187;&#160;&#160;READMORE...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if> 


 Keterangan:
Kode berwarna merah dapat anda ganti sesuka anda
- Summary noimg 430 = tinggi artikel terpotong tanpa Gambar
- Summar img 430 = tinggi artikel terpotong dengan gambar
- Readmore bisa anda ganti dengan Baca Selengkapnya, full read dll...

Langkah 7.
Ini langkah yang paling simple, cuman klik SAVE.
selese dah.....

coba cek blog anda sekarang,, ada yang berubah..??

Selamat testing testing ya....  :)
Penasaran..?? Lanjooot disini bacanya.......

Jumat, 16 September 2011

Cara Membuat Buku Tamu Bergeser

Loha... pa kabar menn...? dah lama nih ga posting blog,,,
Kali ini saya buat postingan blog khusus untuk mempercantik blog aja, sekedar membuat buku tamu kita menjadi lebiih hemat tempat,. disini saya akan kasih tau anda bagaimana membuat buku tamu kita bertengger di samping blog kita.


Langsung aja menn:
1. Login ke Blogger
2. Klik Rancangan
3. Disitu ada tulusan "Tambah Gaget" klik aja.
4. Trus pilih HTML.
5. Lalu pastekan kode berikut:
  <style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:210px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i275.photobucket.com/albums/jj300/H4L4LYI/cepotgift.gif') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #000000;
background:#999999;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="200" height="305" src="http://www7.cbox.ws/box/?boxid=370377&amp;boxtag=antrop&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#DBE2ED 1px solid;" id="cboxmain"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www7.cbox.ws/box/?boxid=370377&amp;boxtag=antrop&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#DBE2ED 1px solid;border-top:0px" id="cboxform"></iframe></div>
</div>
<!-- END CBOX -->

<font size="2">
<div style="text-align:right">
<a href="javascript:showHideGB()">
[Tutup]
</a>
</div>
</font></div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>



6. Setelah itu Simpan.
Oh ya, hampir aja lupa,, kode yang berwarna merah tu ganti aja ama kode HTML bukku tamu milik anda. Kalo belon ngerti caranya buat buku tamu cari aja di Mbah Google banyak koq...


Selamat mencoba menn....  :)
Penasaran..?? Lanjooot disini bacanya.......
Related Posts Plugin for WordPress, Blogger...

Sang Blogger

  © Free Inspiration Blog My Blog by RAInDY Blog

Back to TOP