Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Complete Websites

Membuat Desain Website yang Gelap dan Bersih pada Adobe Photoshop

by
Read Time:11 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Baba Baddolo (you can also view the original English article)

Pada tutorial kali ini kita akan mempelajari bagaimana mendesain website yang gelap dan bersih menggunakan Adobe Photoshop.  Selama tutorial ini, kita akan bekerja dengan: berbagai bentuk sederhana (persegi, garis, panah, dll), style layer, pola, importasi, dan model paragraph, serta banyak teknik desain Photoshop lainnya yang dapat Anda adaptasi pada alur kerja antarmuka desain Website Anda.

Tutorial yang Dipublikasikan Ulang

Setiap beberapa pecan, kami mengunjungi kembali beberapa post favorit pembaca dari seluruh riwyat situs.  Tutorial ini pertama kali terbit dipublikasikan pada Desember 2010.


Tentang Penulis

Julian Chaniolleau, juga dikenal sebagai Devilcantburn, adalah desainer grafis dan web freelance. Dia juga merupakan seorang author pada ThemeForest, dengan template seperti 96Display atau Stereonline, Anda dapat juga menemukan banyak hasil kerja lainnya pada devilcantburn.com.

Desain ini adalah sebuah contoh yang hebat dari style unik Julian: gelap, tetapi juga cukup menarik untuk digunakan pada situs bisnis. Anda dapat melihat lebih banyak desain Julian pada profil ThemeForest-nya, DevilCantBurn. Anda dapat melihat lebih banyak desain Julian pada profil ThemeForest-nya, DevilCantBurn.

Mari mulai!


Langkah 1: Mengatur Dokumen

Mulai dengan membuat sebuah dokumen baru pada Photoshop dengan ukuran 1200x1600px.  Pastikan resolusi Anda diatur pada 72 pixel/inci dan latar belakang Anda diatur menjadi putih.  Kita perlu membuka kunci (unlock) layer latar belakang sehingga kita dapat menambahkan beberapa style pada layer. Klik kanan latar belakang dan pilihlah “Layer from Background”.  Anda kemudian dapat mengubah nama layer belakang menjadi background/latar belakang..

Isilah latar belakang dengan warna #101010.

Sekarang buatlah panduan ebrikut ini (Menu > View > New guide...):

  • 120px vertical 
  • 600px vertical 
  • 1080px vertical

Sekarang Anda memiliki garis tepid an tengah pada area antarmuka.


Langkah 2: Organisir Grup Anda

Pengaturan susunan sangatlah penting pada alur kerja saya peribadi—jadi langkah selanjutnya adalah untuk memulai membuat Layer Group kita.  Mulai menjadi rapi adalah hal yang penting karena satu alasan utama: proyek website besar kebanyakan berakhir dengan terlalu banyak layer, sehingga jika Anda tidak mulai dengan mengorganisir sejak dalam pikiran, akan sangat mudah untuk Anda kemudian tersesat jika Anda tidak menyediakan waktu untuk mengelompokkan elemen ke dalam beberapa “folder” dan mejaga setiap folder dinamai dengan tepat.

Pada panel Layer, klik ikon untuk membuat folder baru, klik dua kali pada nama folder untuk mengubah namanya.  Lakukan hal yang sama untuk semua folder.

Dark Web Design

Folder utama yang kita inginkan adalah:

  • Header
  • Slider
  • Main 
  • Footer
Dark Web Design

Langkah 3: Membuat Sebuah Header

Pilihlah folder “header” pada panel Layer.  Kemudian, pilihlah rectalnge tool dari area Vector Shapes toolbar:

Dark Web Design

Gambarlah sebuah persegi.  Ubah namanya menjadi seperti “Top bar bg”.  Lakukan Ctrl+T atau Cmd+T (Mac) dan atur property dengan lebar 1200px dan tinggi 10px.

Dark Web DesignDark Web DesignDark Web Design

Sekarang mari muali dengan menambahkan beberapa styling sederhana; klik ganda pada thumbnail berwarna pada panel layer untuk mengatur warna menjadi #252525.  Klik ganda pada layer untuk mengatur layer FX menjadi seperti ini:

Dark Web Design
“Inner Shadow” ini akan menambahkan efek garis tepi pada bagian dasar persegi ini- hal ini penting untuk memisahkannya dari desain header lainnya.

Langkah 4: Membuat Menu

Buatlah folder baru bernama “Top Menu” pada grup HEADER.

Gambarlah sebuah persegi.  Ubahlah namanya menjadi “Top Menu bg”.  Lakukan CTLR+T atau Apple+T dan atur properti seperti “Top Bar bg” tetapi dengan ketinggian 90px dan 10px pada sumbu Y.  sehingga persegi ini akan berada di bawah layer “Top bar bg” pada panel Layer.

