Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Complete Websites
Webdesign

Mereka Bentuk Antar Muka Laman Web e-Commerce yang Bersih di Photoshop

by
Difficulty:BeginnerLength:LongLanguages:

Malay (Melayu) translation by Aisyah Arrafah (you can also view the original English article)

Ingat freebie Fashion Store? Hari ini saya akan menunjukkan kepada anda bagaimana untuk mencipta antara muka laman web e-comerce yang bersih ini dalam Adobe Photoshop. Tutorial ini bukan hanya dipenuhi dengan banyak teknik Photoshop tetapi juga konsep reka bentuk yang melampaui bahagian-bagaimana, yang saya pasti anda tidak mahu ketinggalan. Jadi mari kita mulakan!


Kedai Fesyen, The Freebie

Pertama sekali, saya ingin memberikan kredit kepada Sunil, yang sebenarnya merancang antara muka ini. Saya telah membuat beberapa pengubahsuaian pada susun atur, seperti menyusun semulanya mengikut grid.


Lakarkan Idea Anda

Pastikan lakaran anda longgar dan kasar.

Sebelum kita melompat masuk ke Adobe Photoshop, kita perlu mengambil sedikit masa untuk memikirkan cara kami akan membentuk reka bentuk kami. Mari ambil pen dan kertas dan mula membuat lakaran baju kami.

Apabila kami membuat kord, kami lakarkan halaman kami untuk mencuba peletakan visual yang berbeza untuk setiap elemen di halaman kami. Jadi, apa yang kita lakukan ialah memikirkan bagaimana elemen berfungsi dengan baik, bersesuaian di halaman, dan bagaimana mereka paling sesuai dengan satu sama lain. Kami juga mempertimbangkan unsur-unsur mana yang harus ditekankan dan yang tidak sepatutnya.

Pada peringkat ini kita harus berhenti bimbang tentang bagaimana elemen tertentu akan dipaparkan, dan memikirkan apa reka bentuk laman web keseluruhan boleh menjadi.

Malangnya, kerana saya tidak mencipta susun atur ini dari awal, saya tidak mempunyai pukulan skrin sketsa sketched untuk menunjukkan kepada anda. Tetapi satu perkara yang saya akan katakan: jaga lakaran anda yang longgar dan kasar. Mereka tidak perlu mewah atau artistik.

Jika anda baru untuk ini, inilah tugasan pertama anda: cuba lakarkan reka bentuk akhir ini atau laman web yang sedia ada yang anda suka. Ini akan membantu anda melihat hubungan elemen di laman web.

Bacaan lanjut:


Mewujudkan Wireframe Skala Kelabu

Kini kami telah melancarkan beberapa idea saatnya untuk menjadikan sketsa ini menjadi lebih kuat. Kami akan mula membuat rentetan garis lebar di mana semua susun atur dan jenis rawatan akan hadir, tetapi tidak akan ada warna, tekstur, imejan, dan sebagainya.

Inilah cawangan skeletal terakhir kita seperti berikut:


Susunan: Komposisi

Sebelum kita mula bekerja di wireframe kami di Adobe Photoshop, kami mempunyai beberapa keputusan untuk dibuat.

Pertama, susun atur kami akan menjadi susun atur yang tetap, ini bermakna dimensi susun atur kami akan ditentukan dalam bilangan piksel tertentu. Susun atur kami akan menjadi 940px lebar jadi, seperti yang anda lihat dalam imej di bawah, sama ada ia ditunjukkan pada tetingkap yang lebih kecil atau lebih besar, saiznya tetap sama.


Layout: Grid

Menggunakan grid menjadikannya lebih mudah untuk menyelaraskan unsur-unsur kita dan menentukan saiznya. Dalam reka bentuk ini, kami akan menggunakan Grid Baseline ini yang dicipta oleh orang yang hebat di Teehan+Lax. Ia adalah grid asas 6px ditambah dengan sistem grid 960.

Bacaan lanjut:

Ketika kita bergerak, kita akan membincangkan cara menyelaraskan teks dan elemen kita, tetapi untuk sekarang anda harus meneruskan dan membaca artikel ini untuk mendapatkan gambaran tentang cara menggunakan grid ini.


Layout: Ruang Putih

Putih, atau Ruang Negatif adalah ruang di antara elemen dalam antara muka kami. Ruang antara elemen utama dipanggil Macro White Space. Putih, atau Ruang Negatif adalah ruang di antara elemen dalam antara muka kami. Ruang antara elemen utama dipanggil Macro White Space.

White Space membantu jenama kedudukan, dan pereka biasanya menggunakan White Space dalam reka bentuk mereka untuk memberi mereka rasa kecanggihan dan kemewahan. Jadi itu adalah sesuatu yang perlu kita berhati-hati semasa kita mereka bentuk.


Typography: Typefaces

