Sekarang ini di dunia web khususnya terdapat berbagai macam gaya dan
bentuk web yang menarik, untuk dipublikasikan ke internet semua itu
bertujuan untuk menarik user untuk terus mengunjungi web tersebut
.Disamping dari isinya yang bermanfaat karena tampilan web nya pun
menarik, sehingga orang yang masuk untuk melihatnya akan merasa nyaman
dan tidak bosan dengan tampilan yang bisa dibilang monoton atau Cuma
gitu-gitu aja. Maka dari itu penulis akan berusaha semaksimal mungkin
untuk membuat web yang menarik. Dalam pelajaran kali ini kita akan
belajar bersama membuat trik dalam membuat design web yang sederhana
khususnya untuk kita yang baru pertama belajar atau untuk orang awam
serta orang yang sudah mungkin lebih tahu tentang photoshop ini…
A. Tahap Desain dengan Photoshop
1. Anda open-All program-pilih Adobe Photoshop 7.0 kemudian pilih File-New dengan ukuran seperti pada gambar klik OK
2. Create New layer pada jendela Layers, sehinggga pada jendela layers bertambah dengan nama layer “Layer 1”
3.
Pada layer 1 Anda akan membuat biner dengan menggunakan Rectangular
Marquee tool , dengan cara drag pada bagian atas lembar kerja dan
diwarnai dengan menggunakan gradient tool dan untuk menghilangkan
seleksi tekan Ctrl+D.
4. Create New layer pada jendela
Layers, sehingga pada jendela layers bertambah dengan nama layer “Layer
2” untuk membuat left color sebuah web, caranya seperti no 3.
5.
Kemudian Anda membuat biner untuk Anda tuliskan Home, Profile, Product,
Contact caranya seperti no 3 dan no 4, kemudian kita buat tulisannya
dengan cara Ketik Horizontal tool ,dan apabila ukuran default
terlalu kecil Anda bisa atur menggunakan Transform atau ketik Ctrl+T .
6.
Pada biner Anda buatkan tulisan “ Welcome to My Web “ kemudian Anda
buat efek double ring Glow untuk mempercantik tulisan , dan Anda buatkan
garis bawah untuk tulisan tersebut dengan menggunakan dan jangan lupa
buatkan layer baru , kemudian atur ukuran sesuai keinginan anda untuk
variasi gunakan free transform.
7. Kemudian Anda akan
melangkah ketahap pembuatan link nya dengan menggunakan , Drag pada
kata Home , Profile , Product dan Contact untuk dijadikan link.. Kalau
sudah di drag , pilih Slice Select Tool , klik 2 kali pada Home
sehingga akan muncul form Slice Option , tulislah seperti pada form
dibawah, klik OK .
8. Langkah selanjutnya sesudah diatur
target link nya , pada layar isi putih Anda tulis dengan missalnya
“Home” ( Untuk mengetahui bahwa link sudah benar ) kemudian klik file
save for web dan aturlah seperti form dibawah ini bila sudah klik
Save dengan nama index.html ( usahakan kita membuat folder sendiri ):
9.
Untuk membuat link Profile, Product dan Contact, Anda lakukan seperti
contoh nomor 7 dan 8 dan nama linknya disesuaikan , misal Profile simpan
dangan nama profile.html dan bertuliskan Profile pada bagian isi,
begitu juga Product simpan dengan nama product.html dan bertuliskan
Product pada bagian isi, dan Contact simpan dengan nama contact.html dan
bertuliskan Contact pada bagian isi. Jangan lupa saat akan menyimpan
dengan ketentuan gambar pada nomor 8 Anda tekan Ctrl+A dahulu agar bisa
tercopy semua baru kemudian klik save dan beri nama sesuai dengan
linknya.
10. Untuk melihat hasilnya , dokumen yang kita simpan,
klik 2 kali pada file html nya. Lihat pada pagian atas web apabila
alamatnya benar sesuai dengan nama linknya masing-masing berarti anda
sudah berhasil.
B. Tahap Desain dengan ImageReady
Dari
photoshop kita pindah ke ImageReady beserta gambar/desain yang sedang
aktif. Pilih menu File Edit in ImageReady, atau tanda toolbox
kita klik ikon ImageReady. Bisa juga kita tekan tombol kombinasi
Shift+Ctrl+M. anda juga bisa membuka ImageReady secara langsung dan
kemudian membuka file desain yang akan diedit. Kita bisa melakukan hal
yang sebaliknya dengan cara yang sama.
1. Slicing dengan ImageReady
Pada
ImageReady kita dapat melakukan slicing untuk memudahkan kita dalam
langkah berikutnya. Pemotongan berpedoman pada layout yang telah dibuat.
Tiap-tiap bagian akan kita satukan dalam satu table. Bagian yang akan
disatukan dalam satu table adalah bagian header, bagian samping, bagian
isi.
Pada photoshop kita sudah melakukan slicing pada desain web
kita. Di ImageReasy kita juga akan melihat hasil pemotongan itu. Untuk
menyatukannya dalam satu table, dimana untuk yang pertama kita akan
menyatukan bagian header, pilih slice select tool, klik potongan yang
akan disatukan dan tekan tombol shift di keyboard, klik potongan lain
yang dalam satu bagian. Klik kanan dan pilih group slice into Table,
atau pilih menu slice-Group Slices into Table. Hasilnya bagian header
sudah dalam satu table. Lakukan juga pada bagian lain. Secara default
tiap-tiap table akan diberi warna. Hal ini sangat bermanfaat untuk
penunjuk dan pembeda.
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment