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.

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.

Corporate Blue Home Page

The design is a modern layout ideally for a financial or business institution (anywhere a progress chart can be represented). A large feature area with a colorful bar graph sits right below the header. Underneath this area are three even columns with large thumbnails that can house summaries of your company profile, links or even the latest news.

Finally, the page includes a mid-size footer with a grayscale version of the logo, page navigation and copyright information. All buttons are vector shapes for easy customization. Page elements are professionally spaced using the 960 grid system, while text layers are anti-aliased to represent how real web fonts look in a live browser. You can download Corporate Blue from this link

Bang Business Cards

This second template is a submission from one of my followers: G S Vineeth. The Bang Business Cards is ideal for start ups, graphic designers or even a product. The design features bright rays of green as a background, topped with a rounded container with subtle gradients. The text elements are beautifully etched, also with the same green shade.

The fonts used are called 20th Century which can be downloaded from this link. You can view additional work from GS Vineeth from his Graphic River portfolio. Download the Bang Business Card template from this link.

Conclusion

So it has been a good couple of years. I have a steady rate of readership, a number of downloads as well as a few followers. My posts keep coming, client work is steady – all is good. Once again, I ask you to keep me going – by simply leaving a nice comment below or follow me in twitter and facebook. I hope you make use of the .psd files and maybe make your next project a little bit easier.

Step 1: Set the groundwork

In Photoshop, create a new document, 800 pixels width x 340 pixels height. Add a new guide – 70 percent from the top border of the document:

Add a dark background (I chose #292929), add a text layer and type out your words. The text settings are: 100 pt in size, color #ffffff, and type is “Myriad Pro – Black Italic”. Note that if you don’t have the same font – use something a similar italic, block type font.

Now, delete all the letters in your text layer and duplicate the layer for each letter. What we’re trying to do is have a layer in its own layer like below. Nudge each letter so they’re quite close to each other:

Step 2: Create the Text Effects

Now we’re ready to create the text effects. Double click the first letter and apply the following effects:

Drop Shadow:

Inner Shadow

Gradient Overlay

Add the following colors for the gradient (to do this click the gradient box from above). Move the color handles in the bottom bar to the position indicated. Leave the colors at #000000 and #ffffff.

Step 3: Copy and Paste the Layer Styles

Right click the first letter layer, select “Copy Layer Style”

Go to the next letter layer, right click and select “Paste Layer Style”

Continue doing this process to all the layers.

Step 4: Final Touches

Adjust your letter positioning according to your text content. The point is to just have enough spacing for subtle shadows to appear onto the next letter. I also decided to change the font color to the word “flyer” to #d30000 to match my color schema – choose your own color for yours.

Finally, create a new layer just above the background layer. Using the brush tool with these presets: (choose a really soft tip, adjust to 300 pt, with color #ffffff, opacity level to 24 percent). With just one click – daub right in the center of the document to give it that really soft glow in the background.

Conclusion

There you have it, a simple yet beautiful logo from nothing more than layers of text subtly overlapping each other. Play with the effects to your heart’s desire. You can even adjust the vertical positioning of each letter – just to add a bit more kick. Feel free to Download the PSD file.

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.

Argyle’s Drudge has a very narrow content area of only 746 pixels. I chose to stay away from the standard 960 grid design because I find that grunge layouts don’t seem to play well with it. Speaking of grid based design, find this article about lining up your posts perfectly within the grid. As I was saying – the whole point of grunge is random and spontaneous – conforming to a grid just doesn’t fit.

More Details:

The pale blue watercolor splash background is courtesy of my Backgrounds etc. The beautiful hand sketched fonts is known as “Fail Font” and can be downloaded from DaFont.com. Note that since “Fail Font” is free – it’s the perfect opportunity to use Cufon in your coding. Cufon is the technology that enables you to use any kind of font in your pages (read article).

Argyle’s Drudge is completely free to use for your next theme of choice. May it be WordPress, Blogger, Typepad: all I ask in return is for you to follow my updates in Twitter or leave a comment below.

Download Argyles Drudge.

Usage

Blue Rooster is ready to use out of the box. The standard blog template will work with or without assigning thumbnails to your posts. In order to use thumbnails – you would have to assign custom fields to your posts with name: “image“. To learn more about custom fields – check this link from the WordPress Codex. You DO NOT have to resize your images for the thumbnails, thanks to the Darren Hoyt for his TimThumb script which made this all possible. The thumbnails are also powered by jQuery: PrettyPhoto – which is a lightbox clone where the larger images are displayed when clicked. A link to the single post is also included with the larger image.

The Bonus Templates

If you want to use the slide show in the front page – just apply the template “template-home” to your home page. Then make this page the static page of your site. To customize the slide show – simply replace the images in the images folder. Note that there are two sets of images: the larger image and the bottom bar. The active state and non-active state of the bottom bar matches the larger image. The Testimonials section in the template are actual posts under a category: testimonials. Simply create this category and start creating posts under it. The testimonial author works as the title for this section.

The Photo Gallery page is as simple as applying “photo gallery” to a page. The images in this gallery are automatically populated from your custom field thumbnails. So in order for this to populate – you must use thumbnails in your post.

Other Stuff

A custom login form is built in the header which is also jQuery powered. Once logged in will give you quick access to the dashboard, as well as quick “Edit” links after each post. The single post page includes an author information which feeds information from your user profile and Gravatar. So to utilize this section – your user information and gravatar must be filled out. The comments section support threading and pagination.

How to add links inside the Slideshow

In the template file called “template-home.php” is a section called “rotate” (means a div with an id named “rotate”). Within this rotate section, is a series of empty divs that have different ids – namely: fragment-1, fragment-2 and fragment-3. Even though these fragments are empty – they are styled with a background image in the stylesheet – so they appear that they have a large image.

You can enter anything inside these fragments as you wish (text, other images and even links).

Save the template and view

Now it’s totally up to you to change the background image, to fit the new link. It is also up to you to change the “style” of the link – to make it into a button, a large image – whatever you wish.
As mentioned, these div fragments are empty – so you can add anything you want.

Visit PsPrint Online Printing to get the best deals in commercial printing!

Part 1: The Key

Using the Rounded Rectangle tool, Create a new shape of a square, with fill color #2c2c2c

Using the Add Anchor Point, add new anchors at both lower corners of the shape. Drag these new anchor points upwards to form a nice edge.

Apply a Gradient Overlay on the shape. Adjust the settings as shown below or you can choose your own gradiation.

Duplicate the layer you just created and Ctrl + T to transform. Transform it to about 90% less than the original size. Make sure you constrain the proportions.

Apply a new layer style – Stroke, with fill type as gradient, size of 3 and the rest of the settings like shown below:

Using the rounded rectangle tool and the ellipse tool, create two more shapes. The rounded rectangle will have a fill color of #ffffff, the ellipse with fill color #2c2c2c. Apply the same layer styles to both – stroke with gradient fill. Play around with the gradients and try to match the outer shapes:

Next is the shaft of the key. With the Pen Tool, start outlining the jagged edges of the key shaft. You can use a real key as a guide. I used two shapes for the shaft – one for the main, the other for the underlying teeth behind the main shaft. I also used the line tool to draw a line on top of the main shaft.

Again, apply some layer styles to the two main shapes. First is a stroke with gradient fill type – reduce the size of the stroke line to 1 and adjust the gradient colors. Do the same thing for the teeth.

The final result should be something like below. We now move on to the car alarm part.

Part 2: The Car Alarm

Hide all the layers you’ve done so far so you won’t get distracted. Starting again with the rounded rectangle tool, create a new shape – slightly bigger than our key head before. Make the radius to 50 pixels for a more rounded look. Go to “Edit” > “Transform” > “Perspective” and drag the upper handles closer to each other.

Again, apply layer styles to the new shape: An angled gradient overlay with the setting below, as well as a thick stroke with gradient fill type – again play with the shades.

The first shape should look like something like below. Note that when playing with gradient fills – there’s no exact way to do it. You just have to follow what looks right with your eye considering the light, shadows etc.

Next is to add two more shapes using the ellipse tool. One is for the keyhole which is smaller, the other for the button. Both will have stroke styles with gradient fill types. By now you should know how to play with this effect. Remember that the keyhole is to have a fill of white – or whatever background color you have, and the button is a darker red, also filled with a gradient:

And we’re done with the car alarm part. Next part is pretty easy – the key rings.

Part 3: The Rings

Start with the ellipse tool, create an oval shape (size it according to the key and the alarm). Apply layer style stroke of 1 pixel, with type gradient fill. Adjust the gradient accordingly varying colors from light grey to dark.

Duplicate the first ring twice. The duplicate rings should have a Fill (not Opacity) of 60 percent each. Adjust the angle of the gradients of each layer stroke to go in different directions. Again, its up to your judgment what looks best. You’re trying to achieve the illusion of aluminum texture with the shines.

From these three shapes – you want to duplicate them into another group. Click Ctrl – T to transform about 80 percent smaller than the first group.

And that is the final step for the rings. Next section is combining all the elements together.

Part 4: Combining Them Together

The easiest way to work with what we have so far is to rasterize the shapes into more manageable sections. Rasterizing means to flatten the shape for a different kind of editing. It is good practice to always keep your layers grouped and organized – in my case, I’ve grouped them into three sections: key, alarm and rings. To rasterize – I select one group, duplicate it and from that group I merge layers. Once its merged – the key group is going to be just a key layer, the alarm group – an alarm layer and so forth. DO NOT rasterize the original group! Its good practice to keep the vector shapes intact just in case you want to change something.

So after merging each of the groups – we should now have four layers: key, alarm and the two rings.

First rotate the key a few degrees clockwise. Put the bigger ring on top of the key layer. Using the ellipse marquee tool, select the inner section of the rings and start erasing the area where the key is supposed to be visible.

Do the same thing for the ring layer. You can use any selection tool that you’re comfortable with using: Lasso, Magic Wand – I use the pen tool because it’s more precise and have more control.

Finally, add some shadows in the places there should be shadows. I do not know of an efficient way to do this but to use the brush tool. Using the built in Photoshop shadow or glow effects apply it in the entire layer – leaving you with having to separate the layer, then erasing – this may be suitable for larger surface areas – but for our purpose, just dab a few brush spots – play with the brush types, opacity and strength, and you should have a pretty decent effect:

Do the same to the rest of the layers. You will be using a combination of rotating, erasing and painting to achieve the interlocking illusion as in a real set of keys. It is important to pay attention where the light, the shines and the shadows are supposed to be. Also, keep in mind – you may rotate your layers, but DO NOT – I repeat DO NOT resize them. Resizing rasterized layers result in extreme loss of quality. If ever you need to resize say the key image – you will have to go back to your vector layers for that. The interlocking rings, key and alarm should look something like this:

And there you have it. You’ve just created a key with car alarm entirely in Photoshop. You may download the psd file from this link. All I ask is for you leave me a nice comment below, follow me in Twitter or subscribe to my RSS Feeds.