#7 Slice

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