Tuesday, January 19, 2010

Aneka Tool Praktis untuk Mempercantik Desain dan Layout Website atau Blog

Anda sudah punya website atau blog sendiri ? Sekarang, tinggal kreativitas Anda untuk
mendesain, menata layout, dan mempercantik tampilan website atau blog Anda agar bisa
memberikan daya tarik bagi pengunjung. Berikut beberapa tool praktis yang akan
mempermudah tugas penataan layout dan pendesainan gambar untuk website atau blog Anda.
Tool-tool ini pun bisa Anda manfaatkan untuk keperluan lain.
Pada dasarnya, untuk menetapkan komposisi warna, Anda
bisa mengedit file HTML atau CSS di kode HTML halaman web
Anda. Kode HTML sebuah warna didefinisikan sebagai kode #
disertai 6 karakter, yang merupakan kombinasi huruf dan
angka. Misalnya #000000 adalah hitam, #ffffff adalah putih,
dan sebagainya).
Melalui Pixie, secara cepat Anda akan mendapatkan kode
HTML warna yang ingin Anda tangkap.
1. Instal lalu jalankan Start > All Programs > Nattyware >
Pixie > Run Pixie. Jendela mungil tool Pixie akan tampil
di layar komputer.
2. Arahkan pointer ke sumber warna yang ingin Anda salin,
misalnya pada contoh di atas di area warna merah.
Tekan Ctrl+Alt+C untuk menangkap kode warna sumber.
3. Kini Anda tinggal menyisipkan kode warna ke lokasi
tujuan dengan menekan Ctrl+V (paste).
Sebagai gambaran, berikut beberapa cara
penyisipan kode warna hasil tangkapan Anda:
• Untuk menggenerate kode iklan di
AdSense, maka Anda tinggal mengklik di
salah satu kotak pengisian warna, lalu
tekan Ctrl+V.
• Untuk menyisipkan kode warna di HTML
atau CSS, seleksi kode warna yang ingin
Anda ganti, lalu tekan Ctrl+V.
• Untuk menyisipkan kode warna di
program lain, misalnya di kotak pilihan
warna Photoshop, klik kotak Color
Picker, lalu tekan Ctrl+V di kotak
pengisian kode warna # paling bawah.
Kini warna yang Anda inginkan telah Anda
peroleh. Praktis bukan ?

Mengubah Ukuran Gambar secara Massal
dengan VSO Image Resizer
Anda sering memajang aneka gambar/foto di
website atau blog ? Jika ingin agar ukuran
gambar sumber Anda seragam, maka sebelum
mengupload ubahlah ukuran gambar Anda
menggunakan tool VSO Image Resizer:
http://www.vso-software.fr/download.php.
Melalui tool ini, Anda bisa menghemat waktu
dan tenaga. Anda tidak perlu mengedit
ukuran gambar satu persatu melalui software
grafis (misalnya via Photoshop). Cukup sekali
klik, Anda bisa menyulap ukuran satu atau
seluruh gambar di folder tertentu.
1. Instal lalu jalankan Start > All Programs
> VSO > VSO Image Resizer > Image
Resizer.
2. Mengingat software ini hanya gratis bagi
kebutuhan personal, muncul jendela popup
berisi tawaran untuk membelinya.
Abaikan saja, klik tombol Continue.
3. Jendela Open akan muncul. Pilih sumber
gambar yang akan Anda ubah ukurannya
di folder tertentu. Jika ingin mengubah
beberapa file sekaligus, tekan tombol
Ctrl pada keyboard sambil melakukan
klik pada beberapa file gambar yang
akan Anda proses. Jika ingin memproses
seluruh file di folder yang Anda buka,
maka tekan tombol Ctrl+A.
4. Klik Open. Jendela tool VSO Image
Resizer akan tampil di layar komputer.

5. Sebelum memproses, ada beberapa opsi
pengaturan ukuran gambar, di antaranya:
• Profile: untuk memilih ukuran
gambar yang dihasilkan, antara lain
dalam ukuran standar layar PC dan
perangkat digital. Jika pilihan yang
tersedia tidak memenuhi kebutuhan
Anda, ciptakan profil sendiri. Klik
ikon New Profile, beri nama profile,
lalu tentukan ukurannya (dalam
piksel atau prosentase).
• General: untuk menetapkan mode
pengubahan ukuran, kualitas, dan
format file outputnya. Tersedia juga
tab tambahan untuk memberi efek
dan mengatur output lebih lanjut.
• Action: untuk menetapkan apakah
proses dilakukan langsung pada file
sumber atau membuat salinannya.
• Destination: untuk menentukan
letak penyimpanan file yang dihasilkan
nantinya.
6. Klik OK, maka file gambar Anda akan
diproses. Dalam waktu singkat, Anda
akan memperoleh gambar dengan ukuran
yang Anda inginkan.
Gambar yang dihasilkan kini siap untuk Anda
upload ke website atau blog. Konsistensi
ukuran seluruh gambar di tayangan halaman
web pun menjadi terjaga keseragamannya.
Tip: Anda dapat menggunakan tool ini untuk
menyulap koleksi gambar dan foto favorit
Anda menjadi sebuah wallpaper.
Membuat Gambar Ikon dengan Imagicon
Anda tentu sering menemukan aneka gambar
ikon di tampilan halaman web. Gambar
mungil ini lazim dipakai sebagai gambar logo
(file favicon.ico) yang selalu muncul di sudut
Address Bar, seperti berikut:
Ikon juga lazim dipakai sebagai tombol link
menuju situs tertentu (misalnya ikon sharing
ke layanan social bookmark).

Sayang sekali, software olah gambar standar
(misalnya Photoshop) tidak menyediakan fitur
penyimpanan output gambar dengan ekstensi
.ico (format file standar untuk gambar ikon).
Lantas, bagaimana cara membuatnya? Mudah
saja, gunakan Imagicon:
http://www.deviouscodeworks.co.uk/imagicon.
html.
Melalui tool ini, secara cepat Anda dapat
menyulap sebuah gambar menjadi file ikon
dengan ukuran tertentu. Format file sumber
yang didukung adalah BMP. JPG, atau PNG.
Tool ini juga mampu mempertahankan warna
transparan yang ada di gambar.
1. Instal lalu jalankan Start > All Programs
> Imagicon >Imagicon. Jendela mungil
tool Imagicon tampil di layar komputer.
2. Atur setting output file ikon Anda. Klik
Options > Icon Settings. Tentukan
ukuran file output (standar untuk web
biasanya 16x16 piksel). Anda juga dapat
menentukan apakah ingin mempertahankan
warna transparan atau tidak (sebaiknya
aktifkan). Klik Ok.

3. Pengaturan di atas sudah mencukupi, namun Anda
dapat mengatur lebih lanjut melalui submenu-submenu
lain di menu Options.
4. Jalankan proses pembuatan ikon. Caranya sangat mudah
dan cepat, Anda tinggal mengambil file sumber dan
abrakadabra...! file ikon akan tercipta di folder file
sumber (atau folder lain yang Anda tentukan di
Options). Ada dua cara untuk mengambil gambar
sumber Anda:
• Pertama, dengan membuka file sumber dari menu
File > Open > lalu pilih file gambar dan jangan lupa
tentukan format file sumbernya (BMP. JPG, atau
PNG).
• Kedua, cukup drag file gambar di jendela Windows
Explorer Anda.
5. Kini ikon dapat Anda ubah namanya dan siap Anda
gunakan.
Tip: Anda bisa menggunakan tool ini untuk menciptakan
ikon-ikon baru untuk sistem komputer Anda.

Membuat dan Mengedit CSS dengan TopStyle Lite
Salah satu teknik cepat dan tepat untuk menata layout dan
mempercantik tampilan halaman web adalah dengan
menggunakan Cascading Style Sheet (CSS).
Untuk mempermudah pembuatan dan pengeditan file CSS,
Anda dapat menggunakan tool gratis TopStyle Lite:
http://topstyle.en.softonic.com/download.
1. Instal dan jalankan TopStyle Lite.
2. Buka file CSS yang ingin Anda edit, misalnya file CSS
pada folder templates atau themes pada website atau
blog Anda.
3. Edit nilai-nilai penyusun
ukuran, warna, dan tata
letak komponenkomponen
tampilan
halaman web Anda melalui
jendela TopStyle Lite.
Penjelasan lengkap mengenai
apa dan bagaimana CSS, serta
bagaimana cara menggunakan
tool TopStyle Lite telah
penulis bahas dan dapat Anda
ikuti di buletin komputer
Buletindo.com edisi 017.

Selamat berkreasi !

0 comments:

Post a Comment

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Best WordPress Themes