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

Mendesain Portofolio Sederhana Berbasis Instagram Dalam Photoshop

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Yosef Andreas (you can also view the original English article)

Final product image
What You'll Be Creating

Di dalam tutorial ini saya akan membimbingmu melalui proses membuat portofolio berbasis Instagram yang sederhana yang rapi. Kita akan menggunakan beberapa gambar yang menarik, sebuah palette warna yang bersih dan typeface yang halus. Kita akan mulai dengan membuat versi web dan kemudian saya akan menunjukkanmu bagaimana mengadaptasikannya ke versi mobile dengan cepat.

Bahan-Bahan Tutorial

Untuk mengikuti tutorial ini kamu akan memerlukan aset berikut (tersedia secara gratis):

Mempersiapkan Dokumen

Langkah 1

Mulai dengan membuat dokumen Photoshop baru (File > New...) menggunakan pengaturan yang ditunjukkan di bawah. Kamu bebas menggunakan dimensi kanvas berapapun yang kamu suka - lagipula web tidak memiliki lebar yang tetap.

Pastikan resolution diatur ke 72 pixels/inch

Langkah 2

Mari gunakan beberapa panduan sehingga layout kita memiliki ruang yang cukup dan tampak seimbang. Saya tidak selalu menggunakan grid, namun dengan mengatur beberapa panduan akan memastikan kerapihan dan membantu menentukan lebar website. Pergi ke View > New Guide… dan atur beberapa panduan. Saya biasanya memilih 1000px sebagai lebar website dan menambahkan beberapa garis bantu dari sudut sehingga itu memiliki ruang yang lega.

Catatan: Garis bantu yang digunakan untuk tutorial ini: vertical pada 100px, 600px dan 1100px.

Tip: Kamu dapat juga menggunakan plugin Photoshop GuideGuide untuk membuat proses ini bahkan lebih cepat.

Langkah 3

Dengan berpegang pada etika Photoshop kita akan memastikan semuanya tertata dan mudah untuk dinavigasikan dan diedit. Mari buat tiga group layer bernama Header, Photos dan Contact. Untuk membuat group pergi ke Layer > New > Group… berikan masing-masing seperti yang disebutkan. Untuk membuat group dengan cepat cukup klik icon.

Mendesain Area Header

Area header atau "above the fold" (dimana pun itu saat ini) memainkan peranan sangat penting dalam menarik pengguna dan memastikan bahwa pengunjung betah dalam website. Untuk portofolio ini, saya akan menggunakan foto gunung yang indah dan pesan sederhana untuk menggambarkan petualangan dan tantangan.

Langkah 1

Pertama-tama mari buat background untuk blog. Di dalam group Header gambarkan bentuk segiempat dalam warna apapun menggunakan Rectangle Tool (U). Dalam kasus saya, saya menggambar segiempat ukuran 1200x600px dan menempatkannya pada bagian atas dokumen.

Sekarang download foto Gunung, seret itu pada dokumen Photoshop dan tempatkan di atas layer segiempat. Namai ulang layer menjadi sesuatu yang dapat kamu kenali nantinya, dalam hal ini saya menggunakan IMG. Setelah itu tahan tombol Alt dan mouse pada layer foto hingga kamu melihat sebuah panah kecil mengarah ke bawah, kemudian lepaskan itu. Kamu baru saja membuat Clipping Mask.

Sekarang tekan CMD+T dan ubah ukuran foto untuk mencocokkan dengan kebutuhanmu.

Tip: tahan tombol Shift untuk transformasi secara proporsional.

Langkah 2

Mari buat beberapa penyesuaian pada gambar sehingga itu tampak lebih tajam dan tak terlupakan. Buat sebuah layer baru, beri nama Shadow dan buat sebuah Clipping Mask seperti yang kita lakukan untuk gambar gunung. Kemudian pilih Gradient Tool (G) dan atur warna gradient dari hitam #000000 ke transparan, dengan menahan tombol Shift untuk menyeret dari bagian bawah gambar ditempatkan ke sekitar area tengah. Terakhir turunkan Opacity layer gradient ke 60%.

