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

Rancang Antarmuka Situs Web yang Hangat dan Ceria di Adobe Photoshop

by
Read Time:18 minsLanguages:
This post is part of a series called Photoshop to HTML and CSS.
Convert a Warm, Cheerful Web Design to HTML and CSS: Chapter 2

Indonesian (Bahasa Indonesia) translation by Kaustina Nurul Ilmi (you can also view the original English article)

Diperbarui dengan HTML Tutorial Coding! - Tidak lama setelah Webdesigntuts diluncurkan, kami menulis tutorial bagus ini yang merinci proses perancangan halaman rumah yang hangat dan ceria di Photoshop. Setelah permintaan tinggi, kami mulai mengambil desain yang telah selesai dan kami mengubahnya menjadi laman situs web HTML dan CSS yang sesuai standar! Sepanjang perjalanan, kita akan meninjau berbagai teknik bagus yang akan membantu Anda memperbaiki alur kerja Anda sendiri.

Bahkan lebih baik lagi, ketika Nettuts menghasilkan 80.000 pelanggan RSS, Jeffrey telah setuju untuk melakukan lebih banyak hal dan mengubah produk jadi menjadi tema WordPress yang dapat diubah. Lihat kemajuan kami di bawah ini.


Tutorial Coding dari PSD ke HTML

Jeffrey Way telah menghasilkan beberapa tutorial pengkodean yang spektakuler di situs web lain kami Nettuts untuk mengubah desain ini dari PSD menjadi HTML, jadi bantulah diri Anda sendiri dan periksa mereka setelah Anda menyelesaikan bagian desainnya! Ada 8 bab total (kami sampai dengan Langkah 8 saat ini), dan mereka layak untuk dipelajari jika Anda pernah memiliki pertanyaan tentang mengubah PSD menjadi HTML/CSS.


Tahap Desain

Dalam tutorial ini kita akan mempelajari bagaimana merancang sebuah antarmuka yang hangat, ceria, dan nyaman untuk situs web portofolio / blog di Adobe Photoshop. Saat kita membaca tutorial ini, kita akan bekerja dengan: Bentuk sederhana (persegi panjang, garis, panah, dll), gaya lapisan (banyak dari mereka sebenarnya!), Lapisan masks, pola, karakter dan gaya paragraf, dan begitu banyak desain lainnya. dan teknik Photoshop yang bisa Anda adaptasi dengan alur kerja desain antarmuka situs web Anda.


Langkah 1

Agar semuanya selaras, kita akan menggunakan Sistem Grid 960s (dapatkan dari sini). Setelah d unduh, buka fail "960_grid_24_col.psd".
Tinggi dokumen saat ini lebih kecil dibandingkan desain akhir kita. Jadi, kita akan menuju ke Image > Canvas Size > Height: 1820px, Anchor: Top center.

Kita juga membutuhkan untuk memastikan Rulers dan Guides kita terlihat. Sehingga, kita akan menuju View > Extras / Rulers / Snap (sehingga objek kita masuk sejajar dengan Guides kita).

Mari kita isi latar belakang kita dengan warna solid. Pilih lapisan "Background," klik kanan padanya, dan pilih: Lapisan dari latar belakang, dan berikan nama yang berarti (misalnya: "bg").
Sekarang, dengan menggunakan Rectangular Marquee Tool (M), buat seleksi di atas keseluruhan kanvas, atur warna latar depan Anda ke: #f8eedf, lalu klik Shift+Backspace untuk mengisi pilihan Anda.


Langkah 2

Mari mulai membuat tajuk kita. Menggunakan Rectangular Marquee Tool (M), atau Rectangle Tool (U) (atau alat apa pun yang ingin Anda gunakan), buat persegi panjang / selection 1020x100px dan isi dengan warna apa pun untuk saat ini.

Lanjutkan dan terapkan Gradient Overlay ke tajuk Anda, dengan mengklik kanan lapisan kita > Blending Options > Gradient Overlay > gunakan gambar di bawah ini sebagai referensi:

Sekarang, untuk menghentikan latar belakang tajuk kita dari terlihat datar, kita akan menerapkan tekstur Noise sederhana. Jadi, buat lapisan baru (jelas perlu di atas lapisan latar belakang itu sendiri), buat selection di atas latar belakang tajuk, lalu isi (dengan mengklik Shift+Backspace) dengan nilai warna ini: #ffc05e.

