Photoshop: Membuat Header Sederhana Ramah Search Engine

Header merupakan bagian paling penting pada sebuah website. Pada bagian header ini seolah-olah ditumpahkan semua yang menjadi latar belakang atas dibuatnya website yang bersangkutan. Seluruh kreativitas si pemilik website diperlihatkan di sini. Berbagai upaya dikerahkan untuk menghasilkan desain header yang unik, menarik, dan kalau bisa menimbulkan decak kagum atas pemiliknya. Kalaupun website dibuat dengan menggunakan template, maka sebisa mungkin bagian header harus diganti dengan gambar kreasi sendiri, setidaknya diganti dengan foto milik sendiri. Dengan demikian, maka bagian header ini menjadi pembeda antara satu website dengan website lainnya.

Isu lain yang tak kalah penting adalah materi header yang biasanya hanya berupa gambar, menyebabkan elemen yang seharusnya menjadi titik perhatian utama bagi website agar mudah dikenal oleh Search Engine menjadi terabaikan. Padahal potensi yang demikian besar tersebut dapat dimanfaatkan tidak saja untuk mempercantik halaman, tetapi juga untuk meraih nilai tinggi pada Search Engine. Dengan demikian, kita harus memadukan kedua faktor tersebut ke dalam sebuah desain yang menarik.

Namun, bagaimana jika kemampuan kita sangat terbatas dalam hal desain?

Jangan khawatir, masih banyak jalan menuju Roma. Kita bisa mencoba membuat desain dengan beberapa langkah mudah dan sederhana, tapi hasilnya tidak kalah dengan karya para profesional. Yang penting, siapkan tools yang tepat untuk bisa bekerja dengan nyaman.

Software untuk Web Desain

Mengingat website merupakan perpaduan antara desain dan pemrograman, maka kita memerlukan software yang tepat untuk menangani hal-hal yang berkaitan dengan sisi desain, sama halnya untuk bagian pemrograman pun kita memerlukan software yang tepat pula.

Untuk urusan desain website, software Photoshop buatan Adobe sangatlah mumpuni untuk dijadikan sebagai teman kerja yang dapat diandalkan. Photoshop saat ini seolah-olah telah menjadi standar de facto dalam bidang ini. Kecanggihan dan keluwesannya belum bisa ditandingi oleh software-software lain di kelasnya. Oleh karena itu, melalui tutorial ini kita bisa mencoba belajar membuat header sederhana dan sekaligus belajar mengemudikan Photoshop dengan baik.

Software lain yang dianjurkan untuk dipelajari adalah Gimp. Karena Gimp adalah software open source, tidak memerlukan lisensi sehingga bebas untuk dipergunakan.

Membuat Ukuran yang Tepat

Segera setelah kita mulai menjalankan Photoshop, file baru dapat kita ciptakan dengan beberapa langkah sederhana :

1. Pada bagian menu utama di sebelah atas, klik pada menu File > New.

2. Kotak dialog untuk membuat file baru akan terbuka, mengharuskan kita untuk mengisi informasi yang diminta dengan benar sesuai dengan apa yang kita inginkan. Tuliskan “header1” pada bagian Name. 770 pixels pada bagian Width. 150 pixels pada bagian Height. 72 pixel/inch pada bagian Resolution. RGB Color 8 bit pada bagian Color Mode. White pada bagian Background Contents.

3. Klik tombol OK.

Penjelasannya adalah sebagai berikut :

Hal yang paling utama dalam menampilkan header adalah ukuran yang tepat disesuaikan dengan keadaan resolusi monitor pengguna internet. Banyak VGA card saat ini yang mendukung resolusi sebesar 1280 x 1024 piksel, banyak pula yang menggunakan resolusi 1024 x 768 piksel. Namun, di banyak warnet di tanah air (apalagi di daerah) masih banyak monitor yang ditampilkan dengan resolusi 800 x 600 piksel. Sebaliknya, monitor yang menggunakan resolusi 640 x 480 piksel saat ini sudah dapat diabaikan.

Dengan asumsi tersebut, kita bisa membuat header dengan patokan lebar layar 800 piksel. Mengapa headernya berukuran 770 piksel? Karena pada saat websitenya sudah diisi dengan konten yang cukup banyak, dan tingginya melebihi ukuran resolusi monitor, maka secara otomatis browser akan menampilkan slider untuk scroll up-down di sebelah kanan layar. Nah, slider untuk scroll up-down tersebut akan menyita lebar layar sebesar 20 piksel. Namun, mengingat banyak theme dapat diaplikasikan ke dalam Operating System Windows, maka lebar slider scroll up-down tadi menjadi tidak standar. Oleh karena itu, agar aman kita bisa menyediakan 30 piksel bagi slider untuk scroll up-down. Jadi, lebar website adalah 770 piksel, sedangkan tingginya 150 piksel dengan asumsi, tinggi tersebut cukup proporsional untuk dijadikan sebagai header.

Warna Foreground dan Background

Setelah file baru tercipta, sekarang kita bisa mengubah layar putih ini menjadi sebuah gradasi warna. Untuk itu, kita bisa menentukan dua warna yang akan kita jadikan panduan bagi warna gradasi tersebut :

foreground-background1

4. Klik pada kotak set foreground color pada bagian bawah panel Tools.

foreground-color

5. Kotak dialog Color Picker akan terbuka. Selanjutnya, untuk menentukan warna foreground, kita dapat mengklik pada spektrum warna vertikal di sebelah kanan, kemudian mengklik nuansa warna yang paling cocok sesuai dengan selera. Atau, bisa juga kita membuat percampuran warna Merah – Hijau – Biru dengan memasukkan angka 0 – 255 pada masing-masing kotak di samping tulisan R, G, B (Red, Green, Blue). Contohnya, untuk menghasilkan warna biru laut, masukkan nilai 50 pada R, 100 pada G, dan 150 pada B.

6. Klik OK untuk menerima hasil tersebut.

foreground-background2

7. Untuk menentukan warna background. Klik pada kotak set background color pada bagian bawah panel Tools.

background-color

8. Kotak dialog Color Picker akan terbuka. Contohnya, untuk menghasilkan warna biru muda, masukkan nilai 150 pada R, 200 pada G, dan 250 pada B.

9. Klik OK untuk menerima hasil tersebut. Nah, sekarang kita memiliki dua warna yang masing-masing tersimpan pada kotak foreground dan background color.

Membuat Warna Gradasi

Untuk membuat warna gradasi dari foreground color ke background color :

gradient-tool

10. Aktifkan Gradient Tool yang ada di bagian tengah Tool Box.

linear-gradient

11. Pada bagian Contextual Toolbar (di bagian bawah menu bar), terdapat beberapa pilihan bentuk gradasi, yakni: Linear, Radial, Angle, Reflected, dan Diamond. Klik pada ikon Linear Gradient.

gradient-picker

12. Jika warna gradasi pada kotak berwarna di bagian Contextual Toolbar belum menampilkan warna gradasi dari biru ke biru muda. Klik pada tombol segitiga kecil untuk membuka Gradient picker.

foreground-to-background

13. Klik pada Foreground to Background. Segera kotak berwarna akan menampilkan warna gradasi dari biru ke biru muda.

14. Tekan Enter untuk menutup kotak Dialog Gradient picker ini.

screenshot1

15. Selanjutnya, pada area kerja, Klik dan Drag dari atas ke bawah sambil menekan tombol Shift, untuk menghasilkan warna gradasi Biru ke Biru muda, lurus dari atas ke bawah.

Menyimpan Gambar untuk Web

save-for-web

16. Untuk menyimpan gambar ke dalam format yang dikenal oleh brower, Klik pada menu File > Save for Web.

17. Kotak Dialog Save for Web akan terbuka. Pada kotak pilihan Preset pilihlah JPEG High untuk menghasilkan warna gradasi yang sangat halus, namun ukuran file tidak terlalu besar (2.645Kb).

18. Klik pada tombol Save. Kotak Dialog Save Opimized As akan terbuka, selanjutnya ketikkan nama file: header1.jpg dan tekan tombol Save.

