Ukuran Portofolio Behance Lengkap: Cover, Project, & Banner

Table of Contents

Fikalmyid.com - Menampilkan karya terbaik di Behance bukan hanya soal seberapa estetik konsep visualmu, melainkan juga bagaimana karya tersebut dirender di layar audiens, calon klien, atau recruiter. Banyak desainer mengalami masalah gambar yang terlihat pecah, teks mockup yang buram saat dizoom, atau cover proyek yang terpotong canggung saat diakses dari aplikasi mobile.

Penyebab utamanya sederhana: ketidaksesuaian antara dimensi aset yang diunggah dengan standar sistem kanvas Behance.

Untuk kamu yang butuh acuan instan, berikut adalah ringkasan standar dimensi utama aset Behance:

• Cover Project (Thumbnail): Minimal 808 x 632 px (ditampilkan pada 202 x 158 px, rasio ~4:3).
• Kanvas Modul Proyek (Project Canvas): Lebar 1400 px (standar) atau 2800 px (rekomendasi untuk layar Retina/4K). Tinggi bebas (infinite).
• Banner Header Profil: 3200 x 410 px.
• Foto Profil (Avatar): 1000 x 1000 px (rasio 1:1).
• Profil Warna: Wajib sRGB (hindari CMYK agar warna tidak kusam).

Berikut panduan mendalam mengenai pengaturan dimensi, manajemen file, hingga teknik slicing artboard agar portofoliomu tampil tajam dan profesional di semua perangkat.

Standar Ukuran Portofolio Behance Lengkap

Gunakan tabel rangkuman berikut sebagai panduan saat menyiapkan kanvas kerja di software desain favoritmu:

Ukuran Cover Project Behance (Thumbnail) & Rasio Aman

Cover proyek adalah aset terpenting yang menentukan apakah audiens akan mengklik dan membaca studi kasusmu di halaman jelajah (Explore feed).

Berdasarkan panduan resmi Cover Images dari Behance Help Center, sistem Behance menampilkan thumbnail pada ukuran 202 x 158 px, namun mewajibkan pengunggahan gambar berukuran minimal 808 x 632 px.

Memahami Dimensi Minimum dan Safe Zone

Meskipun rasio dasarnya mendekati 4:3, tampilan cover di aplikasi seluler (Behance App) dan layar feed desktop dapat mengalami sedikit penyesuaian sudut pembulatan (border radius) dan cropping.

Pastikan kamu menerapkan aturan safe zone:

• Tempatkan elemen kunci seperti tipografi, ikon, atau titik fokus mockup di area tengah kanvas.
• Sisakan ruang kosong (padding) minimal 40–60 px dari tepi batas luar 808 x 632 px.
• Hindari meletakkan teks tipis di sudut paling bawah atau paling kanan.

Format Terbaik untuk Cover Project

Gunakan format JPEG kualitas tinggi (85–90%) untuk karya dengan gradasi kompleks, fotografi, atau render 3D. Jika cover berfokus pada ilustrasi vektor atau tipografi tebal, format PNG-24 memberikan hasil yang lebih bersih tanpa artefak kompresi. Ingat bahwa Behance tidak mendukung format GIF animasi untuk cover proyek.

Dimensi Kanvas dan Gambar Proyek (Project View)

Bagian isi proyek (project body) adalah ruang utama tempat kamu membedah alur studi kasus, wireframe, elemen branding, hingga hasil akhir desain.

Standar Lebar 1400 px vs Resolusi Retina 2800 px

Area tampilan presentasi Behance di layar peramban dirancang dengan lebar tetap 1400 px. Jika kamu mengunggah gambar dengan lebar kurang dari 1400 px, Behance akan menampilkannya pada ukuran asli dengan tambahan pembatas (border) abu-abu di sekelilingnya, atau meregangkannya sehingga tampak buram.

Agar presentasimu tampak tajam di layar modern berkerapatan piksel tinggi (Retina Display, monitor 2K/4K):

1. Buat artboard dasar pada lebar 1400 px saat merancang tata letak.
2. Ekspor dengan skala 2x (lebar 2800 px).
3. Saat diunggah, mesin Behance akan merendernya secara presisi pada kanvas 1400 px, sementara pengguna yang membuka fitur Lightbox (tampilan perbesaran layar penuh) akan menikmati resolusi tajam 2800 px tanpa pecah.

Mengatur Panjang Halaman dan Teknik Slicing

Behance mendukung tinggi gambar tak terbatas (infinite vertical scroll). Namun, mengunggah satu file gambar utuh dengan tinggi 20.000 px adalah langkah yang keliru karena berisiko mengalami gagal unggah (upload error), penurunan kompresi otomatis yang parah, dan waktu loading lambat bagi pengunjung.

Praktik terbaik industri adalah membagi (slicing) studi kasus panjang menjadi beberapa bagian (slide module):

Lebar: Tetap 1400 px (atau 2800 px untuk ekspor 2x).

Tinggi Ideal per Slice: Antara 2000 px hingga 4000 px.

Pastikan garis pemisah antar-slice berada di area kosong (whitespace) atau batas blok warna yang rata, bukan di tengah baris teks atau elemen gambar agar transisi antar-modul tampak menyatu sempurna tanpa celah.

Fitur Full Bleed vs Spacing Bawaan

Secara default, editor Behance menyematkan ruang antar-gambar (project spacing). Menurut dokumentasi Full Bleed Images Behance, jika gambarmu memiliki lebar minimal 1400 px, kamu dapat mengaktifkan ikon panah ganda di pojok kanan modul gambar untuk mengaktifkan mode Full Bleed. Mode ini merentangkan gambar hingga ke tepi kanvas dan menghilangkan margin samping, menciptakan tampilan presentasi yang mulus (seamless).

Ukuran Banner Header dan Foto Profil Behance

Branding visual pada halaman profil utama membangun kredibilitas awal sebelum pengunjung mulai membuka masing-masing proyekmu.

Dimensi Banner Profil (3200 x 410 px)

Banner profil membentang di bagian atas halaman akunmu. Gunakan ukuran 3200 x 410 px.

• Pada layar desktop berukuran besar, banner akan tampil penuh.
• Pada layar laptop dan smartphone, sisi kiri dan kanan banner akan terpotong secara responsif.
• Tips: Gunakan grafis berpola, tekstur, atau ilustrasi abstrak yang tidak memuat teks penting di pinggir kiri dan kanan.

Dimensi Foto Profil (1000 x 1000 px)

Foto profil Behance ditampilkan dalam bentuk lingkaran (circle crop). Unggah gambar berukuran 1000 x 1000 px (minimal 500 x 500 px) dengan rasio 1:1. Pastikan wajah atau logo brand berada tepat di tengah agar tidak terpotong oleh sudut lingkaran.

Spesifikasi Teknis: Format File, Profil Warna, dan Ukuran Maksimal

Ketepatan format dan profil warna menentukan apakah hasil akhir di browser sesuai dengan yang kamu lihat di monitor desain.

Wajib Menggunakan Color Space sRGB

Salah satu kendala klasik desainer grafis adalah warna desain yang terlihat menyala (vibrant) di software desain, tetapi menjadi kusam atau pucat setelah diunggah ke web.

Hal ini terjadi karena file disimpan dengan profil warna CMYK (standar cetak) atau Adobe RGB. Web browser dan server Behance membaca format berbasis sRGB (standard Red Green Blue). Sebelum mengekspor aset, selalu pastikan Color Space atau Document Profile kamu disetel ke sRGB IEC61966-2.1.

Memilih Antara JPEG, PNG, dan GIF Animasi

Mengacu pada aturan format gambar Behance Help Center:

JPEG: Sangat direkomendasikan untuk sebagian besar konten proyek, terutama gambar fotografi, render 3D, dan manipulasi gambar. Ukuran filenya efisien dengan kompresi yang terjaga.

PNG (PNG-24): Gunakan khusus untuk visual dengan garis tepi tegas, tipografi tanpa latar belakang gradasi, atau ikon antarmuka (UI).

GIF Animasi: Digunakan untuk memamerkan interaksi micro-animation UI, motion graphics, atau transisi fitur. Usahakan ukuran file GIF di bawah 5 MB – 10 MB dan resolusi lebar 1400 px agar tidak membebani browser pengunjung.

Batas Maksimal File: Behance mengizinkan file hingga 50 MB, tetapi ukuran ideal per gambar adalah di bawah 5 MB (disarankan 500 KB – 2 MB) demi kelancaran rendering.

Panduan Setup Artboard di Figma, Photoshop, dan Illustrator

Untuk memudahkan eksekusi, berikut konfigurasi kanvas yang disarankan pada tiga software desain utama:

1. Pengaturan di Figma

Buat Frame baru dengan lebar 1400 px (panjang sesuaikan dengan modul per slice, misal: 2500 px).

Susun komponen desain, teks, dan mockup di dalam Frame tersebut.

Pada panel Export di sisi kanan bawah:

Pilih format: PNG atau JPG.

Set pengali ekspor ke 2x (otomatis menghasilkan lebar 2800 px).

Pastikan opsi Color Space proyek disetel ke sRGB.

2. Pengaturan di Adobe Photoshop

Buat dokumen baru (New Document):

Width: 2800 px, Height: 4000 px (atau sesuai kebutuhan slice).

Resolution: 72 PPI (untuk tampilan layar).

Color Mode: RGB Color 8-bit.

Color Profile: sRGB IEC61966-2.1.

Gunakan Slice Tool (C) jika ingin memotong dokumen panjang menjadi beberapa bagian.

Simpan melalui menu File > Export > Save for Web (Legacy) atau Export As, pilih format JPEG dengan Quality: 80–90%.

3. Pengaturan di Adobe Illustrator

Buat Artboard baru dengan dimensi 1400 px x tinggi yang diinginkan.

Pastikan Color Mode dokumen adalah RGB (File > Document Color Mode > RGB Color).

Saat mengekspor melalui File > Export > Export for Screens:

Pilih skala 2x atau tentukan lebar Width menjadi 2800 px.

Format: PNG atau JPG 100.

5 Kesalahan Fatal yang Membuat Portofolio Behance Terlihat Amatir

Hindari kebiasaan-kebiasaan berikut saat merilis proyek baru di Behance:

Mengunggah File Tunggal Berukuran Raksasa: Menggabungkan seluruh presentasi 20.000 px dalam satu file JPEG membuat waktu muat halaman sangat lambat dan rawan terdistorsi oleh sistem kompresi Behance.

Ukuran Font Terlalu Kecil pada Tampilan Mobile: Banyak desainer mendesain untuk layar monitor 27 inci tanpa memeriksa keterbacaan tipografi di layar smartphone. Pastikan teks penjelasan studi kasus tetap terbaca jelas saat kanvas diskalakan ke layar kecil.

Mengabaikan Margin Antarmuka: Menempatkan elemen visual penting terlalu mepet ke tepi kanvas membuat presentasi terasa sesak (cluttered). Berikan padding yang proporsional di sisi kiri dan kanan.

Lupa Menghapus Project Spacing: Saat ingin membuat presentasi yang menyatu dari atas ke bawah, desainer sering lupa mengatur nilai Divider/Project Spacing ke angka 0 px di menu pengaturan proyek Behance.

Menggunakan Profil CMYK: Selalu periksa kembali profil warna sebelum mengunggah. File CMYK yang dikonversi otomatis oleh server web sering kali menghasilkan warna oranye yang menjadi kecokelatan atau warna hijau neon yang meredup.