You are here

Tutorial Web Desain Dengan Photoshop Bagian I

Halo semuanya. Pada kesempatan ini saya akan memberikan Tutorial sederhana membuat Desain Web dengan Photoshop. Tutorial ini kita akan membuat sebuah Landing Page untuk salah satu perusahaan. Dengan desain bergaya Flat Design. Nah kalo temen – temen belum tau apa itu Flat Design, bisa di Googling dulu yah hehe.

Oke gaperlu basa – basi ya langsung saja.

Disini saya menggunakan Adobe Photoshop CS6. Kalaupun kalian pake versi lain, gamasalah kok, tinggal menyesuaikan saja ya.

1. Buka Photoshop Lalu Buat File Baru Dengan Ukuran 1366 x 2000 pixels (CTRL + N)

Bisa dilihat contohnya seperti gambar ya. Untuk ukuran Height sendiri sebenarnya tidak cukup 2000 pixels. Tapi sementara kita atur 2000 Pixels biar gak terlalu panjang. Nanti bisa ditambah kok.

Dan Hasilnya akan seperti ini. Lalu Duplikat Layer Background dengan cara menekan tombol CTRL + J.

2. Buat Garis Guide Agar Lebih Mudah Dan Rapih.

Buat garis garis seperti gambar diatas agar memudahkan proses desain nantinya. Caranya dengan menekan tombol V di keyboard terlebih dahulu selanjutnya munculkan penggaris dengan menekan CTRL + R. Lalu Drag dan letakkan garis hijaunya.

3. Buat Group Agar Terlihat Lebih Rapi

4. Buat Shape Persegi Untuk Background Dasar Header

5. Masukkan Gambar Background Untuk Bagian Banner. Taruh Di Group Header. Lalu Buat Overlay Hitam Diatas Gambar Background. Set Opacity Dengan 50%.

Gambar Background di Banner bisa kalian download Disini.

6. Buat Shape Untuk Bagian Menubar Dengan Height 100 Pixels Serta Opacity 50% Masukkan Kedalam Group Menubar. Lalu Masukkan Juga LOGO Perusahaan Kamu.

Jangan lupa untuk selalu memakai Garis Guide agar terlihat lebih rapi.

7. Masukkan Teks Untuk Menu Bar di Website Kita.

Jika temen – temen kesulitan dengan Garis Hijau / Guide. Bisa dihilangkan dengan menekan CTRL + H. Oh ya, disini saya menggunakan font Roboto 16px untuk teks menubar.

8. Masukkan Teks Di Banner, Serta Tambahkan Garis Dibawah Teks.

Font yang digunakan diatas adalah Oswald 72px.

9. Masukkan Deskripsi Singkat Untuk Perusahaan Anda Di Bawah Garis Kecil Biru.

Font yang digunakan adalah Roboto 20px.

10. Masukkan Gambar Panah Agar Memberitahu Kepada Pengunjung Bawah Masih Ada Konten Dibawah.

Nah selesai deh bagian Header. Ini masih banyak loh. Segini dulu ya dari saya, dilanjutkan lain kesempatan hehe. Kalo ada pertanyaan langsung saja tanya di kolom komentar dibawah ya.

Terima Kasih.

Salam,

 

Leave a Reply

Top