Create Repeated Pattern Image to Make an Application Background

  • Posted on: 1 May 2013
  • By: oon
Hexagonal Pattern Image

Ada kalanya kita ingin membuat aplikasi dengan background yang bagus, tapi sedang tidak punya ide gambar menarik apa yang bisa kita pasang sebagai backgroud dalam aplikasi kita.

Salah satu cara singkat untuk menanggulangi problem tersebut adalah menggunakan pattern image sebagai background.

Ada banyak sekali situs di Internet yang menyediakan pattern image secara free, silahkan mengacu ke situs [1] untuk mendapatkan daftar contoh situs-situsnya.

Salah satu contoh yang penulis dapatkan adalah pattern seperti pada gambar di artikel ini, sebuah pattern berbentuk hexagonal, didapatkan dari situs [2].

Nah kemudian bagaimana cara membuat satu bidang berukuran sesuai keinginan semuanya rata oleh pattern tersebut? Salah satu yang penulis temukan adalah menggunakan software image editor [3][4].

Kurang lebih gambarannya sebagai berikut jika Anda menggunakan photoshop:

  1. Buat gambar dengan ukuran canvas sesuai kebutuhan
  2. Pasang (buka) gambar pattern di canvas tersebut, kemudian pilih area yang ingin diulang menggunakan rectangular Marquee tool
  3. Di menu edit, pilih "define pattern", kemudian berikan sebuah nama pattern tertentu
  4. Cabut pilihan pada area (deselect)
  5. Pada menu edit, pilih Fill. Kemudian pada dialog Fill, pilih gunakan pattern (Use), kemudian pilih pattern yang tadi sudah diberi nama tertentu, dan akhiri dengan klik OK.
  6. Sekarang seluruh area canvas sudah tertutupi dengan pattern tersebut

Sekarang coba sendiri memilih pattern dan menggunakannya untuk aplikasi anda sendiri.

[1]http://www.awwwards.com/background-patterns-designs-and-resources-for-we...
[2]http://subtlepatterns.com
[3]http://blog.spoonflower.com/2008/03/how-do-i-repeat.html
[4]http://tech.pro/tutorial/621/photoshop-tutorial-create-a-seamless-textur...

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.