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

Buat Desain Situs Web Berorientasi Horizontal dengan Keras

by
Read Time:7 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Suci Rohini (you can also view the original English article)

Apakah Anda dalam mood untuk sesuatu yang berbeda? Saya akan membimbing Anda dalam proses pembuatan desain Stuff - blog dan portfolio berorientasi horizontal. Pastikan Anda mengunjungi Stuff versi online untuk melihat hasil akhirnya!

Langah 1 Buat Dokumen Baru di Photoshop

Buatlah 1300 x 800 px. Semua ruang itu tidak terlalu penting, tapi ada gunanya merasakan karakter panorama desain saat kita bekerja.


Langkah 2 Membuat Latar Belakang

Buat layer fill baru menggunakan warna solid #bfc6cd

Menambahkan Kebisingan ke Latar Belakang

Convert layer baru ke "smart object" (klik kanan > Convert to Smart Filter) dan oleskan filter > Add Noise (Anda bisa menyesuaikannya nanti jika diperlukan fitur smart filter). Kunci layer agar tetap bersih dan teratur. Anda dapat menghapus topeng layer dan menjadikannya lapisan belakang default (opsional).


Langkah 3 Membuat Arrow "Stuff" Big

Buat bentuk panah baru menggunakan "shape tool" preset. Kemudian gunakan alat seleksi Langsung  sesuaikan bentuk agar terlihat bagus (gunakan titik di sekitat sesuai keinginan Anda).

Pilih Free transform tool, pindahkan panah 310px dari atas, lalu ambil dan pindahkan penggaris horizontal untuk membuat panduan baru. Jepret di tengah panah. Mulai sekarang akan mewakili sumbu horizontal utama situs.

