Membuat Ulang Efek Teks Film Avenger dengan Photoshop dan Illustrator

Semua film super hero selalu menyebalkan dan tidak layak ditonton. Tentu saja kecuali Batman besutan Christopher Nolan. Anyway, Avenger adalah satu lagi film super hero berkualitas buruk yang hanya mengandalkan spesial efek khas Hollywood. Jika Anda penasaran dengan efek teks dalam judul filmnya, pastikan untuk mengikuti tutorial ini.

Tutorial ini ditulis ekslusif untuk Hongkiat.
[hr]

Preview

Berikut adalah hasil akhir yang diperoleh.

Membuat Ulang Efek Teks Film Avenger dengan Photoshop dan Illustrator

[hr]

Sebagian Langkah dalam Tutorial

Tutorial ini tidak sekadar meniru efek teks yang ada di film. Dalam tutorial ini, kita akan menggunakan membuat sendiri teks yang mirip dengan karakter teks Avenger. Kita akan melakukannya secara manual di Illustrator. Proses selanjutnya adalah memberi kesan tiga dimensi memberi kombinasi layer style dan tekstur di Photoshop.

Membuat Ulang Efek Teks Film Avenger dengan Photoshop dan Illustrator
Membuat Ulang Efek Teks Film Avenger dengan Photoshop dan Illustrator
Membuat Ulang Efek Teks Film Avenger dengan Photoshop dan Illustrator
Membuat Ulang Efek Teks Film Avenger dengan Photoshop dan Illustrator
Membuat Ulang Efek Teks Film Avenger dengan Photoshop dan Illustrator
Membuat Ulang Efek Teks Film Avenger dengan Photoshop dan Illustrator
Membuat Ulang Efek Teks Film Avenger dengan Photoshop dan Illustrator
Membuat Ulang Efek Teks Film Avenger dengan Photoshop dan Illustrator

[hr]

Link Tutorial

[unordered_list style=”bullet”]

[/unordered_list]

Mendesain Interface Video Player Minimalis dan Futuristik

Trend interface saat ini sangat minimalis, fungsional, dan penuh dengan detail-detail tajam. Trend ini bukan saja terlihat professional, yang paling penting adalah memberi kesan dapat diandalkan, dan itulah dicari setiap orang. Oleh karena itu, saya akan menunjukkan langkah demi langkah cara pembuatan sebuah interface video player bertema minimalis. Tutorial ini ditulis ekslusif untuk Hongkiat.

[hr]

Preview

Berikut adalah hasil akhir yang diperoleh.

Mendesain Interface Video Player

[hr]

Sebagian Langkah dalam Tutorial

Tutorial ini sangat detail dan membahas banyak teknik yang umum digunakan dalam mendesain objek. Di bawah adalah beberapa langkah dalam tutorial.

Mendesain Interface Video Player
Mendesain Interface Video Player
Mendesain Interface Video Player
Mendesain Interface Video Player
Mendesain Interface Video Player
Mendesain Interface Video Player
Mendesain Interface Video Player
Mendesain Interface Video Player

[hr]

Link Tutorial

[unordered_list style=”bullet”]

[/unordered_list]

Menggambar Ikon Speaker Memanfaatkan Layer Style

Dalam tutorial ini saya akan memperlihatkan cara menggambar sebuah ikon speaker di atas latar kayu. Ikon ini sangat sederhana, terbuat dari banyak bentuk lingkaran yang dikombinasikan dengan Layer Style.

[hr]

Preview

Menggambar Ikon Speaker Memanfaatkan Layer Style

[hr]

Detail Tutorial

  • Tingkat Kesulitan: Pemula
  • Software yang Digunakan: Adobe Photoshop
  • Teknik yang Dipelajari: Menggambar Vektor, Layer Style
  • Lama Pengerjaan: 20 menit

[hr]

Resource yang Dibutuhkan

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

[hr]

Tutorial

Langkah 1

Buat sebuah shape lingkaran dengan warna #222222.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Klik ganda layer. Di kotak dialog Layer Style aktifkan Drop Shadow, Bevel and Emboss, dan Gradient Overlay dengan setting seperti di bawah.

Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style

Berikut adalah hasil yang diperoleh. Perhatikan bahwa dalam desain ini kita menggunakan sumber cahaya dari kanan atas. Ingat ini untuk memperoleh tampilan yang konsisten dan realistik.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 2

Gandakan shape lingkaran yang tadi kita buat dengan menekan Ctrl + J. Buang semua Layer Styles yang digunakan dengan menggeser ke atas ikon tempat sampah. Ubah warna lingkaran menjadi #464545. Lakukan proses transformasi dengan menekan Ctrl + T. Perkecil lingkaran hingga perbandingannya seperti terlihat di bawah.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 3

Beri Layer Style Bevel and Emboss dan Gradient Overlay.

Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style

Inilah hasil yang kita peroleh saat ini.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 3

Duplikasi kembali lingkaran dan ubah warnanya menjadi #d4d2c5. Perkecil ukuran lingkaran. Buang semua Layer Style.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Beri Inner Shadow, Inner Glow, Bevel and Emboss, dan Gradient Overlay.

Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style

Inilah hasil yang diperoleh.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 4

Sekali lagi, duplikasi lingkaran. Ubah warnanya ke #e3e1cf. Perkecil dan buang semua Layer Style.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Beri Drop Shadow, Inner Shadow, Bevel and Emboss, Gradient Overlay, Pattern Overlay, dan Stroke.

Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style

Dalam pilihan Pattern, gunakan pola pixel dari PSDfreemium.

Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style

Ini hasil yang diperoleh.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 5

Langkah selanjutnya adalah menggambar highlight dan shadow pada di bagian dalam speaker. Untuk ini, kita perlu menggambar secara manual. Buat seleksi segitiga menggunakan tool lasso polygon.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 6

Buat layer baru lalu isi seleksi dengan putih. Tekan Ctrl + Alt + G untuk mengubah layer menjadi Clipping Mask dan memasukkan highlight ke dalam shape lingkaran terakhir. Hapus seleksi dengan menekan Ctrl + D. Haluskan highlight dengan filter Gaussian Blur (Filter > Blur > Gaussian Blur).

Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 7

Lanjutkan melukis highlight dan shadow hingga diperoleh hasil seperti di samping.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 8

Ingat bahwa sumber cahaya kita ada di kanan atas. Untuk memberi kesan bahwa area cekung, kita perlu memberi bayangan di sisi kanan atas.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 9

Turunkan Opacity bayangan hingga 20%.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 10

Buat lingkaran berwarna #191919 di bagian tengah speaker.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Beri Drop Shadow dan Gradient Overlay.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Gunakan gradasi radial dari putih ke hitam. Ketika kotak dialog ini aktif klik geser pada kanvas untuk menggeser pusat gradasi sedikit ke kanan atas.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 11

Buat layer baru lalu lukis highlight tambahan di atas lingkaran. Pastikan posisi highlight tidak tepat di tengah tapi sedikit di kanan atas, sesuai dengan posisi sumber cahaya.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 12: Baut

Tampilakn ruler dengan menekan Ctrl + R. Klik dan geser dari ruler ke atas kanvas untuk menambah guide. Simpan guide di tengah dan sisi terluar speaker.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 13

Gandakan lingkaran dasar speaker –yang kita buat di Langkah 1– dan ubah warnanya ke #5e5e5e.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 14

Tambahkan shape rounded di posisi jam 12. Di baris pilihan, atur mode path ke Intersect.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 15

Lakukan proses transformasi dan duplikasi dengan menekan Ctrl + Alt + T. Tahan Alt lalu geser titik pusat transformasi ke titik tengah speaker.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 16

Putar path 45°. Anda bisa melihat bahwa sekarang yang diputar adalah path baru bukan path asli.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 17

Sekarang tekan Ctrl + Shift + Alt + T. Shortcut ini akan mengulangi proses duplikasi pada path terpilih. Hasilnya kita memiliki path baru berjarak 45°.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 18

Beri Bevel and Emboss.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 19

Buat lingkaran kecil di atas shape yang tadi kita peroleh. Beri Layer Style Drop Shadow dan Gradient Overlay. Lingkaran ini akan menjadi baut speaker.

Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 20

Gandakan lingkaran ke atas shape yang lain.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 21

Aktifkan tool pencil dengan ukuran brush 1 px. Lukis tanda plus hitam di atas setiap baut.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Inilah hasil yang diperoleh.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 22

Aktifkan tool brush berukuran 2 px. Lukis highlight putih di sisi kanan atas tanda plus. Ingat, kita menyimpan highlight di sisi kanan atas sesuai dengan posisi sumber cahaya.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Hasil yang diperoleh.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 23

Buat shape baru terdiri dari dua buah lingkaran dengan pusat sama. Ubah mode path lingkaran terdalam menjadi Subtract. Hasilnya adalah bentuk cincin.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Klik ganda layer dan aktifkan Drp Shadow, Outer Glow, Bevel and Emboss, dan Gradient Overlay.

Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style

Hasil yang diperoleh.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 24: Latar

Ubah warna depan dan warna belakang menjadi #7a4e0d dan #66440c. Aktifkan latar, klik Filter > Texture > Fibers.

Menggambar Ikon Speaker Memanfaatkan Layer Style

[hr]

Hasil Akhir

Di bawah adalah bentuk speaker yang kita peroleh. Dalam prosesnya, kita memaksimalkan penggunaan Layer Style. Dengan cara ini, speaker bisa diperbesar atau diperkecil tanpa menurunkan kualitasnya.

Menggambar Ikon Speaker Memanfaatkan Layer Style

[hr]

Download Link

[ilink style=”download” url=”http://psdfreemium.com/speaker-icon/”%5DDownload File PSD[/ilink]

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.

[hr]

Preview

Di bawah adalah hasil tampilan tipografi yang akan kita peroleh.

Membuat Poster Tipografi Bergaya Desain Swiss

[hr]

Detail Tutorial

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

[hr]

Resource yang Dibutuhkan

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

[hr]

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

[hr]

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

[hr]

Download Link

[ilink style=”download” url=”https://desaindigital.com/wp-content/uploads/2011/07/tutorial-poster-tipografi-swiss/whitespace.zip”%5DDownload File PSD[/ilink]

Menggambar iPad 2 Realistik di Photoshop

Apple iPad 2 — saya menyebutnya iPhone raksasa. Salah satu gadget paling fenomenal dari Apple. Walaupun begitu, kita harus hati-hati karena menjualnya bisa membuat Anda masuk penjara. Oleh karena itu, kita cukupkan saja dengan menggambarnya di Photoshop. Tutorial ini ditulis ekslusif untuk Hongkiat.

[hr]

Preview

Berikut adalah hasil akhir yang diperoleh.

Menggambar iPad 2 Realistik di Photoshop

[hr]

Sebagian Langkah dalam Tutorial

Proses pembuatan iPad 2 dalam tutorial ini menggunakan banyak Layer Styles kemudian digabung dengan menggambar manual.

Menggambar iPad 2 Realistik di Photoshop
Menggambar iPad 2 Realistik di Photoshop
Menggambar iPad 2 Realistik di Photoshop
Menggambar iPad 2 Realistik di Photoshop
Menggambar iPad 2 Realistik di Photoshop
Menggambar iPad 2 Realistik di Photoshop

[hr]

Link Tutorial

[unordered_list style=”bullet”]

[/unordered_list]

Membuat Tombol Sprite dari PSD hingga HTML/CSS

Dalam tutorial ini, saya memperlihatkan cara pembuatan tombol Download di Photoshop lalu mengubahnya menjadi Sprite. Kita akan membahas beberapa teknik CSS dasar untuk menjadikan desain ini fungsional. Tutorial ini ditulis ekslusif untuk PVM Garage.

[hr]

Preview

Berikut adalah hasil akhir tombol yang diperoleh.

Membuat Tombol Sprite dari PSD hingga HTML/CSS

[hr]

Sebagian Langkah dalam Tutorial

Tutorial sederhana membahas detail pembuatan tombol dengan pencahayaan menarik sehingga diperoleh kesan tampilan tiga dimensi.

Membuat Tombol Sprite dari PSD hingga HTML/CSS
Membuat Tombol Sprite dari PSD hingga HTML/CSS
Membuat Tombol Sprite dari PSD hingga HTML/CSS

[hr]

Link Tutorial

[unordered_list style=”bullet”]

[/unordered_list]