Dark Web DesignDark Web DesignDark Web Design

Buatlah teks menu item seperti yang Anda butuhkan.  Saya menggunakan font “Droid Serif”, untuk membuat menu, tetapi Anda dapat menggunakan jenis huruf apapun yang Anda sukai.  Posisikan pada 20px dari kanan garis pandu.

Dark Web DesignDark Web DesignDark Web Design

Saya meletakkan 4 “spasi” (tekan spacebar 3x) antar masing-masing item dan ukuran font adalah 18px.


Langkah 5: Letakkan Logo

Buatlah sebuah folder baru bernama “Top Logo” pada grup HEADER untuk semua grup.  Pilihlah dan pergi ke Menu > Files > Import.  Pada folder sumber saya memasukkan sebuah logo sample bernama “logo_zombie.psd”.  pilihlah kemudian letakkan pada 130px dari kiri dan 5px dari atas.

Anda dapat menambahkan style FX baru pada logo ini sesuai kebutuhan.


Langkah 6: Membuat Slider

Pilihlah grup SLIDER dan buatlah sebuah persegi seperti pada langkah 3 dan atur property dengan tinggi 400px dan 100px pada sumbu Y.

Ubahlah menajdi “Gradient” dan klik dua kali pada thumbnail berwarna pada panel layer untuk mengatur warna menjadi #77b400.  Klik ganda pada layer untuk mengatur layer FX seperti berikut ini:

Dark Web Design

