Membuat Sendiri Share Link Ke Social Network Dengan Javascript

Pernahkah Anda melihat link seperti di bawah ini di blog-blog atau situs orang lain?

Ngomong-omong? buat apaan sih link gituan? Buat kalian yang belum tahu gunanya? Link tersebut digunakan untuk membagi link (share link) dari URL artikel yang sedang dibaca ke situs jejaring sosial milik kita, boleh jadi dishare ke Facebook, Twitter, dll.

Nah… bila Anda menggunakan WordPress, ada sih plugin yang menampilkan link share tersebut yang nantinya akan muncul di setiap postingan. Diharapkan dengan link tersebut, pembaca atau pengunjung blog yang tertarik dengan sebuah postingan tersebut bisa mensharenya langsung ke situs jejaring miliknya.
Sekarang… bagaimana bila kita memasang link share tersebut tanpa plugin apa-apa alias membuatnya sendiri? Dengan membuat sendiri, kita bisa memasangnya di CMS buatan kita sendiri atau situs pribadi kita.

So… bagaimana caranya kalo kita buat sendiri link sharenya? OK.. langkah pertama kita harus tahu dulu URL di masing-masing social network untuk share link ini. Berikut ini beberapa URL dari social network untuk share linknya.

Facebook : http://www.facebook.com/share.php?u=url
Twitter: http://twitter.com/home/?status=url
Digg: http://digg.com/submit?url=url
Reddit: http://www.reddit.com/submit?url=url

Perhatikan keempat URL untuk keperluan share link di masing-masing social network di atas. Semuanya terdapat kesamaan yaitu adanya parameter ‘url‘. Parameter inilah yang akan diisi dengan URL yang akan kita share. Sebagai contoh misalkan kita ingin menshare sebuah URL http://blog.rosihanari.net ke Facebook, maka kita gunakan URL http://www.facebook.com/share.php?u=http://blog.rosihanari.net.
Dah paham konsepnya ya? Sekarang misalkan kita punya blog atau CMS buatan sendiri. Lalu bagaimana cara menaruh share link tersebut ke setiap postingan, dan URL yang dishare itu menyesuaikan URL dari artikel yang sedang dibaca oleh visitor? atau dengan kata lain, bagaimana cara membuat script supaya parameter ‘url’ yang ada di setiap share link social network di atas secara otomatis terisi oleh URL dari setiap artikel yang ada di blog kita?
Nah… untuk melakukan hal tersebut caranya mudah, kita bisa membaca link URL dari setiap artikel yang ada di blog dengan menggunakan perintah Javascript ‘document.URL‘. Dalam Javascript, perintah ‘document.URL‘ digunakan untuk membaca URL dari halaman web yang sedang tampil di browser. Sehingga, dengan perintah ini kita bisa membuat share link ke social network nya dengan cara sbb:

Share this article on:
<script language="javascript">
document.write("<a href='http://twitter.com/home/?status=" + document.URL + "'>Twitter</a> | <a href='http://www.facebook.com/share.php?u=" + document.URL + "'>Facebook</a> | <a href='http://www.reddit.com/submit?url=" + document.URL + "'>Reddit</a> | <a href='http://digg.com/submit?url=" + document.URL + "'>Digg</a>");
</script>

Javascript di atas selanjutnya kita taruh di setiap halaman artikel di blog atau CMS kita. Dan hasilnya… bisa Anda lihat di bawah artikel ini dan Barusan tadi saya punya ide untuk membuatnya sendiri tanpa menggunakan plugin apa-apa. Memang sih simple, tapi keren kan? ceilee… muji sendiri. Supaya lebih menarik, Anda bisa menambahkan icon dari setiap social network.
Dengan adanya share link tersebut, blog kita akan mendapat traffic gratis yang berasal dari social network. Selamat mencoba ya !!

Read More

Cara Membuat Form Dinamis Untuk Submit Data Secara Simultan

Beberapa tahun yang lalu, saya pernah menjelaskan cara mengirim atau mensubmit data secara simultan melalui sebuah form dinamis. Anda bisa membaca kembali artikel tersebut.
Meskipun cara yang dijelaskan pada artikel tersebut berhasil, namun secara teknis cara tersebut agak sedikit merepotkan. Mengapa merepotkan? ya.. karena kita diminta menentukan dahulu jumlah data yang akan disubmit. Penentuan jumlah data ini dilakukan supaya memunculkan komponen input sejumlah data tersebut dalam formnya. So.. gimana kalau jumlah datanya banyak, dan kita tidak sempat menghitungnya? Nah.. repot bukan?
Dalam artikel ini, saya akan mencoba memaparkan teknik lain dalam membuat form dinamis yang mirip seperti di atas namun tanpa menentukan jumlah datanya dahulu, melainkan dengan mengklik suatu tombol atau link maka secara otomatis komponen input akan bertambah sendiri. Setiap kali kita mau menambah data baru, tinggal klik link tersebut tanpa merefresh halaman sehingga data yang telah diinputkan sebelumnya tidak hilang.

Perhatikan ilustrasi dari teknik tersebut di bawah ini

Gambar di atas adalah tampilan mula-mula form yang terdiri dari sebuah komponen input. Kita bisa mengisi data pertama pada komponen input tersebut. Apabila kita ingin menambah data baru, maka tinggal diklik saja link ‘Tambah’ nya dan jreng… munculah komponen input berikutnya di bawah nya, tanpa merefresh halaman dan data pertamanya tidak hilang. Perhatikan gambar di bawah ini

Apabila mau menambah data berikutnya lagi, klik ‘Tambah’ lagi dan munculah komponen input ketiga.

Begitu seterusnya…
OK.. dah paham skenarionya ya? sekarang bagaimana cara membuatnya?
Untuk membuat form dinamis seperti di atas, kita akan menggunakan Javascript. Adapun konsepnya adalah, kita akan gunakan innerHTML untuk menyisipkan tag HTML ke dalam sebuah bagian tag HTML yang lain. Perhatikan konsep di bawah ini.
Andaikan mula-mula kita punya tag HTML untuk form seperti di bawah ini

<form method="post" action="...">
Masukkan Data <input type="text" name="data[]">

<div id="input0">
</div>

</form>

Perhatikan bagian

<div id="input0">
</div>

bagian tersebut, adalah bagian tag HTML yang nantinya akan kita tempatkan komponen input berikutnya. Sehingga apabila kita sisipkan lagi komponen input di dalam bagian ber-id ‘input0′, struktur tag HTML nya menjadi

<form method="post" action="...">
Masukkan Data <input type="text" name="data[]">

<div id="input0">
  Masukkan Data <input type="text" name="data[]">

  <div id="input1">
  </div>
</div>

</form>

Apabila disipkan lagi komponen berikutnya di id ‘input1′, maka strukturnya menjadi

<form method="post" action="...">
Masukkan Data <input type="text" name="data[]">

<div id="input0">
  Masukkan Data <input type="text" name="data[]">

  <div id="input1">
     Masukkan Data <input type="text" name="data[]">

     <div id="input2">
     </div>
  </div>
</div>

</form>

Begitu seterusnya… itulah konsep dalam membuat form dinamis seperti di atas. Setiap kali kita sisipkan komponen input baru, kita sisipkan pula bagian atau tempat untuk meletakkan komponen input berikutnya dengan id yang berbeda.
Di sini, id komponen dibuat berbeda supaya kita bisa menentukan lokasi atau bagian yang tepat dimana ingin disisipkan tag HTML yang baru.
Trus.. bagaimana perintah Javascript untuk menyisipkan tag HTML ke dalam sebuah bagian ber-id tertentu? Seperti yang telah saya singgung sebelumnya, yaitu menggunakan innerHTML. Adapun sintaksnya sbb:

document.getElementById("namaID").innerHTML = "...";

Sebagai contoh, misalkan kita ingin menyisipkan tag HTML <p>Test</p> ke dalam komponen ber-id ‘contoh’ maka perintahnya

document.getElementById("contoh").innerHTML = "<p>Test</p>";

Nah.. konsepnya sudah kita dapatkan, sekarang saatnya action membuat script nya. Ini dia scriptnya

<html>
<head>
  <script language="JavaScript" type="text/JavaScript">
  counter = 0;
  function action()
  {
    counterNext = counter + 1;
    document.getElementById("input"+counter).innerHTML = "<p>Masukkan Data <input type='text' name='data[]'></p><div id=\"input"+counterNext+"\"></div>";
    counter++;
  }
  </script>
</head>

<body>
<h1>Form Dinamis</h1>

<form method="post" action="submit.php">
<p>Masukkan Data <input type='text' name='data[]'></p>

<div id="input0">
</div>

<p><a href="javascript:action();">Tambah</a></p>
<p><input type="submit" name="submit" value="Submit"><input type="reset" name="reset" value="Reset"></p>
</form>

