Use Of Slicing Tool In Photoshop

By Author: admec multimedia Institute
Total Articles: 1
Comment this article

Graphic / web Designers must have heard about Slicing Tool in Photoshop but what exactly is the purpose of Slicing Tool is might be not clear to some of its users. To know more about this I am describing its use below:
Photoshop Definition
It is an image editing software developed and manufactured by Adobe Systems Inc. Photoshop is considered one of the leaders in photo editing software. The software allows users to manipulate, crop, resize, and correct color on digital photos. The software is particularly popular amongst professional photographers, graphic designers, web designers, animators, and post production artists. As this program is very popular in other designing segments too, i.e. fashion designing, textile, interior, an architecture etc.
Photoshop for web designers
With Photoshop, web designers can easily create a website's layout using a set of vector based tools - different shapes, styles, gradients and masks are available. Once the website design is finished, Photoshop allows you to “slice” up your image for use in your website. Also, you can 'Save for web' all your. PSD projects in ...
... various web optimized formats including the popular .JPG and .GIF.
What is Slicing?
Slicing Tool as the name suggests it slices an image into sections, Sliced images are commonly used for web design work.
Image slicing is a technique for creating a web page (or a component of a web page, like a header or navigation menu) visually in Photoshop (Fireworks and Illustrator also allow us to slice images, too).
“Slicing” means that we’ll take layout image, and make smaller individual images out of it, which we can then insert into an HTML table. Using one large image as a website page could be a problem as it will take long time to download as such users won’t be impressed!
When we slice up a large image, we have the ability to optimize each section individually to make the total file size smaller. Also some slices are duplicated, so we need to only use one of them, which will in turn make the total file size even smaller and faster to download.

How slicing works?
1. First design a page in Photoshop exactly as we want it to look when it goes live on the web.
2. Secondly cut out all the page components—title bars, buttons, navigation menus, and so on—using Photoshop’s Slice tool.
3. Photoshop saves each slice as an individual graphic once we save everything out.
Advantage of Slicing
1. Slicing allows us to combine graphics and HTML in ways that let we stick close to our original layout.
2. Another benefit, often overlooked, is copyright protection of our images. If we have large image that we would like to protect, slicing them is a great way to protect them. In order for someone to take the image, they'd have to save each individual piece, combine it, and re-save it, resulting in lower overall quality. Slicing won't protect us completely, but it will discourage even the most determined image thieves.
3. To make small images out of larger images and improve download time.
4. To identify areas those are going to be HTML text.
5. To individually optimize areas of an image to the most suitable format.
Slicing in Photoshop vs. Slicing in Fireworks:
I want to focus on Fireworks slicing also because since Adobe has acquired Macromedia, it dropped out many programs but Fireworks is still in progress. While this program directly compete with Adobe Photoshop but Fireworks offers many unique and inno¬v¬a¬tive fea¬tures specif¬i¬cally for the task of cre¬at¬ing Web site lay¬outs and graph¬ics in an effi¬cient and flex¬i¬ble man¬ner, while in Photoshop the Slice Tool is used to divide a whole Photoshop image into smaller sections, The Slice Tool allows a designer to select a web-ready format for each image. FW makes slicing and exporting small parts of a composition simple. Fireworks slice tool is more intuitive, easier to use and packs all the functions you need for slicing and dicing in one spot as compare to Adobe Photoshop.
Read also:
If you like the above given article then surely you will like our other articles also, to read other articles click on the given link
http://www.admecindia.co.in/articles-animation-web-design1.html#blogs_articles

For more details:
http://www.admecindia.co.in
http://www.actionscriptinstitute.com
http://www.graphic-design-institute.com
http://www.postproductioninstitute.com