====== Slicing Web Pages ======
refer: 
http://helpx.adobe.com/en/photoshop/using/slicing-web-pages.html\\
http://thesiteslinger.com/blog/do-we-still-slice-psds/
===== Introduce about slicing web pages =====
==== Understand about slices ====
Slices divide an image into smaller images that are reassembled on a web page using an HTML table or CSS layers. By dividing the image:
      * you can assign different URL links to create page navigation
      * or optimize each part of an image using its own optimization settings.
==== How to export slices to images ====
You export and optimize a sliced image using the Save For Web& Devices command: 
  * Photoshop saves each slice as a separate file
  * And generates the HTML or CSS code needed to display the sliced image.
===== Overview about methods to use slice =====
==== When you work with slices, keep these basics in mind ====
  * You can create a slice by using the Slice tool or by creating layer-based slices.
  * After you create a slice, you can select it using the Slice Select tool  and then move, resize, or align it with other slices.
  * You can set options for each slice—such as slice type, name, and URL—in the Slice Options dialog box.
  * You can optimize each slice using different optimization settings in the Save For Web & Devices dialog box.
==== Slice Types ====
Slices are categorized by their content type ([[webdesign:htmloptionsforslices#specify_a_slice_content_type|Table, Image, No Image]]) and by the way they are created ([[webdesign:slicetool#create_a_slice|user, layer-based, auto]]).
Slices are created using different methods:
  * Auto slices are automatically generated.
  * User slices are created with the Slice tool.
  * Layer-based slices are created with the Layers panel.
=== user slices ===
Slices created with the Slice tool are called user slices. user slices are defined by a solid line
=== layer-based slices ===
slices created from a layer are called layer-based slices. layer-based slices are defined by a solid line
=== auto slices ===
  * When you create a new user slice or layer-based slice, additional auto slices are generated to account for the remaining areas of the image. In other words, auto slices fill the space in the image that is not defined by user slices or layer-based slices. 
  * Auto slices are regenerated every time you add or edit user slices or layer‑based slices. You can convert auto slices to user slices.
  *  auto slices are defined by a dotted line.  You can choose to show or hide auto slices, which can make your work with user-slices and layer-based slices easier to view.
===== Create a slice =====
You can use the slice tool to draw slice lines directly on an image, or design your graphic using layers, and then create slices based on the layers.
==== Create a slice with the Slice tool ====
  - Select the Slice tool . (Press the C key to cycle through tools grouped with the Crop tool.).Any existing slices automatically appear in the document window.
  - Choose a style setting in the options bar:
    * Normal:Determines slice proportions as you drag.
    * Fixed Aspect Ratio: Sets a height-to-width ratio. Enter whole numbers or decimals for the aspect ratio. For example, to create a slice twice as wide as it is high, enter 2 for the width and 1 for the height.
    * Fixed Size: Specifies the slice’s height and width. Enter pixel values in whole numbers.
  - Drag over the area where you want to create a slice. Shift-drag to constrain the slice to a square. Alt-drag (Windows) or Option-drag (Mac OS) to draw from the center. Use View > Snap To to align a new slice to a guide or another slice in the image. See Move, resize, and snap user slices.
==== Create slices from guides ====
  - [[webdesign:gridandguides#place_a_guide|Add guides]] to an image.
  - Select the Slice tool, and click Slices From Guides in the options bar. When you create slices from guides, any existing slices are deleted.
==== Create Layer-based slices ====
Layer-based slices are less flexible than user slices; however, you can convert (“promote”) a layer-based slice to a user slice. See Convert auto and layer-based slices to user slices.
  - Select a layer in the Layers panel.
  - Choose Layer > New Layer-based Slice.
==== Convert auto and layer-based slices to user slices ====
A layer-based slice is tied to the pixel content of a layer, so the only way to move, combine, divide, resize, and align it is to edit the layer—unless you convert it to a user slice.\\
All auto slices in an image are linked and share the same optimization settings. If you want to set different optimization settings for an auto slice, you need to promote it to a user slice.
  - Using the Slice Select tool , select one or more slices to convert.
  - Click Promote in the options bar.
===== experiences =====
==== How to know what the guides and slice types were created? ====
Slice Types:
  * User Slice: Blue Box
  * Auto Slice: Gray Box
==== Convert PSD to HTML ====
Basic Changes:
  - Step1: Save **PSD to PNG or JPG file**
  - Step2: Using tool to **get all color in PNG file**
  - Step3: Using **template with HTML layout and Javascript availabe** which suitable with the design, and **replace colors** in HTML with colors in PSD design
  - Step4: Change layout of template base on layout of PSD design
  - Step5: Using slice tool to **slice some images** in psd file
  - Step6: Update some images from design to images in template to finish the design
Other Changes:
  * Add some new HTML element base on PSD design
  * Add javascript to add some other effects for website