Kita harus sentiasa memilih huruf/fon kami dengan berhati-hati. Memilih font yang betul tidak mudah sama sekali, dan anda perlu melihat banyak aspek, daripada memilih jenis huruf dengan keperibadian yang akan menyampaikan mesej yang betul, bagaimana ia akan kelihatan pada penyemak imbas. Saya tidak akan terperinci, sebaliknya saya ingin menyebut beberapa jawatan yang saya dapati sangat menarik:

Bacaan lanjut:

Dalam antara muka kami, kami akan menggunakan tiga jenis huruf berikut: Helvetica, jenis huruf yang bersih dan moden yang mengatakan semuanya. Georgia, jenis huruf yang membangkitkan royalti dan mempunyai nada serius. Bebas, tipografi yang mempunyai rasa otoritas, dan seperti pernyataan yang berani, selalu membuat satu titik.

  • Helvetica New: Salinan badan (font standard).
  • Bebas: Tajuk (muat turun di sini).
  • Georgia: Unsur-unsur lain yang diketuai (font Standard).

Typography: Hierarki

"Hierarki tipografi" hanya menerangkan bagaimana typefaces, berat dan saiz typefaces yang berlainan dokumen.

Dari segi saiz fon, grid asas kami telah memutuskan untuk digunakan direka bentuk untuk bersesuaian dengan saiz fon standard, itulah sebabnya kami akan berpegang dengan mereka. Saiz ini terbukti sangat berguna apabila digabungkan dengan peneraju yang diperoleh daripada tiga. Jadi, inilah saiz piksel utama untuk antara muka kami:

  • 24px: Tajuk H1.
  • 18px: Tajuk H2.
  • 14px: H3 dan tajuk navigasi.
  • 12px: Salinan badan-dengan nilai utama 18px.

Walau bagaimanapun, dalam banner sidebar dan kawasan kandungan yang ditampilkan, kami akan menggunakan beberapa saiz lain yang lain (selepas semua, iklan ini akan diganti dalam masa) namun mereka akan menjadi saiz font standard.

Bagi berat, saya akan pergi dari Rom Bawah Kes ke Bold Lower Case. Tiada apa-apa yang rumit.


Typography: Memimpin, Kerning & Penjejakan

Seperti yang telah saya katakan, kita akan menggunakan nilai-nilai utama (baris jarak) didorong dari grid, yang akan menjadi: 18px, dan 21px.

Kerning kami akan menjadi Metrik untuk teks badan, dan Optikal untuk tajuk (lihat bacaan lanjut). Dan akhirnya, kami akan menggunakan nilai penjejakan lalai (0) untuk semua teks.

Selanjutya:


Typography: Anti-Aliasing

Berikut adalah artikel yang sangat baik. Anda perlu membaca yang satu ini! Saya tidak akan mengatakan satu perkataan, kecuali untuk salinan badan (saiz titik kecil) kita akan menggunakan Sharp, dan untuk tajuk (saiz titik yang lebih besar) kita akan menggunakan Crisp.


Langkah 1: Menyediakan Dokumen

Sekarang bahawa kami telah membuat beberapa keputusan, sudah tiba masanya untuk membuka Adobe Photoshop dan sebenarnya mula mencipta wireframe kami! Oleh itu, buka dokumen grid yang telah dimuat turun sebelumnya yang dipanggil "grid2.psd". Perkara pertama yang akan kami lakukan ialah memilih semua lapisan sedia ada dalam dokumen-kecuali bagi folder yang dipanggil "Tanda" - dan menyingkirkannya, atau mengelompokkannya dalam folder dan menyembunyikannya untuk sekarang. Sebelum kita pergi, mari pilih folder 'Tanda' dan klik butang 'Kunci Semua' dalam panel lapisan.

Kini kita perlu menukar ketinggian dokumen kami, kerana reka bentuk akhir kami lebih tinggi daripada dokumen yang sedia ada. Untuk berbuat demikian, kami akan pergi ke Imej> Saiz Kanvas, tukar ketinggian kepada 1540px dan pastikan untuk menetapkan Anchor to Top Center.

Kemudian klik Lihat> Ekstra (untuk melihat Panduan kami), Raja-Raja (untuk melihat Raja-Raja) dan Snap (supaya objek yang kita buat boleh terputus ke Panduan).


Langkah 2: Mewujudkan Latar Belakang

Kami akan mulakan dengan membuat latar belakang kami. Buat lapisan baru, beri nama ("bg" sebagai contoh), kemudian ambil Alat Rectangular Marquee (M). Buat pilihan di atas kanvas keseluruhan, dan untuk mengisi, klik Shift + Backspace, Gunakan: Warna ... kemudian isi pemilihan dengan nilai warna ini: #f5f5f3. Perhatikan bahawa nilai warna yang akan kami gunakan dalam skeletal skala kelabu bukanlah nilai akhir, tetapi kami akan menggunakannya untuk membezakan elemen halaman kami.


Langkah 3: Mewujudkan Bar Teratas

Sekarang mari kita buat bar atas. Sekali lagi ambil Rectangular Marquee Tool (M), buat pilihan 1260x45px, dan kemudian isi dengan nilai warna ini: 2d2d2d.

Pilih Alat Jenis Mendatar (T), taip item navigasi anda, kemudian gunakan tetapan aksara berikut:

  • Font: Helvetica New LT Std.
  • Berat: 55 Rom.
  • Saiz: 12px.
  • Kerning: Metrik.
  • Warna: #767676.
  • Anti-Aliasing: Sharp.

Untuk memastikan teks kami sejajar dengan latar belakang, pilih kedua-dua lapisan (lapisan teks dan lapisan latar belakang) dan klik pada Align menegak pusat di bar kawalan.


Langkah 4: Mewujudkan Borang Masuk

Taip perkataan "Masuk" dengan menggunakan Alat Taip Mendatar (T), gunakan tetapan aksara berikut untuknya, dan pastikan untuk menjajarkannya seperti imej di bawah.

  • Font: Helvetica New LT Std.
  • Berat: 75 Berat.
  • Saiz: 12px.
  • Kerning: Metrik.
  • Warna: #ffffff.
  • Anti-Aliasing: Sharp.

Sekarang mari kita buat medan input. Menggunakan Alat Rectangle Bulat (U) membuat dua segi empat bulat setiap satu daripada mereka harus 127x26px, dengan radius 15px. Isikan mereka dengan nilai warna ini: #767676 dan selaraskannya seperti imej di bawah.

Taipkan dua perkataan "Nama pengguna" dan "Kata Laluan" di dalam kedua-dua bidang, dengan tetapan aksara yang berikut digunakan untuk mereka, kemudian selaraskannya mengikut imej di bawah:

  • Font: Helvetica New LT Std.
  • Berat: 55 Rom.
  • Saiz: 12px.
  • Kerning: Metrik.
  • Warna: #ffffff.
  • Anti-Aliasing: Sharp.

Kami akan membuat butang "Pergi" kami menggunakan Alat Bulat Rectangle (U) tetapi kali ini 33x25px persegi panjang dengan jejari 25px. Kemudian ketik kata "Pergi" di dalamnya menggunakan tetapan watak yang sama pada imej terdahulu tetapi menukar beratnya kepada 75 Bold.

Dapatkan Alat Talian (L), buat garis 1x25px dan isikan dengan putih. Kemudian taip perkataan "Daftar" dengan menggunakan tetapan aksara yang sama yang ditunjukkan dalam imej berikut, juga selaraskan semua elemen yang telah kami buat dalam langkah ini mengikutnya.


Langkah 5: Mewujudkan Ruang Iklan

Mari kita gunakan Alat Rectangular Marquee (M) untuk membuat segi empat tepat 480x60px, isi dengan #767676, dan selaraskannya seperti pada imej di bawah. Ini harus berfungsi sebagai ruang letak untuk ruang iklan.

Kemudian beri lapisan ini Stroke. Imej di bawah menunjukkan tetapan yang kami mahu.


Langkah 6: Mewujudkan Logo

Secara praktiknya, logo kami tidak sepatutnya direka di sini di Adobe Photoshop, tetapi buat masa sekarang kami akan mewujudkannya di sini. Jadi ambil Ellipse Tool (U), buat bulatan 60x60px, isi dengan nilai warna ini: #2d2d2d, dan sejajarnya seperti ditunjukkan gambar di bawah.

Taip huruf "F" dengan menggunakan tetapan aksara berikut, dan sejajarkannya mengikut imej berikut:

  • Fon: Sebelum Sesuatu.
  • Saiz: 53.65px.
  • Warna: #ffffff.
  • Anti-Aliasing: Renyah.

Kemudian taip perkataan "Fesyen" dan gunakan tetapan aksara berikut kepadanya:

  • Fon: Sebelum Sesuatu.
  • Saiz: 30px.
  • Kerning: Optik.
  • Warna: #2d2d2d.
  • Anti-Aliasing: Renyah.

Dan "Simpan" dengan tetapan aksara berikut:

  • Font: Georgia.
  • Berat: Biasa.
  • Saiz: 12px.
  • Kerning: Metrik.
  • Warna: #767676.
  • Anti-Aliasing: Sharp.

Pastikan anda meletakkan kedua-duanya mengikut imej di bawah.


Langkah 7: Mewujudkan Bar Navigasi

Dalam langkah ini, kami akan membuat bar navigasi kami. Teruskan dan ambil Alat Rectangular Marquee (M), membuat pilihan 940x48px, isi dengan nilai warna ini: #c3c3c3, dan letakkan 20 piksel di bawah ruang iklan seperti pada gambar di bawah.

Kami akan meneruskan dan merebut Alat Jenis Mendatar (T), dan menaip tajuk-tajuk sub-halaman kami menggunakan tetapan aksara berikut:

  • Font: Percuma.
  • Berat: Biasa.
  • Saiz: 14px.
  • Kerning: Optik.
  • Warna: #2d2d2d/#ffffff.
  • Anti-Aliasing: Renyah.

