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

Desain Timeline Halaman Portofolio Luwes Menggunakan Photoshop

by
Length:LongLanguages:
This post is part of a series called Design and Build a Responsive Timeline Portfolio Page.
Building the Responsive Timeline Portfolio Page

Indonesian (Bahasa Indonesia) translation by Baba Baddolo (you can also view the original English article)

Dalam tutorial ini saya akan menggunakan Photoshop CS6 untuk merancang halaman portofolio tiga kolom sederhana, bersih, dengan timeline yang terbaru. Selama proses ini kita akan melihat pembuatan grid khusus dengan panduan, tipografi styling, dan bermain dengan warna dan kontras untuk mencapai estetika yang kita inginkan. Fail PSD yang telah selesai akan siap diserahkan ke pengembang untuk dikodekan.


Aset Tutorial

Untuk dapat mengikuti, Anda memerlukan aset berikut (tersedia secara gratis):


Persiapkan Dokumen - Dokumen

Langkah 1

Mulailah dengan membuat dokumen baru (File > New…) dengan menggunakan pengaturan yang ditunjukkan di bawah ini.

Create new document
Pastikan resolusinya disetel ke 72 pixels / inch

Langkah 2

Mari kita pasang beberapa pemandu jadi layout kita punya cukup ruang dan terlihat seimbang. Buka  View > New Guide… dan atur panduan berikut: vertikal pada 20px, 50px, 115px, 230px, 550px, 570px, 875px dan 1180px, dan horizontal pada 60px.

Petunjuk: Anda juga bisa menggunakan plugin Photoshop GuideGuide untuk membuat proses ini semakin cepat.

Add guidelines

Langkah 3

Kita akan menyimpan dokumen kita dengan baik sejak awal, jadi mari kita buat tiga layer kelompok bernama Left Sidebar, Descriptions and Work. Dengan tetap menggunakan Photoshop etiquette ini akan menjaga agar segala sesuatunya tetap teratur dan mudah di navigasi atau di edit. Untuk membuat grup masuk ke Layer > New > Group… dan berikan masing-masing judul seperti yang disebutkan. Untuk pembuatan grup dengan cepat cukup klik ikonnya.

Quickly create new group

Merancang Area Sidebar Kiri

Sidebar di sebelah kiri akan berfungsi sebagai area untuk profil pengguna, avatar, hipertaut sosial dan navigasi utama Mari membangunnya!

Langkah 1

Pilih Rectangle Tool (T), ubah warna foreground menjadi #11171c dan gambar persegi panjang 230x1320px di dalam kelompok Left Sidebar . Harus ditempatkan di sebelah kiri dokumen antara tepi dokumen dan pedoman vertikal keempat.

Draw a rectangle on the left

Langkah 2

Buat grup baru di atas bentuk persegi panjang yang telah dibuat sebelumnya dan beri nama Profile Pic. Setelah itu, pilih Ellipse Tool (U) dan, tahan tombol  Shift , gambar lingkaran 100x100px dan letakkan tepat di bawah panduan horizontal pertama. Ini harus dipusatkan dengan panduan vertikal ketiga juga Ini harus dipusatkan dengan panduan vertikal ketiga juga.

Draw a circle

Langkah 3

Sekarang pergilah ke uifaces.com dan ambil salah satu avatar yang tersedia. Atau, hanya menemukan foto Anda sendiri dan paste di atas bentuk lingkaran yang baru saja dibuat. Setelah itu, tahan tombol  Alt  dan tetikus di atas thumbnail layer foto sampai Anda melihat panah bawah yang kecil. Bila Anda melihatnya, lepaskan tombolnya dan itu akan membuat  Clipping Mask, mengikat foto Anda ke bentuk melingkar. Sejajarkan itu sesuai keinginan Anda, dengan menggunakan  Move Tool (V).

Place photo above the circle

Langkah 4

Sekarang perkecil grup Profile Pic dengan mengklik panah kecil di sebelah judul grup. Setelah itu, ubah warna foreground menjadi #FFFFFF dan pilih Horizontal Type Tool (T). Pilih font Lato (Regular) , atur ukuran menjadi 16pt dan tulis nama pemilik portofolio kita. Dalam kasus saya ini adalah Chris Johnson yang benar-benar fiktif. Tempatkan 25px di bawah gambar profil dan pastikan itu berpusat pada panduan vertikal ketiga.

Write owner name

Langkah 5

Sekarang kita membutuhkan deskripsi singkat untuk portofolio kita sehingga pengunjung langsung merasakan apa itu. Kita akan menggunakan alat yang sama; yang perlu kita lakukan adalah mengurangi ukuran font menjadi 14pt dan menulis beberapa baris singkat tentang pemilik portofolio. Agar terlihat terorganisir dan seimbang letakkan 20px lebih rendah sehingga memiliki beberapa ruang untuk bernafas.

