Buat Header Laman Web Profesional dengan Photoshop

Langkah 1

Mulakan Photoshop. Tekan Ctrl+N atau pilih New daripada menu File. Tetapkan saiz banner, contohnya 900×150 piksel, kemudian klik OK.

Langkah 2

Pilih warna latar belakang pepejal jika dikehendaki. Klik ikon Foreground Color di Toolbar, pilih warna, kemudian gunakan Rectangle Tool untuk mengisi seluruh canvas. Dalam tutorial ini, kita akan menumpuk dua gradien bukannya warna pepejal.

Langkah 3

Gunakan Gradient Tool dari Toolbox. Di bar pilihan, pilih preset gradien hitam‑putih. Klik di atas banner dan seret ke bawah canvas untuk menapis gradien.

Langkah 4

Pilih Horizontal Type Tool dan seret bagi mencipta kotak teks. Atur font, saiz, dan warna melalui bar pilihan. Letakkan kotak teks di bahagian kiri banner supaya berpusat.

Langkah 5

Pilih Open dari menu File dan pilih gambar (logo syarikat, foto diri, produk) untuk banner anda. Selepas dibuka, pilih Duplicate dari menu Layer, tetapkan destinasi ke fail header (biasanya "Untitled-1" jika belum disimpan). Klik OK untuk menambah gambar sebagai lapisan baru.

Langkah 6

Pilih Transform → Scale. Sesuaikan saiz gambar supaya muat pada banner sempit. Tahan Shift semasa menyeret untuk kekalkan nisbah aspek, tekan Enter. Pindahkan gambar ke bahagian kanan banner.

Langkah 7

Seret ikon Foreground Color di Toolbar untuk membuka pemilih warna. Klik pada bahagian kanan banner untuk mencocokkan warna, kemudian klik OK.

Langkah 8

Pilih Rectangle Tool, klik Fill dan pilih ikon Gradient. Seret dari dalam sisi kiri imej ke tepi kiri banner, menghasilkan segi empat dengan gradien warna yang telah dipilih.

Langkah 9

Di panel Layers, seret lapisan "Rectangle 1" (gradien) ke bawah supaya berada sebagai lapisan ketiga dari atas—di bawah "Layer 1" dan lapisan teks. Di bahagian atas panel, seret slider Opacity ke kira‑kira 50%. Ini menjadikan gradien atas setengah lutsinar, memadankan gradien bawahnya.

Langkah 10

Pilih lapisan teks, buka Layer > Layer Style > Bevel & Emboss. Tetapkan gaya kepada "Emboss" dan gerakkan slider Depth ke kiri, kira‑kira 225% untuk kesan yang ringan.

Langkah 11

Pilih pilihan Satin dalam tetingkap Layer Style. Tetapkan Blend Mode kepada "Multiply" dan kurangkan Opacity kepada 15%. Ini menggabungkan gaya satin dengan emboss. Klik OK.

Simpan imej sebagai banner Web-optimized dengan memilih Save for Web dari menu File. Pilih format JPEG dan tetapkan kualiti imej antara 75–80%. Klik Save dan pilih lokasi fail. Setelah Photoshop ditutup, seret fail ke laman web anda.