Slicing Images for Optimization Using CSS
Step-by-step Instructions
In Photoshop:
- Take a screen shot of the image to be sliced (CMMD, SHFT, 3). The screen shot will automatically save as a PNG file.
- Open Photoshop.
- Click and drag screen shot into Photoshop.
- Press and hold Crop tool to locate the Slice tool in the Tools palette. (The Slice tool looks like a dagger.)
- Select the Slice Tool.
- Turn on Rulers (select View, Ruler or select CTRL+”R”).
- Click and drag a guideline from either the top or left-side Ruler.
- Surround that part of the image with guides where a slice is desired.
- Once all desired slices using guides have been created, click the oval-shaped Slices from Guides button in the toolbar at the top of the workspace. A numbered, blue icon for each slice will be revealed.
- Some slices may be need to be drawn. Use the Slice tool to click and drag a border around each desired area not already sliced. The numbering of slices will be changed to include the additional drawn slices.
- Combine like slices or similar areas to wind up with as few slices as possible.
- Choose the Slice Select tool and click the first section of the slice by clicking and pressing CMMD at the same time.
- To include additional horizontal areas to be included in the same slice, click, CMMD, SHFT simultaneously on each additional section you would like to combine into a single slice. The additional sections must be horizontal to the first selection and abut one another.
- Right mouse-click and select Combine Slices to create a single slice from the selected areas.
- Repeat the step of combining slices until satisfied with the sliced images.
Slices are ready to be optimized and saved.
- Select File, Save for Web & Devices.
- Select the Slice tool from the far, left toolbar.
- Slices are numbered with a blue icon. Select one slice at a time.
- Determine which file format and settings work best without artifacting (mottling) the slices. Obtain the best looking image while reducing the file size as low as possible. Repeat this step until all slices have been optimized.
- For photographs or areas with a good amount of detail and many colors, select JPG will be the best file optimization format. Set JPG quality to 51% and adjust until satisfied with the image quality and file size.
- For slices with fewer colors or solid colors select the PNG format.
- Select Save.
- On pop-up screen at Save As, name the file as “index.html.”
- Select file location at left-hand side of screen.
- At bottom, left of same screen, select New Folder. Name folder. Select Create.
- At previous screen, select Format: HTML and Images.
- At format: HTML
- At settings: Other
- At slices: All Slices
- At settings: Custom
- HTML
- Output: XHTML
- Formatting: Encoding: UTF-8
- Return to top of same screen; change HTML to Slices
- Generate: CSS
- Referenced: by ID
- OK
- Click and drag file (now an html file) to Firefox and TextWrangler
In TextWrangler:
- Select File, Save As. Input a new file name (preserve original file)
- At body style=
background-color:#__________
; in the code, change color code to white (#fff)
- Delete all code from and including
body style
to the end of the body to remove the autocoding generated by Photoshop
In the CSS section of the code:
- Input the universal reset code: * {margin:0; padding:0}
- Change the body background-color to white (#fff)
- Input and define each div by writing a width and height for the wrapper, header, nav, big-image and footer. Use the remaining Photoshop-generated coding to determine the measurements (i.e., for wrapper, use the Table width and height listed at #Table_01 of the code). Make sure the Photoshop-generated table numbers match the proper div
- Review the page in Firefox
- Once all widths and heights for each div have been input, the HTML page in Firefox will appear as a blank white page
- In Firefox at the Web Developer toolbar, select Outline, Outline Block Elements. Lines outlining the wrapper, header, nav bar, big-image and footer will appear.
In TextWrangler:
- To ensure borders stay apparent, in the CSS section, type: "code: div {border: 1px red dotted}"
- At header (specifically, the gradient background and logo area)
- In nav areas will be clickable (put as img src=_______________)
- Green will be bkground image
- Footer will be bkground image
In Photoshop:
- Marquee tool, single row, click area and get entire gradient, cmmd-c, cmmd-n, name, cmmd-v (1 pixel gradient)
- Save for Web & Devices; jpg 51qual; save; format: images only; folder (images); image will go into header (textwrangler)
- #header (width; heith; bkground-images: url{images/name of file.jpg}
- Save (Review it in Firefox) (image will have repeated)
- Do same for other nonclickable images;
In TextWrangler:
- Remove all CSS info
- Inside nav div, put img src=images/name of nav bar info – put width and height in, too and the alt text (
College Credit & Degrees
)
- Add other 2 right behind the first by copying and pasting the first and changing info
- Wrap them into href tags to make them clickable
- Add logo to the header div img src=images/name of file width, height and alt text = tri-c logo self close with img tag
- Move logo away from edge (in textwrangler), make a class: .logo top {margin: 20px; margin top: 20px (assign to image source #4 in html in header div: class=”logo=#top
- Delete the red border by deleting div {border: 1px red dotted} in the CSS style area.
Additional Class Assignments