Preview

Di bawah adalah tampilan desain yang akan kita buat.

Detail Tutorial

• Tingkat Kesulitan: Pemula, Menengah
• Software yang Digunakan: Adobe Photoshop
• Teknik yang Dipelajari: Mendesain dengan Grid 960, Layer Style
• Lama Pengerjaan: 30 menit

Resource yang Dibutuhkan

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

• Template Grid 960 dari 960.gs
• Pola Pixel dari PSDfreemium
• Set ikon Oxygen dari Oxygen

Tutorial

Langkah 1: Mempersiapkan File

Buka template grid 960 px yang terdiri dari 12 kolom di Photoshop. Lebar saat ini terlalu sempit untuk kebutuhan kita. Jadi, perbesar ukurannya hingga 1.100 x 1.200 px dengan perintah Image > Canvas Size.

Langkah 2: Header

Aktifkan tool Rectangle dan buat latar header dengan warna #2c2a2f.

Klik ganda layer dan aktifkan Pattern Overlay. Gunakan Pola Pixel dari PSDfreemium.

Di bawah adalah tampilan latar header di perbesaran 100%.

Langkah 3: Area Info Produk

Aktifkan tool Rectangle dan buat latar untuk informasi produk. Area ini harus berada di atas header.

Tambahkan Layer Style Stroke dan turunkan Opacity agar hasilnya transparan.

Di bawah adalah hasil Stroke.

Langkah 4

Buat layer baru. Seleksi latar area produk. Isi dengan putih. Klik Filter > Noise > Add Noise.

Langkah 5

Ubah Blend mode ke Multiply dan turunkan Opacity ke 20%. Ini akan memberi tekstur noise pada latar.

Langkah 6: Logo

Aktifkan tool Ellipse. Ubah warna depan ke orange. Shift-drag untuk membuat lingkaran.

Langkah 7

Ctrl – click lingkaran lalu klik Select > Modify > Contract.

Langkah 8

Buat layer baru lalu klik Edit > Stroke. Gunakan Width: 1 px dengan warna hitam. Turunkan Opacity layer ke 20%.

Langkah 9

Tekan Ctrl + J untuk menggandakan garis stroke. Tekan Ctrl + I untuk membalik warna garis menjadi putih. Aktifkan tool Move lalu klik panah atas sekali untuk menggaris garis 1 px ke atas.

Langkah 10

Buat layer baru lalu ubah menjadi Clipping Mask dengan menekan Ctrl + Alt + G. Lukis bagian atas dan bawah lingkaran dengan putih. Turunkan Opacity layer ke 10%.

Langkah 11

Aktifkan tool Custom Shape dan pilih bentuk Snowflake dari baris pilihan. Buat nowflake hitam di tengah-tengah lingkaran. Klik ganda layer dan beri bevel and Emboss. Turunkan Fill hingga 5%.

Langkah 12

Buat layer baru. Ctrl + klik lingkaran dan klik Edit > Stroke dengan warna putih. Haluskan garis dengan Gaussian Blur.

Langkah 13

Hapus bagian atas dan bawah garis stroke dengan tool eraser. Turunkan oapcity layer hingga 30%.

Langkah 14

Ctrl – klik lingkaran. Buat layer baru dan isi seleksi dengan hitam. Haluskan dengan Gaussian Blur. Simpan bayangan ke belakang lingkaran. Transformasi (Ctrl + T) bayangan agar bagian atas dan bawahnya mencuat.

Langkah 15

Tambahkan nama situs dan tagline dengan font Helvetica Bold dan Regular.

Langkah 16

Tambahkan menu halaman di sisi kanan header. Gunakan warna orange, sama dengan warna logo, untuk link aktif. Samakan warna link lainnya dengan latar area info produk.

Langkah 17

Simpan gambar produk.

Langkah 18

Tambahkan keterangan produk. Gunakan ukuran font yang cukup besar agar menarik perhatian. Saya memilih kombinasi font Sans Serif untuk teks utama dan Serif untuk keterangannya.

Langkah 19: Area Trial

Buat lagi latar persegi untuk info trial produk. Gunakan orange sesuai tema warna kita. Pastikan agar area ini berada di belakang area keterangan produk, agar efek Stroke transparan berada di atasnya.

Beri Gradient Overlay

Langkah 20

