Thursday, June 3, 2010

Membuat Layout Web 3D dengan menggunakan Element Photoshop

Dalam desain web tutorial, Anda akan menemukan cara untuk membuat halaman layout web yang  profesional dan ramping yang memasukkan 3D Ribbon design trend , serta beberapa elemen 3D menawan lainnya, menggunakan Photoshop.

Hasil Akhir

Berikut adalah preview apa yang akan kita buat. Klik pada gambar di bawah ini untuk melihat hasil akhir pada resolusi penuh .
Final preview

Membuat dokumen Photoshop

1.  Mulailah dengan membuat dokumen baru (Ctrl + N); masukkan dimensi 1200 piksel kali 1.200 piksel.
Membuat dokumen Photoshop

Membuat layer Background  yang bisa di edit

2 Secara default, Photoshop mengunci layer beckground sehingga anda tidak dapat mengeditnya. Untuk membuatnya dapat diedit, klik dua kali pada layer background dalam Panel Layers (tekan F7 untuk beralih layer background jika tidak terlihat). Atau, Anda bisa klik kanan pada layer backround dan pilih "Layers from Background". Setelah di klik dua kali, akan sebuah kotak dialog (seperti yang ditunjukkan pada gambar di bawah). Masukkan nama baru untuk Background layer Anda dan tekan OK; melakukan hal ini akan memungkinkan kita untuk mengedit Background layer.
Membuat Latar lapisan diedit

Membuat Background

3 Sekarang background kita dapat diedit, klik dua kali pada layer's thumbnail untuk menambahkan gaya Tampilan lapisan Gradient; perhatikan gambar berikut sebagai panduan pada pengaturan style layer.
Membuat latar belakang
4 Buat layer baru (Ctrl + Shift + N) beri nama "header latar belakang". Pilih Rectangular Marquee Tool (M) pada Panel Tools dan kemudian buat pilihan di bagian atas kanvas, pemilihan tinggi harus sekitar 150px dan bentang lebar seluruh kanvas.
Membuat latar belakang
5 Isi seleksi (Alt + Backspace) dengan warna kemudian tambahkan style layer berikut.
Membuat latar belakang
Membuat latar belakang
6 Buat layer baru (Ctrl + Shift + N) beri nama "latar belakang navigasi". Ulangi Langkah 4 - 5, kali ini tingginya harus sekitar 50px, masih mencakup lebar kanvas; seleksi juga harus dilakukan secara langsung di bawah yang terakhir.
Membuat latar belakang
7 Isi pilihan (Alt + Backspace) dengan warna lalu tambahkan beberapa style layer (Warna Tampilan dan Stroke layer style).
Membuat latar belakang
Membuat latar belakang
Sekarang akan terlihat seperti dibawah ini
Membuat latar belakang

Membuat Header

8 Buat layer baru (Ctrl + Shift + N) beri nama "header", cari Rectangular Marquee Tool (M) dari Panel Tools dan kemudian buat pilihan berukuran lebar 850px dan tinggi 150px.
Membuat Header di
9 Letakkan pilihan di tengah kanvas, pastikan bahwa dasar pemilihan berakhir pada stroke yang diterapkan pada latar belakang navigasi
Membuat Header di
10 Isi seleksi (Alt + Backspace) dengan warna apapun, dan kemudian tambahkan 3 layer style berikut.
Membuat Header di
Membuat Header di
Membuat Header di

Menambahkan judul Header

11 Tambahkan judul dan slogan situs web Anda ke sisi kiri header dengan menggunakan Horizontal Type Tool (T). Pengaturan dan kode warnanya akan  tercantum seperti pada gambar dibawah.
Menambahkan judul Header
Akan tampil seperti ini
Menambahkan judul Header

Menciptakan  Menu Navigasi bar

12  Buat layer baru (Ctrl + Shift + N) beri nama"navigasi". Gunakan Rectangular Marquee Tool (M) untuk membuat seleksi tetap dengan lebar 50px dan tinggi 850px .
Menciptakan bar Navigasi
13 Tentukan pilihan langsung di bawah header, lalu isi dengan warna apapun.
Menciptakan bar Navigasi
14 Sekarang, tambahkan tiga style layer berikut untuk layer navigasi Anda
Menciptakan bar Navigasi
Menciptakan bar Navigasi
Menciptakan bar Navigasi
Maka akan seperti ini
Menciptakan bar Navigasi
15 Gunakan Horizontal Type Tool (T) untuk menambahkan link navigasi ke bar navigasi Anda.
Menciptakan bar Navigasi

Membuat tombol Navigasi Hover

16 Pilih bulatan Rectangle Tool (U) dari Panel Tools dan set Radius ke 10px.
Membuat tombol Navigasi Melayanglah
17 Gambarlah sebuah persegi panjang kecil yang sekitar 80px  x  50px.
Membuat tombol Navigasi Melayanglah
18 Gunakan Rectangular Marquee Tool (M) untuk membuat persegi panjang di bagian atas persegi panjang. Isi persegi panjang tersebut dengan warna yang sama dengan persegi panjang bulat.
Membuat tombol Navigasi Melayanglah
19 Gandakan bentuk dengan mengklik kanan pada layer dan pilih Duplicate Layer. Kemudian putar layer yang digandakan 180 derajat menggunakan fitur Transformasi, Edit> Transform> Rotate 180 o.
Membuat tombol Navigasi Melayanglah
20 Tentukan seleksi di sekitar setengah dari bentuk yang digandakan dengan menggunakan Rectangular Marquee Tool (M). Setelah Anda membuat pilihan, tekan tombol Del untuk menghapus daerah seleksi.
Membuat tombol Navigasi Melayanglah
21 Gunakan Move Tool (V) dan tombol panah untuk menyelaraskan bentuk kecil di samping bentuk yang lebih besar, memastikan mereka tidak langsung tumpang tindih.Setelah pindah ke tempat yang diinginkan, Ctrl + klik thumbnail bentuk lapisan dalam jendela Layer Panel untuk memuat pilihan di sekitarnya.
Membuat tombol Navigasi Melayanglah
22 Beralih ke bentuk yang lebih besar pada dan tekan tombol Del untuk menghapus daerah di bawahnya. Ulangi langkah-langkah untuk bentuk di sisi lain  - dan ketika sudah selesai - akan tampak seperti ini.
Membuat tombol Navigasi Melayanglah

Mengubah tombol Hover

