~Cara Membuat Tulisan Arab di Blogger~

ا لحمد لله kali ini saya akan membagikan yang tadinya tidak yakin akan berhasil, namun saya jadi penasaran dan kemudian mencobanya di blogger. Eh ternyata alhasil sahabat bisa lihat tulisan Arab di blog saya ini, walau nggak ada tanda bacanya alias masih huruf gundul. Tetapi mungkin sangat penting untuk semua blogger, terutama blogger Muslim yang setiap kali ingin mengupdate artikelnya, tetapi tidak dapat menuliskan huruf Arab ke dalam postingannya.

Tidak usaha bingung sekarang udah bisa asal kita tahu caranya. Saya akan memberikan sedikit tips untuk teman-teman muslim agar dapat membuat tulisan Arab yang bermanfaat dengan memberikan sedikit sentuhan dengan menampilkan ayat-ayat Al-Qur'an atau Hadist dalam bahasa Arab tanpa harus menginstal software, mensetting atau mengedit html blog template kita atau komputer kita.

Nah, sekarang bagaimana caranya ? Mudah kok, sebab cara ini memang sangat sederhana tetapi ا ن شا ا لله memberikan manfaat untuk sahabat muslim.

Untuk menerapkan apa yang telah saya maksud diatas. Silakan kamu salin kodenya dibawah ini !

HURUF ARAB	KODE
ا	& #1575 ;
ب	& #1576 ;
ت	& #1578 ;
ث	& #1579 ;
ج	& #1580 ;
ح	& #1581 ;
خ	& #1582 ;
د	& #1583 ;
ذ	& #1584 ;
ر	& #1585 ;
ز	& #1586 ;
س	& #1587 ;
ش	& #1588 ;
ص	& #1589 ;
ض	& #1590 ;
ط	& #1591 ;
ظ	& #1592 ;
ع	& #1593 ;
غ	& #1594 ;
ف	& #1601 ;
ق	& #1602 ;
ك	& #1603;
ل	& #1604;
م	& #1605;
ن	& #1606 ;
ه	& #1607;
و	& #1608;
ى	& #1609;
ي	& #1610;
ة	& #1577;
إ	& #1573;
ؤ	& #1572;
أ	& #1571;
آ	& #1570;

Perhatian :

Untuk menghasilkan tulisan Arab yang sempurna, jangan pisahkan dengan koma atau Spasi jika membuat huruf Arab bersambung. Contoh Khazanah Islam, maka huruf Arabnya menjadi خز ا نة ا لإ لسلا م. Jadi kalimat yang bersambung, penulisan kodenya tanpa spasi dan pisahkan huruf tersebut jika kalimat atau hurufnya berdiri sendiri.

Demikianlah yang saya dapat sampaikan semoga bermanfaat dan selamat mencoba.

~Cara Mengambil Tampilan / Screenshot Blog Penuh Tanpa Terpotong (Full Screenshot)~

Terkadang sebagai seorang blogger kita memerlukan tampilan atau screenshot dari blog kesayangan kita, misal untuk promosi atau sekedar share tampilan blog kita. Ada banyak cara untuk mengambil sebuah screenshot dari tampilan blog kita , Yang paling simpel ialah dengan cara menekan  tombol prtsc ysrq (print screen) yang ada di papan keyboard, namun cara tersebut memiliki kekurangan , pakai prtsc ysrq itu tampilannya tidak bisa penuh satu halaman , yang muncul hanyalah gambar yang lagi tampil dimonitor.

Pada kondisi tertentu kita memerlukan sebuah screenshoot satu halaman web secara penuh tanpa terpotong , dengan prints screen sepertinya itu tidak memungkinkan jadi kita harus menggunakan cara lain.

Caranya  ialah menggunakan tool online atau Add On, Jadi tidak perlu repot ambil screenshot lalu kopi paste lagi seperti Print Screen karena hanya dengan memasukan link url blog kita yang akan diambil screenshotnya ke web tersebut maka jadilah screenshot blog kita secara full tanpa terpotong ! Namun kekurangannya mengambil screenshot melalui website pihak ketiga ialah loading yang lumayan lama dan juga terkadang erorr.