Tambahkan keterangan trial produk.

Beri Inner Shadow pada teks.

Di bawah adalah hasil yang kita peroleh.

Langkah 21

Ambil tombol dari PSDfreemium. Modifikasi sedikit warnanya agar sesuai dengan tema warna kita.

Langkah 22: Area Keterangan Tambahan

Aktifkan tool Rectangle dan buat latar lagi. Kali ini dengan warna abu-abu untuk poin-poin keterangan produk. Simpan area ini di atas bagian info trial produk.

Beri Stroke dengan setting yang sama dengan area info produk.

Efek Stroke transparan akan muncul di atas area trial produk.

Langkah 23

Buat sub judul poin pertama dengan font Helvetica Bold. Gunakan warna orange. Beri Drop Shadow agar teks sedikit terangkat.

Langkah 24

Ambil set ikon Oxygen. Simpan di bawah sub judul.

Langkah 25

Buat path kotak untuk teks lalu buat lagi path kotak untuk menutupi ikon dengan mode Subtract.

Langkah 26

Klik di dalam shape dengan tool Type untuk menambahkan teks.

Langkah 27

Simpan teks dan ikon ke dalam group lalu geser sambil menahan Alt untuk menduplikasinya. Ubah teks dan ikon untuk setiap bagian.

Langkah 28: Footer

Buat latar footer dengan bentuk yang sama seperti header. Gunakan Layer Style dan warna yang sama.

Langkah 29

Tambahkan keterangan tentang desainer dan berbagai info lainnya.

Hasil Akhir

Di bawah adalah desain akhir yang kita peroleh. Bisa Anda lihat bahwa desain ini sederhana namun cukup kuat dalam menonjolkan produk yang ingin dijual situs.

Download Link

Related posts:

• Mendesain Situs Perusahaan dengan Warna Cerah dan Pola Pixel
• Mendesain Situs Portfolio Satu Halaman (PSD – HTML/CSS)
• Mendesain Slider Web di Photoshop
• Mendesain Theme Tumblr Minimalis
• Mendesain Blog Minimalis dengan Grid 960

Gambar-Gambar Seni Bertema Bruce Lee

Bruce Lee – be like water

Bruce Lee

Bruce Lee: Enter The Dragon

Bruce Lee

Bruce Lee in Enter The Dragon

BRUCE LEE

Bruce Lee

Bruce Lee

Bruce Lee

Bruce Lee

Bruce Lee in watercolor

:the dragon: BRUCE LEE

Bruce Lee-2

Bruce Lee-11

Bruce Lee’s battle call

Bruce Lee the ultimate fighter

Bruce Lee

Bruce Lee 1

BRUCE LEE in WPAP

brucelee

TypographyPosterBruce

bruce lee fb

Fans Bruce Lee Juga?

Apakah Anda fans Bruce Lee juga? Apa film favoritmu?

Related posts:

• Koleksi Seni Kertas dari Peopletoo
• Seni Tidak Mungkin dari Li Wei
• Karya Seni Batman Dari DeviantArt
• Kumpulan Desain Interface Web Bertema Futuristik
• Kumpulan Interface Desain Web Bertema Game

Tutorial ini ditulis ekslusif untuk Psdtuts+ dan merupakan hasil kolaborasi dengan Ardhy Moelya Zam-zam.

Preview

Berikut adalah hasil akhir yang diperoleh.

Sebagian Langkah dalam Tutorial

Di bawah adalah beberapa langkah dalam tutorial.

Link Tutorial

Related posts:

• Memodifikasi Mobil Bergaya Racing Style di Photoshop
• Membuat Situs Foto Minimalis dari PSD hingga HTML/CSS
• Membuat Ikon Gambar Tangan dengan Cara Manual
• Membuat Gambar Sketsa dari Foto
• Membuat Gambar Indah dan Dramatis dengan Manipulasi Foto

Teknik 1: Menggunakan Dua Jendela

Teknik pertama adalah dengan melihat file dalam dua ukuran perbesaran. Satu jendela dalam perbesaran 100% untuk melihat hasil akhir dan satu lagi dalam resolusi lebih besar agar bisa bekerja dengan akurat hingga ke pixel terdekat.
Untuk melakukan teknik ini klik View > New Window for [nama_file]. Geser baris judulnya untuk memisahkan jendela file sehingga bisa dilihat bersamaan dengan jendela yang lain. Tekan Ctrl + 1 untuk menampilkan file dalam perbesaran 100%. Teknik ini saya perlihatkan dalam tutorial Mendesain Ikon Twitter 32 × 32 px.