Pergi ke Filter > Noise > Add Noise > Amount: 48px, Distribution: Gaussian. Ubah lapisan Blend Mode ini menjadi: Luminosity, dan ambil Opacity-nya menjadi: 5%.


Langkah 3

Sudah waktunya mengetikkan nama Situs Web kita. Ambil Horizontal Type Tool (T), ketik nama situs web Anda sesuai dengan pengaturan karakter berikut:

  • Font Family: Archer (dapatkan ini dari typography.com)
  • Size: 30pt
  • Weight: Bold
  • Anti-aliasing setting: Crisp
  • Color: #ffffff
  • Kerning: Optical
  • Tracking: 50

Terapkan Drop Shadow kepada teks kita menggunakan pengaturan yang dapat dilihat di gambar dibawah:

Untuk memastikan bahwa nama Situs Web disejajarkan secara vertikal dengan latar belakang tajuk, pilih kedua lapisan, lalu klik "Align vertical centers" yang dapat Anda temukan di panel kontrol.


Langkah 4

Pada langkah ini, kita akan menempatkan ikon media sosial. Kita akan memulai dengan mengunduh ikon media sosial yang menakjubkan ini, oleh KomodoMedia, dan kemudian tempatkan keempat ikon seperti terlihat pada gambar:

Untuk memastikan bahwa ruang di antara keempat ikon itu sama rata. Pilih empat lapisan, dan klik: Distribute horizontal centers di panel kontrol.

Mari sekarang buat pemisah di samping ikon kita. Dengan menggunakan Line Tool (U), buat dua baris masing-masing harus 1x60px, isi yang ada di sebelah kiri dengan nilai warna ini: #ffd593, dan yang di sebelah kanan dengan nilai warna ini: #c08c3a.
Juga, pastikan untuk meninggalkan 20px ruang putih horizontal antara dua baris dan keempat ikon.

Pilih Gradient Tool (G), buka kotak dialog Gradient Editor, atur pengaturan gradien Anda sesuai gambar di bawah ini.
Kemudian, klik kanan pada lapisan barus yang baru kita buat, pilih: Add layer mask.

Seret dengan Gradient Tool (G) dari atas ke bawah. Lakukan hal yang sama dengan lapisan garis lainnya (atau, Anda bisa saja menyalin lapisan mask dan menempelkannya di lapisan lainnya).


Langkah 5

Saatnya untuk mulai mengerjakan bar navigasi. Pilih Rectangular Marquee Tool (M), buat selection 1020x600px, dan isi dengan nilai warna ini: #40312a.

Menggunakan Single Row Marquee Tool, buat 1020x1px, dan isi dengan nilai warna ini: #f9ba59.

Kita akan menambahkan sorot dengan membuat selection 1020x1px, mengisinya dengan nilai warna ini: #735a4f, dan turunkan Opacity menjadi: 70%.


Langkah 6

Pada langkah ini, kita akan membuat teks navigasi kita. Jadi, dengan menggunakan Horizontal Type Tool (T), ketik kata "Home" dengan menggunakan pengaturan karakter berikut:

  • Font Family: Gotham Rounded (dapatkan melalui typography.com)
  • Size: 16pt
  • Weight: Medium
  • Anti-aliasing setting: Crisp
  • Color: #2c8897
  • Kerning: Metrics
  • Tracking: 50

Kemudian, terapkan Drop Shadow kepadanya berdasarkan gambar berikut:

Di lapisan teks baru, ketik teks navigasi lainnya, dengan menggunakan pengaturan karakter yang sama seperti yang kita gunakan di atas, kecuali saat ini kita akan mengubah nilai warnanya menjadi: #ffffff.
Sekali lagi, aplikasikan Drop Shadow ke lapisan ini sesuai gambar berikut:


Langkah 7

Sekarang mari kita buat bar pencarian kita, kenapa tidak? Kita akan mulai dengan mengetikkan kata "SEARCH" menggunakan pengaturan karakter yang sama seperti yang telah kita terapkan pada teks navigasi, tapi kali ini kita akan mengubah bobot font menjadi: Book. Kita juga akan menerapkannya pada Drop Shadow yang sama dengan yang kami berikan pada kata "Home".

