Home » » Cara Membuat Layout Situs Web Bersih di Photoshop

Cara Membuat Layout Situs Web Bersih di Photoshop


Ini adalah tutorial tingkat menengah dan beberapa mungkin tampak rumit, tetapi mengapa tidak mencoba? Ayo nyalakan bolanya :)

Tetapi sebelum kami mulai memeriksa sumber daya yang berguna ini yang akan membantu Anda membuat tata letak desain web yang menakjubkan:

Pertama-tama, lihat hasil akhir dari tutorial kami. Hari ini kita akan membuat tata letak situs web yang indah ini:



Dapatkan Notifikasi

Kiriman BaruVia Email

 

Langkah 1

Mari kita mulai dari awal. Cukup jalankan Photoshop Anda dan buat dokumen baru ( CTRL + N ). Lihat parameter di bawah ini.

Langkah 2

Sekarang Anda harus menambahkan beberapa pola ke latar belakang Anda.

Layer Style -> Blending options-> Pattern Overlay . Lihatlah screenshot di bawah ini:

Langkah 3

Kami ingin membuat desain yang luar biasa, yah? Itu sebabnya kita harus menggunakan sistem grid untuk mendesain. Anda dapat dengan mudah membuat keseimbangan visual dan struktural yang kuat dari situs web dengan desain berbasis grid.

Masukkan beberapa grid ke desain Anda dengan interval 60px dan 20px.

Langkah 4

Jadi ... sekarang saatnya untuk mendesain menu situs web masa depan Anda. Gunakan alat Rounded Rectangle untuk membuatnya (radius - 3px). Lebar menu Anda adalah 940px, tingginya 34px.

Saya pikir itu adalah tugas yang mudah untuk membuat menu situs web. Yang pasti, lihat gambar di bawah ini:

Untuk membuat menu ini lebih eye-candy, buka Blending Options -> Drop Shadow . Gunakan pengaturan yang dapat Anda lihat pada screenshot:

Blending options-> Inner Shadow

Saya memilih warna # 6bafff untuk bilah menu ini.

Langkah 5

Mari tambahkan beberapa teks ke menu kami. Gunakan Horizontal Type Tool untuk itu.

Anda dapat membuat desain Anda dengan font apa pun yang Anda suka. Saya menggunakan font Aller [bold]. Ukurannya 14px.

Langkah 6

Semua tombol menu adalah tautan dan perancang harus menunjukkan bagaimana keadaan mengambang mereka terlihat. Jadi, buat adalah persegi panjang (warna yang saya gunakan untuk itu adalah # 5a90e5).

Hasil kami:

Langkah 7

Setiap situs web yang layak memiliki formulir pencarian. Ayo buat juga :)

Gunakan alat Rounded Rectangle (radius - 3px) untuk membuat formulir pencarian dengan dimensi berikut: 124px dan 26px

Tambahkan beberapa bayangan batin: Blending Options-> Inner Shadow

Blending Options-> Color Overlay , color- # 5a90e5

Gunakan alat Photoshop favorit kami sekali lagi :) Buat satu persegi panjang dengan dimensi 41px dan 32px

Blending Options -> Drop Shadow 
Blending Options -> Inner Shadow

