Preview

Di bawah adalah tampilan desain yang akan kita buat.

Detail Tutorial

• Tingkat Kesulitan: Pemula, Menengah
• Software yang Digunakan: Adobe Photoshop
• Teknik yang Dipelajari: Mendesain dengan Grid 960, Layer Style
• Lama Pengerjaan: 30 menit

Resource yang Dibutuhkan

Untuk mengikuti tutorial ini, silakan ambil terlebih dahulu resource berikut:

• Template Grid 960 dari 960.gs
• Pola Pixel dari PSDfreemium
• Set ikon Oxygen dari Oxygen

Tutorial

Langkah 1: Mempersiapkan File

Buka template grid 960 px yang terdiri dari 12 kolom di Photoshop. Lebar saat ini terlalu sempit untuk kebutuhan kita. Jadi, perbesar ukurannya hingga 1.100 x 1.200 px dengan perintah Image > Canvas Size.

Langkah 2: Header

Aktifkan tool Rectangle dan buat latar header dengan warna #2c2a2f.

Klik ganda layer dan aktifkan Pattern Overlay. Gunakan Pola Pixel dari PSDfreemium.

Di bawah adalah tampilan latar header di perbesaran 100%.

Langkah 3: Area Info Produk

Aktifkan tool Rectangle dan buat latar untuk informasi produk. Area ini harus berada di atas header.

Tambahkan Layer Style Stroke dan turunkan Opacity agar hasilnya transparan.

Di bawah adalah hasil Stroke.

Langkah 4

Buat layer baru. Seleksi latar area produk. Isi dengan putih. Klik Filter > Noise > Add Noise.

Langkah 5

Ubah Blend mode ke Multiply dan turunkan Opacity ke 20%. Ini akan memberi tekstur noise pada latar.

Langkah 6: Logo

Aktifkan tool Ellipse. Ubah warna depan ke orange. Shift-drag untuk membuat lingkaran.

Langkah 7

Ctrl – click lingkaran lalu klik Select > Modify > Contract.

Langkah 8

Buat layer baru lalu klik Edit > Stroke. Gunakan Width: 1 px dengan warna hitam. Turunkan Opacity layer ke 20%.

Langkah 9

Tekan Ctrl + J untuk menggandakan garis stroke. Tekan Ctrl + I untuk membalik warna garis menjadi putih. Aktifkan tool Move lalu klik panah atas sekali untuk menggaris garis 1 px ke atas.

Langkah 10

Buat layer baru lalu ubah menjadi Clipping Mask dengan menekan Ctrl + Alt + G. Lukis bagian atas dan bawah lingkaran dengan putih. Turunkan Opacity layer ke 10%.

Langkah 11

Aktifkan tool Custom Shape dan pilih bentuk Snowflake dari baris pilihan. Buat nowflake hitam di tengah-tengah lingkaran. Klik ganda layer dan beri bevel and Emboss. Turunkan Fill hingga 5%.

Langkah 12

Buat layer baru. Ctrl + klik lingkaran dan klik Edit > Stroke dengan warna putih. Haluskan garis dengan Gaussian Blur.

Langkah 13

Hapus bagian atas dan bawah garis stroke dengan tool eraser. Turunkan oapcity layer hingga 30%.

Langkah 14

Ctrl – klik lingkaran. Buat layer baru dan isi seleksi dengan hitam. Haluskan dengan Gaussian Blur. Simpan bayangan ke belakang lingkaran. Transformasi (Ctrl + T) bayangan agar bagian atas dan bawahnya mencuat.

Langkah 15

Tambahkan nama situs dan tagline dengan font Helvetica Bold dan Regular.

Langkah 16

Tambahkan menu halaman di sisi kanan header. Gunakan warna orange, sama dengan warna logo, untuk link aktif. Samakan warna link lainnya dengan latar area info produk.

Langkah 17

Simpan gambar produk.

Langkah 18

Tambahkan keterangan produk. Gunakan ukuran font yang cukup besar agar menarik perhatian. Saya memilih kombinasi font Sans Serif untuk teks utama dan Serif untuk keterangannya.

Langkah 19: Area Trial

Buat lagi latar persegi untuk info trial produk. Gunakan orange sesuai tema warna kita. Pastikan agar area ini berada di belakang area keterangan produk, agar efek Stroke transparan berada di atasnya.

Beri Gradient Overlay

Langkah 20

Tambahkan keterangan trial produk.

Beri Inner Shadow pada teks.

