Mendesain Template Website dengan Photoshop

WartaIPTEK.com - Kali ini kita akan membuat template dari website panti sosial. Maka, elemen yang harus ditonjolkan adalah tombol donasi yang bisa ditemukan dengan mudah. Software yang akan kita gunakan adalah Adobe Photoshop dengan versi bebas.

 

Langkah 1. Kita akan mulai dengan membuat canvas yang cukup besar. Buka Photoshop Anda, kemudian atur canvas baru dengan rasio Width x Height: 1020 x 1725 piksel. 

Langkah 2. Selanjuthya, kita buat background. Fill Layer dari background dengan warna abu-abu solid (#e6e6e6). Caranya, pilih menu Layer > New Fill Layer > Solid Color. Kemudian buat Shape lagi berwarna kuning cerah (#ffcb05) dengan tinggi 70 px untuk bagian navigasi header. Terakhir, buat sebuah Shape dengan tinggi 500 px untuk background slider. Beri warna merah velvet (#c73047). 

Langkah 3. Sekarang kita fokuskan pada pembuatan bagian header. Untuk menu-menu navigasi, kita bisa gunakan font Arial Bold dengan ukuran 12px. Sedangkan untuk logo panti, kita bisa gunakan LogoType dengan font Arial Regular ukuran 24px. Agar lebih sinergi, warna font bisa kita set jadi merah velvet seperti warna background slider. 

Langkah 4. Berikutnya kita buat tombol di samping kanan menu navigasi. Melalui Rounded Rectangle Tool (U), buat bentuk memanjang. Kemudian tambahkan Layer Style berupa Gradient Overlay pada shape pertama yang telah kita buat. Warna 1 isi dengan #b82031, sedangkan warna 2 isi dengan #c73047. 

Langkah 5. Kemudian tambahkan teks "Unduh Proposal" di atas tombol. Untuk memberi kesan detail, beri Layer Style berupa Drop Shadow warna hitam (#000000) dengan Distance 1 px dan Opacity 30% pada teks tersebut. Sekarang buat 1 lagi tombol dengan Gradient Overlay di mana warna 1 #1f1f1f dan warna 2 #2ee2e. Tambahkan teks "Detail Program" untuk nama tombolnya. 

Langkah 6. Gunakan Rounded Rectangle Tool (U) utuk membuat bentuk baru dengan tinggi 340 px dan lebar 700 px. Warnai dengan abu-abu gelap (#2d2d2d). 

Langkah 7. Sekarang, kita akan menambah pita (ribbon) untuk mempercantik background slider. Buat shape baru dengan Rectangle Tool, tinggi 40 px dan lebar 716 px. Beri warna kuning (#ffcb05) yang selaras dengan warna background header. 

Langkah 8. Kemudian buat shape lagi untuk efek lipatan pita. Atur tinggi 40 px dan lebar 8 px. Beri warna kuning yang lebih gelap (#a68500), kemudian taruh di belakang shape kotak kuning pertama. Terakhir, Transform Path kemudian Skew shape ke bawah. Duplikat layer shape tersebut dan pindahkan ke bagian pita paling kanan, kemudian Transform Path dan Flip Horizontal. 

Langkah 9. Isi background slider dengan konten. Untuk bagian ribbon, tambahkan teks judul. Gunakan font Arial Bold 18 px dengan warna abu-abu gelap (#333333). Kemudian masukkan gambar dengan ukuran 435 x 240 piksel. Tambahkan pula satu paragraf teks di sebelah gambar dengan font Arial Regular 12 px. Beri warna putih (#ffffff). 

Langkah 10. Buat tombol "Read More" untuk konten slider. Caranya, duplikat tombol yang sudah kita buat pada langkah 4, kemudian ganti warna Gradient Overlay dengan warna 1 (#c79f00) dan warna 2 (#ffcb05). Taruh tombol di bawah paragraf slider. 

Langkah 11. Tambahkan teks di bawah slider untuk menonjolkan langkah-langkah melakukan donasi. Gunakan font BebasNeue ukuran 70px dengan warna abu-abu gelap (#2d2d2d) sebagai judulnya. Jika Anda belum mempunyai font BebasNeue, Anda bisa download dulu di situs DaFont.com 

Langkah 12. Tambahkan 3 shape persegi panjang berukuran 250 x 150 piksel berwarna merah velvet (#c73047). Buat shape tersebut sejajar dengan jarak yang sinergi. Kemudian tambahkan garis penghubung antara persegi panjang tersebut. Gunakan warna abu-abu gelap (#2d2d2d).

Langkah 13. Sekarang tambahkan teks ke dalam kotak merah velvet. Gunakan font Arial Regular 12px berwarna putih. Kotak pertama isi dengan teks sederhana. Kotak yang kedua akan kita isi dalam bentuk list. Melalui Ellips Tool (U), buat beberapa lingkaran kecil berwarna putih (#ffffff) sebagai bullet. Terakhir tambahkan angka di kanan bawah kotak. Gunakan font Georgia Italic ukuran 60px dengan warna pink gelap (#992536).

Langkah 14. Pada kotak terakhir, tambahkan teks dan angka 3 di pojok kanan bawah. Kemudian buat tombol donasi menggunakan Rounded Rectangle Tool. Panjang 200 px, dan lebar 48 px. Kemudian tambahkan Layer Style berupa Gradient Overlay dengan warna 1 (#c79f00) dan warna 2 (#ffcb05). Tambahkan Drop Shadow warna hitam (#000000) dengan Distance 1 px, Angle 90, dan Opacity 50%.

Langkah 15. Tambahkan icon "Coin". Anda bisa mencarinya dulu di situs lconFinder.com. Kemudian masukkan teks atas dengan font Arial Bold 18px dan teks bawah dengan font Arial regular ukuran 12px. Beri keduanya warna abu-abu gelap (#2d2d2d2). Tambahkan Layer Style berupa Drop Shadow seperti pada langkah 5. Tambahkan juga efek Color Overlay dengan warna abu-abu gelap (#2d2d2d) pada icon "Coin" agar lebih selaras.

Langkah 16. Buat 2 tombol lagi dan posisikan keduanya di bawah kotak merah velvet kedua (di tengah halaman). Sama seperti langkah 4 dan 5.

Follow Warta Iptek di Google News

Maman Soleman

Aktif menulis sejak tahun 1986 di media massa. Menjadi announcer di Radio Fantasy 93,1 FM sejak tahun 1999. Menjadi Blogger sejak tahun 2010. Sekarang aktif sebagai Content Writer untuk beberapa Blog/Website.