Membuat desain Header website menggunakan Adobe Photoshop CS

Assalamualaikum wr. wb.

Untuk menjadi website developer, tentunya anda harus menguasai desain, dalam website desain memiliki peran yang sangat penting, Anda yang newbie bahasa pemrograman dapat membuat web atau blog dengan media blogspot atau dengan Content Management Sistem (CMS) seperti wordpress, jomlaa, druppal dan sebagainya. Anda yang expert bahasa pemrograman dapat membuat website dari awal dengan menggunakan bahasa pemrograman HTML & PHP.

Tentunya dua cara pembuatan website diatas tidak dapat lepas dari web design, baik itu membuat blog di blogspot,wordpress dsb, atau membuat website dengan PHP tentunya kita perlu apa yang nama nya web design. karena selain kecepatan , tampilan website sangat berpengaruh ke banyak nya pengunjung website/blog tersebut.

Sebenarnya tujuan saya menulis artikel ini adalah sebagai catatan untuk diri saya sendiri, karena saya sendiri masih newbie dengan web design.

Pada Seri pertama ini saya akan sharing tentang cara membuat desain Header Website  menggunakan Adobe Photoshop CS.
Berikut langkah-langkah nya



1. Buka Adobe Photoshop.
    File -> New, isi seperti gambar dibawah ini

   Standal ukuran header adalah width 900 pixels, height 160 pixels (untuk height optional)  
   klik OK,
  

2. Tambahkan image Yang akan dibuat design, contoh :

seleksi gambar dengan menggunakan Rectangular Marquee Tool

blok object yang akan diseleksi

Pilih edit -> copy

kemudian paste di file header yang masih polos tadi

Untuk mengatur size , pilih edit --> free transform, tekan enter setelah melakukan free trabsform
atur sehingga menjadi seperti ini



3. Tambahkan image yang kedua, contoh

 seleksi gambar dengan menggunakan Rectangular Marquee Tool

cara seleksi sama seperti cara menyeleksi image yang pertama

Kemudian Edit -> copy

kemudian paste di file header yang sudah ada image nya tadi




4. Tahap selanjutnya adalah membuat efect pudar  di setiap sisi dari gambar

Klik di Layer 1 (image pertama) klik add layer mask

 Sehingga di sebelah kanan layer 1 akan muncul layer baru dengan background putih

Untuk membuat efect pudar, pilih gradient tool

 Pilih jenis gradient Foreground to Transparent

Tarik Garis lurus dari kanan ke kiri seperti gambar disamping,
lakukan berulang-ulang agar mendapatkan efek pudar (blur) yang bagus

Lakukan Yang sama pada layer 2 (image2)
klik add layer mask, sehingga disebelah kanan layer 2 akan muncul layer baru dengan background putih

untuk membuat efek transparan antara image 1 dan image 2, tarik Garis Lurus dari atas kebawah, dari sisi kiri ke sisi kanan, dan dari sisi kanan ke sisi kiri pada tiap2 batas antara image 1 dan 2 seperti gambar diatas.

lakukan berulang-ulang agar mendapatkan efek transparan yang bagus

Hasil nya sebagai berikut 

Anda bisa menambahkan image ke tiga sehingga hasilnya sebagai berikut

Tinggal ditambahkan Text atau judul Website sesuai Tema Website Anda

Demikian Sharing dari saya, mohon maaf kalau ada yang kurang, pease leave a comment :)