3 replies to this topic

[Kenneth Feldman]

Good Evening,

Thankfully, it's been moderately busy here lately, and I have another iThemes site to share. (When it rains it pours.)

This is a complete redesign of an existing Worspress-powered website, that I had made years ago when I first started working with Wordpress.

Matrika Yoga Centers in Pittsburgh: <a  href="http://www.yogamatrika.com/" rel="nofollow" target="_blank">http://www.yogamatrika.com/</a>

Built on the Life Series theme, I have squared-off the corners and filled in with blocks of color.

The squiggly sidebar divider on the interior pages is done with a repeating background that I made in Photoshop.

This one was fun!

Edited by Kenneth Feldman, 10 May 2010 - 11:39 PM.

[Ronald]

Hi Kenneth,

as we've come to expect from you, great job! I like the colour combinations, and the sidebar divider indeed, it just shows that with a little bit of imagination, so much can be done, and the solution is often less complicated than one might think. Now I say that with the utmost respect, I wouldn't have come up with that.

Ronald

[Kenneth Feldman]

Thanks Ronald.

Sometimes a new client project inspires you to think a bit differently than usual.

At first I was gonna do a series of little rings, like a chain, as the sidebar divider, just to break up the linear/square/boxy feel.

Then as I thought about the circular rings/links, I imagined a single wavy line instead -- like alternating halves of the chain links -- only really big and curvy.

Then it was just a matter of creating a large scale grid -- onto which I drew some bezier curves in Photoshop. One curve left, and one curve right, matching the transitions of the alternating radii. (I have some mechanical drawing experience.) Then I repeated those, added a stroke, and sliced out just one perfect set.

Lastly, a bit of layering in Photoshop to get the two different background colors on either side of the wavy stroke, and Voilà!

Since you guys use the faux columns repeating background image technique, I just created a new, albeit taller version of the Container background image, with exactly one cycle of the repeating vertical wave (and of course, the white side borders built in).

Here's a link to that BG image so you can see it by itself:
http://www.yogamatrika.com/ym/wp-content/themes/matrika/images/container-bg.gif

One other note: Since the Container starts up behind the header, I used a background position adjustment on it to push the start of the BG image down a bit to get the exact part of the curve I wanted at the top of the sidebar.

So, yes, a simple idea -- but one that took a bit of engineering to accomplish.

[Ronald]

Hi,

definitely not simple to design or engineer (way beyond my skills!), it was indeed the idea to solve something (have a curved border to the sidebar) that appears to be close to impossible in the way you did! chapeau

Ronald