WWW.THEDILLDESIGN.COM

By Chris Dill

Splicing images for web design is an important function that has several benefits for website architecture. It usuallytakes additional software program not bundled with Windows or Mac – at least, not if you want to splice images onanything other than a basic level. A few of the programs used for this are Adobe Photoshop, Fireworks and AdobeIllustrator; with Photoshop being the most popular.

Splicing Images – The Photoshop Method

When you splice images for web design, there’s no need to tryand gauge how the end result will look beforehand; first, lay thetemplate down. The changes are best made afterward, when youuse the Slice Tool in Photoshop to snip off the menus, title bars,image-rich headers and other page components. Make sure yousave these (Photoshop makes it easy) so you can easilyre-render them on the finished image.

The next step involves setting the width by height dimensions ofyour intended image, so that you can fill it up with spliced buttons,headers, logos etc. Keep in mind that the completed image willserve as a background for your website; text must be readable so avoid contrasting colors. If you’re using a softwareprogram like GIMP, then cut and drag images onto the layout. In Photoshop, you can use Adobe Illustrator to createthe 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 insertinto natural image breaks in your design. It’s up to you where you use the image slice, but natural breaks in the imagetend to render better – unless your Photoshop skills are top-notch and you can blur mismatches or use the CloneStamp tool expertly. For help, use the Zoom tool to increase your precision and accuracy in image slicing. Whenyou’re finished, save the file with the appropriate extension and then open it in the browser of your choice as anHTML file to see how it looks.

Remember, Photoshop isn’t the only graphics editor that can accomplish image-splicing for web design; as long asyour graphics editing program of choice has a “Slice” tool in the Tools folder – it’s usually shaped like a scalpel orknife – then image-splicing can be accomplished.

Benefits of Splicing an Image

In web design, almost every professional uses image splicing. The host of benefits itconfers includes the following:

useful for loading images in parts, instead of using massive resources to load a hugeimage 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 differentwebsites; this can be very good for SEO, for example

PrintFriendly.com: Print web pages, create PDFs http://www.printfriendly.com/print/?source=site&url=https://thedilldesign...

1 of 2 10/28/2014 7:12 AM

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 limitedto 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 athttps://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.

PrintFriendly.com: Print web pages, create PDFs http://www.printfriendly.com/print/?source=site&url=https://thedilldesign...

2 of 2 10/28/2014 7:12 AM