Cara Membuat WebSite Professional dilengkapi Gambar2. bag.1

Cara Membuat Dasar Web Site Profosional  (Dilengkapi dengan Gambar).

Sallam pembaca

Kali ini saya akan Sharing Cara membuat web Profesional klas pembuatan dasar. nantinya juga akan diteruskan dengan web yang menggunakan Animasi juga memasukan keanggotaan dengan program Php.misalnya Form kontak dan Form Pendaftran anggota.Tapi kali ini saya akan membuat Beground Web , membuat tombol2 Navigasi dan bagaimana me link navigasi tesebut ke halaman yang di tuju.

Baiklah langsung ke masalah desainya. Untuk membuat beground ini saya menggunakan Photoshop CS2. Dan untuk membuat text content web site serta  link2 yang diperlukan,nanti kita memakai  Software   Adobe Dreamweaver  MX yang skaligus bisa menciptakan code/mode  HTML di desain web ini jadi anda sekaligus secara otomatis akan bisa membuat script web site juga langsung bisa membuat web Templte..Perlu diketahui bahwa ada banyak cara pilihan membuat web site . ada yang suka memanfatkan script2 yang sudah jadi atau ada yang memilih menggunakan Template2 dan tinggal mengedit saja , juga ada yang senang menggunakan software2biar lebih pas. Untuk desain banyak software yang bisa dipakai untuk membuat web site,missal yang mudah , (layaknya  penggunana Microsoft word),adalah Front Page, juga Program Komposer, juga ada yang kadang disebut dengan Program2 CMS (Content management System lainya).misal Jomla, Wordpres mungkin Blog dari blogger.com, bisa termasuk golongan ini. karena didalamnya sudah ada fitur2 kusus (Content)untuk pembuatan web site.Sedang Adobe Dreamweaver adalah Program desain Bebas dan banyak digunakan oleh para desain professional,karena mendesain memakai software ini tidak dibatasi oleh konten seperti sofware2 yang mengunakan CMS,seperti yang saya sebut sebelumny. jadi kita punya ke bebasan membuat desain sesuai kemampuan yang kita miliki juga sesuai dengan keperluan yang kita inginkan dengan Photoshop dan Dreamweaver anda sekaligus bisa membuat script secara otomatis juga templatenya..oleh karenanya saya mencoba memakai software Adobe Dreamweaver ini dan untuk Baground(tampilan Imagenya saya pakai photoshop CS2 diamana Photoshop adalah program desain gambar (grafik)dan editing photo yang sudahpopuler di masyarakat desain.Dan biasanya di Warnet2pun sudah terinstal program ini.

Mari Kita Langsung Mulai saja diawali dengan membuat Baground web site dulu.  Dan Silahkan Buka Program Photoshop anda.

Ketika anda membuka Photoshop tampilan pertama akan Nampak seperti gambar dibawah ini.

Gambar No 1 tampilan Photoshop

Karena mungkin tulisan digambar diatas tidak jelas, dan agar lebih jelas letak menu2nya (bagi pemula silahkan perhatikan  tampilan pembagian menu2 pokok dilayar sket photoshop dibawah ini .

Gambar 2  

Untuk mengetahui nama2 tool di tool bar juga menu 2 di menu bar atau palet2 caranya letak kan korsor anda diatas ikon2 tool tsb anda bisa membacanya, juga nanti mencoba menggunakanya. Bila tool Bar maupun palet belum terlihat. Silahkan klik menu Window diMenu bar deretan paling atas dan cari di sub menu yang muncul dibawah menu window sesudah anda klik. Beri centang, menu tersebut akan muncul di tempat seperti  kondisi setandart.Anda juga bisa lihat digambar gambar di bab pembuatan Header animasi  di situs ini bila ada keterangan yang anda cari tapi tidak ada di bab desain Web ini.

Untuk membuat Web Profesional pada umunya desainer akan membuat Layaut dulu langkahnya sbb.

Buka program Photoshop anda. Disini saya pakai (Asobe Photoshop Cs2) 

Klik menu File lalu klik New  File=>New akan tampil kolom pengaturan size gambar. Sbb.

Gambar pengaturan size.

Isikan lebar halaman Image sesuai  Web site yang anda rencanakan Misal (W 960 fixel x H 800)

W=width(lebar) ,H=high(tinggi) dan pilihan baground pilih saja White. Klik oke dilayar kerja (stage) akan muncul ruang halaman kosong seperti gambar dibawah ini.

Gambar tampilan halaman kerja
(masih kosong dengan ukuran sesuai ukuran yang anda input).

Selanjutnya buat beground Header. Dengan klik Rectangle tool di tool bar sebelah kiri atur dulu warnanya pilh saja missal biru tua lihat gambar2 dibawah ini. Pilih warna tinggal geser2 corsor anda di bidang pilihan warna . Pertama klik tombol Foregon dan baground stelah itu pilih warna dasarnya di bar vertical di kotak pemilihan warna setelah itu pilih warnanya dikotak warna yang lebar gunakan kursor(panah) dan klik.lihat gambar2 dibawah.

Gambar pilhan warna Forecround/ Beground.

Gambar pilihan warna di kolom pilih warna.

Selanjutnya pilih Rectangle tool kalau rectangle tool(segi empat) tidak Nampak klik panah kecil di icon lingkaran atau icon garis.( coba dulu klik2 semua panah kecil di bawah icon2 tool bar, biar anda tahu semua isi2 didalam icon2 tsb) setelah klik icon rectangle tool seret kebidang kerja. Buat segi empat seperti ganbar di bawah ini,.(warna Biru)

Gambar beground header biru polos.

Selanjutnya agar tampilanya menarik beri style pada beground Header.caranya klik Menu  Layer. Lihat di menu bar yang muncul di bawahnya Klik  style Layer, lalu pilih Gradient overly … (Menu bar= > Layer=>Style layer+> Gradient Overly). Akan muncul pengaturan Gradient Overly seperti gambar dibawah ini.

Gambar pengaturan Gradient warna

Atur Radient sesuai pilihan anda, Pilih saja Style linier. Anda bisa coba pilihan2 style lain missal Diamon. Atur kecerahan coba anda geser2  tombol2 geser yang ada. Lihat  hasil2nya anda bisa coba kalu salah klik menu Edit=>Undo di  Menu Bar Coba juga pengaturan Grad sudut missal 90drajat atau 180 drajat lihat gimana hasilnya  kembalikan dengan Undo untuk membatalkan..coba juga pilihan Reverce untuk membalik arah graient.

Setelah pas klik Oke Lihat hasilnya dilayar yang telah di beri style gradient…seperti gambar di bawah ini.

Gambar setelah Baground  header di beri Gradient warna

Selanjutnya Klik Rectangle Tool Klik juga Mode diatas bagiankanan baris kedua dekatkan ke gambar bujur sangkar tumpuk pilih dan  klik creat New Shape layer atau langsung pilih add to Shape area Buat segi empat Horizontal kira 1Cm. lebarnya. Dengan cara yang sama buat juga segi empat Vertical.. lihar gambar di bawahini.

Gambar segi empat Vrt. Dan Horz. tempat tombol menu navigasi.

Selanjutnya Klik  Elipse Tool tempatnya sama di icon Rectngle Tool , klik dulu tanda segi tiga kecil di pojok icon. klik icon lingkaran.klik juga Mode Add to Shape area.. Buat lingkaran di  sudut pertemuan kedua Segi empat vertical dan segi empat Horisontal hasilnya akan seprti gambar di bawah ini.

Gambar lingkaran. Disudut.

Selanjutnya klik  ElipseTool lagi lalu klik icon di menu kanan atas pilih Subtract From Shape area hasilnya akan seperti gambar di bawah ini.

Gambar Subtraksi lingkaran di sudut.

Selanjutnya Klik Menu Layer ..klik Rasterize.. klik Shape  ..(Layer=>Rasterize =>Shape). Hasilnya akan seperti gambar Berikut

Gambar setelah di Raster.

Lihat Di Palet Layer sebelah kanan yang ada gambar symbol Mata. Kalau palet ini belum ada Klik Menu Window di menu bar.. lalu klik Layer di sub menu yang Muncul

Gambar Sub menu Window

.Gambar Palet Layer

Selanjut nya lihat di icon dibawah Palet layer tempelkan Cursor anda di-ikon2 tsb. Pilih add layer Style

Setelah itu pilih Gradient lalu atur gradient seperti yang telah anda lakukan sebelumnya.. dilayar akan tampil yang anda kerjakan sebelumnya. Warnanya telah berubah menjadi bergradiasi.

Saatnya kita akan mengisi beground yang telah kita kerjakan tsb, dengan tombol2 Navigasi, text judul Web, juga text di tombol2 Navigasi juga gambar2 untuk mengisi web, sesuai fungsi juga agar web kita menarik, juga supya terasa nyaman di pandang.

Pertama kita buat dulu Tombol2 Navigasi.Tentukan dulu warna tombol, disini saya pilih warna biru terang

Klik Rounded Rectangle Tool tempatnya berkupul di icon Rectangle tool,

Klik dulu Layer di menu bar dan klik New  dan klik layer dikanan tanda panah, (Menu >>> Layer=>New=>layer)lalu buat tombol dng klik Rounded  Rectangke Tool dan seret ketempat tombol yang direncanakan.sehinga terbentuk tombol seperti gambar di bawah ini.

Setelah itu lihat di palet layer mainkan Stylenya. Pastikan shape gambar tombol aktip.plih style Drop shadow boleh juga di tambah klik Bevel  and Embos, Lalu tombol anda akan berubah. Lihat gambar dibawah ini.

Gambar tombol 1

Selanjutnya kita akan membuat  5 buah Tombol Navigasi Caranya sbb. klik Layer di Menu Bar lalu klik New lalu klik/pilih layer Via copy…tombol yang baru  anda akan terbentuk., dan Menumpuk diatas tombol pertama. Selanjutnya Klik Move  Tool Di Tool Bar.. baris paling atas.bagian  kanan. Atur /geser tombol baru anda dengan memakai tombol panah di Key Board anda(papan Ketik)  pilih panah arah ke kanan. Atur sampai melewati tombol pertama dengan jarak kira2 2mm. ulangi lagi pekerjaan tsb sehingga anda ber hasil membuat 5 tombol. Hasilnya akan seperti gambar di bawah ini

Gambar 5 tombol navigasi.

Saatnya sekarang Kita memberi text pada Tombol2 tersebut sesuai pungsinya.

Klik  Lihat icon  Dengan Hurup T di Tool Bar. Pilih Horisontal Type tool. Lalu pilih  Warna di kotak  pemilihan warna lihat gambar dibawah iini

Tampilan menu pilihan warna untuk Text

Menu pilihan Warna untuk Text.

Setelah Pengaturan warna  muncul pilih Warnanya.  Lalu Buat lah text HOME di tombol Navigasi pertama  Klik text Horizotal tool Klik Dan seret sehingga tampil seperta kotak ada tanda  garis ber kedip. Atur ukuran warna dan type text yang diinginkan Klik  Menu Text di menu Bar. Pilih tinggi hurup Coba saja ukuran 16 kalau sudah sesuai tinggal anda ketikan text nya. Untuk ini saya Memilih type Arial.Warna Putih Size 16.

Hasilnya akan seperti  gambar di bawah ini.

Gambar 5Tombol Lengkap deng text

Text Yang Kita buat selanjutbya Ialah Text Judul Header. Atur dulu  Pilihan hurup dan Sizenya pertama saya pilih warna Biru tua hampir ke hitam. Lalu tulis text di area Hider dengan Text Horizontal Tool .Saya pilih Type Hurup Lukida Hand Writing setelah itu ketikan text yang sama tapi Warna putih atau biru muda agar kalau sudah diatur terlihat text dengan bayangan( sadow ),sehingga hasilnya sepeti gambar di bawah ini.

Gmbr Text Header

Tahap selanjut nya ialah memasukan  gambar ke area rancangan tampilan Web site Kita. klik File dan Klik Open pilih gambar yang anda ingini dari Komputer anda. Atau gambar yang sudah anda siapkan.

Atur ukuran gambar agar sesuai dengan tempat yang anda pilh Caranya KLik menu Image lalu cari Image size lalu atur ukuran gambar di kolom pengaturan gambar yang muncul. . anda boleh coba beberapa kali kalau belum sesuai klik menu Edit => Undo untuk membatalkan dan ulangi lagi.. Setelah sizenya sesuai Pilih tool Magic Wand Tool.(Tool untuk memilih bidang warna yang sama didalam gambar)tempatnya di Tool bar bagian atas bisa sebelah kiri atau kanan Dekatkan saja cursor anda baca nama tool nya. selanjutnya  klik .dan klik juga Menu Select di Menu Bar atas piih Inverse(memilih pilihan bagian dalam) klik Magic wand tool di gambar yang telah anda insert. Kalau gagal boleh di coba cara lain.sbb: Klik menu Edit di Menu bar bagian Atas.klik gambar anda agar shape aktip. Lalu pilih  Copy di menu Edit  , lalu Close gambar anda dalam kondisi terpilih..lalu klik lagi  Edit lalu klik Paste,di layar kerja anda, Lalu klik Move Tool atur tempatkan diposisi yang anda kehendaki ,deng move Tool. atau dengan panah naik turun di Key
Board anda.
(Anda latih dan coba beberapa kali... manfaatkan fasilitas EDIT dan Undo untuk membiasakan.)
Hasilnya kerja diatas  lihat Contoh gambar di bawah ini .


Gambar tampilan rancangan Web.

Anda bisa memasukan bebrapa Gambar denga cara yang sama.

Oke tampilan Web Kita Sudah Siap Tugas ahkir Untuk Tampilan atau Template Web kita adalah Membagi Image layer gambar ke  beberapa bagian kecil2, yang berguna sebagai cara agar Loading Web kita akan lebih Ringan dan lebih  Cepat .yang Kedua Untuk memisah area tombol . jadi kalau di Klik yang lain agar  tidak ikut ter pilih. Carany  klik Slice tool. Di Tool bar No 3 dari atas. Buat kotak2  sesuai keinginan anda Nanti akan muncul Nomer2 kotak 2 kecil tersebut.[i] Kusus untuk di Area tempat tombol 2, perhatikan caranya. Sbb.   

Klik Slice select Tool tempatnya sama dengan slice tool… klik di dalam area tombol2. Lihat diatas muncul tulisan Divide . klik tulisan tesrsebut , akan muncul pengaturan. Lalu Klik divide verticaly into lalu isi angka 5 di kotak isian. Angka ini artinya :area tombol tsb akan kita bagi menjadi 5 bagian dengan ukuran yang sama. Hasil pemecahan Slice kita, seperti gambar di bawah ini

Gambar bidang gambar yang   di pecah dengan Slice kira2 Buat saja seperti gambar di bawah ini

Maap garis2 slice nya tidak tampak di gambar diatas. anda bisa lihat sket pembagian bidang gambar nya dengan SLICE kira2 seperti gambar di bawah ini.

Nah rancangan Tampilan web Kita(template) sudah selesai Simpan rancangan anda di Drive anda Dengan Tekan File lalu Save namai saja Rancangan.psd Gambar ini tersimpan berbentuk type PSd (Photo Shop Data)gunanya mungkin suatu saat anda akan memakai untuk diedit  atau_untuk membuat web dengan konten ber beda  Setelah itu Buatlah Folder Baru di My Document.  Namai saja Rancangan Web tapi bentuknya  gif Inilah Folder untuk menyimpan rancangan yang natinya akan kita pakai untuk membangun web Kita.(Simpan dulu rancanganya).

Caranya Sbb.

Kembali lagi  lagi ke Menu >File lalu  Selanjutnya   Klik Save For Web.Akan muncul fitur pilihan disebalah kanan. Lihat atas!! lalu pilih Gif. Dikotak isian. Lalu Klik Save di atasnya. Akan muncul pilihan  di halaman Save Optimized as di Save in pilih my Document dan pilh Folder Baru yang baru anda buat..Masukan File anda ke folder ini.

Di File name pilih nama rancangan,yang anda suka Misal RancanganWebku 
Di Save as type: pilih Html and Image (“html) 
Di Setting pilih Other selanjutnya pilih   Slice tapi kalau sebelumnya sudah dipilih slice ,
pilih saja Defaul setting.

Nah teman2 sekian dulu artikel kali Ini  anda pasti Capai,.Minggu depan kita lanjutkan ke tahapan selanjutnya yaitu:

1 Membuat Konten.(artikel2) Sesuai menu2 yan kita tulis di tombol2 Navigasi.,juga visi web kita

2.Membut . link dari tombol ke konten/target.. Mermbuat tombol animasi (Roll Over) untuk Sub menu.

3 Membuat Table.Form Guest Book, Tabel/form Login, Membuat  Form pendaptaran.
( Dan Yang terachir . Yang ingin lanjut ke Web Site Dinamis dan Web Otomatis , Bisa lanjut ke bab Data Basis dan Script Php).

Membuat Web ternyata mudah:...Motonya hanya: Alla Bisa Karena Biasa.
Sallam Gumilar.H