Membuat Desain Web Minimalis Dengan Photoshop

Sudah lama saya ingin menulis tutorial tentang proses desain web dari awal hingga proses konversi ke HTML & CSS, dan Kali ini saya akan mengajak anda untuk membuat desain web minimalis dengan menggunakan Photoshop. Tutorial ini akan terus berlanjut sampai proses Slicing dan konversi ke HTML & CSS.

Berikut ini adalah desain web minimalis yang saya buat untuk tutorial ini:

Screenshot
Klik gambar untuk melihat ukuran yang lebih besar.

“Tutorial ini masuk ke dalam kategori menengah, Anda diharuskan mengetahui dasar-dasar penggunaan / mampu mengoperasikan Adobe Photoshop”

Persiapan

Sebelumnya saya sudah mempersiapkan beberapa file pendukung untuk pembuatan desain web yang akan kita kerjakan, diantaranya : Action men-generate grid dari 960.gs background pattern dari subtlepattern.com, font-font yang dibutuhkan dan beberapa icon yang saya dapatkan dari iconfinder.com. Untuk itu, Download resource di bawah ini sebelum memulai mendesain web dengan photoshop.

Download Resource

Install Action

Pertama-tama kita akan menginstall 2 buah file, satu untuk 960.gs dan pattern dari subtlepattern. Setelah anda download file resource, didalamnya terdapat 2 file yang bersangkutan, buka file tersebut dengan photoshop untuk menginstallnya (atau drag and drop ke jendela Photoshop).

Mempersiapkan Canvas Grid

Kita akan menggunakan sistem grid dari 960.gs sebagai acuan dalam proses pendesaian web yang akan kita kerjakan. Untuk itu dalam jendela action photoshop, Anda akan menemukan folder 960_GRIDS, klik pada action 12-Column-Grid lalu klik icon “play” untuk menjalankan action.

Generate 12 Kolom Grid

Action ini akan membuat grid sistem 12 kolom lengkap dengan garis guides. Canvas yang dibuat tidak cukup tinggi untuk desain web yang akan kita buat, jadi Klik menu image > image size. Kita akan menambah tinggi dari canvas yang kita buat.

Generated Grid

Hilangkan tanda Checklist pada “Constrain Proportion” dan Ubah ukuran tinggi menjadi 1100px klik ok untuk mulai merubah ukuran canvas.

Resize Image

Menyiapkan background

Klik dua kali pada layer background, sebuah dialog akan muncul mengkonfirmasi untuk mengconvert background ini menjadi layer, beri nama background dan klik ok.

Layer from background

Kita akan menambahkan pattern pada layer background ini, Klik icon “Add Layer Styles”, lalu pilih “Pattern Overlay…” Pilih pattern dengan nama “Groove Paper” (akan ada di item pattern paling akhir). Klik Ok untuk menutup dialog Style dan kini anda memiliki background dengan pattern halus.

Add Pattern
Pattern

Membuat Logo

Selanjutnya kita akan membuat logo “Simpel”. Klik Ellipse Tool, lalu buatlah lingkaran kecil seperti berikut (kira-kira satu grid) dengan warna #69ccca dan ubah nama layer menjadi “logo” (double click nama layer untuk merubah nama layer):

Buat lingkaran

Aktifkan “Horizontal Type Tool (T)” ubah font menjadi “Museo Sans” dengan ukuran sedikit lebih besar dari lingkaran yang dibuat sebelumnya dan posisikan di tengah lingkaran seperti pada gambar.

Tambahkan huruf S

Klik kanan layer “S” lalu pilih Convert to shape.

Convert to shape

Pindah ke Tab Paths lalu klik layer yang ada (S Vector Mask), dan tekan kombinasi tombol Ctrl+C untuk mengcopy shape.

Copy Path

Klik layer pada “Layer Mask Thumbnail” pada layer “Logo”, lalu tekan tombol CTRL+V untuk mem-paste shape. lalu Klik icon “Substract from shape area”. Sekarang anda dapat menghapus layer “S” karena tidak dibutuhkan lagi

Substract
Result substract

Klik pada layer logo, klik icon “Add layer style” lalu tambahkan “Gradient Overlay”, atur optionnya seperti berikut :

Gradient Overlays
Gradient Colors

Tambahkan juga sedikit Inner shadow :

Teknik ini membuat icon yang kita buat “resizable” tanpa membuat icon pecah. Tambahkan teks “impel”(font:Museo Slab; color:#69CCCA, size:48px) dan “Web Development Team” (Font: Georgia, style: Italic, warna #69CCCA, size:12px) atur posisinya seperti berikut.

Add details

Copy juga layer style yang ada pada layer logo dan paste pada “impel” dan “Web Development Team”

Membuat menu

Kita tambahkan menu utama untuk web kita, menu ini sederhana saja, hanyalah sederet teks biasa. buat menu menggunakan “Horizontal Type Tool (Tool)” atur warnanya menjadi #69CCCA, size:16px. Ketikkan “Home Blog Contact us” dan atur posisinya seperti berikut.

adding menu

Membuat area Konten Utama

Tahap selanjutnya kita akan membuat background untuk Konten Utama. Dengan menggunakan “Rectangle Tool (U)” buatlah sebuah persegi panjang dengan lebar 960px (dari garis guide terawal hingga terakhir) untuk tinggi disesuaikan, Ubah nama layer menjadi “Konten Utama”.

area konten utama

Tambahkan layer style stroke dengan warna #e0e0e0, atur optionsnya seperti berikut

Tambahkan juga drop shadow dengan setting seperti berikut:




Membuat pattern untuk ornamen

Untuk mempercantik area konten utama ini, kita akan memberikan sedikit ornamen sederhana. Buat file baru (Ctrl+N) buat ukuran canvas menjadi 200px*30px.

Membuat file baru

Aktifkan “Rectangle Tool (U)” buat sebuah persegi panjang dengan ukuran 50px dan tinggi 30px. Buat 3 persegi panjang lagi dan susun secara mendatar sehingga memenuhi seluruh canvas.

tambahkan 4 kotak

Ubah warna masing-masing persegi panjang dengan warna-warna berikut : #88CD50, #F4ED47, #E7913A dan #6BCFCD.

Penambahan warna

Terakhir kita akan membuat canvas ini menjadi pattern siap pakai, pertama-tama seleksi semua persegi panjang yang kita buat (tekan CTRL dan klik pada layer lain untuk multiple selection) tekan kombinasi tombol CTRL+E untuk menggabungkan Layer.

merge layer

Terakhir Klik menu “Edit > Define Pattern”, beri nama “Colorful Stripe”.

define pattern

Anda bisa menutup dokumen ini karena sudah tidak diperlukan lagi, atau save jika anda memerlukannya.

Menambahkan Ornamen/Stripe

Kembali aktifkan window desain web kita sebelumnya, Untuk menambahkan ornamen, buat persegi panjang dengan “Rectangle Tool (U)” seperti gambar berikut :

Add rectangle for stripe

Pastikan layer persegi ini tepat berada di atas layer “Konten Utama”, Klik kanan pada layer tersebut lalu pilih “Create Clipping Mask” atur posisinya seperti berikut :

Clipping Mask

Klik icon “Add Layer Styles” lalu pilih “Pattern Overlay”, pilih pattern yang kita buat sebelumnya (Pattern paling akhir-biasanya).

ornamen sederhana

Menyiapkan background untuk footer

Buat persegi panjang dan atur posisinya seperti berikut, pastikan layer ini berada di atas layer “Konten Utama” lalu buat clipping mask seperti pada langkah sebelumnya :

Add footer background

Tambahkan “Pattern Overlay” dengan pattern “Chruch”.

Pattern on footer

Kita akan memodifikasi bagian tengah dari persegi panjang. Aktifkan “Add Anchor Point Tool” tambahkan tiga buah point tepat di tengah-tengah seperti berikut :

Adding Point

Aktifkan “Direct Select Tool” lalu tarik point yang di tengah sedikit ke bawah sehingga membentuk segi tiga. Secara default bentuk shape menjadi lengkung, untuk menghilangkan lengkungan tersebut, aktifkan “Convert Point Tool”, lalu klik pada tiga point tersebut.

Move Point
Convert Point

Tambahkan Style Inner Shadow, atur optionsnya seperti berikut :

Add Inner Shadow

Mengisi Konten

Selanjutnya kita akan mengisi area konten ini dengan beberapa element yakni, Heading, Fitur-fitur, Slider dan Testimoni/Quote.

Heading

Tambahkan teks heading dengan font:”Museo”, warna #248886, ukuran font: 26px. Ketikkan “We are a professional web developer & web designer team, and here is what we can do for you” (atau gunakan teks sendiri), buat rata tengah dan atur posisinya seperti berikut:

Add Heading text

Fitur

Kita tambahkan 3 fitur, lebar dari masing-masing fitur adalah 4 Grid (jadi pastikan konten untuk tiap fitur tidak melebihi 4 grid). Tambahkan 3 icon yang disertakan dalam file resource, atur posisinya seperti berikut:

Add icons

Tambahkan judul fitur “Unique & Elegance Design”, “HTML5 & CSS3 Templating”, dan “WordPress Theme Development”. Atur font menjadi “Museo”, warna #248886 dan ukuran 16px.

Add Feature Title

Tambahkan teks deskripsi singkat, anda dapat menggunakan deskripsi anda sendiri atau deskripsi acak seperti : “Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies”. atur posisinya seperti berikut, dan atur font-nya menjadi: “arial”, warna:#555555, ukuran:11px :

Add Feature Description

Kita tambahkan state ketika salah satu fitur berada dalam posisi hover, dengan menggunakan Ellipse tools buatlah lingkaran dengan ukurang 4 grid (tekan SHIFT ketika membuat lingkaran untuk membuat lingkaran yang proposional). Ubah warnanya menjadi #B6FAF9 dan atur posisinya di salah satu fitur sebagai background.

Hover state for feature

Membuat Bayangan Pemisah

Garis pemisah yang akan kita tambahkan berupa shadow/bayangan halus. Untuk membuatnya pertama-tama buat layer baru, beri nama “shadow-separator”. Aktifkan Brush Tool, pastikan warnanya hitam, Klik kanan pada canvas dan ubah ukuran master diameter mejadi 700px, pilih type “Soft Round 27px”.

Set Brush size and type

Klik pada canvas, tepat ditengah-tengah. Aktifkan “Marque selection Tool”, buat seleksi menutup 3/4 lingkaran lalu tekan tombol delete.

Add on click bruhs
Select 3/4 Area
Delete 3/4 selected area

Dengan menggunakan “Move Tool (V)”, resize shadow tersebut menjadi seperti berikut dan ubah nilai opacity menjadi 50%.

Resize Shadow

Slider

Slider ini akan menampilkan Slideshow (bisa diisi dengan screenshot-screenshot project yang telah dikerjakan). Tambahkan Judul “Our latest projects”, atur ukuran dan warnanya sesuai dengan heading yang kita buat sebelumnya.

Add Slider Title

Buat sebuah persegi panjang dengan lebar 6 Grid dan tinggi kira-kira 200px dengan Rectangle Tool

Tambahkan beberapa style seperti gambar berikut:

Add Drop Shadow
Add Stroke

Testimoni/Quote

Untuk Testimoni kita akan menampilkan testimoni-testimoni dari client yang telah dilayani. Judul dengan ukuran sama dengan Heading “What they say”.

Quote Title

Tambahkan, satu buah quote atau gunakan teks acak “Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies”. Ubah font menjadi :Georgia, style:italic, color #555, size:20px atur posisinya seperti berikut.

Quote Position

Footer

Untuk bagian footer, kita akan menambahkan logo beserta alamat kantor, dan di sebelah kanan kita tambahkan menu lagi. Copy layer “logo” dan teks “imple”, buang Gradient overlay (dengan cara di unchecklist atau di drag ke tong sampah di jendela layer), ubah warnanya menjadi #A7A7A7 dan perkecil ukurannya sedikit.

Footer logo

Tambahkan teks alamat dengan font:arial, size:11px, color:#a7a7a7 dan atur posisinya seperti berikut:

Add an Address

Tambahkan menu footer dan atur posisinya di sebelah kanan :

Add Footer menu

Mengorganisasi Layer

Jika anda tidak melakukan organisasi layer, mungkin hal ini tidak masalah bagi anda, namun bagaimana jika anda bekerja dengan team dan bukan anda yang melakukan proses slicing? mereka akan kebingungan dengan layer yang acak-acakan. Untuk itu, selalu organisasi layer anda sesuai dengan bagian-bagian yang ada dengan memasukkannya ke dalam folder/set yang bersangkutan.

Klik icon “Create a New Set” (icon bergambar folder yang terdapat di bawah layer window) untuk membuat folder lalu klik dan drag tiap-tiap layer yang bersangkutan pada folder yang sesuai.

Berikut ini adalah organisasi folder yang saya lakukan:

Organized Layer

Finising

Jika anda belum menyimpan pekerjaan anda, segera save. Lakukan penyimpanan secara berkala untuk menghindari hal-hal yang tidak diinginkan mengingat listrik di negara kita sering idup mati :D. Berikut ini link download file PSD dari apa yang anda kerjakan di atas.

Download PSD

Kesimpulan

Pada tutorial ini Anda telah membuat desain halaman Utama (homepage). Anda bisa berlatih dengan mengembangkan desain yang sudah ada untuk halaman portfolio, blog dan contact.
Jika anda kesulitan atau ada yang ingin ditanyakan, jangan sungkan untuk meninggalkan pertanyaan/komentar anda pada box komentar di bawah.

Dalam kategori berbeda (HTML & CSS), kita akan belajar mengkonversi Desain yang kita buat ini menjadi HTML & CSS, jadi selalu kunjungi blognya atau Like page ariona.net, Follow twitter dan berlangganan artikel (Form ada di sidebar). πŸ™‚

Category PhotoshopTag , ,

21 Komentar untuk “Membuat Desain Web Minimalis Dengan Photoshop

  1. kenapa kebanyakaan tutorial hanya membahas tampilan index/home nya saja ? selanjutnya untuk menu menu lain bagaimana bang ?tolong dong sekalian di bahas meengenai pembuatan profil,portfolio,dll yg ada di menu nya ,.,.

  2. kalo mau buat halaman input dengan “” pegawai, yang terdapat dua input dengan 1 pertama mempengaruhi input kedua,, misal input 1 pns dan honorer, bila kita pilih honorer input 2 (jabatan) diblok (tidak bisa diisi). tmohon bantuannya. terima kasih

  3. Selanjutnya gimana mas, biar desain menu utama itu berfungsi? misal jika klik “Home Blog Contact us” merujuk ke halaman blog wordpress.com kita??
    Terima kasih ilmunya

  4. mas, setelah saya belajar konversi html – wordpress ( dari ariona.net juga ), saya baru mau belajar psd – html, tapi saya blm punya photoshop. ada link untuk downloadnya? ( saya cari di google kebanyakan filenya corrupt 😐 ) thx πŸ™‚

Tinggalkan Komentar Anda