RSS

Membuat Website dengan Photoshop + Dreamweaver

26 Mar

Catatan : Resolusi Monitorku 1024 x 768 pixel

Dulu sempat berpikir, bagaimana caranya membuat tampilan website, aku lihat di internet, tampilannya pada yahud-yahud semua,
banyak vareasi warna, serta animasinya.

Lama juga cari-cari tutorial di internet soal ini, nah ini sedikit cluenya :
1. Familiar dengan program design, banyak programnya, misal : Macromedia Fireworks atau adobe photoshop
2. Di program design tersebut terdapat tool untuk mengolah menjadi website, misal dengan photoshop, antara lain :
a. Ada slice, gunanya untuk memotong-motong gambar, sebenarnya gambar yang ukuran besar dibagi menjadi beberapa potongan
fungsinya, supaya gambar dapat diload/ditampilkan oleh yang punya koneksi terbatas dengan lebih cepat.

b. Ada convert images for web, fungsi ini digunakan untuk mengoptimalisasi gambar yang kita olah, kemudian kita atur tipe
gambarnya untuk memperoleh kualitas terbaik dan ukuran file yang optimal, tahu kan, klo ukuran gambar besar
sangat berpengaruh banget dengan cepat/tidaknya gambar ditampilkan oleh browser

c. Ada ImageReady, nah disini kamu gak harus tahu HTML untuk bisa melihatnya di browser, karena sudah ada fasilitas yang
memudahkannya, memang hasilnya tidak terlalu bagus, tapi cukuplah untuk anda yang sedang belajar/pemula.

wah, jadi promosi Photoshop, ekekekke … gpp’lah .. dikit …

Ini gambar designnya di Photoshop dan sudah di convert ke ImageReady

Kemudian, klik File – Save Optimezed As – pilih HTML and Images (*.html)

Nah, ntar jadinya file html, double klik dan lihat hasilnya neh :

Hasilnya tidak sesuai dengan yang kita harapkan memang, posisinya condong ke kiri

Ya ginilah, untuk dapat hasil yang bagus, memang tidak ada jalan yang instan, jadi memang kita kudu harus extra kerja keras,
tapi klo kamu sudah puas, ya gpp, tapi masak seh sudah puas, eta mah belum puas, hehehehe…..

Klo yang masih ingin kerja keras dan dapat hasil yang bagus, ikuti langkah-langkah berikut, PERHATIAN : TULISAN INI DAPAT MENYEBABKAN RASA KANTUK, LAPAR, HAUS, KEBELET PIPIS, MARAH, NAFSU, DLL, jadi bukan salah ane, wkwkwkwkw….. canda..50x..

Nah ini tahapannya :
1. Saya asumsikan, kamu sudah bisa mendesain tampilan web di photoshop (lha klo belum ya susah lah, untuk yang belum bisa
sabar saja, kapan-kapan aku buatke tutorialnya, aku baek hati kan, ekekekek….), pastinya sudah ada ” guide linenya ” kan
nah dengan berpatokan pada guide line kita akan memotongnya menjadi bagian-bagian kecil, untuk posisi serta jumlah guide
line terserah kamu, patokannya adalah : semakin banyak potongan dalam web kamu, maka koneksi yang dibutuhkan untuk membuka website kamu semakin mudah/gampang. Lihat gambar berikut :

2. Aktifkan ” Slice tool ” fungsinya untuk memotong-motong gambar, caranya : tempatkan pada salah satu sudut antara guide line
kemudian tarik sampai membentuk kotak gambar yang dikehendaki, lihat gambar berikut :

Lihat gambar di atas, ada perbedaan antara kotak yang telah kita slice dengan yang tidak, yang telah kita potong akan berwarna
biru, untuk kotak yang memiliki nomor seperti slice, jangan kuatir, itu hanya pemberian otomatis oleh photoshop. Nah, untuk
kotak-kotak yang lain, silakan anda potong-potong juga. Tapi perlu diingat tidak semua bagian dalam web perlu kita potong
karena memiliki kesamaan, misal :
a. Lihat background yang berwarna campuran coklat dan putih, pada posisi kanan dan kiri sama, cukuplah kita potong satu
sisi saja, dan tidak perlu sebesar itu, cukup kecil saja, karena di Dreamweaver nanti bisa kita gunakan perulangan
untuk backgroundya, lihat gambar berikut :

