View Full Version : Help w/ slicing? Geeze I hate slicing.

03-28-2012, 08:29 AM
So, I've been creating layouts and sites for a long time now. Back in the day I used to give my design to a buddy and he sliced and coded it. That was when I stopped doing anything web design/dev wise. Now I'm back at it, digging up old skills and been working on just designing layouts. I successfully created and coded in CSS/HTML a crappy simple layout - but now, I decided to step it up a notch and make a cool layout.

My mother in law has a massage business and I figured I'd derp around practicing on a mock website for her. If I can get it going, I'd give it to her. However, I'm not sure how the f**k to even begin slicing this layout i've got. Let alone code it >< Where should I begin folks? I've got the vision in my head, but I dunno where to start... i know my next step is to slice...and open in dreamweaver...and start coding.

But - do I make the content boxes in CSS? or keep them images and put text over them, I'm baffled. Lol.

Here's a picture of the layout design for my mother in-law, please any advice would be appreciated!


I kinda understand slicing - i get you gotta make sure they're perfect before u export for web & devices lol. But WHICH slices to make....and WHICH to make "NO-IMAGE" confuses the hell outa me. If some one can break this picture i designed down and say ... slice 1 - this slice 2 this or so and so , idk... anything helps. Thank You Coding Forums :) My new fam. :thumbsup:

03-28-2012, 08:33 AM
Where should I begin folks?

That's easy :). Forget about slicing and dicing as a way of building a web page. It's so way last century and outdated that imo it's a waste of time.

Today, you should be building web pages with semantically correct html and css for styling and layout.

03-28-2012, 08:41 AM
A lot of this (elements in your picture) can actually be done with css3, including the "Life...." quote on the lefthand side.

I'd say take the background image to the whole thing, the banner and the body (pictures) image and save those. Find an alternative font for the nav and headings and use text-shadow for the shadow effect. Check out border-radius and border-image for any additional effects.

03-28-2012, 08:46 AM
Wait so now a days the new thing is not to design the full layout in photoshop and then slice it? O.O

sry, tryin to catch up to modern day style developing and designing.

So - I should recreate all of this in CSS3...how, should I slice some stuff like my banner, what about the little collage of pictures, how it's overlapping my 2 boxes, you can do that with CSS o.O?

03-28-2012, 08:52 AM
Wait so now a days the new thing is not to design the full layout in photoshop and then slice it?

You can use Photoshop or whatever you like to create the mockup but the web page itself should be made up of semantically correct markup and css for styling and layout. I send away people who come up to me with a photoshop mockup and ask me to slice and dice it into a web page. I don't want to be involved in that malarkey anymore.

03-28-2012, 08:56 AM
People still mock it up in photoshop. You were right on that part. However, because of new things like text shadow, in-browser gradients, glows, tilts, skews, animations and pseudo elements, people don't normally slice everything up into its own little image.

Slice the banner image (or if you can, just pull it from the layer in the PSD), the collage (as a whole) and the background (or use a generator like: http://www.stripegenerator.com/ to make a small, loadable image).

As for the rest however, check out border-radius (css3), text-shadow (css3), box-shadow (css3), gradients (css3, search "colorzilla gradient generator"), and position absolute/relative (css).

Your final HTML should look something like the following, with everything else in the css.

<!DOCTYPE html>
<link href="style.css" type="text/css" rel="stylesheet">
<!-- META info/header -->
<div id="page-wrap">
<header id="header"> <!-- hide the text (text-indent) using css; it's merely there for search engine and accessibility's sake -->
<h1>Tamzen Karma's Awakening</h1>
<h2>Atromatherapy Massage</h2>
<nav id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Who's Awakenings?</a></li>
<li><a href="#">Image Gallery</a></li>
<li><a href="#">Scheduling &amp; Rates</a></li>
<li><a href="#">Contact</a></li>
<section id="promotions"> <!-- align the collage using css pseudo elements -->
<h3>Current Promotions</h3>
<p>Lorem Ipsum</p>
<div id="content">
<h3>Content Box</h3>
<p>Lorem Ipsum Dolor Emit</p>
<footer id="footer">
<span><a href="#">Back to top</a></span> <!-- capitalize using text-transform (css) -->
<nav id="footer_nav">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Who's Awakenings?</a></li>
<li><a href="#">Image Gallery</a></li>
<li><a href="#">Scheduling &amp; Rates</a></li>
<li><a href="#">Contact</a></li>

03-28-2012, 09:13 AM
Appreciate the quick feedback - ok so, The goldenish stripe, I have as a 50x50 pixel image...i can just put that into CSS and it'll repeat it over and over and create the background. I get this.

So after I initially get page background - I should create the base gray box with a slight gray to white gradient? The main big big box that all the small white boxes go on?

How would I take out my "collage" picture? Should I convert the layer into a smart object and just save that as an image? Later on in CSS, I should be able to put it exactly how I have it on my mock layout?

So basically, all your saying I need is...

The stripe primary background. I have it saved as a 50x50px, just like my defined pattern in photoshop.
The banner image or the banner image w/ the box that has drop shadow and round edges? (plz specify 4 me :D )
The collage picture, I can save it as a png or gif with transparent background? (plz specify 4 me :D )

So 3 pictures o.O? Thats nuts! Rlly?

Then do I begin in dreamweaver? By placing my background with CSS and loading my style.css into my .html? And then begin making my big background gray box with the gradient?

03-28-2012, 09:20 AM
woah thanks Nike and Mishu :) appreciate the quick replies. So let me get this straight:

All I need is (image wise):

My background 50x50px Striping pattern, just like I have defined pattern in photoshop.
My banner. Should I have just the banner w/ the stroke of yellow dashes...
OR should I have the entire banner, with the box with the drop shadow as my image.
My collage of pics, I assume you want me to convert this layer to smart object, and save it with a transparent background as a .png or .gif? And i'll be able to place it exactly how it is later on, semi-over the 2 boxes?

And don't worry about the quote on the side, I can do this later with CSS like you said Nile?

What about the big gray box with the little gradient to white? I'm guessing, my CSS should be kinda like: First set my 50x50 striping background. Then set my huge gray box that fills the entire center of the website. Then place my banner and other boxes. ? Somewhere along that order?

03-28-2012, 09:20 AM
Ouch sry for 2x post, didn't see the initial one when i pressed reload so I thought it got lost. My apologies.

03-28-2012, 03:34 PM
Don't save the banner image with the shadows and border. Just save it as it is in the layer without the shadows and borders. Convert the collage to a smart object and save it. As long as you begin in the CODING side of dreamweaver, begin in dreamweaver. Check out css-tricks.com for help along the way (specifically the videos section).

03-28-2012, 08:58 PM
I'm making good progress, it's a steep hill to climb - but I'm understanding what you and Mishu are saying. Everything can be done with CSS. Which - in return makes it easier for me, cuz if I ever need to change things around I simply open my style sheet and edit the layout. I like not slicing. But learning CSS takes some getting used to. Thank you for that website it helps a lot. I'm gonna try to not ask many questions but to finish off real quick - 2 last questions...

the banner you said, don't put the yellow border, and don't have the drop shadow.... so should I had the yellow border and hide the drop shadow...and then convert to smart object and get my dimensions etc... : basically i'm scratching my head when you say take the banner, cuz i'm wondering if you mean... well, ... dumbed down in my brain the banner i made is kind of "a banner in a box and the box has drop shadow" but it all looks like 1 object. So do you mean take just the BANNER GRAPHIC and then in CSS, put the image in a box like the rest of them and later make the box have an inner border to fit the banner and make the box have drop shadow?

Does this apply for my collage as well? Save without drop shadow? Or this is fine to save as a .png with drop shadow?

On a side note from question asking, It's rather blood pumping getting back into this :) I love seeing my mock up come to life through code, it's sick! In a good way lol. :thumbsup:

03-28-2012, 10:25 PM

Take that image and then apply the borders and shadows with css.

With the collage, in the image, include the shadows and the borders.

03-28-2012, 11:30 PM
Cool, I get u. However when you say, take the image and apply boarders and shadows with css. I take it u also mean, take the image and put the image in a box and add the yellow dashes boarder to the image and drop shadows to the box? And do box-radius: to get the rounded corners?

03-29-2012, 01:28 AM

04-02-2012, 04:58 PM
I would try SiteGrinder. ( http://www.medialab.com )

That large striped background would be a layer named browser-background with Pattern Overlay layer FX.

The gray box with shadows would be a layer with the -pagesize hint, and also a Pattern Overlay layer FX (gray with shadows).

The nav menu would be a text layer with the -menu hint or the -menutree hint. If you want a fancy font for it, use a Google Web font, which SG3 supports directly. It can also apply the drop shadow to the text for you in the Design Manager.

The content box round cornered rect with shadow would be a -column layer and you'd have a matching -centercut to tell SG how to slice that into three pieces (top, fill, and bottom).

The menu at the bottom would also be a -menu layer. And you might want to put all that stuff in the bottom above a new gray layer with the -follow hint on it. That layer itself will be invisible, but it will act to group up those other things and make them just come after the regular page content.

Anyway, that's how I would do it.