Saatnya untuk membuat field input. Dengan menggunakan Rounded Rectangle Tool (U), buat empat persegi panjang 190x25px, dengan radius 3px, isi dengan nilai warna ini: #2c8797, dan terapkan Lapisan Gaya ke dalamnya, sesuai gambar berikut:

Coba temukan atau buat ikon kaca pembesar yang sangat sederhana, letakkan seperti pada gambar di bawah ini, dan jangan lupa untuk menerapkan Drop Shadow yang sama dengan yang kita berikan pada kata "SEARCH" ke ikon ini.


Langkah 8

Mari mulai bekerja di area featured / welcome. Dengan menggunakan Rectangular Marquee Tool (M), buat selection: 1020x400px, dan isi dengan nilai warna ini: #deccaaa.

Kita akan membuat pola yang sederhana dan halus agar latar belakang kita terlihat lebih menarik. Silakan membuat dokumen baru 25x25px, dan isi latar belakangnya dengan nilai warna ini: #deccaaa.

Menggunakan Ellipse Tool (U) membuat lingkaran sekitar 4x4px, isi dengan: #aa9364, dan pastikan itu berada di bagian tengah dokumen.

Buat salinan lain dari lingkaran ini, dorong ke bawah dua piksel, dan ubah warna isiannya menjadi: #f2e5cb.

Pergi ke Edit > Define Pattern > Give it a name.

Terapkan Lapisan Gaya berikut ke lapisan latar belakang (yang sudah kita buat pada tahap awal):


Langkah 9

Seret satu pasang Horizontal Guides berdasarkan panduan dibawah ini:

Pergunakan Rounded Rectangle Tool (U), buat empat bersegi panjang 950x260px, dengan radius 5px, dan isi dengan nilai warna: #40312a.

Terapkan Inner Shadow kepadanya. Pergunakan gambar dibawah ini sebagai referensi:

Terapkan efek Noise ke kotak ini (kita sudah melakukannya pada latar belakang tajuk kita), tambahkan lapisan mask ke lapisan ini, dan seret dari kanan atas ke bawah ke kiri dengan Black to White Linear Gradient.


Langkah 10

Buat empat persegi panjang atau selection 230x250px, isi dengan warna apapun, sejajarkan dengan gambar berikut, dan terapkan Lapisan Gaya ke dalamnya juga sesuai gambar berikut:

Pergi ke File > Place > dan letakkan sebuah gambar khas desain projek. Klik kanan pada lapisan ini > Create Clipping Mask.


Langkah 11

Sekarang, kita akan menciptakan bayangan untuk gambar kita. Jadi, menggunakan Ellipse Tool (U), buat elips seperti yang ada pada gambar di bawah ini. Lalu, masuklah ke Filter > Blur > Gaussian Blur > Radius: 3.0px.

Buka Gradient Editor Anda, dan atur pengaturan Anda sesuai gambar berikut. Buat clipping mask untuk lapisan elips, dan seret dengan Gradient Tool (G) dari kanan ke kiri dengan Linear Gradient. Juga, pastikan untuk menahan tombol Shift sambil menyeret untuk membatasi malaikat Anda.

Kita akan menempatkan gambar lain. Tapi satu-satunya yang akan kita ubah adalah bahwa holder gambar kita adalah: 230x220px.


Langkah 12

Sudah waktunya untuk beberapa teks sambutan. Ambil Horizontal Type Tool (T), dan ketik judul sambutan, dengan menggunakan pengaturan karakter berikut:

  • Font Family: Archer
  • Size: 24pt
  • Weight: Bold
  • Anti-aliasing setting: Crisp
  • Color: #3da2b4
  • Kerning: Optical
  • Tracking: 50

Sekarang, ketik beberapa teks, dengan menggunakan pengaturan karakter dan paragraf berikut:

  • Font Family: Verdana
  • Size: 12pt
  • Weight: Regular
  • Anti-aliasing setting: Smooth
  • Color: #ffffff
  • Kerning: Metrics
  • Tracking: 0
  • Leading: 18pt
  • Paragraph: Justify all

Langkah 13

Mari kita buat dua tombol call-to-action kita. Dengan menggunakan Rounded Rectangle Tool (U), buat empat persegi panjang 160x45px, dengan radius 5px, dan isi dengan warna untuk saat ini. Juga, pastikan untuk menyelaraskannya sesuai gambar berikut ini:

Terapkan efek noise pada tombol ini (kita sudah melakukannya beberapa kali). Tambahkan lapisan mask, dan gunakan Black To White Linear Gradient seret dari atas ke bawah.

Terapkan Lapisan Gaya terhadap lapisan ini. Pergunakan gambar dibawah ini sebagai referensi:

Pergunakan Horizontal Type Tool (T), tuliskan sesuatu didalam tombol tersebut (misalnya: “Learn More”), pergunakan pengaturan karakter berikut:

  • Font Family: Gotham Rounded
  • Size: 16pt
  • Weight: Bold
  • Anti-aliasing setting: Crisp
  • Color: #ffffff
  • Kerning: Optical
  • Tracking: 50

Terapkan sebuah Drop Shadow ke lapisan teks. Pengaturan dapat dilihat dibawah ini:

Buat salinan lain dari tombol tersebut, dan pastikan untuk mensejajarkannya sesuai dengan gambar dibawah ini:


Langkah 14

Ayo maju dan buat Breadcrumb. Dengan menggunakan Rounded Rectangle Tool (U), buat empat persegi panjang 950x40px, dengan radius 5px, sejajarkan seperti gambar di bawah ini, dan gunakan Gradient Overlay untuk melihatnya sesuai gambar berikut:

Menggunakan Horizontal Type Tool (T), ketik beberapa teks yang menunjukkan lokasi pengguna, dan terapkan pengaturan karakter berikut ke teks Anda:

  • Font Family: Archer
  • Size: 13pt
  • Weight: Bold
  • Anti-aliasing setting: Crisp
  • Color: #ffffff
  • Kerning: Metrics
  • Tracking: 50

Lalu, terapkan Drop Shadow ke teks Anda. Pengaturan dapat ditemukan pada gambar di bawah ini:

Menggunakan Polygon Tool (U), buat segitiga 12x12px, dan isi dengan nilai warna ini: #e0cfad.


Langkah 15

Pada langkah ini, kita akan membuat pemisah sederhana yang terdiri dari tiga garis yang saling menempel satu sama lain. Jadi, dengan menggunakan Line Tool (U), buat garis 1020x2px dan isi dengan nilai warna ini: #bba67b.
Kemudian, buat baris lain 1020x1px dan isi dengan nilai warna ini: #e6d6b8.
Dan akhirnya, buat lagi garis 1020x1px dan isi dengan nilai warna ini: #bba67b.


Langkah 16

Seret beberapa Panduan horizontal sesuai gambar berikut ini:

Bagian pertama dari area konten kita akan menjadi bagian "From The Blog". Ambil Horizontal Type Tool, ketik judul dengan menggunakan pengaturan karakter berikut:

  • Font Family: Archer
  • Size: 24pt
  • Weight: Bold
  • Anti-aliasing setting: Crisp
  • Color: Any color for now
  • Kerning: Optical
  • Tracking: 50

Terapkan Lapisan Gaya ke lapisan teks ini, sesuai gambar berikut:

Ketik nama tulisan blog pertama, dengan menggunakan pengaturan karakter berikut:

  • Font Family: Gotham Rounded
  • Size: 24pt
  • Weight: Light
  • Anti-aliasing setting: Crisp
  • Color: #40312a
  • Kerning: Optical
  • Tracking: 50

Ketik beberapa detail tentang tulisan blog, dengan menggunakan pengaturan karakter berikut:

  • Font Family: Archer
  • Size: 13pt
  • Weight: Bold Italic
  • Anti-aliasing setting: Crisp
  • Color: #ce953c
  • Kerning: Metrics
  • Tracking: 0

Kami sekarang akan membuat holder gambar utama dari tulisan blog kita. Jadi, dengan menggunakan Rounded Rectangle Tool (U), buatlah 550x140px, dengan radius 5px, isi dengan warna apapun, dan kemudian menerapkan Lapisan Gaya ke dalamnya, sesuai gambar berikut:

Tempatkan gambar utama Anda, dan buat Clipping Mask untuk lapisan ini.

Ketik tiga baris teks sebagai pengantar tulisan blog kita, dengan menggunakan pengaturan karakter berikut:

  • Font Family: Verdana
  • Size: 12pt
  • Weight: Regular
  • Anti-aliasing setting: Smooth
  • Color: #000000 - #247184
  • Kerning: Metrics
  • Tracking: 0
  • Leading: 18pt

Buat salinan lain dari tulisan blog ini, dan pastikan untuk menyelaraskan elemen sesuai gambar berikut ini:


Langkah 17

Ambil Rectangle Tool (U), dan buat empat persegi panjang 110x30px, isi dengan warna apapun, dan terapkan Lapisan Gaya ke dalamnya sesuai gambar berikut ini:

Sekali lagi, terapkan efek noise pada tombol ini, terapkan lapisan mask, dan seret dari bawah ke atas dengan Black to White Linear Gradient.

Dengan menggunakan Line Tool (U), buat garis 110x1px, dan isi dengan nilai warna ini: #b2988d.

Ketik kata di dalam kotak ("The Blog", misalnya), dengan menggunakan pengaturan karakter berikut:

  • Font Family: Archer
  • Size: 16pt
  • Weight: Bold
  • Anti-aliasing setting: Crisp
  • Color: #ffffff
  • Kerning: Optical
  • Tracking: 50

Terapkan Drop Shadow kepadanya sesuai dengan gambar berikut:


Langkah 18

Kami akan memulai langkah ini dengan menyeret Panduan horizontal baru sesuai gambar berikut:

Sudah saatnya mulai bekerja di sidebar. Ambil Rectangular Marquee Tool (M), buat selection 385x720px, dan isi dengan warna apapun untuk saat ini.

Terapkan Gradient Overlay ke layer ini, sesuai gambar berikut ini:

Tambahkan lapisan mask ke lapisan ini, lalu gunakan Gradient Tool (G), seret dengan Black to White Linear Gradient, dari kanan ke kiri.

Menggunakan Line Tool (U), buat garis 1x720px, dan isi dengan nilai warna ini: #dfcdb2.

Tambahkan layer mask ke lapisan ini, dan sekali lagi menggunakan Gradient Tool (G), seret dengan Black to White Linear Gradient, tapi kali ini dari bawah ke atas.

Salin lapisan dari garis yang baru saja kita buat, dorongnya 1px ke kiri, dan ubah warnanya menjadi: #fff7ea.


Langkah 19

Kita akan membuat tab sidebar kita. Dengan menggunakan Rounded Rectangle Tool (U), buatlah empat persegi panjang 310x200px, dengan radius 5px, isi dengan warna apapun, lalu terapkan Lapisan Gaya untuknya sesuai gambar berikut ini:

Seret Panduan horizontal baru berdasarkan gambar berikut:

Ctrl+Klik pada thumbnail lapisan ini untuk memuat pikselnya. Ambil Rectangular Marquee Tool (M), atur pengaturan selection ke: Subtract from selection, lalu buat selection di atas area yang ditunjukkan di bawah untuk membatalkan pilihannya. Sekarang Anda ditinggalkan dengan area yang masih dipilih, buat lapisan baru, dan isi dengan nilai warna ini: #40312a.

Dengan menggunakan Line Tool (U), buat dua baris di samping satu sama lain (lihat gambar di bawah), masing-masing harus 1px. Isi yang ada di sebelah kiri dengan nilai warna ini: #134a56, dan yang di sebelah kanan dengan nilai warna ini: #257386.

Lakukan hal yang sama lagi, tapi kali ini secara horisontal.


Langkah 20

Ketik kata "Comments" di tab pertama, dengan menggunakan pengaturan karakter berikut:

  • Font Family: Archer
  • Size: 16pt
  • Weight: Medium
  • Anti-aliasing setting: Crisp
  • Color: #ffffff
  • Kerning: Metrics
  • Tracking: 50

Terapkan Drop Shadow yang sama yang telah kita terapkan pada teks breadcrumb, kepadanya.