Write short description

Langkah 6

Baik. Sekarang mari kita letakkan beberapa ikon media sosial sehingga mudah terhubung dengan pemilik portofolio. Buat grup baru dengan judul berikut:  Social Media. Setelah itu, pergilah ke Iconfinder untuk mengunduh ikon  DribbbleTwitterFacebook dan Google+ sebagai PNG. Seret mereka ke dokumen Photoshop Anda dan letakkan di dalam grup Social Media . Sekarang klik kanan ikon Dribbble, pilih Blending Options.. dan terapkan pilihan  Color Overlay . Alih-alih default merah, atur warna menjadi putih.

Set color overlay

Langkah 7

Semua ikon lainnya juga harus berwarna putih, jadi mari kita menerapkan gaya layer yang sama ke keseluruhan ikon. Cukup klik kanan layer ikon Dribbble dan pilih Copy Layer Style. Setelah itu, tahan tombol CMD dan pilih layer TwitterFacebook dan Google+ . Sekali lagi klik kanan salah satu dari mereka dan pilih Paste Layer Style. Akhirnya, selaraskan ikon sehingga ada celah 10px di setiap sisi dan kelompok ditempatkan 20px di bawah teks deskripsi.

Paste layer style and align icons

Langkah 8

Mari kita ubah warna foreground menjadi putih #FFFFFF, lalu pilih Line Tool (U), atur weight ke 1px dan tahan tombol Shift , tarik garis horizontal dari tepi dokumen kiri ke panduan vertikal keempat. Pindahkan 50px dari ikon.

Draw 1px horizontal line

Langkah 9

Untuk membuat garis kita lebih halus secara visual, mari kita mengurangi Opacity layer ke 10%.

Reduce line layer opacity

Langkah 10

Mari sekarang berkonsentrasi pada navigasi kita, jadi buat grup baru dengan nama Navigation dan letakkan di atas layer persegi panjang yang gelap. Setelah itu, pilih ikon dokumen dari Free Vector Icons from Chapps kumpulan ikon dan seret ke dokumen portofolio Anda. Tekan CMD+T untuk mengubah ukuran ikon menjadi 13x16px. Setelah itu, klik dua kali nama layer dan ganti namanya menjadi Work icon. engan itu selesai, klik dua kali thumbnail layer dan ubah warnanya menjadi #d35136. Tempatkan ikon 40px di bawah garis halus dan 20px dari tepi kiri, jadi sejajar dengan panduan vertikal pertama.

Resize the icon

Langkah 11

Sekarang untuk beberapa item navigasi. Pilih  Horizontal Type Tool (T), pilih font Lato (Bold) , atur ukuran menjadi 14pt dan tuliskan berikut ini:  WORK. Tempatkan di depan panduan horizontal kedua dan pastikan itu sejajar dengan  Work icon.

Write work

Langkah 12

Ubah warna foreground menjadi #424a51 dan, dengan menggunakan alat teks yang sama, tuliskan beberapa kategori untuk bekerja di bawah pekerjaan, masing-masing dimulai dari baris baru. Pastikan tinggi garis diatur ke 24pt sehingga kategori kita mudah dibaca.  Tempatkan kategori layer 20px di bawah layer teks yang telah dibuat sebelumnya.

Write down categories

Langkah 13

Kita perlu menunjukkan keadaan aktif hipertaut. Untuk kategori aktif gunakan #FFFFFF putih, cukup klik teks sementara  Horizontal Type Tool (T) masih dipilih, sorot kategori pertama dan ubah warnanya.

Change active link to white

Langkah 14

Sekarang pilih ikon pengguna dari kumpulan ikon yang sebelumnya digunakan dan ubah ukurannya menjadi 16x16px menggunakan CMD+T. Klik dua kali pada icon layer thumbnail dan ubah warnanya menjadi #27b599, ubah nama layer menjadi User icon sehingga lebih mudah mengatur layer kita. Tempatkan 30px di bawah kategori terakhir untuk memberinya ruang negatif yang akan bertindak sebagai pemisah.

Place user icon

Tahap 15

Ubah warna foreground menjadi hijau #27b599 seperti yang digunakan untuk User icon dan pilih Horizontal Type Tool (T). Pilih font Lato (Bold) , atur ukurannya menjadi 14pt dan tulis ABOUT. Tempatkan label ini tepat setelah ikon pengguna, seperti yang Anda lakukan untuk bagian di atas. Kemudian ubah warna foreground menjadi #424a51 dan masukkan beberapa judul hipertaut untuk bagian "about".

Write down about link titles

Langkah 16

Mari sekarang buat bagian terakhir pada navigasi kita; Kontak. Pilih ikon surat dari Free Vector Icons from Chapps dan ubah ukurannya menjadi 16x13px, setelah itu ubah warnanya menjadi #088ecc dan letakkan secara konsisten seperti ikon sebelumnya, 30px di bawah layer teks terakhir dari bagian  About . etelah memasuki teks CONTACT , ubah warna foreground menjadi #424a51 dan tuliskan beberapa judul hipertaut untuk bagian tersebut.

Designing navigation contact section

Merancang Area Deskripsi

Pergeseran satu blok ke kanan, mari kita mulai dengan deskripsi item portofolio kita.

Tahap 1

ita akan meminimalkan grup Navigation dan Left Sidebar yang saat ini digunakan dengan mengeklik panah kecil di samping nama grup. Perluas grup Descriptions , ubah warna foreground menjadi #f7f7f7 dan pilih Rectangle Tool (T). Setelah itu, gambar bentuk persegi panjang vertikal antara tepi Left Sidebar dan pedoman vertikal kelima. Kotak persegi ini harus 320x1320px.

Draw a vertical rectangle

Langkah 2

Sekarang ubah warna foreground menjadi #e7e7e8 dan pilih Line Tool (U). Atur Bobot ke 1px dan, tahan tombol Shift, tarik garis vertikal dari atas ke bawah pada pedoman vertikal kelima. Ini akan menciptakan pemisahan visual yang lebih baik antara latar belakang bagian kelompok Descriptions dan latar belakang utamanya. Tekan CMD+; untuk menyembunyikan / menyingkapkan panduan. Terakhir, ganti nama layer garis ke V line sehingga masuk akal nanti.

Draw a vertical line

Langkah 3

Kita akan menggambar garis vertikal lainnya, jadi ubah garis Weight menjadi 3px dan gambar garis lain di dokumen (tahan tombol Shift untuk mempertahankan untuk tetap vertikal secara sempurna). Klik dua kali pada nama layer untuk mengganti nama menjadi Timeline. Setelah itu, gerakkan garis 24px langsung dari tepi Left Sidebar dan 30px turun dari bagian atas dokumen.

Draw another line

Langkah 4

Ubah warna foreground menjadi red #d35136 yang sebelumnya digunakan dan pilih Ellipse Tool (U). Setelah itu, tahan tombol Shift dan gambar lingkaran 11x11px. Tempatkan 20px ke kanan dari tepi area Left Sidebar dan 20px turun dari bagian atas dokumen. Lingkaran kecil kita harus ditempatkan dengan baik di bagian atas garis yang baru saja dibuat.

Draw a red circle

Langkah 5

Sekarang klik kanan layer lingkaran yang baru saja dibuat dan pilih  Blending Options... Klik pada Stroke. etapkan Size ke 3px, Position ke Outside dan warnai #f7f7f7. Stroke warna latar belakang ini akan menciptakan efek lingkaran kita yang mengambang di samping garis.

Stroke options
Circle with stroke

Langkah 6

Ubah warna foreground menjadi #11171c dan pilih Horizontal Type Tool (T). Seperti biasa, pilihlah font Lato (Bold), atur ukurannya menjadi 14pt dan masukkan tanggal untuk pekerjaan mis. "7 Nov 2013". Kemudian, dengan menggunakan Move Tool (V), pindahkan layer tanggal 20px ke kanan lingkaran merah dan 20px dari atas dokumen.

Anda seharusnya, sekarang, telah melihat sebuah pola di jarak kita. Penting untuk konsisten dan menggunakan jarak berirama untuk elemen yang berbeda sehingga desain terlihat seimbang.

Write the date of work

Langkah 7

Ubah warna foreground menjadi #5e5e5e sehingga sedikit lebih ringan dari tanggal. Ini menciptakan hierarki visual, membuat pembacaan menjadi lebih mudah. Gunakan Horizontal Type Tool (T) yang sama, font Lato, tapi kali ini ubah bobot font menjadi Regular dan masukkan beberapa baris untuk deskripsi pekerjaan singkat. Kemudian, buat satu baris putus dengan menekan tombol Enter dua kali, dan masukkan klien dan tag untuk pekerjaan sebagai contoh .:

  • Klien: Despreneur
  • Tags: Web Design

Sorot "klien" dan "tag" dan tetapkan bobot font ke Bold, jadi mereka akan berbeda dari deskripsi dan akan dianggap sebagai hipertaut. Terakhir, pastikan tinggi garis diatur ke 18pt sehingga garis kita memiliki cukup ruang untuk bernafas.

Brief description

Langkah 8