Teknik 2: Snap to Pixels

Anda bisa mengaktifkan fitur Snap to Pixels pada tool Rectangle dan Rounded Rectangle. Dengan fitur ini semua shape yang Anda buat akan tepat pada grip pixel sehingga tidak akan ada sisi-sisi buram.

Teknik 3: Menggunakan Grid 1 px

Buka Preferences Photoshop (Ctrl + K) lalu di bagian Guides, Grid & Slices isikan Gridline Every: 10 pixels dan Subdivisions: 10. Setting ini akan menghasilkan grid berjarak tepat 1 px. Ubah Style grid ke Dots agar tampilan grid tidak terlalu mengganggu.

Pastikan untuk mengaktifkan Snap to Grid agar setiap objek secara otomatis menempel pada grid.

Tampilan shape rounded rectangle dengan grid kanvas 10 px.

Teknik 4: Menggeser 1 px

Setiap kali tombol panah ditekan (istilahnya nudging), Photoshop akan menggeser objek sejauh 1 px pada layar. Artinya, dalam perbesaran 200% Photoshop akan menggeser 0,5 px. Untuk mencegah pergeseran yang tidak tepat, lakukan nudging pada hanya pada perbesaran 100%. Untuk mempercepat, Anda bisa membuka jendela baru dengan perbesaran 100% dan mengaktifkannya setiap kali akan melakukan nudging.

No related posts.

Preview

Berikut adalah hasil akhir yang diperoleh.

Sebagian Langkah dalam Tutorial

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

Link Tutorial

Related posts:

• Desain Web eCommerce Terinspirasi Groupon Lengkap dengan Slider jQuery
• Mendesain Slider Web di Photoshop
• Membuat Tombol Sprite dari PSD hingga HTML/CSS
• Membuat Gambar Preview Blog Lebih Menarik dengan Actions
• Membuat Situs Foto Minimalis dari PSD hingga HTML/CSS

Preview

Berikut adalah hasil yang akan kita peroleh.

Detail Tutorial

• Tingkat Kesulitan: Pemula, Menengah
• Software yang Digunakan: Adobe Illustrator
• Teknik yang Dipelajari: Projeksi Isometrik, Pembuatan Guide, Editing Shape, Dasar Tipografi
• Lama Pengerjaan: 45 menit

Tutorial

Langkah 1: Mengatur Preference Illustrator

Untuk mempermudah pembuatan guide untuk proyeksi isometrik terlebih dahulu kita perlu mengatur setting Preferences Illustrator. Tekan Ctrl + K untuk membuka kotak dialog Preferences. Di pilihan General ubah Keyboard Increment ke 1 cm.

Langkah 2: Membuat Bentuk Dasar Teks

Sebelum membuat tampilan tiga dimensinya, untuk mempermudah kita mulai dengan membuat tampilan teks dalam dua dimensi. Langkah awal kita akan membuat guide. Buat garis vertikal lalu tekan Alt + Panah Kiri untuk menduplikasinya. Tekan Ctrl + D untuk mengulangi proses duplikasi. Lakukan terus hingga kita peroleh cukup banyak garis.

Langkah 3

Seleksi semua garis lalu tekan Ctrl + C dan Ctrl + F untuk menduplikasinya. Putar garis 90°.

Langkah 4

Seleksi semua garis. Klik View > Guides > Make Guides (Ctrl + 5) untuk mengubah garis-garis tadi menjadi guide.

Langkah 5

Kita mulai dengan membuat huruf T. Untuk ukurannya, kita gunakan proporsi standar 5:3. Di sini saya buat huruf T seperti di bawah.

Langkah 6

Di bawah untuk huruf Y. Masih dengan proporsi yang sama, 5:3.

Langkah 7

Di bawah adalah tampilan seluruh huruf.

Langkah 8: Membuat Grid Isometrik

Setelah selesai mendesain huruf, berikutnya adalah mempersiapkan grid isometrik. Buat layer baru khusus untuk menyimpan grid isometrik. Aktifkan tool Line lalu klik sekali pada kanvas. Gunakan sudut 30°.

Langkah 9

Tekan Alt + Panah Kanan untuk menduplikasi garis lalu tekan Ctrl + D untuk mengulangi proses duplikasi tadi.

Di bawah adalah tampilan garis yang diperoleh. Pastikan tinggi garis melebihi ukuran kanvas.

Langkah 10

Seleksi semua garis, klik kanan dan pilih Reflect. Pilih Vertical dan klik Copy.

Langkah 11

Seleksi semua garis lalu tekan Ctrl + 5 untuk mengubahnya menjadi Guides.

Langkah 12

Untuk mempermudah proses menggambar selanjutnya, pastikan untuk mengaktifkan Snap to Point dari menu View.

Langkah 13

Jika Guides yang diperoleh sulit dilihat Anda bisa mengubah warnanya melalui kotak dialog Preferences (Ctrl + K).

Langkah 14: Belajar Membuat Balok Isometrik

Sebelum maju ke projek tipografi mari kita mulai dengan belajar menggambar balok sederhana. Gunakan tool Persegi untuk membuat sebuah persegi empat.

Langkah 15

Aktifkan tool Direct Selection lalu geser titik-titik ujungnya satu per satu hingga menempel pada bidang.

Langkah 16

Ulangi proses ini untuk membuat sisi yang lain.

Langkah 17

Saya temukan bahwa penggunaan Guide di Illustrator tidak begitu akurat. Illustrator entah kenapa tidak memiliki fitur Snap to Guide tapi hanya Snap to Point. Ini membuat titik Anda mungkin sekali menempel secara tidak tepat. Anda bisa melihatnya pada titik yang ditandai di bawah.

Langkah 18

Untuk memperbaikinya, Anda perlu men-zoom gambar ke tampilan maksimal lalu menggeser titik tersebut secara manual ke posisi sebenarnya.

Langkah 19: Menggambar Teks Tiga Dimensi

Setelah memahami teknik dasar menggambar isometrik barulah kita masuk ke proses menggambar teks. Gambar bagian depan huruf T dengan proporsi sama dengan sketsa yang kita buat di Langkah 5.

Langkah 20

Berikutnya menggambar sisi teks.

Langkah 21

Lakukan proses ini pada huruf-huruf yang lain.

Langkah 22

Anda bisa berhenti di sini dan memberikan warna pada huruf.

Di bawah adalah tampilan hitam putih.

Langkah 23

Kita akan melanjutkan menambah Stroke di sekeliling teks. Efek ini biasa digunakan dalam gambar karakter kartun. Duplikasi semua huruf dan sembunyikan teks asli. Caranya dengan seleksi semua huruf lalu tekan Ctrl + A. Buat layer baru lalu tekan Ctrl + F. Klik ikon mata di depan layer huruf yang asli.

Seleksi huruf T lalu gabungkan dengan klik Unite di Pathfinder.

Langkah 24

Hapus garis tambahan yang mungkin dihasilkan proses ini.

Langkah 25

Ulangi proses yang sama pada huruf-huruf yang lain.

Langkah 26

Ini adalah hasil yang diperoleh.

Langkah 27

Kosongkan Fill lalu naikkan Weight Stroke hingga 3 pt.

Langkah 28

Munculkan kembali teks asli.

Langkah 29

Sepintas terlihat bagus tapi jika dilihat lebih dekat ada beberapa detail yang tidak logis. Salah satunya adalah garis Stroke menutupi huruf. Untuk memperbaikinya geser layer Stroke ke belakang huruf.

Langkah 30

Mungkin sekali sebagian Stroke masih menutupi teks.

Langkah 31

Untuk memperbaikinya, Anda perlu mengatur posisi huruf agar yang di depan berada di posisi lebih atas.

Hasil Akhir

Ini adalah hasil yang kita peroleh. Semoga tutorial sederhana ini membantu Anda memahami cara menggambar dengan metode isometrik.

Download Link

Related posts:

• Menyatukan Teks 3 Dimensi ke Dalam Foto Nyata
• 15 Gambar Isometrik untuk Menginspirasi Anda
• Membuat Teks 3D Bermotif Bunga
• Membuat Manipulasi Foto disertai Efek Teks Berwarna
• Membuat Poster Bertema Objek Geometris Menggunakan Photoshop dan Illustrator