Mengintip Konsep Redesain DesainDigital

Seminggu ini saya memiliki projek personal yang sangat menarik, redesain situs. Ada dua pihak yang terlibat dalam proses ini, saya dan seorang rekan (yang secara spesifik minta tidak disebutkan namanya). Tugas saya menyiapkan mockup situs dalam format PSD lalu rekan saya mengubahnya menjadi theme wordpress. Di sini, saya akan memperlihatkan proses yang terjadi di balik layar dalam redesain situs ini. Mudah-mudahan proses yang terjadi di situs ini, berguna juga bagi Anda yang berminat melakukan redesain.

Menganalisa Kelebihan dan Kekurangan Desain Lama

Proses redesain cukup menyulitkan, apalagi jika Anda sudah memiliki cukup banyak artikel didalamnya. Selain itu, belum tentu pengunjung rutin Anda akan menyukai tampilan baru yang tentu saja asing baginya. Langkah pertama dalam melakukan redesain adalah menganalisa kelebihan dan kekurangan desainnya. Jika memang kekurangannya cukup besar, maka redesain mungkin saja mutlak diperlukan. Jika ternyata kekurangan itu masih bisa ditolerir, sebaiknya projek redesain dipikirkan kembali dengan cermat.

Salah satu kekurangan utama desain lama adalah kolom isi terlalu sempit. Sebuah situs tutorial idealnya bisa menampung gambar dengan lebar hingga 600px. Di desain lama, lebar gambar maksimum 460px. Kesulitan ini sangat terasa ketika menulis tutorial menggambar laptop, saya tidak bisa mengambil gambar secara lebih dekat tanpa mengorbankan detail bagian lain. Karena situs ini memang fokus pada tutorial, maka kekurangan ini cukup fatal dan redesain memang pilihan yang cukup masuk akal.

Kelebihan yang dimiliki situs lama adalah proses scan artikel sangat mudah. Setiap artikel diawali dengan sebuah gambar besar yang sangat menarik perhatian pembaca. Gambar besar ini bisa diklik menuju ke artikel terkait. Fitur ini sangat saya sukai dan akan tetap dipertahankan.

Menentukan Fungsi dan Gaya Desain

Bagian ini bersifat lebih personal. Setiap orang akan memiliki standar yang berbeda dalam hal ini. Saya sendiri lebih menyukai desain yang minimalis. Fungsi desain yang saya inginkan adalah membantu pembaca fokus pada content. Saya tidak berminat menggabungkan elemen-elemen desain yang wah dan menarik perhatian. Saya menginginkan agar pembaca dapat memperoleh informasi situs dengan mudah dan cepat.

Membandingkan Desain Lama dan Baru

Setelah selesai dengan desain, berikutnya mengevaluasi hasil yang diperoleh. Di bawah adalah beberapa perubahan yang saya lakukan.

Header diperkecil. Dalam desain lama, fokus pengunjung akan langsung menuju ke header besar. Dalam desain baru, huruf D yang selama ini menjadi khas avatar saya berperan juga sebagai logo situs. Ukurannya yang kecil, membuat pengunjung lebih mudah untuk fokus pada isi.

mengintip konsep redesain desaindigital
mengintip konsep redesain desaindigital

Gambar yang menyertai setiap artikel tetap muncul di desain baru, hanya saja kali ini lebih kecil. Gambar bisa diklik untuk menuju ke artikel terkait. Desain ini sangat khas Psdtuts+. Saya memang fans desain-desain Collis, pendiri psdtuts+.

mengintip konsep redesain desaindigital
mengintip konsep redesain desaindigital

Kolom artikel dibuat lebih lebar. Kini lebar gambar bisa mencapai 550px yang tentunya lebih cocok untuk tutorial.

mengintip konsep redesain desaindigital
mengintip konsep redesain desaindigital

Di desain lama saya menambahkan gambar kertas, tulisan tangan asli, dan avatar untuk latar footer. Di desain baru saya membuatnya lebih sederhana menggunakan kotak-kotak.

mengintip konsep redesain desaindigital
mengintip konsep redesain desaindigital

Tampilan avatar komentar diperbesar. Ini memberi penghargaan lebih besar pada pengomentar.

mengintip konsep redesain desaindigital
mengintip konsep redesain desaindigital

