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.

Before I delve into the details of FlowPlayer, view the demo below: (Notice the absence of the “YouTube” logo)

What is FlowPlayer?

FlowPlayer is an open source video player for the web. It is a way for you to stream videos in your pages, from your own server. Thus, eliminating the need for external video serving services such as YouTube. FlowPlayer is highly extensible and customizable. Though it may take a little more than a few clicks – the benefits far outweigh the work needed to get it running. Consider these pros and cons:

Pros:

Cons:

How to use FlowPlayer

What I really liked about FlowPlayer is their extensive documentation. It includes walkthroughs for beginners, as well as in depth instructions for the expert programmers. To start using FlowPlayer – all you need is to do the following:

1) Download the FlowPlayer Files – This download includes the actual FlowPlayer .swf files as well as the .js file to get you started. It also includes an HTML page that demonstrate the basic installation of FlowPlayer.

2) Include the flowplayer.js in your HTML:

<script src="path/to/the/flowplayer-3.1.4.min.js"></script>

3) Setup the player container – Simply add an anchor tag with 3 important attributes: a) href – the pointer to the video file, b) style: determines the size and basic display properties of the player and c) id: very important – this acts as a selector for the javascript to target to load the player.

1
2
3
4
5

<a  
    href="http://www.mywebsite.com/myVideo.flv"  
    style="display:block;width:425px;height:300px;"  
    id="player"> 
</a>

4) Install Flowplayer – The final code tells FlowPlayer to install in our anchor tag:

<script language="JavaScript"> 
flowplayer("player", "path/to/the/flowplayer-3.1.5.swf"); 
</script>

FlowPlayer and WordPress:

Oh yes – you can actually embed Flowplayer inside your posts. The beauty of it is – there are actually several Flowplayer plugins already available for WordPress. Though I’m just going to cover the two most popular:

FV WordPress Flowplayer - developed by Foliovision, is a straight forward FlowPlayer plugin made exceptionally easy. All you need is to install, upload your video and add the plugin shortcode to your posts. Note that this is the plugin I’m using for my video demo above. The screenshot below shows the plugin options page:

Flowplayer for WordPress – created by David Busby of Saiweb, this plugin also includes player customization features as well as commercial license key input for advanced settings:

Embed FlowPlayer in your Theme:

If you’re like me, you may come across a website project that requires videos hosted in their own server. Of course WordPress and FlowPlayer is a good combination. What about if the requirements for the player are so extensive that may not be achieved with any sort of plugin? This is when you’d want to embed FlowPlayer in your theme.

The process is pretty much the same as the basic FlowPlayer installation. The only difference is we’re using custom fields for the href attribute of our player. In your theme folder, edit single.php and include this code inside the loop:

1
2
3
4
5
6

<?php if (get_post_meta($post->ID, 'movie', true)){?>
<a href="<?php echo get_post_meta($post->ID, 'movie', $single = true); ?>"  
			 style="display:block;width:590px;height:278px"  
			 id="player"> 
</a>
<?php }?>

This sets up a default player for each post, wrapped in an “if” block. This way you customize the page to your client’s extensive requirements. A screenshot of my page mockup is shown below:

Don’t forget the call to install FlowPlayer:

1
2
3

<script>
flowplayer("player", "<?php bloginfo('template_directory'); ?>/flow-player-files/flowplayer-3.1.5.swf");
</script>

Now all you need to do is upload the movie using the default WordPress media uploader, and plug in the url in a custom field set to “movie”

Conclusion

If you haven’t already noticed – almost every aspect of FlowPlayer can be customized. Having this much control over video content is invaluable and cannot compare to services like YouTube. Best of all, the basic version is free under the GPL license which you can use for personal or commercial purposes. Note that there are also paid versions that determine the amount of branding you can as well as legal domain usage. Head on over to FlowPlayer’s website for more information.

1

<div><?php wp_footer(); ?></div>

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 download the theme from this link. If you like the theme – you can do one of many things to keep me happy: Follow me in Twitter, Donate some coffee money, Tweet about it, subscribe to my feeds or even just leave a nice comment below.

1

<div><?php wp_footer(); ?></div>

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.

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.

You can demo Blue Rooster from this link. Download the theme from here. I can also release the .psd files for customization only if I get a large response (by leaving comments). Otherwise – feel free to check it out and use it for your next project.

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.

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.

Part 1 – Creating the Image

In Photoshop, create a new image 432 pixels by 78 pixels. Add a title for your bar, and four icons of your subscription options. In our case, we’re using an RSS feed icon, Twitter, Email and Facebook. *Icons are from WeFunction Collection. Line them up and space them evenly.

Add guides that divide each button. Also be sure to add a guide right on the top of the document. Lock the guides in place – you will need these dimensions when creating the CSS.

Multiply the canvas height by two. Make sure you click the button that keeps the canvas flushed to the bottom

Select all existing layers and create a duplicate set. Merge all the layers in that set to create a single layer which we’ll use for the hover effect of the links.

