Header

First thing’s first - the header.  This is my favorite part of the template, and I think you’ll see why.  I used a glow technique to make the “globe” in the logo, and the same effect on the navigation link “Home”.  When the user hovers their mouse over one of the links in the navigation, the link will glow, and if they click on the link, it will stay glowing.  Take a look for yourself:

Sidebar

In the sidebar, I used the Arial font so that I could make the text dynamic once it was coded.  I used another glowing element in the RSS icon at the top of the sidebar, which ties in the glowing header.  Almost all of the elements in this design have some type of stripe pattern for their background, which gives it a much more high-tech feel than if they had been solid color.  Here is the sidebar:

Content Area

When designing the main content area of the layout, I didn’t want to have just a boring area of white, I wanted to make it more interesting.  So I decided to overlay a subtle wide-stripe pattern on it, along with drop and inner shadows to make it feel more three-dimensional.  I also made the horizontal rulers a blue color to tie in with the rest of the design.  This is the content area:

Footer

After reading some articles on good footer design in websites, one of which is at Smashing Magazine, I wanted to do something more in my footer than a bland “Copyright by TutorialWow.com”.  I thought that a good way to do this would be to place recent posts, recent comments, and About the Author sections into it, along with the copyright information.  I played around for a while with the glowing headers, and bullet points (which are using the same glow style as the header and RSS icon), and finally came up with this:

Final Theme

I have told you about each of the individual elements of the theme, and now I will reveal the whole thing.  As you can see, all of the elements tie in nicely with each other to create that cool glow effect that gives the theme its character.  Here it is (click on the image to see the whole thing):

Since I’ve been really busy lately, and it doesn’t look like I’ll be getting any less busy in the near future, I probably won’t finish coding this theme for a while.  This is why I wanted to give you guys a sneak preview - so that you wouldn’t get too bored. ;)

Until next time, happy designing!

ShareThis

Final Result

Here is what the finished product will look like:

Step 1

To begin, open up a new document in Photoshop of the size 300×300 pixels, or whatever size you need to fit your orb. Take the Ellipse Shape tool, and make a circle in the middle of the document. You can make it a perfect circle by holding shift while dragging to create it. It doesn’t matter what color the orb is, because we will be applying a color overlay to it in the next step.

Step 2

To make the circle turn into an orb, we will apply some layer styles to it. Double-click on the layer that holds the circle to bring up the Blending Options dialog, then enter these settings:

Drop Shadow

Inner Shadow

Inner Glow

Bevel and Emboss

Color Overlay

And that gives you this:

Step 3

As you can see, the orb looks much rounder and realistic. Now we will make a shape look like it was cut out of the orb by applying different layer styles to it. First off, take the Custom Shape tool, and drag out whatever shape you want - I used the flame. Center the shape to the orb, and then apply these styles to the it:

Inner Shadow

Inner Glow

Gradient Overlay

You should now have something like this:

Step 4

Now for the final touches! As the title indicates, the orb should be glossy, and to make this effect, we must add a shine effect to it. Ctrl+Click on the orb layer’s thumbnail to make a selection of it, then go to Select>Modify>Contract, and enter 5 for the amount in the dialog that pops up. Take the Ellipse Select tool, hold down the Alt key to subtract from the selection, and drag an ellipse over the lower part of the current selection. You should end up with a selection similar to this:

Step 5

To finish the shine effect, create a new layer, make sure that your foreground color is white, and press Alt+Backspace to fill the selection you made with white. Rename this layer to Shine, and lower it’s opacity to about 50%. This is a simple gloss technique that can be used on anything that you want to appear shiny.

And that’s it! You have just created a slick glossy cutout-orb that can be used for many purposes.  You can play around with each of the layer styles to achieve the effect you want - be creative!

Final Result

I hope you enjoyed this tutorial, because I enjoyed writing it!

Until next time, happy designing!

ShareThis

1. Post Revisions

One of the best new features (in my opinion) is Post Revisions.  Let’s say that you made a big mistake when you were writing a post (like deleting all of the content or something else big), and then you ally saved it without fixing the problem.  In earlier versions of Wordpress, you would just have to go and fix the problem manually, which could take you forever.  But in version 2.6, when you scroll down to the bottom of a page when editing a post, you will see a new section named Post Revisions.  In this section, you can view, compare, and restore previous revisions.  Never worry about losing your work again!

2. Theme Previewer

Another good new feature is the Theme Previewer.  As you can guess from the title, this feature lets you preview your themes without having to apply them to your site first.  Not only that, but it even puts your own content into the preview so that it looks exactly like what your users would see.

3. Press This!

The new “Press This!” feature lets you post about articles that you find on the internet.  In the post editing page, on the right-hand sidebar, there is a section labeled Shortcuts.  Under this, you will see some text and then a link named “Press This”.  Save this link to your bookmarks by clicking and dragging it to your bookmarks folder, or by right-clicking on it and selecting “Bookmark this link”.  Now whenever you’re surfing the web and you find a blog post you like, all you have to do is press the “Press This” link in your bookmarks, and it will take you to a new blog post where you can write about the post you found, and add text, photos, and videos that are on the original post page.

