Slice « Tools « Photoshop Tutorials

Home
Photoshop Tutorials
1.3D
2.Animal Creature
3.Animation
4.Background Cover
5.Color
6.Design
7.Effect
8.Hardware
9.Holiday Event
10.Human
11.Image Format
12.Logo
13.Nature
14.Object
15.photography
16.Shapes
17.Text
18.Textures
19.Tools
20.UI Controls
21.Web
Maya Tutorials
3ds-Max Tutorials
Illustrator Tutorials
GIMP Tutorials
Photoshop Tutorials » Tools » Slice 
In this Tutorial, I will show you the technique of slicing using The Slice Tool. There are 3 techniques available for slicing images in ImageReady. A quick look at the Menu displays the available methods. (Right-Click on this Menu bar below and Save Picture As...).

Let us begin with the slicing tutorial. We need to slice the layout to save the necessay images in web format and use them in html. Click here to view the layout we are using on our 4 part tutorial on creating a website. Follow these steps to slice your layout.

Learn how to make slice based rollovers in ImageReady CS.

First, we know, that we want to keep "Menu" text Anti Aliased. That means, that the text will be a graphic. Top rouded corner will stay too. We take first separator line too. That will be our first slice (1). Next we want our menu to be resizable, we will use 1 px height strip - second slice (2) (CSS have repeat-y value). We don't need a graphic for "bullets" because we can make them using CSS (border-left) We do need separator strips, we will use 1 px x 2px rectangle, because CSS have repeat-x value - our third slice (3). Next thing is bottom part with rounded corner - fourth slice (4). Last thing is hoover effect. We don't need whole hoover gradient, just 1 px height strip (Again CSS will allow us to repeat-y this strip) - final fifth slice (5)

Screening the 1985 Classic Film "The Goonies".

Step 2: Insert images and text

Preview full size layout

w__ww___.___j__av___a__2s.___c__o___m__ | Contact Us
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.