Saya biasanya menggunakan teknik ini untuk menggelapkan gambar yang terang dan menempatkan teks putih di atas.

Langkah 3

Tambahkan beberapa warna lagi pada header untuk membuatnya lebih menakjubkan lagi. Buat layer baru, beri nama Gradient dan sekali lagi pilih Gradient Tool (G). Setelah itu atur warna gradient dari ungu #37056b ke pink #ff01fc (atau warna lainnya yang kamu inginkan) dan seret dari sudut kiri atas gambar ke sudut kanan bawah. Terakhir, turunkan Opacity layer gradient ke 20%.

Langkah 4

Waktunya untuk menempatkan logo untuk portofolio kita. Pilih Horizontal Type Tool (T) dan masukkan nama portofoliomu, apakah itu nama atau panggilanmu. Untuk tutorial saya menggunakan font Kaushan Script 21px yang sangat bergaya. Tempatkan logo barumu di sudut kiri atas website di sebelah garis bantu vertikal pertama. Dorong itu 50 px ke bawah untuk memberikan cukup area negatif sehingga itu tampak bersih dan profesional.

Langkah 5

Kita akan menambahkan beberapa icon media sosial sehingga orang dapat mengikutimu dan karyamu. Seret icon Facebook, Twitter dan Instagram dari Iconfinder ke dokumen Photoshop, namai ulang layer sehingga mereka dengan cepat dikenali dan tempatkan mereka pada sisi knnn atas di sebelah garis bantu vertikal terakhir. Setelah itu, klik kanan mouse pada salah satu layer icon, pilih Blending Options... dan terapkan pilihan Color Overlay dengan warna putih #ffffff. Lakukan yang sama untuk sisa icon lainnya.

Pastikan kamu membuat cukup ruang pada sisi dan sejajarkan icon secara horizontal dengan logo.

Langkah 6

Mari selesaikan area Header. Kita memiliki gambar yang cantik dan area yang luas. Mari letakkan pesan pengantar sederhana sehingga pengunjung dapat mengerti maksud dari website ini.

Pilih Horizontal Type Tool (T) dan dengan menggunakan font Lato (Black) ukuran 36px masukkan beberapa kata. Dalam hal ini saya menggunakan "HELLO! I'M JONATHAN". Segera setelah itu, pada sebuah baris baru dan dengan font yang lebih kecil masukkan beberapa hal lainnya tentang dirimu atau pekerjaanmu yang mungkin menarik minat pengunjung. Untuk tutorial ini saya telah menggunakan Lato (Regular) ukuran 16px.

I love to travel all around the world and design beautiful things.

Pastikan tinggi baris cukup besar sehingga teksmu memiliki ruang yang lega. Terakhir, tempatkan teks di tengah area Header.

Mendesain Area Foto

Di dalam area ini kita akan menempatkan foto dari Instagram untuk memamerkan beberapa contoh karya, untuk menampilkan seberapa ahli dan relevan seorang seniman atau desainer.

Langkah 1

Mari pertama-tama ubah background untuk area ini. Minimalkan group Header dengan mengklik sebuah panah kecil di sebelah nama group dan buka group Photos. Setelah itu, pilih Rectangle Tool (U) dan gambarkan segiempat yang sedikit abu-abu. Dalam hal ini saya menggunakan #eeeeee untuk warna dan menggambar segiempat ukuran 1200x880px.

Langkah 2

Sekarang tambahkan kalimat yang mendeskipsikan pekerjaan. Ini dapat sesederhana "Karya Terakhir" atau dalam kasus saya "LATEST PHOTOS". Teks hendaknya dapat dibaca, untuk alasan tersebut saya menggunakan #9b9b9b dan font Lato (Bold) 12px. Perhatikan bahwa spacing huruf cukup substansial (270) yang digunakan hanya untuk membuat style pada judul area dan tidak akan berfungsi untuk teks reguler. Sekali lagi berikan judul cukup ruang dan pindahkan itu ke bawah dari gambar sebesar 80px.

Langkah 3

Bagus! Kita akhirnya siap untuk menambahkan beberapa foto keren pada portofolio kita. Buat sebuah group baru bernama Photo. Setelah itu kamu perlu menentukan berapa banyak gambar yang ingin kamu tampilkan dalam satu baris. Saya memutuskan sebanyak empat foto, sehingga saya perlu melakukan perhitungan sebelum menentukan pixel.

Lebar website kita adalah 1000px, jadi saya akan membagi empat dan menghasilkan 250px untuk tiap gambar, namun kita juga perlu meninggalkan beberapa spacing pada sisi, katakanlah 20px gutter di antara gambar. Jadi lebar gambar terakhir akan menjadi (1000px-60px)/4=235px.

Pilih Rectangle Tool (U) dan, dengan menahan tombol Shift, gambarkan segiempat ukuran 235x235px. Setelah itu pilih sebuah gambar dari feed Instagrammu atau ambil dari unsplash.com atau getrefe.tumblr.com, seret itu ke dokumen Photoshop dan tempatkan di atas segiempat. Kemudian, dengan menahan tombol Alt, buat sebuah Clipping Mask dan dengan menggunakan CMD+T ubah ukuran gambar dan tempatkan sesukamu.

Langkah 4

Sekarang kita perlu menambahkan jumlah "likes" (untuk bertindak sebagai bukti media sosial) dan deskripsi singkat. Buat sebuah layer baru dan beri nama Shadow, tempatkan itu di atas gambar dan pastikan untuk membuat Clipping Mask untuk itu. Setelah itu, dengan menggunakan Gradient Tool (G) terapkan sebuah gradient yang bergerak dari hitam ke transparan seperti yang digunakan sebelumnya di awal tutorial ini. Terakhir turunkan Opacity ke 60%.

Pilih Horizontal Type Tool (T) dan masukkan jmj likes. Saya telah menggunakan font Montserrat ukuran 13px dan spacing 15px di kiri dan di bawah untuk memberikan cukup ruang namun tidak menumpuk pada gambar.

Sekarang pilih Rectangle Tool (U) dan gambarkan sebuah segiempat putih di bawah foto. Kemudian ambil Horizontal Type Tool (T) dan tuliskan deskripsi singkat foto yang akan kamu gunakan pada Instagram, termasuk hashtag dan juga tanggal posting pada baris baru. Font yang saya gunakan untuk tutorial adalah Montserrat ukuran 12px dalam warna abu-abu #808080.

Catatan: pastikan kamu konsisten dengan spacing, jika kamu menggunakan 15px pada bagian sisi untuk angka likes lakukan yang sama dengan bagian deskripsi.

Langkah 5

Kita telah selesai dengan item foto dan sekarang waktunya untuk menambahkan beberapa foto pada portofolio kita. Minimalkan group Photo dan duplikasikan itu dengan menekan CMD+J atau mengklik kanan mouse pada nama group dan memilih Duplicate Group... setelah itu duplikasikan foto sebanyak yang kamu inginkan untuk menatanya di dalam grid. Dalam contoh saya ada 20px spacing dan gambar yang berbeda dari unsplash.com dan getrefe.tumblr.com.

Mendesain Area Kontak

Di dalam area ini kita akan meletakkan pesan sederhana dan kontak "call to action" juga informasi hak cipta umum.

Langkah 1

Minimalkan group Photo dengan mengklik sebuah panah kecil di sebelah nama group dan buka group Contact. Setelah itu pilih Horizontal Type Tool (T) dan dengan menggunakan huruf yang cukup besar masukkan headline untuk section ini, dalam contoh saya itu adalah "GET IN TOUCH". Berikan banyak ruang di atas dan tambahkan deskripsi singkat untuk mendorong tindakan dari pengguna. Saya menggunakan #565d64 untuk warna dan font Lato (Black) ukuran 36px untuk headline Lato (Regular) ukuran 16px untuk deskripsi.

Langkah 2

Sekarang kita perlu sebuah tombol call to action yang akan diklik oleh pengguna untuk melakukan tindakan yang diinginkan. Untuk tutorial ini mari kita gunakan tombol kontak sederhana. Saya telah menggunakan Rectangle Tool (U), menggambar sebuah bentuk sederhana dan menempatkan teks di atasnya. Pastikan untuk menggunakan banyak ruang di atas tombol sehingga itu tampak seimbang dan rapi.

Langkah 3

Terakhir letakkan baris hak cipta umum di bawah portofolio kita. Sebelumnya melakukan itu, pilih Line Tool (U) dan gambarkan garis horizontal halus abu-abu #e0e0e0 sebesar 1px sepanjang dokumen meninggalkan sekitar 90px area di paling bawah. Tepat setelah itu letakkan baris hak cipta. Dalam kasus ini saya menggunakan font Lato (Bold) ukuran 12px dengan spacing 270 dan abu-abu gelap #9b9b9b.

Kamu Telah Selesai... Dengan Versi Web

Dan disinilah kamu, telah menyelesaikan portofolio versi web! Sekarang saya akan menunjukkan bagaimana mengubah versi web dengan cepat ke dalam versi mobile sehingga kamu dapat memvisualisasikan website responsif.

Mendesain Versi Mobile

Langkah 1

Mari buat dokumen baru dan atur dimensinya menjadi 320x2100px. Buat tiga garis bantu vertikal pada 20px, 150px dan 300px untuk membimbing kita, meninggalkan beberapa ruang di bagian sisi. Setelah itu pilih semua group di dalam dokumen versi web, seret itu semua ke tab dokumen baru hingga dokumen baru muncul dan lepaskan group tadi di sana.

Langkah 2

Sekarang buka group Header, temukan logo dan dengan menggunakan Move Tool (V) pindahkan itu ke kanan higga tampak dalam layout sempit kita yang baru. Tinggalkan itu di sebelah garis bantu vertikal pertama. Setelah itu temukan icon social dan pindahkan ke kiri.

Langkah 3

Sekarang waktunya untuk memasukkan pesan utama. Ambil Horizontal Type Tool (T), potong kalimat deskripsi dan kurangi pesan utama untuk mencocokkannya di antara garis bantu vertikal pertama dan ketiga. Sesuaikan pilihan tinggi baris dan kamu siap melanjutkan.

Langkah 4

Buka group Photos dan gerakkan judul "LATEST PHOTOS" ke atas karena kita tidak memerlukan begitu banyak ruang pada tampilan mobile. Setelah itu temukan group Photo dan pindahkan itu di antara garis bantu vertikal. Kemudian buka group, klik pada bentuk segiempat background deskrpisi, tekan CMD+T dan ubah ukuran menjadi lebar 280px. Lakukan yang sama dengan segiempat foto. Terakhir, susun foto di dalam satu kolom dan ubah ukurannya untuk mencocokkan di antara garis bantu.

Langkah 5

Section Photos kita telah menjadi lebih panjang dari versi web, sehingga diperlukan penyesuaian background. Temukan layer background Photos dan tekan CMD+T untuk mengubah ukurannya.

Langkah 6

Terakhir kita perlu menyusun ulang bagian kontak sehingga pesannya cocok di antara garis bantu dan diselaraskan dengan baik. Buka group Contact dan dengan menggunakan Horizontal Type Tool (T) potong baris pesan kontak untuk membuatnya pas di antara garis bantu kita. Pastikan untuk mengurangi ruang di atas dan di bawah elemen karena kita tidak terlalu membutuhkan terlalu banyak ruang putih untuk tampilan mobile. Juga, turunkan tinggi baris untuk pesan sehingga itu tampak rapi dan profesional.

Hal paling akhir adalah memotong baris hak cipta ke dalam dua baris sehingga itu juga ada di antara garis bantu.

Tampilan mobile lengkap.

Selamat!

Itu saja. Kita telah menyelesaikan versi web mobile dari portofolio berbasis Instagram. Saya harap kamu mempelajari sesuatu yang baru dan skill yang kamu dapatkan akan membantumu membuat hal-hal menakjubkan di masa mendatang.

Saya akan senang mendengar feedback dan melihat hasilmu dari tutorial ini!

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.