Blending Options -> Color Overlay (warna - # 6bafff)

Sekarang saatnya menggunakan ikon yang telah kita unduh di awal tutorial ini. Buka "Linecons Free - Vector Icons Pack dan temukan ikon pencarian di sana. Hanya menerapkan beberapa lonceng dan peluit untuk itu.

Berikut ini hasil akhir kami untuk formulir pencarian:

Langkah 8

Koneksi media sosial sangat berguna dan penting untuk setiap situs web. Itu sebabnya hari ini kita juga akan belajar cara membuat tombol Facebook yang sederhana . Sekali lagi dengan bantuan alat Rounded Rectangle (radius - 3px), kami akan membuat tombol

Kemudian gunakan alat Rectangle (dibulatkan) untuk membuat persegi (menahan tombol Shift) dengan ukuran berikut - 16px

Pilih Pen Tool dan potong setengah dari kotak ini.

Edit-> Transform-> Putar untuk memindahkan segitiga ini dan letakkan di sisi kiri persegi panjang

Pilih semua lapisan "Facebook" Anda dan gabungkan mereka (Ctrl + E).

Blending Options-> Inner Shadow:

Blending Options-> Color Overlay (# c1cac5)

Sekarang tambahkan teks "ikuti" ke tombol Facebook kami dan mainkan dengan opsi pencampurannya.

Cobalah untuk membuat logo Facebook Anda untuk tombol ini. Misalnya, Anda dapat membuat huruf "F", hiasi dengan warna biru (# 5a90e5).

Mainkan dengan opsi Blending (tambahkan bayangan putih)

WOW! Kami melakukannya :) Lihat hasil akhir bilah menu kami:

Langkah 9

Buat bentuk baru: lebar 940px, tinggi 372px

Seperti biasa, tambahkan beberapa bayangan:

Dan perbatasan: Blending Options-> Stroke (20px, warna- # 6bafff)

Langkah 10

Untuk membuat penggeser yang bagus, kita harus menambahkan beberapa gambar ke dalamnya. Dengan bantuan pintasan Ctrl + Alt + G, buat kliping topeng.

Langkah 11

Gunakan banyak ikon gratis lagi. Saya telah memilih ikon berikut: "pengaturan", "gelembung", "foto", "dunia"

Tambahkan ke desain kami (jangan lupa untuk menggunakan grid), jarak - 180px

Langkah 12

Tambahkan beberapa teks. Anda harus menggunakan font yang sama yang Anda gunakan untuk bilah menu Anda. Setel ukuran font menjadi 30 piksel.

Bermain dengan Blending Options: tambahkan bayangan putih, overlay warna (# 6aaefd) dan bayangan batin.

Salin gaya lapisan ini dan tambahkan ke semua ikon Anda:

WOW! Lihatlah hasil yang luar biasa ini!

Langkah 13

Isi empat kolom ini (lebar masing-masing - 240px) dengan beberapa teks "loremipsum". Lebih baik menambahkan teks yang berbeda ke setiap kolom.

Langkah 14

Buat tombol Baca Lebih Lanjut dengan bantuan alat yang pernah kami gunakan sebelumnya.

Blending options-> Inner Shadow, Drop Shadow, Color Overlay (# 919392).

Langkah 15

Tambahkan teks "Baca lebih lanjut" ke tombol kami.

Langkah 16

Sekarang kita harus memisahkan konten utama situs web masa depan kita. Buat garis 1px dan tambahkan gaya tata letak "baca lebih banyak" Anda ke situ.

Langkah 17

Blok berikutnya dapat berupa bagian yang berjudul "Mitra" atau Anda mungkin ingin memamerkan posting blog terbaru Anda.

Gunakan alat Rounded Rectangle untuk membuat persegi (tahan tombol Shift).

Radius - 3px, lebar dan tinggi - 138px.

Pergi ke opsi Blending -> Stroke untuk membuat batas dengan pengaturan di bawah ini: 
Ukuran- 20px, warna # 919392

Salin dan tempel elemen ini 5 kali :) Tempatkan kotak ini dengan interval 20px.

Langkah 18

Dengan bantuan topeng kliping, masukkan gambar ke dalam kotak.

Seperti yang Anda lihat, Anda benar-benar dapat menggunakan blok ini untuk segala macam tujuan. Hasil:

Langkah 19

Footer situs web sama pentingnya dengan header, jika tidak lebih. Tanyakan pada diri Anda, "Apa yang Anda ingin pengunjung lakukan ketika mereka mencapai bagian bawah halaman?" Jawaban yang Anda dapatkan akan menjadi titik awal yang bagus untuk mendesain footer situs web Anda.

Sekarang saatnya merancang footer keren untuk tata letak situs web kami yang imut. Mari kita membuatnya cerah :)

Tambahkan beberapa gradien, misalnya # 3a8df1 - # 6bafff, dan bayangan batin

Langkah 20

Kami akan menambahkan tiga blok ke footer kami: Tautan cepat, Tentang Kami, dan Ikuti Kami

Gunakan font Arial Regular untuk judul (30px) dan tambahkan gaya seperti pada screenshot di bawah ini:

Gunakan font Arial Regular untuk teks di bagian Tentang Kami (12px).

Teks untuk bagian Tautan Cepat - 22px.

Taruh beberapa ikon standar ke bagian Ikuti - RSS, Google Plus + dan Twitter

Thanks for reading Cara Membuat Layout Situs Web Bersih di Photoshop

« Previous
« Prev Post
Next »
Next Post »

0 komentar:

Post a Comment