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.
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
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
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 Layer Layer Style Drop Shadow...
Gambar 7.5 Penggunaan Drop Shadow
c. Akhiri dengan menekan OK.
208
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
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
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 menjadi Edit in Quick Mask Mode
hingga kembali . Dengan demikian
warna gradient hilang dan pada layer putih terbentuk garis marqee perti berikut.
211
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 : 022 87523555” dengan Horizontal Type Tool. Pilih Style, Size, dan 212
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
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
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
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