Tambahkan 4 gaya ke panah (dengan mengklik dua kali pada layer): drop shadow, inner shadow, outer glow dan gradient overlay (dari #cbcbcb nenjadi #ffffff).

Tambahkan layer teks baru di atas layer panah.

Tambahkan gaya ke teks: bayangan dalam, hamparan gradien dan goresan. Untuk efek kedalam yang lebih baik, buat goresan yang terlihat hanya di bagian bawah teks dengan menggunakan goresan "gradien" dengan pengaturan alfa dari setengah bagian atas yang disetel ke "0" opacity.

Bayangan luar dan dalam memberikan panah lebih 3D terlihat, tapi untuk membuatnya lebih baik lagi, mari kita ciptakan efek cahaya glossy sederhana. Buat persegi panjang baru dan gunakan alat pengubah. Point untuk mengubah bentuknya menjadi sedikit kelengkungan. Kita akan menutupi ini di atas layer Arrow untuk mrnciptakan efek glossy.

Atur lapisan ini isi sampai 0% dan tambahkan gaya overlay gardien dengan putih luntur halus.

Untuk menghindari lapisan cahaya melalui panah: ctrl + klik pada lapisan panah untuk membuat seleksi tambahkan layer mask ke layer cahaya.


Langkah 4 Menambahkan lampu latar

Untuk memusatkan perhatian pemirsa pada logo, buat cahaya untuk menahan panah dari latar belakang. Anda bisa menggunakan metode primitif yaitu:

  • Buat layer baru (ctrl + shift + N)
  • Pilih alat gradien
  • Reset (D) dan sebaliknya (X) warna
  • Pilih gradien radial putih-ke-penuh-transparansi
  • Sementara memegang shift tarik garis menciptakan gradien
  • Buat gradien layer opacity 80% (8)

Langkah 5 Buat Template Pemegang Konten

Buat persegi panjang lebar putih 240px (tingginya harus sedikit lebih tinggi dari pada dokumen).

  • Duplikatnya (ctrl + d) dan ubah warnanya - itu akan mewakili gambar di pisting blig.
  • Transform it (ctrl + t) -set ukuran 216 x 130px, dan pindahkan sumbu pusat ke halaman.
  • Tambahkan panduan vertikal untuk menandai batas konten masa depan.

Langkah 6 Tambahkan Teks

Di atas foto, buat kotak teks baru dan isi dengan judul blog. Gunakan font yang kental seperti Legue Gothic ( gratis di League of Moveable Type). Di bawah foto, buat kotak teks baru lain untuk konten umum.


Langkah 7 Styling Pemegang Konten

Buat seleksi untuk konten dan buat layer mask baru untuk kotak besar. Ubah kerapatan masker menjadi 80%

Tambahkan gaya cahaya luar (hitam) dan dalam (putih) ke lapisan strip untuk tampilan 3D yang lebih banyak.


Langkah 8 Menambahkan Teks Meta

Tambahkan teks info meta di atas pos. Saya telah menggunakan 12px Georgia italic, tinggi garis 17px. Ingat untuk menggunakan panduan untuk menyimpan teks dalam satu baris.


Langah 9 Membuat Tombol "Read More"

Buat teks "baca lebih lanjut" di bawah posting

Satu lapisan di bawahnya, buat persegi panjang baru menjadi tombol baca selengkapnya.

Tambahkan gaya gradien dan goresan ke dalamnya. Tip: buat stoke di dalam, memilih sudut-sudut tajam yang sempurna pada tombol.

Tambahkan gradien halus ke lapisan teks juga.


Step 10 Membuat Lencana Pos

Untuk membuat lencana menggunakan persegi panjang lain, tambahkan teks (saya telah menggunaan Arial), dan putar kedua lapisan bersama-sama 45 derajat.

Tambahkan mask ke layer persegi panjang untuk menyembunyikan sudut yang tidak perlu.

... dan tambahkan 2 persegi panjang kecil sebagai ilusi lencana yang berada di bawah gambar.

Tambahkan bayangan halus ke lencana. Tip: untuk mode campuran bayangan gunakan Normal, bukan default Multiply, sehingga akan berlaku bahkan jika Anda menggunakan lencana sebagai file PNG transparan


Step 11 Menu

Buat layer teks baru. Alih-alih warna hitam (yang dapat terasa tidak wajar pada background cahaya), gunakan warna abu-abu gelap untuk mendapatkan tampilan.yang lebih alami.

Tip: Untuk membuat garis horizontal daripada menggunakan alat garis, buat bukan teks anti-alias menggunakan garis bawah mesin terbang "_" ini akan selalu piksel-tajam dan spasi di antara garis akan mudah dikontrol berkat parameter garis ketinggian. Gunakan tinggi garis yang sama seperti pada teks menu dan buat garis sebanyak item menu, minus satu. Buat garis lebih panjang dari yang di butuhkan.

Set lapisan ini isi hingga 15% dan tambahkan bayangan putih.

Tambahkan mask ke layer garis dan cat dengan kuas halus di atasnya untuk mencapai tepi menghilang.


Step 12 Buat Form Pencarian

Buat persegi panjang dengan sudut membulat (3px) untuk input pencarian.

Tambahkan inner shadow ke kotak dan isi lapisan 70%

Di atasnya tambakan teks pencarian dan buat bentuk kustom sebagai tanda panah kirim. Tambahkan bayangan batin ke kotak dan isi lapisan menjadi.70% 


Step 13 Tempat Dapatkan Logo Media Logos

Karena gambar vektor direkomendasikan untuk tujuan ini, saya sarankan untuk mencari logo yang diperlukan di layanan www.brandsoftheworld.com service. Dalam banyak kasus, ini adalah cara yang tercepat. Buka logo di Illustrator, salin garis luar dan tempelkan di Photoshop sebagai bentuk. Anda juga dapat menggunakan Buddy Icons dari Orman Clark.

Atur isi layer ke 0% dan tambahkan styles (drop shadow, inner shadow dan color overlay) untuk mencapai tampilan 3D. Untuk mendapatkan logo dalam keadaan aktif (terang), ubah warna dan intensitas gaya Color Overlay.

Salin gaya dan salin ke logo lain (klik kanan pada layer / Copy Layer Style)


Step 14 Membuat Kotak Komentar

Untuk menambahkan kotak komentar, buat persegi panjang bersudut bulat lainnya dengan lebar 520px dan tambahkan gaya Drop Shadow.

Pilih bagian yang lebih besar dan tambahkan mask ke lapisan ini.

Gandakan layer dan balikkan topeng itu. Buat layer baru mengisi 25%.

Pada pengaturan pencampuran, periksa opsi "Layer Mask Hide Effects", untuk menghindari inkonsistensi dalam garis bayangan kedua layer.

Buat garis vertikal hitam di perbatasan antara kotak-kotak ini, buat isinya juga 25% dan tambahkan 1px bayangan putih yang diarahkan ke kanan.

Tambahkan beberapa contoh avatar dan teks menggunakan warna yang digunakan sebelumnya.


Step 15 Membuat Panah untuk Penggeser Portofolio

Buat bentuk lingkaran dan tempel gaya lapisan dari panah logo. Potong bentuk panah dari lingkaran menggunakan bentuk Kustom dan mode pemotongan.

Di bawah layer tombol ini buat lingkaran lain - ukuran yang sama atau lebih kecil, dan tempel gradien dari logo. Tip: Jika beberapa lapisan memiliki banyak gaya, dan Anda ingin hanya satu, Anda dapat menyeret gaya saat alt ditekan dan menjatuhkannya kelapisan lain.

Tambahkan cahaya (cara yang sama seperti di atas ke panah logo).

Jika Anda ingin membuat beberapa perbaikan kecil, yang tidak akan diperhatikan siapa pun, buat lampu terpisah untuk lubang berbentuk tombol dan panah, dan gerakkan yang ke dua sedikit ke bawah. Dan jika Anda sudah memiliki dua lampu terpisah, Anda dapat dengan mudah (tanpa masking tambahan) membuat cahaya tombol menjadi lebih kuat agar terlihat lebih baik pada tombol yang sangat terang.

Pilih semua layer tombol dan buat objek Smart dari mereka.

Gandakan layer, gerakkan dan flip horisontal secara horizontal. Sekarang jika Anda meluncur satu panah (double klik smart layer) keduanya akan berubah.


Itu dia!

Semua elemen lain dapat dilakukan dengan menyalin, menempel dan mengubah ukuran elemen-elemen yang ada yang telah kami rancang

Tip:Font Liga Gothic dari font freeware keren lainnya dengan lisensi ramah desainer web dapat ditemukan di www.fontsquirrel.com


Apakah Anda Suka Membuat HTML atau versi WordPress dari Barang?

OK, jadi Anda memiliki PSD lebih atau kurang siap, dan ingin melangkah lebih jauh. Karena Stuff memerlukan beberapa pendekatan berbeda untk konten, karena karakternya yang horizontal, sangat sulit untuk mengkodekannya dengan benar. Saya tidak tahu banyak situs web horizontal yang berhasil menghindari kesalahan umum (misalnya gulir mouse tidak berfungsi) . Silahkan tinggalkan komentar jika Anda ingin mengetahui cara terbaik untuk mengkode desain ini dan kami akan melihat apakah kami tidak dapat membawa tutorial ke situs ini!

Bagaimanapun, jika Anda ingin menghemat waktu dan memiliki semuanya di silver plate, Anda dapat mengunduh template HTML atau WordPress versi Stuff untuk beberapa dolar. Terima kasih!

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.