So are you ready to get started? Let’s begin:

Step 1: Create the Base Mark Up

What we need is a series of images in an unordered list:

1
2
3
4
5
6
7

<ul>
<li><img src="image1.jpg" /></li>
<li><img src="image2.jpg" /></li>
<li><img src="image3.jpg" /></li>
<li><img src="image4.jpg" /></li>
<li><img src="image6.jpg" /></li>
</ul>

Pretty straightforward code – view it in the browser and see a bunch of images listed from top to bottom.

Step 2: Add jQuery Code to hide unfocused images:

What we’re trying to achieve is to only show the first image of the list and hide the rest. We do this by applying some CSS rules via jQuery to the mark up we’ve created. We also want to line up the hidden images to the right – so we can add controls that animate the entire ul a little bit to the left at a time (see illustration below):

Add the following code right above the closing head tag:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
$(window).load (function() {
	var theImage = $('ul li img');
	var theWidth = theImage.width()
	//wrap into mother div
	$('ul').wrap('<div id="mother" />');					
	//assign height width and overflow hidden to mother
	$('#mother').css({
		width: function() {
		return theWidth;
	  }, 
		height: function() {
		return theImage.height();
	  }, 
		position: 'relative',
		overflow: 'hidden'  	
	});
		//get total of image sizes and set as width for ul 
	var totalWidth = theImage.length * theWidth;
	$('ul').css({
		width: function(){
		return totalWidth;	
	}				
	});		
 
});//doc ready
 
</script>

In English: in the first script tag – we have connected to the jQuery library online. Then we go in the window.load() event *as supposed to document.ready() – because of an issue detecting image width and height with webkit browsers. Then we set up a couple of variables which are all the images inside the unordered list, along with their widths. We wrap the unordered list (using the .wrap() function) inside a div called “mother” with the CSS rules I mentioned.

Step 3: Add “Next” and “Previous” Buttons

In our HTML – add anchor tags with the class “next” (If you want to move forward the slider) and “previous” (to go backward) inside the list items:

1
2
3
4
5
6
7

<ul>
<li><img src="image1.jpg" /><a class="next" href="#">next</a></li>
<li><img src="image2.jpg" /><a class="next" href="#">next</a><a class="previous" href="#">prev</a></li>
<li><img src="image3.jpg" /><a class="next" href="#">next</a><a class="previous" href="#">prev</a></li>
<li><img src="image4.jpg" /><a class="next" href="#">next</a><a class="previous" href="#">prev</a></li>
<li><img src="image6.jpg" /><a class="previous" href="#">prev</a><a class="startover" href="#">startover</a></li>
</ul>

Note that you will not see these links when you preview the page. This is because they are tucked away outside the visible region of the overflow property we’ve created:

Step 3: The Nifty .Animate()Method

Okay, now we’ve come to the part where we actually see some action. The whole point of what we’re trying to do is to move the list a little to the right – when the “next” link is clicked, and to the left if “previous” is clicked:

Add the following javascript code inside the existing script tags:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

$(theImage).each(		
function(intIndex){				
$(this).nextAll('a')
	.bind("click", function(){
		if($(this).is(".next"))	{
			$(this).parent('li').parent('ul').animate({
				"margin-left": (-(intIndex + 1) * theWidth)				
					}, 1000)	
			} else if($(this).is(".previous")){
			$(this).parent('li').parent('ul').animate({
				"margin-left": (-(intIndex - 1) * theWidth)				
			}, 1000)	
			} else if($(this).is(".startover")){
			$(this).parent('li').parent('ul').animate({
				"margin-left": (0)				
			}, 1000)
	}
	});//close .bind()									 
});//close .each()

Explanation: the code above starts out with the “.each” function – which is essentially a loop that looks for each of our images in the list. Then it finds all of the anchor tags next to the images (through .nextAll) and checks them for the assigned class. If the class says “next” – animate the parent (ul) to the left by applying a margin-left CSS property to it. The same thing goes for class “previous”. The only difference is the index is advanced vs. deducted multiplied by the image width. Lastly – is class “startover” which resets the slider to its original position.

Add the CSS code below inside the “head” tag so you can see the links and start testing them:

1
2
3
4
5
6
7
8

<style>
*{padding:0; margin:0;}
ul {}
ul li {float:left; list-style:none; position:relative; }
ul li a.next {position:absolute; left:100px;}
ul li a.previous{position:absolute; left:0px;}
ul li a.startover{position:absolute; left:200px;}
</style>

Step 4: Make ‘er Nice and Purrty

Technically – our slider is done. This section mainly focuses on making it look nice and presentable. So I grab this file: Slider Constructor from Graphic River. Slider Constructor is a high quality Photoshop filled with shiny slider buttons and controls that will surely bring life to your new slider. Create the buttons of your choice from this file and save them as individual .pngs.

You can set a different button for each anchor tag in each slide. You can also place them anywhere you want with some CSS positioning. Either add an “id” attribute to the individual anchor tags, or an additional class (which is what I did). Below is the CSS for my demo – of course, you might want to code yours differently:

1
2
3
4
5
6
7
8
9

ul li a.next.red{background:url(next-red.png); width:57px; height:73px; position:absolute; left:560px; top:237px;}
ul li a.next.green{background:url(next-green.png); width:67px; height:67px; position:absolute; top:286px; left:486px; }
ul li a.previous.green{background:url(prev-green.png); width:67px; height:67px; position:absolute; top:286px; left:105px;}
ul li a.next.orange{background:url(next-orange.png); width:239px; height:62px; position:absolute; left:360px; top:300px; }
ul li a.previous.orange{background:url(prev-orange.png); width:239px; height:62px; position:absolute; left:20px; top:300px; }
ul li a.next.blue{background:url(next-blue.png); width:57px; height:129px; position:absolute; top:150px; left:562px;}
ul li a.previous.blue{background:url(prev-blue.png); width:58px; height:129px; position:absolute; top:150px;}
ul li a.previous.silver{background:url(previous-silver.png); width:49px; height:50px; position:absolute; top:305px; left:360px;}
ul li a.startover { background:url(startover.png); width:176px; height:73px; position:absolute; top:280px; left:420px;}

Also – the good thing about this code is you can place and style the buttons individually.

Conclusion

There, there – you’ve just done yourself some good coding Sparky! Feel free to modify, re-factor and make the code better. This is as basic as it gets – so have fun tweaking it. Make sure you leave a comment or spread the word by retweeting or liking it in facebook. Until next time!

Bokeh and Blurry Backgrounds

I first saw this style from this popular Tumblr theme. Bokeh is an effect where a colorful palette of round reflections are so washed and blurred from an out of focus lens of some sort. This mystique of photography somehow brings the subject (the content in our case) a much more focused and sharper look. The Bokeh effect gives the entire page an overall feeling of harmony and beauty.

Blur

Bokeh in combination with transparencies as well as rounded corners give this template a thumbs up from me!

You can view the Item here, or Demo from Here

Modern Business 3

This template uses bokeh in the inner frames of the page. Very sleek, professional and elegant.

