Posted by : jody baharizki Thursday, November 8, 2012


langkah awal dalam pembuatan web slicing adalah menentukan konsep mengenai tampilan website yang akan dibuat.
anda bisa membuat sketsa pada selembar kertas mengenai gambaran kasar desain yang akan anda buat di photoshop.


gambar diatas merupakan sketsa dari desain yang kita buat nanti.
langkah berikutnya

bukalah software photoshop :
  1. kemudian buatlah desain tampilan web sesuai keinginan anda. untuk desain yang saya buat menggunakan   ukuran 1361 x 2100 pixel. tentunya ukuran ini disesuaikan dengan kebutuhan 


tampilan photoshop

garis biru adalah hasil slicing kita


       2. gambar-gambar yang perlu di slice adalah gambar yang akan dijadikan link (yang memiliki event)
       3. setelah itu kita masuk ke FILE > SAVE FOR WEB maka akan muncul tampilan seperti ini



di bagian ini kita bisa menyesuaikan gambar sesuai kebutuhan yaitu besar kecil file yang kita miliki. klik SAVE lalu rubah jenis filenya dari .PSD ke .HTML
setelah selesai maka file akan menjadi HTML

dan klik file .HTML
kita bisa melihat hasil kita di Browser. kalian bisa menambahkan event CSSnya di bagian button, menu

script CSS bisa di ambil di http://thecodeplayer.com/walkthrough/simple-hover-effects-with-css3-filters


ini adalah contoh web slicing yang telah saya buat dengan tema INDONESIA TOURISM BOARD. semoga bisa menjadi  inspirasi buat anda










thanks for visiting my website #enjoy sharing and leave a comment :) thank's


@jodybaharizki
www.jodybaharizki.com


{ 6 comments... read them below or Comment }

  1. ada qaqa ghea sang master nih, makasi :D

    ReplyDelete
  2. biasanya kalok udah di slicing di PSD, terus di liat di browser itu kok ancur ya mas jadinya punyakku.
    kadang" ada space kecil bgt yg agak keliatan, solusinya gmna mas?

    Terima kasih :)

    ReplyDelete
    Replies
    1. iya sih masalah umum memang sering pecah gambarnya, solusinya yaitu ketika kita slicing dari gambar ke html harus rapi potonganya,
      tapi web slicing gini udah jarang dipake, lebih enak pake html5

      Delete
  3. ngomong-ngomong bos, itu gambar awalnya yang warna merah itu kugambarin mau gak? gratis lho, sekalian aku mau latihan ngerjain pesanan orang

    ReplyDelete

Psang Iklan?

Psang Iklan?
Klik gambar diatas

Like Us!

Youtube

\
\

Labels

Powered by Blogger.

Total Pageviews

- Copyright © 2016 Jody Baharizki -@jodybaharizki- Powered by Blogger -