Slicing Images for Your Website with Photoshop

thumb_slice

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

  1. Planning a Perfect Website Content
  2. Visualize Website Structure – Sitemap
  3. How to Create a Website Wireframe
  4. Photoshop Website Design Tutorial
  5. Slicing Images for Your Website with Photoshop ←We are here!
  6. Guide to HTML Semantic Markup
  7. Basic Process to Apply CSS to Your Website
  8. Let’s Publish Your Website to the World!

* It’s used Photoshop CS6

How Will Images Be Displayed?

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.

The background image will be repeated only horizontally.

The background image will be repeated only horizontally.

The background image will be repeated only vertically.

The background image will be repeated only vertically.

The background image will be repeated both vertically and horizontally.

The background image will be repeated both vertically and horizontally.

Slice images as small as you can.

Let’s Slice!

Create a new folder

1. Create a new folder on your desktop. We’ll use this folder from here on this guide.

Photoshop and select Slice tool

2. Open a design file on Photoshop and select Slice tool.

Drag over the area

3. Drag over the area where you want to create a slice.

Edit Slice Option

4. Right click on the area that you sliced and choose “Edit Slice Option” and name it.

Save for Web

5. Slice all images in the same way. Hide layers if you need. When you finished to slice all images, select “Save for Web” from File menu.

Slice Select tool

6. Select all images that you need using Slice Select tool + Shift. And click on “Save”

save
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.

» Next chapter: Guide to HTML Semantic Markup

Share

Comments