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

Reka Bentuk Laman Web Portfolio Inovatif Menggunakan Alternatif UI / UX

by
Length:LongLanguages:

Malay (Melayu) translation by Rana Salsabiela (you can also view the original English article)

Apakah nombor satu yang anda mahu tapak web portfolio anda lakukan?Menarik!  Hari ini, Paul J Noble akan membawa kita melalui penciptaan laman web uniknya .  Dia akan menunjukkan kepada kita petunjuk dan teknik dalam Adobe Photoshop, serta beberapa pendekatan pintar untuk menonjol dari pakej tapak portfolio lain.


Mewujudkan Laman Web Portfolio Adalah Impresif

Fikirkan laman web portfolio anda adalah jurucakap dalam talian anda untuk bakal pelanggan.  Jika dilakukan dengan betul, ia harus menunjukkan kepada orang lain apa yang anda lakukan, menunjukkan kerja terbaik anda, dan memberi mereka kesempatan untuk berhubung dengan anda.  Itulah sesuatu yang agak jelas - jadi apa perbezaan antara laman web portfolio tetap dan benar-benar cemerlang?

Kunci laman web portfolio yang berkesan bukan sahaja mempunyai projek yang hebat - ia meninggalkan kesan yang kekal pada pengunjung .  Pasti, ini mungkin bermakna mempunyai ilustrasi yang bagus jika anda seorang pereka grafik - tetapi untuk pereka dan pemaju web, ini sering bermakna ia perlu untuk menolak sempadan UI / UX dan penyandian untuk menunjukkan nilai terkuat.

Dalam tutorial ini, Paul J Noble akan menunjukkan kepada kita bagaimana dia menggunakan beberapa pendekatan yang mudah namun inovatif untuk UI / UX di laman webnya sendiri untuk membuat sebuah laman web portfolio yang dapat memaparkan harapan pengguna dengan menggunakan interaktiviti dan kesan pencahayaan yang halus.

Mari pergi lebih jauh!


Langkah 1 kanvas

Buat dokumen baru dalam Photoshop iaitu 1400 x 900.  Akhirnya laman HTML akan memaparkan elemen 'cair' (contohnya berskala) jadi kita perlu ingat bahawa reka bentuk akhir tidak akan menjadi saiz tetap.


Langkah 2 Peletakan Asas

Mewujudkan latar belakang pepejal adalah cara mudah untuk memulakan sesuatu.  Untuk reka bentuk ini kami akan menggunakan warna asas 
Ia cukup gelap untuk menyerlahkan imej latar depan sambil mengimbangi warna hitam tulen yang mungkin muncul dalam imej folio.  Kami juga akan menggunakan beberapa biru untuk mencipta warna 'sejuk' yang gelap yang akan diintegrasikan dengan elemen antara muka.

Pilih Layer> Layer Isi Baru> Warna Pepejal dan tetapkan warna # 252a3b.


Langkah 3 Meletakkan Panduan

Oleh kerana kita menggunakan susunan skala, kita perlu menentukan lebar mendatar minimum.  Bagi sebahagian besar laman web komersial ini adalah kira-kira 1000 piksel untuk menampung pengguna dengan resolusi 1024x768. Walau bagaimanapun untuk laman web ini, kami akan menyasarkan 1100 piksel sebagai lebar minimum.

Pertama, pastikan unit bimbingan anda ditetapkan kepada piksel.  Ini boleh ditetapkan dengan pergi ke Preferences> Units & Guides.

Kemudian pergi ke Lihat> Panduan Baru.  Oleh kerana kami akan meletakkan kandungan kami di tengah dan kami menargetkan lebar minimum 1100 piksel, kami harus meletakkan panduan menegak pada 150px dan 1250px.


Langkah 4 Buat Corak Tekstur

Struktur penyebaran pepenjuru yang lancar akan membantu mengangkat reka bentuk dengan mewujudkan pemisahan antara item portfolio latar belakang dan latar belakang bertekstur.

Untuk mencapai ini, kami akan memohon Lapisan mengisi corak.  Walau bagaimanapun, kita mesti membuat corak terlebih dahulu.

Buat dokumen 12x12 piksel baru dengan latar belakang telus dan tambahkan lapisan baharu dengan hitam (# 000000).

Sekarang, tambah lapisan baru (Layer> New> Layer).  Menggunakan alat pensil dengan saiz berus 1px, lukiskan tiga garisan sama seperti imej di bawah.

Matikan lapisan pengisi dan aturkan lapisan opacity kepada 6%.  Untuk menyimpannya sebagai corak yang kita pilih Edit> Tentukan Corak.

Kembali ke kanvas asal kami, buat lapisan baru dengan tekstur dengan memilih Layer> New Fill Layer> Pattern dan pilih pola yang telah ditetapkan.


Langkah 5 Navigasi

Sekarang bahawa kami telah membuat asas kami, kami boleh menggunakan beberapa lapisan rata yang terdiri daripada elemen utama laman web ini

Pertama, navigasi kami.  Oleh kerana laman web ini akan direka untuk tidak mempunyai tatal menegak, kita boleh meletakkan navigasi untuk menyelaraskan ke bahagian bawah skrin.

Buat Kumpulan baru dalam palet lapisan dan tandakan kumpulan ini 'Navigasi'.

Kemudian buat lapisan baru menggunakan Rectangle Tool (U).  Dengan tetingkap Info terbuka, gambar bentuknya kepada 1400x61 (lebar lebar tetingkap dokumen dan ketinggian 61 piksel).  Selaraskan lapisan ini di bahagian bawah tetingkap dokumen.

Sekarang, gunakan kecerunan pada lapisan dengan mengklik kanan lapisan lapisan dalam palet Layers dan pilih Pilihan Blending dan semak Gradient Overlay (secara alternatif, pilih Layer> Layer Style> Gradient Overlay).

Dalam Editor Gradien, klik pemilih warna bawah untuk membuka Pemilih Warna.  Untuk warna kiri (bentuk bawah) gunakan # 2f313a.  Untuk warna yang betul (bentuk atas) gunakan # 3c3f49.

Seterusnya, buat lapisan baru dan label 'sorot' ini.  Menggunakan alat Pensil dengan berus 1px dan #ffffff warna, lukiskan garisan sambil menahan pergeseran di bahagian atas bentuk segi empat tepat yang dibuat sebelumnya. Kemudian tetapkan kelegapan lapisan ini hingga 6%.


Langkah 6 Logotip

Buat lapisan teks 20 piksel baru dari sebelah kiri dokumen dan selaraskan teks yang akan berpusat secara menegak pada lapisan navigasi segi empat tepat.

Dalam contoh ini, font DIN Light telah digunakan pada 14px dengan penjejakan longgar 200.  Untuk membuat perubahan antara dua bahagian jenis logo dua warna digunakan.  Untuk bahagian pertama #dddddd dan kedua gelap # 737375.

Seterusnya, tambahkan bayangan drop yang lancar untuk membuat paparan teks ke latar belakang.  Pilih Layer> Layer Style> Drop Shadow.

Nyahtanda 'Menggunakan Global Light', tukar arah ke -45 darjah, tetapkan saiz ke 0px, jarak 1px dan kelegapan 30%.


Langkah 7 Kunci Navigasi

Untuk kekunci navigasi utama, kami akan menggunakan bentuk segi empat bulat.

Buat kumpulan baru yang dipanggil 'butang'.

Buat Bentuk Rectangle Bulat baru yang mengukur 279x31 dan 20px offset dari sebelah kanan tetingkap dokumen dan berpusat vertikal dalam kotak navigasi.

Klik kanan lapisan pada palet lapisan dan pilih Pilihan Blending.  Semak Gradien Overlay dan nilai penggunaan # 292c33 ke # 43464f.  Klik OK dan kemudian semak Bevel & Emboss.

Untuk saiz Bevel & Emboss set ke 0px dengan arah 122 darjah.  Kemudian tetapkan Highlight and Shadow opacity hingga 10% untuk mencipta kesan pencahayaan yang konsisten dan licin.

Tambah label teks dengan menggunakan tetapan font yang sama seperti yang digunakan untuk jenis logo.  Oleh kerana label butang berada dalam ruang menegak yang lebih kecil, saiznya hendaklah dikurangkan kepada 12 px dan menambah penjejakan kepada 100.  Gunakan warna yang sama dengan jenis logo tetapi gunakan warna lebih ringan pada label halaman semasa.

Untuk memisahkan kunci sambil mengekalkan paparan navigasi yang terang kita perlu menggambar dua baris, setiap 1px lebar.  Yang pertama mesti hitam (# 000000) dan yang lain putih (#FFFFFF).  Tetapkan kelegapan pada lapisan putih hingga 6% dan lapisan hitam hingga 12%.  Duplikat lapisan ini dengan Shift-clicking setiap dan kemudian klik kanan untuk dipilih.  Posisi lapisan salin dengan jarak yang konsisten dalam navigasi.


Langkah 8 Button Media Sosial

Butang ini mempunyai fungsi yang berbeza daripada yang lain dari nav supaya kami akan menggunakan gaya yang mencadangkan ini.  Mari kita bawa butang ini untuk melengkapkan navigasi utama.

Pertama, buat kumpulan baru yang dipanggil 'sosial' dan kumpulkan kumpulan ini dalam kumpulan induk 'navigasi'.

Sekarang, gunakan alat bulat Rectangle dengan jejari 4 px dan tahan kekunci shift, buat bentuk segi empat tepat 25x25 px.  Letakkan ini secara menegak di tengah-tengah navigasi dan letakkan 22 px bentuk di sebelah kiri butang navigasi utama.

Klik kanan pada bentuk yang baru diwujudkan dan pilih Pilihan Blending.

Tambah bayang bayang.  Untuk bayang drop ini kami akan menggunakan warna putih (#FFFFFF) dan tetapkan mod campuran untuk Meringankan.  Tetapkan jarak 1px, 0% lebar dan saiz kepada 0px.  Ini akan mewujudkan kesan pendarahan yang lebih rendah dan oleh itu butang menjadi inset.

Seterusnya, semasa masih berada dalam tetingkap Gaya Lapisan, periksa bayangan batin.  Gunakan hitam (# 000000) dengan kelegapan pada 39%, jarak 1px dan saiz 4px.

Akhir sekali, pilih Overlay Warna dan gunakan # 353741.  Ini akan meratakan rupa bentuk dan menambah kontras ke latar belakang.

Untuk ikon media sosial, kami akan mengambil imej yang sedia ada dan mengesan kelebihannya menggunakan alat pena untuk membuat laluan (pastikan Path dipilih dalam menu Alat pilihan).

Setelah membuat laluan ikon, gunakan Alat Pemilihan Laluan dan klik kanan laluan yang baru anda buat (pastikan laluan dipilih dalam palet Paths).  Pilih Menentukan Bentuk Tersuai ... Simpan Bentuk.

Kita kini boleh menggunakan ikon sebagai objek vektor terukur.  Menggunakan alat Pen, ubah Pilihan untuk Bentuk Lapisan (item kiri atas dalam bar Pilihan) dan pilih Custom Bentuk Tool, kemudian pilih ikon yang baru dibuat.  Tekan terus kekunci Shift, seret objek agar sesuai dengan jubin ikon. 

Tetapkan kelegapan ikon kepada 20%.

Ulangi langkah ini untuk ikon media sosial yang lain.


Langkah 9 Panduan Lain

Dalam contoh ini, kami akan memaparkan imej folio 640x480 px.

Kerana kita mahu mengarahkan imej ciri secara menegak ke angkasa di atas navigasi, kita perlu menambah beberapa panduan lagi.  Pilih Lihat> Panduan Baharu dan tambahkan panduan mendatar 180px dan 660px.  Ini akan meletakkan imej yang kita lihat di tengah-tengah ruang menegak di atas navigasi.

Kami juga memerlukan beberapa teks di sebelah kiri imej yang dipaparkan supaya kami akan menambah panduan menegak ke 400px dan 350px untuk margin teks dan memberi ruang navigasi di sebelah imej.  Akhir sekali tambahkan bimbingan menegak pada 1040px dan 1070px untuk menentukan tepi imej yang dilihat dan margin antara imej bersebelahan.


Langkah 10 Buat Placeholder Fig

Buat kumpulan baru yang dipanggil 'Projek'.  Kemudian, dengan menggunakan alat Rectangle, lukis segi empat tepat 640x480px selari dengan bahagian atas sebelah kiri panduan menegak pada 400px dan bahagian atas kepada panduan mendatar pada 180px.  Ini akan menjadi tempat untuk foto utama kami.

Klik kanan lapisan yang baru dibuat dan pilih Rasterize Layer.

Sekarang, tahan kekunci Alt, klik dan seret lapisan untuk membuat salinan. Pindahkan lapisan ini ke kanan lapisan dengan margin 30px untuk diselaraskan dengan panduan pada 1070px dan gunakan baris asas yang sama.

Buat dua lagi salinan dan selaraskan ini ke bahagian bawah setiap satu dengan margin 30px di antara.

Kemudian, gunakan alat Cat Bucket, isi setiap bentuk dengan warna # 252a3a.


Langkah 11 Vignette

Buat Kumpulan baru bernama 'Vignette' di bawah kumpulan 'Navigasi' dan di atas kumpulan 'Projek'.

Buat lapisan baru dan gunakan alat Cat Bucket untuk mengisi lapisan dengan warna latar depan # 0f1219.

Menggunakan alat Ellipse, lukis garisan potong di penjuru panduan lukisan utama.

Nah, untuk membuat kesan lakaran, kita perlu memotong bahagian ini sambil membuat pelarasan kelebihan.  Untuk mencapai ini, kami akan menggunakan Pilih> Ubah suai> Bulu.  Bulu yang telah dipilih dengan 60px kemudian potong lapisan pemilihan (Ctrl-x / Command-x).


Langkah 12 Buat Masker Projek

Oleh kerana kami akan menunjukkan tugas itu, kami perlu meletakkan beberapa tangkapan skrin dalam ruang letak.  Kembali ke kumpulan 'Projek' dan tampal tangkapan skrin semasa pemegang tempat utama dipilih.  Ini akan memasukkan lapisan di atas pemegang tempat.  Kemudian, klik kanan lapisan dan pilih Create Clipping Mask.

Tampal tiga tangkapan skrin lain ke ruang letak yang berbeza.

Opacity terbuka untuk setiap tangkapan skrin kecuali untuk screenshot di pertengahan 20%.


Langkah 13 Memasuki Teks

Untuk memberi penjelasan setiap projek, kami akan menggunakan tiga lapisan teks.  Buat kumpulan baru di atas kumpulan 'vignette' ke "rumah" lapisan ini.

Untuk yang pertama, tajuk, kami akan menggunakan font cahaya.  Dalam contoh ini saya telah menggunakan DIN Light tetapi typeface yang serupa juga berfungsi dengan baik.  Menggunakan alat Teks melukis kotak teks dalam panduan di sebelah kiri imej utama dan 40px di bawah panduan teratas. Tetapkan warna ke #FFFFFF, menjejaki -25 untuk jarak huruf yang ketat dan gunakan ukuran font 28px.

Kami juga akan menambah baris untuk kategori dan tarikh projek.  Tetapkan saiz menjadi 14px, menjejaki hingga 100, memaksakan tudung dan gunakan warna # 338966 untuk menyesuaikan garis ini.

Kemudian, untuk teks badan, kami akan menggunakan font sistem seperti Lucida Grande atau Lucida Sans Unicode 12px dengan warna # 8C8F95 dan tinggi garis 18px.


Langkah 14 Tambah kawalan tetikus

Untuk menavigasi laman web folio kami, kami akan membenarkan kawalan tetikus atau papan kekunci.  Penempatan intuitif untuk butang arah navigasi mengikut fungsi.  Sebagai contoh, kekunci anak panah kanan akan pergi ke sebelah kanan imej utama.

Untuk butang kami akan menggunakan bentuk tembus yang boleh mengalihkan kelegapan pada aktiviti hover atau klik.  Buat kumpulan baru yang dipanggil 'Butang' yang berada di atas kumpulan 'Vignette'.

Kemudian, buat dokumen baru dengan dimensi 37x37px.  Menggunakan alat pena, lukiskan bentuk chevron seperti di bawah.  Ulangi proses di Langkah 8, menggunakan Alat Pemilihan Path, klik kanan bentuk dan pilih Tentukan Bentuk Custom.  Simpan bentuk.

Kembali ke kanvas utama kami, gunakan alat Custom Shape untuk memasuki bentuk pra-dibuat.

Kemudian, pilih Edit> Transform> Flip secara mendatar.  Ini akan mengarahkan anak panah ke kanan.  Klonkan bentuk ini dan gunakan Edit> Transform> Putar 90 darjah mengikut arah jam untuk membuat bentuk penunjuk ke bawah.

Kedudukan setiap bentuk ini di tengah-tengah setiap sisi arah.  Benarkan margin 15px supaya butang boleh bertindih dengan imej bersebelahan dan mengurangkan kelegapan hingga 12%.


Langkah 15 Peta Orientasi

Untuk pengguna tahu di mana mereka berada dalam portfolio keseluruhan, kami akan menerangkan reka bentuk grid dan menggunakan garis dengan ketinggian yang berbeza untuk mewakili lajur imej dan penunjuk untuk menentukan posisi tontonan semasa.

Buat kumpulan baru yang dipanggil 'Orientasi' dan letakkan kumpulan ini di atas kumpulan 'Vignette'.

Menggunakan alat Pensil, pilih set berus Square dari menu lalat.  Kemudian, dengan ketebalan #FFFFFF dan ketebalan 5px, lukisan garis selari dengan panduan sempadan ketinggian dan 60px ketinggian.

Klon lapisan ini dan letakkan 2px ini ke kanan.  Ulangi ini kepada 12 baris.

Tetapkan kelegapan untuk semua lapisan hingga 12%.  Dan cara mudah untuk melakukan ini adalah untuk menetapkan kelegapan untuk lapisan pertama, kemudian klik kanan pada lapisan dan pilih Salin Layer Style.  Kemudian pilih semua lapisan yang tinggal dan pilih Gaya Layer Paste.

Tingkatkan lapisan ini dengan menggunakan perintah Edit> Percuma Transform untuk memendekkan / menaikkan setiap baris.

Akhir sekali, buat lapisan baru dan gunakan pensel sekali lagi untuk menarik penanda pada baris pertama.  Inilah penunjuk kedudukan kami.


Langkah 16 Kawalan Keyboard

Selalunya kawalan papan kekunci akan menawarkan pengalaman navigasi intuitif.  Bagaimanapun, kita mesti membiarkan pengguna mengetahui bahawa papan kekunci dapat mengawal navigasi.  Untuk mencapai ini, kami akan mewujudkan ikon anak panah papan kekunci.

Buat kumpulan baru yang dipanggil 'Papan Kekunci' dan letakkannya di atas kumpulan 'Vignette'.

Menggunakan alat Rectangle Shape, seret persegi (tahan Shift) 20x20px dengan warna # 262a34.  Klik kanan lapisan dalam palet Layer dan pilih Pilihan Blending.  Semak Stroke dan sapukan 1px stroke di luar dengan warna # 32343f.

Kemudian, gunakan alat pena (pastikan gaya ditetapkan ke Lalai dalam bar Opsyen) dan dengan #fff imej anak panah dengan titik persegi.  Sesuaikan mengikut keperluan dengan alat Pemilihan Langsung.  Tetapkan kelegapan hingga 20%

Dalam palet lapisan, shift shift pilih dua lapisan yang baru dibuat.  Klik kanan dan pilih Lapisan duplikat.  Kemudian, dengan menggunakan menu Edit> Pilihan Transform, putar lapisan salin ke orientasi yang betul.  Ulangi langkah ini untuk membuat semua empat ikon.


Kesimpulannya

Baik!  Kini kami selesai dengan bahagian reka bentuk projek ... yang bermaksud semua yang perlu kita lakukan adalah kod menggunakan beberapa HTML / CSS asas, Hotkey jQuery , dan beberapa helah jQuery tambahan.  Sekiranya ada orang yang ingin melihat bagaimana Paul memandi reka bentuk ini, marilah kita tahu apa yang dikatakannya supaya kita dapat menetapkannya!

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.