Top Menu

Dapatkan buku The Power of Photoshop. Disertai bonus video tutorial. Harga: Rp 78.800 Rp 54.500

Membuat Poster Tipografi Bergaya Desain Swiss

Dalam tutorial ini, kita akan mempelajari pembuatan sebuah poster tipografi dengan desain bergaya Swiss. Desain bergaya Swiss terkenal karena karakternya yang mengeksploitasi whitespace –yaitu ruang kosong dalam desain– dan penggunaan sistem grid.

Preview

Di bawah adalah hasil tampilan tipografi yang akan kita peroleh.

Membuat Poster Tipografi Bergaya Desain Swiss

Detail Tutorial

  • Tingkat Kesulitan: Pemula, Menengah
  • Software yang Digunakan: Adobe Photoshop, Adobe Illustrator
  • Teknik yang Dipelajari: layer Mask, Layer Style
  • Lama Pengerjaan: 30 menit

Resource yang Dibutuhkan

Untuk mengikuti tutorial ini, silakan ambil terlebih dahulu resource berikut:

Tutorial

Langkah Awal: Memahami Konsep Desain

Desain Swiss unik karena begitu fokus pada fungsi. Karyanya tidak banyak basa-basi atau ornamen. Tujuan akhir dari karya ini adalah menyampaikan pesan, itu saja.

Lihat gambar di bawah. Anda bisa melihat bahwa dalam desain ini, penggunaan whitespace secara efektif mengatur pergerakan mata kita. Kita diajak untuk fokus terlebih dahulu pada lingkaran dan kata whitespace yang sedikit menonjol karena berbeda warna. Selanjutnya, kita digiring untuk membaca kutipan dari artikel Smashing Magazine tentang pentingnya whitespace dalam desain.

Anda juga bisa melihat bahwa semua elemen terletak dalam grid sehingga tidak ada posisi yang janggal. Semua terkesan rapi, simetris, mudah dicerna, dan sederhana.

Sebetulnya, desain Swiss tidak begitu memperhatikan tekstur. Namun, dalam desain ini, kita akan menggunakan beberapa tekstur kertas secara lembut untuk memberi kesan tua dan juga menyesuaikan dengan trend desain saat ini.

Membuat Poster Tipografi Bergaya Desain Swiss

Langkah 1: Menyiapkan Grid

Grid bisa diperoleh dengan membagi ukuran kanvas ke dalam beberapa kolom sesuai kebutuhan. Kita juga perlu memperhitungkan gutter (selokan), yaitu jarak antar kolom. Cukup rumit jika tidak terbiasa bermain dengan angka. Saya menemukan cara mudah yaitu dengan memodifikasi grid desain web.

Ambil Grid 960. Klik ganda action 12 Column Grid untuk membuat file baru dalam ukuran 960 px dengan 12 kolom.

Membuat Poster Tipografi Bergaya Desain Swiss

Langkah 2

Klik Image > Image Size. Ubah ukuran kanvas menjadi 420 x 594 px. Kosongkan pilih Constrain Proportions untuk mengubah nilai tinggi dan lebar.

Membuat Poster Tipografi Bergaya Desain Swiss

Dengan mudah kita telah memperoleh kanvas poster terbagi dalam 12 kolom, lengkap dengan gutter.

Membuat Poster Tipografi Bergaya Desain Swiss

Langkah 3: Latar Poster

Ambil tekstur kertas dari WeGraphics untuk dijadikan latar poster.

Membuat Poster Tipografi Bergaya Desain Swiss

Turunkan Opacity layer menjadi 20%.

Membuat Poster Tipografi Bergaya Desain Swiss

Langkah 4

Tambahkan Adjustment Layer Hue/Saturation dan naikkan nilai Saturation agar warna tekstur makin terlihat.

Membuat Poster Tipografi Bergaya Desain Swiss
Membuat Poster Tipografi Bergaya Desain Swiss

Langkah 3

Ambil tekstur kertas kusut dari WeGraphics.

Membuat Poster Tipografi Bergaya Desain Swiss

Ubah blend mode tekstur menjadi Overlay dan turunkan Opacity-nya.

Membuat Poster Tipografi Bergaya Desain Swiss

Langkah 4

Buat teks whitespace. Gunakan tipe font Helvetica atau Helvetica Neue. Helvetica populer dalam desain Swiss karena font ini tidak memberikan emosi dan berfungsi dalam semua situasi. Untuk warnanya, gunakan #cfe4f6.

Membuat Poster Tipografi Bergaya Desain Swiss

Langkah 5

Buat lingkaran menutupi sebagian teks. Gunakan warna yang sama dengan teks.

Membuat Poster Tipografi Bergaya Desain Swiss

Langkah 6

Ambil tekstur kertas kotor dari Vandelay Premier. Tekan Ctrl + Alt + G untuk mengubah tekstur menjadi Clipping Mask dan memasukkannya ke dalam lingkaran.

Membuat Poster Tipografi Bergaya Desain Swiss

Ubah blend mode layer menjadi Screen dan turunkan Opacity-nya.

Membuat Poster Tipografi Bergaya Desain Swiss

Langkah 7

Gandakan teks dengan menekan Ctrl + J. Ubah warnanya menjadi putih. Simpan ke atas lingkaran.

Membuat Poster Tipografi Bergaya Desain Swiss

Tekan Ctrl + Alt + G. Teks putih ini akan masuk ke dalam lingkaran. Di bawah Anda bisa melihat susunan layer yang diperoleh.

Membuat Poster Tipografi Bergaya Desain Swiss

Langkah 8

Ambil tekstur lipatan dan goresan kertas dari WeGraphics. Ubah blend mode tekstur menjadi Screen dan turunkan Opacity-nya.

Membuat Poster Tipografi Bergaya Desain Swiss

Langkah 9

Aktifkan tool brush. Bukan panel Brush (F5), gunakan ukuran brush 2 px dan naikkan setting Spacing hingga diperoleh garis titik-titik.

Membuat Poster Tipografi Bergaya Desain Swiss

Langkah 10

Buat garis titik-titik dengan warna #dddcda. Pastikan garis ini mengikuti grid.

Membuat Poster Tipografi Bergaya Desain Swiss

Langkah 11

Di akhir garis, tuliskan kutipan berisi pesan yang disampaikan poster.

Membuat Poster Tipografi Bergaya Desain Swiss

Langkah 12: Efek Vignette

Buat layer baru. Lukis hitam dengan brush lembut di keempat pojok kanvas.

Membuat Poster Tipografi Bergaya Desain Swiss

Turunkan Opacity layer.

Membuat Poster Tipografi Bergaya Desain Swiss

Hasil Akhir

Di bawah adalah hasil akhir tutorial yang kita peroleh. Saya harap Anda belajar beberapa hal baru tentang konsep desain ini.

Membuat Poster Tipografi Bergaya Desain Swiss

Download Link

Download File PSD

, ,

5 Responses to Membuat Poster Tipografi Bergaya Desain Swiss

  1. Arif Riyanto 15 July 2011 at 10:36 pm #

    Wew.. ternyata 960 gs keren juga diaplikasikan untuk membuat poster :)

    • Jeprie 16 July 2011 at 5:51 pm #

      Tidak harus 960 GS, grid lain pun bisa digunakan. Yang penting adalah ukuran disesuaikan terlebih dahulu untuk poster.

  2. Kaget 20 July 2011 at 10:59 pm #

    Apa sih bedanya 960gs dan photoshop kalau digunakan web? Apa lebih nyaman dan ngga berat mas?

    • Jeprie 21 July 2011 at 6:24 am #

      960 gs itu sistem grid (kolom dan baris) dengan lebar 960 px. Ukuran ini dipilih karena cocok di kebanyakan recolusi monitor dan dalam implementasi CSS-nya lebih mudah. Ada juga sistem grid lain, salah satunya dengan lebar 978 px. Beberapa desainer web ada yang menggunakan grid custom untuk alasan tertentu. Bisa dibaca di artikelnya Nick La.

      Saya sendiri lebih memilih 960 gs karena lebih populer dan tentu saja referensinya lebih banyak. Jadi, mempelajarinya lebih mudah.

      • Kaget 24 July 2011 at 1:41 am #

        Nah, sekarang jadi lebih jelas. Makasih Mas :D

Tinggalkan komentar Anda.

var _gaq = _gaq || []; _gaq.push([\'_setAccount\', \'UA-9527890-1\']); _gaq.push([\'_trackPageview\']); (function() { var ga = document.createElement(\'script\'); ga.type = \'text/javascript\'; ga.async = true; ga.src = (\'https:\' == document.location.protocol ? \'https://ssl\' : \'http://www\') + \'.google-analytics.com/ga.js\'; var s = document.getElementsByTagName(\'script\')[0]; s.parentNode.insertBefore(ga, s); })(); (function() { var em = document.createElement(\'script\'); em.type = \'text/javascript\'; em.async = true; em.src = (\'https:\' == document.location.protocol ? \'https://id-ssl\' : \'http://id-cdn\') + \'.effectivemeasure.net/em.js\'; var s = document.getElementsByTagName(\'script\')[0]; s.parentNode.insertBefore(em, s); })();