Gradient Black (#00000) dengan opacity pada 100% menjadi Black dengan opactity pada 0.

Dark Web DesignDark Web DesignDark Web Design

Sekarang, harusnya Anda akan mendapatkan desain seperti ini:

Dark Web DesignDark Web DesignDark Web Design

Strategi menambahkan “gradien bayangan” ini daripada menggunakan warna yang telah fix penting, karena ha ini akan membuat kita dapat dengan mudah mengubah warnanya kelak dengan mengatur warna dasar persegi.

Selanjutnya, buatlah sebuah folder baru bernama “slider_block”.  Buatlah sebuah persegi (dengan Vector Tools (U) seperti biasanya) pada grup ini yang bernama “Transparency”.

Dark Web DesignDark Web DesignDark Web Design

Posisikan dengan nilai tersebut: klik ganda pada layer di panel layer untuk membuka opsi layer FX. Kemudian atur menjadi seperti ini: 

Dark Web DesignDark Web DesignDark Web Design

Gandakan layer “Transparency”, hilangkan opsi FX Layer dan namai “picture area”.
Atur opacity latar belakang menjadi 100% dan ubah ukurannya dengan nilai ini untuk membuat efek multi-layer:

Dark Web DesignDark Web DesignDark Web Design

Langkah 7: Membuat Elemen Kontrol Slider

Buatlah sebuah dokumen baru 100px x 100px.  Pilihlah Custom Vector Shape (U) dari tool bar dan klik kanan pada dokumen untuk membuka daftar bentuk vektor custom.  Untuk membuat panah, saya akan mulai dengan bentuk panah default, dan kemudian kita atur:

Dark Web Design

Buatlah bentuknya dengan luas sekitar 50px.  Namai layer dengan “Arrow slider”.  Kemudian ubah bentuk sesuai kebutuhan Anda… dengan tool panah putih (A), Anda dapat mengatur jalur vektor untuk membuat panah Anda sendiri…

Dark Web DesignDark Web DesignDark Web Design

Letakkan Layer FX pada layer dengan pengaturan berikut:

Dark Web DesignDark Web DesignDark Web Design

Hapus latar belakang dari dokumen ini dan simpanlah dokumen sebagai: ArrowSlider.psd pada folder PSD.

Letakkan panah ini pada grup “slider_block”.  Untuk melakukannya, Menu > File > Import… 
Pilihlah ArrowSlider.psd dan letakkan pada posisi yang Anda inginkan di samping slider.

Dark Web Design

Gandakan layer panah (Ctrl+J atau Cmd+J) untuk membuat panah kiri dan posisikan. 
Gunakan Menu > Edit > Transform > Rotate in horizontal axis untuk memutar panah kea rah yang diinginkan.


Langkah 8: Highlight Slider

Sembunyikan grup “slider_block”. 
Buatlah sebuah layer kosong baru, dan gunakan Circle Selection Tool (M) untuk membuat sebuah lingkaran sekitar 200px.
Isilah dengan warna putih.

Dark Web Design

Lepaskan pilihan Anda, kemudian gunakan Filter > Gaussian Blur dan atur menjadi 50px.

Dark Web DesignDark Web DesignDark Web Design

Atur perpaduan layer pada “overlay” dan pindahkan ke atas slider. 
Gandakan layer ini dua kli dan posisikan layer pada bagian bawah slider di kiri dan kanan…

Dark Web DesignDark Web DesignDark Web Design

Langkah 9: Tingkatkan Slider

Gandakan layer “gradient” dan ubahlah namanya menjadi “dark bar”.   Kurangi tingginya menjadi 20px dan letakkan pada bagian bawah layer “gradient”.

Dark Web Design

Ubah warna layer menjadi Black/hitam bukan warna gradien dan atur opacity/kegelapan latar belakang layer pada 60%.
Klik ganda untuk membuka opsi layer FX dan buatlah sebuah dropshadow dan innershadow seperti berikut ini: 

Dark Web DesignDark Web DesignDark Web Design
Dark Web DesignDark Web DesignDark Web Design

Pindahkan layer 1px ke bawah 
Sekarang Anda mendapatkan garis yang ter-highlight dengan baik antara slider dan latar belakang hitam.

Dark Web Design

Langkah 10: Membuat Slider Melayang!

Bukalah file background.jpg dari folder sumber (dari file yang telah Anda unduh) dan pergilah ke Menu > Edit > Define Pattern… kemudian tutup file. 
Sekarang pilih layer latar belakang dan klik ganda untuk membuk opsi layer FX dan klik tab Patterns.  Di sini, pilihlah latar belakang baru Anda, dibuat. 

Sekarang pilihlah layer Transparency (Ctrl+klik atau Cmd+klik pada layer). 
Buatlah sebuah layer baru bernama “Shadow” dan letakkan di bawah layer “Transparency”. 
isilah dengan warna hitam dan tambahkan Gaussian Blur. 
Menu > Filters > Blurs > Gaussian Blur... dan buatlah dengan panjang 20px. 
Sekarang ubah untuk membuatnya menjadi seperti dropshadow....

Dark Web DesignDark Web DesignDark Web Design

Sekali lagi, gunakan Menu > Filters > Blurs > Gaussian Blur... Tetapi sekarang dengan panjang 5px.
sekarang ubah lagi untuk mendapatkan ukuran yang cocok dengan layer transparency…

Dark Web Design

Tetap pilih layer “Shadow” dan ambillah layer pilihan “Transparency” (Ctrl+klik atau Cmd+klik pada layer di panel layer).

Sekarang, balikkan pilihan Ctrl+I atau Cmd+I dan klik pada ikon untuk membuat masker kegelapan pada layer “Shadow”. Bayangannya sekarang tersembunyi di belakang area transparency.

Dark Web DesignDark Web DesignDark Web Design

Lagnkah 11: Meningkatkan Logo

Sebelum kita berlanjut pada bagian utama, kita akan meningkatkan lgo terlebih dahulu untuk membuatnya lebih dinamis.

Buatlah sebuah layer kosong baru di bawah layer logo dan naai “shadow logo”. Pilihlah layer logo dan isilah layer “shadow logo” dengan warna hitam.

Tambahkan Gaussian Blur dengan panjang 1,5px.
Ubah. Ctrl+T atau Cmd+T untuk mengubahnya, pindahkan pada poin pengarah pada bagian kiri dan pindahkan ke kanan
handle bawah sejauh 20px...

Dark Web DesignDark Web DesignDark Web Design

Sekarang Anda telah mendapatkan efek bayangan mendalam yang bagus. Anda juga dapat menambahkan efek lebih pada logo jika Anda ingin!


Langkah 12: Menentukan Kolom

Sekarang kita akan menambahkan beberapa panduan tambahan untuk membuat 4 kolom yang sisa konten lainnya didesain menggunakan itu…

Buatlah panduan berikut ini (Menu > View > New guide...) :

  • 355px vertical
  • 375px vertical
  • 590px vertical
  • 610px vertical
  • 825px vertical
  • 845px vertical

Sekarang kita memiliki 4 kolom dengan masing-masing 215px dan 20px di antaranya.


Langkah 13: Blok Slogan

Import geek_zombie.png dari folder sumber dan letakkan di tengah kolom pertama.

Buatlah sebuah garis besar teks untuk slogan dengan teks pilihan Anda. Saya menggunakan font “Droid Serif” dengan ukuran 30-x dan tinggi baris 42pt. Anda dapat mengatur tipografi sesuai keinginan Anda, sih ;)

Gambarlah sebuah persegi di bawah slogan dengan tinggi 7px.

Dark Web DesignDark Web DesignDark Web Design

Pada persegi hitam buatlah opsi layer FX seperti ini:

Dark Web DesignDark Web DesignDark Web Design

Anda sekarang memiliki bar miring (ditekan) yang baik.

Dark Web DesignDark Web DesignDark Web Design

Pilihlah 3 layer (Zombie + Slogan + bar hitam) dan lakukan Ctrl+G atau Cmd+G untuk mengelompokkan mereka. Ubah nama grup menjadi “Slogan”. Catatlah bagaimana kita tetap terorganisir sepanjang proses ini!


Langkah 14: Blok Kolom Pertama

Ambillah Text Tool dan buatlah sebuah judul. Saya menggunakan 30pt lagi – perhatikan bagaimana in isama dengan slogan, untuk membantu menjaga tipografinya tetap mirip. Hal ini akan memastikan tampilan yang konsisten dan professional pada keseluruhan desain.

Tentukan sebuah zona teks sekitar 128px dari judul dan letakkan teks “pengisi” di dalamnya. Saya menggunakan Arial 13pt, tetapi Anda dapat menggunakan jenis huruf yang Anda suka.

Gandakan bar hitam yang telah kita buat untuk slogan pada langkah sebelumnya dan letakkan di bawah teks pada 20px dari bawah teks.
Ubah ukurannya untuk membuatnya dapat mengisi kolom pertama.

Dark Web Design

Buatlah area gambar dengan Vector Shape Tool (U). 215x88px.
Gandakan, ubah namanya menjadi “Taransparency_1col” dan tarik ke atas untuk mendapatkan blok 215x108px.
Tekan Ctrl+, or Cmd+, untuk memindahkan layer ke bawah pada panel Layer.

Pilih layer "Transparency" dan salin style layer FX untuk meletakkannya pada layer yang baru saja digandakan ("Tranparency_1col").

Sekarang Anda dapat meletakkan gambar Anda pada area gambar. Klik kanan pada gambar dan pilih "Create clipping mask".

Dark Web Design

Langkah 15: Buatlah Kolom Lain

Anda dapat menggandakan kolom pertama (grup layer), kemudian memindahkannya pada kolom kedua. Ubah isinya (gambar/teks) sesuai keperluan.

Lakukan hal yang sam untuk kolom 3 dan 4…

Dark Web DesignDark Web DesignDark Web Design

Langkah 16: Footer

Pergilah ke Menu > Image > Canvas size dan sunting ukuran kanvas menjadi seperti ini:

Dark Web Design

Gambarlah sebuah persegi. kemudian ubahlah namanya menjadi “Footer bg”. Lakukan Ctrl+T atau Cmd+T (Mac) dan atur properti menjadi:

Dark Web DesignDark Web DesignDark Web Design

Klik ganda pada thumbnail berwarna di panel layer untuk mengatur warnanya menjadi #101010. Klik ganda pada layer untuk mengatur layer FX seperti berikut:

Dark Web DesignDark Web DesignDark Web Design

Pilih dan gandakan layer “dark bar” dn “Gradient” dari grup “Slider”.

Kelompokkan layer dan letakkan di bawah “footer bg” pada panel Layer.

Pindahkan ke bawah dokumen.

Ubah ukurannya untuk membuat style yang Anda inginkan.
pada contoh saya, saya membuat layer Gradient dengan tinggi 35px dan layer “Dark bar” dengan tinggi 8px.

Letakkan logo pada bagian bawah kanan pada 20px dari garis pandu kanan.

Dark Web DesignDark Web DesignDark Web Design

Gandakan menu atas untuk meletakkannya pada footer pada layer “footer bg”.

Buatlah sebuah kalimat hak cipta dalam Arial, 11pt, warna hitam.

Dark Web DesignDark Web DesignDark Web Design

Gandakan “footer bg” dan ubah ukurannya dengan tinggi 10px.
Pindahkan semua pada “footer bg”. Kemudian buat efek miring yang bagus untuk menu bawah.

Dark Web DesignDark Web DesignDark Web Design

Selesai! Buatlah Versi Custom Anda Sendiri!

Dark Web DesignDark Web DesignDark Web Design
Dark Web DesignDark Web DesignDark Web Design
Dark Web DesignDark Web DesignDark Web Design

Kesimpulan

Terima kasi telah mengikuti! Saya harap Anda dapat menggunakan beberapa trik dan teknik pada tutorial ini untuk proyek-proyek Anda. Jika Anda mengingat sesuatu, saya harap itu adalah menjaga tetap terorganisir sebagai hal yang amat penting untuk situs yang didesain dengan baik. Set layer yang sama ini dapat digunakan untuk membuat framework HTML/CSS ketika Anda mulai coding. Terima kasih lagi!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.