Cara Membuat Efek Lipatan Kertas Pada Gambar Menggunakan Photoshop

Sebenarnya efek ini termasuk mudah bagi para pemula dan sering kita lihat di beberapa desain foto, mungkin beberapa dari para reader ada yang belum tahu cara membuat efek ini, maka saya buat sajalah tutorialnya, mari kita mulai.


1. Pertama buka Adobe Photoshop
2. Open gambar yang ingin anda edit.
3. Buat New Layer dengan menekan Ctrl+Shift+N.
4. Klik Pen Tool, buat 3 titik sehingga membentuk segitiga di pojok gambar (terserah dipojok mana aja, sebagai tutorial ini saya menggunakan yang pojok kanan bawah).
5. Klik kanan didalam segitiga yang anda buat. Klik Make Selection, langsung klik OK aja.
6. Klik Gradient Tool, gunakan warna hitam putih, geser dari ujung kertas sampai pojok.
7. Tekan Ctrl+D, klik Elliptical Marquee Tool, buat lingkaran di sebagian kertasnya, tekan delete.
8. Klik kanan pada layer kertas lipatan, klik Blending Option, klik Drop Shadow. Atur kira-kira seperti dibawah ini, anda bisa saja mengubah angka-angkanya sesuai selera, tidak harus terpaku dengan tutorial ini.

9. Klik layer background, klik Brush Tool, gunakan warna putih, hapus bagian yang menurut efek sudah terlipat.
10. Dibawah ini beberapa petunjuknya.

Hasilnya :

Semoga berhasil ! Selamat mencoba ! :)

Happy Blogging

Baca Selengkapnya »

Efek Box Gelap Terang Menggunakan Opacity Effect dan CSS3 Transition

Jika sampeyan mencermati beberapa box widget di blog ini, maka akan terlihat beberapa box widget akan terlihat terang hanya ketika cursor berada di atasnya. Opacity effect menjadi kunci terjadinya perubahan box gelap ke terang.

Opacity effect sebenarnya sebuah CSS property yang berfungsi untuk menciptakan efek transparansi atau sering disebut juga efek blur. Semua browser sudah support terhadapnya, hanya untuk Internet Explorer harus digunakan kode yang berbeda dari yang lain. Memanfaatkan opacity property dalam sebuah desain sangat mudah dilakukan, hanya agar supaya ketika cursor diarahkan di atasnya keadaan berubah menjadi terang/gelap maka harus ditambahkan sebuah hover effect. Secara sederhana penulisan opacity effect dalam sbuah kode CSS adalah sebagai berikut:

Penulisan opacity property di kode CSS

.efekblur {
      opacity: 0.7;
      filter:alpha(opacity=70);
}

Penulisan opacity property dan hover effects di kode CSS

.efekblur {
      opacity: 0.7;
      filter:alpha(opacity=70);
}
.efekblur:hover {
      opacity: 1.0;
      filter:alpha(opacity=100);
}

• Opacity di Internet Explorer dituliskan dalam bentuk kode:
  filter:alpha(opacity=...);
• Nilai opacity (tanda titik-titik) sebesar 0 s/100.
• Nilai opacity di browser yang lain menggunakan nilai 0 s/d 1.0
• Semakin kecil nilai opacity maka akan semakin gelap, demikian pula sebaliknya, semakin besar maka akan semakin terang/jelas.

Menggabungkan opacity property dan CSS3 Transition

Saat ini banyak browser sudah support terhadap CSS3 hingga berbagai efek baru dapat ditambahkan dalam sebuah desain termasuk saat kita mendayagunakan opacity property. Penggunaan CSS3 transition akan mampu menciptakan sebuah transisi dalam waktu yang bisa diatur saat terjadi perubahan efek gelap menjadi terang atau terang menjadi gelap. Transisi ini tentunya akan membuat efek transparansi yang tercipta menjadi semakin menarik, karena kecepatan waktunya bisa diatur sesuai selera.

Kode CSS: Efek Gabungan opacity dan CSS3 Transition

.efekblur {
      opacity: 0.7;
      filter: alpha(opacity=70);
     -o-transition:opacity ease-in 700ms;
     -moz-transition: opacity ease-in 700ms;
     -webkit-transition: opacity ease-in 700ms;
}
.efekblur:hover {
      opacity: 1.0;
      filter:alpha(opacity=100);
}

