Kamis, 24 Mei 2012

Desain template dengan photoshop

Membuat Desain Template Transparan Dengan Photoshop


Membuat Template Web Transparan Dengan Photoshop CS3
Hasil Akhir
Membuat Desain Template Transparan Dengan Photoshop – Tutorial kali ini membahas cara Membuat Desain Template Transparan Dengan Photoshop. Pada umumnya desain template mengunakan warna-warna solid, blog werutech mencoba membagi ilmu desain template web transparan digabungkan dengan tren desain web lainnya. Aplikasi yang saya gunakan adalah Adobe Photoshop CS3 dengan tingkat kesulitan menengah dan perkiraan waktu penyelesaian kira-kira 2 jam.

Membuat Desain Template Transparan Dengan Photoshop

Langkah 1
Buat dokumen dengan ukuran 960px x 800px. Resolusi 72 pixel, RGB Color, 8 bit, transparan.
Langkah 2
Sekarang kita perlu untuk mengalokasikan beberapa ruang untuk latar belakang yang akan kita buat. Klik Image > Canvas Size dan perluas dokumen sampai 1100 piksel dengan 1000 pixel. Tekan Shift + F5, isi dengan warna #FFFFFF. Beri nama layer “Background”
Langkah 3
Klik kanan pada layer Background, dan pilih Blending OptionsGradient Overlay. Isi warna sesuai selera Anda.
Langkah 4
Buat layer baru dan beri nama “Noise”, isi layer dengan warna putih (FFFFFF) dengan cara Klik EditFill. Setelah Anda memiliki lapisan dengan warna putih, Klik FilterNoiseAdd Noise, atur Amount menjadi 400%, Distribution : Uniform. Ubah layer menjadi Multiplay dan Opacity 5%
Langkah 5
Buat layer baru, di atas diatas layer Noise.dan beri nama “Brush1″. Ubah layer menjadi Multiply. Pilih warna foreground # 996726. Pilih Brush yang Anda inginkan sapukan sehingga menghasilkan gambar abstrak. Atur Opacity layer untuk 50%. Ulangi langkah ini sekali lagi, dan beri nama layer “Brush2″.
Membuat Desain Template Transparan Dengan Photoshop
Brush Apstrak
Langkah 6 Membuat Main Background
Buat layer baru, beri nama Main Background. Pilih Rounded Rectangle, ubah Radius menjadi 20px, gambar harus sesuai dengan ukuran semula 960px dengan 800px. Ubah Fill layer Post Area menjadi 0%.
  • Tambahkan Drop Shadow: Opacity sebesar 41%, Angle: 90, Distance: 0, Spread: 1, dan Size: 10, hilanhkan tanda centang pada Use Globallight.
  • Bevel and Emboss: Style: Inner Bevel, Technique: Smooth, Deep: 100%, Direction: Up, Size : 20px, Soften: 0px,  Angle: 135, Altitude: 58, Opacity Highlight: 27%, dan Shadow Opacity: 15%. Hilangkan tanda centang pada Use Global Light
  • Color Overlay: #FFFFFF - Opacity: 73%
  • Stroke, Size: 1px, Opacity: 100%, Color: #FFFFFFF
Sehingga terlihat seperti ini :
Membuat Desain Template Transparan Dengan Photoshop
Main Background
Langkah 7 – Membuat Menu Bar
Buat layer baru, beri nama Menu Bar. Klik Rounded Rectangle Tool, ubah Radius menjadi 10px. Buat kotak menu diatas Main Background, dalam pembuatan menu bar warna tidak menjadi masalah.
Tekan Ctrl dan klik layer Menu Bar agar terseleksi (pastikan Rectangular Marquee Tool aktif). Pilih layer Main Background dan hapus. Untuk melihat hasil menu bar, Anda dapat menyembunyikan gambar Menu Bar dengan cara klik icon mata pada layer pallet.
Tuliskan beberapa teks menu, pada contoh saya menggunakan font Rockwell.
Agar teks terlihat lebih tajam atur Blending Optionnya pada Drop Shadow dengan pengaturan Blend Mode: Multiplay, Opacity: 51%, Angle: -60 (hilangkan tanda centang pada Use Global Light), Distance dan Size: 1px, Spread: 0%
Membuat Template Transparan Dengan Photoshop CS3
Menu Bar
Langkah 8 – Membuat Tombol Navigasi Aktif
Buat layer baru di bawah teks dengan nama Tombol Navigasi, warna tidaj jadi masalah. Untuk membuat kotak pakai Rectangle Tool dan atur Blendingnya.


  • Drop Shadow, Blend Mode: Multiplay, Opacity: 75%, Angle: 90 (hilangkan centang pada Use Global Light), Distance dan Spread: 0px, Size: 2px.
  • Inner Glow, Blend Mode: Screen, Opacity: 23px, Noise: 0px, Color: #FFFFFF, Choke: 100px, Size: 2px.
  • Gradient Overlay, Blend Mode: Normal, Opacity: 100px, Gradient: #e55469 dan #b70e26 (hilangkan tanda centang pada Reserve), Style: Reflected, Angle: 90, Scale: 100.
  • Stroke, Size: 1px, Position: Inside, Color: #a6081f.
  • Gunakan Ctrl + J untuk meratakan warna.

