PDA

View Full Version : Chopping the images like mince


Coldblackice
06-07-2008, 08:43 AM
I've been messing around with pages and have noticed that many web pages graphics are chopped into pieces. For example, a header banner up top may actually be three separate images.

Is this standard? What's the point?

And finally, is there a way to do this in dreamweaver, or do you have to manually cut your images up in photoshop? (I hope not..! :)

davidj
06-07-2008, 08:55 AM
its done in Photoshop

Designers mock up a site in Photoshop as an image and slice it up for use in a site. you slice an area for navigation and an area for content and banners then you export this out in a table or CSS layout and import into Dreamweaver where you start coding it up.

Coldblackice
06-07-2008, 09:19 AM
Ahh, makes perfect sense. Thanks Dave.

Now is this done manually in photoshop or is there a function that communicates this exportation?

In other words, to replicate this, do I just make a block image, then cut it up into pieces and save them as their own files, then reimport piece by piece?

I smell that someone has probably put this into a tutorial on google somewhere, but can't think of keywords to find it...?

Coldblackice
06-07-2008, 09:21 AM
Found the tuts :) Thanks

http://www.absolutecross.com/tutorials/photoshop/basics/image-slicing/
http://www.killersites.com/blog/2007/psd-to-web-page/

davidj
06-07-2008, 09:34 AM
no tutorial as its simple

OK in Photoshop after you have sliced it up, whether thats manually or by using the 'Create slice from layer' function, you can setup photoshop to export the layout as an HTML table or CSS style. photoshop will export all images and also create an HTML page and the CSS style sheet into a directory which dreamweaver looks at. Then close photoshop and start adding your jiggery pokery in dreamweaver.

Coldblackice
06-07-2008, 09:42 AM
even easier. thanks man!

Rob_Che
06-07-2008, 11:03 AM
I cut mine up manually... each to their own...

Many designers used to do this to save on loading time (keeping the image files small) but in today's world connection speeds are much improved so it's unlikely you would need to cut an image up just because you should.

The only reason I slice an image these days is if it's crossing over into another <DIV> or a section requires a 'behaviour' of it's own.

davidj
06-07-2008, 11:45 AM
when I used to work for a design house the graphic guys would layout a design in photoshop and print it to show the client. Maybe 3-4 designs would be presented this way. Once agreed the slicing would begin. Even areas that had been agreed on of being HTML content would be sliced and its those images, once in dreamweaver, would be discarded (deleted) leaving a nice empty div or td to fill with content

banners sometimes contain buttons so these buttons need slicing if your wanting to do any fancy rollovers. Even dropdowns would be replicated in photoshop but an image of a dropdown field is as much use as an ashtray on a motorbike so those areas would get the slice treatment and the image would be discarded for a working dropdown

etc

Rob_Che
06-07-2008, 11:53 AM
Good description DJ.

In the same way that when I send someone a site mock up I'll show it in a browser surround to show how it will look on screen (unless I'm putting it online...)

davidj
06-07-2008, 11:58 AM
right

the art guys would print concepts on quality paper and then mount the designs and ring binder them. This they would give to client once they agreed on a design. Its like they have something in their hand at such an early stage they walk away feeling their getting an impeccable service and they have something to show people what the site is going to look like

domedia
06-09-2008, 02:43 PM
I've been messing around with pages and have noticed that many web pages graphics are chopped into pieces. For example, a header banner up top may actually be three separate images.

Is this standard? What's the point?

I don't believe it's standard. The only time I;'ve sen this used was years ago when everyone used HTML tables to design websites and/or had software automatically slice up their website from PSD file.

And finally, is there a way to do this in dreamweaver, or do you have to manually cut your images up in photoshop? (I hope not..! :) You shouldn't chop one image like this up in several images in the first place, so no.