Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
  1. Design & Illustration
  2. Interface Design

Cara membuat sederhana & ramping Web 2.0 situs Footer

by
Read Time:5 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Tiara Nirmala (you can also view the original English article)

Karena Web 2.0 menghantam internet, footer telah menjadi lebih penting daripada pernah, dan di sana telah beberapa besar mencari pekerjaan lantai bawah. Dalam tutorial ini saya akan menunjukkan kepada Anda bagaimana untuk menghasilkan ramping mencari situs footer di Photoshop.

Footer

Berikut ini adalah footer kami akan membuat, klik pada gambar di bawah untuk melihat versi ukuran penuh:

Langkah 1

Seiring dengan cairan header dan footer, gradien yang ciri umum desain gaya Web 2.0. Untuk tutorial kami kami akan menggunakan paket rapi gradien yang simular 3d / situs bahan-bahan yang bisa Anda dapatkan dari Deziner Folio sangat baik. Klik di sini untuk men-Download paket gradien

Langkah 2

Buka file Photoshop baru. Saya telah membuat saya dengan dimensi besar - 1440 px x 900px (untuk cocok saya 17 inch notebook layar). Tentu footer sebenarnya Anda seharusnya ini besar, tetapi baik untuk mensimulasikan apa yang terjadi ketika jendela peramban membentang.

Pilih warna latar belakang, dalam kasus saya pilihan untuk latar belakang adalah gradien yang sederhana dengan #b0b0b0 dan #e1e1e1. Gerakkan kursor di layar memegang SHIFT untuk membuat gradien vertikal ke bawah halaman.

Langkah 3

Dalam desain web ini sangat penting untuk memutuskan apa jenis tata letak Anda akan membuat. Itu adalah untuk memutuskan antara tata letak cair (satu yang membentang di seluruh browser Anda) atau tetap (dalam banyak situs Web 2.0 style layout tetap biasanya terpusat). Di footer kami, kami akan bekerja dengan tata letak yang tetap diukur untuk 760px x 420px. Pengukuran ini akan memastikan bahwa bahkan di 800px x 600px layar, footer kami masih akan muncul dengan benar.

Gunakan panduan untuk menggambarkan ukuran website Anda seperti ditunjukkan di bawah. Perhatikan bahwa jika Anda ingin membuat tata letak yang dioptimalkan untuk setup x 768px 1024px, kemudian mendefinisikan Anda panduan untuk menggambarkan 955px x 600px area.

Langkah 4

Meskipun kami footer fixed width, kita masih ingin footer untuk membentang di halaman dan mengisi daerah yang tersisa. Untuk melakukan hal ini kita akan menggunakan pola yang dibuat oleh saya di photoshop untuk mensimulasikan pelat logam. Untuk mengunduh Pola klik di sini. Buka gambar ini di photoshop dan pergi ke Edit > pola menentukan dan memilih nama untuk pola.

Sekarang buka file baru dengan 1440px untuk lebar dan 86px tinggi, dan pergi ke Edit > mengisi dan mengambil pola kami hanya dibuat. Pilih Semua (CTRL A untuk PC dan APPLE + A untuk Mac), kemudian memotong dan menyisipkan gambar ke bagian bawah dokumen pertama kami. Anda akan mendapatkan hasil yang ditunjukkan di bawah ini.

Langkah 5

Sekarang saatnya untuk pengguna gradien indah kami paket dari langkah 1. Buat layer baru dan membuat persegi panjang dengan menggunakan Marquee Tool (M) dengan 100% lebar dokumen dan 21px tinggi. Sekarang pilih Gradient Tool (G) dan pilih gradien keren. Saya memilih "Hitam 5 - Gloss" dari paket gradien. Sekarang gerakkan alat gradien vertikal marquee menekan "SHIFT" untuk memastikan itu persis vertikal.

Memindahkan dihasilkan bentuk ke atas bentuk yang dibuat di langkah 4. Anda harus memiliki sesuatu yang mirip dengan gambar di bawah.

Langkah 6

Sekarang kita menambahkan efek bayangan drop lapisan yang kita buat di langkah 5.

Langkah 7

Sekarang set warna latar depan Anda ke #545557 dan warna latar belakang untuk #1e211f. Buat layer baru di bawah lapisan langkah 4. Gunakan Marquee Tool (M) untuk memilih konten lapisan langkah 4. Pilih Gradient Tool (G), memilih gradien pertama (kombinasi warna latar depan dan belakang). Mengambil gradien Lexus memegang pergeseran untuk mendapatkan gradien vertikal. Sekarang pergi ke langkah 4 lapisan dan mengatur mode blending lapisan ini untuk melipatgandakan.

Langkah 8

Sekarang membuat layer baru di atas semua lapisan lain dan menggambar persegi panjang bulat di panduan kami, memilih warna yang akan #dfdfdf. Klik kanan lapisan, klik pada Blending pilihan dan kemudian membuat efek Drop Shadow untuk persegi panjang. Kemudian klik kanan pada efek lapisan dan pilih "Buat lapisan". Ini akan membagi drop shadow pada lapisan sendiri.

Sekarang Anda memiliki persegi panjang lapisan dan lapisan bayangan, memindahkan dan mengubah ukuran bayangan untuk mendapatkan hasil di bawah ini. Anda mungkin ingin tekan CTRL-T untuk mendapatkan alat mengubah atas, kemudian klik kanan dan pilih perspektif, kemudian tarik dua handle atas di terhadap satu sama lain. Bergantian, Anda dapat bergerak bayangan turun dan menggunakan penghapus lembut sikat untuk sikat keluar tepi atas.

Langkah 9

Untuk menyelesaikan desain menambahkan beberapa teks, informasi hak cipta dan logo Anda ke bawah.

Langkah 10

Untuk mendapatkan footer siap untuk digunakan dalam file HTML Anda, cukup menghapus teks (teks akan ditambahkan dalam HTML), meratakan seluruh file dan memotong latar belakang footer seperti yang ditunjukkan di bawah ini, kemudian menyisipkannya ke file baru. Seperti yang kita lakukan di Photoshop, pola dapat diproduksi menggunakan properti latar belakang dalam CSS dokumen Anda. Ini adalah alasan mengapa kami telah memotong gambar begitu kecil seperti ini mengarah pada kinerja yang lebih baik dengan ukuran file yang lebih kecil.

Untuk memotong pusat footer cukup pilih konten di dalam panduan dan memotong-itu dan paste ke file lain.

Simpan kedua file menggunakan Simpan > Simpan untuk Web & perangkat dan pilih JPG dengan pengaturan sesuai kualitas. JPGs dan PNGs yang baik untuk gambar seperti yang ditunjukkan dimana terdapat banyak wisuda warna. Gambar GIF lebih baik untuk area datar warna. Hal ini disebabkan setiap menggunakan algoritma.

Footer

Dan Anda sudah selesai, sebuah elemen footer indah! Untuk lebih banyak ide-ide besar footer, check out Thiuven's 35 Footer desain yang indah.

One subscription.
Unlimited Downloads.
Get unlimited downloads