The theme went for sale in Themeforest – and it did pretty well the first several months – but finally reached its non selling point. Today I’m selling this theme for a measly $10 (the .psd files are FREE and is a separate download). For this low price – its practically free! Read on to see why its a good deal:

homepage of eureka

Theme Features:

At first look, you will fall in love with Eureka’s balanced design. A solid black header with just enough room for your logo and page navigation. The large feature slider will sure get your message out: loud and clear. The sharp containers that house the posts and sidebars are classic and well crafted. You will notice the comments area, social buttons, icons and footer – all complete the design as part of the whole. Your visitors will love your website – and for that, will want your business. Give Eureka a try.

Stop motion (frame-by-frame action) is an animation technique that makes a physically manipulated object appear to move on its own. The object creates an illusion of movement when the series of frames are played continuously. Here are 24 Stop Motion reels that I have found that are so creative – that will spark your creativity in your future projects.

Reel 2010

Dave Legion

Ace 5 Studios

Just the Basics

Vincent Boudier // Showreel 2010

Dark Wood

A dona de pedaco

Lesso 2011

The World of Design Animation

Tui Space

Bald Gorilla

Oliver Koch Reel //2009

SevenEdge // Show Reel 2010

Dyn Styrlund Design Reel

th3 Unknown // Showreel 2010

The Fruit Box

The Magical Classroom

Carnet

Young Creative Chevrolet

Emmanuel Cruellas // Reel 2009

Johny Likens // Reel 2010

Showreel DutchMotionWorks

4 Fourths

Demo Reel

It’s your Turn

Aren’t they one of a kind? Which one did you like the most? Do you have video reels that you think should belong in this list? I, for one thought they were all brilliant. I would love to hear your thoughts. Please leave your comments and join the discussion in the form below.

This has been a guest post by Stelian Subotin. Stelian is a enthusiast and design fan from Republic of Moldova. Right now he is working on his new design-related blog called Rocket Graphics. Visit RocketGraphs or follow his twitter account @rocketgraphs.

So what has Changed?

As you see from the demo, I’ve tried to preserve Aparatus’ original design. The few things that I changed is more for performance rather than visual. I went ahead and removed the Tweetmeme buttons in the archive pages – which greatly improved page loads. There was a horizontal scroll bar bug in the old version – which is now fixed.

The theme still utilizes Cufon – but only for select areas of the theme such as the Logo and the footer. The logo now has an etched and gradient look – which is a big enhancement. I also added some Google fonts – to the post and comments headings. A few CSS 3 code is also used to improve the presentation of the text a little bit more.

A new post thumbnail handling code is used. Both feature images and custom fields still work, it just handles the resizing better. The feature image also appears in the single post page – this is something many users have requested for.

The theme now supports the new WordPress menu system. You can now customize the menu according to your craziest “navi-wishes”.

Lastly, a smarter theme options is integrated. If you don’t enter a Twitter account – no button or feed will show in the theme. The same goes for the large ad button.

How to Use:

Installing the theme is just like any other WordPress theme. Simply go to the “Appearance” > “Install Themes” section in your admin panel. Click the “Upload” link – browse to the theme .zip file and “Install Now“.

Adding Post Thumbnails to your Posts:

To add images to your posts you can use the Post Thumbnail feature of WordPress. Simply go to the post in “Edit” mode. On the right side of the page – click on “Set Featured Image“:

This will trigger the image uploader. Upload your image and as soon as that’s done, click the “Use as Featured Image” link:

Note that you should keep the file sizes to a smaller size. The resizing script has a maximum size limit.

How to Use the Slideshow:

The slideshow automatically pulls your most recent posts (5 maximum). You can change this to pull from a specific category by going to “Appearance” > “Aparatus Options” and putting the category slug in the field: “Category Name for the Content Slider“. You can also take out the slideshow or choose to not automatically slide – by checking the appropriate boxes in the theme options.

Also, if you see the slider with the “Oops…Looks like” message (shown below) – that means you haven’t assigned a post thumbnail to your post. Read the section above called “Adding Post Thumbnails to your Posts“.

How to insert a Photo Gallery:

Adding a photo gallery into Aparatus is as easy as pie. Simply go to the post / page you want in “Edit” mode and click on the image uploader. Navigate to your local directory and highlight the images you want and click “Open“.

As soon as the images upload, click on “Save Changes” and additional settings will show. Select your options and click “Insert Gallery“.

Update your post / page and preview it. You should see your gallery in place.

How to Customize the Navigation Menu:

Go to “Appearance” > “Menus” and start by creating a new menu. Enter a menu name and click “Create“.

This will create a blank menu panel in the right side of the page. The idea is to select categories, pages or custom links from the left side, click the “Add to Menu” button – and it will appear on the menu panel in the right. In this panel, you can drag and drop the links so you can design the menu hierarchy. Links that are staggered underneath become the drop down links from the respective parent – you get the drift.

Once the menu is done – hit “Save Menu” and in the top most left column box called “Theme Locations“, select the menu you just created from the drop down called “Header Menu”. Click “Save” and view your website. You menu should now be in place.

Switching Stylesheets

Aparatus comes with 4 different color styles – also known as stylesheets. Go to “Appearance” > “Aparatus Options” and in the top most section is a drop down called “Style Sheet”. Select Maroon, Black, Blue or Green and “Save Changes“.

Adding the Twitter Badge and Latest Tweet:

Still in the theme options, right underneath the Style Sheet drop down, is the Twitter account field. Enter your Twitter user name in this field.

Save your changes and view your website. You should see a nice Twitter Badge in the Header – and your latest Tweet in the sidebar area.

Advertising Blocks:

You can ad advertising blocks in the sidebar area right in the theme options. You can do 1 large 300 x 250, and 4 small 125 x 125 squares. Go to the theme options page – and see the “Advertising Blocks” area. Enter the image source of the ad (where the image is coming from), and the destination (where the link goes when the image is clicked).

Save your changes and view your site. You should see the ad blocks in the sidebar nicely lined up:

Frequently Asked Questions:

I’ve gathered a several most asked questions in regards to Aparatus. Read below to see if your question is one of them.

Modify the Twitter Badge Image

Many want to modify the large Twitter Badge in the header. Please note that the font I’ve used in this badge is called – League Gothic, and you need to download that in your Fonts folder to twiddle the .psd file.

Slideshow is not showing images

If you’re using custom fields – make sure you have GD library installed. You also have to make sure that the cache folder inside scripts (themes/aparatus/scripts/cache) is fully writeable. In addition, you need to enter at least a couple of posts to kick start the slideshow.

How To make posts in the slideshow appear below the slideshow

By default posts inside the slideshow does not duplicate underneath – where the rest of the post are. Many like it this way – but some have asked how to make them show below as well. To do this look for this line of code inside gallery.php and delete it:

$saved_ids[] = get_the_ID();

How to fill the Author Box Information

The “About the Author” box right in the single posts page grabs information from your profile. Go to “Users” > “Your Profile”, under Biographical Info – enter your stuff there.

The Header Text takes too long to convert into the logo

Sometimes Cufon takes a bit of time to do its thing. Aparatus uses this to use your site name and automatically convert it into a decent looking logo. But sometimes – due to client browser constraints, it performs poorly.

For this issue it would probably best to use an image for your logo. If you really like how it looks with Cufon – just take a screenshot and convert the image into a jpeg and replace it inside the header.php.

Conclusion:

Enough of the FAQ! Download already! I hope you enjoy this theme as much I’ve seen it in many blogs. If you want to visit the original release post, click here. Otherwise, leave your comments and questions below. Happy blogging!

Notice the patterns they used that shadow the text. They’re usually best as diagonal lines. A screenshot of what we’re building is shown below:

Ready to get started? Let’s begin:

Step 1 – Create your pattern

Fire up Photoshop and create a new file. The dimensions are 3 pixels wide and 3 pixels tall:

Ctrl + Shift + N to create a new layer – leave it untitled and click okay. Zoom in to the document as close as you can (by pressing Ctrl and + at the same time). Hide the background layer by clicking the “eye” icon from the layers palette:

With the Layer 1 selected, grab the pencil tool – decrease the size to the smallest (1 pixel), set the color to black and click 3 times onto the layer (in a diagonal line). Not to worry about being perfect – it will snap into place:

Go to Edit > Define Pattern. You can name you pattern and close the file without saving. Your pattern should be saved in your options palette.

