Membuat Header Website Profesional dengan Photoshop

Adobe Photoshop CC 2014, atau versi terbaru, tetap menjadi pilihan utama bagi para desainer web yang ingin membuat header banner dengan tampilan profesional. Untuk hasil terbaik, pertahankan desain sederhana agar tidak terlalu memuat informasi visual. Jika perusahaan Anda memiliki palet warna dan font khusus, gunakan saja pada banner Anda.

Langkah‑langkah Membuat Header

1. Membuka Dokumen Baru

Mulai Photoshop, tekan Ctrl‑N atau pilih File > New. Tentukan dimensi banner, misalnya 900 px lebar dan 150 px tinggi. Klik OK untuk membuat kanvas baru.

2. Menentukan Latar Belakang

Jika ingin latar belakang berwarna solid, klik ikon Foreground Color di toolbar, pilih warna, lalu gunakan Rectangle Tool untuk mengisi seluruh kanvas. Pada tutorial ini, kita akan menumpuk dua gradien untuk efek yang lebih dinamis.

3. Menambahkan Gradien

Aktifkan Gradient Tool, pilih preset Black–White Gradient di menu Fill, lalu drag dari atas kanvas ke bawah. Lepaskan mouse untuk menerapkan gradien.

4. Menambahkan Teks

Gunakan Horizontal Type Tool, tarik kursor di banner untuk membuat kotak teks. Atur font, ukuran, dan warna melalui bar opsi. Posisikan kotak teks di sisi kiri banner.

5. Menyisipkan Gambar

Pilih File > Open, buka gambar (misalnya logo perusahaan). Di panel Layer, pilih Duplicate Layer dan tempatkan di file header. Klik OK untuk menambahkan gambar sebagai layer baru.

6. Menyesuaikan Ukuran Gambar

Pilih Edit > Transform > Scale, seret sudut gambar sambil menahan Shift untuk menjaga rasio. Tekan Enter, lalu geser gambar ke sisi kanan banner.

7. Menyesuaikan Warna Background dengan Gambar

Gunakan Foreground Color dan klik pada sisi kanan banner untuk mengambil warna sampel. Klik OK.

8. Menambahkan Gradien Overlay

Pilih Rectangle Tool, pilih Fill > Gradient, lalu tarik dari kiri gambar hingga tepi banner. Layer ini akan menambah kedalaman warna.

9. Menyesuaikan Opacity Layer Gradien

Di panel Layer, cari layer “Rectangle 1” (gradien overlay). Pindahkan ke posisi ketiga dari atas (di bawah layer teks). Atur Opacity ke sekitar 50% untuk efek semi-transparan.

10. Memberikan Efek Teks

Pilih layer teks, buka Layer > Layer Style > Bevel & Emboss. Set style ke Emboss dan geser Depth ke kiri sekitar 225% untuk efek minimal.

11. Menambahkan Efek Satin

Di jendela Layer Style, pilih Satin, gunakan Blend Mode “Multiply” dan set Opacity ke 15%. Klik OK.

12. Menyimpan Banner untuk Web

Pilih File > Save for Web, pilih format JPEG dengan kualitas 75–80%. Ini menghasilkan file kecil yang cepat dimuat tanpa mengorbankan kualitas. Klik Save dan tentukan lokasi penyimpanan. Setelah itu, upload banner ke halaman web Anda.

Tips Tambahan

1. Selalu gunakan ukuran resolusi 72 dpi untuk web.
2. Simpan versi Photoshop (.PSD) sebelum memfinalisasi, sehingga Anda dapat melakukan revisi lebih lanjut.
3. Pastikan teks memiliki kontras warna yang cukup agar mudah dibaca di semua perangkat.