Saya menambahkan biodata penulis di bagian dalam artikel. Posisinya tepat setelah excerpt, ini terinspirasi dari layout Design Instruct. Ukuran avatar dibuat sangat besar agar profil penulis lebih menonjol dan sebagai bentuk penghargaan lebih pada penulis. Saya memang berencana menerima penulis tamu, jika ada yang tertarik.

mengintip konsep redesain desaindigital

Beberapa hari saya mulai enjoy nge-tweet. Jadi, di bagian atas situs ditambahkan tweet terakhir saya.

mengintip konsep redesain desaindigital

Saya juga mengedit halaman error 404 agar terlihat unik.

mengintip konsep redesain desaindigital

Saya ingin memberikan sentuhan pribadi pada situs ini, jadi saya tambahkan satu-satunya foto profil saya yang tersedia. Kesan personal ditunjukkan juga dengan penggunaan font bergaya handwriting. Teks itu dibuat tidak lurus dan sedikit menikung agar memberi kesan alami. Sedikit bayangan custom saya tambahkan agar foto terlihat 3D dan tidak membosankan.

mengintip konsep redesain desaindigital

Akhirnya, saya harap Anda menyukai desain baru ini. Ingat, bahwa desain ini belum final, masih ada kemungkinan untuk berubah. Saya tunggu saran dan kritik Anda.

Di artikel berikutnya, saya akan membahas tutorial pembuatan mockup situs di Photoshop. Tunggu saja!

Akhirnya! Bergabung dengan Tutsplus Premium

Saya sudah menulis beberapa tutorial di Psdtuts+, tapi saya sendiri tidak bergabung dengan program premiumnya. Tidakkah ini terdengar aneh? Sekarang tidak lagi, karena hari ini saya resmi bergabung dalam keanggotaan premium tutsplus.

[box type=”note”] Artikel ini disertai link referral. Anda dipersilahkan menghapus link referral jika tidak menyukainya.[/box]

Ada apa di program premium Tutsplus+?

Akhirnya, Bergabung dengan Tutsplus Premium

Kita semua tahu bahwa tutsplus menyediakan tutorial-tutorial terbaik di dunia. Dengan mengikuti program premium, kita memperoleh akses pada tutorial-tutorial terbaik di antara yang terbaik. Bayangkan saja, bayaran untuk setiap penulis tutorial premium 200-800$. Sebagai perbandingan, penulis tutorial biasa hanya dibayar 150$. Melihat angka ini, Anda bisa memperkirakan sendiri kualitasnya. Saya lihat para penulis tutorial premium memang merupakan ahli di bidangnya, salah seorang di antaranya ada yang bekerja sebagai desainer poster film Hollywood.

Selain tutorial, Anda juga memperoleh semua source file yang digunakan dalam setiap tutorial. Tentunya dengan cara ini proses belajar bisa lebih mudah.

Tidak hanya tutorial dan source file, Anda juga bisa memperoleh banyak resource desain. Mulai dari brush Photoshop, tekstur berresolusi tinggi, ikon ekslusif, hingga vektor pack. Sebagai perbandingan, harga membership di situs-situs penjual resource desain biasanya 7-9$ per bulan.

Yang lebih menarik lagi, membership berlaku tidak hanya untuk Psdtuts+ tapi semua jajaran Tuts+. Saat ini saya bisa mengakses ActiveTuts+ (animasi, Flash), AudioTuts+ (musik, mixing), CGTuts+ (Maya, 3Ds Max, Poser, Blender), PsdTuts+ (Photoshop), VectorTuts+ (Illustrator, Corel DRAW, InDesign), dan NetTuts+ (WordPress, Pemrograman situs, HTML). Saya sendiri mungkin hanya membutuhkan PsdTuts+, VectorTuts+, dan sedikit CGTuts+ atau NetTuts+. Walaupun begitu, melegakan untuk mengetahui bahwa saya bisa mengakses semua informasi ini setiap saat tanpa perlu membayar lagi.

Akhirnya, Bergabung dengan Tutsplus Premium

Berapa harga keanggotaan premium?

Biaya per bulan 9$ atau setara 90.000 per bulan. Untuk membayar Anda membutuhkan Paypal. Jika Paypal Anda tidak terkait dengan kartu kredit, maka pilihan termurah adalah 22$ untuk tiga bulan.

Akhirnya, Bergabung dengan Tutsplus Premium

Pendapat saya tentang program ini

Menurut saya, program premium ini investasi yang menguntungkan. Harganya pun murah mengingat kualitasnya yang sangat bagus. Saya belajar banyak dari konten gratis Psdtuts+ dan saya yakin saya bisa belajar lebih banyak lagi dari konten premiumnya.

Jika Anda tipe pelajar otodidak, maka harga 9$ sangat layak. Hanya dengan setara 90.000 Anda bisa memperoleh banyak tutorial dan resource berkualitas tinggi. Bahkan dengan hanya berlangganan satu bulan, Anda tetap bisa mendownload semua tutorial yang tersedia.

Tapi saya tidak punya uang…

Ah, ini problem hampir semua orang. Anda tidak punya uang atau tidak punya kartu kredit untuk membayar. Solusinya sederhana, tulis saja satu tutorial Photoshop. Anda akan dibayar minimal 50$, ini lebih dari cukup untuk 3 bulan keanggotaan. Langkah ini sudah terbukti, saya melakukannya.

Pemikiran Sederhana Tentang SEO

Dalam artikel ini, saya akan membahas beberapa prinsip sederhana tentang SEO. Saya menulis ini didorong keprihatinan melihat beberapa praktik buruk para blogger atas nama SEO. Di kalangan desainer, SEO merupakan topik yang kontroversial. Kebanyakan desainer berfikir skeptis tentang SEO, Anda akan menemukan hal yang sama di sini.

[hr]

Search Engine Optimization (SEO)

Jadi, apa itu SEO? Wikipedia mendefinisikan Search engine optimization (SEO) sebagai proses memperbaiki kemampuan sebuah situs agar dikenali oleh mesin pencari dalam proses pencarian secara “natural” atau tidak berbayar (“organik” atau “algoritmik”).  Ketika orang-orang berbicara tentang SEO maka mereka bicara tentang Google. Google hingga saat ini masih memegang pasar terbesar mesin pencari dengan presentasi pasar sekitar 71%. Untuk memahami SEO, maka Anda terlebih dahulu harus mengetahui cara kerja Google.

Apa yang dilakukan Google?

Kita semua tahu google. Pertanyaan berikutnya, apa yang dilakukan Google? Sebagai sebuah mesin pencari, setiap saat Google membaca isi semua situs yang ada lalu membuat kesimpulan-kesimpulan berdasarkan data yang sebelumnya dia baca. Google akan merangking semua situs berdasarkan kualitasnya, situs terbaik akan mendapat kehormatan muncul di halaman depan hasil pencarian.

Tidak ada seorang pun mengetahui metode yang digunakan Google dalam proses meranking situs. Metode ini dirahasiakan untuk menghindari orang jahat yang ingin mengacaukan hasil pencarian Google, hanya orang dalam yang tahu. Metode ini pun selalu berubah dan berevolusi. Ini dilakukan untuk terus memperbaiki akurasi hasil pencarian Google. Google hanya memberikan beberapa tips SEO secara garis besar di Web Master Central Blog.

SEO Expert?

Karena Google tidak membeberkan algoritmanya, maka tidak ada seorang yang benar-benar tahu cara kerja Google. Jadi, adakah SEO expert? Menurut saya tidak ada. Bagaimana bisa mereka mengklaim ahli tentang Google sementara cara kerjanya pun tidak tahu!

Memahami Google

Telah saya katakan di atas bahwa Google mendatangi setiap situs, membaca isinya, menuliskan ke database, lalu membandingkan dengan situs lain. Coba pikirkan! Bukankah ini sama dengan perilaku pengunjung biasa? Pengunjung mengunjungi sebuah situs, membaca isinya, lalu membandingkan dengan situs lain. Jika situs ini menarik tentu mereka akan mengingatnya dan berkunjung kembali. Jadi, anggaplah Google sebagai versi mesin dari para pengunjung situs Anda.

Untuk menjaga agar hasil pencariannya tetap relevan, cara kerja Google haruslah meniru logika pengunjung biasa (manusia). Misalnya ada dua situs tutorial Photoshop, Psdtuts+ dan DesainDigital. DesainDigital muncul dalam blogroll 50 situs, sementara Psdtuts+ hanya muncul di blogroll 20 situs. Tentu saja pengunjung akan berkesimpulan bahwa DesainDigital lebih berkualitas dari Psdtuts+. Fakta lebih lanjut ternyata menunjukkan bahwa 50 situs yang menuliskan DesainDigital di blogroll-nya sama sekali bukan situs tutorial Photoshop. Sementara itu, Psdtuts+ muncul di blogroll 20 situs tutorial Photoshop. Fakta baru ini akan menyimpulkan bahwa Psdtuts+ lebih berkualitas karena diakui oleh situs yang kompeten dalam bidangnya, tutorial Photoshop. Dari sini, kita bisa memperkirakan bahwa backlink dari situs bertema sama akan lebih disukai Google daripada backlink dari situs yang berbeda. Anda bisa membaca keterangan resmi tentang backlink berkualitas di sini. Baca kutipan contoh perhitungan link di bawah.

Let’s say I have a site, example.com, that offers users a variety of unique website templates and design tips. One of the strongest ranking factors is my site’s content. Additionally, perhaps my site is also linked from three sources — however, one inbound link is from a spammy site. As far as Google is concerned, we want only the two quality inbound links to contribute to the PageRank signal in our ranking.

Contoh lain, kecepatan situs. Di April 2010 Google mengumumkan bahwa kecepatan situs masuk dalam pertimbangan rangking situs. Baca kutipannya di bawah.

Speeding up websites is important — not just to site owners, but to all Internet users. Faster sites create happy users and we’ve seen in our internal studies that when a site responds slowly, visitors spend less time there. But faster sites don’t just improve user experience; recent data shows that improving site speed also reduces operating costs. Like us, our users place a lot of value in speed — that’s why we’ve decided to take site speed into account in our search rankings. We use a variety of sources to determine the speed of a site relative to other sites.

Di atas jelas sekali bahwa Google memasukkan faktor kecepatan karena berdasarkan data, pengguna menganggapnya penting. Maukah Anda bertahan menunggu  satu menit hingga seluruh isi situs muncul?

Jadi, apa yang harus kita lakukan?

Setelah menyadari bahwa Google berfikir sama seperti pengunjung lainnya, maka yang harus kita lakukan adalah mulai menulis untuk pengunjung. Menulislah untuk pengunjung (manusia), bukan robot! Jangan membombardir isi tulisan dengan link internal. Tidak perlu menebalkan setiap keyword. Tidak perlu memaksakan harus menulis keyword di paragraf pertama artikel. Menulislah seperti manusia normal.

Hentikan berburu backlink sebanyak-banyaknya. Jangan mengemis untuk bertukar link, apalagi membeli link. Ini buruk untuk reputasi situs Anda. Bahkan Google sendiri menyebutnya cara terburuk untuk memperoleh link dan sama sekali tidak berguna.

It’s important to clarify that any legitimate link building strategy is a long-term effort. There are those who advocate for short-lived, often spammy methods, but these are not advisable if you care for your site’s reputation. Buying PageRank-passing links or randomly exchanging links are the worst ways of attempting to gather links and they’re likely to have no positive impact on your site’s performance over time. If your site’s visibility in the Google index is important to you it’s best to avoid them.

Jangan menambahkan keyword sex, porno, miyabi, atau Ariel Peterporn ke dalam artikel Anda. Jangan menganggap Google bodoh. Sekilas kita bisa mengenali bila sebuah situs tidak sesuai dengan keyword yang kita cari, begitu juga Google.

[hr]

Kesimpulan

Jangan mengorbankan kualitas situs Anda. Buatlah artikel-artikel berkualitas. Berpikirlah jangka panjang. Jangan mengharapkan kepopuleran secara mendadak. Pikirkan reputasi situs Anda.

Perhatikan web usability, yaitu dengan mempermudah pengunjung agar memperoleh informasi dengan cepat dan efisien. Jangan persulit pengguna dengan hal-hal yang tidak perlu.

Jika reputasi situs Anda baik di mata pengunjung maka Google akan berpikir sama.

[hr]

Referensi

[hr]
Saya sudah lelah dengan kelakuan para ahli SEO. Bagaimana dengan Anda?

Membuat Tombol Download Glossy Berwarna Cerah (Plus Set Tombol Gratis)

Dalam tutorial ini, saya akan memperlihatkan pembuatan tombol download dengan tema glossy dan tampilan 3 dimensi. Tutorial ini akan membahas secara lengkap hingga ke pembuatan gambar transparan dalam format PNG-24. Semua elemen dalam tombol ini dibuat dari vector shape, ini membuat tombol bisa ditransformasi ke ukuran berapa pun tanpa menurunkan kualitasnya. Karena desain ini untuk web, kita akan bekerja dengan sangat akurat hingga ke detail 1 pixel. Semua ini diperlukan untuk mencapai desain yang pixel perfect.

[hr]

Preview

Sebelum mulai, lihat terlebih dahulu tombol download yang akan kita buat. Terlihat menarik? Lanjutkan dengan mengikuti tutorial di bawah.

Membuat Tombol Download Glossy Berwarna Cerah

[hr]

Detail Tutorial:

  • Tingkat Kesulitan: Pemula.
  • Software yang Digunakan: Adobe Photoshop.
  • Materi yang Dibahas: Penggunaan Layer Style, Proses Transformasi, Menggambar Shape Vektor.
  • Lama Pengerjaan: 10 menit.

[hr]

Tutorial

Langkah 1: Bentuk dasar tombol

Aktifkan tool rounded rectangle, pilih radius 7 px lalu buat shape persegi seperti di bawah. Beri layer shape ini base. Saya menggunakan warna biru muda di sini, Anda bisa menggunakan warna apapun yang Anda suka. Tidak masalah. Kita bisa mengubahnya nanti.

Tambahkan layer style Gradient Overlay dengan setting seperti di bawah. Style ini akan memberi kesan menggelembung pada shape.

Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah

Langkah 2

Di dalam shape base tombol, buat lagi sebuah rounded rectangle kali ini dengan radius 5 px. Ubah fill layer ke 0%. Beri stroke berupa gradasi dari abu-abu ke putih, set blend mode ke Screen untuk mempertahankan hanya warna putih di bagian atas. Stroke seperti ini memberi efek sedikit bevel di bagian dalam tombol.

Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah

Langkah 3: Refleksi

Gandakan layer shape base lalu secara manual tambahkan path berbentuk gelombang. Pilih intersect path untuk memotong kedua path. Ubah fill ke 0%. Lihat gambar di bawah untuk referensi.

Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah

Langkah 4: Ikon download

Buat sebuah shape lingkaran di sisi kiri tombol. Ubah Fill ke 0% dan Opacity layer 80%. Beri layer style

Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah

Langkah 5

Di dalam shape lingkaran tadi, buat lagi sebuah shape lingkaran dan beri layer style Gradient Overlay dengan tipe radial. Klik dan geser pada gambar untuk menggeser pusat gradasi agar tidak tepat di tengah-tengah lingkaran.

Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah

Langkah 6

Aktifkan tool custom shape dan dari daftar shape pilih salah satu shape panah. Buat shape panah berwarna hitam di tengah lingkaran. Ubah fill ke 11% lalu tambahkan layer style Bevel and Emboss dan Stroke. Bevel and Emboss akan memberikan efek emboss atau cekung ke dalam sementara Stroke akan memperkuat highlight di bagian bawah dalam cekungan dan memperkuat kesan 3 dimensi.

Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah

Langkah 7: Teks DOWNLOAD

Beri teks DOWNLOAD ke atas tombol. DI sini saya menggunakan font Arial Rounded karena terlihat menyatu dengan bentuk tombol. Teks besar biasanya akan lebih renggang dan ini tidak terlihat bagus ketika dibaca, ini salah satu konsep dasar dalam tipografi. Buka panel Character lalu perkecil tracking karakter hingga -25. Tambahkan layer styles Bevel and Emboss dan Gradient Over bertipe Gradient untuk memberi kesan teks cembung ke dalam.

Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah

Langkah 8: Menambah pita

Sekarang kita menambahkan pita yang bisa diisi dengan keterangan singkat. Buat shape berbentuk persegi. Dengan tool pen klik titik pojok kiri bawah untuk menghapusnya dan menghasilkan bentuk segitiga. Gandakan path segitiga, geser lima pixel ke kanan dan lima pixel ke atas. Pilih subtract path untuk mengurangi path sebelumnya.