Kalau sobat ingin mencoba mengambil screenshot blog secara online, bisa menuju salah satu situs penyedia tool untuk mengambil screenshot sebuah halaman di internet seperti :

• Thumbalizr.com

atau

• webshotspro.com

Caranya : masukan alamat blog sobat kedalam form yang ada di dua alamat website diatas kemudian pilih resolusi /ukuran  hasil gambar  yang diinginkan.

Selain menggunakan tool online , sobat bisa juga menggunakan Add ons dari firefox yang bernama Screengrab!

Setelah menginstal add on screengrab, untuk mengambil screenshoot tinggal klik kanan lalu ada opsi untuk menyimpan halaman web, bisa full satu halaman tanpa terpotong ataupun di pilih (crop) sesuai keinginan sobat bagian mana yang ingin diambil dengan sangat mudah. 

Silahkan sobat gaptek coba download add on screengrab di:

Download AddOns Screengrab : https://addons.mozilla.org/en-US/firefox/addon/1146

keuntungan menggunakan addon screengrab dibanding pakai tool online dari Thumbalizr.com dan Webshotpro.com ialah kita tidak perlu menunggu load yang lama bahkan antri lagi untuk mengambil screenshot full satu halaman.

Menurutku cara terbaik dan termudah mengambil full screenshot halaman web / blog ialah dengan menggunakan cara terakhir yaitu dengan add on.

Update :

Add on untuk mengambil screenshot halaman blog yang lebih keren dari Screengrab dan kompatibel dengan mozilla firefox 4 ada Awesome Screenshot . Add on ini jauh lebih keren daripada semua tool diatas karena memiliki fitur untuk langsung mengedit hasil screenshoot serta untuk langsung menguploadnya di DIIGO serta untuk share ke Facebook dan Twitter.

Tool Editing

Tool Share Screenshot

Untuk menggunakannya sobat bisa menuju ke Addon Awesome Screenshot Membuat Screenshot Full Tanpa Terpotong lalu download addonnya (Firefox dan Chrome)

Semoga bermanfaat

~Cara membuat Animasi GIF dengan Photoshop cs3~

   Selain digunakan sebagai applikasi untuk mengedit foto, photoshop juga bisa untuk membuat gambar bergerak / animasi dalam format "gif" (graphic interchange format). Dengan bermain frame per frame, kita dapat membuat animasi tulisan ataupun gambar dengan mudah sesuai selera.

Dalam hal ini kreativitas kita sangat dibutuhkan di sini, saya hanya memberikan tutorial dasarnya saja, sobat-sobat tinggal mengembangkannya.

Photoshop yang saya gunakan di sini adalah photoshop CS3, photoshop CS2 juga bisa digunakan.

Cara membuat animasi gambar bergerak :
1. Buka Adobe photoshop

2. Buka tool animasi di photoshop, caranya klik menu “window” di photoshop, lalu pilih “animation”

Sampai muncul window kayak gini:

3. Di photoshop, pilih file » new masukkan ukuran sesuai selera, kalau saya pakai 125 x 125 pixel, lalu oke

4. Selanjutnya, buat 3 buah lingkaran dengan layer yang berbeda. Buat sebuah lingkaran dulu, selanjutnya pada jendela layer, kita klik kanan layer lingkaran tersebut, lalu pilih “duplicate layer…”.

Contoh

Tampilan pada jendela layer seperti ini:

Dan ini tampilan dalam jendela animation:

5. Selanjutnya, buat 3 buah frame dalam jendela animation, dengan mengklik icon “duplicates selected frames” (tanda lingkaran merah pada gambar diatas!) hingga jadi seperti ini: 

6. Untuk menampilkan warna merah dahulu, klik frame pertama pada jendela animation, lalu pada jendela layer, nonaktifkan icon mata (indicates layer visibility) pada layer warna kuning dan hijau, sehingga hanya layer warna merah yang terdapat icon mata, seperti gambar di bawah :