Step 2 – Set the Background

Create a new file in Photoshop – a good size is 800 pixels wide and 500 pixels height. Add a daub of color to the background layer – I chose #c8bcb2:

To amplify our text effects even more – I like to add some texture on top of our background layer. A new website called Tileables specializes in such textures. I grabbed the “Fabric” pack from the Tileables-Pack-04 collection – open the .psd file from the zip file and drag your desired texture into your file. Decrease the Opacity of this layer to about 20 percent:

Create another layer. Select the paint brush tool – set the pixel size to 600, color to #ffffff, and Opacity to 31 percent. Click on the center of your document.

Step 3 – Create your Text

Using the text tool – type in your title, set the font size to real big (I’m using New Clarendon Font type and its set to 176 pixels, and bold type)

Right click on the layer and duplicate it. Nudge the layer downwards and rasterize it (right click the layer > “Rasterize Type”).

Double click on the rasterized layer and this will bring up the layer style window. Click on the “Pattern Overlay” option and select the pattern that we’ve created from Step 1 (should be the very last swatch).

You should see our layer with our newly applied pattern. The problem is – the original white background bleeds through.

Double click on the layer again to bring up the styles. In “Blending Options” – make sure it’s on “Blend if Gray” and slide the first handle to the right all the way to the middle. This should take care of the white bleed:

By now you should be a master of duplicating layers. Duplicate the original text layer once more, rasterize and fill with #ffffff. Nudge this layer downwards just a couple of pixels. This will give it a more dramatic outline effect:

Step 4 – Embellishments

Ooh – I love that word! “E-M-BE-LL-ISHMENTS” – I like the way it rolls off the tongue. Anyway – our text is technically done. You can now add your own graphics or trimmings that would complement your new heading.

I accompanied mine with the word “flyer” – with an entire different font type, partnered with a horizontal line with an etched effect. Here’s how that’s done:

For the word “Flyer” I chose Nevis, and made it all capital letters. The font size is 36 pts, color is #000000.

Place the subtext directly in the center of the main heading:

Using the Line Tool, draw a line underneath the main heading (hold the shift key while drawing). Use a 2 pixel line with #000000 fill:

Duplicate that layer and change the fill to #ffffff; then nudge the layer a couple of pixels downwards.

Combine both line layers by selecting them, right click and hit “Merge Layers”. With the selection tool, change the feather to 2 pixels; select over the word “Flyer” with just enough padding – then hit delete:

Conclusion:

And that’s it! Take a look at the screenshot below for the final product. You can download what we’ve just created – but it will contain rasterized text layers. I did this because chances are – you won’t have the fonts that I used. Feel free to leave a comment below.

Features

The layout itself is very modern. The page is housed in a beautiful etched container with very subtle textures. The large feature section showcases the “Apps” main message with large “call to action” buttons to get the viewers to instantly join.

There’s a blue ribbon separating the main section and the latest posts / sidebar. I imagined this to be an expanding area for categories and what not. Typically a little javascript should do this trick. The rest is pretty conventional, icons, typography, grid spacing and pixel perfect alignment.

The .psd file itself is grouped, layered and organized. Feel free to use – under creative commons license. I would like to know if this type of design still suit clients out there. If you feel it’s a bit “played out”, out dated – whatever, Please let me know in the comments section. Download the file from this link.

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.

The Websites:

Verizon Wireless

Sprint.com

Blackberry.com

Palm Pre

Sony Ericsson Xperia X10

Nexus One

WireFly.com

Of course -The iPhone

HTC

T-Mobile

The Free PSD:

Below is a preview of the Photoshop mock up free for download. It was inspired by the list above.

Here is the download link. Feel free to check out my downloads page for other free stuff you can use in your design projects. Follow me in Twitter or leave a comment below – That’s all I ask.

So much for a name change. Nonetheless, Aparatus is packed with features and design delight that aims to tickle your innermost web mag fancy. I have included extensive theme options that will leave you not needing to touch a single line of HTML. I have cufonized fonts for the headings and the site logos – that you need not create your own. I have modified the WordPress loop so much that it covered almost all possible looping scenario. Last of all, Aparatus comes with four different stylesheets targeted to suit your color schema.

