Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Kids

Desain Web Untuk Anak-Anak: Gambar

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Web Design for Kids.
Web Design for Kids: CSS Layout
Web Design for Kids: Design Basics

Indonesian (Bahasa Indonesia) translation by Yosef Andreas (you can also view the original English article)

Selamat datang di pelajaran ketujuh seri Desain Web Untuk Anak-Anak, semuanya tentang gambar!

Kita telah menambahkan beberapa gambar ke website Kota Tuts+ kita, namun kita belum pernah berbicara detail tentang gambar. Dalam pelajaran ini kita akan menyentuh jenis gambar yang paling umum digunakan pada web dan beberapa teknik mengedit gambar.

Jangan lupa untuk mengajukan pertanyaan dalam bagian komentar di bawah halaman ini!

Gambar-Gambar Dalam Web

Kita tidak asing dalam menggunakan gambar pada web. Website Kota Tuts+ kita menggunakan empat gambar. Kita dapat menambahkan gambar-gambar ini dalam HTML lalu mengubah ukuran dan posisinya dengan CSS.

Ada banyak hal untuk dipikirkan ketika menggunakan gambar pada web, seperti format mana yang terbaik, dimana mendapatkan gambar yang benar, dan bagaimana menggunakannya.

Sepanjang pelajaran ini kita akan menerapkan efek-efek ke gambar berikut, sebuah peta Kota Tuts+:

Peta Kota Tuts+

Jenis-Jenis Gambar

Gambar yang paling umum digunakan pada web adalah JPEG, PNG, dan SVG. Mari kita bicara apa tepatnya mereka itu.

JPEG

JPEG adalah sebuah gambar dengan ekstensi file sebagai berikut: ".jpeg" atau ".jpg" Gambar-gambar ini tampaknya akan menjadi yang paling sering kamu temui dan gunakan pada web.

Mereka fantastis untuk membuat ukuran file foto yang lebih kecil hingga dapat mudah digunakan pada web atau dikirim vial email, misalnya. Semakin kecil ukuran file, bagaimana pun juga, berarti kamu akan mendapatkan kualitas gambar yang semakin rendah.

PNG

PNG adalah sebuah gambar dengan ekstensi file ".png". Sementara JPEG akan membuatmu sedikit kehilangan kualitas gambar, PNG tidak akan. File-file ini akan tampak tajam dan jelas seperti aslinya, namun dalam menjaga kualitas ukuran file ini dapat lebih besar daripada .jpeg.

PNG merupakan pilihan yang bagus untuk gambar garis, teks, dan grafis icon yang telah memiliki ukuran file yang lebih kecil. Itu juga mungkin untuk memiliki background yang transparan dengan sebuah PNG, tidak seperti sebuah JPEG.

SVG

Scalable Vector Graphics, SVG, adalah gambar-gambar yang dapat diubah ukurannya baik menjadi besar atau kecil tanpa mendapatkan tampilan pixelated dan blur, seperti yang akan terjadi pada JPEG atau PNG. Gambar-gambar ini disimapn dengan sebuah ekstensi file ".svg" dan sempurna untuk ilustrasi dan logo perusahaan.

Semua gambar yang digunakan sepanjang Kota Tuts+ adalah SVG! Jika kita kembali ke CSS untuk situs kita dan mengganti width gambar apapun ke 1000px itu akan membuatnya besar dan tampak jelas.

SVG di sebelah kanan – jauh lebih jelas!

Dimana Mendapatkan Gambar

Ada banyak tempat berguna untuk mendapatkan foto yang gratis dan bebas digunakan pada web.

Sementara beberapa gambar mungkin tidak dipatok harga, mereka dapat mensyaratkan kita untuk mengikuti aturan tertentu, seperti menyebutkan nama fotografer dimanapun kita menggunakannya. Gambar lainnya dapat digunakan secara bebas hanya untuk project pribadi dan tidak digunakan untuk kepentingan bisnis.

Selalu pastikan untuk memeriksa lisensi (atau ijin) ketika kamu tidak yakin, tapi untuk sekarang mari bicara tentang beberapa pilihan yang gratis dan bebas untuk digunakan.

  • Cupcake menawarkan bermacam foto yang bagus. Ketika kamu menemukan satu yang membuatmu senang kamu cukup dapat mengklik tautan Download High Res, berikan nama dan menyimpannya ke dalam komputermu.
  • FancyCrave adalah website lainnya untuk foto yang bebas digunakan dan itu memiliki kumpulan yang bagus untuk dipilih. Kita dapat mengambil ini dengan mengklik tautan Download dan menyimpannya ke folder project kita.
  • Untuk icon SVG IcoMoon memiliki banyak grafis gratis untuk dipilih. Setelah kita menyoroti icon yang kita inginkan dengan mengkliknya, kita dapat memilih Generate SVG... pada kiri bawah dan kemudian memilih Download.

Mengedit Gambar

Banyak desain web menggunakan peralatan editing gambar, seperti Photoshop, untuk membuat perubahan pada foto mereka sebelum digunakan pada website. Perubahan ini dapat berapa apa saja dari mengganti warna, menghilangkan bayangan, hingga cropping.

Kebanyakan sistem operasi komputer akan memiliki sebuah program yang dapat mengelola beberapa edit yang sangat dasar. "Preview" adalah pilihan yang bagus jika kamu memiliki sebuah komputer Mac, yang akan membolehkanmu untuk mengubah ukuran, crop, dan menyimpan gambar dalam format lainnya. Untuk mengakses Preview kita dapat menjalankan pencarian dalam komputer (kaca pembesar pada sudut kanan atas layarmu!) atau membuka sebuah gambar dengan dobel klik, karena itu tampaknya merupakan program default display gambar.

Pada komputer Windows "Windows Photo Viewer" atau "Paint" akan menjadi program gambar default yang dapat kita gunakan, lagi, memperbolehkan beberapa perubahan dasar.

Cropping

Ketika kita berbicara tentang cropping berarti kita menghilangkan bagian luar gambar.

Cropping dapat sangat berguna ketika hanya ada sebuah bagian gambar besar yang ingin kita gunakan; itu bahkan mungkin untuk melakukan cropping dalam bentuk lain, seperti lingkaran!

Mengedit Dengan CSS

Seperti halnya mengubah ukuran rbh gambar dengan CSS ada sejumlah efek filter yang tersedia, seperti membuat gambar hitam putih, transparan, atau menyesuaikan level kecerahan.

Grayscale

Kita dapat mengubah gambar menjadi hitam putih dalam CSS menggunakan properti filter.

Dalam properti itu kita mencantumkan grayscale dan kemudian sebuah nilai persentase dalam kurung (brackets).

Berikut tampilan singkat beberapa CSS yang akan menghasilkan sebuah gambar yang benar-benar hitam putih:

Opacity

Opacity mengacu pada membuat sesuatu yang transparan, atau tembus pandang. Properti opacity mengambil nilai dari .0 ke 1, dengan .0 berarti benar-benar tembus pandang (tidak kelihatan) dan 1 tidak tembus pandang sama sekali. Semua nilai di antaranya memberikan kesan transparan yang berbeda-beda.

Sebagai contoh, jika kita mengatur opacity: .5; pada seri lingkaran dalam dokumen CSS, hasilnya akan tampak seperti ini:

Jenis efek ini pada sebuah gambar dapat tampak hebat jika kita mencari untuk membuat sebuah gambar tidak terlalu diperhatikan dalam sebuah halaman, sehingga teks di atasnya lebih menonjol.

Blur

Kita dapat juga membuat sebuah gambar lebih blur menggunakan filter CSS. Dalam properti filter kita perlu menggunakan blur diikuti dengan sebuah nilai berbasis pixel dalam tanda kurung.

Semakin tinggi nilai pixel, semakin blur sebuah gambar.

Catatan: Untuk daftar lengkap filter CSS kamu dapat memeriksa sumber ini. Cukup klik pada tab CSS pada tiap demo untuk melihat bagaimana itu dilakukan.

Kesimpulan

Dalam pelajaran ini kita menjelajahi beberapa format gambar yang umum digunakan pada web, juga beberapa efek yang dapat diterapkan pada gambar-gambar ini. Menyiapkan gambar kita untuk sebuah situs dapat menjadi tugas yang bervariasi dari super tepat sasaran dengan minimal peralatan, hingga edit yang cukup kompleks dan membutuhkan alat yang ampuh.

Berikutnya kita akan mendiskusikan dasar-dasar desain, dimana kita berbicara tentang bagaimana menggunakan apa yang kita susun pada halaman web.

Sampai jumpa di sekitar kota!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.