23 Setelah Anda memiliki tombol hover Anda Anda dapat menghapus layer duplikasi, dan kemudian ubah nama sisa layer "nav hover". Sekarang, tambahkan beberapa Style layer untuk itu.
Mengubah tombol Melayanglah
Mengubah tombol Melayanglah
24 Tarik  layer "nav hover" ke bawah layer teks navigasi Anda. Shift the "nav button" layer behind one of your navigation links and then change the link texts color to white (# FFFFFF ). Pindahkan layer " tombol nav" ke belakang salah satu link navigasi Anda dan kemudian mengubah warna teks link ke putih (# FFFFFF).
Mengubah tombol Melayanglah
25 Di bawah layer tombol hover navigasi Anda , buat layer baru (Ctrl + Shift + N) beri nama "nav hover ekstra". Pada layer ini, buat sebuah elips kecil berbentuk bulat panjang dengan menggunakan Marquee Tool (M) dan isi elips dengan warna #A3002F  .
Mengubah tombol Melayanglah
26 Potong setengah elips dengan menggunakan Rectangular Marquee Tool untuk membuat seleksi di bagian bawah, dan hapus bagian bawahnya. Kemudian pindahkan setengah elips bawah bagian bulat dari tombol navigasi. Jika elips terlihat menggantung di atas navigasi, anda harus memotongnya lagi. Setelah elips sudah berada pada ukuran yang benar, duplikat layer dan tempatkan pada sisi lain.
Mengubah tombol Melayanglah
maka kira-kira akan terlihat seperti ini
Mengubah tombol Melayanglah

Membuat Area Konten

27 Membuat layer baru (Ctrl + Shift + N) yang disebut "area konten". Dengan menggunakan Rectangular Marquee Tool, buat seleksi denagn lebar  850px, sama seperti kotak yang lain, dan setinggi yang Anda butuhkan tergantung pada jumlah konten yang akan Anda miliki, Anda dapat membuatnya lebih besar atau lebih kecil kemudian, sesuai kebutuhan. Isi seleksi dengan warna dan kemudian tambahkan tiga style layer berikut.
Membuat Konten Daerah
Membuat Konten Daerah
Membuat Konten Daerah
28 Tarik konten area ke bagian bawah navigasi dan sesuaikan area kotak konten menggunakan Move Tool (V) sehingga yang terlihat seperti garis indentasi dimana area konten dan navigasi bertemu.
Membuat Konten Daerah

Membuat kotak Pencarian

29 buat layer baru (Ctrl + Shift + N) dan beri nama "kotak pencarian" dan buat seleksi persegi di dalam area navigasi pada sisi sebelah kanan dengan menggunakan Rectangular Marquee Tool (M).
Membuat Konten Daerah
30 Isi seleksi dengan memilih Edit> Fill (Shift + F5) dengan warna putih (# FFFFFF), dan kemudian tambahkan Stroke layer style.
Membuat Konten Daerah
31 Di dalam kolom pencarian dummy, tambahkan beberapa teks dengan  menggunakan Horizontal Type Tool (T).
Membuat Konten Daerah
32 langsung di sebelah kolom pencarian dummy, buat seleksi lain dengan menggunakan Rectangular Marquee Tool (M).
Membuat Konten Daerah
33 Isi seleksi dengan warna kemudian tambahkan Gradient Overlay dan Stroke layer style; gunakan gambar berikut untuk bimbingan pengaturan.
Membuat kotak Cari grafis
Membuat kotak Cari grafis
Kira-kira akan seperti ini
Menciptakan Area Feature

Menciptakan Area Feature

34 Buat layer baru (Ctrl + Shift + N) beri nama "area fitur" dan buat wilayah persegi panjang bulat dengan menggunakan bulatan Rectangle Tool dengan radius 10px.
Menciptakan Area Feature
35 Gunakan Polygonal Lasso Tool (L) untuk membuat panah menunjuk pada sisi kiri atas. Isi panah pada lapisan yang sama dengan warna yang sama dengan persegi panjang bulat.
Menciptakan Area Feature
36 Sekarang tambahkan beberapa gaya lapisan (Gradient Overlay dan Stroke) ke lapisan daerah fitur Anda.
Menciptakan Area Feature
Menciptakan Area Feature

Isi Area Fitur dengan konten

37 Buat layer baru (Ctrl + Shift + N) beri nama "perbatasan fitur" dan menggunakan bulatan Rectangle Tool (U), buat bentuk persegi panjang di dalam area fitur.
Fitur konten Area

38 Tambahkan gradien overlay halus ke lapisan perbatasan fitur. Klik thumbnail layer ketika sementara menahan tombol Ctrl pada keyboard untuk memuat pilihan di sekitarnya, dan kemudian ke Select> Modify> Contract". Contract seleksi sebesar 10px, kemudian tekan OK.
Mengisi Area Fitur dengan konten
39 Cari gambar / foto yang ingin Anda gunakan , buka di Photoshop, dan salin gambar ke clipboard Anda (Ctrl + C). Lalu dengan pemilihan kontrak tenda yang kita buat pada langkah sebelumnya yang masih aktif, pergi ke Edit> Paste Into (Shift + Ctrl + V). Gambar kemudian akan di paste di dalam seleksi.
Mengisi Area Fitur dengan konten
40 Akhiri area dengan fitur dummy dengan beberapa teks dan judul.
Mengisi Area Fitur dengan konten

Menciptakan area konten dengan Pita 3D

41 Gunakan metode yang sama seperti membuat tombol navigasi hover untuk menciptakan nominal kiri, hanya saja kali ini utnuk membuat bagian tumpang tindih utama akan lebih lama dan berorientasi horizontal bukan vertikal.
Menciptakan area konten yang Pita 3D
42 Pada bagian akhir pita (sisi kanan), buat bentuk segitiga dengan menggunakan Polygonal Lasso Tool (L) dan gunakan tombol Del untuk menghapus area yang tidak diinginkan. Akhirnya, tambahkan style Drop Shadow layer pada lapisan ini (menggunakan pengaturan pilihan Anda) dan beberapa teks dummy.
Menciptakan area konten yang Pita 3D
43 Gandakan layer pita flip 3D dan layer digandakan dengan memilih Edit> Transform> Flip Horisontal. Gunakan Move Tool (V) ke posisi itu di sebelah kanan, itu akan menjadi judul untuk konten sidebar.
Menciptakan area konten yang Pita 3D
44 Di bawah setiap pos, tambahkan beberapa teks dummy dan beberapa gambar.
Menciptakan area konten yang Pita 3D

Membuat Footer

45 Ulangi langkah-langkah  tombol hover lagi (alternatifnya, Anda dapat menduplikasi layer tombol  hover).
Membuat Footer yang
46 Ganti pengaturan Gradient Overlay  menggunakan warna yang tercantum di bawah.
Membuat Footer yang
47 Gabungkan menjadi satu layer dan putar menggunakan Edit> Transform> Rotate 90 o CCW. Pindahkan objek di sisi kiri layout.
Membuat Footer yang
48 Gandakan bentuk flip itu menggunakan Edit> Transform> Flip Horisontal. Pindahkan ke bentuk di sisi lain layout.
Membuat Footer yang
49 Merge kedua bentuk menjadi satu layer (Ctrl + E), zoom (Z) menjadi salah satu dari bentuk, dan buat rectangular selection seperti pada gambar di bawah ini, dan pilih Edit> Free Transform (Ctrl + T).
Membuat Footer yang
50 Pilih titik anchor tengah dan tarik ke sisi lain dari kanvas.
Membuat Footer yang
Maka akan terlihat seperti ini
Membuat Footer yang
51 Akhirnya, dengan menggunakan Horizontal Type Tool (T) tambah informasi footer Anda.
Membuat Footer yang

Selesai

Jika Anda mengikuti sepanjang tutorial, maka akan seperti gambar berikut.

Download file Photoshop

Anda dapat men-download file Photoshop akhir (PSD) yang digunakan dalam tutorial ini untuk meningkatkan kemampuan belajar Anda dan untuk membandingkan kerja Anda sendiri.

Sumber Asli dari Six Revisions

No comments:

Post a Comment