Banner blog safirulamar 2020 iklansafirul1

19 Des 2014

Cara cara buat website di Adobe Photoshop

Boleh ke membina website menggunakan adobe photoshop? jawapannya ialah boleh dan macam mana nak membina website menggunakan adobe photoshop? Lihat teknik teknik ringkas dibawah ini, kena praktis dan sentiasa mencuba, Sekarang ni, banyak platform untuk membina website dengan mudah, beserta dengan template lagi, ada yang percuma (open source) ataupun berbayar, contoh platform open source yang percuma ialah seperti Joomla, plone, wordpress dan sebagainya.

Kaedah yang digunakan ini adalah kaedah yang susah mungkin bagi beginners dan memerlukan sedikit kemahiran koding html sekurang-kurangnya, dan jika anda ingin menampakkan kelihatan lebih dinamik, anda boleh memasukkan plugin tambahan seperti Php Jquery seperti kalendar, tab menu, widget accordian listing dan sebagainya.

Untuk membina interface website, anda perlu menggunakan SLICE TOOLS. Slice tools ni sebenarnya sangat berkuasa di gunakan untuk tujuan memotong web design template.

1) Pertama sekali, buka adobe photoshop, dan anda perlu tetapkan terlebih dahulu apa saiz (lebar x tinggi) website yang anda mahukan terlebih dahulu, sebagai contoh, saya letak 544 lebar x 341 tinggi. (Kelebaran yang penting, ketinggian tidak kisah, boleh adjust di coding). (lihat gambar 1)


Cara cara buat website di Adobe Photoshop
gambar 1
2) Selepas itu, anda lukis menggunakan tools yang ada, design sendiri layout yang anda mahukan seperti banner header, left menu, right menu, content dan footer. (lihat gambar 2)

3) Selepas melukis interface website, anda perlu pilih tools SLICE TOOLS (lihat gambar 2).


membina website menggunakan adobe photoshop
gambar 2

4) Selepas tekan dan pilih SLICE TOOLS, anda perlu mengikut semula design anda satu persatu, sebagai contoh (lihat gambar 3). 

membina website menggunakan adobe photoshop
gambar 3
5) Selepas anda mengikut langkah 4, anda perlu pilih dan tekan pada SLICE SELECT TOOLS (lihat gambar 4) dan tekan dua kali pada numbering slice yang anda telah buat di langkah 4.

membina website menggunakan adobe photoshop
gambar 4
6) Selepas menekan 2 kali pada numbering slice tersebut, anda akan mendapati popup slice option seperti paparan dibawah muncul. (lihat gambar 5), untuk melakukan hyperlink seperti menu interface website akuanda perlu memasukkan terlebih dahulu page name, sebagai contoh, utama.html  dan jika telah selesai anda perlu tekan butang OK . 
membina website menggunakan adobe photoshop
gambar 5
7) Selepas selesai proses menamakan setiap slice anda dan meletakkan url dan name, anda perlu ke FILE > SAVE FOR WEB & DEVICES. buat 1 folder, dan anda tentukan file name kepada index.html, save as type pilih HTML and image dan tekan SAVE. (lihat gambar 6)
membina website menggunakan adobe photoshop
gambar 6
8) Selepas langkah 7, selesai cuba view folder yang anda telah buat seperti di langkah 6, anda akan dapati paparan seperti di bawah. dan cuba view di browser anda seperti Internet explorer, chrome ataupun mozilla firefox. (lihat gambar 7 dan 8).
membina website menggunakan adobe photoshop
gambar 7
membina website menggunakan adobe photoshop
gambar 8
9) Jika anda view coding script di editor web tersebut, anda akan dapati name dan url yang anda telah tetapkan menggunakan SLICE SELECT TOOLS (lihat gambar 9), nampak tak kegunaan SLICE SELECT TOOLS ini? ada beza SLICE TOOLS DAN SLICE SELECT TOOLS ya. 

membina website menggunakan adobe photoshop
gambar 9
10) Selamat mencuba dan semoga berhasil. 

Anda Mungkin Meminati :

9 komentar:

  1. nampak agak susah di situ pakai ps buat website..
    dulu time belajar, ada buat gak nih, then import ke flash lak untuk kasik website gerak2..
    jomlaa memang oshem,

    BalasHapus
    Balasan
    1. Saya lagi prefer wordpress sebab senang sikit. tengok jomlaa macam sikit complicated dari wordpress kan?

      Hapus
    2. Bagi sy..joomla dan wordpress sama sahaja. Mudah! Cuma interface dan db..joomla mudah dan banyak

      Hapus
  2. boleh try buat ni...bookmarked jugak la

    BalasHapus
  3. aku reti guna tools utk transparentkan bground je kat photoshop. lain2 aku mmg fail kikiki

    BalasHapus
  4. baik guna blogspot. lagi sonanggg. hahahha

    BalasHapus
  5. mampu guna simple template je. haha

    BalasHapus

Sila gunakan bahasa dan ayat yang mudah di fahami dan sila guna nama yang sebenar, sebarang komen dari anonymous (TIDAK DI KENALI), akan di remove serta merta oleh penulis.

Tolong jangan meletakkan hyperlink (hidup) di ruangan komen. Untuk Mengelakkan dari Crawl Error atau Broken Link. Terima kasih, kerana memberikan pandangan, komen, kritikan dan teguran.

Akan ditambah baik dari semasa ke semasa, terima kasih.

PENAFIAN

Ini adalah Blog Peribadi Penulis. Penulis Blog tidak akan bertanggungjawab jika semasa anda melayari blog ini berlaku sawan,Mulut Berbuih, Kematian, Pengsan atau Sebarang Kecelakaan dan Penyakit Berjangkit. Segala kandungan artikel di dalam blog ini, adalah berdasarkan pada pengalaman dan idea penulis sepenuhnya, tidak menyalin artikel dari mana mana blog atau dari website sesiapa, Artikel boleh di ubah, mengikut situasi semasa, Terima Kasih