Slicing & Image Optimization

Transcription

1 Slicing & Image Optimization Why Slicing? We have to take that awesome design you created and have to get it into Dreamweaver somehow, we accomplish this through slicing. What is Slicing? Slicing is essentially breaking your website up into a grid using guides. We break it down into small images that are optimized for the web to bring into Dreamweaver. Why Optimize? We optimize to reduce file size, which in turn saves on the load time. Have you ever been to a website that loads too slow or takes forever to load if you have ever used a bad dial-up connection. Optimization is a way to eliminate these problems. How to Slice in Adobe Photoshop Open up your design you created in Adobe Photoshop Any area of your website that you need either click on to go to another page or any area that has image content will have to be sliced. Start by using guides to draw out a grid. This will make it much easier as we slice.

2 Above we have drawn out guides for where our slices should align to. Go to your left tool bar in Photoshop and click on the Slice Tool icon (it is one of the options as part of the Crop Tool). See image below.

3 Use the Slice Tool to drag out each one of your slices - this is where those guides we created comes in handy for aligning slices directly to your guides. The above image shows your slices. Slices in the image above are color coded: Blue Active user slices (these are the sliced areas you want to make images for. Gray Inactive user slices (you don t have to do anything with these)

4 Continue making as many image slices as you need to. Repeat the slicing process for each page on your website. Note: You only have to slice out your header, footer and navigation once as those elements stay the same from page to page. When done go to File > Export > Save for Web (Legacy) You will then see the following window:

5 Go to the 2-up view as this is where we are going to Optimize our slices (images) for our website. Optimize each slice one by one to be the best most appropriate file loading format through the tools on the right side of the screenshot above. See notes below on file formats: Determining File Types PNG Good for vector artwork, solid color areas and non-web-safe text, and areas that contain rounded corners that you want to be transparent so the background shows through.

6 JPEG Good for pictures GIF Areas that contain Gradients, Drop Shadows, Inner/Outer Glows, Feathering. File Size/Load Time Under 10 seconds is fantastic seconds is good, don t exceed more than 20 seconds. Resuming from Optimizing Slices When done optimizing your images press the Save button to then save your slices into your images folder.

7 You will then see the next window below.

8 Make sure to save Images Only for the format and All User Slices for the slices. Then click Save to save these into your images folder as part of your site folder. Note: If you don t select All User Slices you will end up with tons of slices you don t need such as all the grayed out slices that show up in Photoshop.

9 Go through and rename all of your slices to be a file name that makes sense to you so they don t look like the folder below. Example: Name them something like logo.png, receptionist.jpg, etc.