Sekarang marilah kita memisahkan tajuk yang baru kita buat. Dengan menggunakan Alat Talian (U), buat garis menegak di antara setiap dua tajuk, isi dengan nilai warna ini: #b4b4b4, dan pastikan untuk meninggalkan 20px di antara setiap tajuk dan garis menegak.


Langkah 8: Mencipta Menu Drop-Down

Sekarang mari buat menu lungsur, kan? Dapatkan Alat Rectangular Marquee (M), buatlah pilihan yang mengisi ruang antara dua garisan sekeliling perkataan "WOMEN" dan isikan dengan nilai warna ini: #2d2d2d. Kemudian buat lagi satu lagi pilihan 340x147px, isi dengan nilai warna yang sama, dan sejajarkannya mengikut imej di bawah. Ini akan berfungsi sebagai latar belakang untuk menu drop-down kami.

Tekan butang (T) pada papan kekunci anda untuk memilih Alat Jenis Mendatar (T), dan mula menaip unsur sub-menu, menggunakan tetapan aksara berikut:

  • Font: Helvetica New LT Std.
  • Berat: 55 Rom.
  • Saiz: 12px.
  • Kerning: Metrik.
  • Leading: 30px.
  • Warna: #767676.
  • Anti-Aliasing: Sharp.

Akhirnya, pastikan mereka diselaraskan seperti imej berikut.

Apa yang akan kita lakukan sekarang adalah untuk membuat bingkai untuk imej (di mana kita akan meletakkan gambar seorang wanita hanya untuk memberitahu pengguna yang telah anda pilih bahagian "Wanita"). Jadi ambil Rectangular Marquee Tool (M), buat pilihan 139x105px, dan isi dengan #1f1f1f, kemudian buat pilihan lain 121x87px dan isikan dengan #767676. Pastikan pusat kedua-dua segi empat tepat sejajar dan menegak.


Langkah 9: Mencipta Bar Carian

Mari maju dan buat bidang input untuk bar carian kami. Dapatkan Alat Rectangle Bulat (U), buat persegi panjang 123x26px, dengan radius 15px, dan isi dengan putih. Jangan lupa menyelaraskannya seperti yang ditunjukkan dalam imej di bawah.

Menggunakan Alat Jenis Mendatar yang menggerunkan (T), ketik kata "Carian" di dalam segi empat bulat dan gunakan tetapan aksara berikut kepadanya:

  • Font: Helvetica New LT Std.
  • Berat: 55 Rom.
  • Saiz: 12px.
  • Kerning: Metrik.
  • Warna: #767676.
  • Anti-Aliasing: Sharp.

Cari ikon kaca pembesar, dan letakkan di sebelah kanan bar carian, pastikan ia berwarna dengan #929292 dan sejajar mengikut imej di bawah.


Langkah 10: Mencipta Bar Carian

Mari mulakan mewujudkan "Kandungan Pilihan" kawasan. Mulakan dengan membuat pilihan 640x315px menggunakan Alat Rectangular Marquee (M), dan isikan dengan #c3c3c3.

Sekarang mari buat bar ini di mana mesej tentang produk yang dipaparkan pergi. Dapatkan Alat Rectangular Marquee (M), buat pilihan 480x33px, isikan dengan nilai warna ini: #767676, dan selaraskannya seperti ditunjukkan dalam imej di bawah.

Pilih Alat Jenis mendatar (T) dan ketik mesej menggunakan tetapan aksara berikut:

  • Font: Helvetica New LT Std.
  • Berat: 55 Rom.
  • Saiz: 14px.
  • Kerning: Metrik.
  • Warna: #ffffff.
  • Anti-Aliasing: Sharp.

Jangan lupa menyelaraskan teks dan latar belakang seperti yang ditunjukkan.

Sudah tiba masanya untuk menaip beberapa teks pengantar. Dapatkan Alat Jenis Mendatar (T), dan taip perkataan "Koleksi" menggunakan tetapan aksara berikut:

  • Font: Georgia.
  • Berat: Bold.
  • Saiz: 18px.
  • Kerning: Optik.
  • Warna: #2d2d2d.
  • Anti-Aliasing: Renyah.

Kemudian taip perkataan "Summer" dengan menggunakan tetapan aksara berikut:

  • Font: Georgia.
  • Berat: Bold.
  • Saiz: 48px.
  • Kerning: Optik.
  • Warna: #ffffff.
  • Anti-Aliasing: Renyah.

Dan akhirnya taip "Membantu anda kelihatan sejuk" dengan tetapan watak berikut yang digunakan untuknya:

  • Font: Helvetica New LT Std.
  • Berat: 55 Rom.
  • Saiz: 18px.
  • Kerning: Optik.
  • Warna: #2d2d2d.
  • Anti-Aliasing: Renyah.

Pastikan untuk menyelaraskan teks kami seperti yang ditunjukkan dalam imej di bawah.


Langkah 11: Mewujudkan Tag Jualan

Sekarang mari kita buat tag jualan kami. Gunakan Alat Ellipse (U) untuk membuat bulatan 80x80px, isi dengan nilai warna ini: @2d2d2d, kemudian letakkannya seperti yang ditunjukkan dalam imej di bawah.

Taipkan beberapa teks di dalam kalangan ini (contohnya "40% off") dan gunakan tetapan aksara berikut kepadanya:

  • Font: Georgia.
  • Berat: Biasa/Bold.
  • Saiz: 48px/14px.
  • Kerning: #Metrik.
  • Warna: #ffffff.
  • Anti-Aliasing: Renyah.

Langkah 12: Mewujudkan Kawasan Kandungan Utama

Mari maju dan mula membuat kawasan kandungan utama kami. Kami akan bermula dengan tajuk, jadi ambil Alat Jenis mendatar (T), taip tajuk, dan gunakan tetapan aksara berikut kepadanya:

  • Font: Percuma.
  • Berat: Biasa.
  • Saiz: 24px.
  • Kerning: Optik.
  • Warna: #2d2d2d.
  • Anti-Aliasing: Renyah.

Jangan lupa untuk meletakkannya 20px di bawah kawasan kandungan yang diketengahkan.

Dengan Alat Jenis mendatar (T) masih dipilih, ketik keterangan ringkas untuk tajuk ini, menggunakan tetapan aksara berikut:

  • Font: Helvetica New LT Std.
  • Berat: 55 Rom.
  • Saiz: 12px.
  • Kerning: Metrik.
  • Warna: #767676.
  • Anti-Aliasing: Sharp.

Dan tentunya ia harus diselaraskan mengikut grid asas seperti yang ditunjukkan dalam imej di bawah.

Menggunakan Alat Talian (U), buat garis yang lebar 640px dan warna dengan nilai ini: #e5e5e5.


Langkah 13: Mewujudkan Imej Produk

Dapatkan Rectangular Marquee Tool (M), membuat pilihan 200x152px, isi dengan #2d2d2d dan selarinya 20px di bawah garisan yang baru saja kami buat.

Buat tag jualan lain seperti yang kita buat pada langkah 11, tetapi kali ini membuat bulatan 45x45px dan isikan dengan White. Dan teks itu harus 24px / 14px dan diisi dengan #767676.

Gunakan Alat Jenis Mendatar (T) untuk menaip nama dan harga produk menggunakan tetapan aksara berikut:

  • Font: Helvetica New LT Std.
  • Berat: 55 Rom.
  • Saiz: 12px.
  • Leading: 21px.
  • Kerning: Metrik.
  • Warna: #767676/#000000.
  • Anti-Aliasing: Sharp.

Kami akan mengisi ruang kosong ini antara teks dengan ikon - sekiranya anda tertanya-tanya.

Letakkan ikon keranjang belanja, letakkannya di ruang kosong yang kami tinggalkan pada langkah sebelumnya, dan selaraskannya seperti ditunjukkan dalam imej di bawah.

Sekiranya ikon berwarna, pergi ke Layer>Layer Penyesuaian Baru>Hitam & Putih ... untuk menjadikannya skala kelabu.

Pilih semua elemen pratonton produk yang kami buat dalam langkah ini, dan kumpulankannya bersama-sama, kemudian duplikat folder ini sebanyak lima kali. Sejajarkan enam pratonton produk seperti yang ditunjukkan dalam imej di bawah.


Langkah 14: Mewujudkan Banner Sidebar Besar

Sekarang mari kita bekerja di bar sisi kami. Kami akan bermula dengan spanduk besar, jadi ambil Rectangle Tool (U), buat persegi panjang 280x314px dan isi dengan #2d2d2d. Dengan alat yang masih terpilih membuat lagi segi empat tepat 280x41px dan isikan dengan #767676, kemudian selaraskan kedua-duanya seperti yang ditunjukkan dalam imej di bawah.

Menggunakan Alat Jenis mendatar (T), taip tajuk untuk sepanduk ini menggunakan tetapan aksara berikut:

  • Font: Percuma
  • Berat: Biasa.
  • Saiz: 18px.
  • Kerning: Optik.
  • Warna: #ffffff.
  • Anti-Aliasing: Renyah.

Tekan kekunci (U) untuk memilih Alat Ellipse (U), buat bulatan yang 210x210px, isikan dengan #7676767 dan cuba menyusunnya entah bagaimana seperti pada gambar di bawah.

Sekarang untuk menghilangkan bahagian bulatan yang keluar dari latar belakang spanduk, buka panel Lapisan, letakkan lapisan bulatan ("tag_bg") tepat di atas lapisan latar belakang spanduk ("box_bg"), kemudian klik kanan pada lapisan bulatan> Buat Topeng Clipping.

Kini menggunakan Alat Jenis mendatar (T), taip sesetengah teks di dalam kalangan ini, menggunakan tetapan aksara berikut:

  • Font: Georgia
  • Berat: Biasa.
  • Saiz: 18px / 14px / 24px / 30px.
  • Kerning: Optik.
  • Warna: #ffffff.
  • Anti-Aliasing: Renyah.

Juga pastikan bahawa "Faux Bold" dalam panel aksara dipilih.


Langkah 15: Mewujudkan Banner Sidebar yang lebih kecil

Ambil Rectangle Tool (U) dan buat persegi panjang 280x144px, isi dengan #2d2d2d, dan letakkannya mengikut imej di bawah.

Sekarang mari kita buat butang "Ketahui Lebih Lanjut". Gunakan Alat Rectangular Marquee (M) untuk membuat pilihan 120x30px dan isikan dengan #767676.

Kemudian ambil Alat Jenis Mendatar (T), ketik "Ketahui Lebih Lanjut" di dalam segi empat tepat dengan menggunakan tetapan aksara berikut:

  • Font: Helvetica New LT Std.
  • Berat: 55 Rom.
  • Saiz: 18px.
  • Kerning: Optik.
  • Warna: #ffffff.
  • Anti-Aliasing: Renyah.

Dengan Alat Jenis Mendatar (T) yang masih dipilih, taip sesetengah teks seperti pada imej di bawah menggunakan tetapan aksara berikut:

  • Font: Helvetica New LT Std.
  • Berat: 55 Rom.
  • Saiz: 14px / 24px / 18px.
  • Memimpin: 24px.
  • Kerning: Optik.
  • Warna:# ffffff.
  • Anti-Aliasing: Renyah.

Imej di bawah menunjukkan kepada anda cara menyelaraskan teks.

Buat salinan spanduk ini dan biarkan 20px ruang menegak di antara mereka.


Langkah 16: Mencipta Seksyen "Kemas Kini Twitter"

Buat pilihan 280x235px menggunakan Alat Rectangular Marquee (M), isi dengan putih, dan letakkan 20px di bawah sepanduk.

Dapatkan Alat Jenis Mendatar (T) dan ketik tajuk menggunakan tetapan aksara berikut:

  • Font: Percuma.
  • Berat: Biasa.
  • Saiz: 18px.
  • Kerning: Optik.
  • Warna: #2d2d2d.
  • Anti-Aliasing: Renyah.

Menggunakan Alat Talian (U) buat garis yang lebar 240px dan isi dengan nilai warna ini: #e5e5e5.

Cari ikon/ilustrasi burung Twitter dan letakkannya seperti dalam imej di bawah. Juga pastikan untuk menjadikannya skala kelabu seperti yang kita lakukan pada langkah sebelumnya.

Dapatkan Alat Jenis Mendatar (T) dan taip sesetengah teks sebagai contoh tweet, kemudian gunakan tetapan aksara berikut untuknya:

  • Font: Helvetica New LT Std.
  • Berat: 55 Rom.
  • Saiz: 12px.
  • Leading: 18px.
  • Kerning: Metrik.
  • Warna: #2d2d2d/#767676.
  • Anti-Aliasing: Renyah.

Kemudian ketik "Lagi Tweet" dengan menggunakan tetapan aksara berikut:

  • Font: Helvetica New LT Std.
  • Berat: 55 Rom.
  • Saiz: 12px.
  • Kerning: Metrik.
  • Warna: #2d2d2d.
  • Anti-Aliasing: Renyah.

Jangan lupa klik "Garis bawah" dalam panel Watak.


Langkah 17: Mencipta Seksyen "Produk Lain"

Dapatkan Alat Rectangle (U) dan buat persegi panjang 940x264px, isi dengan #ffffff, dan letakkan 20px di bawah bahagian "Twitter Updates".

Buat tajuk untuk bahagian ini yang sama seperti yang kita buat pada langkah sebelumnya. Kemudian gunakan Alat Talian (U) untuk membuat barisan lebar 898px dan isi dengan #e5e5e5.

Gunakan Rectangle Tool (U) untuk membuat segi empat tepat 178x113px. Buat tiga salinannya dan selaraskannya mengikut imej di bawah.

Sekali lagi, taip sesetengah maklumat mengenai produk dan gunakan tetapan aksara berikut untuk teks anda:

  • Font: Helvetica New LT Std.
  • Berat: 55 Rom.
  • Saiz: 12px.
  • Leading: 18px.
  • Kerning: Metrik.
  • Warna: #2d2d2d /#767676.
  • Anti-Aliasing: Renyah.

Akhirnya jangan lupa buat "Beli Sekarang" digariskan.

Cari ikon anak panah dan letakkannya seperti pada imej di bawah, cuba ubah saiznya kepada sesuatu sekitar 28x28px, dan isi dengan nilai warna ini: #2d2d2d. Buat satu lagi salinan ikon ini dan letakkan di sebelah kanan.


Langkah 18: Mewujudkan Kawasan Footer

Dapatkan Alat Rectangular Marquee (M) dan buat pilihan 1260x122px, kemudian isi dengan #2d2d2d.

Taip sesetengah teks dalam footer menggunakan tetapan aksara berikut:

  • Font: Helvetica New LT Std.
  • Berat: 55 Rom.
  • Saiz: 12px.
  • Leading: 21px.
  • Kerning: Metrik.
  • Warna: #ffffff / #767676.
  • Anti-Aliasing: Renyah.

Akhirnya letakkan salinan logo dan pastikan ia diselaraskan seperti pada gambar di bawah, dan itu sahaja!


Gabungan Warna

Sekarang bahawa kami telah selesai dengan wireframe skala kelabu, sudah tiba masanya untuk memberi tumpuan kepada pewarnaan antara muka kami. Warna adalah topik yang sangat besar, jadi saya hanya akan melalui bahagian kombinasi warna. Skim warna kami akan mengandungi tiga jenis warna:

  • Warna bawahan atau asas: Ini adalah warna yang lemah atau kurang subordinat. Ia berbeza atau melengkapkan.
  • Warna yang dominan atau utama: yang ini mentakrifkan nilai komunikatif kombinasi warna.
  • Aksen atau menyorot warna: Ini boleh bersimpati dengan asas atau warna utama. Atau sebaliknya, anda boleh memilih warna aksen yang kuat secara visual, dan kelihatan bersaing dengan warna utama, untuk memberikan ketegangan dalam kombinasi.

Imej berikut menunjukkan warna asas, utama dan aksen kami.


Bilik mencari

Oleh kerana kami akan menggunakan beberapa potret dalam reka bentuk kami, saya fikir saya sepatutnya bercakap mengenai "Looking Room". Secara awamnya, gambar potret akan mempunyai subjek dan ruang di sekelilingnya. Kepentingan visual dalam potret boleh datang dari pergerakan, iaitu bagaimana mata kita bergerak di sekitar tembakan. Dan untuk mendapatkan mata yang bergerak, jurugambar menyesuaikan ruang sekitar subjek dengan sewajarnya.

Jadi, contohnya seperti yang anda lihat dalam imej di bawah, penjajaran subjek di sebelah kiri (1), dengan Ruang Putih (Ruang Meninjau) di sebelah kanan, mewujudkan gerakan (3), yang menjadikan mata kita kelihatan ke arah di mana subjek kelihatan.

Bacaan lanjut:


Langkah 19: Mewarna Latar Belakang

Kini mari kita mula mewarnakan antara muka kita! Untuk mengisi lapisan latar dengan warna, anda boleh mengklik pada lakaran kecilnya di panel Lapisan sambil menahan kekunci Cmd/Ctrl untuk memilih pikselnya kemudian klik Shift + Backspace> Color ...> #f6f6f4. Atau anda boleh menambah Overlay Warna kepadanya.


Langkah 20: Mewarna Bar Teratas

Warna perkataan "Masuk" dengan nilai warna ini: #ffffff, "Nama pengguna/Kata Laluan" dengan: #8e8e8e, medan input dengan #8e8e8e, latar belakang butang dan "Daftar" dengan #ea6a53, dan teks navigasi dengan #999999.

Isi ruang pengiklanan dengan imej seperti yang ditunjukkan dalam imej di bawah, dan buat topeng keratan untuknya, seperti yang kita lakukan pada langkah 14.

Masa untuk mewarna logo. Berikan bulatan dan perkataan "Fesyen" nilai warna ini: #2d2d2d, isi huruf "F" dengan warna yang sama dengan latar belakang #f6f6f4, dan perkataan "store'' dengan #bc3726.


Langkah 21: Mewarna Bar Navigasi

Kami akan mengisi teks latar belakang navigasi dengan nilai warna ini: #c3c3c3, teks dengan #2d2d2d, perkataan "WAN" dengan #f6f6f4 (mewakili keadaan hover/dipilih), dan garis pemisah menegak dengan #b4b4b4.

Untuk menambah minat visual pada teks navigasi, kami akan menambah Drop Shadow kepadanya. Imej di bawah menunjukkan tetapan ...

Bergerak ke bar carian, kami akan mengisi medan input dengan #ffffff putih, perkataan "Carian" dengan #a6a6a6, dan ikon dengan #ea6a53.

Sekarang mari kita berikan bar sub-navigation kami beberapa warna ... Isikan latar belakang dengan #2d2d2d, teks dengan #c4c4c4, dan sempadan imej dengan #1f1f1f.

Kami akan membuat sempadan imej sedikit lebih menarik dengan menambah Drop Shadow dan Shadow Inner. Semua tetapan boleh dilihat dalam imej di bawah.

Akhirnya letakkan imej model perempuan seperti yang ditunjukkan dalam imej di bawah.

Kini tiba masanya untuk mewujudkan garis putus-putus antara item navigasi. Buka Adobe Illustrator, buat dokumen baru, pilih Alat Segmen Talian (\\), buat garisan yang lebar 135px, dan isi dengan Tiada (/). Kemudian buka panel Stroke dan sesuaikan tetapan anda mengikut imej di bawah.

Salin garis putus-putus dan tampalkannya ke dalam Adobe Photoshop, membuat dua salinannya, dan isi semuanya dengan nilai warna ini: #484848.


Langkah 22: Mewarna Banner Sidebar Besar

Kami akan memulakan langkah ini dengan meletakkan imej untuk mengisi latar belakang spanduk. Pergi ke Fail> Tempat ...> Pilih imej> Tempat.

Mari kita teruskan dan warna bulatan dengan teks di dalamnya. Nilai warna yang perlu kita gunakan ditunjukkan dalam imej di bawah.

Untuk menjadikan nombor "50" menonjol sedikit kita akan menggunakan Drop Shadow ke lapisan yang mengandunginya. Tetapan boleh dilihat pada imej di bawah.

Masa untuk bekerja pada tajuk ... Isikan latar belakang dengan nilai warna ini: 000000, dan teks dengan nilai warna ini: #c3c3c3. Kemudian buat dua baris putus-putus (seperti yang kita buat pada langkah 21) isikannya dengan #414141 dan letakkannya seperti ditunjukkan dalam imej di bawah.

Mari tambahkan minat visual ke latar belakang tajuk, dengan menambahkan tekstur grunge yang halus kepadanya. Muat turun set berus yang menakjubkan ini: "Fungsi Grunge Berus Sifar" yang dicipta oleh orang yang hebat di WeFunction atau mana-mana berus lain yang anda pilih. Buat lapisan baru tepat di atas lapisan latar tajuk, sambil memilihnya, cat di atas tajuk dengan salah satu berus yang menggunakan Alat Berus (B) (atau mungkin anda boleh menggunakan salah satu daripada PNGs dimasukkan sebagai ganti) mengisi dengan putih, kemudian mengurangkan kelegapan lapisan hingga 30%. Akhir sekali, klik kanan padanya> Buat topeng kliping ...


Langkah 23: Mewarna Kawasan Kandungan yang Ditampilkan

Kami akan mengisi latar belakang kawasan kandungan yang dipaparkan dengan kecerunan untuk menjadikannya kelihatan lebih menarik. Jadi teruskan dan ambil Gradient Tool (G), buka Editor Gradien dari panel Kawalan, dan tetapkan nilai warna anda dari #b6a397 hingga #9d8a83.

Kita perlu menentukan kawasan yang harus diisi dengan kecerunan, dan kita lakukannya dengan membuat pilihan di atasnya. Oleh itu, mari kita pergi ke panel Layers, klik pada gambar kecil lapisan latar sambil menahan kekunci Cmd/Ctrl untuk membuat pilihan di atasnya, dan dengan Gradient Tool (G) masih dipilih, pilih Gradien Radial, dan seret dari seperti yang ditunjukkan dalam imej di bawah sambil menahan kekunci Shift untuk menghalang malaikat.

Nilai warna elemen dalam bahagian ini ditunjukkan dalam imej di bawah.

Akhir sekali, cari gambar model wanita, letakkannya dalam dokumen kami, dan selaraskannya mengikut grid seperti yang ditunjukkan dalam imej di bawah.


Langkah 24: Mewarna Banner Sidebar Kecil

Sekali lagi, kami akan meletakkan imej lain sebagai latar belakang untuk sepanduk kami, dan menggunakan nilai warna yang ditunjukkan dalam imej di bawah untuk mewarnakan elemen kami.

Untuk membuat teks kami lebih menonjol, kami akan memberikan Drop Shadow. Tetapan boleh dilihat pada imej di bawah.

Dan kami akan melakukan hal yang sama dengan sepanduk lain ...

Sekarang mari kita beri beberapa warna ke bahagian "Kemas Kini Twitter" ... Imej di bawah mengandungi semua nilai warna yang harus kami gunakan untuk bahagian ini.


Langkah 25: Mewarna Kawasan Kandungan Utama

Kami akan mulakan dengan tajuk, isi dengan nilai warna ini: #2d2d2d, kemudian keterangan dengan nilai ini: #858585, kemudian baris dengan #e5e5e5.

Bergerak ke pratonton produk ... Pertama letakkan imej produk, kemudian warna semua elemen dengan nilai yang dilihat dalam imej di bawah.

Unsur-unsur dalam bahagian "Produk Lain" akan diwarnai dengan nilai yang sama seperti yang ditunjukkan pada langkah sebelumnya, hanya pastikan untuk mengisi latar belakang dengan #ffffff putih, dan ikon anak panah dengan #040707.


Mewarna Kawasan Footer

Isi latar footer dengan nilai warna ini: #2d2d2d, dan teks dengan #a0a0a0 dan #ffffff.

Dan akhirnya warna logo ditunjukkan dalam imej berikut ...


Kesimpulan

Dan itu cukup banyak! Saya harap anda telah menikmati membaca tutorial ini, dan yang lebih penting, anda dapati ia berguna. Sekiranya anda mempunyai sebarang soalan, jangan ragu untuk meninggalkan komen, dan saya akan berusaha sebaik mungkin untuk membantu.

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.