First of all, here is an excellent tutorial:
We will use Photoshop to slice parts of our designs, then we will choose the correct format for each slice using the Save for Web and Devices panel.
The goal is to create the most effective images while making sure you save all possible file size. If your images are huge in size, they will not load effectively for users with slower connections.
The formats you will be using:
This format is used for images containing tonal ranges: photos are much more effective when saved as JPEGs. When an image is saved this way, the information is compressed down, so JPEG is called a lossy format. Some information from the original is lost and cannot be recovered from the resulting jpeg. We will go over the differences in compression in class, but just know that you have a lot of control over the amount of compression that will occur.
This format is a bitmapped format: data is saved about each pixel. You have an available palette of 256 colors, so you can’t save gradients and photos of great complexity without noticing a huge difference. You can create transparent images with gif, although they are primitive and chunky. You can also make animated gifs.
The latest format to come into use. I use PNG-24s as they are able to be fully transparent. It will eventually replace the gif entirely if they can create an animated PNG.
Getting Your Files ready for Coding
So you have a set of finished files, right? Designs you created using a grid, clean and clear…
- Print out your homepage design.
- Using a pen or pencil, try to break your site up into the divs it will need to be— header, sidebar, navigation, footer, etc.
- Decide what will be code and what will be image. Blocks of text should be coded in, for instance, and special fonts need to be saved out as images and brought in later.
Saving Images for the Web with Photoshop
- Open your file in Photoshop.
- Turn off all layers that do not need to be image.
- Decide what you want to be your background image, if any
- Using the slice tool (Under the Crop tool, or Shift C), slice your image up into the necessary chunks. We will do a demo of this in class.
- Go to File >> Save for Web and Devices.
Using the optimizing menu, choose the format that best saves your image using the least amount of file size.
- Save your optimized files in the images folder of your file structure
Bringing it all together in Dreamweaver
- Create a proper file structure: a folder with 2 folders within it named docs and images.
- Open a new html file and name it index.html.
- Create a style sheet and name it styles.css. Save it in the docs folder.
- Bring in all of the text for your index page and format it with semantic HTML, as we have been doing in class.
- Refer back to the charts you drew on top of your design. Start chunking the formatted content up into the proper divs, being careful to give each div an id or name.
- Using css, format the page so that it is structured properly — center it, get the width of the site down, add background colors as needed.
- Now it’s time to bring in the images you created in Photoshop: drop the background image in the wrapper div, add your header image to the header.
- Go over the site again, tweaking your styles to get the site looking as much like your design as possible.