Cara Membuat Toko Online (Bagian 14) - Mengatur penampilan Frontstore : Slideshow

Senin, 27 Maret 2017 14:20:38 ,Oleh ,Dilihat : 1.004 x

Diasuh oleh Dr. Ir. Agus Wibowo, M.Kom, M.Si, M.M 

Bagian berikutnya dari tampilan frontstore adalah fitur slider (slideshow) berfungsi untuk menampilkan beberapa spanduk/banner produk pilihan Anda berupa gambar yang bergerak secara bolak-balik dalam sebuah slide. Dengan jangka waktu tertentu, sebuah banner akan bergeser menuju banner berikutnya. Gambar banner pada tayangan slide ini berguna untuk menonjolkan produk tertentu agar dapat dengan mudah diakses oleh pelanggan. Ketika banner diklik, pelanggan akan diarahkan menuju produk pada halaman banner ini. Untuk membuat gambar banner ini kita akan menggunakan bantuan perangkat lunak Adobe Photoshop.

File latihan dapat diunduh di sini :

Slide  1 :

https://drive.google.com/file/d/0B0nE7j_pjv62Z0R3Sm5Kemh2V0E/view?usp=sharing

Latihan slide format psd :

https://drive.google.com/file/d/0B0nE7j_pjv62djFoRFRQNzYyRnc/view?usp=sharing

Gambar 1

https://drive.google.com/file/d/0B0nE7j_pjv62TmpLYUUzb2tRbDg/view?usp=sharing

Gambar 2

https://drive.google.com/file/d/0B0nE7j_pjv62dWgzemZlNjVPbzQ/view?usp=sharing

Berikut langkah membuat gambar  slide banner :

1. Buatlah sebuah kanvas yang baru dengan menekan menu File --> New

Kemudian sesuaikan opsi berikut :

  • Name : misalnya slide1
  • Width : isikan 1140 , satuan pixel  (gambar baku dari slide OpenCart memiliki lebar 1140 px)
  • Height : isikan 380, satuan pixel  (gambar baku dari slide OpenCart memiliki tinggi 380 px)
  • Resolution : 72 satuan pixel/inch
  • Background Contents : pilih opsi Transparent

2. Tambahkan gambar yang baru dengan memilih menu File --> Place. Pilih gambar yang sudah Anda persiapkan. Klik kanan gambar yang sudah masuk ke kanvas, klik kanan, pilih Place


3. Untuk menyesuaikan lebar gambar, pilih  Move Tool, kemudian beri tanda centang pada opsi Show Transform Controls. Klik pada gambar untuk memilih gambar, arahkan ke bagian ujung kanan atas dari gambar, tekan tombol SHIFT jangan dilepaskan (agar proporsi gambar seimbang), kemudian tarik ke ujung atas sampai diperoleh lebar dan tinggi gambar yang sesuai.

4. Pilih  Move Tool, tekan tombol Apply

5. Ulang langkah 2 sampai 4 untuk gambar yang kedua

6. Simpan gambar untuk optimasi halaman web dengan cara pilih menu File --> Save for Web & Devices, pilih format PNG 24, kemudian pilih Save


7. Masuk ke dasbor pilih menu Desain --> Banners, arahkan ke Home Page Slideshow, pilih Edit


8. Pada kolom Image, klik nama gambar yang akan diganti, kemudin tekan tombol Edit