Advertisement
  1. Design & Illustration
  2. Designing

Menciptakan efek desain Web 3D keren

Scroll to top
Read Time: 3 min

Indonesian (Bahasa Indonesia) translation by nila sardi (you can also view the original English article)

Dalam tutorial ini saya akan menunjukkan Anda beberapa teknik yang sangat mudah, menggunakan gradien dan lapisan gaya, yang dapat kita gunakan untuk menghasilkan efek 3D halus bagus dalam desain web kami.


Langkah 1

Buat dokumen baru dengan 1000x750px. Klik dua kali pada lapisan latar belakang dan warna Overlay dan memilih coklat tua.


Langkah 2

Mengaktifkan penguasa (Lihat > penguasa) pada dokumen Anda dan menambahkan beberapa panduan seperti ditunjukkan di bawah. Membuat 2 orang pemandu horisontal, yang pertama di 30px dan yang kedua di 250px. Setelah itu menambahkan 2 orang pemandu vertikal di 100px dan 900px.


Langkah 3

Membuat persegi panjang dengan alat persegi panjang (U). Gunakan panduan untuk referensi. Mengubah nama lapisan ke header.


Langkah 4

Memilih hitam untuk warna latar depan Anda. Pilih alat Ellipse dan menciptakan bentuk yang akan bayangan. Membuatnya sedikit lebih tinggi dari persegi panjang putih seperti yang ditunjukkan. Mengubah nama lapisan bayangan dan meletakkannya di bawah lapisan header.

Setelah itu, mengubahnya menjadi Smart filter, menerapkan Gaussian Blur dan mengubah opacity 60%.


Langkah 5

Dengan lapisan header dipilih, klik dua kali untuk membuka kotak dialog lapisan gaya. Pilih Gradien Overlay. Mengubah gaya gradien radial. Untuk warna saya menggunakan merah gelap.


Langkah 6

Selanjutnya, pilih baris alat (U) dan memilih warna yang lebih terang dari gradien header dan menciptakan garis. Setelah itu pilih hitam dan membuat lain jalur hanya 1 pixel di atas garis merah. Pilih jalur 2 dan kelompok mereka. Mengubah nama grup "vDivider".

Pergi ke lapisan > lapisan masker > mengungkapkan semua. Menggunakan alat gradien, pilih Radial Gradient dari hitam putih dan menerapkan topeng untuk kelompok kami. Mulai gradien dari pusat grup.


Langkah 7

Membuat menu menggunakan alat tipe horisontal (T). Menggunakan putih untuk warna teks. Pilih semua link dan kelompok mereka. Mengubah nama grup putih link.

Duplikat kelompok dan menempatkannya di bawah link putih, mengubah warna teks ke hitam dan memindahkan grup 1 pixel atas dan kiri. Yang akan membuat efek 3D yang baik, persis seperti yang kita lakukan dengan garis.


Langkah 8

Ulangi langkah 6, tapi kali ini menciptakan pembagi horisontal untuk link. Gunakan baris alat untuk menggambar garis merah dan 1 pixel ke kiri menggambar garis hitam. Kelompok mereka dan duplikat kelompok 5 kali. Mendistribusikan kelompok-kelompok seperti ditunjukkan di bawah.


Langkah 9

Pilih Semua kelompok garis dan kelompok mereka. Mengubah nama grup toDividers. Setelah yang menerapkan masker lapisan, lapisan > Layer Mask > Reveal All. Tapi kali ini menggunakan Linear.


Langkah 10

Buka file pola, atau mendapatkan pola yang Anda inginkan. Pilih Semua dan pergi ke Edit > mendefinisikan pola. Menyebutnya webPattern.

Gandakan header layer dan mengubah pola. Pergi ke gaya lapisan dan menonaktifkan tampilan gradien dan mengatur pola Overlay. Pilih 'webPattern' kami menciptakan dan mengubah modus campuran warna Overlay.

Setelah itu berlaku lapisan masker untuk lapisan pola menggunakan Radial Gradient.


Pola


Langkah 11

Sekarang kita dapat menambahkan logo dan sendok.

Untuk teks, ketik Psdtuts +, pilih huruf tebal untuk PSD dan biasa atau cahaya untuk TUTS. Pergi ke gaya Layer dan menerapkan Drop Shadow, Overlay gradien dan Stroke. Itu adalah efek yang sangat umum dan indah.


Kesimpulan

Ketika kita bekerja dengan desain web kita harus mempertimbangkan ukuran file, browser kompatibilitas dan banyak masalah lain. Kadang-kadang detail-detail kecil seperti gradien halus atau batas menggunakan 2 warna dapat menciptakan efek visual yang sangat bagus atau gaya unik tanpa memerlukan banyak hacks dan penyesuaian.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.
Advertisement
Start your 7-day free trial*
Start free trial
*All Individual plans include a 7-day free trial for new customers; then chosen plan price applies. Cancel any time.