Mendesain Situs Portfolio Satu Halaman

Preview

Berikut adalah hasil akhir yang diperoleh.

Sebagian Langkah dalam Tutorial

Tutorial ini membahas proses desain web secara lengkap mulai dari desain di Photoshop hingga cara mengkonversinya ke HTML/CSS. Selain itu, Anda dapat belajar lebih banyak melalui proses pembuatan slide show.

Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop Bagian 4

Langkah 31: Bayangan Logo

Ctrl-klik path logo.

Geser seleksi beberapa pixel ke bawah. Buat layer baru dan simpan di bawah logo. Isi seleksi dengan hitam.

Haluskan bayangan dengan filter Gaussian Blur.

Langkah 32: Mengembalikan Format Teks

Saat ini, teks dalam logo sudah dalam format shape. Artinya kita sudah tidak bisa lagi mengeditnya. Untuk mempermudah, kita akan mengembalikannya ke format teks.
Kembali ke Illustrator, lalu periksa setting setiap teks. Teks 100 dibuat dengan jenis font SlabbTallX dengan ukuran 104 pt.

Langkah 33

Kembali ke Photoshop. buat kembali teks 100 dengan format yang sama. Gunakan juga warna yang sama.

Langkah 34

Duplikasi Layer Style dari teks 100 asli ke 100 baru dengan cara klik kanan dan pilih Copy Layer Style pada 100 asli dan Paste layer Style pada 100 baru.

Anda bisa melihat bahwa keduanya identik. Bedanya, teks 100 baru adalah benar-benar teks yang bisa diedit.

Langkah 35

Ulangi proses yang sama pada kata PERCENT.

Langkah 36: Membuat Teks pada Pita

Untuk membuat teks yang mengikuti bentuk pita, kita menggunakan fitur Type on A Path. Caranya dengan menduplikasi terlebih dahulu bagian depan pita lalu menghapus sisi yang tidak dibutuhkan. Aktifkan tool Type lalu klik tepat pada path.

Langkah 37

Dari Illustrator, kita bisa memperoleh setting teks.

Langkah 38

Bergantung pada proses pembuatan teks, posisi teks bisa jadi akan terbalik. Untuk memperbaiki ini mudah saja. Aktifkan teks, tahan Ctrl lalu klik dan geser untuk mengubah orientasinya.

Langkah 39

Atur posisi teks hingga tepat berada di tengah pita.

Langkah 40

Samakan warna teks lalu beri Layer Style yang sama.

Hasil Akhir

Setelah mengubah teks ke format teks sebenarnya, kita dapat dengan mudah mengedit isi logo. Anda bisa melihatnya di bawah.

Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop Bagian 3

Langkah 21

Aktifkan path bintang. Buat Adjustment Layer Solid Color. Anda bisa menggunakan warna apa pun. Turunkan Fill layer hingga 0%.

Tambahkan Inner Shadow untuk memberi kesan bentuk lubang.

Seperti biasa, kita butuh Gradient Overlay untuk membuat warnanya terlihat alami.

Sedikit Stroke penting untuk memperkuat tampilan sisi luar shape.

Langkah 22

Aktifkan path persen. Tambahkan Adjustment Layer Solid Color dengan warna #14609c.

Tambahkan Inner Shadow untuk memberi kesan lubang.

Langkah 23: Jahitan

Aktifkan path jahitan. Tambahkan Adjustment Layer Solid Color dengan warna #b2ecf4.

Tambahkan Drop Shadow untuk memberi bayangan dan mengangkat shape dari latar.

Bevel and Emboss akan memperkuat kesan timbul.

Langkah 24: Pita

Aktifkan path pita. Hapus semua sub path kecuali bagian depannya. Tambahkan Adjustment Layer Solid Color dengan warna orange.

Gradient Overlay penting untuk memberi tampilan warna yang alami.

Inner Glow akan memnggelapkan sisi terluar pita dan membuat efek 3 dimensi.

Langkah 25

Aktifkan lagi path pita. Hapus semua sub path kecuali bagian belakang pita. Tambahkan Adjustment Layer Solid Color. Pilih warna orange yang lebih gelap. Kita perlu membuatnya lebih gelap dari pita di Langkah 24 karena posisinya lebih jauh di belakang.

Seperti biasa, Gradient Overlay mutlak diperlukan untuk memberi warna yang alami.

Inner Glow untuk menggelapkan sisi terluar pita dan membuatnya terlihat lebih nyata.

Langkah 26

Aktifkan lagi path pita. Kali ini, perhatikan hanya segitiga kecil di antara kedua bagian pita. Buat Adjustment Layer Solid Color yang lebih gelap. Beri Layer Style yang sama dengan bagian belakang pita.

Langkah 27: Bayangan Pita

Kita akan menambahkan bayangan pada bagian belakang pita. Ctrl-klik bagian belakang pita.

Buat layer baru di antara bagian depan dan bagian belakang pita. menggunakan tool Brush lembut, lukis bayangan bagian depan pita.

Ulangi hal yang sama pada sisi yang lain.

Langkah 28

Ctrl-klik bagian depan pita. Buat layer baru. Geser seleksi beberapa pixel ke bawah lalu isi dengan hitam.

Haluskan bayangan dengan filter Gaussian Blur.

Langkah 29

Ctrl-klik lingkaran utama. Klik ikon Add Layer Mask. Bayangan pita akan berada di dalam lingkaran. Turunkan Opacity layer agar bayangan terlihat lembut.

Langkah 30: Teks Pita

Aktifkan path desaindigital. Tambahkan Adjustment Layer Solid Color.

Kita akan mengubah teks ini menjadi 3 dimensi. Tambahkan Drop Shadow untuk mengangkatnya dari latar.

Outer Glow untuk menggelapkan sisi luar teks dan memisahkannya dari latar.

Gradient Overlay agar terlihat alami.

Stroke untuk mempertegas kontras teks dengan latar.