Kemudian kembali lagi ke jendela animation, klik frame kedua, aktifkan icon mata pada layer kuning. Sedangkan pada frame ketiga, aktifkan icon mata pada layer hijau. Oh iya jika ingin animasi kita nanti transparan, tinggal nonaktifkan icon mata pada layer background di semua frame animasi.

Dalam jendela animation akan terlihat seperti berikut:

 7. Klik tombol play untuk memainkan animasi, kita bisa mensetting timming animasi sehingga animasi tidak bergerak terlalu cepat. Setting waktunya dengan meng-klik tanda panah segitiga di samping kanan tulisan 0 sec.



8. Agar animasi bergerak terus tanpa henti, maka animasi harus di setting “forever”, tetapi jika ingin bergerak satu kali, setting dengan “once”, seperti gambar di bawah:

 Kira-kira hasilnya seperti ini…

 9. Kemudian simpan dengan menggunakan “save for web & device” nya photoshop. Caranya klik file > Save for web & device atau shortcut CTRL+ALT+SHIFT+S

Selamat mencoba !!

~Tutorial Membuat Teks Efek Fill Gambar~

Tutorial Kali ini kita akan mencoba membuat sebuah teks yang dalamnya berisikan sebuah gambar, sehingga teks terlihat lebih cantik.. he3...

Berikut Langkah-langkahnya: 
1. Buat file baru 
File > New dengan ukuran (Width : 450 px dan Height : 170 px)

2. Buat sebuah teks menggunakan HORIZONTAL TYPE TOOL
Hasilnya...

Kemudian Atur jenis Fonts dan Ukuran sesuai dengan selera kamu…
Disini saya menggunakan kata Digital dengan font Script MT Bold
Hasilnya:

Atau anda ingin font yang lain? bisa manfaatkan dengan search engine --> Keyword Download Fonts

3. Buka file gambar yang ingin kamu jadikan FILL dalam teks
Caranya: File > Open (pilih gambar) > Open Kamu bisa gunakan gambar apapun yang kamu suka.
disini anda bisa Gunakan Gambar ini sebagai latihan

Klik kanan gambar lalu pilih Save image As...
Atau gunakan gambar lain dengan mencari di searh engine... Keyword Wallpapers

4. Masukkan gambar yang sudah kamu pilih ke dalam layar kerja yang kita kerjakan tadi.
Caranya: Gunakan MOVE TOOL  Klik Kanan + Tahan pada gambar > Tarik > Masukan Kedalam Layar kerja yang kita kerjakan. Atur ukuran gambar sehingga sesuai dengan ukuran Teks yang telah kamu buat

Pindahkan Gambar ke Kanvas Tulisan

5. Perhatikan pada WINDOW LAYER 

Pastikan posisi Layer Gambar berada diatas Layer Teks
Tekan dan Tahan tombol ALT kemudian arahkan kursor diperbatasan antara Layer gambar dan Layer Teks (ditandai garis biru pada gambar diatas), jika posisi kursor telah pas otomatis kursor akan berubah (lihat simbol yg lingkari merah pada gambar diatas), kemudian kamu tinggal KLIK. Jika langkah kamu benar maka gambar akan masuk kedalam Teks
Hasilnya:

Terima Kasih

Selamat Mencoba dan Semoga Bermanfaat..

~3D Cracked Text Effect~

Dalam Tutorial kali ini kita akan mencoba membuat text efek 3D dengan tekstur kasar seperti tanah retak, batu, kayu tembok dll. Anda dapat menggunakan images lain sesuai selera. Langsung saja meluncur ke langkah tutorialnya.

Buat dokumen baru dengan ukuran 1024px x 768px, Buka image “cracked wall texture.jpg”. Image dapat di download di sini. Anda bisa bereksperiman dengan image yang lain. Sambil menekan tombol Shift + Alt, drag image ke dokumen. Ini akan membuat image berada tepat di tengah dokumen

