This document discusses splicing images for web design using Photoshop. It explains that splicing images allows dividing a single image into multiple parts that can each be loaded separately, reducing file size and improving load times. The key steps are laying out the template, slicing the image into natural breaks using the Slice Tool, and saving it with the appropriate file extension to view as an HTML file. Splicing images provides benefits like partial loading, greater control over loading for slow connections, and ability to hyperlink different image parts. Photoshop is a popular program for image splicing but other editors can also be used if they contain a Slice tool.

1. WWW.THEDILLDESIGN.COM

2. PrintFriendly.com: Print web pages, create PDFs http://www.printfriendly.com/print/?source=site&url=https://thedilldesign...
By Chris Dill
Splicing images for web design is an important function that has several benefits for website architecture. It usually
takes additional software program not bundled with Windows or Mac – at least, not if you want to splice images on
anything other than a basic level. A few of the programs used for this are Adobe Photoshop, Fireworks and Adobe
Illustrator; with Photoshop being the most popular.
Splicing Images – The Photoshop Method
When you splice images for web design, there’s no need to try
and gauge how the end result will look beforehand; first, lay the
template down. The changes are best made afterward, when you
use the Slice Tool in Photoshop to snip off the menus, title bars,
image-rich headers and other page components. Make sure you
save these (Photoshop makes it easy) so you can easily
re-render them on the finished image.
The next step involves setting the width by height dimensions of
your intended image, so that you can fill it up with spliced buttons,
headers, logos etc. Keep in mind that the completed image will
serve as a background for your website; text must be readable so avoid contrasting colors. If you’re using a software
program like GIMP, then cut and drag images onto the layout. In Photoshop, you can use Adobe Illustrator to create
the images you want, define them as Smart Objects, and then drag them onto your web design template.
This is where the Slice tool takes over, for the most part. After you click and drag a lined box around your design,
you’ll be presented with more options. Divide the image in any way you want (use the Divide Slice option) and insert
into natural image breaks in your design. It’s up to you where you use the image slice, but natural breaks in the image
tend to render better – unless your Photoshop skills are top-notch and you can blur mismatches or use the Clone
Stamp tool expertly. For help, use the Zoom tool to increase your precision and accuracy in image slicing. When
you’re finished, save the file with the appropriate extension and then open it in the browser of your choice as an
HTML file to see how it looks.
Remember, Photoshop isn’t the only graphics editor that can accomplish image-splicing for web design; as long as
your graphics editing program of choice has a “Slice” tool in the Tools folder – it’s usually shaped like a scalpel or
knife – then image-splicing can be accomplished.
Benefits of Splicing an Image
In web design, almost every professional uses image splicing. The host of benefits it
confers includes the following:
useful for loading images in parts, instead of using massive resources to load a huge
image file
gives greater control over image loading for slower internet connections
for several different reasons, you may want the separate parts of a spliced image to hyperlink to different
websites; this can be very good for SEO, for example
1 of 2 10/28/2014 7:12 AM

3. PrintFriendly.com: Print web pages, create PDFs http://www.printfriendly.com/print/?source=site&url=https://thedilldesign...
When searching for image editing programs, the single crucial property you should look for is raster graphics editing.
The quality and abilities of programs vary, but without this base ability, your web design image program will be limited
to cut-and-paste.
Do you have any tips or tricks you would like to share and feature as a guest blogger? Go to
to start a dialog.
IMAGE CREDIT
http://www.c-sharpcorner.com/UploadFile/da6585/crop-and-slice-tools-in-photoshop/
About the author
Christopher is a web developer, designer, and SEO specialist. He runs a SEO specific company at
https://www.virginiaseo.org and really enjoys design and marketing.
October 25, 2014
October 10, 2014
September 7, 2014
August 24, 2014
July 14, 2014
July 9, 2014
Copyright The Dill Design, LLC.
2 of 2 10/28/2014 7:12 AM