Efek Teks Beku Menggunakan Photoshop

Sebelum mulai buka Photoshopnya dulu. Oke, jika sudah mari kita mulai.

1. Klik New File, ukurannya terserah anda. Kalau saya biasa pake ukuran 800x600 untuk coba-coba.
2. Beri warna Background hitam menggunakan Paint Bucket.
3. Ketik teks dengan warna putih.
4. Beri efek Bevel and Emboss (size:25), cara memberi efeknya klik kanan pada layer, Blending Options, beri checklist di pilihan Bevel and Emboss, klik tulisan Bevel and Embossnya untuk mengeditnya.
5. Buat New Layer dan taruh di bawah Layer Text.
6. Klik Layer Text, tekan Ctrl + E untuk merge down.
7. Tekan Ctrl+M (Curves).
8. Atur seperti gelombang longitudinal. Caranya, beri 3 titik di garis yg lurus. Atur titik-titiknya menjadi :
titik A : 65 dan 191
titik B : 126 dan 81
titik C : 192 dan 221
Untuk contohnya lihat gambar dibawah ini.


9. Untuk Hue/Saturation tekan Ctrl+U dan tandai Colorize (Hue:200, Saturation:40, Lighting:0)
10. Beri efek Inner Glow (Warna biru, size:8).
11. Ctrl+klik di Layer Teks.
12. Klik Channel, klik Save Selection as Chanel, ada di pilihan tombol yg dibawah yg berbentuk lingkaran. Jika sudah akan muncul chanel Alpha 1.
13. Klik Alpha 1, lalu Ctrl+D.
14. Klik Filter, lalu Brush Stroke, Spatter (16,7).
15. Klik Filter, Artistic, Paint Daubs (8,7).
16. Ctrl+Klik di Alpha 1.
17. Klik Select, Modify, Contract (5 pixel).
18. Save selection as Chanel seperti tadi, akan muncul Alpha 2.
19. Klik Alpha 2, lalu Ctrl+D.
20. Klik Filter, lalu Brush Stroke, Spatter (16,7).
21. Klik Filter, Artistic, Paint Daubs (8,7).
22. Ctrl+klik di Alpha 2.
23. Klik Alpha 1, tekan delete, kemudian Ctrl+D.
24. Klik Image, Rotate Canvas, 90* CW.
25. Klik Filter, Stylize, Wind (From the Right). Lalu tekan Ctrl+F.
26. Klik Filter, Sketch, Plaster (20,2).
27. Klik Filter, Stylize, Wind (From the Right).
28. Klik Image, Rotate Canvas, 90* CCW.
29. Tekan Ctrl+klik di Alpha 1
30. Klik Layers, Create a new layer dan tekan Alt+Del.
31. Tekan Ctrl+D dan beri nama layer "Beku".
32. Tekan Ctrl+J (Duplicate Layer) dengan opacity 50 %.
33. Klik layer Beku.
34. Beri efek Drop Shadow. Hilangkan tanda Use Global Light, Angle:90, Distance:5, Spread:0, Size:0
35. Beri efek Bevel and Emboss. Size:7, Angle:90, beri warna abu-abu pada palette warna paling bawah.

Happy Blogging

Baca Selengkapnya »

Cara Mengubah/Mengganti Jenis Font di Blog Blogger (CSS Styling)

Terkadang, jenis font (font-family) bawaan template blog dirasa kurang sesuai dengan keinginan, sehingga kita harus mengubahnya dengan jenis-jenis font lain agar tampilan blog lebih bagus atau setidaknya sesuai dengan konteks/tema blog.

Pada kesempatan ini, saya terlebih dahulu akan membahas tentang penggantian jenis Font dengan CSS dan bukan dengan Custom Font, yang menggunakan javascript dan biasanya bersumber dari API Google. Penggantian font dengan CSS, meskipun sederhana tampilannya, namun cukup aman dan cepat di load, karena Browser dan Computer telah memiliki database font-font tersebut (disebut "Web Safe Fonts").

Sekilas Tentang Jenis Font (font family) dalam CSS

Jenis font dalam CSS dinyatakan dengan properti font-family. sehingga dalam penulisannya, deskripsi CSS font-family dituliskan seperti contoh berikut:

p {font-family: "Times New Roman";....;}

atau dipersingkat dengan shorthand (dituliskan dengan font saja):

p {font: "Times New Roman";....;}

Ada dua kategori jenis font:

a. Font family: Nama-nama utama (root name) font, misalnya "times", "arial", courier", dll.

b. Generic family: Nama-nama font turunan, misalnya "serif", "sans serif", "cursive", dll.

Penulisan font-family yang sering kita jumpai dalam CSS terdiri dari font-family dan generic family. Keduanya dituliskan berurutan dengan tujuan apabila sebuah font tidak tersedia dalam database suatu browser, maka browser akan merujuk pada jenis font lain yang telah dituliskan di belakangnya.

Contoh:

p {font-family:  "Times New Roman",Georgia,Serif;...;}

Note: perhatikan tanda kutip pada Times New Roman. Tanda kutip digunakan pada nama font yang memiliki jarak spasi kosong (white space). 

Selalu tuliskan CSS jenis font dengan aturan seperti di atas untuk berjaga-jaga apabila browser yang digunakan pengunjung tidak memiliki database font yang diinginkan, sehingga browser dapat langsung melompat ke jenis font lainnya.

Font Pada Template Blogger

Pada dasarnya font di dalam template Blogger ditentukan dengan CSS styling, sehingga jika harus mengubah jenis font, maka jelas perubahan dilakukan pada CSS-nya. Ada dua cara yang biasanya digunakan untuk membuat default font pada template Blogger:

1. Menuliskan variable CSS font untuk bagian-bagian (elements) tertentu, misalnya judul blog, deskripsi blog, judul posting, footer posting, footer, judul sidebar, dan seterusnya. Kemudian menuliskan variable tersebut pada font-family masing-masing elemen. Variable terletak di bagian atas CSS, biasanya setelah/dekat <b:skin><![CDATA[. Contoh variable-variable-nya:

.......................
<Variable name="dateHeaderFont" description="Date Header Font"
type="font"
default="normal bold 117% Arial, sans-serif" value="italic normal 80% Arial, sans-serif"
 >
<Variable name="postTitleFont" description="Post Title Font"
type="font"
default="normal bold 180% Georgia, Times, serif" value="normal bold 142% Trebuchet, Trebuchet MS, Arial, sans-serif"
 >
.......................

Sebagai contoh, jika saya ingin untuk menyatakan jenis font yang dipakai dalam judul posting (header posting), saya menggunakan nama variable (name=) postTitleFont sebagai perwakilan jenis font pada properti font family nama blog yang telah dituliskan pada variable. Nama variable yang digunakan sebagai deklarator dituliskan dengan diawali tanda $:

.post h3 {font-family:  $postTitleFont;}

2. Menuliskan langsung jenis Font pada property-nya (font-family atau font). Contoh:
 .post h3 {font-family: "Georgia, times, serif;...;}

Dengan demikian poin serta cara untuk mengubah/mengganti jenis font di Blogger begitu mudah. Lanjut!

Mengubah Jenis Font di template Blogger/Blogspot

Sesuai dengan dua cara untuk menentukan font pada template Blogger di atas, maka pastinya cara untuk menggantinya pun ada 2, yaitu mengubah font pada variable atau langsung mengubah property font-family di setiap elemen. Mengubah variable sangat riskan karena ada nilai default dan value yang merupakan aturan general pada elemen-elemen utama blog.. Oleh karenanya, lebih baik ganti font langsung pada properti font family-nya. 

Cara mencari dan mengubah jenis font family pada setiap elemen CSS:

1. Buka Edit HTML/Template Blogger.

2. Cari elemen CSS yang ingin di ubah, letaknya antara <b:skin><![CDATA[ dan ]]></b:skin>.

3. Setiap elemen CSS di template Blogger memiliki nama berbeda sesuai yang telah diberikan oleh pembuatnya, tapi secara umum, nama-nama itu hampir mirip dan memiliki deklarator umum yang sama:

Misalnya: Untuk elemen judul posting, biasanya dituliskan dengan .post h3, .post h2, #post h3, #post h2, .h3, .h2, (h menyatakan header atau judul/title, berlaku pula untuk judul sidebar, dll), dan masih banyak lagi. Untuk isi posting biasanya dinyatakan dengan .post. Demikian dengan sidebar, ada banyak variasi namun dapat dipastikan semua mengandung kata yang sama: sidebar.

3. Setelah menemukan element yang dicari, selanjutnya cari property font-family atau font yang di belakangnya ada definisi font atau nama variable seperti contoh variable diatas. Ganti dengan jenis-jenis font baru pada bagian tersebut. Contoh:

.post h3 {font-family: Georgia, times, serif;...;}

Ganti bagian font yang berwarna biru dengan font-font lain.

atau biasanya juga ditampilkan dengan nama variable:

.post h3 {font-family:  $postTitleFont;}

Ganti bagian font yang berwarna biru dengan font-font lain.

4. Anda juga dapat menambahkan jenis font baru pada elemen yang belum memiliki aturan font-family.

Misalnya. bagian comment blog saya belum memiliki aturan jenis font khusus, maka saya dapat menambahkan font-family/font di dalam aturan CSS-nya:

Sebelumnya: 

#comments {margin: 0px 0px 0px 0px; padding: 15px 20px 15px 20px; text-align: left; color: #4c4c4c; border: 1px solid #ccc;background:#fff;}

Sesudahnya:

#comments {margin: 0px 0px 0px 0px;padding: 15px 20px 15px 20px; text-align: left; color: #4c4c4c; font: "Times New Roman", Trebuchet, Serif; border: 1px solid #ccc; background:#fff;}

5. Untuk mengetahui jenis-jenis font, cek CSS Web Safe Fonts.
6. Setelah selesai mengubah atau menambah font, save template.

Jika ada problem atau pertanyaan lebih lanjut mengenai font, pengubahan font, serta elemen CSS blog yang belum diketahui, feel free to use the comment form below.

Happy Blogging

Baca Selengkapnya »

Cara Membuat Template di Blogger

Yak akhirnya jadi juga, seperti yang aku janjikan kemarin yaitu "Cara Membuat Template Blogger". Mulai dari mana ya? nnnngg.. :t ohya, tak jelasin dulu deh tentang artikel ini. Gini, dalam trik berikut, kita akan mencoba membuat template yang paling sederhana dan paling mudah. Sebenarnya dalam mebuat template di blogger harus mengerti tentang CSS dan HTML, tapi untuk kali ini kita hanya memerlukan sedikit kemampuan tersebut karena kita akan membuat template yang paling sederhana, tapi jangan salah walaupun caranya sederhana tapi hasilnya bisa sangat luar biasa, tergantung dari desainernya. Ok deh mulai aja deh ya, kayaknya udah pada nggak sabar nih.

Gini, cara termudah dalam membuat template blogger yaitu dengan mendownload sebuah template kemudian kita otak-atik sendiri, jadi kita tidak perlu membuat dari awal. Untuk bahan praktek kali ini kita coba memakai template yang aku dah pernah aku buat, downlad disini bahannya. Sebelum kita mulai gue saranin lo buat blog baru aja biar gak ngerusak blog asli kamu.

Tahap Desain

Template yang akan kita buat disini memiliki empat komponen utama yaitu Background, Header, Main dan Footer.

Jadi kamu harus membuat keempat komponen tersebut. Cara buatnya gimana? kamu harus bisa menggunakan software image editor seperti Photoshop, Corel, Paint dll. Cara pembuatan desainya lebih jelasnya seperti ini:
1. Buat desain seperti gambar diatas
2. Pada bagian background usahakan bersifat "Tile / Pattern" (kecil dan berulang-ulang).
3. Untuk Main dibagi lagi menjadi beberapa kolom, boleh 2 kolom, 3 kolom atau terserah deh. Dan biasanya terdiri dari bagian utama (posting) dan sidebar.
4. Kemudian potong-potong perbagian.
5. Untuk bagian Header motongnya harus full.
6. Bagian background, main dan footer motongnya sedikit aja karena bersifat "tile"
7. Desain diatas kalo dipotong-potong akan menjadi seperti ini :

background
header
main
footer

8. Upload potongan-potongan tersebut pada sebuah webhosting atau layanan penyimpanan file lainya. Contohnya di geocities atau Photobucket dll.

Nha modeng po ra?

Sekarang kita memasuki ke tahap penyusunan di blogger. gini langkah-langkahnya. Ohya udah di download belum tadi bahanya, kalo belum download dulu diatas itu. Ok kita mulai:
1. Kembali ke blogger dan ke menu "Edit HTML".
2. Trus klik tombol "Brows" untuk mengupload template yg udah kamu donwload tadi.
3. Kemudian Cari kode seperti ini:

body { margin: 0px; padding: 0px; text-align: left; font:$bodyfont; color:$textcolor; background: #323232 url('http://daltrikblog.co.cc/template/bg.jpg') repeat-x top left; }
4. Ganti text yang dicetak tebal dengan lokasi gambar background yang kamu buat.
5. Cari kode seperti ini :

#center {background: #ffffff url('http://daltrikblog.co.cc/template/main.jpg') repeat-y top center;}

6. Ganti text yang dicetak tebal dengan lokasi gambar main kamu.
7. Cari kode seperti ini:

#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('http://daltrikblog.co.cc/template/head.jpg') no-repeat top center; }

8. Ganti text yang dicetak tebal dengan gambar header.
9. Cari kode seperti ini:

#footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url('http://daltrikblog.co.cc/template/foot.jpg') repeat-y top center; }

10. Ganti text yang dicetak tebal dengan gambara foter.
11. Masih ada beberapa hal yang harus kamu perhatikan. coba cari kode-kode berikut:

#outer-wrapper { width: 898px; margin: 0px auto 0; text-align: justify; }

kode width: 898px menunjukkan lebar dari blog kamu, kamu bisa mengubahnya sesuai keinginanmu, tapi harus disesuaikan dengan lebar desain gambar yang kamu buat.

#main { float: left; width: 445px; margin: 5px; padding: 0px 0px 0px 10px; line-height: 1.5em; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; }

kode width: 445px; adalah lebar daerah main yang berisi posting, kamu bisa merubahnya.

#sidebar { float: right; width: 153px; padding-right: 50px; font-size: 83%; color: $sidebartextcolor; line-height: 1.4em; word-wrap: break-word; overflow: hidden; }
#ads-wrapper {float: left; width: 195px; padding-left: 10px; word-wrap: break-word; overflow: hidden; }

kode width: 153px; adalah lebar sidebar bagian kanan. Dan kode width: 195px; adalah lebar sidebar bagian kiri. Terus kode padding-right: 50px; jarak antara tulisan atau isi sidebar sebelah kanan dengan garis batas kanan. Dan kode padding-left: 10px; adalah jarak antara isi sidebar kiri dengan garis batas kiri.

#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('http://daltrikblog.co.cc/template/head.jpg') no-repeat top center; }

kode height:196px; width:898; adalah ukuran tinggi dan lebar bagian header, kamu bisa menyesuaikannya dengan ukuran header kamu.

#footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url('http://daltrikblog.co.cc/template/foot.jpg') no-repeat top center; }

kode width: 898px; height:80px; adalah ukuran lebar dan tinggi bagian footer.

12. Nah kalo udah selesai coba di preview template kamu, sudah sesuai kah? atau hancur?
13. Kalo sudah di Save.

:f akhirnya selesai juga aku buat artikel tentang pembuatan template, capek ya? tapi ingat sekali lagi ini adalah metode membuat template yang mudah dan sederhana, jadi sebenrnya isi dari template lebih rumit lagi, munkin kapan-kapan akan kita bahas detail dari bagian-bagina template tersebut.
OK SELAMAT BERJUANG......

Happy Blogging

Baca Selengkapnya »

Cara membuat game sendiri | game maker download

Apakah kamu suka bermain game dan salah satu penggila berat game-game, jika ya pernahkah berfikir bagaimana membuat game sendiri dan kemudian memainkannya? Sulit da repot ya apalagi bagi seorang yang buta akan bahasa pemograman seprti saya, tapi sekarang semua itu bisa teratasi jika memang ada kemauan bahkan tanpa harus mengerti bahasa pemograman, jawabannya yaitu Game maker! 

ya...game maker yaitu suatu software untuk membuat game dengan mudah kita tinggal menentukan settting dan jenis game terserah yang kita mau mulai 2D, 3D, Petualangan, strategi dan lainnya,

Jika kamu tertarik membuat game sendiri silahkan download softwarenya dibawah ini!
Download Game Maker gratis

Versi : 08
Ukuran file : 9.5 mb

• dengan game maker kamu bisa membuat game petualangan sendiri 3D ataupun 2D
• cocok untuk kamu yang berjiwa seni
• ada banyak sampel game yang disediakan seperti 1945 sudoku dan yang lain
• dengan sistim pengoprasian yang mudah
• download dan install kemudian jalankan programnya untuk segera membuat game sendiri.
• mainkan game buatan kamu dan nikmati hasilnya karya kamu sendiri

Happy Blogging

Baca Selengkapnya »

cari uang mudah gan,,

ga nyangka kemaren bener2 gw dpet program internet berhasil ngasih duit beneran cuma dengan isi survey mereka,,coba deh gw recomended bgt program ini,,belum dapet banyak c,tapi gw uda ketarik 50rb dalam 2 hari,cuma modal online,kalo ada pertanyaan gw bantu,daftar via gw ya,bener dah 2 hari doang dapet 50rb,cuma isi2 survey.. daftar disini ya,gw bantu juga kalo bingung narik duitnya 
 http://id.ipanelonline.com/register.html?inviter_id=1146342
setelah daftar,aktivasi email anda(dalam email),lalu lihat indonesia survey center,kerjakan salah satu,,,lalu poin sudah anda dapatkan...
ingat habis kerjakan jangan lagsung ditutup,tp coment dahulu 
ane jelasin disini agan cuma isi - isi survey doank trus ntar kita dapet point dari tiap survey yang kita lakukan. nah point itu lah yang nantinya kita tuker jadi duit.

mudahkan. untuk join langsung http://id.ipanelonline.com/register.html?inviter_id=1146342
berikut ane jelasin sedikit tentang IPANELONLINE :

1.ipanelonline merupakan perusahaan jasa survey. Kl ada perusahaan besar yg mau cek tingkat kepuasan konsumen terhadap barang yg mereka jual, mereka minta bantuan iPanel Online untuk survey.

2. iPanelonline bukan perusahaan MLM dan tidak memungut bayaran sepersen pun.

3.kita cukup mengisi survey yang ada di dalam ipanelonline dan akan mendapatkan poin. jumlah poin ini berbeda-beda tergantung kebijakan dari ipanelonline sendiri. poin mulai dari 5-500

4. kalau poinnya sudah mencapai minimal transfer, kita bisa transfer poin menjadi uang. kriteria poinnya
220 =20rb
520 = 50rb
1020 = 100rb
gampang cara nariknya gannn 

Happy Blogging

Baca Selengkapnya »