Professional Documents
Culture Documents
KERJA SAMA
PROGRAM STUDI TEKNIK KOMPUTER UNISMA BEKASI
DENGAN
IKATAN OSIS SE-KOTA BEKASI (IKOSI)
UNISMA
AHAD, 30 JANUARI 2011
1|Dadan Irwan
BAB I
MENGENAL PHOTOSHOP CS
Adobe® Photoshop® merupakan suatu aplikasi yang paling populer dikalangan desainer
grafis dan pengolahan citra (image processing). Sejak pertama diperkenalkan oleh Adobe
corporation pada dekade 90-an, Photoshop langsung mendapatkan hati dikalangan
profesional dan praktisi imege-editing dengan segala kecanggihan fitur dan kemampuan
yang maksimal serta kemudahan dalam penggunaannya (user friendly). Adobe® Photoshop®
yang dirilis pada tahun 2003 yang lalu oleh Adobe corp., adalah Adobe® Photoshop® CS
dengan slogan yang cukup menjanjikan The Professional Standard in Desktop Digital
Imaging merupakan pengembangan dari Adobe Photoshop generasi sebelumnya, dan pada
edisi terakhir ini sudah dilengkapi dengan fasilitas Image Ready® CS. Kelengkapan ini
dimaksudkan untuk memberikan fleksibelitas, efisiensi dan kemudahan dalam penggunaan,
sehingga anda dapat dengan mudah membuat dan menyunting image dengan kualitas tinggi
yang siap untuk dicetak, publisher, ataupun untuk ditempatkan di web, yang selama ini
merupakan kendala untuk menempatkan image berkualitas tinggi pada web, karena
berhubungan erat dengan beban loading data di sisi client pengguna. Adobe Photoshop CS,
yang kemudian hanya disebut Photoshop CS saja, merupakan program aplikasi yang canggih
yang telah membantu pekerjaan para profesional dalam bidang image processing, seperti
fotografi, pracetak, periklanan dan web designer serta berbagai disiplin pekerjaan lainnya
yang berhubungan dengan imaging.
Name
Menunjukkan
nama file yang akan
dibuat, pada awal
dapat diisi atau
abaikan
Preset
Menunjukkan pola
ukuran file yang akan
dibuat dengan
standar photoshop,
atau
dapat juga dibuat
secara kustom.
Width Menunjukkan lebar file yang akan dibuat, sebaiknya dalam satuan pixel
Hight Menunjukkan tinggi file yang akan dibuat, sebaiknya dalam satuan pixel
Resolution menunjukkan kedalaman gambar yang tampil pada layer
Color Mode Mode pewarnaan yang diberlakukan, standarnya adalah RGB
Background Defaultnya Putih, namun dapat diubah sesuai kebutuhan.
Membuka File
Untuk membuka file dokumen dengan
Photoshop, dapat dilakukan dengan
langkahlangkah
sebagai berikut :
1. Klik menu File Save As, kemudian tentukan
lokasi direktori penyimpanan data
3|Dadan Irwan
2. Masukkan nama file pada File Name , dan Format data pada Format.
Tool Box Title Bar Menu Bar Option Bar Worksheet Pallete
4|Dadan Irwan
Toolbox
Berikut ini akan dijelaskan mengenai fungsi dari masing-masing tools yang terdapat pada
toolbox Adobe Photoshop 8.0.
Menggunakan Rulers
1. Untuk menampilkan atau menyembunyikan rulers, pilih menu View > Rulers, atau
dengan shortcut Ctrl+R.
2. Untuk mengubah posisi titik pusat koordinat ruler (0,0), klik dan seret (drag) dari
pojok kiri ruler. Untuk mereset ke posisi awal, double klik di pojok kiri ruler. (gambar
2.10 a dan b)
3. Untuk mengubah satuan ukuran rulers dengan cepat, klik kanan pada rulers,
kemudian pilih satuan ukuran rulers yang diinginkan (gambar 2.10 c).
Mengubah ukuran suatu image akan serin kita lakukan, pada saat melakukan manipulasi
terhadap suatu image yang akan diolah dalam photoshop. Secara garis besar, proses
pegubahan ini dikelompokkan menjadi dua :
1. Mengubah ukuran image dari eksternal Photoshop
Proses ini adalah proses pengubahan ukuran suatu file yang diimport ke Photoshop, yang
mungkin saja mempunyai ukuran sangat besar, sehingga perlu diperkecil Untuk kebutuhan
ini dapat dilakukan dengan jalan : Klik menu Image Image Size
2. Mengubah ukuran image dalam Photoshop
Proses ini adalah proses pengubahan ukuran suatu gambar yang akan ditempat pada suatu
area kerja Photoshop, yang mungkin saja mempunyai ukuran sangat besar, sehingga perlu
diperkecil Untuk kebutuhan ini dapat dilakukan dengan jalan : Klik menu Edit Free
Trasnform
6|Dadan Irwan
5. Selanjutnya berikan sedikit efek (dibahas lebih jauh dalam Image Effect), yaitu efek Stroke
dan Drop Shadow, masih berada pada Layer 1, selanjutnya Klik menu Layer Layer Styl
Stroke, kemudian atur nilai-nilainya sebagai berikut : size =4, color = white.
6. Kemudian tambahkan sedikit Drop Shadow, Layer Layer Style Drop Shadow, kemudian
atur nilai-nilainya sebagi berikut : Opacity = 76 %, Angle =120, Distance = 10, Spread = 5, Size
= 7.
7. Hasil masnipulasi tersebut di atas, akan dapat dilihat hasilnya pada Gambar di atas.
Pola Seleksi
Image Effect
Memberikan effect pada suautu image, merupakan salah satu bentuk image processing yang akan
sering dilakukan dengan Photoshop. Beberapa menu yang dapat difungsikan untuk kebutuhan image
effect ini, antara lain :
a. Image Adjusments : digunakan untuk melakukan pebaikan terhadap kualitas suatu image
b. Layer Layer Style : Berhubungan dengan pemberian stylish pada suatu layer atau image
c. Filter filter option : diguniakan untuk melakukan filter terhadap suatu image
Penembahan teks sebagai auatu informasi atau keterangan dalam suatu perancangan interface atau
banner merupakan suatu kebutuhan mutlak.
1. Membuat Teks
Untuk membuat suatu Teks, pada Photoshop dapat digunakan komponen Type
Tool ( ), yang terdapat pada toolbox
2. Mengedit Teks
Untuk mengedit teks, maka dapat dilakukan langkag sebagai berikut :
a. Klik layer tempat penempatan teks yang akan diedit
b. Klik Type Tool
c. Klik kursor pada awal teks yang akan diedit
d. Lakukan pengeditan sesuai dengan kebutuhan
Tips :
Untuk mempermudah proses pengeditan Teks, maka sebaiknya untuk setiap Teks yang berbeda
diempatkan pada satu layer yang terpisah
7|Dadan Irwan
Text Effect
Untuk memberikan teks effect, prosesnya akan sama dengan pemberian effek pada
image.
Latihan Teks
1. Buat sebuah file baru dengan ukuran 400 x 100 pixel (width x high), dengan
setingan sebagai berikut :
5. Klik layer
teks, selanjutnya berikan effek stroke, Bevel &
emboss dan drop shadow, dengan mengklik menu
Layer Layer Style Stroke, atur pemerian
stroke dengan warna putih, dengan ukuran sesuai
kebutuhan,
kemudian
ulangi untuk
emboss dan drop shadow, sehingga diperoleh hasil
akhir sebagai berikut :
8|Dadan Irwan
BAB II
PROSES PENGEMBANGAN WEB
WITH PHOTOSHOP CS
Ketika merancang tata letak (layout) halaman web bisa dapat menggunakan beberapa
teknik, salah satunya adalah dengan cara membuat sketsa pada kertas gambar
menggunakan pensil. Atau dapat juga membuat sketsa menggunakan program pengolah
vector seperti CorelDraw, Adobe Illustrator, maupun Macromedia Freehand. Pada contoh
berikut ini, penulis memanfaatkan CorelDraw untuk membuat sketsa layout halaman web.
Sebagai bahan praktek untuk membuat website, berikut ini merupakan bentuk sketsa layout
halaman web sebagai panduan untuk membuat navigasi maupun fitur lain yang diperlukan.
Pada bagian ini kita akan membahas tentang teknik pengembangan situs sesuai
dengan sketsa yang telah dibuat sebelumnya. Proses pengembangan diawali dengan
pembuatan layout halaman menggunakan Adobe Photoshop, kemudian diolah dalam
Macromedia Dreamweaver untuk menambahkan isi (content) dan sedikit tambahan menu
pop up (pull down) menggunakan Javascript.
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.
9|Dadan Irwan
Membuat Dokumen Baru
1. Buatlah dokumen baru
dengan ukuran 800 x
600 pixel. Mode warna
RGB, resolusinya 72
pixel, mode warna RGB
8 bit dan latar belakang
white. Beri nama
dokumen baru tersebut
(misal: Situs Pribadi),
setelah selesai klik OK.
2. Untuk mempermudah
proses pembuatan
interface situs, ada
baiknya memasukkan
gambar bentuk layout ke dalam dokumen Adobe Photoshop. Anda dapat
menduplikasi (copy dan paste) ke dalam dokumen tersebut.
3. Klik Set Foreground color untuk memilih warna sebagai latar
belakang.
4. Setelah kotak dialog Color Picker
muncul, masukkan kode warna #
bfc2ee pada kotak kode
5. Tekan tombol Alt+Backspace secara
bersama-sama untuk memberi warna
pada layer Background.
6. Buatlah layer baru dengan nama “Up”
kemudian aktifkan Rectangle
Marquee tool dan buatlah seleksi
seperti Nampak pada gambar berikut.
10 | D a d a n I r w a n
7. Tekan huruf D pada
keyboard untuk
mengubah warna
default Foreground
dan Background
(Hitam dan Putih)
kemudian tekan
huruf X untuk
membalik warna
tersebut. Tekan
tombol
Alt+Backspace secara
bersama-sama untuk
memberi warna putih pada layer “Up”. Tekan Ctrl+D untuk membuang seleksi.
Membuat Interface
Bentuk interface yang bagus dapat membangkitkan “gairah” para pengguna untuk tetap
menikmati berbagai berita dan informasi yang disajikan. Keunikan bentuk interface
memiliki nilai tersendiri karena tidak semua orang memiliki kemampuan untuk
menciptakan bentuk tersebut. Berikut ini akan membahas salah bentuk interface yang
modern.
1. Pertama kali, aktifkan tool Pen.
2. Pada menu option di bagian atas, pilih
Shape Layers
3. Klik Set Foreground Color
untuk memilih warna
4. Setelah kotak dialog Color
Picker muncul, masukkan
kode
warna #b3cbf4pada kotak yang
disediakan.
5. Buatlah Shape menggunakan Pen tool
dengan bentuk seperti
nampak pada gambar dibawah
11 | D a d a n I r w a n
7. Klik pada segmen yang ingin diberi efek
lengkung. Klik dan tahan sambil menggeser salah
satu convert point ke kanan secara perlahan
agar membentuk lengkungan yang diinginkan
8. Selanjutnya
memilih
segmen yang lain. Klik dan tahan sambil menyeret
pointer ke kanan secara perlahan agar membentuk
objek yang diinginkan.
9. Jika telah selesai maka akan terbentuk sebuah
asesoris modern seperti nampak pada gambar berikut.
10. Aktifkan layer Shape 1, buatlah duplikat layer tersebut dengan cara mengklik dan
tahan sambil menggerakkan ke ikon Create New Layer.
11. Jika berhasil, pada Palet Layer akan muncul hasil duplikasi layer tersebut dengan
nama Shape 1 copy.
12. Aktifkan layer Shape 1 copy kemudian tekan Ctrl+T untuk mentransformasikan. Klik
tombol mouse kanan dan pilih Flip Horizontal. Setelah selesai klik tombol Commit
pada option bar atau dapat juga menekan
tombol Enter
13. Kurangi tingkat kepekatan (opacity)
dengan cara menggeser slider pada
menjadi 50%.
14. Aktifkan Direct
Selection tool
12 | D a d a n I r w a n
17. Langkah selanjutnya adalah membuat ilustrasi yang sama untuk memperindah
tampilan. Buatlah sebuah layer baru dengan menggunakan pen tool kemudian bentuk
sesuai dengan gambar (keinginan Anda). Kemudian modifikasi bentuknya menggunakan
Convert Point tool sehingga akan membentuk sebuah latar belakang yang modern.
Ubahlah opacity-nya menjadi 20%.
18. Berikutnya, aktifkan Pen tool dan buatlah Shape yang berbentuk seperti gambar
berikut
13 | D a d a n I r w a n
Membuat Tombol
Setelah sebelumnya membuat bentuk interface untuk halaman situs, langkah selanjutnya
adalah membuat tombol yang eksklusif.
1. Pertama kali, aktifkan Rectangle Rounded
tool
2. Buatlah sebuah tombol berbentuk kotak.
3. Berilah efek bayangan (Drop Shadow)
dengan cara mengklik
ikon Layer Style (f) di bagian bawah
Palet Layers.
4. Setelah kotak dialog Layer Style
muncul, aturlah beberapa spesifikasi
seperti nampak pada gambar
Setelah selesai klik OK.
5. Langkah selanjutnya adalah
membuat beberapa duplikasi
tombol tersebut dengan cara menggesernya ke ikon Create
New Layer
Membuat Heading
Umumnya judul utama sebuah situs pribadi maupun perusahaan berada di bagian atas.
Nama Domain dapat dijadikan sebagai judul heading dengan tujuan untuk lebih
mengingatkan kepada pengunjung tentang alamat situs. Sebagai contoh, nama domain
Anda : dadanirwan.com. Ambillah nama domain tersebut sebagai judul heading.
14 | D a d a n I r w a n
1. Untuk membuat sebuah heading,
pertama kali aktifkan Horizontal
Type tool.
2. Kemudian, klik ikon Foreground
Color untuk menentukan
warna teks. Setelah kotak
dialog Color Picker muncul,
masukkan kode warna #
576f87
3. Buatlah layer baru dengan
nama “warna-head”,
kemudian buatlah seleksi berbentuk kotak menggunakan Rectangle Marquee tool.
4. Aktifkan Gradient tool, kemudian pada option bar pilihlah tipe Linier ( ). Aturlah
warna Foreground (#576f87), dan Background (#ffffff).
5. Letakkan pointer di atas dan tarik ke bawah untuk membuat warna gradasi. Tekan
Ctrl+D untuk membuang seleksi.
Menambahkan Image/Gambar
Gambar yang ditampilkan dalam sebuah situs dapat berupa foto maupun clipart. Pada
umumnya, ilustrasi yang digunakan dalam bentuk fotografi karena memiliki beberapa
kelebihan diantaranya, warna realistis, bentuknya sesuai dengan objek sesungguhnya, lebih
alami, dan masih banyak lagi kelebihannya. Oleh karena yang akan kita buat adalah situs
pribadi, tidak ada salahnya menempatkan gambar (foto) pribadi seseorang dalam
halaman utama. Baiklah, langsung saja kita akan mencoba melakukannya.
1. Pertama kali bukalah foto yang akan dijadikan ilustrasi di halaman muka situs (lihat
gambar 4.1.6.1).
2. Pilih menu Window > Arrange > Tile Vertically untuk menampilkan dua buah
dokumen (lihat gambar 4.1.6.2).
3. Aktifkan layer yang bergambar orang, klik dan tahan sambilmenyeret layer tersebut
ke dokumen Situs Pribadi
4. Jika gambarnya terlalu besar, ubahlah ukurannya dengan cara menekan tombol
Ctrl+T kemudian seretlah salah satu titik pegangan (handle) ke tempat tujuan
15 | D a d a n I r w a n
5. Aktifkan Horizontal Type tool, dan ketikkan beberapa kata sebagai identitas situs
tersebut.
Tombol-tombol yang telah dibuat tersebut belum dapat berfungsi sebagai menu karena
tidak ada teksnya. Nah, pada bagian berikut ini kita akan mencoba menambahkan teks pada
beberapa tombol yang telah dibuat agar dapat berfungsi sebagai menu. Menu tersebut
dapat berupa mouse over maupun menu pull down. Jadi sebaiknya Anda memikirkan sejak
awal sebelum memutuskan untuk memilih bentuk yang diinginkan. Apabila Anda mengikuti
petunjuk dalam buku ini, bentuk menu yang akan dibuat adalah menu pull down.
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. Buatlah teks sebagai menu (misal: Home, Profile, Gallery, News, dan Contact). Anda
bebas memilih jenis huruf (font), penulis menggunakan jenis font Myriad Pro 10
point. Gunakan warna putih untuk teks tersebut.
Adobe Photoshop memang dapat diandalkan dalam segala hal, terbukti beberapa bidang
sangat memerlukan software yang satu ini diantaranya untuk keperluan fotografi,
percetakan, animasi, periklanan, maupun untuk membuat website. 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. Sebelum memotong gambar menggunakan Slice tool, kita memerlukan beberapa
garis bantu untuk menandai bagian mana saja yang akan dipotong. Letakkan pointer
pada ruler guide di sebelah kiri tangan Anda, klik dan tahan sambil menyeret ke
kanan.
16 | D a d a n I r w a n
2. Setelah tersusun beberapa garis bantu, langkah selanjutnya adalah memotong
gambar tersebut menggunakan Slice tool.
3. Kita harus memilih bagian mana saja yang
perlu dipisahkan, dan umumnya semua tombol
harus dipisahkan karena memiliki fungsi yang
berbeda. Sedangkan untuk bagian yang akan
digunakan sebagai latar belakang, sebaiknya
tidak perlu dipisahkan. Untuk memotong
bagian tersebut, 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.
4. Letakkan pointer di sudut kiri atas.
5. Setelah memotong gambar tersebut secara
otomatis akan muncul angka 01
17 | D a d a n I r w a n
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.
7. Apabila sudah mengiris gambar menjadi beberapa bagian maka akan nampa sepeti
gambar berikut
10. Maka akan muncul kotak dialog Save Optimized As. Tentukan folder untuk
menyimpan file kemudian beri nama file tersebut, misal index lalu pilih HTML and
18 | D a d a n I r w a n
images untuk Save as
type, Seting=Default
Setting, dan Slice=All
Slices. Setelah selesai klik
tombol Save untuk
menyimpan
11. Setelah menyimpan
dokumen tersebut, akan
nampak nama file
index.html dan folder
images yang berisi
beberapa gambar yang telah dipotong menggunakan Slice tool.
19 | D a d a n I r w a n
BAB III
PROSES EDITING
Ada sebagian web designer dalam membuat situs professional tidak memanfaatkan Adobe
Photoshop dalam merancang web, padahal dengan software tersebut kita akan lebih mudah
dan lebih praktis dibandingkan harus membuat kode html. Ketika dokumen Adobe
Photoshop tersimpan dalam bentuk web maka secara otomatis akan membuat tag html
sendiri sehingga tidak perlu bersusah payah mengetik kode html. Anda dapat membuktikan
sendiri seperti nampak pada gambar berikut
EDITING AWAL
Situs yang telah dibuat, tidak secara otomatis dapat diisi dengan komponen (baik teks
maupun grafik/gambar). Hal ini dikarenakan kode html masih dalam bentuk gambar <img
src> bukan latar belakang <background>. Apabila kode html masih dalam status objek
gambar maka Anda tidak dapat memasukkan teks maupun grafik.
20 | D a d a n I r w a n
Latihan :
Buatlah sebuah Disain Web dengan Layout seperti Gambar di bawah ini:
Sesuaikan warna menurut kebutuhan dan kreativitas anda.
21 | D a d a n I r w a n