Cara Membuat Header Website atau Header Blog tidak sulit, sederhana sekali tanpa photosop dan corel. Semua dikejakan online oleh pixler.
Seorang web developer tentu sering bermain dengan skrip, namun kadang kurang menguasai desain. Kalau anda sudah mempunyai desainer sendiri tentu lebih murah, tinggal suruh saja buat header. Totorial kali ini saya sajikan dengan mudah dan bahkan tanpa perlu menginstall program photoshop pada komputer Anda.
Kita akan menggunakan semacam photoshop online, syaratnya anda harus online internet. Bila Anda sudah punya mempunyai photoshop di komputer anda maka akan lebih mudah lagi, tidak perlu online.
Kita akan menggabungkan beberapa gambar menjadi satu kesatuan agar berkesan sambung dan gambarnya tidak pisah pisah, kemudian setelah itu kita kasih background yang mendekati warna gambar kita dan terakhir kita buat tulisan diatas gambar tersebut. Caranya sebagai berikut (mohon maaf tidak menyertakan gambar) :
Silakan anda tentukan dulu ukuran header sesuai kebutuhan pada website Anda. Kali ini kita akan membuat header website dengan ukuran 1000 pixel x 200 pixel :
1. Persiapkan 3 gambar yang mau digabung
2. Buka www.pixlr.com/editor dan klik Open Image from Computer
3. Blok dan buka ketiga gambar tersebut satu per satu atau bersamaan.
– mohon maaf gambar tehapus sehingga hanya menjelaskan via tulisan, bila kurang jelas silakan tinggalkan komentar
5. ketiga gambar telah terbuka dan ukurannya beda-beda. Kita resize ketiganya :
a. Klik gambar pertama, lalu klik Image > Image Size, lalu resize
b. Geser gambar pertama biar gambar 2, dan 3 kelihatan, lalu ubah ukuran tinggi (height) menjadi 210 pixe, sedikit lebih besar dari ukuran header kita yaitu 200 pixel, hal ini agar saat gambar sedikit tergeser, header masih tertutup gambar (tidak kosong)
– Berikutnya resize gambar ke2 dan ke3 dengan perlakuan yang sama dengan point a dan b.
6. Buat frame header berukuran 1000×200 pixel, dengan klik File, New Image, isi dengan ukuran 1000 x 200 :
Nah sekarang sudah siap untuk menggabungkan ketiga gambar dalam frame header berukuran 1000x200pixel
7. Masukkan gambar pertama ke frame, caranya :
– Klik gambar pertama, lalu klik kotak kedua di kiri atas
– Setelah itu blok gambar, can klik copy (menu Edit > Copy)
– Klik Frame , dan klik paste (menu Edit > Paste)
8. Gambar pertama telah ter-paste pada frame, anda bisa geser-geser gambar sesuai selera, misal ke kanan :
9. Lihat gambar dibawah, disebelah kanana gambar ada dua layer, layer 0 adalah frame, layer satu adalah gambar 1, saat saya akan melakukan editing pada gambar satu maka saya harus klik layer 1, saat ingin edit gambar kedua, saya harus klik layer dua.
gambar daitas menunjukkan layer 1 sedang aktif (sedang di edit), anda bisa geser dan mengedit- gambar 1. Bila sudah dicopy di frme, gambar aslinya bisa dihapus atau (close).
>> Editing Gambar 1 >>
– Menghapus sisi kiri dengan eraser tool yang bisa diseting opacity atau transparansinya. Untuk menghapus sisi garis biar samar gunakan opacity 100 %.
– Lihat sisi kiri gambar sudah saya hapus dengan opacity 100% :
Agar bila gambar kedua digabungkan tidak terlihat garisnya, namun ini belum cukup anda perlu menghapus lagi sisi kiri dengan opacity 10 % (gambar tidak terlihat terhapus tapi akan menjadi transparan saat gambar dua di gabungkan)
– Gambar kedua juga sudah saya hapus sisi kanan-nya lihat gambar :
Nah tinggal geser saja gambar kedua ke kanan, maka gambar akan menyatu seperti dibawah ini, namun masih terlihat kaku kan?
<<Perhalus gambar>>
Agar gambar terlihat menyatu kita perlu menghapus bakcground gambar, kalau pada photoshop ada erase image background pada esaser tool, gunakan itu. Kalau di pixlr.com tidak ada jadi pintar-pintarnya kita menghapus kedua sisi gambar agar bisa terlihat menyatu.
Keterangan : Sepertinya gambar pertama dan kedua kurang cocok untuk disatukan, kita ganti ganti saja gambar yang kedua dengan gambar ketiga seperti berikut ini hasilnya :
Sudah terlihat lebih baik, namun ternyata tiga gambar masih kurang, untuk mengisi sisi kiri kita tidak gunakan foto tapi gambar kosong, kita bisa membuat gambar kosong dulu.
Membuat gambar kosong : klik New Image, ukuran gambar tingginya 210 pixel dan lebarnya kira kira cukup untuk mengisi sisi kiri tersebut misal 250pixel.
– Memberi warna gradasi pada gambar kosong dengan klik tool di kiri tengah :
Untuk mengatur warna, kita bisa ubah warna dan geser ketiga point warna dibawah ini. Ingat Bila point warna di klik maka anda dapat memilih warna sesuai selera anda.
Lihat gambar kosong sudah saya beri warna biru. langkah selanjutnya adalah copy gambar tersebut kedalam frame :
setelah saya masukkan, sisi kanan gambar biru juga saya hapus biar tidak ada garisnya:
kemudian saya gabungkan semua gambar menjadi satu seperti dibawah ini :
hasilnya masih kuran bagus, warna biru tidak menyatu dengan gambar terakhir. Kalau anda menggunakan photoshop maka bisa lebih baik lagi, Pixlr.com hanya bisa menghapus dalam opacity 100 % tidak bisa diatur ke 10 %, bila dengan photoshop maka bisa lebih baik lagi, contoahnya seperti ini :
gambar diatas terlihat gradasi yang baik antara gambar dengan warna hijau.
===== kita anggap anda sudah paham menggabungkan gambar =====
# Membuat tulisan #
Sekarang Tulisi gambar header anda dengan tulisan sesuai selera anda, dengan klik simbol A di menu kiri. Untuk merubah seni tulisan, manfaatkan shadow pada layer. Anda bisa mengubah jarak bayangan dan letak bayangan-nya.
Selain Shadow, biasanya saya juga menggunakan outer Glow agar diluar tuisan ada warna putih pemisah dengan gambar.