Untuk menduplikat fitur yang baru saja kita buat, pilih layer lingkaran merah, tanggal dan deskripsi. Lalu tekan CMD+J, atau klik kanan dan pilih Duplicate Layers ..., tekan OK setelahnya. Pindahkan konten duplikat beberapa ratus piksel di bawah yang asli. Kita akan sesuaikan posisi ini nanti, karena akan tergantung tinggi gambar pekerjaan kita akan tempatkan di sebelahnya.

Duplicate description layers

Merancang Wilayah Kerja

Bagian vertikal akhir dari tata letak kami adalah untuk potongan portofolio itu sendiri. Mari membangunnya!

Langkah 1

Kita akan mulai (seperti biasa) dengan meminimalkan kelompok Descriptions yang saat ini digunakan dan membuka kelompok Work . Pilih Rectangle Tool (U) dan gambarlah persegi panjang ukuran 610x400px antara pedoman vertikal keenam dan kedelapan (warna tidak masalah saat ini, pastikan itu terlihat). Tempatkan 20px di bawah bagian atas dokumen sehingga memiliki ruang 20px di sekelilingnya.

Draw another rectangle

Langkah 2

Sekarang pilih gambar karya Anda, saya akan menggunakan screenshot Notebook PSD Template yang saya desain sebelumnya. Seret ke jendela dokumen Photoshop Anda, dan pastikan itu ditempatkan di atas layer bentuk persegi panjang yang telah dibuat sebelumnya. Tekan dan tahan tombol ALT, arahkan kursor ke atas nama layer screenshot sampai Anda melihat panah kecil ke bawah. Bila Anda melihatnya, lepaskan mereka kunci dan itu akan menciptakan Clipping Mask sehingga gambar Anda hanya akan terlihat di area persegi panjang. Akhirnya, tekan CMD+T dan ubah ukuran gambar sesuai keinginan Anda.

Place an image
Tahan tombol Shift saat mengubah ukuran agar tetap proporsinya.

Langkah 3

Pilih layer bentuk persegi panjang, duplikat, dan gerakkan 20px di bawah gambar pertama. Tambahkan gambar pekerjaan Anda yang lain seperti yang kita lakukan sebelumnya. Untuk contoh pekerjaan kedua saya menggunakan foto Raindrops dari unsplash.com. Setelah itu, buatlah karya ketiga dan letakkan 20px di bawah yang kedua. Untuk gambar karya ketiga saya telah menggunakan foto NYC Skyline , lagi dar  unsplash.com.

Place some more work images

Langkah 4

Kita sekarang perlu kembali dan memastikan semuanya berbaris dengan benar. Buka grup Descriptions lagi dan temukan lingkaran merah, layer tanggal dan deskripsi. Pilih mereka semua klik dan tahan kunci CMD dan gerakkan mereka sampai mereka sejajar dengan bagian atas gambar portofolio kedua. Duplikat layer ini dengan mengklik CMD+J, atau klik kanan layer dan pilih  Duplicate Layers... Setelah itu, tempatkan di samping gambar kerja ketiga dan sejajarkan dengan bagian atas gambar itu.

Align descriptions with work images

Langkah 5

Mengagumkan Kita hampir sampai akhir Minimalkan grup Descriptions dan buka kelompok Work lagi. Setelah itu, pilih ikon penyegaran dari kumpulan ikon dan seret ke dokumen portofolio Anda. Tekan CMD+T dan ubah ukurannya menjadi 20x20px. Klik dua kali pada ikon layer thumbnail dan ubah warnanya menjadi #a0a2a4.  Akhirnya tempatkan 20px di bawah gambar pekerjaan.

Resize and recolor refresh icon

Langkah 6

Langkah terakhir! Mari buat elemen dinamis yang akan muncul saat situs web kita digulir ke bawah dan server memuat lebih banyak pekerjaan. Pilih Horizontal Type Tool (T), pilih ukuran 14pt Lato (Bold) dan masukkan teks  Loading.... Letakkan di samping ikon refresh dan pindahkan 10px ke kanan. Setelah itu, pilih kedua layer, ikon dan teks dan letakkan di tengah garis vertikal gambar kerja.

Write loading and center it

Anda sudah selesai!

Jadi begitulah. Kami berjalan melalui pembuatan tata letak situs web portofolio, dari nol, secara terorganisir dan efisien. Fail yang kita bangun siap diserahkan ke pengembang yang bisa menariknya terpisah, menemukan semua elemen yang dibutuhkan, dan membangun browser.

Timeline portfolio preview

Saya harap Anda belajar sesuatu yang baru dengan mengikuti tutorial ini. ika Anda memiliki pertanyaan, atau mengalami kesulitan jangan ragu untuk menghubungi saya ke bagian komentar atau melalui Twitter.

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.