Pernah melihat gambar dengan efek noise! Arti dari kata noise itu sendiri adalah bising/gaduh/ribut/kacau... Cerita sebelumnya yaitu Snippets Code To Make Better Code dan sekarang kita persempit fokus kepada trik membuat background dengan teknik memakai gambar bertemakan noise! Sekilas mungkin trick berikut tampak seperti postingan dulu tentang Making Effect Television For Image!
Jika waktu itu memakai gambar ekstension GIF, sekarang kita pakai ekstensi PNG. Pemakaian gambar PNG di sini tidak perlu dengan resolusi yang besar, cukup dgn resolusi sedang² saja bahkan dgn ukuran kecil pun bisa! Intinya sekarang Koben mau berbagi trick menghias latar belakang (background) dengan menambahkan pemakaian gambar bertekstur noise terhadap sebuah konten. Sobat mungkin sudah melihat bagaimana tampilan background browse mozilla jika sedang membuka sebuah gambar?
With Color
Terlihat ada efek/tekstur noise pada demo tersebut! Pasti sudah mulai mengerti apa itu teknik noise texture :)
Jika waktu itu memakai gambar ekstension GIF, sekarang kita pakai ekstensi PNG. Pemakaian gambar PNG di sini tidak perlu dengan resolusi yang besar, cukup dgn resolusi sedang² saja bahkan dgn ukuran kecil pun bisa! Intinya sekarang Koben mau berbagi trick menghias latar belakang (background) dengan menambahkan pemakaian gambar bertekstur noise terhadap sebuah konten. Sobat mungkin sudah melihat bagaimana tampilan background browse mozilla jika sedang membuka sebuah gambar?
Background Noise Mozilla Browser
Masih kurang ngeuh mungkin jika melihat demo di atas karena penggunaan noise dengan efek yg sangat lembut sekali ;)) Check this one...With Color
Smooth Colour
Used ImageImage
Terlihat ada efek/tekstur noise pada demo tersebut! Pasti sudah mulai mengerti apa itu teknik noise texture :)
Karena membuat gambar tekstur noise lumayan gampang² susah, oleh karena itu cara terpintar yaitu memakai tools generator :D Berikut contoh tingkat ahli patterns, textures, dan noise dalam design web 30+ Examples of Patterns, Textures and Noise Effects in Web Design
Tools noise generator:
Jangan lupa juga baca trik trick css3 make multiple background image.
Happy noise \m/
Tools noise generator:
http://noisepng.com
http://bgpatterns.com
http://bg.siteorigin.com
http://www.patternify.com
http://rappdaniel.com/noisy
http://www.stripegenerator.com
http://www.pixelknete.de/dotte
http://www.noisetexturegenerator.com
http://bgpatterns.com
http://bg.siteorigin.com
http://www.patternify.com
http://rappdaniel.com/noisy
http://www.stripegenerator.com
http://www.pixelknete.de/dotte
http://www.noisetexturegenerator.com
Jangan lupa juga baca trik trick css3 make multiple background image.
Happy noise \m/
Loading... |
3 comments
DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...