() translation by (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):
- Raindrops photo dari Unsplash
- NYC skyline photo dari Unsplash
- Notebook PSD Template dari Dribbble
- Free Vector Icons dari Chapps
- Lato font dari Font Squirrel
- Avatar dari User Inter Faces
- Dribbble icon dari Iconfinder
- Twitter icon dari Iconfinder
- Facebook icon dari Iconfinder
- Google+ icon dari Iconfinder
Persiapkan Dokumen - Dokumen
Langkah 1
Mulailah dengan membuat dokumen baru (File > New…) dengan menggunakan pengaturan yang ditunjukkan di bawah ini.
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.
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.
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.
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.
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).
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.
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.
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 Dribbble, Twitter, Facebook 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.
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 Twitter, Facebook 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.
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.
Langkah 9
Untuk membuat garis kita lebih halus secara visual, mari kita mengurangi Opacity layer ke 10%.
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.
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.
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.
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.
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.
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".
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