Ketik kata “Categories“ dan “Archives” dengan menggunakan pengaturan karakter berikut:

  • Font Family: Archer
  • Size: 16pt
  • Weight: Medium
  • Anti-aliasing setting: Crisp
  • Color: #ffffff
  • Kerning: Metrics
  • Tracking: 50

Pastikan untuk menyelaraskan mereka seperti gambar di bawah ini. Juga, gunakan Drop Shadow terhadapnya sesuai gambar berikut ini:


Langkah 21

Ketik contoh komentar, dengan menggunakan pengaturan karakter berikut:

  • Font Family: Verdana
  • Size: 12pt
  • Weight: Regular
  • Anti-aliasing setting: Smooth
  • Color: #ffffff
  • Kerning: Metrics
  • Tracking: 0
  • Leading: 18pt

Ketik beberapa detail tentang komentar tersebut, dengan menggunakan pengaturan karakter berikut:

  • Font Family: Archer — Gotham Rounded
  • Size: 12pt
  • Weight: Bold Italic — Medium
  • Anti-aliasing setting: Crisp
  • Color: #f8eedf
  • Kerning: Optical
  • Tracking: 0

Buat salinan komentar ini, dan buat di antara mereka pemisah seperti yang kita buat di Langkah 19.


Langkah 22

Buat judul lain (yang mengatakan: "WHO WE ARE") seperti yang ada di gambar di bawah ini:

Dengan menggunakan Rectangle Tool (U), buat empat persegi panjang 310x100px, terapkan Stroke ke sana (pengaturannya dapat dilihat pada gambar di bawah), lalu letakkan gambar di dalam kotak itu.

Menggunakan Horizontal Type Tool (T), ketik beberapa kata tentang siapa Anda, dengan menggunakan pengaturan karakter berikut:

  • Font Family: Verdana
  • Size: 12pt
  • Weight: Regular — Bold
  • Anti-aliasing setting: Smooth
  • Color: #000000 — #247184
  • Kerning: Metrics
  • Tracking: 0

Langkah 23

Buat judul lain (yang berbunyi: "SPONSORS"). Kemudian, dengan menggunakan Rectangle Tool (U), buat 138x138px, dan isi dengan nilai warna ini: #febf5d.

Tempatkan gambar iklan seperti gambar di bawah ini:

Buat salinan tempat iklan ini.

Dengan menggunakan Line Tool (U), buat dua baris di samping satu sama lain, masing-masing harus 1x95px, isi yang ada di sebelah kiri dengan nilai warna ini: #ffffff, dan satu di sebelah kanan dengan nilai warna ini: #cfbea3

Buka Gradient Editor Anda, atur pengaturan Anda seperti gambar di bawah ini, pilih salah satu lapisan dari dua baris, tambahkan lapisan mask, lalu seret dari atas ke bawah dengan Gradient ini. Juga, lakukan hal yang sama dengan lapisan garis lainnya.


Langkah 24

Seret Panduan horizontal baru menurut gambar berikut:

Dengan menggunakan Rectangular Marquee Tool (M), buat selection 1020x420px, isi dengan warna apapun, lalu pasang Gradient Overlay ke dalamnya, sesuai gambar berikut:

Menggunakan Single Row Marquee Tool, buat selection, dan isi dengan nilai warna ini: #b2988d.


Langkah 25

Seret dua Panduan horizontal sesuai gambar berikut ini:

Menggunakan Horizontal Type Tool (T), ketik judul pertama footer, dengan menggunakan pengaturan karakter berikut:

  • Font Family: Archer
  • Size: 24pt
  • Weight: Bold
  • Anti-aliasing setting: Crisp
  • Color: Any color
  • Kerning: Optical
  • Tracking: 50

Kemudian, terapkan Lapisan Gaya kepadanya sesuai dengan gambar berikut:

Kita sekarang akan membuat formulir kontak kami. Yah, saya tidak perlu mengatakan apapun, gambar di bawah ini mengatakan itu semua.

Terapkan Gaya Lapisan berikut ke semua bidang / persegi panjang yang baru saja kita buat:

Sekarang, ketik beberapa teks di dalam bidang ini yang menunjukkan tujuannya, gunakan pengaturan karakter berikut:

  • Font Family: Archer
  • Size: 13pt
  • Weight: Bold
  • Anti-aliasing setting: Crisp
  • Color: 247184
  • Kerning: Metrics
  • Tracking: 0