b. Nah, untuk background di dalam yang warnanya putih, kita tidak perlu potong, karena warna tersebut bisa kita gantikan
dengan warna biasa di Dreamweaver, cuman, kita harus samakan warnanya, putih = putih.

3. Langkah akhir, kita perlu mengoptimized gambar yang telah kita slice, langkah ini sangat penting banget, karena akan
menentukan cepat/tidaknya web tampil secara sempurna. Perlu sedikit perhatian, JANGAN PERNAH MENAMPILKAN FILE GAMBAR YANG BERTIPE .BMP, jenis file ini akan membuat ukuran gambar semakin besar, anda bisa pilih tipe .jpg, .png, .gif atau yang lain. Langsung saja, tanda slice di gambar masih ada, trus klik menu File – Save for Web, akan tampil gambar berikut :

Lihat pada gambar di atas, ada 2 jendela, sebelah kiri adalah preview gambar yang asli/original kemudian di sebelah kanan
adalah preview gambar yang akan di optimized. Kemdian di dalam kotak warna merah, terdapat jenis-jenis tipe file gambar
yang bisa anda gunakan, beberapa hal yang bisa anda pertimbangkan adalah :

a. Pilihlah jenis tipe file yang tidak membuat ukuran gambar malah tambah besar, kemudian lihatlah dibagian bawah jendela
optimized, terdapat 3 hal, yaitu :

1. Tipe file
2. Ukuran file setelah anda optimized
3. Kecepatan akses, maksudnya untuk menampilkan gambar tersebut pengguna membutuhkan beberapa detik dengan kecepatan
rata-rata sekitar 28 kbps, klo misal ukuran anda besar, dan kemudian kecepatan akses internet pengguna dibawah 28kbps
bayangkan, berapa lama pengguna harus menunggu supaya gambar tersebut tampil sempurna, bisa-bisa malah tidak terbuka
sama sekali.

b. Ada tipe file yang tidak bisa diedit ulang, misal : .gif, jadi saran saya hati-hati menggunakan tipe ini, solanya setelah
anda convert, file yang sudah jadi .gif tidak akan bisa diedit ulang.

Lakukan langkah ini untuk masing-masing potongan gambar, apabila semua potongan hendak diconvert ke tipe yang sama, langkah
tercepat anda bisa gunakan tombol “ Ctrl + A “.

Setelah terconvert semua, klik tombol ” Save “, kemudian tentukan nama filenya.

CATATAN :
– Setelah anda simpan, maka potongan-potongan tersebut akan secara otomatis berada di folder Images
– Gambar yang tidak kita slice otomatis akan terpotong juga, tidak masalah lah, kita bisa hapus yang tidak kita inginkan

———— BERALIH KE DREAMWEAVER ————-

4. Aktifkan program Dreamweaver, disini aku gunakan yang versi 8, untuk versi lain paling sama, hanya beda tampilan saja. Gak
masalah lah. Nah, pilihlah ” Create New HTML “, kemudian akan tampil halaman utama, lihat gambar berikut :

- Pada title isikan judul website anda, bisa dimasukkan sembarang karakter text, angkat, karakter-karakter khusus
– Pilihlah mode ” design “, ini untuk memudahkan anda yang masih pemula, klo sudah mahir bisa beralih ke ” mode code “
– Simpanlah pekerjaan anda dengan nama “ index.html di lokasi yang sama dengan folder images sebelumnya.

5. Untuk lihat previewnya di browser, bisa klik File – Preview in browser – pilih IE/Firefox. Belum ada apa-apa kecuali judul
website anda yang telah tentukan dari awal.

6. Kembali lagi ke Dreamweaver, pada panel sebelah kanan terdapat panel CSS, nah untuk tahu apa itu CSS, fungsi dan bagaimana
menggunakannya, bisa kamu cari lewat paman google. Selanjutnya kita akan menggunakan CSS, why/kenapa? CSS = Cascading Style Sheet, kode bahasa (script) untuk mengatur tampilan setiap elemen dalam dokumen HTML, agar terlihat lebih cantik, rapi dan efisien, bla… bla… bla… (malah ngelantur, wkwkwkkwwkw …..)

===== AYO SEMANGAT … SEMANGAT … SEMANGAT =======

7. Masih di panel CSS, lihat tanda ” plus, fungsinya untuk memasukkan komponen CSS di web kita
akan ditampilkan jendela CSS, seperti berikut ini :

- Pada Selector type, pilihlah Tag
– Pada Tag, pilihlah body, karena kita akan mengatur background terlebih dulu
– Pada Devine in, pilihlah this document only, supaya pemberian CSS langsung dimasukkan pada web yang sedang kita kerjakan, dan tidak terpisah menjadi file tersendiri

8. Kemudian klik tombol OK, akan ditampilkan jendela ” CSS rule definition for body “, pada Category pilih Background dan
pada panel sebelah kanan pilih background images, kemudian klik tombol browse dan carilah potongan gambar di folder images
yang merupakan warna background (gambar kecil tapi panjang, warna coklat), ketemu kan, klo sudah klik Apply – OK, kemudian simpan ulang website kita/tekan Ctrl + S trus coba lihat di browser, walah … kurang lebih kayak gini

Siiiiip kan, bernafas dulu, ma seteguk jahe panas, wuaaahhhhh, manteb tenan ….

9. Dilanjut aaahhhh ….. Lagi, klik tanda plus CSS untuk menambahkan pengaturan untuk isi web’nya. Kali ini pada CSS Rule :
– Pada Selector Type, pilihlah Advanced
– Pada Selector, ketiklah ” #logo ” ini tidak ada di list, kudu dibuat secara manual, untuk mengatur bagian header/atas web
– Pada Devine in, pilihlah this document only

Pada CSS rule definition for #logo, pilihlah categori – Position, lihat gambar berikut :

- Pada Type, aku pilih relative, supaya ketika ukuran browser dikecilkan, maka tampilan web juga akan mengikuti, klo pilih yang
absolute, maka ketika ukuran browser diperkecil, posisi web tidak akan mengikuti ukuran dari browser

- Pada width = 700, ini aku dapat dari pembuatan ukuran website yang 800×600 pixel, trus disebelah kanan dan
kiri aku kasih ruang sebesar 50 pixel, jadi sisa ruang yang ditengah-tengah sebesar 700 pixel (moga-moga mudeng….)

- Untuk height = 135 pixel, aku dapat dari ukuran slice yang aku lakukan, untuk lebih yakin, cobalah buka gambar yang telah
anda slice, kemudian coba cursor mouse anda tempatkan ditengah-tengah gambar, akan ada jendela informasi kecil tentang
ukuran tersebut, width, height, tipe file, ukuran, dll (ini aku pakai OS Windows XP, jadi bisa muncul ini)

- Untuk Top = 0, supaya tidak ada jarak antara tepi logo dengan browser bagian atas, jadi seolah-olah menempel di atas.

- Untuk Left = 150, adalah jarak antara tepi browser sampai letak pinggir logo, mungkin kamu sedikit bingung (sama waktu
aku dulu, wkwkwkwk…..), koq bisa 150? clue, ukuran kerja di photoshop 800×600 pixel, resolusi monitor yang aku pakai
1024×768 pixel, jadi klo pakai resolusi 800×600 kudu 50, tapi karena 1024×768 aku pakai 150, pahe kan, alhamdullilah ….

10. Masih pada CSS rule definition for #logo, pilihlah categori – Box, untuk pengaturan lihat gambar berikut :

11. Masih pada CSS rule definition for #logo, pilihlah categori – Border, untuk pengaturan lihat gambar berikut :

12. Siiip lah, nak berikutnya klik ” Apply ” – trus klik ” OK “. Wooolaaa … koq tidak ada apa-apa, wah ngapusi kie ….
tenang… tenang … heheehe… ada fungsi lagi neh, namanya ” DIV “.

Apa itu ” DIV “, DIV = Division, merupakan istilah lain dari layer/lapisan dalam bahasa script HTML, jadi jangan heran
klo di Photoshop ada layer, sehingga layer atas yang paling terlihat daripada di bawahnya, nah, DIV di script HTMLpun
juga sama fungsinya, jadi jangan bingung ya. Syarat pemakaiannya, anda kudu menentukan Class/ID layer tersebut.

13. Lanjut, Klik “ insert Div Tag “, kemudian akan ditampilkan jendela berikut :

Nah setelah anda klik akan tampil jendela insert div tag seperti berikut

- Pada Insert : pilih at insertion point
– Pada Class : kita kosongkan
– Pada ID : pilih logo

Klik OK, akan tampil gambar berikut :

Jangan heran klo posisinya tidak ditengah-tengah, itu karena ukuran saja, tapi nanti juga ditengah klo di browser.

14. Next, hapus saja pesan ” Content for id logo goes here “, kemudian kita menambahkan tabel didalam Div Tag tersebut, caranya klik tanda pada gambar berikut :

kemudian masukkan 2 baris dan 5 kolom, tabel width = 700
kenapa begitu ?
– 2 baris : baris 1 untuk logo, baris 2 untuk tombol
– 5 kolom : 4 kolom untuk tombol dan 1 kolom untuk logo

15. Nah pelan-pelan saja :
– Pada baris pertama, kita perlu menggabungkan 2 baris menjadi satu, blok baris 1 dan 2 pada kolom 1, klik kanan, pilih
Table – merge cells, setelah menjadi satu
, kita masukkan potongan gambar logo yang pertama, caranya klik gambar berikut

pilih – Images, kemudian tentukan lokasi penyimpanan potongan gambar logonya, hasilnya kurang lebih kayak gini :

- lanjut, apabila garis baris pada kolom kedua bergeser ke kanan, jangan kuatir, tinggal tarik saja pakai cursor dan dekatkan
ke tepi gambar logo yang telah tampil, lakukan langkah yang sama untuk potongan gambar yang lain hingga nantinya, kurang
lebih kayak ini :

- Trus coba kita lihat lewat browser ” Firefox ” ini hasilnya :

Nah, gampang banget kan ….. ya iyalah, apa kata dunia? hayah ….

16. Itu baru header lho, nah untuk bagian Isi/tengah, dan juga footer/bawah, caranya sama saja, anda tinggal membuat CSS baru
dengan pilihan :
– Selector type = Advanced (bla… bla…)
– Selector = buat ID baru, contoh untuk isi tengah = #isi, klo untuk footer misal : #footer (bebas namanya), asal jangan
nama minem, mince, ijah, yuni, dll, wkwkwkkw … ntar malah gak jadi2 ….
– Define in = this document only

Trus, pada waktu klik insert Div Tag, pada Insert pilih yang after tag, karena ID yang baru untuk layer di atas dari
sebelumnya, atau bisa juga anda coba-coba untuk mengetahui perbedaannya.

By the way Anyway Busway, aku rasa cukup, agak panjang ya, moga2 paham, tp klo tidak gak masalah, kasih comment saja, insya allah, klo bisa aku jawab segera ya aku jawab.

Salam lewat.

About these ads
 
14 Komentar

Ditulis oleh pada Maret 26, 2010 in Ngeblog

 