Di bawah adalah hasil yang kita peroleh.

Langkah 21

Ambil tombol dari PSDfreemium. Modifikasi sedikit warnanya agar sesuai dengan tema warna kita.

Langkah 22: Area Keterangan Tambahan

Aktifkan tool Rectangle dan buat latar lagi. Kali ini dengan warna abu-abu untuk poin-poin keterangan produk. Simpan area ini di atas bagian info trial produk.

Beri Stroke dengan setting yang sama dengan area info produk.

Efek Stroke transparan akan muncul di atas area trial produk.

Langkah 23

Buat sub judul poin pertama dengan font Helvetica Bold. Gunakan warna orange. Beri Drop Shadow agar teks sedikit terangkat.

Langkah 24

Ambil set ikon Oxygen. Simpan di bawah sub judul.

Langkah 25

Buat path kotak untuk teks lalu buat lagi path kotak untuk menutupi ikon dengan mode Subtract.

Langkah 26

Klik di dalam shape dengan tool Type untuk menambahkan teks.

Langkah 27

Simpan teks dan ikon ke dalam group lalu geser sambil menahan Alt untuk menduplikasinya. Ubah teks dan ikon untuk setiap bagian.

Langkah 28: Footer

Buat latar footer dengan bentuk yang sama seperti header. Gunakan Layer Style dan warna yang sama.

Langkah 29

Tambahkan keterangan tentang desainer dan berbagai info lainnya.

Hasil Akhir

Di bawah adalah desain akhir yang kita peroleh. Bisa Anda lihat bahwa desain ini sederhana namun cukup kuat dalam menonjolkan produk yang ingin dijual situs.

Download Link

Related posts:

• Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel
• Mendesain Situs Portfolio Satu Halaman (PSD – HTML/CSS)
• Mendesain Slider Web di Photoshop
• Mendesain Theme Tumblr Minimalis
• Mendesain Blog Minimalis dengan Grid 960

Preview

Berikut adalah hasil akhir yang diperoleh.

Sebagian Langkah dalam Tutorial

Tutorial ini sangat detail dan membahas banyak teknik yang umum digunakan dalam desain interface. Di bawah adalah beberapa langkah dalam tutorial.

Link Tutorial

Related posts:

• Desain Web eCommerce Terinspirasi Groupon Lengkap dengan Slider jQuery
• Mendesain Slider Web di Photoshop
• Membuat Tombol Sprite dari PSD hingga HTML/CSS
• Membuat Gambar Preview Blog Lebih Menarik dengan Actions
• Membuat Situs Foto Minimalis dari PSD hingga HTML/CSS

Preview

Berikut adalah hasil akhir yang diperoleh.

Sebagian Langkah dalam Tutorial

Tutorial ini membahas proses desain web secara lengkap mulai dari desain di Photoshop hingga cara mengkonversinya ke HTML/CSS. Selain itu, Anda dapat belajar lebih banyak melalui proses pembuatan slide show.

Link Tutorial

Related posts:

• Membuat Situs Foto Minimalis dari PSD hingga HTML/CSS
• Membuat Tombol Sprite dari PSD hingga HTML/CSS
• Mendesain Halaman Depan Situs Perusahaan Secara Efektif
• Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel
• Mendesain Blog Elegan Bag. 3 – PSD ke Theme WordPress

Preview

Berikut adalah hasil akhir slider yang akan kita peroleh.

Detail Tutorial

• Tingkat Kesulitan: Pemula, Menengah
• Software yang Digunakan: Adobe Photoshop
• Teknik yang Dipelajari: Layer Mask, Layer Style
• Lama Pengerjaan: 30 menit

Tutorial

Langkah 1: Mempersiapkan Latar

Mulai dengan membuat file baru berukuran 1.000 x 500 px. Isi latar dengan warna #dcf1f7.

Langkah 2

Klik Filter > Noise > Add Noise. Aktifkan Monochromatic untuk memberi noise dengan warna grayscale. Penambahan noise akan memberi tekstur pada latar sehingga tidak terlihat terlalu datar.

Langkah 3: Bentuk Dasar Slide

Buat shape persegi untuk area gambar. Anda bisa menggunakan warna apa pun, tidak masalah.

Klik ganda layer untuk membuka kotak dialog Layer Style. Aktifkan Stroke.

Langkah 4

Ambil gambar dan simpan di atas shape persegi. Atur ukurannya hingga sesuai. Tekan Ctrl + Alt + G untuk mengubah layer menjadi Clipping Mask dan membuat gambar masuk ke dalam area slide. Di sini, saya menggunakan gambar Gurun Namibia.