You can view the Item here, or Demo from Here

Dark ‘n Clean

Another Bokeh Beauty, don’t miss the amazing typography from this theme!

You can view the Item here, or Demo from Here

Overlapping Folds

This style has been around for a while, but still doesn’t fail to amaze me. It is when the designer takes page elements and wraps them among sections of the page, as if it was three dimensional.

Unite

Definitely one of my favorites. Exceptionaly detailed – the folds even change in orientation when scrolling up and down

You can view the Item here, or Demo from Here

Stage

This one is very unorthodox. Folds, peels – 3d everywhere!

You can view the Item here, or Demo from Here

Fancy Folio

More in the safe and conservative style, checkout the folded navigation button

You can view the Item here, or Demo from Here

Wild Slideshow Transitions

May it be Flash or Javascript – I’ve noticed a trend in transitions. The “fade” and the “sweep” no longer suffice, check out the slideshows in the templates below for a better demonstration.

Perception

Sliced, reversed, waves – the slideshow on Perception will leave you breathless.

You can view the Item here, or Demo from Here

CleanCut

The transition effects on CleanCut will give your images that “Wow” factor.

You can view the Item here, or Demo from Here

Infinite xHTML/CSS Theme

The slideshow on this template is a combination of many styles, played in random order. Tastefully done.

You can view the Item here, or Demo from Here

Accordions

Instead of the regular slideshow, some templates integrate an Accordion effect (or both) right in the home page. Both are somewhat similar, though the Accordion is a new trend that gives your website that out of the ordinary style.

Innovation + Science

Definitely of of my favorites – Innovation + Science is very sleek, sharp and clean. The accordion is a good choice for this template.

You can view the Item here, or Demo from Here

Newscast

Again, one of my favorites – this template’s got it all: typography, spacing, color, javascript effects – and of course the accordion. Probably the best magazine styled theme I’ve ever seen.

You can view the Item here, or Demo from Here

Echoes

Awesome, awesome, awesome!!! This template simply echoes “awesome!”

You can view the Item here, or Demo from Here

Minimalist

Just as the title describes, minimalist styled websites try to achieve the best look out of the least styling. The aim of the minimalist is to present beauty out of pure simplicity.

Europa

Big solid fonts, grayscale schema, massive spacing – this template speaks simple yet beauty.

You can view the Item here, or Demo from Here

Squared3

Squared3 has good typography, as well as excellent color scheme.

You can view the Item here, or Demo from Here

Minimalistic Studio

This template should also have been in the “Wild Slideshow Transitions” category, again – a nice solid template with simple accents and design applications yet effective results.

You can view the Item here, or Demo from Here

Conclusion

There you have it, a collection of tasty design trends in themeforest templates. What did you think of them? Would you buy any of these templates? Did you at least get inspired to build something as beautiful? Do you notice any other trends in Themeforest or elsewhere that is worth mentioning? Let me know your thoughts in the comments section:

Take a look at our markup:

1
2
3
4
5
6
7
8

<ul>
<li><img src="images/77335_4871.jpg" title="Autumn Leaves" /></li>
<li><img src="images/107023_5283.jpg" title="Cloudy Skies"  /></li>
<li><img src="images/1282015_12556521.jpg" title="Nice Horsy"  /></li>
<li><img src="images/1262387_19591724.jpg"  title="Grassy Meadows" /></li>
<li><img src="images/220121_3233.jpg" title="Jigsaw Pieces"  /></li>
<li><img src="images/1282209_96954111.jpg" title="Retro Groove"  /></li>
</ul>

Pretty clean right? Ok, now we start manipulating and styling with code:

Step 1: Wrapping Elements with jQuery

We are going to use jQuery to find all these images in a list item and check if it has a title attribute. If it does, it will wrap the image in a DIV with class name “wrapper”.

1
2
3
4
5
6
7

$(document).ready(function(){									
		var thumbs = $("ul li img");		
 
		for (var i = 0, ii = thumbs.length; i < ii; i++){
			if (thumbs[i].title && thumbs[i].title.length > 0)
			{								
				$(thumbs[i]).wrap('<div class="wrapper" />')

jQuery will also take the contents of the image’s title and place it inside another DIV called “caption” and place it inside wrapper, right after the image itself. Finally, let’s remove the title attribute from the image tag.

1
2
3
4
5
6

var imgtitle = thumbs[i].title;	
after('<div class=\'caption\'>' + imgtitle + '</div>').
				removeAttr('title');
 
			}					
		}

Now take a look at our mark up when the document loads:

1
2
3
4
5
6
7

<ul>
<li>
<div class=”wrapper”><img src="images/77335_4871.jpg" /></div>
<div class=”caption”> Autumn Leaves</a>
</li>
...
</ul>

Pretty slick right? Now let’s move forward.

Step 2: General Styling with CSS

Now that we have our DIVs in place, we can now set up the general styles with our stylesheet. What we’re trying to achieve is to hide the caption from a viewing area set on its containing DIV: wrapper.

Take a look at our stylesheet:

1
2

div.wrapper{width:218px; height:218px; overflow:hidden; position:relative;  }
div.caption {position:relative; text-align:center; padding:55px 15px}

Note that the wrapper dimensions are taken from how wide and tall the images are.

Step 3: Events and More Styling with jQuery

Now back to our script, all we need to do now is assign a couple of events to the hover method of our wrapper DIV. Thankfully, jQuery’s .hover() simplifies this action by letting us bind two handlers (in and out) all within the same context.

All we need to achieve is a way to slide the caption DIV upwards when we hover (maybe decrease the opacity of the image), then slide the DIV back downwards when we mouse out:

1
2
3
4
5
6
7
8
9
10

$('.wrapper').hover(
		function(){
			$(this).find('img').animate({opacity: ".6"}, 300);		
			$(this).find('.caption').animate({top:"-85px"}, 300);			
		}, 
		function(){
			$(this).find('img').animate({opacity: "1.0"}, 300);					
			$(this).find('.caption').animate({top:"85px"}, 100);
		}		
		);

Notice that I also used the .animate() function for manipulating the CSS properties which renders all of our effects smoothly.

Optional Pretty Styling:

For demonstration purposes I’ve added pretty backgrounds, as well as font types to maximize the effect. Simply add a background to the DIV caption, and assign different font types and styles (check out Google Fonts).

There you have it. You have just created your own image hover effects using jQuery and CSS. You can download the source code from here, or view the live demo.

Please feel free to comment below on what you think of this tutorial.

Features

The one pager Sifiso has all the right stuff for a strong personal portfolio:

How to Edit

The source code is very pretty straightforward – simply edit the HTML with your own. The PSD contains 4 files – one for each main section of the page. All files are layered, grouped and labeled. To edit a text section – find the layer and edit the text within. Fonts used are “AR Blanca” (for the logo), and “Helvetica Nueu LT Std” for everything else.

Conclusion

Keep in mind that even though Sifiso may be full of images, it is still coded professionally to conform to standards and SEO. I hardly used any “image” tags (except for the portfolio section), and still used HTML text where it should be (see screenshot below).

*Note that I talked about how to code this way in my 3 part post: How to create a single page portfolio from scratch.

Credits to the icon developers:Coffee Mug by Omercitin, Paintbrushes by ArtDesigner.lv and Briefcase by thirteen eightyone.

Are you ready to get your hands dirty? Let’s start coding:

Convert the Feature into a jQuery Powered Slideshow:

Our feature section looks good as it is. Though it would be better if the large image on the right would change and cycle through other images. In other words, we need to convert it into a slideshow of our best work.

Adding the Script Files

First thing we need to do is download jQuery. jQuery will be powering all of the javascript we’re using for our page. Head on to http://jquery.com/, download and save it into our current directory.

Inside the head section of our HTML, insert our script tag:

<script src="jquery-1.3.2.min.js"></script>

Now all of jQuery’s magic is in our fingertips. Download the slideshow plugin from: http://jquery.malsup.com/cycle/. Right below our first script tag, insert directly below:

1
2
3
4
5
6
7
8

<script src="jquery.cycle.all.2.72.js"></script>
<script>
	$(document).ready(function(){
		//cycle plugin
		$('.slideshow').cycle({
			fx: 'fade' 
		});
</script>

Getting the images ready:

Now that our scripts are intact, let’s get our images and our stylesheet ready so the animation will take place. Open feature.png in Photoshop and create new guides as shown below. Make sure you cut right down to the pixel.

Cut out the center image and fill with solid color.

Save the file under the same name.

Create several images that will go inside the slideshow - all must have the same dimensions – in our case: 476 pixels and 349 pixels.

Insert the HMTL right below the feature div. Of course you will replace the image names with your images, along with the right path:

1
2
3
4
5
6
7

<div class="slideshow">
<img src="images/feature-1.jpg"/>
<img src="images/feature-2.jpg"/>
<img src="images/feature-3.jpg"/>
<img src="images/feature-4.jpg"/>
<img src="images/feature-5.jpg"/>		
</div>

Append this code inside your existing style.css file:

#feature .slideshow {float:right; position:relative; left:-24px; top:21px;}

This ensures that the slideshow will sit on top of the designated box in the feature div:

Preview index.html in your browser. By now you should see your new slideshow swapping your images in your feature section:

Next up: The expanding sections, and the “lightbox” effect.

Adding the “More” click events on the sections below the fold:

We have two sections below the fold that showcase what our work is all about. One is the useful “Testimonials” section – where visitors read what others are saying about our services. And of course, the “Previous Work” area – where you plug in screenshots of work that you’ve done. This may be websites, photographs, software; anything that can be screen captured you can apply.

The point is to only show a few of testimonials, and a few thumbnails of your previous work. When visitors click on the “More” buttons, the section expands to show the rest.

This approach is also best for people who have plenty of work, but only would like to show a little at first.

Insert the code below inside the $(document).ready function:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

$(".column:gt(2), #previous-work ul li:gt(3)").hide();		
		$("#testimonials").append("<div class='more'><a id='more-testimonials'>More Testimonials</a></div>");
		$("#previous-work").append("<div class='more'><a id='more-previous-work'>More Previous Work</a></div>");	
		$("a#more-testimonials").click(function(event){		
			if ($(".column:gt(2)").is(":hidden")){							
				$(".column:gt(2)").slideDown('slow');
				$("a#more-testimonials").text("Less Testimonials");				
			}else{
				$(".column:gt(2)").slideUp('slow');
				$("a#more-testimonials").text("More Testimonials");	
			}			
			event.preventDefault();					  	
		});
		$("a#more-previous-work").click(function(event){							
			if ($("#previous-work ul li:gt(3)").is(":hidden")){
				$("#previous-work ul li:gt(3)").slideDown('slow');
				$("a#more-previous-work").text("Less Previous Work");				
			}else{
				$("#previous-work ul li:gt(3)").slideUp('slow');
				$("a#more-previous-work").text("More Previous Work");
			}			
			event.preventDefault();	
		});

The above code first hides our testimonial DIVS (that are greater than 3) and our previous work list items (that are greater than 4). Then it alters the HTML of our buttons, as well as toggle our hidden sections to appear while sliding slowly.

Adding the light show effect for the Portfolio gallery:

For the portfolio thumbnails – it would really be nice to add a “lightbox” effect once the images are clicked. Lightbox provide a way for viewers to see the detailed image without physically leaving the page. For our portfolio – we’re using http://fancybox.net/

Download: http://fancybox.googlecode.com/files/jquery.fancybox-1.2.6.zip
Extract the files and copy the folder “fancybox” from the unzipped file and place in the root folder of our portfolio. Inside index.html, place the code in the head section:

1
2

<script type="text/javascript" src="./fancybox/jquery.fancybox-1.2.6.pack.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.2.6.css" media="screen" />

Inside our custom script tag, (right after the last “});”) insert the block of code:

1
2
3
4

$("a.zoom").fancybox({
			'zoomSpeedIn'	: 500,
			'zoomSpeedOut' : 500
	});

In our unordered list of thumbnails, insert this “class” and “rel” attributes for each anchor tag:

class="zoom" rel="group"

Refresh index.html in your browser and click a thumbnail. You should now see the effects of Fancy box from your portfolio:

Last step: The contact form.

Completing the Contact Form with PHP

Since HTML and javascript doesn’t support contents of a form to be sent through email, we need a little help from PHP to bring our contact form to life. We are now working with server side technology, so won’t be able to test our file without a web server. So in order to test our code, upload your file to your web host or run apache locally using WAMP or MAMP.

First thing we have to do is change the extension of index.html to .php. We will be working with the .php file from now on. You can discard the .html version – or keep it for archive.

Look for the form tag inside index.php; add a method and an action attribute:

<form id="contact-form" method="post" action="">

This enables our form to use the $_POST array and be processed by the same page. To test the contents of our post array, type the following code right above the form:

1
2

<pre>
<?php print_r($_POST) ?>

Now, add some stuff to the form fields, click “Submit” and see what our pre tags have spitted out:

Now we know what we need to work with as far as the contents of our post array. We can now remove the pre tags and continue to work on our code. Add the following code on the very top of the page (even before the !DOCTYPE declaration):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<?php
//see number 1
 if (array_key_exists('send', $_POST)){
		//see number 2
$to = 'youremail@mail.com'; //this is your email address
	$subject = 'From Your Contact Form';
	$name = $_POST['name'];
	$email = $_POST['email']; 
	$comments = $_POST['comments'];  
		//see number 3
$message = "Name: $name\n"; 
	$message .= "Email: $email\n";
	$message .= "Comments: $comments";
		//see number 4
	mail($to, $subject, $message);
}
?>

What the above code is doing:

Now it’s time to test the code. Enter your email address into the $to variable then upload index.php to your web server. Fill out the form fields and click “submit”. You should receive an email similar to below:

Now remember that this is a stripped down version of a contact form. You should seriously consider adding several things such as form validation and formatting the entries for safe and legitimate values. Also add error and success messages to let the user know what’s going on. (I won’t cover such things because as you can see – this tutorial has gone waaay too long).

Final Words

There you have it - a complete single page portfolio. We started all the way from scratch: Mocked up the concept in Photoshop, hand coded the HTML, while slicing the images and writing the CSS. We've added some jQuery magic as well as a little bit of PHP functionality. As you see - a lot of work does go into it (and that's just a single page!)

In closing, I hope that you may learn something from this 3 part series. I also would like to thank the script and plugin developers which I included in this tutorial. You can download the finished product from this link, and of course view the live demo from here.

As I was searching the net for good restaurant websites, I stumbled upon these 16 sites which had all the elements that my client needed. In addition, some of these websites look so good – that it would inspire many of you designers out there. Note that I included my work in the list (its my blog – I can do whatever I want).

http://thenoodlebox.net/

http://www.rubytuesday.com

http://www.twelve-restaurant.co.uk/

http://www.pizzaza.ca/

http://www.nuevo-aurich.de/

http://www.pomonavalleyminingco.com/

http://www.lapizarraproject.com/

http://www.villagerkent.com/

http://www.bertoldis.ca/

http://www.caferouge.co.uk/

http://jakesrh.net/

http://www.belgo-restaurants.co.uk/

http://www.giraffe.net/

http://www.sandiegobrewing.com/

http://www.hoddows-gastwerk.de/

http://www.strada.co.uk/

To preview what we are going to build – see the demo page. Just in case you missed the first tutorial, click here. So are you ready to get started? Let’s begin:

The Wrap, Header and Feature Divs

First of all, you will notice that our layout doesn’t really have anything in the header. This is because I’m sure you will use your own logo for your design – so I left that out. Second, is there really is no need for a navigation bar because we’re only building a single page. Although we may include some anchors in this area so we can quickly jump from one section of the page to another. Also important to recognize that most modern websites now have a large “feature” section which packs the main message of the website. This effect is proven to be pretty effective – that’s why we’re applying the same concept to our portfolio site.

In Dreamweaver, create a new HTML page, name it “index.html” and save it.

Create a CSS document – name it “styles.css” and save it in the same location as “index.html”. Link to the stylesheet from index.html by using a link tag:

<link type="text/css"  href="styles.css" rel="stylesheet" />

Now, we create the main DIV – we’ll call this the “wrap”. In this DIV we’ll house almost all of our elements (all but one: the footer – which I’ll explain later). In index.html, enter the code:

<div id="wrap">  </div><!--wrap-->

Next, we grab the body style of our page. Go to Photoshop and open our mockup. Flatten the image (“Layer” > “Flatten Image”) and grab a piece of background:

Still in Photoshop, press Ctrl + C to copy the selected area, create a new document – and paste (this will be our HTML body background that will span horizontally). Save this file as “body-bg.gif” inside a folder called “images” in our root directory.

Next is we apply some fixin’s to our CSS:

* {padding:0; margin:0}
  body{background: url(images/body-bg.gif) repeat-x #f3f2ed;}

The above code tells everything to reset to 0 padding and 0 margin. It also applies the body background to the image we just created, repeat it horizontally and apply the color #f3f2ed everywhere else. View your file in the browser, you should have something like below:

Now remember we created the main div? That is just sitting in somewhere in the page. Let’s apply some standard measurements to it and align it so it settles perfectly in the middle of our browser.

Note that in the beginning of this tutorial – I was going to use the 960.gs framework, but feel as though I’m cheating because the tutorial calls for “from scratch”. So I decided, I’m not using the framework and code everything by hand, hence – “from scratch”.

Add this code to your style.css:

#wrap {margin:0 auto; width:960px; background:#CCCCCC;  min-height:500px;}

This centers our wrap in the middle of the page, as well as set the default 960 pixels width. The background color and the minimum height properties are added temporarily so we can tell from the browser what we’re working with. Refresh your page and you should have something like below:

Go back to index.html and add the header div inside the wrap div:

<div  id="header"></div><!--header-->

Back to our style.css – add this piece of code:

#header {height:32px; background:#333333;}

Refresh your browser – and you can see where our header sits nicely on top. The background color again is temporary.

Next is our feature div. Create a new div tag in your index.html with the id of “feature”, place in between the “feature” divs. Add two paragraph tags inside with your own text. In my case – I’m using the default Lorem latin filler text:

1
2
3
4

<div id="feature">
<p id="slogan"><!--your fantastic slogan goes here--></p>
<p><!--followed by a smaller, but also fantastic slogan here--></p>
</div><!--feature-->

Notice the first paragraph tag has an id of “slogan”. This is because this is the primary text that we are going to style with an image. We are treating it as regular text for SEO purposes.

Go back to your mock up in Photoshop and press “Step Backward” (ctrl + z + alt) several times until you get the fully layered version once again. Make sure the guides are showing – select the feature section like below:

In your layers panel, make sure you hide all the layers that shouldn’t be shown. This includes all the background layers and text elements. The only layer that should remain is the large feature image and the borders and glow to the left. Select the feature area and hit crop (“image” > “crop”). Save this as “feature.png” inside our images folder. This will be our feature div background image:

Now in our styles.css – add the following code:

#feature {background:url(images/feature.png)  no-repeat; height:394px;}

Go back to your mockup and click “Step Backward” (“Edit” > “Step Backward”) to uncrop. Unhide the slogan layer and select it according to the guides. Crop once again and save this as “slogan.png”.

Now add this code to your styles.css:

1
2

#feature p#slogan {background:url(images/slogan.png)  no-repeat; width:390px; height:192px; text-indent:-9999px; position:relative;  top:30px; margin:0;}
#feature p {font-family:verdana; font-size:12px;  color:#FFFFFF; width:320px; line-height:20px; margin:48px 0 0 28px;}

The above code styles the two paragraph tags inside the feature div. The first one with a background image, and the next one as plain text. Now when search engines crawl our page – it still thinks both are plain text – which is a good thing.

I’ve also taken out the color property in our wrap div to see how our feature looks like. Another thing to remember is that since our feature sits in its own div – it will be easy to add a slideshow or something to that effect as replacement.

Now that our wrap, header and feature is in place, we’re ready to move to the next sections: Testimonials and Previous Work:

Testimonials and Previous Work Sections

If the feature section is our hard hitter – a testimonials area is our “counter punch”. Testimonials are a sure fire way of telling our viewers: “we’re good – read what others are saying about me!”. Also another proven way of increasing business, it is also the reason why we’re putting testimonials right below our feature section. Ready to continue coding? Let’s keep going.

In our index.html, add the code for our testimonials. Place this directly below our feature div:

1
2
3
4
5
6
7
8
9
10

<div class="column first">
<p><!--your content here--></p><strong><!--author here--></strong>
</div><!--column-->
<div class="column">
<p><!--your content here--></p><strong><!--author here--></strong>
</div><!--column-->
<div class="column last">
<p><!--your content here--></p><strong><!--author here--></strong>
</div><!--column-->
</div><!--testimonials-->

Of course, you substitute real testimonials and authors in its place. Notice the “first” and “last” additional classes to the columns – we need this to fix our margins in our css. Next, go back to Photoshop and go backwards again so you get back to the original uncropped file. Select the Testimonials title all the way to the rightmost guide. Crop and save as “testimonials-title.jpg” inside our images folder.

Inside styles.css, append the below code:

1
2
3
4

#testimonials {clear:both;  background:url(images/testimonials-title.jpg) no-repeat top left;  overflow:hidden; padding:65px 0 0 0; margin:0 10px 0 10px;}
#testimonials .column {width:260px; float:left;  background:#ccc; padding:20px; margin:10px; font-family:georgia, helvetica,  arial, serif; font-size:13px; line-height:19px;}
#testimonials .column.first{margin-left:0px;}
#testimonials .column.last{margin-right:0px;}

This code adds the background image that we just created to the main testimonials div. It also adds proper styling to the columns inside the div, and fixes to the margins so it remains inside our imaginary grid.

The optional “more” tab

The more tab is only necessary if you have more than 3 columns of testimonials that you would like to show. The point is just show 3 columns at first, and by clicking the “more” tab – more testimonial columns will slide below – most likely to be achieved by jQuery (I haven’t gotten there yet – remember – I’m writing this tutorial as I go!).

To add a more tab – add this code to your HMTL, right underneath the last column div:

1
2
3

<div class="more">
<a id="more-testimonials">More  Testimonials</a>
</div><span id="more-1035"></span>

Note that we used a class for our div instead of an id. This is because this div can actually be reused in another section of our page.

Go back to your Photoshop file – click “Step Backwards” to the uncropped version – select the section that shows the “more testimonials” border and button according to your guides. Remember to hide the text layer over the button.

Crop and save this as “more-bg.jpg” inside the images folder. Add the code below to your .css file:

1
2
3
4

.more {clear:both; background:url(images/more-bg.jpg)  no-repeat; height:31px;}
.more a{float:right; font-family:verdana; font-size:10px;}
.more a:hover {color:#999999;}
a#more-testimonials {padding:10px 16px 0 0;}

For the “Previous Work” section – it’s pretty much the same process as testimonials. The difference is – we are actually using an unordered list instead of div columns. Add the following code inside your HTML:

1
2
3
4
5
6
7
8
9
10
11

<div id="previous-work">
<ul>
<li><a  href="images/thumbnail.jpg"><img  src="images/thumbnail.jpg" /></a></li>
<li><a href="images/thumbnail.jpg"><img  src="images/thumbnail.jpg" /></a></li>
<li><a  href="images/thumbnail.jpg"><img  src="images/thumbnail.jpg" /></a></li>
<li class="last"><a  href="images/thumbnail.jpg"><img  src="images/thumbnail.jpg" /></a></li>
</ul>
<div class="more">
<a id="more-previous-work">More Previous  Work</a>
</div><!--more-->
</div><!--previous-work-->

The thumbnail sizes are going to be 200 pixels width by152 pixels height. My sample code contains dummy thumbnails along with temporary images for the bigger image. We are incorporating a light box effect in the final product so users do not actually leave the page when viewing your gallery. Notice the addition of the “more” tab – which is again, purely optional.

For the “Previous Work” title – you do the same exact process in Photoshop as you did previously in the Testimonials title. Save this image in the images folder – name it: “previous-work-title.jpg”.

Now we add some styling to the list items, thumbnails and the entire div section:

1
2
3
4
5
6
7
8

#previous-work {clear:both; background:url(images/previous-work-title.jpg)  no-repeat top left; overflow:hidden; padding:65px 0 0 0; margin:0 10px 0 10px;  text-shadow:0 1px 0 #fff;}
#previous-work ul {padding-left:7px;}
#previous-work ul li{float:left; list-style:none;  margin:20px 15px 20px 0;}
#previous-work ul li.last{margin:20px 0 20px 0;}
#previous-work ul li a{background:url(images/thumb-bg.jpg);  width:209px; height:165px; display:block; padding:11px 0 0 10px;}
#previous-work ul li a:hover  {background:url(images/thumb-bg-hover.jpg);}
#previous-work ul li a img {border:none; outline:none;}
a#more-previous-work {padding:10px 10px 0 0;}

I also created a couple of thumbnail image backgrounds for the active and hover states. Again this is purely optional and I won’t go over in this tutorial.

Now refresh your page in your browser. You should have something like the image below. It is also good practice to start viewing your page in different browsers. This way – you can start fixing bugs this early in the development process. Next stop is the footer.

The Footer

Let’s go back to our Photoshop file – you may have to go back in history a couple of times to get you to the uncropped, fully layered version. Another thing to remember is NOT to save your original mock up file. This file is to stay in its original form – we are just cropping, hiding layers as we go to get the parts we want. But in the whole, this mockup .psd file remains in its original state. Select the footer area – starting from the guide a few pixels above the dark brown area.

Once selected – crop the selection – but don’t save as of yet; we’re going to save a couple of images from this selection – one is the footer wrap, the other is the actual footer background.

Once cropped, select the first 20 pixels from the left and crop once again. Save this file as “footer-wrap.gif” inside our images folder. Now go back to the Photoshop file and step backwards a couple of times to bring us to entire cropped footer image. Hide the layer group named “form”, as well as all the text layers in the footer area.

Save this file as “footer.jpg” in the images folder. Unhide the text layer that says “Hire Me for Professional Work”, and hide all the background layers so you get full transparency. Select the text area using the rectangular marquee tool and crop. Save this file as “slogan2.png” in our images folder.

Now hit “Step Backward” (ctrl + alt + z) a couple of times to get to the uncropped footer image and unhide the “form” group of layers. Make sure you hide all the layers inside the form – all we need is the rounded container that embodies the form. Select this area, crop and save this file as “form-bg.png” in our images folder.

Finally, unhide the button text, shape and glow. Create guides that surround the button image and select accordingly. Crop and save as “submit.png” in our images folder.

Now go back to our index.html, add the following code right underneath the entire wrap div.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<div id="footer-wrap">
<div id="footer">
<div id="left-container">
<p id="slogan2">Hire Me for Professional  Work</p>
<p><!--your footer slogan in this section</p>
</div><!--left-container-->
 
<form id="contact-form">
 
<div id="split-left">
  <label  for="name">Name:</label><br/>
  <input name="name" id="name"  type="text" class="formbox"/><br />
  <label  for="email">Email:</label><br />
  <input name="email" id="email"  type="text" class="formbox" /><br />
</div><!--split-left-->
  <label  for="comments">Comments:</label><br />
  <textarea name="comments"  id="comments" type="textarea" class="formbox"  /></textarea>
  <input name="send" id="send"  type="submit" value="" class="send"  />
</form>
 
</div><!--footer-->
</div><!--footer-wrap-->

The above code sets up all the content in the footer. This includes the two paragraphs on the left side and the contact form. Note that the form is still static. We will be converting this into a working form once we convert this to PHP.

Next up, is to style the contact form. Add the following code to your styles.css:

1
2
3
4
5
6
7
8
9

#footer-wrap {clear:both;  background:url(images/footer-wrap.gif) repeat-x; height:377px;  margin-top:20px;}
#footer {width:940px; margin:0 auto;  background:url(images/footer.jpg); height:377px;}
#footer #left-container {width:400px; float:left;}
#contact-form {background:url(images/form-bg.png) no-repeat;  width:427px; height:169px; float:right; padding:40px 0 0 0; margin:78px 0 0 0;}
#split-left {width:170px; float:left; margin:0 0 0 30px;}
#contact-form label{color:#9e876b; font-family:verdana;  font-size:10px;}
#contact-form .formbox {padding:2px; margin:4px 0 7px 0;}
input.send {background:url(images/submit.png); width:101px;  height:37px; border:none; display:block; margin-top:10px;}
input:hover.send {background:url(images/submit2.png);}

The above code sets up our footer wrap to span the entire width of the page with its own background image repeating horizontally. Now you understand why we excluded this from the main wrap div? The rest of the code applies the styling to the footer and contact form – tied to the images we created in the previous steps.

Finally, we add the final touches to the two paragraph tags on the left side. Add this code to your styles.css:

1
2

#footer p#slogan2 {background:url(images/slogan2.png);  width:400px; height:123px; text-indent:-9999px; }
#footer p {width:400px; float:left; font-family:verdana;  color:#FFFFFF;  text-shadow:0 1px 0 #000;  font-size:12px; line-height:20px; }

That concludes are HTML and CSS tutorial on our single page portfolio. Remember, we still have the scripting side to do – which is handled by PHP and jQuery, which we’ll cover in the next series. Click Here to see the DEMO Version of what we just created. The source code is also available to download – which includes all the files covered in this tutorial.

This tutorial will show you how to create a simple style switcher from your themes options panel. It will have a single drop down list with all the available styles to pick from. Once saved – your theme will switch to the selected style. Ready to get started – let’s begin:

Part 1 – Set up functions.php

First thing you need is a functions.php file. A functions file is an optional “plugin” type of file you can include in your theme directory folder. One of its’ purpose is to setup administration options for your theme – which is exactly what we’re doing. Create a file and name it “functions.php” and paste the code below. Note that you need to change variables that define your theme name ($themename) and the short name ($shortname) to match your themes:

1
2
3
4
5
6
7
8
9
10
11
12
13

<?php 
 
$themename = "My Sweet Theme";
$shortname = "mst";
$options = array (
array( "name" => "Style Sheet",
	"desc" => "Enter the Style Sheet you would like to use for Sweet Ass Theme",
	"id" => $shortname."_style_sheet",
	"type" => "select",
	"options" => array("default", "green", "blue", "yellow"), 
	"std" => "default"),
);
?>

The above code initializes your theme options structure. First it defines several variables, including a multi-dimensional array (which will become our drop down list containing the four selectable options that will dictate our style sheets). Next is to copy the code below. This code loops through each iteration of the array we declared previously. It assigns a type of form field, displays labels and applies the correct descriptions etc. It also includes several functions that saves the form data, resets information and displays status messages etc. It’s a wee bit technical – so its better if we simply copy and paste the code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161

 
<?php
function mytheme_add_admin() {
 
global $themename, $shortname, $options;
 
if ( $_GET['page'] == basename(__FILE__) ) {
 
if ( 'save' == $_REQUEST['action'] ) {
 
foreach ($options as $value) {
update_option( $value['id'], $_REQUEST[ $value['id'] ] ); }
 
foreach ($options as $value) {
if( isset( $_REQUEST[ $value['id'] ] ) ) { update_option( $value['id'], $_REQUEST[ $value['id'] ]  ); } else { delete_option( $value['id'] ); } }
 
header("Location: themes.php?page=functions.php&saved=true");
die;
 
} else if( 'reset' == $_REQUEST['action'] ) {
 
foreach ($options as $value) {
delete_option( $value['id'] ); }
 
header("Location: themes.php?page=functions.php&reset=true");
die;
 
}
}
 
add_theme_page($themename." Options", "".$themename." Options", 'edit_themes', basename(__FILE__), 'mytheme_admin');
 
}
 
function mytheme_admin() {
 
global $themename, $shortname, $options;
 
if ( $_REQUEST['saved'] ) echo '<div id="message" class="updated fade"><p><strong>'.$themename.' settings saved.</strong></p></div>';
if ( $_REQUEST['reset'] ) echo '<div id="message" class="updated fade"><p><strong>'.$themename.' settings reset.</strong></p></div>';
 
?>
<div class="wrap">
<h2><?php echo $themename; ?> Settings</h2>
 
<form method="post">
 
<?php foreach ($options as $value) {
switch ( $value['type'] ) {
 
case "open":
?>
<table width="100%" border="0" style="background-color:#eef5fb; padding:10px;">
 
<?php break;
 
case "close":
?>
 
</table><br />
 
<?php break;
 
case "title":
?>
<table width="100%" border="0" style="background-color:#dceefc; padding:5px 10px;"><tr>
<td valign="top" colspan="2"><h3 style="font-family:Georgia,'Times New Roman',Times,serif;"><?php echo $value['name']; ?></h3></td>
</tr>
 
<!--custom-->
 
 
<?php break; 
case "sub-title":
?>
<h3 style="font-family:Georgia,'Times New Roman',Times,serif; padding-left:8px;"><?php echo $value['name']; ?></h3> 
<!--end-of-custom-->
 
 
<?php break;
 
case 'text':
?>
 
<tr>
<td valign="top" width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td>
<td width="80%"><input style="width:400px;" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" type="<?php echo $value['type']; ?>" value="<?php if ( get_settings( $value['id'] ) != "") { echo get_settings( $value['id'] ); } else { echo $value['std']; } ?>" /></td>
</tr>
 
<tr>
<td><small><?php echo $value['desc']; ?></small></td>
</tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;">&nbsp;</td></tr><tr><td colspan="2">&nbsp;</td></tr>
 
<?php
break;
 
case 'textarea':
?>
 
<tr>
<td valign="top" width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td>
<td width="80%"><textarea name="<?php echo $value['id']; ?>" style="width:400px; height:200px;" type="<?php echo $value['type']; ?>" cols="" rows=""><?php if ( get_settings( $value['id'] ) != "") { echo get_settings( $value['id'] ); } else { echo $value['std']; } ?></textarea></td>
 
</tr>
 
<tr>
<td><small><?php echo $value['desc']; ?></small></td>
</tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;">&nbsp;</td></tr><tr><td colspan="2">&nbsp;</td></tr>
 
<?php
break;
 
case 'select':
?>
<tr>
<td width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td>
<td width="80%"><select style="width:240px;" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>"><?php foreach ($value['options'] as $option) { ?><option<?php if ( get_settings( $value['id'] ) == $option) { echo ' selected="selected"'; } elseif ($option == $value['std']) { echo ' selected="selected"'; } ?>><?php echo $option; ?></option><?php } ?></select></td>
</tr>
 
<tr>
<td><small><?php echo $value['desc']; ?></small></td>
</tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;">&nbsp;</td></tr><tr><td colspan="2">&nbsp;</td></tr>
 
<?php
break;
 
case "checkbox":
?>
<tr>
<td width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td>
<td width="80%"><?php if(get_option($value['id'])){ $checked = "checked=\"checked\""; }else{ $checked = "";} ?>
<input type="checkbox" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" value="true" <?php echo $checked; ?> />
</td>
</tr>
 
<tr>
<td><small><?php echo $value['desc']; ?></small></td>
</tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;">&nbsp;</td></tr><tr><td colspan="2">&nbsp;</td></tr>
 
<?php break;
 
}
}
?>
 
<p class="submit">
<input name="save" type="submit" value="Save changes" />
<input type="hidden" name="action" value="save" />
</p>
</form>
<form method="post">
<p class="submit">
<input name="reset" type="submit" value="Reset" />
<input type="hidden" name="action" value="reset" />
</p>
</form>
 
<?php
}
add_action('admin_menu', 'mytheme_add_admin');
?>

Test out your theme options by going under the “Appearance” section > “Your Theme Name Options” tab. You will see the drop down list with the selectors already in place. Once you hit “Save Changes” – it saves your data. While clicking “Reset” sets it back to the default selector. We also see nice status messages appear on top each time we update.

Part 2 – Create the Style Sheets

Create four .css files that correspond to the drop down list selections we defined in our functions.php. The names do not have to exactly match the selectors (but is wise to have some meaningful relation to the names). Save these four files in the root directory of your theme:

style.css – this style sheet is for a black background page with white colored fonts.

1
2

/* CSS Document */
body {background:#000000; color:#FFFFFF;}

green.css – this style sheet is for a green background page with white colored fonts.

1
2

/* CSS Document */
body {background:#3bae09; color:#FFFFFF;}

blue.css – this style sheet is for a blue background page with white colored fonts.

1
2

/* CSS Document */
body {background:#038aba; color:#FFFFFF;}

yellow.css – this style sheet is for… you get the picture.

1
2

/* CSS Document */
body {background:#f6f658; color:#333333;}

Part 3 – The Switch Statement

Now that we have our options working in the back end, and we have our four style sheets sitting in the root folder waiting to be called, all we need now is a way to flip the style sheets in our header file. We achieve this by using a standard switch statement. A switch statement in php is an alternative to the the “if…else” statement. It uses the case keyword which we use to match our selectors to execute a statement that calls the appropriate style sheet. In the default header.php file – look for the line of code below and delete it:

1

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

This is the standard call for the default style.css file which we no longer need. Next, paste the code below inside your header.php file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<?php
	global $options;
	foreach ($options as $value) {
		if (get_settings( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; } else { $$value['id'] = get_settings( $value['id'] ); }
	}
	?>			
	<?php switch ($mst_style_sheet) {
		 case "default":?>
		<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
	<?php break; ?>	
	<?php case "green":?>
		<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/green.css" type="text/css" media="screen" />
	<?php break; ?>
	<?php case "blue":?>
		<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/blue.css" type="text/css" media="screen" />
	<?php break; ?>
	<?php case "yellow":?>
		<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/yellow.css" type="text/css" media="screen" />
	<?php break; ?>	
	<?php }?>

The above code is quite self explanatory. First it grabs whichever values we’ve stored in our theme options. Second – is the switch statement for our drop down list, followed by cases for each entry – with its unique statement calling the style sheets.

Now if you go back to your style switcher and select “blue” – your theme style should switch to blue – and so on and so forth.

You can have as many styles as you wish to integrate in your options. As well as the amount of customization in the actual .css files is completely up to you. You can download the source files from this link – simply add these files in your theme folder and change some values – and your theme will instantly have it’s own style switcher.

The Output

Below is a preview of what we’re building. The aim is to have a mock up that is fully layered, so we can optimize for the purpose of SEO and page performance. Ready to get started – Let’s begin:

Part 1 – The Fold

We’re going to design the page from the top to bottom. The fold is first part of a web page can see – without having to scroll downwards. In our case, this includes the header and the big red feature bar:

If you aren’t familiar with 960.gs – it’s a CSS framework that follows the standard 960 pixels page width rule. Download the photoshop template and check out the guides – we are building the page following the 960 grid rules:

Create a new layer – this will be the fold layer. Select the full page width, with approximately 380 pixels in height. Fill it with a solid color – in my case I chose a bright red #730701:

Create another layer for the header bar, select the full page width and 48 pixels in height. Fill this with another solid color – in my case, #bcbcbc for light grey.

Where the header bar and the fold meet, we want to add an “etched” effect. We achieve this by using 2 lines using the “line” tool. Create 2 horizontal lines at 1 pixel each (make sure you hold the “Shift” key) as you drag it across the page. Nudge one line so that they sit just on top of one another. The rule is to use a lighter shade for one line, and a darker for the other (it is important that you play with the colors, and zoom out and test if the etched look is achieved). Add a subtle gradient fill for the header bar as well.

The next step is to add a large feature image. This sits on top of all the layers to give it that 3D effect. Place in at almost half the 960 pixel page width, overlapping some part of the header and pass below the fold. Include the effects as shown:

Immediately to the left of the feature image, add your large slogan text. This is to be your attention grabbing statement, and is important to be the most prominent. I chose Rockwell at size 36 pixels, with -50 tracking. Also add the following text effects:

• Drop shadow – Normal blend mode – #000, 90 degrees angle, 1px distance, 0 spread and 1px in size
• Inner Shadow – Normal blend mode – #FFF, 90 degrees angle, 1px distance, 0 choke and 0px size
• Gradient Overlay – use default settings, reduce opacity to 34% and 90 degrees in angle

Add a gradient effect to the background layer named the fold. The rule is to use a slightly lighter color than the existing background as one color, and the same background color as the secondary color. Fill by pressing the shift key and releasing simultaneously.

Add another 2 horizontal lines right underneath the slogan text. *Use the rule as described in the previous line tools used in the header and the fold separation. Add a smaller set of text – I used Arial with 14 pixels in size, #FFFFFF color.

To complete the fold – we add a glow effect to the bottom area where the borders separate the large text and the small text. Select a small area (shown below), grab the brush tool, select white for the color, increase the brush radius (shown below) – reduce the opacity all the way to 12 percent and daub a quick light stroke.

Part 2 – Below the Fold

Below the fold technically includes everything under the fold. But for the sake of this tutorial – it includes all BUT the footer section. The reason is – this will be the only part that will need to grow. If there was additional content to be made – it will be inside this section. The fold and the footer remain static in height.

We start by creating a new layer. With the selection tool, select everything below the red feature section below. Fill this selection with #f3f2ed using the paint bucket tool. *Note that the large image layer should be placed on top of all the other layers.

We then create a new horizontal guide. This guide should be right below our feature image (allow a few pixels extra for the added shadow effect). This guide’s main purpose is to know where we will slice our divs (which I will cover once we start coding) and where our gradient ends. Grab the selection tool once more and start from where the red area ends – down to the new guide. Using the gradient tool, select #e1decf primary color and #f3f2ed and fill with a straight line (hold shift).

We then add that same “etched” look where the two layers meet. The same technique is used – create two lines with one darker and one lighter. In this case the upper line has #670600 fill and the second #faf9f3.

Next step is to create the sub heading. With the type tool, choose the Rockwell font at 24 pixels in #292929 color and type the word “TESTIMONIALS”. Directly to the left of the text – I imported the “users_two_48” icon from WeFunction and scaled the image down to 60 percent and desaturize (Ctrl + U, slide the saturation all the way to the left). Add two horizontal 1 pixel lines (#e5e5e2 and #FFFFFF) directly underneath (by this point of the tutorial, I’m going to assume you have this technique down already).

*Tip – Create a group called “sub headings” and add all the above elements in it. We will be duplicating this sub heading in following sections.

Directly below the Testimonial subheading – we create 3 text boxes with some dummy text. I used Verdana at 14 pt, 20 pt leading. Make sure you allow enough padding and margin around each surrounding box. Align according to the grid. Note that this part of the design acts only as a marker. We will use actual text for these boxes.

Duplicate the two horizontal lines from the sub headings section. Move these 2 lines right below the 3 text boxes that you have created. Create a new layer, select 124 pixels (width) x 25 pixels (height) and fill with #FFFFFF with the paint bucket tool. Move this layer right below the two horizontal lines. Using the text tool, use 10 pt Verdana, color # 6b6b6b and type the words “more testimonials” – move this directly on top of the new layer we’ve just created. This acts as end marker for the testimonials section with a button that displays more testimonials.

*Tip – create a new group for the above elements and name it “end marker”.

Next, we add a “Previous Work” section. Remember that we created a group called “sub headings” a little while back? Duplicate this group and name it “sub headings 2”. Using the down cursor in your keyboard, move the new group approximately 560 pixels downwards. Change the text to say “PREVIOUS WORK” and use another icon, scale it down and desaturate.

An image gallery will showcase our portfolio’s “Previous Work” section. Similar to the testimonials area, we are dropping some dummy thumbnails in our photoshop file, just for mock purposes. We are going to span 4 thumbnails across at 210 pixels each in width. Make sure the thumbnails align to the grid, taking 3 columns each with enough paddings in between each other. Add the following effects for each thumbnail: Drop Shadow (settings shown in below screenshot) and an inside stroke of 6 pixels and #FFFFFF fill color.

To complete the “Below the Fold” section – we create an end marker for the “Previous Work” area. Duplicate the group “end marker” and name it “end marker 2”. Move this newly created group approximately 380 pixels downwards. Change the text in the button to say “more previous work”. Our next quest is the Footer. Keep going!

Part 3 – The Footer

And now we come to the final piece of the design process – the Footer. I enjoy designing footers because they represent completion; they’re also the most overlooked section of a page that I feel that it deserves the same attention as the other parts.

The height of the footer is approximately 375 pixels. If you haven’t already done so – extend your canvas size to an additional 375 pixels – but be sure to click the anchor all the way to the top.

Create 3 new horizontal guides: first is where the “Below the Fold” background ends, then approximately 35 pixels below, and third – another 30 pixels down (this is where the footer background layer starts). Make a selection from the first guide to the next one down, make sure you’re on the “Below the fold” background layer, and do a gradient fill: primary color #e3e0d2, secondary #f3f2ed. Next, create a new layer for the footer background and add a gradient fill: primary color is #361f01 and secondary #493215. Do 80 percent for the primary fill. Finally, create 3 horizontal lines with the line tool at 1 pixel each with the following fills (in the following order): #ffffff, #000000 and #624825. Line them according the last guide you’ve created (see below).

Duplicate the text layer for the slogan (The Fold), change the content to say “Hire me for professional work”, drag downwards to the footer, and place on the left half of the footer area. Add another text area, use Verdana, 12px #ffffff, enter some dummy text, and place directly below the large text.

On the right half of the footer, we’re placing a rounded rectangle for the background of the contact form. Using the Rounded Rectangle tool – create a rectangle, center between 6 columns in the grid. Add a drop shadow and stroke effect as shown below:

Create a new layer and make 3 rectangles inside the rounded rectangle we’ve just created. These will act as the form fields. Note that these are just as markers which will not really be used in the output. We’re using real form fields in the code. Fill these rectangles with #ffffff using the paint bucket tool.

What’s a contact form without a pretty submit button? Using the rounded rectangle tool – create a button and add an inner shadow (66 percent opacity) and a 1px inner stroke – #85827e. Add the text “Submit” on top of this button using “Rockwell” at 14px.

Finally, remember I said the footer should have the same detail as the other parts of the page? We’re going to add a nice glow in the background which will highlight our large text and the contact form. Select the footer background with the selection tool. Next, pick a soft round brush at 500 pixels, select color #ffffff and decrease the opacity of the brush to 10 percent. Center the brush horizontally and halfway above the footer – click once and Voila – instant glow in the background!

And there you have it. We’ve just created a full page mockup in Photoshop. Next will be coding the HMTL and CSS – so stay tuned!

You can download the .psd from this link

It looks like the only thing it has in common with Kubrick is the rounded corners and the slim page width of 728 pixels. Anywho, you can take Kubrick on Crack! and install it in your WordPress site for free.

Home Page with a Feature Post

Unlike the original Kubrick – this theme automatically takes your latest post and converts it to a Feature post. It sits atop of a dark fading background with a custom image field that looks like its on top of a stash of photographs. It uses the custom field key: “image“. To learn how to use custom fields (which I strongly recommend) – read it from the codex. No image resizing is required – they’re all automatically cropped, thanks to the TimThumb script by Darren Hoyt. But for best results – upload an image that is wider than 424 pixels and longer than 284 pixels in height.

The search form magically appears in a fade in box. This script is “Thickbox” and provided by jQuery. The spectacular smoke art background is by Applse Actually of Deviantart.com.

Theme Options

Kubrick on Crack! comes with a control panel so you don’t have to touch the code in order to customize for your website. The options include the following:

1 – Header Logo, once your logo is uploaded, enter the url here. I recommend using a transparent .png to preserve the look.

2 – Twitter account, this will save to the link that is behind the twitter icon in the header.

3 – Custom Feed, this will save to the RSS icon in the header. If no value is provided – the default blog rss will be used.

4 – Google Ad Sense, this will create an ad space right below the single post page. (use the the 728 leatherboard style). To learn more about Adsense, click here

5 – Google Analytics, this saves your Analytics code below the footer – which of course is invisible. To learn more about Analytics – click here

You can see Kubrick On Crack! in action at my Demo site. Download the theme from this link.

Update: the original PSD files can be now be dowloaded from this link. *There are 3 photoshop files in the zip – one for the main layout which contains all of the elements except two buttons – which are in the other psd files.

All I ask is for you to leave me a comment, Retweet or Digg this article, or follow me in Twitter.