Shadow Navigasi Aktif
Buat Layer baru dengan nama Shadow. Gunakan Elipse Tool, buat elips dengan ukuran lebih panjang dari pada Navigasi dan isi dengan warna #000000. Klik FilterBlurGrusian Blur, atur radius menjadi 2 px. Hapus bagian atas elips dengan Rectangular Marquee Tool. Atur Opacity menjadi 75%. Lakukan hal serupa untuk shadow bagian bawah navigasi.
Membuat Template Transparan Dengan Photoshop CS3
Navigasi Aktif
Langkah 9 – Finishing Header
Sebelum kita sampai ke logo, mari kita selesaikan Header dengan menambahkan garis horisontal dengan ukuran 1px dibawah menu bar. Isi garis horisontaldengan warna yang sesuai, kali ini saya memakai warna hijau tua. Ubah nama layer ini Line.
Sekarang kita perlu menambahkan logo dan nama blog. Untuk nama blog pilih Font yang Anda suka. Lakukan seperti langkah 7, untuk hasil seperti contoh di atas. Untuk membuat Shadow pada logo, lakukan seperti Anda membuat shadow pada Navigasi Aktif.
Langkah 10 – Produk
Sekali lagi, kita akan menggunakan teknik cuting seperti pada menu bar. Buat layer baru dengan nama Produk. Pilih Rounded Rectangle Tool dengan radius 10px. Pastikan padding semua sisi 40px. Lakukan langkah seperti pada pembuatan menu bar.
Untuk membuat lingkaran, buat lingkaran diameter 40px dengan Shape Tool. Isi dengan warna #FFFFFF, atur opacity agar warna sesuai dengan main background, hapus sisi setengahnya.
Langkah 11 – Menambahkan Item Produk
Ambil screenshot dari situs favorit Anda. Ubah nama layer ini “screenshot”. Tambahkan Stroke dengan Size:10px, Position: Inside, Opacity: 85px, Color: White. Putar screenshoot sesuai keinginan Anda. Buang bagian yang tidak perlu sehingga timbul kesan terselip.
Sekarang kita telah memiliki screenshot, mari kita tambahkan deskripsi singkat, masih dengan tema yang sama yaitu Template Transparan. Buat kotak persegi panjang pada bagian ini saya menggunakan warna hitam, dan opacity 30%.
Buat beberapa teks dengan warna #d5f8ed. Tambahkan Drop shadow dengan ukuran seperti tulisan pada Menu Bar.
Efeknya akan terlihat seperti ini:
Membuat Desain Template Transparan Dengan Photoshop Cs3
Deskripsi Produk
Langkah 11 – Label
Kita perlu memberitahu pengunjung tentang apa yang ad di blog kita. Buat label seperti membuat navigasi Aktif
Membuat Desain Template Transparan Dengan Photoshop Cs3
Label
Langkah 12 – Membuat Area Konten Utama
Bagi Main Background menjadi tiga kolom yang sama dengan ukuran 266px per kolom (ukuran yang saya pakai 267px, 266px, 267px dari kiri ke kanan untuk menjaga keseimbangan), dengan padding 40px
Buat Grup Baru di Palet layer beri nama Last Post. Font yang saya gunakan Rockwell, dengan layer style sama dengan diatas.
Hasil dengan ukuran sebenarnya bisa dilihat disini

0 komentar: