MODUL KULIAH

PROGRAM KULIAH KARYAWAN & PROFESIONAL

STTI ITECH

Mata kuliah Aplikasi Berbasis Web ( 3 sks )

Semester
Kelas PKKP
Dosen Jefri Rahmadian S.Kom

Pertemuan : 8 (delapan) Waktu : sabtu,....... 2011

Modul 8 (delapan)

Topik Desain Interface 2

Sub Topik Desain Tampilan dengan Adobe Photoshop

Materi  Desain Layout

 Slicing

Tujuan Mahasiswa memahami dan mengetahui cara penggunaan

software Adobe Photoshop dalam merancangan tampilan
interface sebuah aplikasi. Serta mahasiswa mampu
membuat desain interface
Pada bagian ini kita akan membahas tentang teknik pembuatan desain websitea. Proses
Desain diawali dengan pembuatan layout halaman menggunakan Adobe Photoshop (pada
tutorial ini menggunakan adobe cs3), kemudian diolah dalam Macromedia Dreamweaver
untuk menambahkan isi (content)
Dengan melihat bentuk layout tersebut di atas, akan lebih mudah proses pengembangannya
dalam Adobe Photoshop. Sebelum membuat dokumen baru, kita harus mengetahui bahwa
tidak semua resolusi monitor pengguna sama dengan yang kita miliki. Sebagai contoh,
resolusi monitor kita menggunakan ukuran 1024 x 768 pixel sedangkan pengguna (user)
hanya memiliki resolusi 800 x 600 pixel. Apabila Anda membuat ukuran dokumen 900 x
600 pixel maka menimbulkan ketidaknyamanan pengunjung karena harus sering
menggulung halaman website akibat ukuran dokumen terlalu lebar. Sebaiknya lebar tidak
melebihi 800 pixel.

Membuat dokumen baru

1. Buatlah dokumen baru dengan ukuran 800 x 600 pixel dengan memilih menu File
 New. Mode warna RGB, resolusinya 72 pixel, mode warna RGB 8 bit dan latar
belakang white. Beri nama dokumen baru tersebut (misal: web Pribadi), setelah
selesai klik OK.

2. Buat layout desain pada dokumen yang sudah disipakan dengan membagi sesuai
dengan fungsi yang diinginkan.
3. Select layer background. Kemudian diberi warna dengan cara Klik Set Foreground
color untuk memilih warna sebagai latar belakang.
4. Setelah kotak dialog Color Picker muncul,pilih warna yang ingin kita gunakan
dengan cara mennggerakan mouse pada warna yang diinginkan dan kemudian di
klik

5. Tekan tombol Alt+Backspace secara bersama-sama untuk memberi warna pada

layer Background.
6. Buat layer baru dengan memilih menu Layer NewLayer, dan akan muncul
tampilan seperti dibawah. Beri nama banner pada layer yang kita buat

7. Masih pada layer banner kita akan membuat bentuk banner dengan ukuran widht
800 dan hight 150 dengan mengganti setting style menjadi fixed size agar ukuran
yang didapat sesuai dengan ukuran yang diinginkan

8. Gunakan rectangular marque tool dan buat seleksi seperti gambar

9. Untuk memberikan warna pada layer banner yang kita seleksi tekan huruf D pada
keyboard untuk mengubah warna default Foreground dan Background (Putih dan
 merah muda) Tekan tombol Alt+Backspace secara bersama-sama untuk
memberi warna merah muda pada layer “Up”. Tekan Ctrl+D untuk membuang
seleksi.

10. Lakukan langkah 6 sampai dengan 9 untuk bagian layout dari web yang lainnya
sehingga menjadi seperti gambar dibawah.
Membuat Tombol
Setelah sebelumnya membuat bentuk interface untuk halaman situs, langkah selanjutnya
adalah membuat tombol
1. Pertama kali, aktifkan Rectangle tool.

2. Buat layer baru dengan nama Button1

3. Gambar kotak dengan rectangle tool (dengan ukuran yang proposrsional dan sesuai
menurut keinginan) seperti gambar
4. Untuk mengganti warna, klik dua kali pada laye Thumbnail seperti gambar

5. Setelah kotak dialog Color Picker muncul,pilih warna yang ingin kita gunakan
dengan cara mennggerakan mouse pada warna yang diinginkan dan kemudian di
klik

6. Untuk mengganti warna atau memberi effect pada objek yang ada juga bisa
menggunakan blending option. Dengan cara klik pada layer yang ingin diganti
warnanya dan pilih blending option dan akan muncul setingan seperti gambar
7. Untuk menambahkan button sesuai dengan jumlah button yang akan dibuat, kita
cukup menggandakan button yang ada dengan cara menduplikasi yaitu klik kanan
pada layer button yang akan diduplikasi dan pilih Duplicate Layer

8. Kemudian beri nama layer menjadi button2

9. Geser button yang sudah diduplikasi dengan menekan panah kebawah pada
keyboard (perhatikan layar yang diseleksi)
 10. Lakukan langkah 7 sampai 9 untuk button atau tombol lainnya hingga jumlah nya
sesuai dengan yang diinginkan.

Membuat Teks pada Tombol

Tombol-tombol yang telah dibuat tersebut belum dapat berfungsi sebagai menu karena
belum ada teksnya. Pada bagian berikut ini kita akan membahkan teks untuk menu yang
kita akan gunakan
1. Langkah yang pertama, aktifkan Horizontal Type tool kemudian buatlah area teks
dengan cara mengklik pada tempat tombol sambil ditahan dan menyeretnya ke
bagian lain membentuk kotak teks.

2. Tuliskan text yang akan kita gunakan sebagai nama dari button atau tombol tersebut
misalnya Home
3. Lakukan lankah pertama dan kedua untuk teks dari tombol selanjutnya
Membuat Potongan Gambar (Slicing)
Salah satu keunggulan Adobe Photoshop dalam membuat sebuah halaman web adalah
adanya teknik Slice. Dengan fasilitas tersebut, gambar akan secara otomatis terpotong
sesuai dengan garis Slice. Anda tidak perlu memotong secara manual kemudian
menyimpan potongan gambar tersebut satu per satu.

Hal yang perlu diperhatikan ketika memotong gambar adalah membaginya sesuai keperluan
saja. Artinya, jika gambar tersebut akan digunakan sebagai tombol menu maka sebaiknya
dipotong sesuai masing-masing judul menu tersebut. Misal menu Home harus terpisah dari
menu Profile. Jangan memotong gambar yang memiliki dua menu karena akan mengalami
masalah ketika mengeditnya dalam Macromedia Dreamweaver.

1. Untuk memotong bagian dari gambar, pertama kali aktifkan Slice tool.

Perlu diingat, setelah mengaktifkan Slice tool secara otomatis akan

muncul angka 1 di sudut kiri atas. Hal itu memiliki arti gambar tersebut telah siap
dipotong.
2. Letakkan pointer di sudut kiri atas Kemudian klik dan tahan sambil menyeret ke
sebelah kanan sesuai luas yang diinginkan.

3. Setelah memotong gambar tersebut secara otomatis akan muncul angka 2

4. Letakkan pointer di atas angka 2, klik dan tahan sambil menyeret ke kanan untuk
memotong gambar.
 5. Setelah memotong gambar tersebut secara otomatis akan muncul angka 3 dan 4.
Hal ini dikarenakan Adobe Photoshop secara otomatis memotong pada bagian lain
agar bentuknya tetap utuh. Anda dapat memotong gambar pada area yang telah
ditandai angka tersebut.
6. Lakukan dengan cara yang sama untuk memotong bagian lain sehingga akan
terbentuk seperti gambar.

7. Perlu diperhatikan, ketika memotong pada bagian lain usahakan irisannya tepat pada
irisan sebelumnya agar tidak muncul irisan lain yang tidak diinginkan. Jika hal itu
terjadi, hasilnya tidak akan maksimal dan tidak sesuai seperti yang kita harapkan.
Anda dapat memotong gambar yang terlalu besar menjadi beberapa bagian agar
proses koneksi lebih cepat ketika menampilkan gambar.

Menyimpan Gambar hasil Slicing

1. selanjutnya adalah menyimpan dokumen tersebut menjadi web (Save for web). Pilih
menu File > Save for Web & Devices.
2. Akan muncul kotak dialog Save for Web. Klik tombol Save.
3. Maka akan muncul kotak dialog Save Optimized As. Tentukan folder untuk
menyimpan file kemudian beri nama file tersebut, misal index lalu pilih HTML and
images untuk Save as type, Seting=Default Setting, dan Slice=All Slices. Setelah
selesai klik tombol Save untuk menyimpan.
4. Setelah menyimpan dokumen tersebut, akan nampak nama file index.html dan folder
images yang berisi beberapa gambar yang telah dipotong menggunakan Slice tool.

5. Tahap selanjutnya adalah mengeditnya menggunakan Macromedia Dreamweaver

untuk menambahkan teks dan membuat menu pull down agar tampilan situs lebih
menarik dan lebih profesional.