Slicing and Optimising
|
|
| This tutorial will teach you how to slice up your whole completed canvas into adequate sizes which can then be optimised to save file size. Below is a cut out section of a sample site. | |
 |
|
|
(1) Once you have a completed canvas like the one above in Photoshop, click on the Image Ready icon on the bottom of the toolbar window. This will load up your canvas in Image Ready. |
 |
| (2) The main principle behind slicing is to group high colour images such as pictures and photos together and separate them from other lower colour images such as text and background. In the example provided, the high colour images would be the two girls on the left and also the thumbs on the top. The low colour images would be the text on the bottom right. | |
| (3) To start slicing, select the slice tool on the toolbar window. |  |
| (4) We usually start slicing from the left. One thing to keep in mind is to make sure the slices are consistent and systematic. This means that when slicing across, make sure that the row of slices have the same height so that it will be easier to create tables for them later. | |
| (5) Direct the mouse pointer so that it is at the edge of the top left corner of the canvas. Hold down the left click and drag across to the left. You will see yellow guide lines indicating the border of your current slice. Release the mouse and the first slice is done. In this example, the first slice is as follows: |  |
 (6)
The next slice will be from the edge of the first slice across to the right,
making sure the height is the same as the first slice. The second slice
is shown below. |
|
| (7) The third slice and fourth slices are shown below. | 
 |
| (8) Now, we have four different slices, first three which are high colour images and the fourth is a lower colour image. Next thing to do is to optimise each slice. Select the first slice and click on the optimized tab at the top. |  |
|
(9) For a high colour image, we select JPEG from the optimise window, check the optimized box and adjust the quality level appropriately. Usually, for a JPEG, we should not optimize below 40. Adjust the quality level until it suits you. All optimised images should not be too pixelated. |
 |
| (10) The filesize for that particular optimized slice and also the total
optimized filesize is shown on the bar below the canvas. |
 |
| (11) Similarly, repeat steps 8 to 10 for the second and third slice. | |
| (12) For the fourth slice which is a lower colour image, we optimise using GIF. For gradients such as the text in Slice 4, we will need to use more colours than if we had just flat colours. Again adjust the color in the optimize window to the lowest possible while still maintaining image quality. Gradients are usually set at 128 colours but you could go down to as low as 64 if there were only a minimal number of colours in your slice. For Slice 4, we shall set it at 128 colours. |  |
| (13) Finally, to preview your entire optimized design in a web browser, click on the windows explorer icon on the toolbar. |  |
Slicing Optimising
+1-888-298-6995
Blue.Design.Studios
7300738
