Membuat Desain Web Minimalis Dengan Photoshop

Persiapan
jasa pembuatan website company profile - Sebelumnya saya telah menyiapkan beberapa file pendukung untuk pembuatan design situs yang juga akan kita lakukan, salah satunya : Action men-generate grid dari 960. gs latar belakang pattern dari subtlepattern. com, font-font yang diperlukan dan beberapa icon yang saya peroleh dari iconfinder. com. Karenanya, Unduh resource berikut ini sebelumnya mulai mendesain situs dengan photoshop.

Unduh Resource
Install Action
Pertama-tama kita juga akan meng-install 2 buah file, satu untuk 960. gs dan pattern dari subtlepattern. Setelah kamu unduh file resource, didalamnya terdapat 2 file yang berkaitan, buka file itu dengan photoshop untuk menginstallnya (atau drag and drop ke jendela Photoshop).

Menyiapkan Canvas Grid
Kita juga akan memakai system grid dari 960. gs jadi referensi dalam sistem pendesaian situs yang juga akan kita lakukan. Karenanya dalam jendela action photoshop, Kamu juga akan temukan folder 960_GRIDS, click pada action 12-Column-Grid lalu click icon “play” untuk menggerakkan action.

Generate 12 Kolom Grid
Action ini juga akan buat grid system 12 kolom lengkap dengan garis guides. Canvas yang di buat kurang tinggi untuk design situs yang juga akan kita buat, jadi Click menu image image size. Kita juga akan menaikkan tinggi dari canvas yang kita buat.

Generated Grid
Menghilangkan sinyal Checklist pada “Constrain Proportion” dan Ganti ukuran tinggi jadi 1100px click ok untuk mulai mengubah ukuran canvas.

Resize Image
Mempersiapkan latar belakang
Click 2 x pada layer latar belakang, sebuah dialog juga akan keluar mengkonfirmasi untuk mengconvert latar belakang ini jadi layer, berikan nama latar belakang dan click ok.

Layer from latar belakang
Kita juga akan memberikan pattern pada layer latar belakang ini, Click icon “Add Layer Models”, lalu pilih “Pattern Overlay…” Pilih pattern dengan nama “Groove Paper” (juga akan berada di item pattern terakhir). Click Ok untuk tutup dialog Model dan saat ini kamu memiliki latar belakang dengan pattern halus.

Lihat juga : harga jasa pembuatan website

Add Pattern
Pattern
Buat Logo
Setelah itu kita juga akan buat logo “Simpel”. Click Ellipse Tool, lalu buat lingkaran kecil sebagai berikut (kurang lebih satu grid) dengan warna #69ccca dan ganti nama layer jadi “logo” (double click nama layer untuk mengubah nama layer) :

Buat lingkaran
Aktifkan “Horizontal Tipe Tool (T) ” ganti font jadi “Museo Sans” dengan ukuran sedikit semakin besar dari lingkaran yang di buat sebelumnya dan tempatkan di dalam lingkaran seperti pada gambar.

Berikan huruf S
Click kanan layer “S” lalu pilih Convert to shape.

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

Copy Path
Click layer pada “Layer Mask Thumbnail” pada layer “Logo”, lalu tekan tombol CTRL+V untuk mem-paste shape. lalu Click icon “Substract from shape area”. Saat ini kamu dapat menghapus layer “S” karena tidak diperlukan lagi

Substract
Result substract
Click pada layer logo, click icon “Add layer model” lalu berikan “Gradient Overlay”, atur optionnya sebagai berikut :

Gradient Overlays
Gradient Colors
Berikan juga sedikit Inner shadow :