Updated Twitter Badges!

I received enough comments on the Twitter badge to say “Follow ON Twitter” as supposed to “Follow IN Twitter“. So here they are:

• Maroon Badge
• Blue Badge
• Green Badge
• Black Badge

Simply replace the existing badge image in the Theme’s images folder.

The Slide Show

As for many magazine styled websites – a slideshow is a must have. Thanks to JonDesign’s Smooth Gallery – which made this possible. The slideshow by default pulls your five latest posts. The loop then continues to present the remaining of your posts directly below. The theme options allow total exclusion of the slideshow, as well as automatic slide. You can also specify a specific category to be pulled into the slideshow – without ever duplicating the posts in the bottom. All while the default loop logic is still acknowledged and functional. What this means is that – the loop still recognizes the options you enter in WordPress admin – not just in the theme (i.e. number of posts to show, etc); in addition, the paging system (next page etc) still works and automatically hides the slideshow in the inner pages. Oh, I also re-styled the WP-Navi Plugin (the right way), by de registering it’s default stylesheet.

WP 2.9 Thumbnail Ready!

The images in the slideshow as well as the thumbnails per post can be set by using the new “set as thumbnail” feature in WP 2.9!. This supersedes the old school way of inserting “custom-fields” – but will still work with either! You can use the thumbnail feature or custom fields set to “image”.

Ads, Twitter, Widgets and Everything else

The sidebar comes with advertising blocks which you can set up in the theme options panel. When you enter your Twitter account in the options, this will dictate the @replies in the Tweet Me buttons, the big “Follow my Updates” in the header, as well as the last tweet in the sidebar. The popular posts and recent comments tabbed area are all non-plugin driven – which means the code is all inclusive with the theme, without needing to install a plugin. Lastly, the sidebar supports widgets, the comments are threaded, gravatar – ready, as well as suckerfished drop down menus for the categories in the header.

That’s Enough! Download Already!

To view a live preview of Aparatus – click here. You can purchase the theme for $10 through Paypal.

Don’t forget to check on PsPrint Online Printing for high quality printing services.

A number of leading designers have already dominated this WordPress premium themes market; quite notably: Woothemes, DIYThemes and StudioPress.

But amongst these big names you may have come across a more succinct, straightforward and classy premium theme designer – simply named “Elegant Themes“.

Who is Elegant Themes?

Elegant Themes is owned by a designer named Nick Roach. This means that all of the designs and code that is produced from Elegant Themes is from this mighty fellow. According to Nick:

I created this website to provide WordPress themes of quality and integrity. I craft my themes with a goal of simplicity and professionalism and strive to inject each design with a dose of modest elegance. I believe that your website is not just a tool, it is an integral part of your identity. My job is to respect each customer by providing attractive and userfriendly templates that will help you achieve your online goals.

What’s so special about Elegant Themes?

Quality over quantity. Elegant Themes is hardly a large collection – I mean, there’s only about 30 downloadable themes at the time of this writing. But note they are quite high quality. Check out some of them below:

Wooden

Very down to earth, classy and professionally done – this theme can transform your blog into a modern website wonder.

Lumin

Soothing to the eye with subtle textures and sharp, detailed accents – this theme is packed with visual amenities that scream WEB 2.0!

GrungeMag

Semi-magazine, semi-newspaper – beautiful textures, slider, thumbnails – simply stunning.

Evid

Create your own “Hulu” styled video website with this theme:

Deviant

The ultimate grunge look! Random page tears, crumpled paper, dirty textures – you want your blog to stand out from the crowd – this be the theme for you!

Like Nick said – “each design is injected with a dose of modest elegance”. With each theme you will find excellent color schema, superb use of typography, plenty of textures, just the right amount of Javascript, and above all – originality. The themes obviously took time to build.

You Can’t Beat 20 Bucks a Year!

I don’t think I can elaborate on this any further. $20 dollars a year gives you unlimited access to all of Elegant Themes. Whether you’re a blog owner, an entrepreneur, or even a web developer – you’ve already won by having this arsenal of elegant designs to beautify your websites; all for about the same price as a bucket of fried chicken. Head on over to Elegant Themes!

After choosing the theme you want to use, another important thing is to find cheap webhosting for your site.

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