pengenalan vi pada linux

Menggunakan VI Editor Linux
By Adam Rachmad

Karena ane biasanya menggunakan editor nano di linux, semenjak bergaul sm Trustix jdi ane migrasi juga ke editor VI ini. Pertamanya? Bingung sangat! Berikut cara menggunakan vi editor linux.

Mode

Vi memiliki dua mode yaitu mode command, dan mode insertion. Ketika kita membuka vi, maka pertama kali akan masuk ke mode command, dimana kursor dapat kita gerak-gerakkan atau bahkan melakukan penghapusan terhadap teks. Mode insertion dimulai ketika memasuki salah satu perintah insertion atau perintah change, yaitu perintah untuk mengedit teks dengan menuliskan huruf demi huruf. Dengan menekan tombol Escape (ESC), maka kita dapat kembali lagi ke mode command. Pada mode command, kebanyakan eksekusi terhadap perintah langsung dilakukan seketika itu juga, kecuali pada perintah yang menggunakan titik dua (colon) harus diakhiri dengan penekanan tombol enter.

Berikut ini perintah-perintah vi yang umum digunakan, dikelompokkan berdasarkan fungsonalitasnya.

Keluar dari Vi:

Untuk keluar dari VI ada berbagai macam cara yang berbeda-beda sesuai dengan fungsi dan kebutuhannya, yaitu:
:wq Keluar dan simpan perubahan yang telah dilakukan, ini ekivalen dengan perintah :wq
:q Keluar, selama tidak melakukan perubahan terhadap file
ZZ Keluar, dan menyimpan perubahan ketika terjadi perubahan
:q! Keluar dengan mengabaikan semua perubahan yang telah diakukan terhadap file

Menggerakkan Kursor:

h Menggerakkan kursor ke kiri
j Menggerakkan kursor ke bawah
k Menggerakkan kursor ke atas
l Menggerakkan kursor ke kanan
w Menggerakkan kursor ke kata berikutnya
W Menggerakkan kursor ke pembatas kosong kata berikutnya
b Menggerakkan kursor ke ke awal kata
B Menggerakkan kursor ke ke awal pembatas kosong kata
e Menggerakkan kursor ke akhir kata
E Menggerakkan kursor ke akhir pembatas kosong kata
( Menggerakkan kursor ke kalimat sebelumnya
) Menggerakkan kursor ke kalimat berikutnya
{ Menggerakkan kursor keke paragraf sebelumnya
} Menggerakkan kursor ke paragraf berikutnya
0 Menggerakkan kursor ke awal baris
$ Menggerakkan kursor ke akhir baris
1G Menggerakkan kursor ke baris pertama dari isi file
G Menggerakkan kursor ke baris terakhir dari isi file
nG Menggerakkan kursor ke baris ke-n dari isi file
:n Menggerakkan kursor ke baris ke-n dari isi file
fc Menggerakkan kursor ke huruf c terdekat selanjutnya (huruf c dapat diganti oleh huruf apa saja yang pengin dicari)
Fc Menggerakkan kursor ke huruf c terdekat berikutnya (huruf c dapat diganti oleh huruf apa saja yang pengin dicari)
H Menggerakkan kursor ke atas tampilan layar
M Menggerakkan kursor ke tengah tampilan layar
L Menggerakkan kursor ke bawah tampilan layar

Menghapus Teks:

x Hapus sebuah karakter pada posisi kursor
X Hapus sebuah karakter di sebelah kiri kursor
D Hapus seluruh karakter dari posisi kursor sampai akhir baris
dd Hapus satu baris pada kursor
:d Hapus satu baris pada kursor

Yanking Teks:

Seperti pada penghapusan, hampir semua perintah yank dilakukan dengan mengetik y diikuti perintah gerakan kursor. Misal,y$ yanks ke akhir baris. Dua perintah yank yang lain adalah:

yy Yank baris saat ini
:y Yank baris saat ini

Pengubahan Teks:

Perintah pengubahan teks ini adalah perintah untuk melakukan penghapusan teks dan masuk ke mode insertion. Dilakukan dengan mengetikkan c diikuti sebuah gerakan kursor. Misal cw akan menghaus sebuah kata dan memasuki mode insertion. Perintah lainya adalah:

C Hapus teks dari posisi kursor sekarang sampai akhir baris, dan kemudian masuk mode instertion
cc Hapus satu baris teks di mana posisi kursor berada, dan masuk ke mode insertion

Penanda

Penanda dipake untuk menandai posisi kursor saat ini dengan nama berupa sebuah huruf (kecil). Penanda juga digunakan untuk membatasi jangkauan.

mc Mengeset penanda c pada posisi kursor sekarang.
`c Menuju ke posisi penanda
‘c Menuju ke awal baris posisi penanda

Pencarian String:

/string Melakukan pencarian string ke depan
?string Melakukan pencarian string mundur
n Menuju hasil pencarian string selanjutnya
N Menuju hasil pencarian string sebelumnya

Replace

Melakukan pencarian dan hasil pencariannya diganti dengan string tertentu. Menggunakan perintah :s. Ini umumnya digunakan dalam kombinasi dengan range atau perintah :g.

:s/pattern/string/flags Lakukan pencarian terhadap pola pattern dan ganti dengan string sesuai dengan flagsnya
g Flag – ganti semua pola yang ditemukan
c Flag – meminta konfirmasi bila terjadi penggantian
& Ulangi perintah :s terakhir

Count:

Hampir semua perintah dapat didahului dengan sebuah angka, yang menunjukkan berapa kali perintah tersebut dieksekusi. Misal 6dw akan menghapus 6 kata; dan 2fe akan menggerakkan kursor maju sampai ditemukan 2 kali huruf e.

Range/Jangkauan:

Range digunakan di depan perintah yang menggunakan colon (titik dua). Misal :3,7d akan menghapus baris 3-7. Range umumnya dikombinasikan dengan perintah :s untuk melakukan penggantian pada beberapa baris. Contoh lagi:.,$s/pattern/string/g untuk melakukan penggantian dari baris saat ini sampai akhir baris.

:n,m Range – Baris n sampai m
:. Range – Baris sekarang
:$ Range – Baris terakhir
:’c Range – Penanda c
:% Range – Semua barisdalam file
:g/pattern/ Range – Semua baris yang sesuai dengan pattern

File:

:w file Menulis ke file
:r file Membaca/membuka file
:n Menuju file berikutnya
:p Menuju file sebelumnya
:e Mengedit file
!!program Ganti baris dengan output dari program

Lainnya:

~ Toggle untuk huruf besar dan huruf kecil
J Menggabungkan baris
. Mengulangi perintah perubahan-teks terakhir
u Membatalkan perubahan terakhir (Undo)
U Membatalkan semua perubahan

Rasanya beberapa perintah di atas sudah cukup mumpuni untuk menggunakan Vi secara efekstif dan efisien. Sering-sering menggunakan dan membiasakan diri dengan perintah-perintah diatas, learning by doing, niscaya anda akan menjadi pendekar VI.

pengantar linux

GNU/Linux
Sebuah Pengantar
GNU
GNU adalah singkatan dari GNU's Not Unix. GNU
adalah nama dari sebuah proyek pembuatan perangkat
lunak. Proyek GNU dimulai tahun 1983. Semangat
yang melatarbelakanginya adalah keinginan agar
gotong-royong dalam komunitas pengguna komputer
dibangkitkan kembali, setelah timbul usaha untuk
menjadikan perangkat lunak sebagai milik perusahaan.
Perangkat lunak yang dibuat dalam proyek GNU
adalah perangkat lunak yang kompatibel dengan
perangkat lunak yang ada dalam sistem operasi Unix.
Perbedaannya adalah dalam filosofi. GNU
menggunakan filosofi kemerdekaan dan gotongroyong.
GNU diinisisasi oleh Richard M Stallman pada tahun
1983. Saat itu Stallman adalah karyawan di
laboratorium AI MIT, dan berhenti bekerja dari lab
tersebut ketika dia memulai proyek GNU.
Sangat banyak aplikasi yang dikembangkan dalam
proyek GNU. Beberapa perangkat lunak yang berada
dalam proyek GNU saat ini adalah : gcc (Gnu Compiler
Collection) compiler untuk bahasa pemrograman C,
C++, Fortran, GnuOctave aplikasi untuk komputasi
numerik, bc aplikasi kalkulator, gnuchess aplikasi
yang berfungsi sebagai mesin permainan catur, emacs
untuk editor teks yang kaya fitur, fdisk aplikasi untuk
membuat partisi pada harddisk, gcompris merupakan
aplikasi pendidikan untuk anak-anak, gzip aplikasi
kompresi data, lilypond aplikasi untuk membuat
notasi musik, units perangkat lunak untuk konversi
berbagai macam satuan.
1 GNU/Linux : Sebuah Pengantar
Gambar kepala
"kambing" ini adalah
logo yang digunakan
untuk GNU
Linux
Linux adalah nama dari sebuah program yang
berfungsi sebagai inti sebuah sistem operasi (kernel).
Linux dibuat oleh Linus Torvalds. Pembuatan kernel
Linux dimulai pada tahun 1991. Dalam
pengembangannya, Linux mengikuti filosofi yang
digagas oleh Richard M Stallman ketika mendirikan
proyek GNU. Artinya Linux merupakan perangkat
lunak bebas. Saat ini Linux dikembangkan secara
gotong-royong oleh banyak kontributor dari seluruh
dunia.
Linux merupakan sistem operasi multitasking dan
multiuser. Dibuat menggunakan bahasa C, sampai
tahun 2010 Linux sudah memasuki pengembangan
selama 19 tahun. Walaupun awalnya tidak
direncanakan untuk bisa digunakan pada berbagai
arsitektur perangkat keras, nyatanya saat ini Linux
adalah sistem operasi yang paling portable, yang bisa
digunakan di banyak perangkat keras.
Distro
Sebuah distro Linux merupakan kompilasi dari
berbagai perangkat lunak dengan kernel Linux sebagai
sistem operasinya. Umumnya perangkat lunak yang
disertakan adalah perangkat lunak bebas. Dengan
memasang sebuah distro Linux pada perangkat keras
komputer, maka komputer tersebut sudah dapat
digunakan untuk berbagai fungsi.
Distro Linux sangat banyak. Ada distro yang dibuat
dengan tujuan penggunaan tertentu yang spesifik, dan
ada yang dibuat untuk penggunaan komputer secara
umum. Distro yang dibuat untuk tujuan umum seperti
penggunaan komputer untuk mengetik dokumen teks,
membuat presentasi, memainkan file musik dan video,
menggunakan internet. Sedangkan fungsi khusus
seperti untuk server, router, penyelamatan data,
minimalis, sains, dan lain-lain. Beberapa distro yang
cukup populer saat ini adalah Ubuntu, Debian,
OpenSuse, RedHat, Fedora, Mandriva, Blankon.
2 GNU/Linux : Sebuah Pengantar
Penguin adalah logo
yang digunakan untuk
kernel Linux. Penguin
ini diberi nama Tux.
Logo ini didesain oleh
Larry Ewing.
Ubuntu adalah distro
yang sangat terkenal,
yang merupakan
turunan dari distro
Debian yang
merupakan distro
dengan aplikasi
terbanyak. Slackware
adalah distro paling
tua yang masih aktif
dikembangkan sampai
saat ini.
Banyaknya distro yang ada menimbulkan sebuah
kesulitan bagi yang baru mengenal Linux. Distro apa
yang menjadi pilihan untuk digunakan? Memilih distro
bisa jadi halangan bagi pengguna awal, namun
mungkin saja menjadi sebuah aktifitas yang menarik,
karena ada berbagai pilihan. Menggunakan distro yang
juga digunakan teman mungkin salah satu rumus yang
biasa disarankan pada pengguna awal.
Untuk mendapatkan sebuah distro Linux ada banyak
cara. Menyalin CD/DVD dari teman, download dari
internet, CD bonus dalam majalah/buku, membeli dari
toko, adalah beberapa pilihan untuk mendapatkan
distro Linux.
Aplikasi yang Berjalan di Sistem Operasi Linux
Banyak aplikasi yang berjalan di sistem operasi Linux.
Untuk bekerja secara umum seperti mengetik dokumen
teks, menghitung angka dalam sebuah spreadsheet
dan membuat presentasi dapat dilakukan
menggunakan program OpenOffice, atau KOffice.
Memainkan file lagu dan video dapat menggunakan
Amarok, Xine, XMMS. Mengolah gambar seperti foto
digital bisa digunakan program GIMP. Membuat grafik
vektor dengan aplikasi Inkscape. Untuk mengakses
internet, seperti mengunjungi situs bisa menggunakan
Firefox, menerima, mengirim, dan membaca email
dengan program Thunderbird. Chatting di Yahoo!
menggunakan Pidgin. Aplikasi untuk bidang sains,
seperti matematika bisa menggunakan GnuOctave, R
untuk statistik, gnuplot untuk membuat
visualisasi/grafik data, GRASS untuk sistem informasi
geografi.
Untuk menemukan berbagai aplikasi lainnya yang bisa
digunakan pada sistem operasi Linux bisa melihat situs
http://www.linux.org
http://directory.fsf.org
http://freshmeat.net
3 GNU/Linux : Sebuah Pengantar
Linux, Apache, MySQL,
PHP, yang biasa
disingkat dengan
LAMP, merupakan
kombinasi yang sangat
populer dalam dunia
web
Kelebihan dan Kekurangan
Sebuah sistem operasi, dalam hal ini Linux yang
dilengkapi dengan sejumlah aplikasi, bukanlah
sempurna dalam segala hal. Ada bagian positif yang
dimilikinya, dan juga ada kekurangan yang
menyertainya. Kelebihan dan kekurangan ini bisa saja
berbeda antara satu pemakai dengan lainnya.
Linux merupakan sistem operasi yang stabil. Secara
umum dapat dikatakan demikian. Bukti sederhana
untuk hal ini adalah banyaknya server yang
menggunakan Linux. Sebuah server tentu saja
diharapkan mampu bekerja dengan baik dengan beban
besar dan terus menerus. Apabila sistem operasi yang
dipasang pada server tidak stabil akan menyebabkan
kegagala layanan yang diakses oleh banyak pengguna
pada server ini.
Harga yang diperlukan untuk mendapatkan sistem
operasi Linux bisa sangat rendah. Jika kita
mendapatkan sebuah distro Linux dengan cara
menyalin dari CD/DVD yang dimiliki seorang teman,
bisa dianggap bahwa biaya yang diperlukan hanyalah
harga pembelian CD/DVD kosong dan ongkos untuk
menyalinnya.
Sistem operasi Linux dapat dibagi kepada saudara,
tetangga, teman, dengan bebas. Prinsip kemerdekaan
yang dianut dalam lingkungan sistem operasi Linux
memberi kemudahan pengguna untuk membaginya
kepada siapapun yang memerlukan.
Ada yang mengatakan bahwa penggunaan Linux sulit.
Ini adalah salah satu kekurangan Linux. Memang
benar untuk keperluan tertentu, penggunaan sistem
operasi Linux terasa cukup kompleks. Tetapi ada juga
sebaliknya, seperti sejumlah distro umum yang saat ini
sudah demikian baik dalam tampilan dan mudah dalam
penggunaan.
Beberapa perangkat keras tidak didukung oleh Linux.
Ada sejumlah perangkat keras yang tidak bisa berjalan
4 GNU/Linux : Sebuah Pengantar
Command line, atau
shell, pada sistem
operasi Linux, yang
hanya menampilkan
layar dengan bentuk
teks hitam putih,
dianggap sangat tidak
user friendly oleh
kebanyakan pengguna.
Namun ada sebagian
pengguna sangat
menyukai mode ini,
karena ada hal-hal
yang bisa dilakukan
dengan efisien melalui
cara seperti ini.
dengan baik, atau tidak bisa digunakan sama sekali di
sistem operasi Linux. Biasanya terkait dengan tidak
tersedianya driver untuk perangkat keras tersebut.
Siapa Pengguna Linux
Jika merujuk ke situs counter.li.org, pengguna linux di
dunia yang mencatatkan diri ke sistus ini ada sekitar
120 ribu orang. Data ini tidak menunjukkan jumlah
sesungguhnya pengguna Linux. Tidak ada data yang
menunjukkan jumlah sesungguhnya tentang siapa dan
berapa banyak pengguna Linux.
Contoh sukses penggunaan Linux yang cukup jelas
adalah dalam bidang perfilman. Linux menjadi sistem
operasi pilihan studio besar dalam menghasilkan film
dengan efek dan animasi yang sangat spektakuler.
Dreamworks, ILM, Pixar, Digital Domain,
menggunakan Linux untuk rendering dan pembuatan
model untuk film yang memerlukan sentuhan komputer
dalam produksinya. Sukser yang luar biasa diantaranya
dalam film Lord of The Rings, Titanic, Star Wars,
Superman, Shrek, Man In Black, The Matrix.
Dunia penelitian, terutama yang menggunakan
komputasi dengan performa tinggi, menggunakan
Linux sebagai sistem operasi untuk supercomputer
yang mereka miliki. Merujuk situs top500 yang
memiliki data cukup lengkap tentang 500
supercomputer tercepat di dunia, data pada tahun
2009 menunjukkan Linux mendominasi lebih dari 80%
penggunaan sistem operasi untuk supercomputer.
Sejak Linux mulai dikenal dalam komunitas pengguna
komputer, secara umum hampir semua bidang sudah
menggunakan sistem operasi ini sebagai perangkat
lunak dalam komputer mereka.
Linux Masuk Indonesia
Bagaimana awalnya Linux masuk ke Indonesia?
Informasi yang pasti dan akurat tentang hal ini tidak
mudah ditemukan. Kutipan berikut diambil dari tulisan
5 GNU/Linux : Sebuah Pengantar
Saat ini hampir semua
film yang diproduksi
oleh studio besar di
Holywood, yang
melibatkan efek
spesial dan animasi,
menggunakan sistem
operasi Linux
oleh Rahmat M Samik Ibrahim
Belum jelas, siapa yang pertama kali membawa Linux ke Indonesia.
Namun, yang pertama kali mengumumkan secara publik (melalui milis
pau-mikro) ialah Paulus Suryono Adisoemarta dari Texas, USA, yang
secara akrab dipanggil Bung Yono. Ketika 1992, bung Yono berkunjung ke
Indonesia membawa distro SoftLanding System (SLS) dalam beberapa
keping disket. Kernel Linux pada distro tersebut masih revisi 0.9X (alpha
testing), dengan kemampuan dukungan jaringan yang sangat terbatas.
Pada awal tahun 1990-an, kisaran harga sebuah ethernet board ialah
USD 500; padahal dengan kinerja yang jauh dibawah board yang
sekarang biasa berharga USD 5.-. Dengan harga semahal itu, dapat
dimaklumi, jika masih jarang ada pengembang LINUX yang
berkesempatan untuk mengembangkan driver ethernet.
Perioda 1992-1994 merupakan masa yang vakum. Secara sporadis,
terdengar ada yang mendiskusikan "Linux", namun terbatas pada uji
coba. Kernel Linux 1.0 keluar pada tahun 1994. Salah satu distro yang
masuk ke Indonesia pada tahun tersebut ialah Slackware (kernel 1.0.8).
Distro tersebut cukup lengkap dan stabil sehingga merangsang
tumbuhnya sebuah komunitas GNU/ Linux di lingkungan Universitas
Indonesia. Pada umumnya, PC menggunakan prosesor 386 dan 486,
dengan memori antara 4-8 Mbytes, dan hardisk 40 - 100 Mbyte. Biasanya
hardisk tersebut dibuat "dual boot", yaitu dapat dalam mode DOS atau
pun Linux.
Slackware menjadi populer dikalangan para mahasiswa UI, karena pada
waktu itu merupakan satu-satunya distribusi yang ada :-). Banyak hal-hal
baru yang "dioprek"/ "setup". Umpama: yang pertama kali men-setup
X11R4 Linux di UI ialah Ivan S. Chandra (1994).
Tahun 1994 merupakan tahun penuh berkah. Tiga penyelenggara
Internet sekali gus mulai beroperasi: IPTEKnet, INDOnet, dan RADnet.
Pada tahun berikutnya (1995), telah tercatat beberapa institusi/
organisasi mulai mengoperasikan GNU/Linux sebagai "production
system", seperti BPPT (mimo.bppt.go.id), IndoInternet
(kakitiga.indo.net.id), Sustainable Development Network (www.sdn.or.id
dan sangam.sdn.or.id), dan Universitas Indonesia (haur.cs.ui.ac.id).
Umpamanya, Sustainable Development Network Indonesia (sekarang
diubah menjadi Sustainable Debian Network) menggunakan distribusi
Slackware (kernel 1.0.9) pada mesin 486 33Mhz, 16 Mbyte RAM, 1 Gbyte
disk. Namun sekarang, situs tersebut numpang webhost di IndoInternet.
Kehadiran internet di Indonesia merangsang tumbuhnya sebuah industri
baru, yang dimotori oleh para enterpreneur muda. Mengingat GNU/
Linux merupakan salah satu pendukung dari Industri baru tersebut, tidak
dapat disangkal bahwa ini merupakan faktor yang cukup menentukan
perkembangan GNU/Linux di Indonesia. Selama perioda 1995-1997,
GNU/Linux secara perlahan mulai menyebar ke seluruh pelosok
Indonesia. Bahkan krismon 1997 pun tidak dapat menghentikan
penyebaran ini.
6 GNU/Linux : Sebuah Pengantar
InfoLinux adalah salah
satu majalah yang
terbit di Indonesia
yang khusus
menyajkan informasi
mengenai sistem
operasi Linux.
KPLI
KPLI adalah singkatan dari Kelompok Pengguna Linux
Indonesia. Beberapa pengguna Linux di Indonesia yang
berdekatan secara geografis, seperti dalam satu kota,
membentuk kelompok untuk berdiskusi dan melakukan
berbagai kegiatan yang berkaitan dengan sistem
operasi Linux. Kelompok ini dibentuk atas dasar
semangat gotong-royong. Setiap tempat bisa saja
mendirikan KPLI untuk kemudian mengadakan
kegiatan yang membangun dalam hal penggunaan
ataupun pengembangan Linux. Sudah cukup banyak
KPLI yang berdiri di Indonesia, seperti KPLI Jakarta,
KPLI Bogor, KPLI Bandung, KPLI Surabaya, KPLI
Yogyakarta, KPLI Makasar. Kegiatan dalam tingkat
nasional sudah beberapa kali diadakan oleh KPLI,
diantaranya adalah ILC (Indonesian Linux Conference)
Situs
Daftar situs berikut ini adalah situs yang memberikan
berbagai informasi yang berhubungan dengan sistem
operasi Linux, dan juga menjadi sumber informasi
untuk dokumen ini.
www.gnu.org
www.linux.org
www.fsf.org
www.distrowatch.com
www.linux.or.id
www.freshmeat.net
www.vlsm.org
7 GNU/Linux : Sebuah Pengantar
Dokumen ini dibuat
oleh
yan@daunsalam.net,
dapat digunakan
dengan bebas

membuat web dengan menggunakan photosop cs 2

Tutorial Membuat Website dengan Photoshop CS2

Web yang sering dikunjungi orang merupakan nilai plus bagi seorang web designer. Banyaknya pengunjung yang datang dapat dijadikan tolok ukur keberhasilan seseorang dalam merancang dan mengembangkan sebuah website profesional.
Ada beberapa unsur yang mempengaruhi keberhasilan tersebut, diantaranya: mudah digunakan, proses koneksi cepat, tampilan menarik, perpaduan warna sangat tepat, navigasi mudah dipahami dan digunakan, isi artikel sangat berguna, dan masih banyak lagi unsur lain. Semua itu bergantung pada respon pengunjung/pengguna terhadap website yang kita buat.
Saat ini website sudah menjadi salah satu bagian dari identitas sebuah institusi, sama pentingnya dengan alamat perusahaan. Website dapat dijadikan “guide” bagi pelanggan untuk mengetahui lebih jauh tentang profil sebuah institusi secara online.
Ada beberapa sofware yang dapat digunakan untuk merancang interface sebuah website pribadi, diantaranya: Adobe Macromedia Firework dan Adobe Photoshop. Rancangan yang dibuat dalam Photoshop dapat disimpan menjadi html kemudian dapat dioleh menggunakan Adobe Macromedia Dreamweaver. Jadi anda tidak perlu lagi membuat kode html yang rumit dan panjang, cukup menggunakan perpaduan Adobe Photoshop dan Adobe Macromedia Dreamweaver.
Berikut ini, saya akan memberikan sedikit tutorial tentang pembuatan website pribadi yang impresif menggunakan Adobe Photoshop. Artikel yang saya muat di sini merupakan cuplikan dari salah satu bab buku saya yang dalam proses pencetakan di penerbit Datakom Lintas Buana. Jadi, apabila tutorial ini kurang dari sempurna, sebaiknya membeli buku tersebut .
Buku tersebut terdiri dari 5 bab yaitu:
Bab 1. Pengantar Web Design
1.1. Tips Membuat Web Profesional
1.2. Prinsip dalam Mendesain Website
1.3. Software Desain Grafis
1.4. Format Grafis
Bab 2. Konsep Dasar Pembuatan Website

Bab 3. Merancang Web
3.1. Kategori Web
3.2. Dasar-dasar Pemilihan Warna
3.3. Mengatur Layout
Bab 4. Proses Pengembangan
4.1. Situs Pribadi
4.1.1. Membuat Dokumen Baru
4.1.2. Membuat Interface
4.1.3. Membuat Tombol
4.1.4. Menambahkan Efek Khusus
4.1.5. Membuat Heading
4.1.6. Menambahkan Image/Gambar
4.1.7. Menambahkan Teks untuk Menu
4.1.8. Memotong Gambar (Slice)
4.2. Situs Bisnis
4.2.1. Membuat Dokumen Baru
4.2.2. Membuat Interface
4.2.3. Menambahkan Efek pada Interface
4.2.4. Membuat Tombol
4.2.5. Membuat Heading
4.2.6. Teknik Slice
Bab 5. Proses Editing
5.1. Editing Awal
5.1.1. Mengubah Objek menjadi Background
5.1.2. Memasukkan Objek
5.2. Membuat Link dan Navigasi
5.2.1. Membuat Pop-up Menu
5.2.2. Membuat Rollover Image 116

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.
OKE. kita mulai saja pembahasan membuat website pribadi dengan Adobe Photoshop (Anda bisa menggunakan Adobe Photoshop versi 7, 8, atau 9).
4.1.1. Membuat Dokumen Baru
Diasumsikan Anda menggunakan Adobe Photoshop 7, CS maupun CS2. Jalankan program Adobe Photoshop kemudian ikuti beberapa petunjuk berikut ini.

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 #0066cc 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.

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.

4.1.2. 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 Pen tool.

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 #ff5d6c pada kotak yang disediakan.

5.      Buatlah Shape menggunakan Pen tool dengan bentuk seperti nampak pada gambar berikut.

6.      Aktifkan Convert Point tool untuk membuat efek lengkung.

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.

15.  Buatlah seleksi untuk memilih dua buah segmen yang akan dipindahkan secara bersama-sama.

16.  Gunakan tombol panah ke kiri untuk menggeser dua buah segmen tersebut.

17.  Langkah selanjutnya adalah membuat ilustrasi yang sama untuk memperindah tampilan. Buatlah duplikat layer Shape 1 sekali lagi dengan cara menggeser layer tersebut ke ikon Create New Layer. 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.

19.  Seperti biasa, aktifkan Convert Point tool untuk membuat bagian yang lengkung.

20.  Sehingga akan didapatkan sebuah bentuk interface yang impresif.

21.  Duplikasi Shape 2 dengan cara menyeret layer tersebut ke ikon Create New Layer. Kemudian ubahlah bentuknya agar lebih menarik lagi. Untuk memodifikasi, gunakan Convert Point tool dan Direct Selection tool. Jika mengikuti petunjuk buku ini, bentuk shape akan seperti nampak pada gambar berikut.

22.  Terakhir, aktifkan Rectangle tool.

23.  Kemudian buatlah Shape berbentuk kotak memanjang. Jangan lupa memberi warna Shape tersebut dengan kode warna #ea1c30.

4.1.3. 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.      Aktifkan Direct Selection tool kemudian buatlah seleksi untuk memilih empat buah segmen di bagian bawah.

4.      Geser ke kanan sebanyak 10 kali menggunakan tombol tanda panah ke kanan.

5.      Berilah efek bayangan (Drop Shadow) dengan cara mengklik ikon Layer Style (f) di bagian bawah Palet Layers.

6.      Setelah kotak dialog Layer Style muncul, aturlah beberapa spesifikasi seperti nampak pada gambar berikut. Setelah selesai klik OK.

7.      Langkah selanjutnya adalah membuat beberapa duplikasi tombol tersebut dengan cara menggesernya ke ikon Create New Layer.

8.      Buatlah tiga buah tombol lagi dengan cara yang sama seperti sebelumnya. Anda dapat menduplikasi tombol yang sudah ada atau membuat tombol baru lagi. Jika Anda telah membuat tiga buah tombol, kira-kira bentuknya seperti gambar berikut ini.

4.1.4. Menambahkan Efek Khusus
Interface tersebut mungkin masih sangat sederhana, kita perlu memberi efek khusus agar terlihat menarik. Ada beberapa teknik ketika membuat efek khusus pada tombol (button) yaitu memberi warna putih agar kelihatan seperti “button gel” atau hanya memberikan efek shadow saja.

1.      Pertama kali aktifkan layer yang bentuk objeknya seperti nampak pada gambar berikut.

2.      Menuju ke palet Path, ubahlah path tersebut menjadi seleksi dengan cara mengklik tombol ikon Load path as selection di bagian bawah palet Path.

3.      Buatlah layer baru dengan nama “Light”. Kemudian aktifkan Brush tool, pilihlah ukurannya 9 pixel. Pada option bar, kurangi opacity menjadi sekitar 6% saja. Tekan huruf D lalu huruf X.

4.      Goreskan pada bagian yang lengkung secara perlahan-lahan sehingga akan terbentuk warna seperti nampak pada gambar berikut.

5.      Sekarang tekan tombol Ctrl+Shift+I atau pilih menu Select > Inverse untuk membalikkan posisi seleksi. Tekan huruf X untuk memilih warna Foreground menjadi Hitam.

6.      Arsirlah secara perlahan-lahan pada bagian yang lengkung menggunakan Brush tool sehingga akan memiliki efek bersinar dan muncul bayangan.

4.1.5. 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 : dix-um.com. Ambillah nama domain tersebut sebagai judul heading.

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 #ea1c30.
   
3. Ketiklah judul heading, misal: Dixs-um.com, pilihlah jenis huruf (font) yang tidak berkait (Sans Sherif).
   
4. Buatlah layer baru dengan nama “Color-head”, kemudian buatlah seleksi berbentuk kotak menggunakan Rectangle Marquee tool.
   
5. Aktifkan Gradient tool, kemudian pada option bar pilihlah tipe Linier. Aturlah warna Foreground (#ea5765), dan Background (#ffffff).
6. Letakkan pointer di atas dan tarik ke bawah untuk membuat warna gradasi. Tekan Ctrl+D untuk membuang seleksi.
   

4.1.6. 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.

2.      Pilih menu Window > Arrange > Tile Vertically untuk menampilkan dua buah dokumen.

3.      Aktifkan layer yang bergambar orang, klik dan tahan sambil menyeret 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.

5.      Aktifkan Horizontal Type tool, dan ketikkan beberapa kata sebagai identitas situs tersebut.

4.1.7. Menambahkan Teks untuk Menu
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.

3.      Lakukan hal yang sama untuk membuat menu di bagian lain.

4.1.8. Memotong Gambar (Slice)
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.

2.      Buatlah beberapa garis bantu untuk menandai bagian yang akan dipotong. Apabila mengikuti pentunjuk dalam buku ini, kurang lebih seperti gambar berikut.

3.      Sekarang buatlah garis bantu secara horisontal dengan cara mengambilnya dari ruler guide di atas (horizontal ruler), sehingga hasilnya akan nampak seperti gambar berikut ini.

4.      Setelah tersusun beberapa garis bantu, langkah selanjutnya adalah memotong gambar tersebut menggunakan Slice tool. 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.

5.      Letakkan pointer di sudut kiri atas.

6.      Kemudian klik dan tahan sambil menyeret ke sebelah kanan sesuai luas yang diinginkan.

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

8.      Letakkan pointer di atas angka 2, klik dan tahan sambil menyeret ke kanan untuk memotong gambar.

9.      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.

10.  Langkah selanjutnya adalah memotong tombol-tombol yang ada secara terpisah. Letakkan pointer pada angka 3, klik dan tahan sambil menyeret ke bagian lain yang telah ditandai dengan garis bantu.

11.  Lakukan dengan cara yang sama untuk memotong bagian lain sehingga akan terbentuk seperti gambar berikut.

12.  Untuk bagian yang memiliki fungsi sama, sebaiknya tidak perlu dipisah/dipotong.

13.  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.

14.  Langkah selanjutnya, irislah tombol-tombol pada bagian kanan.

15.  Berikutnya, memotong gambar yang bukan berfungsi sebagai tombol.

16.  Untuk gambar yang akan dijadikan latar belakang, irislah menjadi dua bagian saja seperti nampak pada gambar berikut.

17.  Begitu pula pada bagian lain, irislah gambar sesuai keperluan.

18.  Apabila sudah mengiris gambar menjadi beberapa bagian maka akan nampa sepeti gambar berikut.

19.  Dan untuk langkah selanjutnya adalah menyimpan dokumen tersebut menjadi web (Save for web). Pilih menu File > Save for Web.

20.  Maka akan muncul kotak dialog Save for Web. Klik tombol Save.

21.  Kemudian 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.

22.  Setelah menyimpan dokumen tersebut, akan nampak nama file index.html dan folder images yang berisi beberapa gambar yang telah dipotong menggunakan Slice tool.

23.  Tahap selanjutnya adalah mengeditnya menggunakan Adobe Macromedia Dreamweaver untuk menambahkan teks dan membuat menu pull down agar tampilan situs lebih menarik dan lebih profesional. Teknik pembuatannya akan dibahas pada bab selanjutnya dalam buku tersebut, silakan baca artikel terkait di sini http://slametriyanto.net/2008/03/31/ebook-web-professional-dengan-photoshop-dreamweaver. Silakan beli bukunya ya..