Langkah 5: Tombol Navigasi – Panah

Buat dua lingkaran di kedua sisi slide dengan warna sama seperti stroke, #dddddd.

Langkah 6

Aktifkan tool Polygon. Pilih Sides: 3 untuk menghasilkan sebuah segitiga. Buat segitiga di dalam lingkaran. Turunkan Fill layer ke 0%.

Beri Inner Shadow dan Gradient Overlay.

Langkah 7

Ctrl-klik segitiga untuk membuat seleksi baru berdasarkan pada bentuknya. Buat layer baru. Klik kanan dan pilih Stroke. Isikan Width: 1 px dengan warna putih dan Location: Inside.

Hapus garis di sisi atas dan kanan lalu turunkan Opacity layer. Ini akan memberi efek bevel pada segitiga.

Langkah 8

Duplikasi panah. Lakukan proses transformasi (Ctrl + T), klik kanan dan plih Flip Horizontal. Simpan panah di sisi sebelahnya.

Langkah 9: Memberi Efek 3 Dimensi

Duplikasi shape dasar slide dengan menekan Ctrl + J. Simpan ke atas. Di atasnya, buat sebuah layer kosong. Seleksi keduanya lalu pilih Layer Layer > Merge Layers. Langkah ini akan mengubah Layer Style menjadi pixel biasa. Mulai saat ini, Anda bisa bebas mengedit isi pixel tanpa bergantung pada setting Layer Style.

Langkah 10

Tahan Ctrl lalu klik thumbnail layer di panel Layers. Isi seleksi dengan warna putih. Kita akan menggunakan layer ini nanti. Untuk sekarang, sembunyikan layer dengan cara klik ikon mata di depan nama layer. Jangan dulu menghilangkan seleksi.

Langkah 11

Klik Select > Expand. Isikan 3 pixel untuk memperbesar seleksi sebesar 3 pixel.

Langkah 12

Buat layer baru dan simpan di bawah slider. Isi seleksi dengan warna putih. Klik ganda layer dan aktifkan Layer Style Outer Glow.

Turunkan Opacity layer ke 10%.

Langkah 13

Munculkan kembali shape yang kita buat di Langkah 10. Agar mudah dilihat, saya mengubah warnanya menjadi hitam. Anda bisa menggunakan warna apa pun, tidak masalah.

Klik ganda layer dan aktifkan Layer Style Bevel and Emboss. Turunkan Fill ke 0%.

Di bawah Anda bisa melihat perbandingan sebelum dan setelah slide diberi Bevel and Emboss.

Langkah 14: Bayangan

Aktifkan tool brush. Atur Hardness ke 0%. Lukis bayangan di bawah slider.

Langkah 15

Lakukan proses transformasi dengan menekan Ctrl + T. Klik kanan dan pilih Warp.

Geser kotak warp di kedua ujung sehingga diperoleh bentuk seperti di bawah.

Turunkan Opacity bayangan ke 50%.

Langkah 16: Info Gambar

Berkutnya adalah menambahkan informasi tentang gambar. Informasi ini akan muncul dalam kondisi hover, yaitu ketika kursor berada di atas slide. Seleksi bagian bawah slide. Buat layer baru lalu isi seleksi dengan hitam.

Langkah 17

Turunkan Opacity layer ke 50% lalu tuliskan keterangan gambar. Keterangan ini hanya muncul pada kondisi hover, jadi di langkah selanjutnya kita akan menyembunyikannya.

Langkah 18: Navigasi Slide – Lingkaran

Buat lingkaran di bawah slide. Kita akan menggunakannya untuk link pada slider yang tidak aktif.

Beri Inner Shadow dan Gradient Overlay.

Seperti inilah tampilan lingkaran yang diperoleh.

Langkah 19

Ctrl-klik lingkaran. Buat layer baru di atasnya, klik kanan dan pilih Stroke. Isikan Width: 1 px, warna putih, dan Location: Inside.

Langkah 20

Hapus bagian atas stroke lalu turunkan Opacity layer ke 20%. Ini akan memberi sedikit highlight pada lingkaran dan membuatnya terlihat lebih menonjol.

Langkah 21

Duplikasi lingkaran dengan cara menggesernya sambil menahan Alt. Kita akan menggunakan lingkaran ini sebagai penanda slide aktif.

Langkah 22

Buat lingkaran lebih kecil di dalam lingkaran.

Beri Drop Shadow dan Gradient Overlay.

Inilah hasil yang kita peroleh.

Langkah 23

Gandakan lingkaran penanda slide beberapa kali.

Langkah 24

Aktifkan tool pencil. Gunakan ukuran brush 1 px lalu lukis garis putih dan hitam. Masing-masing dengan Opacity 70% dan 10%.

Kombinasi kedua garis ini akan memberi efek garis inset.

Langkah 25

Simpan kedua garis ke dalam sebuah group layer. Beri layer mask lalu lukis hitam pada kedua ujung garis menggunakan brush besar dan lembut.

Hasil Akhir

Akhirnya, inilah tampilan slider yang kita peroleh. Anda bisa melihat dalam prosesnya bahwa kita tidak terlalu mengandalkan Layer Style. Kita lebih banyak menggambar secara manual untuk menghasilkan efek subtle.

Download Link

Related posts:

• Desain Web eCommerce Terinspirasi Groupon Lengkap dengan Slider jQuery
• Membuat Slider Gambar dengan Photoshop & JQuery
• Mendesain Blog Elegan dengan Photoshop
• Mendesain Halaman Depan Situs Perusahaan Secara Efektif
• Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel

Preview

Berikut adalah hasil akhir tombol yang diperoleh.

Sebagian Langkah dalam Tutorial

Tutorial sederhana membahas detail pembuatan tombol dengan pencahayaan menarik sehingga diperoleh kesan tampilan tiga dimensi.

Link Tutorial

Related posts:

• Membuat Situs Foto Minimalis dari PSD hingga HTML/CSS
• Mendesain Situs Portfolio Satu Halaman (PSD – HTML/CSS)
• Menangkan Buku “Panduan Lengkap Desain Web dari Photoshop hingga HTML”
• Membuat Tombol Download Glossy Berwarna Cerah (Plus Set Tombol Gratis)
• Menggambar Wacom Bamboo dari Wireframe Hingga Tampil Realistis

Preview

Berikut adalah tampilan desain web yang akan kita hasilkan. Klik gambar untuk melihatnya di perbesaran 100%.

Detail Tutorial

• Tingkat Kesulitan: Pemula, Menengah
• Software yang Digunakan: Adobe Photoshop
• Teknik yang Dipelajari: Penggunaan Tekstur, Membuat Tombol, Penggunaan Grid 960.
• Lama Pengerjaan: 30 menit

Resource yang Dibutuhkan

Untuk mengikuti tutorial ini, silakan ambil terlebih dahulu resource berikut:

• 26 Repeatable Pixel Patterns dari PSDfreemium
• Grid 960 dari Nathan Smith
• Font League Gothic dari The League of Moveable Type
• 3D Screenshots Display PSD – Part II dari Vandelay Premier
• This is Art vol. 3 dari WeGraphics

Tutorial

Langkah 1: Memilih Warna

Langkah pertama kita adalah menentukan tema warna yang akan digunakan. Ada banyak cara dalam memilih warna. Anda bisa mengambil dari komunitas misalnya dari colourlovr, menentukan sendiri, atau melalui software warna semacam ColorSchemer Studio. Di sini, saya menggunakan ColorSchemer Studio dan memilih warna menggunakan metode Split Complements. Split Complement terdiri dari satu warna utama dan dua warna samping. Kedua warna samping ini memiliki jarak yang sama di roda warna terhadap warna berseberangan dengan warna utama.

Langkah 2: Menyiapkan File

Ambil file grid 960 dari 960.gs. Buka file action (*.atn) di Photoshop. Di Photoshop, buka panel actions lalu klik ganda action 12 Column Grid.

Langkah 3

Ambil tool crop lalu buat bingkai crop menutupi semua bagian kanvas. Tahan alt lalu tarik sisi atas dan kanan hingga bingkai crop lebih besar dari ukuran kanvas. Tekan Ctrl + Enter unuk menjalankan proses cropping.

Langkah ini akan memperbesar ukuran kanvas secara merata ke semua arah.

Langkah 4

Tekan Ctrl + R untuk membuka penggaris. Klik dan geser dari penggaris horizontal ke tengah kanvas untuk membuat guide horizontal. Lakukan hingga kita memperoleh penanda area header, slider, quote, content, dan footer.

Silakan lihat hasil akhir layout situs ini untuk memahami pembagian areanya.

Langkah 5: Header

Mulai dengan membuat latar header. Buat sebuah persegi dengan warna #ca8548. Beri Pattern Overlay dengan pola pixel dari PSDfreemium.

Langkah 6: Logo

Kita buat logo sederhana saja, kombinasi teks dan shape. Beri Layer Style berikut.

Langkah 7: Menu Utama

Buat persegi hitam dengan Opacity 30% untuk latar menu utama.

Langkah 8

Tambahkan teks menu dengan penjelasan singkat di bawahnya. Di sini, saya menggunakan font League Gothic dan Letter Gothic Std.

Langkah 9

Buat garis putih 1 px dengan tool pencil lalu turunkan Opacity layer ke 30%. Hapus kedua ujungnya dengan tool eraser lembut. Gandakan garis ini dan simpan di antara setiap menu sebagai pemisah.

Langkah 10: Slider

Buat kotak dengan warna #35945a. Beri Layer Style berikut.

Di sini, Anda bisa melihat perbedaan latar sebelum dan setelah diberi Layer Style. Perbedaannya sangat sedikit, tapi dalam desain web ini berpengaruh besar. Ingat bahwa ini web bukan cetak! Kita bekerja dengan satuan pixel bukan centimeter, satu pixel sangat berpengaruh.

Langkah 11

Beri teks dengan Drop Shadow seperti berikut.

Langkah 12

Ambil file PSD Screenshot Web 3 Dimensi yang saya desain untuk Vandelay Premier. Anda bisa mengedit screenshot situs di dalam file PSD dengan mengikuti instruksi yang tersedia.

Langkah 13

Buat layer vektor terdiri dari dua segitiga bertumpukan dengan warna putih. Atur mode salah satu segitiga ini ke Subtract untuk memperoleh bentuk panah.

Beri layer style berikut.

Langkah 14

Turunkan Fill layer ke 30%.

Langkah 15

Buat juga panah yang sama di sisi sebelahnya.

Langkah 16: Quote

Buat persegi dengan warna #ca8548 untuk latar kutipan. Beri Pattern Overlay.

Berikut tampilan latar di perbesaran 100%.

Langkah 17

Brei teks kutipan menggunakan font League Gothic.

Beri Layer Style berikut.

Langkah 18

Buat shape rounded rectangle dengan warna #bd4469.

Beri layer style berikut.

Bentuk tombol yang diperoleh.

Langkah 19

Beri teks pada tombol.

Beri Layer Style berikut.

Langkah 20: Isi

Di bagian ini kita akan menyiapkan beberapa poin tentang perusahaan. Siapkan persegi dengan warna #df9c61 untuk latar.

Langkah 21

Buat layer baru di atas latar dan isi dengan putih. Klik Filter > Noise Add Noise.

Langkah 22

Ubah blend mode layer ke Multiply untuk menambahkan noise ringan pada latar. Di bawah Anda bisa melihat perbedaan latar sebelum dan setelah diberi noise.

Langkah 23

Buat layer baru dan turunkan Opacity-nya ke 10%. Ambil tool pencil lalu buat garis hitam dan putih 1 px, tepat di bagian atas latar. Di bawah Anda bisa melihat sebelum dan setelah pemberian detail garis 1 px.

Langkah 24

Buat poin penjelasan singkat disertai ikon di samping teks. Di sini, ikon yang digunakan adalah seri This is Art vol. 3 dari WeGraphics.

Langkah 25

Beri teks Drop Shadow dengan setting seperti di bawah agar lebih mudah dibaca.

Langkah 26

Ulangi proses ini hingga seperti terlihat di bawah.

Langkah 27: Footer

Buat persegi untuk latar footer dengan warna #bb8759.

Beri Layer Style berikut.

Di bawah adalah tampilan footer sebelum dan setelah diberi Layer Style.

Langkah 28

Akhirnya, tambahkan teks untuk link menu.

Hasil Akhir

Di bawah adalah hasil akhir desain web perusahaan yang kita peroleh. Klik gambar untuk melihatnya di perbesaran 100%. Saya harap Anda belajar satu atau dua teknik baru dari tutorial ini. Jika ada pertanyaan, silakan tanyakan di kolom komentar.

Download Link

Related posts:

• Mendesain Halaman Depan Situs Perusahaan Secara Efektif
• Mendesain Ikon Twitter 32×32 px — Pixel Perfect
• Membuat Latar Abstrak dengan Warna Pelangi
• Mendesain Blog Elegan dengan Photoshop
• Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop (Bagian 2)