Need help with a specific design

Hey guys,

I recently started my own web design business for people in my community. I've got a request though that I just cannot figure out.

So my client has this yoga business that has these like natural oil things or something (Not quite sure what they are exactly). Anyways, my client wants a sort of earthy, natural feel. They pointed out http://divinecenterofyoga.com/index4.html website as one they really liked. My client wants, to some extent, the site to look something like this. I can't for the life of me figure out how to make the content background (The neat looking edges specifically) in Photoshop. I have been looking everywhere for a tutorial or something, but nothing looks enough like what I need.

Can anyone point me in the right direction here?

On a side note, I was thinking I might just use Wordpress, rather than building it from scratch, but WP seems almost like cheating to me. Is WP a generally accepted tool for commercial web design?

Thanks!

 

If they want to add content later on and adjust it then use wordpress.
For the background, just try and find a "brush border" and edit it appropriately. If you really cant replicate it then just "view background" and then copy and paste in photoshop. Then you can edit the actual background itself.

 

It's just a background image dude... When in doubt, don't overthink things. Set up some rulers in photoshop, and do a jagged line thing with your brush tool... Then assign each image to your content, header and footer in your CSS. Simple stuff

 

If WP is going to do the work why not, afterall what is the difference.

You can also talk to the client and suggest WP to theme as maybe the only way to get it done by you.

 

Generally speaking that sort of thing forces you into an inaccessible fixed width layout -- which is why I'd advise against doing it...

That said, the black background could be used to dynamically create a similar effect using the 'erase' technique. Markup would go something like this:

<div id="pageWrapper">
	<div id="pageTop"></div>
	<div id="pageLeft"><div id="pageRight">
		<h1>Site title</h1>
		<p>Content Here</p>
	<!-- #pageRight, #pageLeft --></div></div>
	<div id="pageBottom"></div>
<!-- #pageWrapper --></div>

Code (markup):

Which is pretty heavy, but it's the fastest/easier way. (and why DIV exists, to create style elements without changing the page semantics). CSS-wise you'd make transparent images that have black as the opaque and the light color as the transparency, setting the 'paper' texture on the outermost container. This would then 'subtract' the edges.

#pageWrapper {
	width:95%;
	min-width:40em;
	max-width:68em;
	margin:0 auto;
	background:#CCC url(images/paper.png) top center repeat;
}

#pageTop,
#pageBottom {
	height:32px;
	background:url(images/removeTopBottom.png) top center repeat-x;
}

#pageBottom {
	background-position:bottom center;
}

#pageLeft {
	padding-left:32px;
	background:url(images/removeLeft.png) center right repeat-y;
}

#pageRight {
	padding-right:32px;
	backround:url(images/removeRight.png) center left repeat-y;
}

Code (markup):

Or something to that effect. Generally speaking though this is why these types of effects are going the way of the dodo on websites, and are only found on slow loading inaccessible sites.