Home > Features > Photoshop Slices for Newbies • Bookmark   • Newsletters   • Register Search Options

FEATURE

Photoshop Slices for Newbies

Photoshop Slices for Newbies

April 19, 2003
Text size: 
Get XBIZ News
XBIZ Research
Will virtual reality boost the paysite market?
Yes, it will soon
  39.66%
Yes, but in a few years
  36.87%
No
  23.46%
Out of 179 votes. Results based on votes submitted by members of XBIZ.net social network.

" In ImageReady you can perform additional functions such as mouseovers and animations. "

If you’re like Scotty then you build your entire design in Photoshop first, and worry about the HTML and other stuff later. For those unfamiliar with the techniques involved, or those wanting some inside tips, here’s our latest Photoshop tutorial:

Ok, so now you have an entire design ready to be turned into HTML. Starting with a flat image (just one big image), it’s time to cut it up into multiple images, or slices. This way we can add some user activity – such as mouse-over effects, creating links, and animation, as well as many other amazing features. But anyway, when you slice an image you’re actually taking that image and then creating additional images: think of it as a finished puzzle and each individual image slice as a piece.

The size and dimension of each slice, as well as the number of slices is all up to you. The main objects that I like to keep as separate slices are the title and each individual navigation item (also known as a link). It’s also a good idea to slice up high density areas of your image (where a lot of color and activity goes on). Now don’t get too carried away with over slicing (such as creating 500 individual slices all 1 pixel in width), because too much can make things even more confusing, however there is no limit (at least I haven’t hit a limit) to how many slices you can have. So now that you know a little bit about slices, it’s time to actually slice it up!

While in Photoshop (only Photoshop 7: if you’re using an earlier version you more then likely have to go to ImageReady to slice) open up your design and press K to select the ‘slice tool’. Click and drag out a box over your image to create a blue box with a number in the corner (this number is the slice number), this box is actually your second slice since the original image as one piece would be considered one slice. A handy shortcut to know while using slices is pressing CTRL+H key, this will Hide and then Show your slices each time it's pressed.

Once you have created all your slices, select the other slice tool (buried under the original). This is called the ‘Slice Select Tool’. Use this to select and modify each slice (size, attributes), you can also double click any slice to set linking URLs & other miscellaneous details (I usually save off on setting the URLs and such for the next step, mostly because I prefer the quicker interface ImageReady provides, rather then the annoying popup Photoshop uses).

Now it’s time to take our sliced up image and put it in HTML format; and rather than hand-coding this step, we will use ImageReady’s exportation method. First press the ‘Jump to ImageReady’ button (located at the bottom of the toolbar). Although you can export from within Photoshop, I would like you to get a feel for ImageReady so you’re ready to use it for my future articles.

In ImageReady you can perform additional functions such as mouseovers and animations (my next article will get into this). But for now, simply click File > Save For Web, select an optimization (graphic quality levels, reflects file size), then save as layout.html (or whatever you want) in its own folder (make a new one or use one of those empty ‘New Folders’ you have laying around on your desktop).

This exportation will automatically create an images directory (you can define the name of the directory it saves images to within ImageReady’s preferences). Export each individual slice as a separate image into the images directory, as well as generate the HTML table, or even a DHTML DIV layout (once again depending on your preferences).

Take it a Step Further…
Want to know how to put plain text on top of a slice? After exportation, open up the HTML code that Photoshop/ImageReady generated. Find the slice you wish to write plain text over. Now set the table’s <TD> background=" to the image SRC of our selected slice (example, layout_12.gif), also set width = to the same as the original image width and height= to the original image height (both displayed right in front of you within the <IMG> tag of slice 12). It’s also a good idea to set ‘valign=top’. Set this while still in the <TD>, and it will vertically align your text at the top. You can also set valign to bottom (for bottom vertical alignment), or nothing for center (or middle) vertical alignment. Then just simply input your text <TD> .*. > between here! <TD>, and delete the remaining <IMG> tag (with the original slice image name).

Now your flat HTML text will appear on top of your slice image. All we really did was take the slice image and rather then being an image convert it to the background image of the current table cell (<TD>).

One thing you need to keep in mind is that this is very basic, and if you overflow your area with more text than can fit; the background for this individual table cell will stretch, as well as all the other table cells on the same row… Either rework your text to fit within your boundaries, or stick around for my upcoming article which will go more into dealing with stretching backgrounds and mouseovers.

Slices have become a necessary method of designing Web sites, and to do it manually takes a great deal of time and precision, so instead use Photoshop or ImageReady to perform your slicing and exportation, and get to spend more time on more productive areas.

That about wraps it up! There is a lot of activity and jumping around taking place within this article (between Photoshop, ImageReady, and then into actual code), take your time, and explore your options; you may need to reference this article in the future, so now would be a good time to bookmark it! Any questions feel free to contact me at me@scotty.cc. Enjoy the Slices! Scotty


PROFILES & BIOS

Cam World: Q&A With Studio 20’s Andra Chirnogeanu

One of the blue-ribbon studios in the cam biz is Studio 20, which is now a global brand, with locations on both sides of the Atlantic — from Romania to Hollywood, Calif. Of course, with every strong... More »

Cam World: Model of Month Jenny Blighe Is Red-Hot

Have you found out about MyFreeCams sensation Jenny Blighe, the fiery Arkansas redhead? For the past four years, Blighe’s been camming on an almost-daily basis on MyFreeCams, building a loyal fan... More »

Justin Sayne Leather Expands Team, Gears Up for Eventful 2017

When Justin Sayne looks back on 2016, he will likely remember it as a year in which his Arizona-based company, Justin Sayne Leather, grew by leaps and bounds. Important new hires joined the company, Sayne... More »
XBIZ NEWSLETTERS
Stay informed of the latest industry developments. Get XBIZ newsletters delivered to your inbox. Subscribe today!
Enter email address:

* To manage existing subscriptions click here.






POPULAR PRODUCTS & SERVICES
Submit your press release to
multiple news outlets with 1 click.
Subscribe to RSS news feeds or
add free content to your website.
Access XBIZ news and articles
with your mobile device.
Subscribe to XBIZ World magazine, the industry's leading e-commerce trade publication, delivering in-depth coverage of the online, mobile and ancillary digital markets.

UPCOMING EVENTS

The European Summit

Mar 04 - Mar 07
Barcelona-Sitges, Spain

The TEA Show

Mar 05 - Mar 06
Hollywood, CA

Phoenix Forum 2017

Mar 23 - Mar 26
Tempe, Arizona

EXXXOTICA Denver

Mar 31 - Apr 02
Denver, CO.
Everyday thousands of business professionals browse XBIZ's industry directory for quality products and services. Not listed yet? Your company could be losing potential new business. Submit your company today!
Use XBIZ RSS feeds to stay informed of the latest industry developments or as a content syndication tool for your website!