Safirul Amar Azmi Blog! Biznes Bakeri Baju Muslimah Kanak-kanak SKYTECH CREATIVE

Friday, December 19, 2014

Cara cara buat website di Adobe Photoshop

Adobe photoshop di gunakan untuk tujuan manipulasi gambar foto dan untuk tujuan editing image, dan dalam masa yang sama boleh di gunakan untuk membuat website antaramuka (web design interface) dan bagi tujuan pembinaan video.

Persoalannya, 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 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 bagi beginners dan memerlukan sedikit kemahiran coding html sekurang-kurangnya, dan jika anda ingin menampakkan kelihatan lebih dinamik, anda boleh memasukkan plugin tambahan seperti PHP J QUERY seperti calendar, tabbing menu, widget accordian listing dan sebagainya.

Untuk membina interface website, anda perlu menggunakan SLICE TOOLS.

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 . NOTA : anda perlu menamakan di ruangan RUANGAN NAME untuk memastikan anda mengenalpasti yang mana satu banner, footer, dan sebagainya ketika anda view source coding di Notepad mahupun di dreamweaver. (lihat gambar 5)

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, trial and error is the best practice

Aku sertakan contoh website aku buat dulu dulu, totally menggunakan Adobe photoshop dan campur PHP, javascript dan JQUERY plugins

Tekan SINI.

PENAT BUAT SATU SATU MACAMNI, AKU BUAT NI MASA LATIHAN PRAKTIKAL DULU DEKAT SEBUAH SYARIKAT IT....SEKARANG DAH TAK HERAN DAN TAK GUNA LAGI, SEKARANG NI KALAU AKU NAK BUAT WEBSITE, AKU GUNA TEMPLATE OPEN SOURCE DAN CSS TEMPLATE SEPERTI PLONE, JOOMLA DAN WORDPRESS JE...NAK LAGI BAIKK GUNA BLOGSPOT JE, HABIS CERITA...! HAHA..

9 comments:

  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,

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

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

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

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

    ReplyDelete
  4. baik guna blogspot. lagi sonanggg. hahahha

    ReplyDelete

Sila gunakan bahasa dan ayat yang mudah di fahami dan GUNA NAMA SEBENAR, sebarang komen dari ANONYMOUS (TIDAK DI KENALI) dan tidak berdaftar, akan di remove serta merta oleh ADMIN.

Tolong jangan meletakkan hyperlink URL di ruangan komen.

Terima kasih, kerana memberikan pandangan, komen, kritikan dan teguran.