Tehnik ini buat icon yang kita buat “resizable” tanpa ada buat icon pecah. Berikan teks “impel” (font : Museo Slab ; color : #69CCCA, size : 48px) dan “Web Development Tim” (Font : Georgia, model : Italic, warna #69CCCA, size : 12px) atur tempatnya sebagai berikut.

Add details
Copy juga layer model yang ada pada layer logo dan paste pada “impel” dan “Web Development Tim”

Buat menu
Kita berikan menu utama untuk situs kita, menu ini simpel saja, hanya sederet teks umum. buat menu memakai “Horizontal Tipe Tool (Tool) ” atur warnanya jadi #69CCCA, size : 16px. Ketikkan “Home Situs (blog) Kontak us” dan atur tempatnya sebagai berikut.

adding menu
Buat ruang Content Utama
Step setelah itu kita juga akan buat latar belakang untuk Content Utama. Dengan memakai “Rectangle Tool (U) ” buat sebuah persegi panjang dengan lebar 960px (dari garis guide terawal sampai paling akhir) untuk tinggi sesuai, Ganti nama layer jadi “Konten Utama”.

Berikan juga drop shadow dengan setting sebagai berikut :

Buat pattern untuk ornamen
Untuk membuat cantik ruang content utama ini, kita juga akan memberi sedikit ornament simpel. Buat file baru (Ctrl+N) buat ukuran canvas jadi 200px*30px.

Buat file baru
Aktifkan “Rectangle Tool (U) ” buat sebuah persegi panjang dengan ukuran 50px dan tinggi 30px. Buat 3 persegi panjang sekali lagi dan susun dengan mendatar hingga penuhi semua canvas.

berikan 4 kotak
Ganti warna semasing persegi panjang dengan beberapa warna berikut : #88CD50, #F4ED47, #E7913A dan #6BCFCD.

Menambahkan warna
Paling akhir kita juga akan buat canvas ini jadi pattern siap gunakan, pertama-tama seleksi semua persegi panjang yang kita buat (tekan CTRL dan click pada layer beda untuk multiple selection) tekan gabungan tombol CTRL+E untuk memadukan Layer.

merge layer
Paling akhir Click menu “Edit Define Pattern”, berikan nama “Colorful Stripe”.

define pattern
Kamu dapat tutup dokumen ini karena telah tidak diperlukan sekali lagi, atau save bila kamu memerlukannya.

Memberikan Ornament/Stripe
Kembali aktifkan window design situs kita sebelumnya, Untuk memberikan ornament, buat persegi panjang dengan “Rectangle Tool (U) ” seperti gambar berikut :

Add rectangle for stripe
Pastikan layer persegi ini tepat berada diatas layer “Konten Utama”, Click kanan pada layer itu lalu pilih “Create Clipping Mask” atur tempatnya sebagai berikut :

Clipping Mask
Click icon “Add Layer Models” lalu pilih “Pattern Overlay”, pilih pattern yang kita buat sebelumnya (Pattern paling akhir-biasanya).

Mempersiapkan latar belakang untuk footer
Buat persegi panjang dan atur tempatnya sebagai berikut, pastikan layer ini berada diatas layer “Konten Utama” lalu buat clipping mask seperti pada langkah sebelumnya :

Add footer latar belakang
Berikan “Pattern Overlay” dengan pattern “Chruch”.

Pattern on footer
Kita juga akan memodifikasi bagian tengah dari persegi panjang. Aktifkan “Add Anchor Point Tool” berikan tiga buah point tepat di tengahnya sebagai berikut :

Adding Point
Aktifkan “Direct Select Tool” lalu tarik point yang di dalam sedikit ke bawah hingga membuat sisi tiga. Dengan default bentuk shape jadi lengkung, untuk menyingkirkan lengkungan itu, aktifkan “Convert Point Tool”, lalu click pada tiga point itu.

Move Point
Convert Point
Berikan Model Inner Shadow, atur optionsnya sebagai berikut :

Add Inner Shadow
Isi Konten
Setelah itu kita juga akan isi ruang content ini dengan beberapa element yaitu, Heading, Fitur-fitur, Slider dan Testimoni/Quote.

Heading
Berikan teks heading dengan font : ”Museo”, warna #248886, ukuran font : 26px. Ketikkan “We are a professional situs developer & situs designer tim, and here is what we can do for you” (atau pakai teks sendiri), buat rata tengah dan atur tempatnya sebagai berikut :

Add Heading text
Fitur
Kita berikan 3 feature, lebar dari semasing feature yaitu 4 Grid (jadi pastikan content untuk setiap feature tidak lebih dari 4 grid). Berikan 3 icon yang diikutkan dalam file resource, atur tempatnya sebagai berikut :

Add icons
Berikan judul feature “Unique & Menawance Design”, “HTML5 & CSS3 Templating”, dan “WordPress Theme Development”. Atur font jadi “Museo”, warna #248886 dan ukuran 16px.

Add Fitur Title
Berikan teks gambaran singkat, kamu dapat memakai gambaran kamu sendiri atau gambaran acak seperti : “Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies”. atur tempatnya sebagai berikut, dan atur font-nya jadi : “arial”, warna : #555555, ukuran : 11px :

Add Fitur Description
Kita berikan state ketika salah satu feature berada dalam tempat hover, dengan memakai Ellipse tools buat lingkaran dengan ukurang 4 grid (tekan SHIFT ketika buat lingkaran untuk buat lingkaran yang proposional). Ganti warnanya jadi #B6FAF9 dan atur tempatnya di salah satu feature jadi latar belakang.

Hover state for fitur
Buat Bayangan Pemisah
Garis pemisah yang juga akan kita berikan berbentuk shadow/bayangan halus. Untuk membuatnya pertama-tama buat layer baru, berikan nama “shadow-separator”. Aktifkan Brush Tool, pastikan warnanya hitam, Click kanan pada canvas dan ganti ukuran master diameter mejadi 700px, pilih tipe “Soft Round 27px”.

Set Brush size and tipe
Click pada canvas, tepat ditengahnya. Aktifkan “Marque selection Tool”, buat seleksi tutup 3/4 lingkaran lalu tekan tombol delete.

Add on click bruhs
Select 3/4 Area
Delete 3/4 selected area
Dengan memakai “Move Tool (V) ”, resize shadow itu jadi sebagai berikut dan ganti nilai opacity jadi 50%.

Resize Shadow
Slider
Slider ini juga akan menghadirkan Slideshow (dapat berisi screenshot-screenshot proyek yang sudah ditangani). Berikan Judul “Our latest proyeks”, atur ukuran dan warnanya sesuai sama heading yang kita buat sebelumnya.

Add Slider Title
Buat sebuah persegi panjang dengan lebar 6 Grid dan tinggi kurang lebih 200px dengan Rectangle Tool

Berikan beberapa model seperti gambar berikut :

Add Drop Shadow
Add Stroke
Testimoni/Quote
Untuk Testimoni kita juga akan menghadirkan testimoni-testimoni dari client yang sudah dilayani. Judul dengan ukuran sama juga dengan Heading “What they say”.

Quote Title
Berikan, satu buah quote atau pakai teks acak “Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies”. Ganti font jadi : Georgia, model : italic, color #555, size : 20px atur tempatnya sebagai berikut.

Quote Position
Footer
Untuk bagian footer, kita juga akan memberikan logo bersama alamat kantor, dan di samping kanan kita berikan menu sekali lagi. Copy layer “logo” dan teks “imple”, buang Gradient overlay (lewat cara di unchecklist atau di drag ke tong sampah di jendela layer), ganti warnanya jadi #A7A7A7 dan perkecil ukurannya sedikit.

Footer logo
Berikan teks alamat dengan font : arial, size : 11px, color : #a7a7a7 dan atur tempatnya sebagai berikut :

Add an Address
Berikan menu footer dan atur tempatnya di samping kanan :

Add Footer menu
Mengorganisasi Layer
Bila kamu tidak melakukan organisasi layer, mungkin hal semacam ini tidak jadi masalah untuk kamu, tetapi bagaimana bila kamu bekerja dengan tim dan bukanlah kamu yang melakukan sistem slicing? mereka juga akan kebingungan dengan layer yang berantakan. Karenanya, senantiasa organisasi layer kamu sesuai sama bagian-bagian yang ada dengan memasukkannya kedalam folder/set yang berkaitan.

Click icon “Create a New Set” (icon bergambar folder yang terdapat dibawah layer window) untuk buat folder lalu click dan drag masing-masing layer yang berkaitan pada folder yang sesuai.

Berikut ini yaitu organisasi folder yang saya kerjakan :

• Organized Layer 
• Finising 

Bila kamu belum juga menaruh pekerjaan kamu, selekasnya save. Kerjakan penyimpanan dengan berkala untuk hindari beberapa hal yg tidak dikehendaki mengingat listrik di negara kita sering idup mati : D. Berikut ini link unduh file PSD dari apa yang kamu lakukan diatas.