Dalam tutorial ini kita akan membuat template website dengan desain yang simple.
Yang nantinya desain website ini akan digunakan sebagai website untuk Panti Asuhan, dengan menonjolkan tombol donasi yang dimaksudkan untuk memperbanyak donatur Panti Asuhan tersebut. Hasil Akhir Klik untuk memperbesar gambar.
Langkah 1
Kita akan memulai dengan membuat canvas yang cukup besar untuk bagian tinggi. Atur width pada 1020 px dan untuk Height atur menjadi 1725 px.
Langkah 2
Selanjutnya kita buat background untuk bagian dasar halaman, header, dan slider. Buat Fill Layer baru dengan warna abu-abu solid (#e6e6e6) sebagai Background halaman website. Caranya, pilih menu Layer > New Fill Layer > Solid Color. Buat Shape lagi berwarna kuning cerah (#ffcb05) dengan tinggi 70 px untuk bagian header sebagai background navigasi. Dan yang terakhir Shape untuk background slider dengan tinggi 500 px dan beri warna pink (#c73047).
Langkah 3
Bagian header sendiri kita menggunakan font Arial untuk menu dan logo pantinya.
Untuk bagian navigasi kita menggunakan font Arial Bold dengan ukuran 12px dengan warna pink sama seperti warna background slider (#c73047). Dan untuk logo pantinya kita menggunakan LogoType dengan font Arial Regular ukuran 24px dan warna pink seperti pada bagian menu.
Langkah 4
Di samping kanan navigasi kita akan menambahkan 2 tombol.
Dengan menggunakan Rounded Rectangle Tool (U), buat shape memanjang. Untuk sekarang jangan pedulikan warnanya, tambahkan Layer Style berupa Gradient Overay pada shape yang baru saja kita buat dengan warna1 #b82031, dan warna2 #c73047.
Langkah 5
Kemudian tambahkan teks di atas tombol. Dan untuk memberi detail, pada teks tersebut kita beri Drop Shadow warna hitam (#000000) dengan Distance 1 px dan Opacity 30%.
Buat tombol lagi dengan warna gradient, untuk warna1 beri warna1 #1f1f1f dan warna2 #2e2e2e. Lakukan seperti langkah sebelumnya, dan jangan lupa menambahkan teks untuk nama tombolnya.
Langkah 6
Kemudian buat background footer dengan Rectangle Tool dan beri warna abu-abu gelap (#2d2d2d) dengan tinggi 70 px. Hasilnya sejauh ini
Langkah 7
Gunakan Rounded Rectangle Tool (U) and buat Shape dengan tinggi 340 px dan lebar 700 px. Gunakan warna abu-abu gelap (#2d2d2d) untuk shape tersebut
Langkah 8
Agar tidak terlihat polos, background slider akan kita tambahkan pita (ribbon) pada bagian atasnya.
Buat shape dengan Rectangle Tool, dengan tinggi 40 px dan lebar 716 px dan beri warna kuning (#ffcb05) seperti warna background header.
Kemudian buat shape lagi dibelakang shape yang baru saja kita buat dengan tinggi 40 px dan lebar 8 px dan beri warna (#a68500), ini nanti akan menjadi lipatan pitanya. Terakhir Transform Path kemudian Skew shape ke bawah. (lihat contoh gambar). Duplikat layer shape tersebut dan pindahkan ke bagian ribbon paling kanan, kemudian Transform Path dan Flip Horizontal.
Langkah 9
Gunakan font Arial Bold ukuran 18 px dan beri warna abu-abu gelap (#333333), tambahkan kalimat untuk judul artikel dan letakkan di atas pita yang sebelumnya dibuat.
Kemudian masukkan gambar dan sesuaikan ukurannya menjadi 240 px untuk tingginya dan 435 px untuk lebarnya. Anda bisa mencari gambar di google sebagai contoh saja, dengan keyword seperti “panti asuhan”, “panti sosial”, dll. Kemudian kita tambahkan satu paragraf di sebelah gambar dengan menggunakan font Arial Regular ukuran 12px, dan beri warna putih (#ffffff).
Langkah 10
Duplikat tombol yang tadi kita buat untuk tombol header, dan ganti warna gradasinya dengan warna1 (#c79f00) dan untuk warna2 (#ffcb05). Letakkan dan luruskan tombol di bawah paragraf yang sebelumnya sudah di buat Kemudian tuliskan Read More di atas tombol, beri warna abu-abu gelap (#2d2d2d). Tambahkan Layer Style berupa Drop Shadow warna putih (#ffffff) dengan Distance 1 px, Blend Mode Screen, dan atur Opacity menjadi 50%.
Langkah 11
Tambahkan teks di bawah slider, dalam website ini kita menambahkan langkah-langkah untuk melakukan donasi. Gunakan font BebasNeue ukuran 70px dengan warna abu-abu gelap (#2d2d2d) sebagai judul. Jika Anda belum mempunyai font BebasNeue, Anda bisa mendownloadnya di Dafont.
Langkah 12
Tambahkan 3 shape persegi panjang berwarna pink (#c73047). Buat shape tersebut dengan ukuran 250x150 px dan buat sejajar.
Dengan menggunakan warna abu-abu gelap (#2d2d2d) buat lagi shape berbentuk tipis memanjang yang menghubungkan 3 kotak yang baru saja kita buat. Gunakan warna yang sama untuk membuat garis vertikal dengan segitiga di tengah-tengahnya, dan letakkan di bagian kiri kotak berwarna pink.
Langkah 13
Sekarang saatnya menambahkan teks ke dalam kotak, gunakan font Arial Regular ukuran 12px dan beri warna putih. Kotak pertama isi dengan teks sederhana, sebagai contoh teks Lorem Ipsum. Kemudian tambahkan angka 1 di kanan bawah sebagai penanda langkah pertama, gunakan font Georgia Italic ukuran 60px dengan warna pink gelap (#992536).
Untuk kotak yang kedua akan kita isi dengan list. Kemudian dengan menggunakan Ellipse Tool (U), buat beberapa lingkaran kecil berwarna putih (#ffffff) sebagai Bullet untuk listnya. Tambahkan angka 2, sama seperti kotak yang pertama.
Langkah 14
Tambahkan teks lagi untuk kotak terakhir, dan angka 3 pada pojok kanan.
Dengan Rounded Rectangle Tool buat shape dengan tinggi 48 px dan lebar 200 px, kemudian tambahkan Gradient Overlay denga warna1 (#c79f00) dan warna2 (#ffcb05). Dan tambahkan Drop Shadow warna hitam (#000000) dengan Distance 1 px, Angle 90, dan Opacity 50%.
Langkah 15
Tambahkan icon “Coin”, Anda bisa mencarinya di IconFinder. Kemudian masukkan beberapa teks. Untuk teks yang atas kita menggunakan font Arial Bold ukuran18px dan teks yang bawah gunakan font Arial regular ukuran 12px. Beri keduanya warna abu-abu gelap (#2d2d2d2). Agar tampak lebih detail, tambahkan Drop Shadow seperti pada tombol Read More yang sebelumnya kita buat. Beri Drop Shadow juga pada icon “Coin” dan untuk menyamakan warna icon dengan teks, tambahkan Color Overlay dengan warna abu-abu gelap (#2d2d2d).
Langkah 16
Buat dua tombol lagi dan posisikan keduanya di bawah shape kotak yang kedua. Langkahnya sama saat kita membuat dua tombol pada header.
Hasilnya sejauh ini
Langkah 17
Pada langkah ini kita membuat bagian untuk artikel update, dengan elemen artikel pada umumnya yang antara lain judul, konten artikel, gambar, dan tanggal artikel tersebut dibuat. Untuk tulisan “Article Update” gunakan font BebasNeue dengan ukuran 36px dan beri warna (#2d2d2d), kemudian dengan Line Tool buat garis 1 px pada bagian kiri dan kanan teks.
Langkah 18
Yang nantinya desain website ini akan digunakan sebagai website untuk Panti Asuhan, dengan menonjolkan tombol donasi yang dimaksudkan untuk memperbanyak donatur Panti Asuhan tersebut. Hasil Akhir Klik untuk memperbesar gambar.
Langkah 1
Kita akan memulai dengan membuat canvas yang cukup besar untuk bagian tinggi. Atur width pada 1020 px dan untuk Height atur menjadi 1725 px.
Langkah 2
Selanjutnya kita buat background untuk bagian dasar halaman, header, dan slider. Buat Fill Layer baru dengan warna abu-abu solid (#e6e6e6) sebagai Background halaman website. Caranya, pilih menu Layer > New Fill Layer > Solid Color. Buat Shape lagi berwarna kuning cerah (#ffcb05) dengan tinggi 70 px untuk bagian header sebagai background navigasi. Dan yang terakhir Shape untuk background slider dengan tinggi 500 px dan beri warna pink (#c73047).
Langkah 3
Bagian header sendiri kita menggunakan font Arial untuk menu dan logo pantinya.
Untuk bagian navigasi kita menggunakan font Arial Bold dengan ukuran 12px dengan warna pink sama seperti warna background slider (#c73047). Dan untuk logo pantinya kita menggunakan LogoType dengan font Arial Regular ukuran 24px dan warna pink seperti pada bagian menu.
Langkah 4
Di samping kanan navigasi kita akan menambahkan 2 tombol.
Dengan menggunakan Rounded Rectangle Tool (U), buat shape memanjang. Untuk sekarang jangan pedulikan warnanya, tambahkan Layer Style berupa Gradient Overay pada shape yang baru saja kita buat dengan warna1 #b82031, dan warna2 #c73047.
Langkah 5
Kemudian tambahkan teks di atas tombol. Dan untuk memberi detail, pada teks tersebut kita beri Drop Shadow warna hitam (#000000) dengan Distance 1 px dan Opacity 30%.
Buat tombol lagi dengan warna gradient, untuk warna1 beri warna1 #1f1f1f dan warna2 #2e2e2e. Lakukan seperti langkah sebelumnya, dan jangan lupa menambahkan teks untuk nama tombolnya.
Langkah 6
Kemudian buat background footer dengan Rectangle Tool dan beri warna abu-abu gelap (#2d2d2d) dengan tinggi 70 px. Hasilnya sejauh ini
Langkah 7
Gunakan Rounded Rectangle Tool (U) and buat Shape dengan tinggi 340 px dan lebar 700 px. Gunakan warna abu-abu gelap (#2d2d2d) untuk shape tersebut
Langkah 8
Agar tidak terlihat polos, background slider akan kita tambahkan pita (ribbon) pada bagian atasnya.
Buat shape dengan Rectangle Tool, dengan tinggi 40 px dan lebar 716 px dan beri warna kuning (#ffcb05) seperti warna background header.
Kemudian buat shape lagi dibelakang shape yang baru saja kita buat dengan tinggi 40 px dan lebar 8 px dan beri warna (#a68500), ini nanti akan menjadi lipatan pitanya. Terakhir Transform Path kemudian Skew shape ke bawah. (lihat contoh gambar). Duplikat layer shape tersebut dan pindahkan ke bagian ribbon paling kanan, kemudian Transform Path dan Flip Horizontal.
Langkah 9
Gunakan font Arial Bold ukuran 18 px dan beri warna abu-abu gelap (#333333), tambahkan kalimat untuk judul artikel dan letakkan di atas pita yang sebelumnya dibuat.
Kemudian masukkan gambar dan sesuaikan ukurannya menjadi 240 px untuk tingginya dan 435 px untuk lebarnya. Anda bisa mencari gambar di google sebagai contoh saja, dengan keyword seperti “panti asuhan”, “panti sosial”, dll. Kemudian kita tambahkan satu paragraf di sebelah gambar dengan menggunakan font Arial Regular ukuran 12px, dan beri warna putih (#ffffff).
Langkah 10
Duplikat tombol yang tadi kita buat untuk tombol header, dan ganti warna gradasinya dengan warna1 (#c79f00) dan untuk warna2 (#ffcb05). Letakkan dan luruskan tombol di bawah paragraf yang sebelumnya sudah di buat Kemudian tuliskan Read More di atas tombol, beri warna abu-abu gelap (#2d2d2d). Tambahkan Layer Style berupa Drop Shadow warna putih (#ffffff) dengan Distance 1 px, Blend Mode Screen, dan atur Opacity menjadi 50%.
Langkah 11
Tambahkan teks di bawah slider, dalam website ini kita menambahkan langkah-langkah untuk melakukan donasi. Gunakan font BebasNeue ukuran 70px dengan warna abu-abu gelap (#2d2d2d) sebagai judul. Jika Anda belum mempunyai font BebasNeue, Anda bisa mendownloadnya di Dafont.
Langkah 12
Tambahkan 3 shape persegi panjang berwarna pink (#c73047). Buat shape tersebut dengan ukuran 250x150 px dan buat sejajar.
Dengan menggunakan warna abu-abu gelap (#2d2d2d) buat lagi shape berbentuk tipis memanjang yang menghubungkan 3 kotak yang baru saja kita buat. Gunakan warna yang sama untuk membuat garis vertikal dengan segitiga di tengah-tengahnya, dan letakkan di bagian kiri kotak berwarna pink.
Langkah 13
Sekarang saatnya menambahkan teks ke dalam kotak, gunakan font Arial Regular ukuran 12px dan beri warna putih. Kotak pertama isi dengan teks sederhana, sebagai contoh teks Lorem Ipsum. Kemudian tambahkan angka 1 di kanan bawah sebagai penanda langkah pertama, gunakan font Georgia Italic ukuran 60px dengan warna pink gelap (#992536).
Untuk kotak yang kedua akan kita isi dengan list. Kemudian dengan menggunakan Ellipse Tool (U), buat beberapa lingkaran kecil berwarna putih (#ffffff) sebagai Bullet untuk listnya. Tambahkan angka 2, sama seperti kotak yang pertama.
Langkah 14
Tambahkan teks lagi untuk kotak terakhir, dan angka 3 pada pojok kanan.
Dengan Rounded Rectangle Tool buat shape dengan tinggi 48 px dan lebar 200 px, kemudian tambahkan Gradient Overlay denga warna1 (#c79f00) dan warna2 (#ffcb05). Dan tambahkan Drop Shadow warna hitam (#000000) dengan Distance 1 px, Angle 90, dan Opacity 50%.
Langkah 15
Tambahkan icon “Coin”, Anda bisa mencarinya di IconFinder. Kemudian masukkan beberapa teks. Untuk teks yang atas kita menggunakan font Arial Bold ukuran18px dan teks yang bawah gunakan font Arial regular ukuran 12px. Beri keduanya warna abu-abu gelap (#2d2d2d2). Agar tampak lebih detail, tambahkan Drop Shadow seperti pada tombol Read More yang sebelumnya kita buat. Beri Drop Shadow juga pada icon “Coin” dan untuk menyamakan warna icon dengan teks, tambahkan Color Overlay dengan warna abu-abu gelap (#2d2d2d).
Langkah 16
Buat dua tombol lagi dan posisikan keduanya di bawah shape kotak yang kedua. Langkahnya sama saat kita membuat dua tombol pada header.
Hasilnya sejauh ini
Langkah 17
Pada langkah ini kita membuat bagian untuk artikel update, dengan elemen artikel pada umumnya yang antara lain judul, konten artikel, gambar, dan tanggal artikel tersebut dibuat. Untuk tulisan “Article Update” gunakan font BebasNeue dengan ukuran 36px dan beri warna (#2d2d2d), kemudian dengan Line Tool buat garis 1 px pada bagian kiri dan kanan teks.
Langkah 18
Kemudian untuk judul artikel, gunakan font Arial Bold dengan ukuran 20px dan beri warna pink (#c73047). Dan untuk konten artikel kita gunakan font Arial Regular ukuran 12px dan dengan warna abu-abu gelap (#333333).
Langkah 19
Tambahkan gambar untuk ilustrasi dari artikel yang kita buat dan letakkan sejajar dengan judul artikel. Dan terakhir kita tambahkan “Date Post” untuk menunjukkan waktu artikel tersebut di publish. Untuk tanggal, gunakan font Georgia Italic dengan ukuran 55px dan beri warna abu-abu gelap (#333333). Untuk bulan dan tahun gunakan font Georgia Regular ukuran 20px dengan warna abu-abu yang lebih terang (#666666).
Langkah 20
Tambahkan 3 lingkaran kecil di bawah artikel sebagai navigasi untuk artikel update, gunakan Ellipse Tool dan beri warna abu-abu gelap (#2d2d2d) Kemudian buat tombol dengan Rounded Rectangle Tool (U) seperti pada langkah sebelumnya. Tambahkan Gradient Overlay dengan warna1 (#d9d9d9) dan untuk warna2 (#e5e5e5), kemudian tambahkan Stroke dengan Size 1 px dan beri warna abu-abu (#bfbfbf) Terakhir tambahkan teks dengan font Arial Bold ukuran 12px dan beri warna abu-abu gelap (#2d2d2d)
Langkah 19
Tambahkan gambar untuk ilustrasi dari artikel yang kita buat dan letakkan sejajar dengan judul artikel. Dan terakhir kita tambahkan “Date Post” untuk menunjukkan waktu artikel tersebut di publish. Untuk tanggal, gunakan font Georgia Italic dengan ukuran 55px dan beri warna abu-abu gelap (#333333). Untuk bulan dan tahun gunakan font Georgia Regular ukuran 20px dengan warna abu-abu yang lebih terang (#666666).
Langkah 20
Tambahkan 3 lingkaran kecil di bawah artikel sebagai navigasi untuk artikel update, gunakan Ellipse Tool dan beri warna abu-abu gelap (#2d2d2d) Kemudian buat tombol dengan Rounded Rectangle Tool (U) seperti pada langkah sebelumnya. Tambahkan Gradient Overlay dengan warna1 (#d9d9d9) dan untuk warna2 (#e5e5e5), kemudian tambahkan Stroke dengan Size 1 px dan beri warna abu-abu (#bfbfbf) Terakhir tambahkan teks dengan font Arial Bold ukuran 12px dan beri warna abu-abu gelap (#2d2d2d)
Langkah 21
Selanjutnya kita buat bagian lain yaitu Event&Contact, nantinya akan berisi informasi tentang Event Update, Contact, dan beberapa akun Social Network. Langkahnya sama seperti sebelumnya, buat teks “Event&Contact” sama seperti saat membuat “Article Update”.
Langkah 22
Gunakan Ellpise Tool (U) untuk membuat lingkaran berwana pink (#c73047). Untuk nama bulan kita akan menggunakan font BebasNeue ukuran 30px dan untuk nama bulan gunakan font Arial Bold ukuran 10px. Beri keduanya warna putih (#ffffff) dan tambahkan Drop Shadow wana hitam (#000000) dengan opacity 30%, Angle 90%, dan Distance 1px.
Langkah 23
Duplikat dua kali lingkaran dan tanggal yang sebelumnya kita buat, kemudian tambahkan teks untuk tempat Event beserta alamatnya. Untuk tempat event gunakan font Arial Bold ukuran 14px dan untuk alamat gunakan font Arial Regular ukuran 12px, berikan kedua warna abu-abu gelap (#272727) dan tambahkan lagi garis 1px di bawah tiap teks alamat. Terakhir tambahkan tombol abu-abu sama seperti pada bagian“Article Update”.
Langkah 24
Selanjutnya kita buat bagian lain yaitu Event&Contact, nantinya akan berisi informasi tentang Event Update, Contact, dan beberapa akun Social Network. Langkahnya sama seperti sebelumnya, buat teks “Event&Contact” sama seperti saat membuat “Article Update”.
Langkah 22
Gunakan Ellpise Tool (U) untuk membuat lingkaran berwana pink (#c73047). Untuk nama bulan kita akan menggunakan font BebasNeue ukuran 30px dan untuk nama bulan gunakan font Arial Bold ukuran 10px. Beri keduanya warna putih (#ffffff) dan tambahkan Drop Shadow wana hitam (#000000) dengan opacity 30%, Angle 90%, dan Distance 1px.
Langkah 23
Duplikat dua kali lingkaran dan tanggal yang sebelumnya kita buat, kemudian tambahkan teks untuk tempat Event beserta alamatnya. Untuk tempat event gunakan font Arial Bold ukuran 14px dan untuk alamat gunakan font Arial Regular ukuran 12px, berikan kedua warna abu-abu gelap (#272727) dan tambahkan lagi garis 1px di bawah tiap teks alamat. Terakhir tambahkan tombol abu-abu sama seperti pada bagian“Article Update”.
Langkah 24
Cari Icon “Pin” dan “Telephone”, Anda bisa mendapatkannya di IconFinder.
Tambahkan Color Overlay pada kedua Icon tersebut dengan warna (#c6c6c6). Kemudian tambahkan beberapa teks untuk informasi contact, untuk teks yang berwarna pink gunakan font Arial Bold ukuran 14px dan 12px untuk yang bawahnya.
Langkah 25
Tambahkan screen shot google maps, kemudian tambahkan stroke dan outer glow.
Langkah 26
Langkah selanjutnya adalah menambahkan Icon Social Network. Dengan Ellipse Tool (U) buat 6 lingkaran dengan ukuran yang sama. Lima dari enam lingkaran tersebut beri warna abu-abu. Untuk yang satu lingkaran tersisa berikan warna pink, ini akan menunjukkan tanda “Hover” pada Icon tersebut.
Langkah 27
Untuk langkah terakhir tambahkan menu footer pada bagian kiri dan informasi Copyright pada bagian kanan. Untuk menu footer gunakan font Arial Bold ukuran 12px dan font Georgia Italic ukuran 12px untuk bagian infomarsi Copyright. Berikan warna putih (#ffffff).
Langkah 25
Tambahkan screen shot google maps, kemudian tambahkan stroke dan outer glow.
Langkah 26
Langkah selanjutnya adalah menambahkan Icon Social Network. Dengan Ellipse Tool (U) buat 6 lingkaran dengan ukuran yang sama. Lima dari enam lingkaran tersebut beri warna abu-abu. Untuk yang satu lingkaran tersisa berikan warna pink, ini akan menunjukkan tanda “Hover” pada Icon tersebut.
Langkah 27
Untuk langkah terakhir tambahkan menu footer pada bagian kiri dan informasi Copyright pada bagian kanan. Untuk menu footer gunakan font Arial Bold ukuran 12px dan font Georgia Italic ukuran 12px untuk bagian infomarsi Copyright. Berikan warna putih (#ffffff).
Comments
Post a Comment