Langkah 26

Mari buat "SUBMIT". Dengan menggunakan Rectangle Tool (U), buat empat persegi panjang 110x30px, dan isi dengan nilai warna ini: #febf5d. Kemudian, menerapkan Lapisan Gaya untuk itu sesuai dengan gambar berikut:

Sekali lagi, terapkan filter Noise, tambahkan lapisan mask, lalu seret dari atas ke bawah dengan Black to White Linear Gradient.

Ctrl+Klik untuk memilih piksel dari latar belakang tombol. Lalu, pilih Select > Modify > Contract > Contract By: 1px, dan isi selection ini dengan: #ffffffff.
Sekali lagi masuk ke Select > Modify > Contract > Contract By: 1px, lalu tekan Delete.
Hapus selection, dan ambil Opacity dari lapisan ini sampai: 15%.

Ketik kata "SUBMIT" di dalam tombol, dengan menggunakan pengaturan karakter berikut:

  • Font Family: Archer
  • Size: 16pt
  • Weight: Bold
  • Anti-aliasing setting: Crisp
  • Color: #ffffff
  • Kerning: Optical
  • Tracking: 50

Dan kemudian menerapkan Drop Shadow terhadapnya sesuai dengan gambar berikut:


Langkah 27

Bagian kedua dari footer kita akan berisi gambar dari proyek terbaru kita. Jadi, dengan menggunakan Rectangle Tool (U), buat empat persegi panjang 125x95px, terapkan Stroke ke dalamnya, tempatkan gambar, dan buat clipping mask untuknya.

Terus menambahkan gambar, dan buat tombol yang lain.


Langkah 28

Bagian ketiga dan terakhir dari footer besar kita adalah arus Twitter. Jadi, dengan menggunakan Horizontal Type Tool (T), ketik beberapa teks sebagai contoh tweet, dengan menggunakan pengaturan karakter berikut:

  • Font Family: Verdana
  • Size: 12pt
  • Weight: Regular
  • Anti-aliasing setting: Smooth
  • Color: #f8eedf
  • Kerning: Metrics
  • Tracking: 0

Kemudian, ketikkan beberapa detail tentang tweet, dengan menggunakan pengaturan karakter berikut:

  • Font Family: Archer
  • Size: 12pt
  • Weight: Bold Italic
  • Anti-aliasing setting: Smooth
  • Color: #2e91a0
  • Kerning: Metrics
  • Tracking: 0

Terus tambahkan lebih banyak contoh tweet ... Juga, buat tombol "follow us" seperti yang ada di bawah ini:

Masukkan masing-masing dari tiga bagian dalam Lapisan Kelompok individual. Pilih tiga Kelompok, lalu klik Distribute horizontal centers di bar control.


Langkah 29

Sekarang saatnya membuat footer kecil. Dengan menggunakan Rectangular Marquee Tool (M), buat pilihan 1020x70px, dan terapkan Gradient Overlay sesuai gambar berikut:

Terapkan efek Noise ke lapisan ini (efek yang sama dengan yang kita terapkan pada tajuk).

Dengan menggunakan Single Row Marquee Tool, buat selection, dan isi dengan nilai warna ini: #38a4bs.

Menggunakan Horizontal Type Tool (T), ketik pemberitahuan hak cipta, dengan menggunakan pengaturan karakter berikut:

  • Font Family: Archer
  • Size: 13pt
  • Weight: Medium
  • Anti-aliasing setting: Crisp
  • Color: #ffffff
  • Kerning: Metrics
  • Tracking: 50

Kemudian, aplikasikan Drop Shadow ke dalamnya, sesuai gambar berikut ini:

Dan akhirnya, ketikkan navigasi kecil, gunakan pengaturan karakter yang sama, dan pengaturan Drop Shadow yang disebutkan di atas.


Kesimpulan

Itu saja, kawan! Kami selesai dengan desain antarmuka Situs Web kita. Semoga tutorial ini bermanfaat. Dan jika Anda memiliki komentar, silakan tinggalkan mereka di bawah, dan akan memastikan untuk menanggapinya. Juga, jangan lupa untuk memeriksa bagian tindak lanjut tentang cara mendapatkan desain ini hidup!

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.