MEMBUAT TEMPLATE HALAMAN WEBSITE

Tutorial kali ini saya akan mencoba untuk membuat sebuah web template halaman index menggunakan Photoshop, dan tema web nya adalah Film.

Berikut hasil project yang akan kita buat

Langkah 1

Baiklah langsung kita ke tutorialnya, buatlah sebuah kanvas baru berukuran 1280 x 986 pixels ( ukuran ini hanya menyesuaikan desain dari web yang akan di buat dan bukanlah ukuran standar dalam membuat sebuah halaman web).

Langkah 2

Kemudian berikan warna hitam pada layer background, lalu buatlah seleksi berbentuk kotak menggunakan “rectangular marquee tool” dan buatlah layer baru kemudian isi menggunakan warna #c78d13.

Langkah 3

Kemudian aturlah warna pada foreground menggunakan #c78d13 dan background # f9cf75 kemudian pilih menu “filter > render > fibers” dan berikan pengaturan seperti gambar.

Langkah 4

Pilih menu filter > blur > motion blur dan beri pengaturan seperti gambar, inii dilakukan untuk membuat pola pada kotak tadi menjadi lebih halus.

Langkah 5

Kemudian duplicate layer (CTRL+J) lalu Transform (CTRL+T) dan atur ukuran nya agar di perkecil, sehingga tampak seperti gambar. Lalu pilih menu Image > Adjusment > Hue/Saturationdan berikan pengaturan seperti gambar dan jangan lupa untuk mengaktifkan centang pada kotak pilihan “colorize”  untuk merubah warna kotak tersebut menjadi merah. Lakukan langkah tadi berturut turut dengan pengaturan Hue/Saturation seperti gambar.

Langkah 6

Kemudian pilih layer kotak berwarna coklat dan gunakan “Burn Tool” Untuk membuat area di bagian pinggirnya menjadi berwarna lebih gelap sehingga tampak seperti gambar, dan lakukan juga pada layer yang lain dengan cara yang sama.

Langkah 7

Selanjutnya buat layer baru dan letakkan di paling atas lalu Tekan tombol “D” pada keyboard untuk mengatur warna foreground dan background kembali ke default yantu berwarna hitam putih, lalu pilih gradient tool, dan pilih warna hitam – transparan, lalu klik and drag hingga tampak seperti gambar.

Langkah 8

Kemudian buatlah layer baru dan seleksi berbentuk kotak menggunakan Rectangular marquee tool, lalu pilih gradient tool, dengan warna hitam transparant, dan klik and drag seperti gambar, lakukan berkali kali hingga diperoleh hasil yang memuaskan.

Langkah 9

Kemudian masukkan gambar movie roll, sebagai penjelas bahwa layout web ini tentang movie, kemudian seleksi bagian latarnya dan letakkan pada posisi seperti gambar.

Kemudian duplicate layer movie roll tadi (CTRL+J) dan berikan layer style berupa gradient overly dengan pengaturan seperti gambar.

Berikutnya berikan teks untuk header dan tombol navigasi seperti gambar.

Karena desain kita ini untuk halaman index, yaitu halaman pertama yang tampil pada sebuah halaman web, jadi saya hanya menampilkan beberapa film terbaru sebagai awal di halaman ini, dan tentu saja tidak se-interaktif tampilan yang di buat menggunakan flash.

Untuk membuat nya menjadi halaman web yah silahkan di lanjutkan dengan pengaturan css. Dan saya rasa sekian dulu tutorial kali ini semoga bermanfaat. Tetap semangat menggunakan dan berkreasi dengan Photoshop. Bagaimana? mudah bukan?, selamat mencoba!.