Jump to content
Abd Axiim

Pertanyaan Psd To Html (teknik Slicing)

Recommended Posts

Salam,

Ada tak sesiapa tahu bagaimana nak percepatkan speed web site setelah menggunakan cara slicing dan eksport ke Dreamweaver.

Secara ringkasnya proses kerja adalah sepertti berikut :

1) Design dalam Photoshop
2) Slice
3) Save for web
4) Buat table
5) Masukkan sebagai image background

Kesannya web akan slow bila dibuka, atau cara ni salah sebenarnya ya?

Ada tak cara untuk mempercepatkan?

Ada sesiapa yang boleh membantu saya? Contoh web yang direka http://www.1stopmuslimhomestay.com.my

Share this post


Link to post
Share on other sites
proses slicing nih setahu aku nak percepatkan load gambar... dari gambar yang besar tuh kita keping2 kan jadi potongan kecil jadi load lebih cepat.... tak pasti nape ko nya lambat.. internet ko slow ke..???

Share this post


Link to post
Share on other sites
cuba tengok versi yang ini pula, http://www.nakhodaseafood.com

yang ini pun gunakan slicing juga, tapi masih perlahan. Internet aku ok je taklah laju atau perlahan sangat. Tapi ada yang kata perlahan bila dibuka berbanding laman web lain. Yup mmg salah satu tujuan slicing adalah utk load bagi cepat tapi mungkin sebab tersalah cara masukkan ke dreamweaver ke dia jadi perlahan?

Ada yang mencadangkan gunakan PSD > CSS betul kah?

Share this post


Link to post
Share on other sites
CSS... abis ko guna apa kalau tak guna CSS.??

aku dah buka web ko memang lambat.. aku rasa 1 sebab ko salah slice... Edited by akuccputsedut

Share this post


Link to post
Share on other sites
Salah slicing rasa. Aku dah bukak. Memang laju je dekat side aku. Tapi yang aku perasan web tu content dia mostly dari imej kan? Hanya navigation belah kiri yang hyperlink je baru coding.

1 lagi ko tak guna CSS kan. Image yang ada aku tengok code directly dlm HTML. So susah sket nak utilize betol2 slicing nie kalau tak guna CSS.

Slicing mostly target repetitive part of img yg ade dlm web tu. So kalau guna CSS juz pakai x-repeat, y-repeat dah boleh dapat sebahagian besar background dlm web page tu dari load the whole image dalam 1 masa. Teknik slicing aku tak tahu sangat tapi aku mostly mmg target background yg repeat2 ni then guna CSS untuk repeat2. Yang dlm kotak merah dlm image kat spoiler tu antara tempat yang boleh dislice kan image die pastu repeat guna CSS. Tunggu abg2 dan kakak2 yg hebat dgn slicing ni jawab. Aku ni beginner jugak. :P

Try [url="http://net.tutsplus.com/articles/news/slice-and-dice-that-psd/"]LINK[/url] ni maybe boleh tolong.

[spoiler][url="http://imageshack.us/photo/my-images/404/sajianmenu13.jpg/"][img]http://img404.imageshack.us/img404/1411/sajianmenu13.jpg[/img][/url]
[/spoiler]

Share this post


Link to post
Share on other sites
[quote name='akuccputsedut' timestamp='1324364273' post='1077355']
CSS... abis ko guna apa kalau tak guna CSS.??

aku dah buka web ko memang lambat.. aku rasa 1 sebab ko salah slice...
[/quote]

Memang tak guna CSS, just slice dr Photoshop dan tampal di Dreamweaver guna table dan set sebagai image background. Ada tutorial mudah CSS untuk beginner tak? memang minat sangat buat web cara slicing.

[quote name='ahaksz28' timestamp='1324368365' post='1077356']
Salah slicing rasa. Aku dah bukak. Memang laju je dekat side aku. Tapi yang aku perasan web tu content dia mostly dari imej kan? Hanya navigation belah kiri yang hyperlink je baru coding.

1 lagi ko tak guna CSS kan. Image yang ada aku tengok code directly dlm HTML. So susah sket nak utilize betol2 slicing nie kalau tak guna CSS.

Slicing mostly target repetitive part of img yg ade dlm web tu. So kalau guna CSS juz pakai x-repeat, y-repeat dah boleh dapat sebahagian besar background dlm web page tu dari load the whole image dalam 1 masa. Teknik slicing aku tak tahu sangat tapi aku mostly mmg target background yg repeat2 ni then guna CSS untuk repeat2. Yang dlm kotak merah dlm image kat spoiler tu antara tempat yang boleh dislice kan image die pastu repeat guna CSS. Tunggu abg2 dan kakak2 yg hebat dgn slicing ni jawab. Aku ni beginner jugak. :P

Try [url="http://net.tutsplus.com/articles/news/slice-and-dice-that-psd/"]LINK[/url] ni maybe boleh tolong.

[spoiler][url="http://imageshack.us/photo/my-images/404/sajianmenu13.jpg/"][img]http://img404.imageshack.us/img404/1411/sajianmenu13.jpg[/img][/url]
[/spoiler]
[/quote] Thanks bro, aku try belajaq CSS tengok mcm mana. Memang perlu fix masalah lambat load ni..

Share this post


Link to post
Share on other sites
Haa. Good Luck. Power CSS ni. Since ko memang buat website so CSS memang knowledge yang perlu tahu. Avoid guna styling dekat HTML. Buat styling dekat CSS je. :)

Share this post


Link to post
Share on other sites
Web company aku pun aku guna teknik slicing, tapi banyak dah optimize size bila save for web, kesannya imej akan nampak noise sedikit. Tapi masih kurang laju. Ini contohnya [url="http://www.pixiestudio.com.my"]http://www.pixiestudio.com.my[/url]

CSS ni perlu coding ke? Coz aku ni bidang terjun memang tiada basic coding, hanya tahu guna Dreamweaver mode design sahaja. Btw, memang menarik CSS ni untuk dipelajari.

Thanks bro. Apa2 yang kurang atau boleh ditambah dalam web aku harap sangat dapat memberi komen/pendapat.

Share this post


Link to post
Share on other sites
Ok memang ada noise. Pemilihan format untuk image yang nak save kena care jugak. JPEG memang bagos untuk compressed size image. Tapi tak boleh pakai sesuka hati.

Bagi aku JPEG untuk gambar orang or gambar view yang amik dari camera. Untuk design or art yang lain aku prefer PNG tak pon GIF.

So yang aku tengok pecah2 tu mostly format JPEG untuk design element. So memang tak padan. Untuk design element or art, drawing etc better guna PNG pasal die mmg lossless compression punye type.

Untuk speed browsing tu aku tak bape sure pasal aku bukak laju je. Tapi lambat maybe sebab Flash content kot. Maybe boleh ganti dengan jQuery untuk capai animation macam Flash tu.

CSS tak la coding sangat tapi still ada sikit. Attribute untuk CSS ni memang banyak tapi mostly rasa ko akan ingat once ko dah biasa guna CSS ni. Aku pon tak hafal2. Still perlukan rujukan cemane pon. :P

Share this post


Link to post
Share on other sites
better ko guna CSS and repeat picture tuh... picture guna PNG laa... buku tuk beginner aku takde.. sebab aku pung belajar main redah ajer.. takde belajar kat sekolah..... aku pondokkan aje diri sendiri... hihihihihi.... ko slice salah... ko kena research skit cara slice web... aku ada belajar dulu.. tapi dah lama tak buat... ingat2 lupa..

Share this post


Link to post
Share on other sites
tips nak speedkan website :
1) guna full css coding
2) elakkan guna table untuk design page..guna div tag
3) mcm ciput ckp, klu image2 yg boleh direpeat, repeatkan...jgn buat fullsize image
4) structurekan coding html
5) klu bnyak guna image...boleh compress guna [url="http://www.smushit.com/ysmush.it/"]yahoo smush it[/url]

bnyak faktor yg buatkan website kite lmbab... hosting@webserver pn kna ambik kira jgk :)
selamat mencuba

Share this post


Link to post
Share on other sites
[quote name='john pozy' timestamp='1325552446' post='1077979'] tips nak speedkan website : 1) guna full css coding 2) elakkan guna table untuk design page..guna div tag 3) mcm ciput ckp, klu image2 yg boleh direpeat, repeatkan...jgn buat fullsize image 4) structurekan coding html 5) klu bnyak guna image...boleh compress guna [url="http://www.smushit.com/ysmush.it/"]yahoo smush it[/url] bnyak faktor yg buatkan website kite lmbab... hosting@webserver pn kna ambik kira jgk :) selamat mencuba [/quote]
ikut ckp bro ni. better ko balajar psl website full css dari belajar nk slicing ;)

Share this post


Link to post
Share on other sites
Slicing nie zaman dulu2 punya style. Time memory PC/Server tak banyak.
Slicing akan menambah beban File Header (dan Magic numbers) [url="http://digitalspine.blogspot.com/2011/12/digital-file-signatures-magic-numbers.html"]http://digitalspine.blogspot.com/2011/12/digital-file-signatures-magic-numbers.html[/url]
Kalau ada 1 file potong 10, maka intstead of 1 file header, akan ada 10 file header.
Kalau potong 100.. ada 100 file header.
Pastu nak kena tambah extra codes kat html/css/etc. Membesarkan lagi source file tersebut)

Konsepnya camni. Ada sorang dak kurus x cukup makan (ko punya PC yg tak power). nak bawak barang besau x larat. So potong-potong-potong aa.. bawak/ambik sikit sikit.. oleh kerana dia kurus. fbarang yg dipotong-potong yg dah ambik tu simpan kat umah (cache kat harddisk)

Ada lak budak yg gagah perkasa (PC ko yg power dgn OS terkini). Dia boleh angkat barang tu ngan skali jalan. X yah ulang alik banyak kali. Bila org nak search image pun senang. Search engine pun senang nak carik berbanding degan image yg dah di slice pastu taruk nombor2 slice yg x bermakna utk org lain.

Mcm member2 yg lain dah ckp. Baik ko blaja CSS.

Share this post


Link to post
Share on other sites
Salam, aku dah bukak web tu.. ok ajer kat tempat aku,
cuba ikut nasihat kawan2 tu, mereka tu semua pakar dalam bidang masing2... :42: heheh

penerangan yang cukup baik untuk dikongsikan ... :35:

Share this post


Link to post
Share on other sites
slice and save as image & html dari psd memang memudahkan keja.
tapi tersangatlah banyak keburukan dia.
Contoh : susah nk maintain/amend/modify compare guna styling css.

aku penah jadi beginner css ni. level kawan aku penah prepare file tuk aku study.
Alhamdulillah. skrg boleh lah.
nampak cam complicated tapi super simple.

introduction css ni.
dia ade 2 jenis.
1- inline css (not advisable but helpful for some situation.)
2- external css (best practice).

skrg level advance css ni ade plak responsive website.
css yg boleh flexible ikot kebesaran window user bukak ;)

zaman flash pun x brape nk ader dah (penah jgk jadi flash programmer).
user wise baik guna jquery. which is takkan ade issue kalau user xde flash player/ flash player version issue.

klo guna css. banyak menda akan jadi html.
fonts dan lain-lain. tu yang membuatkan page tu senang nak load (x berat).
contoh aku bukak [url="http://www.1stopmuslimhomestay.com.my/contact_us.html"]http://www.1stopmusl...contact_us.html[/url].
frankly speaking. aku x ske klo page sume image. bayangkan kalau orang nk amik address tu.
Confirm kene type balik. tau kan kenapa.. ? sebab address tu dalam image.
by logik orang nk copy/amik address tu copy and paste je and letak kat mane2..same jgk telephone tu. (marketing wise. xbesh buat cmni. menyusahkan user).
satu lagi.. contact form better ade form yg user boleh hantar email. which more selesa untuk orang bertanya dan jugak org ditanya.
guna phone je. kalau phone tu is not contactable cmne?

since page ni tuk org sewa bilik kan.. pe kata ko letak je jadual/kalendar tuk orang tau availability tempat ni :)

More marketing wise : try guna/letak google analytics. mcm-mcm cara nak market kan website ni. google anlytics salah taunye :)

User Wise :
tak highlight pun user berada kat page mane. sib bek page sket. xde lah user 'sesat'. kalau ade mesti lagi cun website ni ^_^

jugak seperti nasihat diatas. type of image masa save as jugak penting.
kene idenity mane perlu guna as jpg. bile masa nk guna png/gif.

Sekian.
Yang Buruk Datang dari Diri Aku sndr.
Yang Baik Datang Dari Tuhan.
Moral. (amiklah papeyg baik. ygburuk tolak tepi). Edited by anysah

Share this post


Link to post
Share on other sites
panjang lebar anisah nya komen.. hahahhaa... tapi kawan kita nih tanya camne nak bagi image dia kuar laju.. bab dia nya image kuar lembab...

tuan punya thread nih pung ntah pi mana... ntah dah expert CSS kot.. hihihihi...

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Similar Content

    • By coisox
      Keperluan: Photoshop or Illustrator
      Advantage: HTML, CSS
      Lagi Advantage: Bootstrap, jQuery Mobile, Liferay
       
      Lokasi: Bandar Tasik Selatan
      Company: Please PM
       
      Others:
      Fresh graduate digalakkan Malay company Email to [email protected] Whatsapp to 019-2105856 Nak pakai segera. Lagi bagus jika tak perlu 1 month notice
    • By anysah
      Mencari Job/project freelance berkait dengan web development/game development.

      Skilset seperti dibawah :
      HTML
      CSS
      JQUERY
      ASP
      PHP
      MYSQL
      MSSQL
      SEO
      FLASH ACTION SCRIPT
      FLASH ANIMATION

      sape-sape ada job please do not hesitate to contact me : [email protected] (YM/Email).

      Terima Kasih.
×
×
  • Create New...