Untuk menghasilkan gambar dalam format yang dikenal oleh browser, kita perlu mengetahui beberapa hal penting berhubungan dengan gambar yang kita buat dan format gambar yang sesuai untuk gambar tersebut. Gambar gradasi seperti pada contoh di atas mengandung jumlah warna yang sangat banyak, bisa terdiri dari ratusan bahkan ribuan warna. Informasi warna sebanyak ini sebanding dengan foto yang biasa dihasilkan oleh Digital Camera. Untuk itu, maka format file yang paling cocok adalah JPEG karena JPEG akan melakukan kompresi terhadap blok-blok gambar, sehingga ukuran file akan berkurang secara drastis, namun kualitas gambar masih dapat dipertahankan. Format gambar lain untuk kebutuhan Web adalah GIF. Format GIF melakukan kompresi dengan cara mengurangi jumlah warna yang terkandung dalam sebuah gambar menjadi 128 warna, 64 warna, atau bahkan hanya 32 warna saja. Dengan demikian, format GIF tidak cocok diterapkan pada gambar gradasi karena akan menurunkan kualitas gambar secara signifikan.

Membuat Halaman HTML

19. Untuk membuat struktur website yang baik, buatlah folder baru yang akan digunakan untuk menampung semua file aktif pada halaman-halaman web.

20. Pada folder yang baru dibuat tersebut, buatlah sub folder dengan nama “images” yang akan dipergunakan untuk menampung semua gambar yang berhubungan dengan halaman-halaman web yang sedang kita buat.

21. Letakkan atau salin file “header1.jpg” ke dalam folder “images” tersebut.

22. Langkah selanjutnya adalah mengaplikasikan gambar header1.jpg tersebut ke dalam HTML. Untuk itu, kita bisa mengetikkan baris-baris perintah berikut ini di dalam aplikasi Notepad (atau HTML editor lainnya) :

<html>
 <head>
  <title>Membuat Header Ramah Search Engine</title>
 </head>

 <body>
  <div align="center">
   <table border="2" cellpadding="0" cellspacing="0" width="770" height="150" bordercolor="silver">
    <tr>
     <td background="images/gradient.jpg" align="center" style="font-family:Arial; color:white">
      <h1>KURSUSPRIVAT.COM</h1>
      <h3>just another website from webdesainer.wordpress.com</h3>
     </td>
    </tr>
   </table>
   <table border="0" cellpadding="0" cellspacing="0" width="770">
    <tr>
     <td align="center">Selamat Datang di Website Kami</td>
    </tr>
   </table>
  </div>
 </body>
</html>

23. Simpan file tersebut ke dalam format .html, apabila tulisan di atas diketikkan dalam aplikasi Notepad, Save As sebagai : index.html dengan Save as type : All files. Simpan pada folder yang telah kita buat tadi.

web-screenshot

24. Jika file index.html tersebut dibuka dengan internet browser, maka header website merupakan gambar gradasi dari warna biru ke biru muda. Di sekeliling gambar tampak diberi border sebesar 2 piksel berwarna silver. Di depan latar belakang tersebut terdapat tulisan berwarna putih untuk judul website dan tagline-nya.

Penutup

Nah, selesai sudah tutorial untuk membuat header sederhana ini. Untuk melihat hasil akhirnya, Anda dapat berkunjung ke alamat berikut ini :

http://www.kursusprivat.com/tutorial/header1.html

Semoga bermanfaat.

Advertisements

8 Responses

  1. Asyik juga tip-tipnya. Tapi saya masih bingung kadang mencari kode2 yang harus diganti. Tapi akan saya coba terus sampai dapet deh. Oh ya, kunjungi donk Blog saya untuk koreksi dan evaluasi agar bisa menjadi lebih baik. Terimakasih Bung !

  2. tips yang bagus. thanks

  3. top …
    bagus juga . . .

  4. Thanks artikelnya

  5. aku lagi nyari cara membuat gradasi warna untuk poster tentang wayang

  6. top banget artikelnye untuk w yg msh newbie. w mang gi belajar bikin web dezgn.smoga ilmunye makin nambah terus…

  7. mantep sob keren asli :mrgreen: bagus bwt ane yg amatir

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: