Membuat Desain Web Sederhana

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.

Selamat mencoba membuat web sederhana , mudah-mudahan bisa mengembangkan lebih baik lagi dari latihan yang Anda pelajari.
Downloads

Artikel Menarik Lainnya :