12 Jun 08

Apa itu HTML ?

HTML merupakan singkatan dari HyperText Markup Language. Merupakan bahasa pemrograman yang digunakan untuk membuat halaman web. Bahasa HTML terdiri dari tag-tag. Tag diawali dengan tanda ” < ” dan ditutup dengan ” > ”.

Contoh :

<table> ini merupakan contoh dari tag table.

Struktur dasar dari html

<html>

<head>

<title>

</title>

</head>

<body>

</body>

</html>

Contoh penggunaan :

<html>

<head>

<title>Halo

</title>

</head>

<body>

Halo dunia…

</body>

</html>

Code berikut bisa diketik di notepad, wordpad, ms word, open office writer, dan editor text lainya. Jangan lupa untuk menyimpan file tersebut dengan extensi .html

Posted in html, tutorial | 3 Comments »
6 Jun 08

Do you want to show your yahoo messenger status on your web / blog ? Do you want to show your contact on yahoo messenger, so that visitor who have visited your web /blog can contatc you by yahoo messenger

here, html code that must you add to your web /blog :

<a href=”ymsgr:sendIM?yahoo_id“> <img src=”http://opi.yahoo.com/online?u=yahoo_id&m=g&t=0&l=us”/>
</a>

copy the code dan paste in to your web /web. change yahoo_id to your account on yahoo. for the apperance, change the code 0 to number that have range 1 - 9.

example :

<a href=”ymsgr:sendIM?dewa_yudhi“> <img src=”http://opi.yahoo.com/online?u=dewa_yudhi&m=g&t=2&l=us”/>
</a>

that must be show like this:

Good luck…

bluefever studio

Posted in tutorial | No Comments »
5 Jun 08

Anda ingin menampilkan status yahoo mesengger di web / blog anda ? Anda ingin menampilakan contact anda di yahoo messenger sehingga pengunjung yang berkunjung ke web / blog anda dapat chat dengan anda melalui yahoo messenger ?

berikut code html yang harus anda sisipkan ke web /blog anda.

<a href=”ymsgr:sendIM?nama_id_anda“> <img src=”http://opi.yahoo.com/online?u=nama_id_anda&amp;m=g&amp;t=0&amp;l=us”/>
</a>

copy kode diatas dan paste ke web / blog anda. ganti nama_id_anda dengan nama account anda di yahoo. untuk bentuk tampilannya, ganti kode 0 dengan angka yang mempunyari range 1 - 9.

contoh :

<a href=”ymsgr:sendIM?dewa_yudhi“> <img src=”http://opi.yahoo.com/online?u=dewa_yudhi&amp;m=g&amp;t=2&amp;l=us”/>
</a>

Maka tampilannya akan menjadi seperti ini :

Selamat Mencoba…

bluefever studio

Posted in tutorial | No Comments »
16 May 08

Hmmm… Klo tadi kita kerja di Photoshop, sekarang kita kerja ke Illustrator. Yuk, kita mulai ja langsung..

  1. Buat bentuk tombol. Gw pake Rounded Rectangle 10 px.

  2. Isiin gradasi dengan tone atasnya lebih tua dari tone bawahnya. Jangan pake stroke, trus dikunci. Ini punya gw.

    Hasilnya:

  3. Pilih menu Object » Path » Offset Path.

    Pake -2px (kamu bisa modif lagi).

    Inget pake tanda minus, biar nanti hasil offset-nya lebih kecil dari bentuk semula (kaya perintah select»modify»contract di Photoshop). Isiin warna putih tanpa stroke. Jadi kaya gini :

  4. Pilih Direct Selection Tool (A) , trus teken tanda minus di keyboard ‘-‘. Hapus 2 titik ini (yang gw kasi tanda merah).

  5. Trus pake Convert Anchor Point Tool (Shift+C) . Kamu klik aja titik yang gw kasi tanda ungu. Fungsinya untuk ngelurusin sisi. Jadinya kaya gini.

  6. Pake Direct Selection Tool (A) , kamu seleksi dua titik bawah (Tips: pertama seleksi satu titik, trus teken Shift sambil klik titik yang satunya lagi). Bawa ke atas, kamu teken aja tanda up di keyboard kamu berkali-kali sampe sisa kira-kira setengahnya. Like this..

  7. Kali ini kita buat kotak kira-kira sebesar bagian putih tadi. Lebih besaran dikitlah. Kasi gradasi default (Black and White, angle -90).

    Taruh menutupi bagian putih tadi.

  8. Ctrl+A. Kamu bakal menseleksi bagian putihnya juga. Trus, buka palet Transparency, klik panah yang kesamping tu, pilih Make Opacity Mask.

    Semakin putih gradasinya, semakin kelihatan bagian putihnya. Semakin hitam gradasinya, semakin ga kelihatan objeknya.

  9. Jadi deh… Udah mirip sama yang dibuat di Photoshop kan? Klo diliat-liat lagi, caranya sama kq. Cuma perintahnya aja yang beda ;)
  10. Bisa kamu tambahin drop shadow pada bentuk dasar tombol. Gw pake pengaturan ini.

    Hasilnya:

Kamu juga bisa mengaplikasikan tutorial ini ke bentuk teks. Tapi sebelummya, kamu create outline dulu.. Baru deh kamu jalanin tutorialnya…

Good luck, selamat mencoba, dan terus berkreasi..

Silahkan download di sini (format: .ai, size: 1,1MB)

Posted in illustrator, tutorial | 2 Comments »
16 May 08
Seperti janji aku di postingan sebelumnya, aku udah nyiapin beberapa tutorial yang biasa aku pake pas ngedesain web. Aku pake dua software, Adobe Photoshop CS (yup, katro emang. Tapi ntar lagi gw ganti kq. Jadi yang pake versi yang baru, silahkan cari alternatif lain deh) ama Adobe Illustrator CS2 (ntar juga mo diganti pake CS3).
Yup, ini dia tutorialnya. Silahkan menikmati. Resep untuk 6 porsi, minyak goreng dapat diganti dengan mentega *loh.. salah =p*.

  1. Buat bentuk tombol yang kamu inginkan. Aku sih pake bentuk rounded rectangle . Ukuran dan warna terserah kamu. Disini aku pake warna #92CDFF.

  2. Trus kamu seleksi bentuk tombol dengan cara Select » Load Selection ato kamu Ctrl+klik thumbnail di palet layer.

  3. Ubah foreground ke tone yang lebih tua. Punyaku pake #094373. Trus, kasi gradasi linear, Foreground to Transparent . Buat gradasi dari atas ke bawah. Jangan lupa tekan Shift pas buat gradasi. Fungsinya untuk menjaga gradasi kamu agar tetap lurus.

  4. Bentuk tombol masih diseleksi, pilih menu Select » Modify » Contract.

    Pake 3 pixels aja.

    Ini akan membuat seleksi sebesar 3 pixels lebih kecil dari seleksi awal.

  5. Jangan di-deselect dulu… Pake tool Rectange Marquee Selection (M) , pilih Subtract from Selection, feathernya 0 . Buat seleksi untuk ngilangin bagian bawah kira-kira setengahnya.

    Trus nanti jadi kaya gini:

  6. Buat layer baru dengan cara klik aja icon Create a New Layer ato (Ctrl+Shift+N). Kali ini kita bakal buat efek glass-nya.

  7. Masih belum di-deselect. Ubah foregroundnya jadi warna putih (#FFFFFF) *MESTI WARNA PUTIH! Soalnya sekarang mau buat efek glass-nya. Putih adalah warna yang umum untuk buat efek glass*. Kasi gradasi linear, Foreground to Transparent , dari dari atas ke bawah (kaya sebelumnya). Baru di-deselect (Ctrl+D). Punyaku jadi seperti ini:

  8. Yaaapppzz.. Udah jadi deh.. Sekarang kamu bisa nambahin blending option seperti inner glow, drop shadow, ato stroke (di tutorial” yang aku temuin biasanya pake tiga itu ja). Klo mau ngisiin, jangan terlalu gede size-nya. Web 2.0 perlu warna yang tegas n kuat.

  9. Gw ngisiin inner glow…

    Drop shadow…

    dan stroke…

    Blanding tadi diaplikasikan pada layer 1. Hasilnya seperti ini.
    Tapi gw tetep milih tanpa blending option apapun.

So, gimana punyamu? Klo ga sreg silahkan kamu otak-atik lagi, trus kasi tahu aku (tempe juga boleh, tapi karena kedele mahal, ayam aja deh sekalian). Bagi" ilmu gitu deh..
Good luck, dan selamat berkreasi…

Silahkan download di sini (format: .psd, size: 31KB)

Posted in photoshop, tutorial | 2 Comments »