The Photoshop slice tool allows you to divide an image into smaller pieces which are easy to use on the web. “Step-by-Step Creating a Website Guide: Chapter 5” focuses on how to slice your mock up design image file. I usually use Fireworks to slice, but since we used Photoshop on this guide, I’ll use Photoshop. Are you ready?
Step-by-Step Creating a Website Guide: Chapter 5
- Goal: Slicing a mock up design image into smaller pieces to use on your website easily
- Things you need: Adobe Photoshop
- Knowledge Requirement: Knows how to use basic Photoshop tools
Table of Contents
- Planning a Perfect Website Content
- Visualize Website Structure – Sitemap
- How to Create a Website Wireframe
- Photoshop Website Design Tutorial
- Slicing Images for Your Website with Photoshop ←We are here!
- Guide to HTML Semantic Markup
- Basic Process to Apply CSS to Your Website
- Let’s Publish Your Website to the World!
* It’s used Photoshop CS6
How Will Images Be Displayed?
There are basically two ways to display images on your website. One of them is using img tag on HTML. We’ll use this way to display images which are considered to be vital to build a website like photos or a logo image. Another way is using CSS. CSS will help to display images to decorate a website. Background images or list marker images will be used this way.
Styling without Images
You can apply gradient colour, rounded corner or drop shadow using new CSS technology: CSS3. For example, this gradient background is not used image.
It will be a good idea to think if your website is not needed to use images or not before you slice.
How to Slice Background Images?
That depends on how you want to display. Check out how it will be repeated.
Slice images as small as you can.
7. Format: Images Only, Slices: Selected Slices and save them. “images” folder is created under the folder that you choose.
Sometime you have to slice over 50 images, so make sure name clear file name in order to organise them easily.