Membuat Tombol Download Glossy Berwarna Cerah

Langkah 9

Tambahkan layer style Gradient Overlay bertipe radial. Geser posisi gradasi.

Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah

Langkah 10

Zoom lebih dekat. Buat dua garis di sisi terluar pita dengan pensil 1 px berwarna putih. Tambahkan keterangan misalnya FREE dan putar 45 derajat. Simpan teks ke atas pita. Karena teks ini sangat kecil, agar mudah dibaca kita perlu memperbesar nilai tracking melalui panel Character.

Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah

Langkah 11

Saat ini, pita terlihat melayang. Buat layer baru di antara pita dan tombol. Buat garis hitam menggunakan brush lembut. Lakukan proses transformasi, klik kanan dan pilih Warp. Geser kotak tengah hingga bagian tengah garis terlihat melengkung. Turunkan opacuty layer ke 30%. Dengan tool eraser hapus bagian bayangan yang tidak dibutuhkan.

Membuat Tombol Download Glossy Berwarna Cerah

Langkah 12

Buat seleksi kotak di belakang pita dan isi dengan warna abu-abu gelap. Bagian ini menjadi bagian belakang pita.

Membuat Tombol Download Glossy Berwarna Cerah

Langkah 13: Bayangan tombol

Buat layer baru seleksi di bagian paling bawah. Buat seleksi ellipse memanjang di bawah tombol. Isi dengan hitam dan beri filter Gaussian Blur untuk menghaluskan bayangan.

Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah

Langkah 14: Mengubah warna tombol

Kita ingin agar tombol ini seflexibel mungkin, warnanya bisa diubah dengan mudah tanpa perlu melakukan editing rumit. Untuk ini kita akan menggunakan adjustment layer Hue/Saturation. Tambahkan adjustment layer Hue/Saturation di atas layer shape base.

Tambahkan juga adjustment layer Hue/Saturation di atas layer pita. Khusus yang ini, ubah menjadi clipping mask dengan menekan Ctrl + Alt + G. Dengan cara ini, Hue/Saturation hanya akan mempengaruhi warna pita.

Membuat Tombol Download Glossy Berwarna Cerah

Langkah 15

Jika kita ingin mengubah warna tombol, misalnya agar sesuai dengan color scheme situs, kita tinggal mengaktifkan adjustment layer Hue/Saturation, pastikan pilihan Colorize aktif lalu geser ketiga slider yang tersedia. Dengan mudah warna tombol dan pitanya akan berubah. Lihat hasil yang saya peroleh hanya dengan mengubah slider di kedua adjustment layer.

Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah

Langkah 16: Menyimpan sebagai ikon transparan

Langkah terakhir kita adalah menyimpan gambar sebagai ikon transparan. Sembunyikan Background lalu tekan Ctrl + Shift + Alt + S. Di pilihan yang muncul pilih Preset: PNG-24 dan aktifkan pilihan Transparency.

Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah

[hr]

Hasil Akhir

Akhirnya, inilah desain yang kita peroleh. Perhatikan bahwa formatnya sudah transparan sehingga latar gambar tetap terlihat. Seperti biasa, di akhir tutorial ini saya menyediakan file source yang digunakan. Tersedia juga lima tombol dalam berbagai warna dengan format file PNG transparan yang bisa langsung Anda gunakan jika mau.

Membuat Tombol Download Glossy Berwarna Cerah

[hr]

Download Link

[ilink style=”download” url=”http://dl.dropbox.com/u/7116487/desaindigital/tutorial/tombol-download-glossy-desaindigital.zip”%5DDownload File PSD[/ilink] (148 KB)

Kuis Berhadiah Buku The Art of Typography

Mudah sekali, Anda tinggal menuliskan komentar di bawah artikel ini untuk memenangkan buku The Art of Typography. Jika ada saran atau kritik silakan dituliskan sekalian. Setiap orang hanya diperkenankan berkomentar satu kali. Pemenang akan dipilih secara acak dua minggu kemudian, 25 Agustus 2010, menggunakan fungsi dari random.org.

Pemenang akan dihubungi via email. Jika dalam dua hari tidak ada tanggapan maka pemenang baru dipilih lagi secara acak. Continue reading “Kuis Berhadiah Buku The Art of Typography”