Memotong Gambar dengan Tools Slice Photoshop

Posted by ReTRo on Thursday, October 27, 2011

Bagi kita yang ingin membuat gambar agar dapat dengan cepat di-load pada sebuah website, maka jawabannya adalah dengan memotong-motong gambar tersebut menjadi beberapa bagian. Yang nanti disatukan dengan pengaturan kode HTML Table. Dan hasilnya gambar yang tadinya memeiliki ukuran yang besar, dapat dibuat kedalam berbagai macam ukuran. Cara ini memang banyak dilakukan, karena suatu halaman web yang memiliki gambar untuk ditampilkan namun masih sangat besar ukurannya, maka otomatis akan sedikit berat untuk membukanya, dan guest yang ingin mampir pun menjadi malas untuk menunggu.
Di dalam Program Aplikasi Adobe Photoshop CS3 yang saya gunakan ini ada sebuah Tool yang sangat membantu untuk memotong dan membagi suatu gambar menjadi ukuran yang lebih kecil dan rapi hasil pemotongannya. Ya benar Tools 'Slice'. Berguna memotong seperti silet, namun perlu diketahui juga bahwa dalam pemotongan gambar ini tidak asal potong (acak-acakan), harus diperhatikan bagian mana yang akan kita tambahin link nantinya, maka harus dipotong sesuai ukurannya.
Berikut ini beberapa langkah dalam pemanfaatan Slice Adobe Photoshop.
Karena pemotongan ini saya tujukan sebagai bahan pembuatan Landing Page sebuah website berbasis Joomla, maka gambar yang saya buat contoh adalah gambar landing page PA Magelang.
1. Buka Aplikasi Photoshop CS3 yang bisa temen-temen download di halaman download blog ruumit ini.
2. Bukalah sebuah gambar yang sebelumnya sudah kita persiapkan. Bisa dibuat dengan Corell Draw maupun Adobe Photoshop.

2. Kemudian pilih Tools Slice pada menu di samping.
3. Sebelum memotong alangkah baiknya jika temen-temen persiapkan rancangan pemotongan gambar dalam selembar kertas yang digambar sebuah tabel disesuaikan dengan gambar dan konsep. Jika sudah merancang dalam kertas selanjutnya potong-potonglah gambar dengan cara klik kemudian drag sesuai rancangan.

setelah selesai kita potong maka akan  muncul angka-angka dari bagian potongan gambar tersebut. Nomor tersebut nantinya akan menjadi bagian dari Nama File gambar yang dipotong. Misalnya index_01, index_02 dan seterusnya.
4. Setelah dirasa pas dan mantab, maka langkah selanjutnya kita simpan hasil potongan ini dengan cara, klik file >>Safe for web & Defice

5. Dan akan muncul kotak dialog seperti di bawah ini, kemudian temen-temen Klik Tombol Save

dan akan muncul pertanyaan dimana Folder untuk menyimpan serta Nama File, untuk nama file sebaiknya gunakan satu kata saja, kalaupun dua kata tetapi harus digandeng. Contoh gambarku , bukan gambar<spasi> ku. lalu klik save.
6. Apabila telah tersimpan maka akan temen-temen dapati 1 file index.html dan folder images
Di dalam folder images terdapat hasil potongan-potongan gambar yang kita buat tadi.

Selesai sudah, cepat dan hasilnya pun rapi. Yang lebih mantab lagi sudah ada file index.html nya. Nah, file index.html ini yang antinya akan kita gunakan sebagai Landing Page pada sebuah website.

{ 0 comments... read them below or add one }

Post a Comment