Jika beberapa efek lain masih ingin di tambahkan, maka penulisan dituliskan dalam bentuk:

.efekblur {
      opacity: 0.7;
      filter:alpha(opacity=70);
     -o-transition: all ease-in 700ms;
     -moz-transition: all ease-in 700ms;
     -webkit-transition: all ease-in 700ms;
}
.efekblur:hover {
      opacity: 1.0;
      filter:alpha(opacity=100);
}

Kode CSS di atas karena menggunakan CSS3, maka hanya akan bekerja secara sempurna di browser yang sudah support CSS3 seperti Mozilla, Opera, Safari dan Google Chrome serta beberapa browser tertentu yang lain.

Box dengan Efek Gelap Terang

Di bawah ini adalah contoh kode sebuah box yang telah dilengkapi dengan efek opacity, CSS3 transition dan beberapa kode lain.

.boxwidget {
      height: 250px;
      overflow: auto;
      margin: 20px 4px 10px;   
      padding: 15px 8px;
      background: #111;
      color: #666; 
      border: 2px solid #555;
      border-radius: 6px;
     -moz-border-radius: 6px;
     -webkit-border-radius: 6px;
      opacity: 0.4;
      filter:alpha(opacity=40);
     -o-transition: all ease-in 1.2s;
     -moz-transition: all ease-in 1.2s;
     -webkit-transition: all ease-in 1.2s;
}
.boxwidget:hover {
      background: #660000;
      color: #eee;
      opacity: 1.0;
      filter: alpha(opacity=100);
}

Untuk menggunakan box tersebut, sampeyan harus menggunakan kode xHTML seperti di bawah ini:

<div class="boxwidget">
Di sini widget atau Teks diletakkan!
</div>

• Simpan kode CSS di atas kode ]]></b:skin>
• Simpan xHTML melalui Add a Gadget/Tambah Gadget atau di antara tag pembuka <body> dan tag penutup <body>.

Happy Blogging

Baca Selengkapnya »

Tips Menggunakan link jQuery - jquery.1.3.2.min.js

02

Nov 2010

Dari sekian banyak javascript, jquery merupakan satu javascript yang paling banyak digunakan blogger. Beberapa desain memanfaatkan berbagai jenis jquery yang telah tersedia, namun yang terbanyak digunakan sebagai dasar pembuatan desain adah jquery 1.3.2.js atau jquery.1.3.2.min.js. Sekalipun edisi terbaru telah direlease dalam bentuk jquery.1.4.2.js, dengan penambahan beberapa fungsi baru yang belum ada di jquery.1.3.2.js, jquery yang luar biasa (1.3.2.js) ini tetaplah menjadi javascript terfavorit. Disamping beban yang lebih enteng, jquery.1.3.2.js sudah sangat memenuhi syarat untuk dikembangkan dalam usaha menciptakan berbagai desain baru pelengkap blog, terlebih untuk blog yang bersifat umum yang tidak memerlukan desain khusus sebagai pelengkap tampilan.

Saat kita menggunakan sebuah desain dengan jquery, kita harus memahami fungsi yang tercipta. Banyak desain lama dan baru juga menggunakan jquery.1.2.6.js misalnya. Banyak desain yang memanfaatkan jquery.1.2.6.js sebenarnya bisa berfungsi sama dengan menggantinya dengan jquery.1.3.2.js. Jadi ketika anda harus menambahkan jquery.1.2.6.js, sementara blog sudah memasang jquery.1.3.2.js atau jquery.1.3.2.min.js, maka kenapa pula harus menambahkan jquery.1.2.6.js. Penambahan jquery baru seperti di atas sebenarnya sudah tidak diperlukan lagi karena fungsi sudah tercover melalui jquery.1.3.2.js. Demikian juga saat sebuah desain baru menggunakan jquery.1.4.2.js. Akan lebih baik seandainya anda coba dulu dengan memanfaatkan jquery.1.3.2.js yang sudah dimanfaatkan/terpasang. Jika cukup dengan jquery.1.3.2.js dan desain berjalan sempurna, maka jquery baru tidak diperlukan lagi. Menambah jquery baru sama artinya dengan menambah beban tak perlu yang akan semakin memperberat beban dan loading blog. Hal-hal yang seperti ini teramat sering terjadi dan umumnya disebabkan masih terbatasnya pemahaman blogger terhadap kode HTML, atau javascript. Satu hal yang wajar dan dapat dimaklumi karena 99% blogger tumbuh dan berkembang dari basic pengetahuan diluar desain blog.

Beberapa catatan di bawah ini mungkin bisa anda manfaatkan ketika menggunakan jquery, terutama jquery.1.2.6.js, jquery.1.3.2.js, jquery.1.4.1.js dan jquery.1.4.2.js.

• jquery.js (tanpa min) dan jquery.min.js (menggunakan min), keduanya mempunyai kegunaan dan fungsi sama. Penggunaan "min" menandakan bahwa jquery tersebut telah di kompres (compress) hingga muatan atau bebannya telah terkurangi dengan tujuan untuk mempercepat waktu loading. Compress jquery dilakukan dengan menghilangkan beberapa keterangan dan spasi yang sebenarnya berfungsi untuk memudahkan pengguna saat membuat desain baru dengan memanfaatkan jquery. Kesimpulannya jika anda hanya sekedar pengguna lebih baik menggunakan jquery.min.js agar loading blog lebih cepat.
• Saat sebuah desain baru ingin anda gunakan, dimana desain tersebut menggunakan jquery.1.2.6.js (atau min), jquery.1.4.1.js (atau min), dan jquery.1.4.2.js (atau min), maka lebih baik coba dulu menggunakan jquery.1.3.2.min.js. Apabila desain bisa bekerja secara sempurna dengan jquery.1.3.2.min.js, maka jquery dalam desain baru tersebut dapat di cover dengan menggunakan jquery.1.3.2.min.js.
• Sebaliknya, bila ada sebuah desain baru hanya dapat berfungsi menggunakan jquery.1.4.2.js, maka sebaiknya seluruh desain yang menggunakan jquery.1.2.6.js, jquery.1.3.2.js atau jquery.1.4.1.js di coba dengan jquery.1.4.2.min.js. Apabila bisa berfungsi baik maka anda cukup gunakan jquery.1.4.2.min.js untuk meng-cover seluruh kebutuhan penggunaan jquery.
• Demi lancarnya (mengurangi trouble) penggunaan jquery, sebaiknya gunakan link:
  http://ajax.googleapis.com/ajax/libs/jquery/....../jquery.min.js
• Pasanglah link jquery di atas tag pembuka <head> atau di bawahnya dengan posisi paling atas dibandingkan javascript yang lain. Jadi setelah link jquery baru diikuti link-link javascript yang lain.
  Contoh:
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
  <script src="jqhorizaontal.js" type="text/javascript"></script>
  <script src="jqtabcontent.js" type="text/javascript"></script>
  ......
  ......
  dst
• Jika sudah cukup memahami cara pencarian kode html dalam template dan pemasangan kode di luar penggunaan "Add a Gadget", sebaiknya simpan link jquery di atas atau di bawah kode <head> karena jika sebuah desain menggunakan jquery sebagai dasar pembuatan desain maka script desain baru harus selalu berada di bawah link jquery. Jika jquery sudah berada di atas atau di bawah kode <head>, maka secara otomatis semua script yang dibuat untuk sebuah desain baru akan selalu berada di bawah jquery yang link-nya terpasang di bagian teratas blog (dekat <head>).

Semoga bermanfaat!

Happy Blogging

Baca Selengkapnya »

Ciptakan Banyak Efek dg Menggabungkan Opacity Property dengan Beberapa Property Lain dengan CSS3

 Setelah sebelumnya sampeyan mengikuti tutorial tentang bagaimana menciptakan efek transparansi atau opacity effect dengan memanfaatkan CSS opacity property serta membuat box sederhana dari paduan opacity property dan CSS3 transition yang didalamnya juga telah ditambahkan background effect, kali ini kita akan coba kupas lebih dalam tentang bagaimana cara memadukan opacity effect tersebut dengan beberapa CSS property yang lain hingga tercipta efek yang lebih fantastis dan menarik untuk dijadikan tempat bernaung widget atau desain yang lain. CSS3 masih akan menjadi "kekuatan utama" yang menjadi penentu keindahan efek yang kita ciptakan.