14 responses to “Membuat Website dengan Photoshop + Dreamweaver

  1. Akbare

    Mei 15, 2010 at 3:27 am

    mantep tutornya..kalau bisa kasih tutor sekalian dong buat text nya atau isinya ^_^

    biar kalo posting bsia news

     
    • IntroducedMe

      Mei 25, 2010 at 2:18 am

      sebuah web umumnya ada 3 bagian, header, isi, ma footer, nah klo anda ingin menambahkan teks taruh pada bagian isi saja, apakah anda paham dengan istilah tabel di dalam tabel?

      ini berfungsi banget, apabila teks yang anda masukkan sangat panjang, sehingga ukuran web nanti akan otomatis memanjang menyesuaikan dengan isinya, sehingga bagian bawah/footer tidak berantakan.

      salam.

       
  2. ramdan

    Juni 2, 2010 at 6:10 am

    gan mau tanya, saya pusing pas bagian pemotongan background soalnya icoba beberapakali gagal terus, tolong dong jelasin pas bagian bakground,. thanks

     
  3. zainal

    Juni 4, 2010 at 9:12 pm

    benar itu bunkl;

     
    • IntroducedMe

      Juni 5, 2010 at 5:20 am

      tampilan jadinya yang anda-anda buat bagaimana, apakah di web tampil seluruh tapi di bagian bawah terpotong, tampilan jadi berantakan ataukah tidak tampil sama sekali?

      dalam waktu dekat tak buatke tutorial secara komplit deh. tunggu saja.

      terima kasih dah mampir, salam kenal.

       
  4. hera

    Desember 22, 2010 at 12:02 am

    mas mo tanya kalo pengen bikin menu baru pada web yang udah jadi g mana caranya?
    cara ngatur posisi nya g man soalnya pas di browser posisi nya jadi di sebelah kiri

     
    • IntroducedMe

      Desember 26, 2010 at 8:34 am

      Klo yang sudah jadi rada ribet mas, lha, klo ada tempat kosong gak masalah tapi klo tidak… rada pusing .. hehehe….

      ketika pembuatan pakai struktur tabel, agak ringan, tinggal anda tambahkan 1 kolom/baris di posisi yang hendak ditambah menu baru (kiri,tengah,kanan), pakai fungsi css ma dev.

      smoga membantu

       
  5. eka

    Februari 22, 2011 at 9:44 am

    pengen belajar membuat tamplate flash g mana caranya ya…sopwer apa aja yang di pake…mohon bantuannya….

     
    • IntroducedMe

      Februari 23, 2011 at 1:30 am

      klo aku pernah bikin pakai macromedia flash v.8, tampilannya seperti web, coba kalau masih ada filenya ntar tak uploadkan.

      atau coba aja cari referensi di google dengan keyword ” flash web ” pasti ada banyak contohnya

      bisa juga ke youtube, disana banyak video-video buat flash.

       
  6. rachmat nur kasim

    Mei 15, 2012 at 11:37 pm

    ane maw tanya. gimana cara nya agar kita masukan teks pada layout website di dreamweaver, supaya klw teks nya panjang, agar layoutnya gk pecah-pecah.? itu cara membuat layout otomatis agar menyesuaikan layoutnya gmna yach??

     
  7. Jasa Logo

    Juni 19, 2012 at 2:46 am

    Gan mau tanya nih,,, misalnya kita udah buat desain web, ukuran lebarnya kira2 700px…

    bisa ga kita atur supaya otomatis menyesuaikan layar, kita pengen supaya lebim zoom,, ga kekecilan gan,,,

    thanks banget informasinya,,,,

     
    • IntroducedMe

      Juni 19, 2012 at 4:38 am

      klo gak salah di pilihan layout pilih relative, sehingga klo ukuran screen diperkecil/diperbesar resolusinya, content web tidak berubah.

      (aku nggak buka dreamweaver, jd seingatku saja, maap sebelumnya)

       
  8. M. A. Rahman

    November 26, 2012 at 4:59 am

    Ijin Belajar ya, Terimakasih

     
  9. hendy

    November 12, 2013 at 10:46 am

    Kak mau tanya Kalo kita mau ngasih sub menu biar bisa di klik gimana ya? Trus kalo mau ada gambar bergerak gimana? Mohon bantuan ya kak :)

     

Berikan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Logout / Ubah )

Twitter picture

You are commenting using your Twitter account. Logout / Ubah )

Facebook photo

You are commenting using your Facebook account. Logout / Ubah )

Google+ photo

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

 
Ikuti

Get every new post delivered to your Inbox.

%d blogger menyukai ini: