………………………………………………………………………………………………………………………

Let’s begin by creating a background.  You may use mine or create your own.

Begin by creating the base of the table.  Use your Rounded Shape Tool with an 8px radius, and a background of #a22727.

Duplicate the layer, and set the color to white. Rasterize the shape, and using your Eraser Tool with the size of 100px, fade out everything but the tip.  It should create a nice-looking gradient.  Set it to overlay, and here it is:

The glare will work well here, so grab your rounded shape rectangle and create an inner rectangle inside right up to the middle of your newly-created gradient from the first step.  Go to Edit Transform, and Skew it from left hand side and right hand side.  Drop the opacity 32% and overlay it.

We need to name our feed box.  Recent or Latest Releases both work.  Throw that on, and add a drop shadow effect that is listed below:

Our base is prepped and ready now.  We will now begin to work on the content holder, so take out your Round Shape Rectangle with the same settings, except with a white background.  Throw it on somewhere in the middle and paste a drop shadow layer style on it listed below:

In this, we will create the tabs for the selection of feeds.  I used white for the selected tab and yellow for the available options.  Using your rounded shape rectangle, create three shapes on top of your content holder, and cut off the round edges to connect them all together.  Make sure that the end tips both from left and right are not cut.

Apply a gradient overlay on your white tab:

Time to add some dummy text! In the content place holder, it’s usually used to make the title nice and large.  I used Arial Black size 14px with the color of #7d7d7d.  In my context area, I actually used Arial 12px with 75% of the #7d7d7d color.