Agar supaya lebih mudah dipahami dan sekaligus dapat dimanfaatkan di blog, kita akan buat sebuah scroll box yang dilengkapi dengan berbagai efek seperti, height, background-color dan background-image, transparansi, color serta munculnya scroller hanya saat cursor digerakkan di atas box. Dengan beberapa efek seperti di atas, sebuah widget atau apapun yang nantinya kita letakkan dalam box maka sebelum cursor berada di atas box maka yang terlihat hanya sebuah box dengan ketinggian minimal (bisa diatur).





Scroll Box dg berbagai efek dan CSS3

.boxwidget {
       width: 300px;
       height: 70px; 
       overflow: hidden;
       margin: 20px 4px 10px;   
       padding: 15px 8px;
       background: #0066FF url(http://i1237.photobucket.com/albums/ff478/dalganteng/imageblog/bgCommentsTantyTM.png) right bottom  no-repeat;
       color: #996600; 
       border: 2px solid #555;
       border-radius: 6px;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
       opacity: 0.7;
       filter:alpha(opacity=70);
      -o-transition: all ease-in 1.2s;
      -moz-transition: all ease-in 1.2s;
      -webkit-transition: all ease-in 1.2s;
}
.boxwidget:hover {
       background: #660000 url(http://i1237.photobucket.com/albums/ff478/dalganteng/imageblog/bgBukuBNewH93V89.png) left top no-repeat;
       height: 250px;
       overflow: auto;
       color: #bbb;
       opacity: 1.0;
       filter: alpha(opacity=100);
}
.boxwidget h3 {
       font-size: 14px;
       background:#000 url(http://i1237.photobucket.com/albums/ff478/dalganteng/imageblog/bgBlueFadeV57H4.jpg) top left repeat-x;
       font-weigt: bold;
       text-transform:uppercase;
       color: #FF9900;
       margin: 0 6px 15px 37px;
       padding: 3px 5px;
       border-radius:4px;
      -moz-border-radius:4px;
      -webkit-border-radius:4px;
       text-shadow: 1px 1px 1px #000;  
}
.boxwidget:hover h3{
       background: red url(http://i1237.photobucket.com/albums/ff478/dalganteng/imageblog/Transparent-1.jpg) center;
}

================================================================================

<div class="boxwidget">
<h3>Tuliskan Widget Title disini!</h3>
Letakkan widget atau teks disini!
</div>

Catatan/Keterangan:

• Width bisa dirubah nilainya atau bahkan dihilangkan hingga lebar langsung menyesuaikan diri dengan lebar kolom/ruang yang tersedia.
• Height bisa diatur untuk mengatur ketinggian box. Height pertama (pada .boxwidget) merupakan tinggi box saat awal sedang height yang kedua (pada .boxwidget:hover) merupakan ketinggian box setelah cursor menyentuh bagian box.
• Opacity untuk mengatur transparansi saat awal dan ketika cursor berada di atas box.
• background menggunakan 2 buah background image dengan posisi di bottom right dan left top. Pengaturan posisi ini untuk menciptakan efek gerakan/pergeseran background-image.
• color pada hover dibuat berbeda agar ada penambahan efek. Usahakan color pada teks disesuaikan dengan warna background yang digunakan.
• h3 difungsikan untuk title/judul widget atau apapun yang terpasang di scroll box.
• Agar teks tidak seluruhnya ditampilkan dan menabrak box maka digunakan overflow:hidden;, sedang overflow: auto; berfungsi menciptakan membentuk scroll box.
• Pengaturan durasi waktu efek dilakukan dengan merubah nilai yang terdapat pada css transition (nilai 1.2s). Semakin besar maka durasi waktu efek semakin lambat.
• Berbagai perubahan kode dan komponen pendukungnya dapat dilakukan berbagai perubahan hingga dihasilkan berbagai variasi efek yang berbeda.

• Simpan kode CSS di atas kode ]]></b:skin>
• Simpan xHTML melalui Add a Gadget/Tambah Gadget atau di antara tag pembuka <body> dan tag penutup <body>.

Happy Blogging

Baca Selengkapnya »