Nudge the new layer upwards – make sure it’s lined up exactly as the bottom layers. To create a hover effect – I desaturate the layer all the way to the max – making it a grayscale layer.

Make sure you hide the background layer and save the image as a .png.

Part 2 – The HTML

We’re going to need a single div and an unordered list of links to render the sprites. Make sure to add an id for each anchor tag. This is how we’ll match the image through our stylesheet.

1
2
3
4
5
6
7
8
9

<div id="subscribe-div">
<ul id="subsc">
<li class="title">Keep Updated</li>
<li><a id="rss" href="#" title="Subscribe to RSS">RSS</a></li>
<li><a id="twit" href="#" title="Follow Us in Twitter">Twitter</a></li>
<li><a id="mailrss" href="#" title="Get Feeds through Mail">Subscribe By Email</a></li>
<li><a id="facebook" href="#" title="Find us in Facebook">Facebook</a></li>
</ul> 
</div><!--subscribe-div-->

Of course you have to replace the # with your links. Note that the first list item is not a link. This is just a placeholder for the title “Keep Updated” title.

Part 3 – The CSS

1
2
3

#subscribe-div {margin:0 auto;}
#subscribe-div ul#subsc li {display:inline; float:left; }
#subscribe-div ul#subsc li a { background:url(images/social-sprites.png);  display:block; float:left; height:78px;}

The first selector (#subscribe-div) can contain general properties of your bar. This includes overall padding, margins or positioning. The second selector (#subscribe-div ul#subsc li) – lets the browser know to display list items horizontally. The third (#subscribe-div ul#subsc li a) – calls our .png image.

#subscribe-div ul#subsc li.bar-title {background:url(images/social-sprites.png); background-position:0 0; width:156px; height:78px; text-indent:-9999px;}

This styles our list item bar-title with the “Keep Updated” leftmost section of our .png image – hence the position of 0 0 (means coordinates of 0 and 0). Next is styling the normal state of the links:

1
2
3
4

#subscribe-div ul#subsc li a#rss {background-position:-156px 0; width:68px; }
#subscribe-div ul#subsc li a#twit {background-position:-224px 0; width:65px; }
#subscribe-div ul#subsc li a#mailrss {background-position:-289px 0; width:65px; }
#subscribe-div ul#subsc li a#facebook {background-position:-354px 0; width:78px; }

The above code reflects the normal state of the buttons in our list. The only properties applied are width and background position. To get the width of each button, you have to go back to your .psd (remember applying the guides in the beginning of the tutorial). Note that not all the buttons are identical in size, thus varying in widths. To get the background position, always remember: the first value is the left coordinate and the next value is top. Since we already know that our title is 156 pixels, we know our first button (rss) is going to have a background position of -156px.

Next is the hover state.

1
2
3
4

#subscribe-div ul#subsc li a:hover#rss {background-position:-156px 78px; width:68px;}
#subscribe-div ul#subsc li a:hover#twit {background-position:-224px 78px; width:65px; }
#subscribe-div ul#subsc li a:hover#mailrss {background-position:-289px 78px; width:65px; }
#subscribe-div ul#subsc li a:hover#facebook {background-position:-354px 78px; width:78px; }

Notice I just copied the code for the normal state and re-pasted it. The only difference is the use of anchor pseudo class :hover is appended to the “a” selector, and the top value of background position is now 78 pixels. This is because we want the .png image to shift 78 pixels downward, once the mouse is hovered over each link.

The only thing left to do is to indent the text of the links. This is done in the #subscribe-div ul#subsc li a selector (text-indent:-9999px;).

And that’s it. We have finished creating a subscribe bar from an image in Photoshop, HTML and finally adding some styles with CSS. You can view the demo from this link, or download the source code from here. All I ask is for you leave a comment, subscribe or follow me in Twitter.

The Home Page

The Garamond’s home page mimicks a magazine layout. This was made possible without any special wordpress queries, nor does it filter by categories. Instead, the latest post is automatically styled different. Thanks to this neat trick by Ruhani Rabin. The feature image and the thumbnails are automatically resized upon client request. Meaning, you can upload any size image (preferably wider than 540 pixels – which is the size of the container), assign it to a custom field – and voila! Images are cropped, zoomed and sharpened when once the browser hits it. The code I used is from Darren Hoyt known as TimThumb.

The Inner Pages

The Garamond is a bloggers theme. Traditional templates are intact: search, archive, category etc. I also included an authors bio at the end of each single post, as well as an author template which grabs all their articles. I went a little overboard in styling the subheadings for the post (shown below). The default font family used is of course – Garamond; although since it is not a standard font – Georgia is used as back up. The contrast between the larger text and the tiny Verdana is striking – which I felt was good.

Other Features

The two sidebars and the footer are all widget driven. Comments support Gravatars, pagination as well as multi-level threads. I’ve also added a random quote container right below the header – which requires the Stray Quotes plugin by Italyisfalling.com


You can view the demo from this link, or download directly from here. All I ask is for you leave a comment below – or follow my updates via twitter.