Bikin Pola Background Lewat Photoshop

Widgets

Kali ini tips saya adalah membuat pola background lewat photoshop.. Background dengan penggunaan pola atau gambar tentu akan memberikan keindahan tersendiri bagi blog kita, dibandingkan jika hanya berupa background warna.

Saat ini memang sudah cukup banyak situs yang menyediakan pola/pattern gratis yang dapat kamu jadikan sebagai pola background kamu. Tapi tetap saja pola yang kita buat sendiri pasti memiliki arti tersendiri buat kita kan...

Untuk lebih paham lagi cara membuat pola background lewat Photoshop, maka ikuti langkah-langkah berikut ni.. But, photoshop yang saya gunakan saat ini adalah Photoshop CS3.. So, let's check it out man..

1. Pada menu photoshop klik File > New (ctrl+n). Atur setting Width : 50 pixels, Height : 50 pixels, resolusi : 72 pixel/inch, dan Background content : Transparent. Lalu klik OK


2. Setelah kanvas sudah terlihat, atur Foreground Color sesuai keinginan kamu. untuk tips ini saya mengggunakan warna putih (#FFFFFF).

3. Kemudian Klik Paint Bucket tool, seperti gambar di bawah kemudian tumpahkan pada kanvas sehingga warna putih menutupi kanvas.

4. Kemudian kita ubah kembali warna foreground nya untuk membuat pola di kanvas. Untuk warna pola terserah kamu saja, yang penting aajjjiiiiiibbb...

5. Lalu klik ikon Custom Shape Tools lalu pilih shape yang kamu sukai. Untuk melihat pola shape yang ada, kamu bisa mengklik tanda panah di sebelah kanan pola shape yang ada.


6. Setelah pola selesai dibuat, lalu rasterize pola nya untuk menghilangkan garis-garis di pola dengan mengklik Layer > Rasterize > Shape..

7. Lalu pola tersebut di save dengan mengklik File > Save For Web And Devices. Tentukan nama polanya. Untuk pola ini Saya memberi nama Pattern1.gif.

8. Langkah berikut kamu upload pola kamu di situs upload kamu, seperti Photobucket.com, Flikr, dan lainnya.

9. Kemudian masuk ke edit HTML blog kamu. cari kata body {. Seperti kode di bawah ini.

body {
background: #0000a8;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small; text-align: center; }

Lalu hapus kode yang berwarna oranye, dan ganti dengan alamat URL pola kamu. Contohnya seperti ini.

body { background: url(Alamat Pola Gambar kamu)repeat;
margin:0; color:$textcolor;font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center; }

10. Dah selesai ni, tinggal liat hasilnya. Penasaran liat hasilnya bagaimana? coba liat contohnya seperti blog saya ni. Cukup mudah bukan? .Silahkan mencoba ya.. semoga sukses..