Label the little tabs now.  Mine go Tech News | Apple Feed | Tutorials.  For Tech News, I used a darkish grey color (#454545), and for the two other yellow tabs, I used cf6100.  Also, after you are done labeling, apply the following effect to your text:

We need to implement a feature so that the user can move around between the articles, so grab your round shape rectangle, set the color to white, and apply the following layer styles.  After, place PREVIOUS in Arial Black size 11px.

Duplicate all the steps, or just the layers, to create a next button as well!  Now let’s create a small editing interface for our users.  Grab your round-shaped rectangle, set the color to black, and overlay it with 50%.  Make three buttons underneath the content holder.

Throw in some features like Zoom | Edit | Delete.  The text of the color should be white under an overlay and 47% opacity.  I used Arial Black size 14px.  After you have added the text, you are done pretty much.

I hope that this tutorial will come in handy for your designs!  Thank you for reading.

……………………………………………………………………………………………………………………………………………..

Tools and resources that you will need:

- Oranment Brush Set

- Oranment Brush Set II

- Helvetica Neu Bold Font

- RSS Icon

Have these tools ready and installed because you will be using them throughout the tutorial.  Let’s begin by creating a new document the size of 1000×1300.  We start our theme with the header, so grab your rectangular marquee tool, and using the image below as your guide, create it to that exact size.  Set the background to white.

Once you have created the layer, apply the following gradient settings in Layer > Layer Style Settings.

Results so far

Now let’s add some text to our header.  Using your newly-installed font, Helvetica Neue Bold, create a name for your theme and a slogan, if you wish.  I called mine Moca le fresh blend.  The text on the right is Georgia, which should be installed by default.  There is a drop shadow added as well.  Take a look at the guide below:

Results so far

It’s navigation time.  Grab your rectangular marquee tool, and create a small rectangle right underneath the header.  Fill it in with this HEX:7e2f10 color, and then grab your Burn Tool; set the size to 50, and stroke the top of the navigation one time.  Exposure should be around 90%.  Once you are done, select a pattern that you wish to use or just save mine listed below in the guide:

Pattern (Credit to Squid Fingers)

Results

Add some dummy text to fill up the navigation.  I used an Arial font with the size of 14pt and aA set to Sharp.

Alright, now that we are finished with the portion of our layout, let’s work on some details.  It’s always important to see if there is enough detail.  Coming back to your original steps can be essential.  Going back to the Brush Set that you installed, let’s use the first one.  See the guide below to select the right brush, and then create one piece of the floral leaf, resized to fit our sidenote to the right handside of the header.  Duplicate the floral leaf, and then go to Edit Transform – Flip Horizontal.

Results (Note: Setting the diameter size smaller will work, but it will ruin the quality of the brush, so therefore resizing would be ideally the best choice.)

Alright, now that we have added a little bit of detail to our header, let’s work on the navigation as well. Go to your Custom Shapes, and select the shape listed below in the guide.  Using the shape-rounded tips, create a pattern of the tips and span it horizontally.  You may also just duplicate the custom shape creating the same effect:

By adding that, not only did we improve our navigation but also gave an introduction to our welcome paragraph, which is what we are going to work on right now.  Type up a brief introduction.  Notice how I highlight the text that introduces the content, and then dim out the text talks about the content.  This allows users to understand exactly what they will be reading.  If you have a lot of information, it is important to highlight your topic sentence.  I used Georgia for the introduction sentence Welcome to Moca… and Arial in the paragraph itself.

Okay, let’s go back to our Brushes.  In your second Brush set, you will notice a lot of nice ornaments that can be used practically anywhere as paragraph intros/closures.  In our design, it will indicate when the about moca will end.  Using the specific brush listed below in the guide, create the ornament with the HEX: 6a3e2d, and then resize it to fit it in the center of the topic sentence.  Drop the opacity to 26%, and then by duplicationg the layer and doing a vertical reflection, you will add the bottom of it as well (closure, that is).

Now we have to fully seal out the introduction area.  Let’s do that by creating an average-size rectangle, fill it with HEX: dadada and then, using the Eraser Tool, fade it out so that you get a nice drop shadow effect.

Let’s go back to the step where we used the custom shape to create our separator for the content, the wavy line.  Why don’t we duplicate that layer and reflect vertically.  Place it on top of the drop shadow, and make sure the wavy line is overlaying the shadow.  It should look something like this:

This part is where we actually will work on the WordPress part.  I mean all other design elements are important in the final production.  However, the WordPress plug will be located here.  Begin by creating the “recent entries” title, which will introduce our wordpress content.  Using your resources guide, open the RSS Icon file, and bring it over to your document.  The font used is Georgia, set at a size of 24pt.

Drop Shadow Effect

Let’s create the base of our post.  Simple things always bring out elegance, so grab your text tool and choose Georgia with a size of 24pt.  Create two dotted lines and separate them enough to fill some content of the post.  Add an avatar.  I used mine from the Touch tutorial.  The color used in the dotted line is HEX: e2e2e2.  Just a quick hint:  if you are planning to use avatars in your post, look up wp_avatar in the plugins section of the WordPress website.

Let’s add the title of our post, along with the content that will come with it.  As discussed before, it is important to highlight the most important aspect of your press, which is your topic sentence or your tittle, in this case.  Sometimes, making a larger font size can bring a great deal of a difference.  Using a new color also will highlight your title.  In this case, I used both methods.  The font is Georgia with a size of 24pt and the HEX: cc2b23.  I used a different font in the paragraph area:  it is Arial with a size of 12pt.

There are various of ways to implement dates and comments into your WordPress.  Some people add a Calendar, and place the date inside that calendar, or even use a bubble to display the amount of comments.  In our case, we will go with the simple rectangular box.  So create two rectangular boxes with a darkish background, and place the wordpress functions of date/comments inside.

And there you have it.  Duplicate the post as many times as you wish, and throw in a footer.  I used a very simplistic footer consisting of Credits to WordPress, and the usage of Creative Commons, which protects some of your rights to the design.  You may use the RSS Icon to create the valid XHTML/CSS Format.

I hope that you enjoyed this tutorial, and grasped at least some of the concepts that you can use while creating a WordPress theme or any design, in general. For some really nice WordPress themes, also check out Theme Galaxy Premium Themes

Well, the first step is quite simple.  From the tools, select the rounded-shape rectangle, and use the hex color printed below.

Now just to make this look a little more official, copy the text printed on the original banner into yours, just like I did.

This is where it might get a little confusing, but I am pretty sure that most of you guys will get it. Draw out a circle close to the size of the button.  Take a look below to see exactly what I mean.

If you got that, the rest should be easy.  Now duplicate the circle, and move it to the right.  Connect these two circles by filling a rectangle in the middle.  Take a look below to see exactly what I mean.

Almost done.  We just have to fill it up with some gradients, and bring it to life.  So here is what we do:  Below is the gradient setup with the colors.  Go to your Layer Settings, and apply those colors to your gradient overlay.

You’re basically done with the base of the button.  Now we need to get the go button inside done. Create a white circle inside the button.

Apply the same gradient overlay style used in the main button, except set it to Reverse.  The results can be seen below.

Use the same font and the color hex from step two to create the Get Started text.  Apply these Drop Shadow settings to that text.

Well, we are finally here.  You can now just add the stroke, and you are all done.  This is actually the second-last step since I forgot to add the text below the button.

Now that you have copied the text for the final step, you are all done.  Take a look at my final result below, and there is a copy in the previous image as well.

Thank you for reading my tutorial, and I hope that you have learned something new!