PENGGUNAAN SLICE. Tujuan Instruksional

Transkripsi

1 PENGGUNAAN SLICE Suatu halaman web harus didesain secara representatif namun bisa diakses secara cepat. Sebuah halaman web yang yang dibuat berupa gambar full color dengan menggunakan Adobe Photoshop, bisa mengakibatkan loading halaman web jadi lambat. Salah satu cara yang bisa dilakukan adalah dengan cara memotongmotong gambar tersebut dengan menggunakan Slice Tool. Tujuan Instruksional Mahasiswa memahami prinsip kerja slicing dan terampil melakukan slicing berdasarkan layout.

2 7.1 Slice Dengan menggunakan Adobe Photoshop, membuat halaman web menjadi lebih mudah, cepat, dan menarik, terutama untuk membuat header dan background. Permasalahannya, apabila desain cukup banyak menggunakan gambar, maka ukuran file akan menjadi besar, walaupun sudah memakai fasilitas save for web yang sudah tersedia di Photoshop. Dampak lainnya adalah kecepatan akses web menjadi terhambat karena loading yang lambat. Fasilitas slice yang terdapat di photoshop cukup efektif memecah gambar menjadi beberapa bagian, kelebihan lainnya adalah dapat mempercepat proses loading browser saat mengakses website yang bersangkutan. 7.1 Praktek Pembuatan Header Langkah-langkah pembuatan header adalah sebagai berikut : 1. Buat dokumen daru dengan spesifikasi : Width=600 Pixel, Hight=250 Pixel, Resolution=250 Gambar 7.1 Pembautan Dokumen Baru 206

3 2. Tempatkan file background dengan cara : Pilih Menu File Place kemudian file nama file Latar.jpg sebagaimana ditampilkan pada gambar berikut. Gambar 7.2 Background 3. Buat layer baru dengan menggunakan Icon Create a new layer ( ), kemudian double Click pada nama layer dan beri nama bingkai. 4. Gunakan Retangular Marqee untuk membuat persegi panjang pertama dengan cara : a. Pilih Rectangular Marqee Bentuklah seleksi berbetuk persegi panjang di bagian atas backgroud, kemudian gunakan Paint Backet untuk memberikan warna #1503ff pada bagian seleksi tersebut. Warna = 1503ff 207

4 Gambar 7.3 Penentuan Warna b. Lakukan langkah pada point (a) untuk membuat kota pada bagian bawah background dengan warna #fcff03, sehingga diperoleh gambar berikut. Gambar 7.4 Hasil Perubahan Warna 5. Gunakan Style layer Drop Shadow pada layer bingkai, lakukan cara berikut. a. Pilih layer bingkai b. Pilih menu LayerLayer StyleDrop Shadow... Gambar 7.5 Penggunaan Drop Shadow c. Akhiri dengan menekan OK. 208

5 Gambar 7.6 Hasil Akhir Layer Style Drop Shadow 6. Gunakan Filter Gallery untuk memberikan efek pada frame. Dengan langkah : a. Klik menu : Filter Filter Gallery b. Pada kotak dialog Filter Gallery ubah parameter sebagai berikut : Gambar 7.7 Penggunaan Filter Gallery c. Hasil Akhir penggunaan Filter Gallery 209

6 Gambar 7.8 Hasil Akhir Filter Gallery 7. Buat garis tiga dimensi pada bagian atas header. Dengan langkah : a. Buat filter baru b. Gunakan Rectangular Marqee untuk membuat area seleksi pada bagian atas filter, kemudian berikan warna putih c. Gunakan menu : Layer Layer Style Bevel & Emboss... d. Sehingga dihasilkan gambar berikut. Gambar 7.9 Hasil Akhir Bevel & Emboss 8. Membuat efek gradasi putih untuk menutupi bagian background bagian kiri. Dengan langkah : a. Buat layer baru di atas layer gambar background, kemudian beri warna putih dengan Paint Bucket Tool. 210

7 b. Pilih layer putih tersebut c. Klik icon Edit in Quick Mask Mode pada Toolbox sehingga berubah bentuk menjadi Edit in Standared Mode. d. Klik Gradient Tool, pada option bar pilih : Gradient Picker=Black-White, Linier Gradient. Gunakan Gradient tool pada layer putih yang ditarik dari sisi paling kiri sampai dengan 75% sebagaimana ditunjukkan pada gambar berikut. Gambar 7.10 Penggunaan Gradient Tool e. Klik icon Edit in Standared Mode hingga kembali menjadi Edit in Quick Mask Mode. Dengan demikian warna gradient hilang dan pada layer putih terbentuk garis marqee perti berikut. 211

8 Gambar 7.11 Hasil Perubahan Menjadi Edit in Quick Mask Mode f. Tekan tombol Del/Delete pada keyboard, sehingga diperolah hasil berikut. Gambar 7.12 Hasil Akhir Ditekan Tombol Del/Delete 9. Buat Teks Al-Amanah dengan Horizontal Type Tool. Pilih Style, Size, dan Color Font yang sesuai. Gunakan Layer Style Bevel & Emboss dan Drop Shadow pada teks tersebut. 10. Buat Teks Mengayomi sampai mandiri dengan Horizontal Type Tool. Pilih Style, Size, dan Color Font yang sesuai. Gunakan Layer Style Stroke. 11. Buat Teks Yayasan dengan Horizontal Type Tool. Pilih Style, Size, dan Color Font yang sesuai. 12. Buat Teks Jln. Telekomunikasi No. 17 Bandung Phone : dengan Horizontal Type Tool. Pilih Style, Size, dan 212

9 Color Font yang sesuai. Sehingga diperoleh hasil akhir seperti berikut. Gambar 7.13 Hasil Akhir 7.2 Praktek Slicing Ketika Slicing, ukuran dan jumlah potongan tergantung dari kebutuhan pembuat web dan bentuk desain halaman yang dibuat. Masilnya, slicing yang dilakukan pada header berbeda dengan slicing pada menu. Langkah slicing adalh sebagai berikut. a. Buka file header Gambar 7.14 File Header Yang Akan di Slice 213

10 b. Klik Slice Tool buatlah potongan sesuai kebutuhan, misalnya berikut : Gambar 7.15 Hasil Slicing Slicing dilakukan secara menyeluruh pada bagian gambar, jangan ada bagian yang terlewatkan. c. Untuk mengubah file header tersebut menjadi format web, maka simpan file header dengan cara : File Save for Web sehingga muncul kotak dialog berikut. 214

11 Gambar 7.16 Kotak Dialog Save for Web d. Lakukan pengaturan pada beberapa parameter yang diperlukan, lalu tekan Save, sehingga tampil kotak dialog Save Optimized As Gambar 7.17 Kotak Dialog Save Optimized As Sebelum disimpan pastikan pilihan format yang akan dipilih : 215

12 a. Pilihan HTML and Images, yaitu agar file disimpan dalam bentuk potongan gambar dan file HTML yang dapat digunakan untuk menampilkan header tersebut. b. Hasilnya berupa dati file HTML bernama Header.HTML dan satu folder bernama Images. File Header.HTML kalau di buka dengan menggunakan web browser maka ditampilkan berikut. Gambar 7.18 Hasil Eksekusi File HTML Folder images berisi file untuk setiap potongan gambar header. Gambar 7.19 Gambar Hasil Slicing 216