Design‎ > ‎

Tiled Wallpaper

posted 18 Nov 2013, 20:31 by Kampau Ocu   [ updated 19 Nov 2013, 01:40 ]
Suatu yang menantang bagi saya untuk membuat sebuah background yang dapat ditile / dimarmerkan ... sehingga walaupun gambarnya kecil, tapi kalau di-tile-kan oleh komputer, misalnya sebagai desktop wallpaper di windows, maka gambar tersebut kadang tidak bagus ... 

Cara Membuat Tiled Wallpaper

Cara yang paling gampang adalah dengan mengikuti pola board TIC-TAC-TOE, yaitu gambar dibuat seperti matrik 3 x 3 dahulu untuk masing-masing komponen, baru nanti digabung ...

Setelah digabung, baru diambil darimana saja pasti akan nyambung saat ditile ...

Ternyata yang lebih susah lagi membuatnya adalah PRESISI pas ditengah-tengah pixel ..
Ini saya rasakan sendiri saat mencoba membuat sebuah wallpaper dengan CorelDraw. 

Hasil 205x205 pixel yang telah tajam dan pas ditengah-tengah


Jika tidak pas ditengah-tengah pixel sebuah vektor kita, maka ketika diraster (digabungkan, diflaten, dirender) akan blur, seperti terlihat digambar berikut
gambar ini kurang tajam, karena vektornya tidak benar-benar pas di tengah-tengah pixel kita


Agar benar-benar bagus, maka vector kita harus berada pas DITENGAH-TENGAH PIXEL ..., seperti dapat dilihat pada gambar berikut:
gambar yang lebih tajam karena pas ditengah-tengah pixel

Agar tajam, tiap-tiap posisi node vektornya harus digeser PAS ditengah-tengah (center) pixel ... dan Anda harus melakukannya untuk SETIAP nodenya
geser setiap node agar pas ditengah-tengah pixel agar gambar tidak blur

Coba perhatikan gambar berikut baik-baik ...

Titik node yang dikiri atas sudah pas ditengah-tengah, seperti juga terlihat pada dua node dikanan.
Lihat node yang lain masih blur ... karena masih belum pas ditengah-tengah (center) pixel. Untuk hasil maksimum tajam, memang harus digeser tiap-tiap node vektornya ke tengah-tengah pixel.


silahkan lihat hasil kerja saya semalaman ... hehehehe ... ngga juga sih ... penghilang ngantuk tadi malam ...

Background HTML

Kalau mau melihat bagaimana hasilnya, silahkan download berkas bismillah.jpg dibawah, lalu kemudian buat sebuah file html yang isinya kira-kira seperti berikut:

 <html>

  <head>

    <style>

body {

  background-image: url('bismillah.jpg');

}

    </style>

    <title></title>

  </head>

  <body></body>

</html>


hasilnya seharusnya seperti skrinsot berikut:
tampilan HTML background


ą
Kampau Ocu,
18 Nov 2013, 20:32
Comments