</body>
</html>

Keterangan:
Untuk membuat nama id komponen yang berubah-ubah: input0, input1, input2, .. dst kita menggunakan increment counter++ dengan nilai awal counternya adalah 0.
Script di atas sudah dicoba dijalankan di browser Firefox 3 dan IE 6, dan.. hasilnya sukses.
Mudah bukan membuatnya?? nah.. dalam kesempatan lain saya akan menjelaskan cara membaca data yang diinputkan melalui form dinamis di atas pada script PHP. Tunggu ya…

Read More

Membuat Script Countdown Timer Link Download

Jika Anda sering mengunduh file di situs-situs file sharing seperti 4shared, rapidshare dll pastinya sering menjumpai countdown timer atau perhitungan waktu mundur sebelum muncul link download filenya. Mungkin Anda bertanya-tanya, mengapa perlu countdown tersebut? apa manfaatnya bagi situs tersebut? Ya.. manfaatnya ada, yaitu supaya pengunjung mau melihat iklan-iklan yang ada di halaman tersebut sambil menunggu countdown timer nya selesai. Apalagi jika iklannya adalah iklan PPC tentunya hal ini akan memberikan revenue bagi pemilik situs tersebut. Khusus untuk situs file sharing biasanya memanfaatkan pengunjung yang tidak sabaran menunggu countdown selesai untuk menawarkan layanan premium download.
Tentang countdown timer link download ini, bisa gak sih kita membuatnya sendiri? dan kalau bisa, kira-kira sulit nggak? Jawabannya adalah bisa, dan tidak sulit kok karena kita bisa membuatnya sendiri dengan Javascript. Scriptnya sendiri mudah dipahami.

Berikut ini adalah contoh halaman yang berisi countdown timer downloadnya.
download.html

<html>
<head>
   <title>Count Down Download dengan JavaScript</title>
   <script type="text/javascript">
    var counter = 10;
    function countDown()
    {
        if(counter>=0)
        {
            document.getElementById("timer").innerHTML = counter;
        }
        else
        {
            download();
            return;
        }
        counter -= 1; 

        var counter2 = setTimeout("countDown()",1000);
        return;
    }
    function download()
    {
        document.getElementById("link").innerHTML = "<a href='http://namasitus/filedownload'>Download</a>";
    }
   </script>
</head>

<body onload="countDown();">
<h1>File Download</h1><br />
<h3>Link download akan muncul dalam <span id="timer"></span> detik.</h3> 

<span id="link"></span>

</body>
</html>

Penjelasan script di atas adalah sebagai berikut:

var counter = 10;

digunakan untuk menset lamanya nilai awal countdown adalah 10. Jika Anda ingin mengubah nilai awal countdown, maka cukup mengubah nilainya saja.

function countDown()
{
    if(counter>0)
    {
       document.getElementById("timer").innerHTML = counter;
    }
    else
    {
       download();
       return;
    }
    counter -= 1; 

    var counter2 = setTimeout("countDown()",1000);
    return;
}

Function countDown() di atas digunakan untuk menampilkan nilai countdown nya. Jika nilai counter nya masih >= 0, maka nilai counter nya akan ditampilkan pada <span id="timer"></span> dengan menggunakan perintah

document.getElementById("timer").innerHTML = counter;

namun jika tidak, maka akan menampilkan link downloadnya dengan memanggil function download(), di mana isi function download() nya adalah sbb:

function download()
{
   document.getElementById("link").innerHTML = "<a href='http://namasitus/namafile'>Download</a>";
}

Perintah

document.getElementById("link").innerHTML = "<a href='http://namasitus/namafile'>Download</a>";

digunakan untuk menampilkan link download di dalam bagian <span id="link"></span>.
Apa kegunaan dari perintah

counter -= 1;

dalam function countDown() di atas? perintah tersebut digunakan untuk mengurangi satu demi satu nilai counter nya (decrement). Namanya saja countdown, pastinya counternya juga berkurang
Terakhir, apa kegunaan dari perintah

var counter2 = setTimeout("countDown()",1000);

Perintah tersebut digunakan untuk memanggil kembali function countDown() setelah 1000 milisekon (1 detik). Jadi function countDown() ini senantiasa dipanggil setiap selang 1 detik, sehingga jarak pergantian nilai counternya adalah setiap 1 detik. Jika Anda ingin memperlambat pengurangan counternya, cukup menambah nilai setTimeout() nya dengan nilai yang lebih besar, misalnya 5000 jika ingin delay counternya 5 detik.
Mudah bukan membuat script

Read More

Cara Menampilkan Video di Web dengan HTML5

Masih repot menampilkan file video di halaman web? Kini tidak lagi. Kalau dulu, kita membutuhkan script video player, seperti Flow Player, atau yang lain untuk menampilkan video dan memutarnya di halaman web Anda. Namun kini dengan HTML5, Anda cukup mengupload file videonya saja ke hosting atau web server, lalu membuat tag HTML saja, dan selesai.
Wah mudah banget ya??



So… Bagaimana bentuk tag untuk menampilkan file video ke halaman web dengan HTML5? caranya cukup mudah, cukup membuat tag HTML sebagai berikut:

<video width="..." height="..." controls>
  <source src="namafilemovie" type="mimetype">
</video>

dimana atribut ‘width‘ untuk menentukan panjang frame video playernya (dalam satuan pixel); ‘height‘ menentukan lebarnya (pixel); ‘controls‘ untuk menampilkan panel control pada frame video playernya seperti pengatur volume, full screen, seek bar dll; ‘src‘ untuk menentukan file video yang akan ditampilkan (bisa ditulis dalam bentuk URL); ‘type‘ untuk menentukan mime type dari file video tersebut.
Perhatikan contoh berikut ini ya

<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
</video>
</body>
</html>

Penampakan dari kode di atas pada browser adalah sbb:

NB: Jangan lupa menuliskan <!DOCTYPE html> pada bagian paling atas HTML Anda, karena kode tersebut merupakan penciri dari HTML5.
Anda dapat mengatur sendiri panjang dan lebar frame videonya, atau menghilangkan/memunculkan controls nya. Lalu format file video apa saja yang disupport HTML5? Format file video yang disupport adalah: *.mp4 (mime type: video/mp4), *.webm (mime type: video/webm), *.ogg (mime type: video/ogg).
Terkadang pula tidak semua jenis browser mensupport ketiga jenis file tersebut, misalnya browser IE dan SAFARI hanya bisa mensupport *.mp4 saja, atau OPERA hanya mensupport *.ogg dan *.webm saja. Sedangkan untuk CHROME dan Firefox mensupport ketiganya.
Penulisan tag <video> bisa juga seperti di bawah ini:

<!DOCTYPE html>
<html>
<body>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

</body>
</html>

Apa maksud kode di atas? Maksudnya adalah memberikan alternatif format file video. Jika browser yang digunakan mensupport *.mp4, maka file ‘movie.mp4′ yang akan dijalankan. Apabila tidak support, maka yang akan dijalankan ‘movie.ogg’. Sedangkan apabila keduanya tidak disupport maka akan muncul pesan ‘Your browser does not support the video tag.’. Jika Anda membuat kode seperti di atas, maka tentu saja Anda harus mengupload file ‘movie.mp4′ dan ‘movie.ogg’ ke server web.
Dengan HTML5, kita juga bisa membuat tombol Play, Pause, Reload sendiri untuk mengatur jalannya video. Untuk melakukan hal ini, kita menggunakan javascript. Perhatikan contoh berikut ini:

<!DOCTYPE html>

 <html>
<body> 
<button onclick="playVid()" type="button">Play Video</button>
<button onclick="pauseVid()" type="button">Pause Video</button>
<button onclick="reloadVid()" type="button">Reload Video</button>
<br>
<video id="video1">
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>
<script>
var myVideo=document.getElementById("video1"); 
function playVid()
{
  myVideo.play();
} 

function pauseVid()
{
  myVideo.pause();
} 

function reloadVid()
{
  myVideo.load();
}
</script> 

</body>
</html>

Keterangan:

• Untuk menjalankan video, cukup panggil dengan method play(), untuk mempausenya dengan method pause(), dan untuk mereload video gunakan load().
• Perhatikan kode di atas, untuk tag videonya diberi id=”video1″. ID ini nanti akan digunakan untuk proses pemanggilan elemen di javascriptnya, yaitu myVideo=document.getElementById("video1")

Tampilan dari kode di atas adalah sbb:

Mudah bukan membuatnya? selamat mencoba dan semoga bermanfaat. Untuk referensi lebih lengkap, Anda bisa mempelajarinya di w3schools.com.

Read More

Download Script NgapLoad File Gratis

Selamat datang kawan semua pada kesempatan kali ini ialah saya mau membagikan ke kalian semua script NgapLoad File Gratis dengan Jquery javascript, sangat simple karena tidak menggunakan MYSQL sama sekali dan mungkin kalian juga sangat berminat kan hehehe :palu:

Mungkin sudah banyak yang membagikan hal tersebut kepada kalian semua dan tidak tutup kemungkinan kalian mau untuk mengembangkannya lagi jika ada waktu,  script NgapLoad File Gratis menggunakan beberapa fungsi Javascript dan Jquery untuk mengaktifkan beberapa fungsi upload dan yang lebih bagusnya lagi yaitu adanya fung pengiriman hasil upload ke E-MAIL si pe-ngapload dan jika di lihat akun emailnya nanti akan ada pemberitahuan jika upload file sudah dilakukan dengan deskripsi file yang lengkap beserta email admin situs tersebut.

Dalam file script sengaja saya ENCODE supaya tidak meraja lela dengan mengganti alamat si pembuat, dan mungkin itu harus kalian terima, namun jika kalian tidak puas atau ingin mengubahnya juga tidak masalah, karena dosa kalian sendiri yang nanggung kan :P

Nah.. untuk itu silahkan simak baik-baik dibawah ini :

1. Buat hosting dan domain terlebih dahulu (kalo dah punya mati aja)
2. Kemnudian download scriptnya
3. Masuk pada akun FTP manager kalian lalu upload scriptnya
4. Unzip / Extrack file script yang sudah kalian upload ke FTP
5. Jika sudah kalian Extrack maka kalian Chmod semua file ke 777
6. Selesai...

Jika sudah paham silahkan download file dibawah ini :

Download Demo

 Semoga bermanfaat :palu:

Read More

Membuat Tombol Download Glossy Berwarna Cerah

Dalam tutorial ini, saya akan memperlihatkan pembuatan tombol download dengan tema glossy dan tampilan 3 dimensi. Tutorial ini akan membahas secara lengkap hingga ke pembuatan gambar transparan dalam format PNG-24. Semua elemen dalam tombol ini dibuat dari vector shape, ini membuat tombol bisa ditransformasi ke ukuran berapa pun tanpa menurunkan kualitasnya. Karena desain ini untuk web,pixel perfect.

kita akan bekerja dengan sangat akurat hingga ke detail 1 pixel. Semua ini diperlukan untuk mencapai desain yang

Preview

Sebelum mulai, lihat terlebih dahulu tombol download yang akan kita buat. Terlihat menarik? Lanjutkan dengan mengikuti tutorial di bawah.

Detail Tutorial:

• Tingkat Kesulitan: Pemula.
• Software yang Digunakan: Adobe Photoshop.
• Materi yang Dibahas: Penggunaan Layer Style, Proses Transformasi, Menggambar Shape Vektor.
• Lama Pengerjaan: 10 menit.

Tutorial

Langkah 1: Bentuk dasar tombol

Aktifkan tool rounded rectangle, pilih radius 7 px lalu buat shape persegi seperti di bawah. Beri layer shape ini base. Saya menggunakan warna biru muda di sini, Anda bisa menggunakan warna apapun yang Anda suka. Tidak masalah. Kita bisa mengubahnya nanti.

Tambahkan layer style Gradient Overlay dengan setting seperti di bawah. Style ini akan memberi kesan menggelembung pada shape.

Langkah 2

Di dalam shape base tombol, buat lagi sebuah rounded rectangle kali ini dengan radius 5 px. Ubah fill layer ke 0%. Beri stroke berupa gradasi dari abu-abu ke putih, set blend mode ke Screen untuk mempertahankan hanya warna putih di bagian atas. Stroke seperti ini memberi efek sedikit bevel di bagian dalam tombol.

Langkah 3: Refleksi

Gandakan layer shape base lalu secara manual tambahkan path berbentuk gelombang. Pilih intersect path untuk memotong kedua path. Ubah fill ke 0%. Lihat gambar di bawah untuk referensi.

Langkah 4: Ikon download

Buat sebuah shape lingkaran di sisi kiri tombol. Ubah Fill ke 0% dan Opacity layer 80%. Beri layer style

Langkah 5

Di dalam shape lingkaran tadi, buat lagi sebuah shape lingkaran dan beri layer style Gradient Overlay dengan tipe radial. Klik dan geser pada gambar untuk menggeser pusat gradasi agar tidak tepat di tengah-tengah lingkaran.

Langkah 6

Aktifkan tool custom shape dan dari daftar shape pilih salah satu shape panah. Buat shape panah berwarna hitam di tengah lingkaran. Ubah fill ke 11% lalu tambahkan layer style Bevel and Emboss dan Stroke. Bevel and Emboss akan memberikan efek emboss atau cekung ke dalam sementara Stroke akan memperkuat highlight di bagian bawah dalam cekungan dan memperkuat kesan 3 dimensi.

Langkah 7: Teks DOWNLOAD

Beri teks DOWNLOAD ke atas tombol. DI sini saya menggunakan font Arial Rounded karena terlihat menyatu dengan bentuk tombol. Teks besar biasanya akan lebih renggang dan ini tidak terlihat bagus ketika dibaca, ini salah satu konsep dasar dalam tipografi. Buka panel Character lalu perkecil tracking karakter hingga -25. Tambahkan layer styles Bevel and Emboss dan Gradient Over bertipe Gradient untuk memberi kesan teks cembung ke dalam.

Langkah 8: Menambah pita

Sekarang kita menambahkan pita yang bisa diisi dengan keterangan singkat. Buat shape berbentuk persegi. Dengan tool pen klik titik pojok kiri bawah untuk menghapusnya dan menghasilkan bentuk segitiga. Gandakan path segitiga, geser lima pixel ke kanan dan lima pixel ke atas. Pilih subtract path untuk mengurangi path sebelumnya.

Langkah 9

Tambahkan layer style Gradient Overlay bertipe radial. Geser posisi gradasi.

Langkah 10

Zoom lebih dekat. Buat dua garis di sisi terluar pita dengan pensil 1 px berwarna putih. Tambahkan keterangan misalnya FREE dan putar 45 derajat. Simpan teks ke atas pita. Karena teks ini sangat kecil, agar mudah dibaca kita perlu memperbesar nilai tracking melalui panel Character.

Langkah 11

Saat ini, pita terlihat melayang. Buat layer baru di antara pita dan tombol. Buat garis hitam menggunakan brush lembut. Lakukan proses transformasi, klik kanan dan pilih Warp. Geser kotak tengah hingga bagian tengah garis terlihat melengkung. Turunkan opacuty layer ke 30%. Dengan tool eraser hapus bagian bayangan yang tidak dibutuhkan.

Langkah 12

Buat seleksi kotak di belakang pita dan isi dengan warna abu-abu gelap. Bagian ini menjadi bagian belakang pita.

Langkah 13: Bayangan tombol

Buat layer baru seleksi di bagian paling bawah. Buat seleksi ellipse memanjang di bawah tombol. Isi dengan hitam dan beri filter Gaussian Blur untuk menghaluskan bayangan.

Langkah 14: Mengubah warna tombol

Kita ingin agar tombol ini seflexibel mungkin, warnanya bisa diubah dengan mudah tanpa perlu melakukan editing rumit. Untuk ini kita akan menggunakan adjustment layer Hue/Saturation. Tambahkan adjustment layer Hue/Saturation di atas layer shape base.

Tambahkan juga adjustment layer Hue/Saturation di atas layer pita. Khusus yang ini, ubah menjadi clipping mask dengan menekan Ctrl + Alt + G. Dengan cara ini, Hue/Saturation hanya akan mempengaruhi warna pita.

Langkah 15

Jika kita ingin mengubah warna tombol, misalnya agar sesuai dengan color scheme situs, kita tinggal mengaktifkan adjustment layer Hue/Saturation, pastikan pilihan Colorize aktif lalu geser ketiga slider yang tersedia. Dengan mudah warna tombol dan pitanya akan berubah. Lihat hasil yang saya peroleh hanya dengan mengubah slider di kedua adjustment layer.

Langkah 16: Menyimpan sebagai ikon transparan

Langkah terakhir kita adalah menyimpan gambar sebagai ikon transparan. Sembunyikan Background lalu tekan Ctrl + Shift + Alt + S. Di pilihan yang muncul pilih Preset: PNG-24 dan aktifkan pilihan Transparency.

Hasil Akhir

Akhirnya, inilah desain yang kita peroleh. Perhatikan bahwa formatnya sudah transparan sehingga latar gambar tetap terlihat. Seperti biasa, di akhir tutorial ini saya menyediakan file source yang digunakan. Tersedia juga lima tombol dalam berbagai warna dengan format file PNG transparan yang bisa langsung Anda gunakan jika mau.

Read More