4. Image Captions

When you’re writing a post to your blog and you want to insert a picture into it, but you want to be able to tell the user what the picture is representing, then the new Image Captions feature is just the right thing for you.  All you have to do is click the “Add an Image” button above your post, select the picture you want to insert, add a title, and then type your description into the box labeled “Caption”.  When you view your new blog post, you will see your picture along with its description below it.

5. Activate/Deactivate Multiple Plugins

In previous versions of Wordpress, when you wanted to activate or deactivate multiple plugins, you had to do each of them separately, which, combined with page reloads, took quite a long time.  But now, in version 2.6, you can activate/deactivate multiple plugins all at the same time.  Just check the plugins that you want to modify, hit the “Activate” or “Deactivate” buttons, and voila!  They are all modified!

6. Many more smaller features

Above, I have mentioned some of the major features that come with this new version of Wordpress.  But that’s not all!  There are many more smaller features, some of which are as follows.

• Word Count is displayed alongside the post editor.
• Gallery Sorting allows you to sort your pictures in stead of having them be in the same order that you uploaded them in.
• Avatar Display gives you more options for displaying avatars in discussions, such as using gravatars, identicons, and more.
• Shift + Click Selection lets you Shift + Click to select a line of posts/pages for editing.
• TinyMCE 3.1 Support
• Newest Jquery Support
  
• Google Gears for offline support.

And more!  I hope that this post has helped you to decide to upgrade to Wordpress 2.6, and has shown you some of the benefits of doing so.

Until next time, keep designing!

Josh Drake

ShareThis

I hope that this new feature will help everyone to learn more, and that if you have a question, that you will not hesitate to post it.

On a different note, I will be going on vacation until July 12th, and I won’t be able to post anything from now until then.  So all posting will stop until July 12th or sometime soon after that (unless I post some more today - by some miracle).

ShareThis

Finished Product

Here is what we will be making today:

Final

Step 1

Let’s begin by creating a new document of the size 500×350 pixels. Set your foreground color to #026d8d, and your background color to #01c1e2, and then grab the Gradient tool and drag a foreground-to-background gradient from the top to the bottom of the image.

Hint: To make sure that the gradient is perfectly vertical, hold down the Shift key while you drag the gradient.

You should now have:

Step 2

Now let’s create the button.  Get the Rounded Rectangle tool, set its corner radius to 10px, and draw out a shape like this:

Step 3

Now we’re ready for some layer styles!  This is always my favorite part of designing, because it really turns something flat into something 3D.

Make sure that your shape layer is selected, and then apply these styles to it:

General Options

Inner Shadow

Outer Glow

Inner Glow

Gradient Overlay

Gradient

Stroke

After you have applied all of these styles, you should have this:

Step 4

It looks pretty good already, but we can still improve it a lot.  First, let’s bring up the contrast a bit.  To do so, Ctrl+Click on the Shape layer’s thumbnail to load it as a selection, create a new layer, and fill the selection with a medium-gray (#808080).  Set this layer’s Blending Mode to Soft Light, and then give it a gradient overlay:

As you can see, this made the button have a bit more contrast:

Step 5

To make the button look a bit more shiny, let’s add a shine to the top of it.  Make a new layer above all of the other layers, and then get the Elliptical Marquee tool out.  Drag out a pretty big selection like this:

Now we’ll narrow down the selection so it’s just in the button.  Do this by Ctrl+Alt+Shift+Clicking on the Shape’s layer thumbnail.  Fill this selection with any color (I used white).  You should have this:

Step 6

Let’s add some styles to this layer too.  With the new layer selected, apply these styles to it:

General Options

Gradient Overlay

Gradient

Now you have a nice shine on your button:

Step 7

To make the button look like it’s floating above the ground, we will add a drop shadow to it.  Duplicate the button’s shape layer, and drag the new layer just above the background layer.  Clear all of the new layer’s layer styles by going to Layer>Layer Style>Clear Layer Style, and then - with the Move tool - drag this layer down a bit.  Finally, transform this layer to about half of its height. Look at this image for a reference:

Set this layer’s color to black, rasterize it (Layer>Rasterize>Layer), and then go to Filter>Blur>Gaussian Blur with a radius of 20 pixels.  After lowering this layer’s opacity to around 70%, you should have this:

Step 8

The final step in this tutorial is to add text to the button.  Head over to the website http://www.dafont.com/space-age.font, and download the Space Age font there.  Create a new layer right under your Shine layer, and using your newly downloaded font, type the text Submit into the middle of the button.  Set the font size to 72 pt, and the color to anything you want.

Hint: To make sure that the font is in the exact center of the button, do this: First, make a selection of the button’s layer by Ctrl+Clicking on its thumbnail, and then select the text layer that you want to center. Click on the Move tool, and then click on the Align Vertical Centers and Align Horizontal Centers buttons in the Move tool’s toolbar.  This should make your text perfectly centered to the button.

Now let’s give the text some style.  Use these settings:

General Options

Inner Shadow

Outer Glow

Gradient Overlay

Gradient

Finish

That’s it!  You have now created a beautiful sleek submit button that you could slice and put on your website to show off.

In this tutorial, you learned some of the principles of Web 2.0 design - reflections, layer styles, and good drop shadows.  I hope you enjoyed this tutorial, and that you will subscribe to my RSS Feed so that you don’t miss any more tutorials that I write.

Until next time, Happy Designing!

ShareThis

1. I love playing the guitar.  I have two guitars - an acoustic and an electric - but I play my acoustic more. (I don’t know any drummers. ;) )
2. I have five computers in my house. (unfortunately, they aren’t all mine…)
3. I went to the Bahamas on vacation last year.
4. Pizza is my favorite food. (Welcome to America!)
5. I just got a new screen for my computer - it’s an HP w2207 display, with a 1680×1050 resolution.  It’s nice!
6. I have a pet leopard gecko and a pet dog, an Irish Doodle, which is a cross between an Irish Setter and a Poodle.
7. I love Pixar.  I also love Dreamworks, though I haven’t seen their new movie yet (Kung Fu Panda).
8. Web 2.0 is my favorite style of web designing, then hand-drawn, then metal interface style, then finally grunge.

And that’s it! So now I tag you!

ShareThis

Finished Product

Here’s a picture of what we’ll be making:

Step 1

Start of by making a new document big enough to hold your text - I used 1000×600 pixels - and fill the background with the color #0e151e.  Now go download the font called Space Age at dafont.com.  The link is http://www.dafont.com/space-age.font.  Get the type tool, and type your text into the center of the document.  It doesn’t matter what color the font is, because we will be making the color invisible soon.  You should have something like this:

Step 2

Now comes the good part.  The great thing about layer styles are that you can apply them to any text, and it will look the same.  Double-click on your text layer, and apply these layer styles:

General Options

Inner Shadow

Outer Glow

Inner Glow

Gradient Overlay

Gradient Settings

Stroke

You should now have something like this:

Step 3

We’re almost done!  Now all the we have to do is add some small things that make it look better.  First, let’s add a sparkle on the G.  Go to http://www.brusheezy.com/brush/282-Star-Brushes, and download the Star Brushes that are listed there.  Head over to Photoshop again, and load in the new brushes.  Grab the brush tool, select the brush with the size of 365 (see the image below), and then resize that brush to 100px.

Now make a new layer above the text layer, set the foreground color to #f4faff, and click once with the brush tool on the top left corner of the letter G to make the sparkle.  Here’s my result:

Step 4

For the final effect, we will make a shiny reflection of the text.  To do this, first duplicate your text layer, and then rasterize the new layer and all of its layer styles by first pressing Ctrl+G, and then Ctrl+E.  Flip it vertically by going to Edit>Transform>Flip Vertical, and then take the Move tool, and drag the new text down and below the original text.  Look at this image for a reference:

To make the reflection seem to fade away, we will add a layer mask to the new text layer.  Make sure that your new text layer is selected, and go to Layer>Layer Mask>Reveal All to create the mask.  Take the Gradient tool, set it to a black-to-transparent gradient, and draw a gradient on the new mask like this:

Finish

And you’re done!  Here’s the final result:

I hope you enjoyed this tutorial, and I hope that you learned something from it that you can implement in your own designs.

Until next time, happy designing!

ShareThis

1. Indenting Two Spaces

One of the most obvious ways to make your code more readable is to indent all of your lines to the correct width. I usually use two spaces for my tabs, an option you can specify in most text editors.

2. Code Bracket Placement

As I said before, it’s always nice to keep your code style the same throughout all of your code. One of the things I am a little “finicky” about is the placement of the code brackets that surround my code blocks (if statements, while loops, etc.).

I place my beginning bracket one space after the ending parenthesis of the code block header.  Take a look at this image to see what I mean:

3. Comment, Comment, Comment

Alright, I admit it, I’m a comment freak.  I go wild with comments all over the place, and I have descriptions of almost every line of code in my files.  I find that if I stick to one format for all of my comments, it makes the overall readability a whole lot better.

When I comment whole sections of code, using the comment as a sort of “header”, I put my header text inside a multi-line comment, and place this right before the beginning of the section of code that I’m describing.

When describing just a single line, I use a single-line comment, and tab it one or two tabs from the line I’m describing - like this:

4. Parenthesis and Brace Padding

To make my code more readable, I add spaces inside all of my parentheses and square braces as a kind of “padding” for them.  This can look strange at first, but if you get used to it, you’ll see how much more readable it can make things.

Conclusion

I hope that everyone who reads this post gets something out of it, and applies it to their own coding.  Now don’t misunderstand me - this is not the only way to format your code - there are so many different ways you can do this, and the important thing is that you find the style that you’re comfortable with and stick with it.

Until next time, happy coding!

ShareThis

Well, now there’s a solution. I’ve been searching around the web, and I just stumbled onto this program called HTML Code Export. What it does (or what I use it for) is it takes HTML code that you enter, and it indents everything so that it’s nice and tidy. Pretty slick, huh? I can’t believe I didn’t think of this earlier - it would have saved my hours of headaches!

Make sure to hop over to the download site, and get your copy of this amazing time saving program now!

ShareThis