Pilih text tool, ketikkan kata yang kita inginkan. Dalam tutorial ini saya menggunakan font Handvetica. Anda dapat mendownloadnya di sini.

Double klick pada layer text ini dan berikan beberapa efek berikut:

Drop Shadow

Inner Shadow

Bevel and Emboss

Gradient Overlay

Untuk sementara kita mendapatkan image seperti berikut.

Belum bosen kan? OK, kita lanjutkan lagi. Buat seleksi di luar area teks. Banyak cara untuk melakukannya. Salah satunya yaitu sambil menahan tombol Ctrl, klik pada layer text di panel Layer. Lalu tekan Ctrl + Shift + I atauSelect -> Inverse untuk membalik seleksi.

Buka image “cracked stone texture.jpg”, anda dapat mendownloadnya si dini. Sambil menahan tombol Shift + Alt, drag image ini ke dokumen. lalu tekan delete. Ubah Blending Modenya menjadi overlay.

Buat Layer baru, tekan CTRL + Shift + I untuk membalik seleksi. Select -> Modify -> Smooth, isikan nilai 10pada isian Sample Radius. Select -> Modify -> Contract, isikan nilai 2 pada isian Contract by. Lalu Edit -> Fill -> Color. Saya menggunakan warna #D88606 untuk colornya. Ubah Blending modenya menjadi Overlay danOpacity 50%.

Copy atau Duplikat Layer 3 lalu ubah Opacitynya menjadi 100%. Pilih Eraser Tool dengan opacity 20% – 40%. Sapukan pada area seleksi bagian atas seperti gambar berikut.

Buang seleksi dengan menekan Ctrl + D atau Select -> Deselect. Buat layer baru di atas Layer 1 (Layer image cracked wall) Ubah Blending modenya menjadi Overlay. Pilih brush Tool dengan warna # D88606 dan Opacity 20%. Sapukan pada area di sekitar teks secara tidak beraturan sampai mendapatkan hasil yang anda inginkan.

Buat layer baru di atas Layer 4 Ubah Blending modenya menjadi Vivid Light. Pilih brush Tool dengan warna # C37A08 dan Opacity 20%. Sapukan pada area di sekitar teks secara tidak beraturan sampai mendapatkan hasil yang anda inginkan.

Selesai sudah tutorialnya. Anda bisa bereksperimen dengan menambahhkan beberapa sapuan brush menggunakan mode Vivid Light atau Overlay. Selamat mencoba

~Membuat effect Ledakan~

Buat Layer dengan Background warna hitam. Gunakan Eliptical Marque Tool untuk membuat lingkaran di tengah area kerja. Tahan tombol Shift untuk membuat lingkaran.Pilih Edit>Stroke, gunakan warna putih dengan ketebalan 20px.

Pilih Filter>Distort>Ocean Ripple atur setingnya sehingga menghasilkan bentuk seperti gambar berikut. Saya menggunakan ukuran Ripple 10 dan Magnitude 14.

Lalu gunakan Filter > Blur > Radial Blur pilih setingan seperti gambar dibawah.

Ulangi langkah ini beberapa kali sampai menghasilkan gambar seperti berikut dengan menekan CTRL+F

Duplikat Layer dan beri Efect>Filter>Ocean Ripple lagi.

Duplikat lagi layer dan beri Efect > Filter > Blur > Radial Blur lagi. Lakukan langkah ini lagi dengan menekanCTRL + F sampai menghasilkan seperti gambar berikut.

Ubah Mode layer ini Menjadi Color Dodge dan Layer di bawahnya ke Mode Lighten

Buat Layer baru, atur foreground color menjadi jingga dan Background color merah.

Buat radial gradient pada layer baru dan ubah Mode layer menjadi Color Burn. Sehingga gambar yang kita hasilkan menjadi seperti berikut.

Hasil akhirnya seperti ini, semoga dapat bermanfaat, amiiiiiin………