Hey, I was wondering how would i go about slicing up some graphics to XHTML & CSS stylesheet? Would I manually do it, or use/ a software such as dreamweaver? And is there any guides or tutorial? Like they would do in service like http://www.slicerus.com/. thanks for all input James
I've built a few sites and never heard of slicing until I saw people here talking about it. Since I make my own graphics, they are already seperate images anyway. I then put the different images together to make the mock-up (what you usually see people doing in GIMP or Photoshop). That said, those who use dreambeaver and ImageReady or Photoshop use a "slice" tool which, with dw, can be automatically set in a table (yuck). Most of the image editing programmes have a "slice" tool (again, I didn't even notice Gimp had one too until looking around on teh Interwebz). Better of course to learn an image-editing programme, and learn to code XHTML and CSS correctly (unless this is like for just one website).
You need a software like Photoshop or Fireworks; they have a slice tool that you use to cut out parts of the graphic and use CSS and XHTML to assemble them in your template.
Photoshop w/ it's Imageready software is a good way to go. Read this article here, especially if you are looking to create a more standards compliant site because most slicing methods create some pretty nasty results with tables and spacer .gifs and what not.
ye thanks for all the response! i think you must have quite alot of skill to do this, as there are companies charging $200 for one page of slicing!!! any other suggestions ppl?
They charge that much because somewhere there's someone willing to pay that much. I guess a hige business without their own web geeks would pay for that. But no, it's not much skill. If I were you, I'd pick an image editing programme (Gimp, Photoshop, ImageReady, whatever but just pick ONE) and spend a month or so learning it. There are a bazillion tutorials for any of those programmes. Then you can see "slicing" is pretty much just cutting out an image from a page, or cutting out pieces of an image on a page. Sometimes people make too many little cuts and then you've got a bazillion images where you could just have two. More loading for the browser. eruct and sparks are correct, the slicing tools that come with many programmes make sh*tty code to go with. Which is why I don't recommend slicing in the first place. Heck, even with Picassa or MSPaint even, I think you can cut out stuff with the marquee tool. It's just cut and paste.
I'm afraid I disagree. There is alot of skill invloved. Forget slicing, forget using Dreamweaver. The most effective way to design websites requires a firm knowledge of a) graphic design, b) hand-coded CSS / XHTML, c) patience, d) experience. This is how I work: • Create 'Look and Feel' design concepts in an image editing package. • Seek approval from client. • Work out basic structure of site in CSS/XHTML using wire-framing. • Manually cut out the design elements from look and feel image docs. - You will need to keep flattening an image to keep all layers intact. - Optimise images-parts as you go. • Build final CSS/XHTML templates using image-parts • Integrate these templates into your CMS/E-Commerce system etc. I recommend getting a good reference book, suh as 'CSS For Beginners'. Sure, there are tons of online tutorials, but having a book at your side is very useful.
Here's some good sites to get you going: http://www.w3schools.com/css/ http://www.sitepoint.com/subcat/css www.csszengarden.com/
Great Post! Very informative I had a look at your site, well cool design! Could you tell me what's wire framing, im not very fimiliar with the term?
completely agree with designaholic... Proper web design is far more than a graphics design. I create a base Photoshop image and slice/optimize it piece by piece as I manually code the layout in html/css...
jamesle: wire framing is a great way to check your layout is working well in the early stages. Basically your just giving all you div's a border: /* Wireframing */ div { margin:0; padding:0; outline: 1px solid #F00; } Code (markup): …when your happy with the layout, simply comment out the "outline" declaration, or set the border to "0" - it's useful to keep the code in there. This technique really helps you to understand floats etc. DKameleon: I agree, browser compatibility is very important. If you learn how to code efficiently, things should check out.
Try this site for a quick but helpful rundown on using photoshop to slice and dice your templates. ht*p://www.csslicingguide.com/guide/stage_1.html