It just did.

Say hello to Wordpress 2.8, or version “Baker” as they call it, named after noted trumpet player and vocalist Chet Baker.  Living up to Wordpress standards, there are many new features in this version, as well as over 790 bug fixes from the previous version.

Inline Theme Installation

In Wordpress 2.7, a great new feature was released called “One-Click Plugin Installation”.  Now this same idea has come to the themes section!  No more do you need to download a theme, unzip it, upload it to your site, and activate it.  Now you simply browse the theme gallery right from the dashboard, pick the theme you want, and press the “install” button.  Bam – it’s up and running on your server!  No hassle with zip files or uploading.

Syntax Highlighting

Editing template files (via the file editor in the dashboard) used to be dull black and white.  Now, with the new CodePress editor, it comes to life with colorful syntax highlighting.

Widgets Improvement

Previously, editing widgets was a pretty big hassle.  If you had multiple sidebars, there was no easy way to get one widget from one sidebar to the other, and if you deleted a widget, you’d love all of its settings.  If you wanted to use that same widget again, you’d have to reenter all of the settings that you had before.

Wordpress 2.8 fixes both of these issues.  Now you can see all of your sidebars on the same page (no need to edit, save, switch sidebars, edit, save) and drag and drop widgets between them.  Also, if you set up a widget just the way you like it, and want to save it for later use, you can drag it to the “Inactive Widgets” area.  If you need it again in the future, just drag it out from that area and into one of your sidebars.

Screen Options

The great new interface that was added in Wordpress 2.7 gave you the option to drag and drop sections in the dashboard to suit your needs.  Now, Wordpress 2.8 gives you many more options for customization.  Here are a few of them:

• You can specify if you want 1, 2, 3, or 4 columns on the dashboard.
• In the Posts and Pages sections, you can specify what info you want to be displayed, such as Author, Categories, Tags, etc.
• Also in the Posts and Pages sections, you can specify how many items you want to display per page.

Speed Optimization

According to the Wordpress.org blog, Wordpress 2.8 is even faster than 2.7 due to optimized javascript and behind-the-scenes tweaks.  This means that the everyday actions such as approving comments, switching pages, and editing posts are even faster than before.

Conclusion

Taking into account the new features in Wordpress 2.8 Baker, I would strongly encourage you to download it and give it a spin yourself.  If you already have 2.7, it’s as easy as pressing “Automatic Upgrade” in the admin.

As always, if you’re looking for information on the next version of Wordpress (version 2.9), you can simply change the URL of the documentation from http://codex.wordpress.org/Version_2.8 to http://codex.wordpress.org/Version_2.9.  There’s not much there yet, but there will be pretty soon!

And be good, find the best hosting for your needs. I love 1&1 but there’s something for everyone.

In today’s tutorial, we’ll be creating a slick folder icon with a 3D glossy backdrop. Here’s a preview of the final result:

Step 1

Let’s get started! To begin, open up Photoshop and make a new document. Size doesn’t matter that much here, but I’ve used my favorite dimensions of 1680 x 1050 for this tutorial. Fill the background with #004d96, get the Pen Tool (P), and turn on the grid by going to View > Show > Grid or by pressing Ctrl + ‘ (single quote).

Step 2

If you don’t have “snap to grid” enabled, go to View > Snap To > Grid to enable it. This ensures that the Pen Tool snaps to the grid lines for precise drawing.

Now that snapping is enabled, click and hold on one of the grid cross sections to create a new anchor point. Without letting go of the mouse, drag up one grid section until the bezier handles snap into place. Finally, click up and over two grid sections and drag to the right one square. See the image below for reference:

Step 3

Count out about 14 squares to the right of that last point, click, and drag to the right one square.  Go over three and down two squares, and click again.

Step 4

Count out another 14 squares to the right of the last point, click, and drag to the right one square.  Go down and over two squares, click, and drag down one square.

Step 5

Count down 18 squares, click, and drag down one square. Go down and to the left two squares, click and drag left one square.

Step 6

Count left seven squares and click to make a new anchor point.  Go up four squares, click and hold the mouse, hold down the alt/option key, and drag to the right one square.  Count up two squares, click, and drag to the left one section.  Here’s a reference:

Step 7

Go two squares to the left, click, and drag over one square.  Count down two squares and click.  Without letting go, drag to the right two squares, press and hold the alt/option key, and drag down and left one square.  Finally, count four squares down and click again.

Step 8

Count six squares to the left, and repeat steps 6 and 7.

After completing those steps, go left seven squares, click, and drag to the left one square.  Then go up and to the left two squares, click, and drag up one square.  Finally, finish off the entire shape we’ve been creating by clicking on the first point, 20 squares up.

Step 9

Fill the shape you just created with #bcc1c5, and apply the following layer styles to it:

Drop Shadow

Outer Glow

Inner Glow

Gradient Overlay

Drag Gradient

Still in the Gradient Overlay dialog, click outside of the layer styles window and drag upward, like the image below.  This moves the gradient up so it’s not in the center of the icon.

Result

You should now have this:

Step 10

Now we’ll create the silhouette of a person for the middle of the folder.  To make sure that both sides are equal, we will create the left half first and then mirror it for the right half.  I can’t be as precise with the position of the Pen Tool anchors here, but it is fairly easy to make the shape below.  You don’t have to be exact, just make something that resembles a human being.

Step 11

Duplicate the shape layer you just created by selecting it in the Layers palette and pressing Ctrl/Cmd + J.  With the new layer selected, hit Ctrl + T to transform it, right click on it, and select Flip Horizontal from the context menu.  Click and drag it to the right so it’s just barely overlapping the other half of the silhouette we created before.

To merge the two halves together, make sure the Vector Mask of the current layer is selected (see below).  Press Ctrl + C to copy it, select the Vector Mask of the other half of the silhouette, and press Ctrl + V to paste it.

You can delete the single half shape layer that you created now, which should give you this:

Step 12

Center the silhouette to the folder by Ctrl + clicking on the folder layer’s icon, getting the move tool, and pressing “Align Horizontal Centers”.  Move it vertically to a position that looks good to you.

Now we’ll apply some layer styles to the silhouette to make it pop off the screen (or sink into the folder).  Use these settings:

Drop Shadow

Gradient Overlay

Gradient

Stroke

Result

And that should give you this:

Step 13

Now that we’re done with the folder icon itself, we can give it a cool 3D background to sit on.  Before we do this, let’s center the icon to the document.  Select all the layers above the Background layer (there should be two layers – the folder and the silhouette), and press Ctrl + G to put them into a group.  With this group selected, press Ctrl + A to make a selection of the whole document.  Take the Move Tool (V), and in the toolbar at the top of the screen, press both “Align Vertical Centers” and “Align Horizontal Centers” like below:

Now that the icon’s centered, you can deselect everything by pressing Ctrl + D.  Make a new layer below the group we just created, get the Rectangular Marquee Tool (M), and drag out a selection like this:

Step 14

Press D and then X to reset the foreground/background colors and then swap them.  Get the Gradient Tool (G), and in the toolbar, modify it to this:

Starting from above the document, drag out a gradient to almost the bottom of the image like this:

If you deselect everything (Ctrl + D), you should now have this:

Step 15

It’s looking pretty good!  However, the icon looks a bit like it’s floating up and not sitting on the 3D shelf.  To fix this, we’ll add both a reflection and a shadow to it.

Let’s start with the reflection.  Duplicate the group we created by dragging it down to the “New Layer” icon in the Layers palette.  Merge all the layers in the new group together by selecting it and pressing Ctrl + E.  Move the created layer below the original group, but above the gradient layer.  Press Ctrl + T to transform the layer, right click, select Flip Vertical, and drag it down so it’s just below the original folder icon:

With the new layer still selected, press the “Add Layer Mask” button at the bottom of the Layers Palette (third button from the left).  Get the Gradient Tool (G), set it to a linear black-to-white gradient, and drag out a gradient like this:

Finally, fade out the opacity of the layer to about 50%.  You should have this:

Step 16

Now we’ll make the folder shadow.  Duplicate and merge the folder group once again to make another layer.  Move this layer below the original group, but above the reflection, and go to Image > Adjustments > Hue/Saturation.  Move the lightness slider all the way to the left (-100) to make the layer totally black, and press enter.

Press Ctrl + T to transform the layer, and squash it way down like this:

Not right click on the transformation, and select perspective from the context menu.  Drag out the top right handle a bit to make the shadow look like it’s spreading out from the folder:

Press enter to complete the transformation, then go to Filter > Blur > Gaussian Blur and set the Blue Amount to 8 pixels.  Press ok in the dialog, set the layer’s Blending Mode to “Soft Light”, and lower its opacity to around 30%.

Final Result

And that’s it!  You’ve just created a stunning folder icon with added backdrop, shadow, and reflection.  Here’s the final result:

The Winner…

Congratulations to Mikah Sargent! Here is the winning comment:

Wow, I’ve seen Uprinting’s cards in “the wild” and they really do have fantastic quality. I’m trying to get my graphic design business off of the ground, and 500 cards would be a huge help. I’ve just recently designed a business card, and I was wondering who to go to for my print job. My goodness, five hundred cards isn’t cheap. I’d love to win.

I’ll be sending an email to him shortly with information about how he can claim his prize.

Thanks for everyone who participated in this giveaway! Make sure you subscribe to the RSS feed – I’m sure to be posting more giveaways as time goes on.

So in this contest, I will be giving away 500 of UPrinting’s amazing business cards to one lucky person. I have used UPrinting in the past for my own cards, and I can sincerely say that the ordering process was easy and the quality was amazing.  Not only is their business card printing great, but their web interface is extremely easy to use.

How can I win?

To win, all you have to do is leave a comment on this page explaining why you want the business cards or what you are going to do with them. For “extra credit”, you can tweet about this contest by posting the following on Twitter:

“Win 500 Free UPrinting Business Cards: http://u.nu/8bj5″

After the contest ends, I will pick one lucky winner from all of the commenters, and will email him with info on how to claim the prize. Make sure that you leave a valid email address so that I can contact you with the winning info.

When does it end?

Submissions will be open until May 20th, so hurry up and comment!

Design inspiration sites are sites that link to interesting and cool designs that can be used to “boost the creativity” of other designers.  Usually the links are to web or illustration designs, but sometimes a gallery links to creative logos or brands.

Below I’ve put together a list of 10 of these such sites that link to cool logos.  If you’re in the process of creating your own brand, then these sites can really help you out.

1. Logo Pond

2. Logo Galleria

3. Logo Faves

4. Logospire

5. Creattica

6. Logo Fury

7. Logo of the Day

8. LogoMoose

9. Design Dosage

10. LogoGala

11. Logotwo

12. Logolog

13. Logoed

And Finally…

Though it isn’t exactly logo inspiration, YourLogoMakeMeBarf.com is a great site to go to if you want to know how not to design your logo.  Warning: not for the queasy-stomached!

As web design has progressed and grown older, it has gone through many phases, and taken on many different styles.  Some of these are web 2.0, grunge, typographic, and “sketched” or hand drawn.  There is lots of diversity in what designers like and dislike, so I thought I’d ask you all what your opinion is.

Vote for your favorite style in the sidebar, and we’ll see what the most popular one is.

What are inline comment replies?

Inline comment replies is a feature that lets you reply to comments on a blog, and have your reply show up directly below the comment you are replying to.

Imagine this scenario: you’re reading an interesting article on one of your favorite topics, and after you finish reading, you decide to read through the comments and see what other people are saying about it.  You start going through the comments, and see one towards the top that’s from a guy who has a question about the article.  Since you have a lot of experience on the article’s topic, you immediately know the answer to his question and decide to answer it.  There’s only one problem – after that guy posted his question, 50 other people posted comments below his.  Now, if you were to post a comment in reply to his question, it would be so far away that he probably wouldn’t ever see it.  This is a pretty big problem, right?

Enter inline comment replies.  Now, if the blog you’re reading has this feature installed, you can simply click “reply” on the guy’s question, type your answer, and your comment will show up right below his (indented a bit so it stands out from all the other comments).  Pretty nice, right?  Or is it?

The problem

Though this may sound like a great feature, and in fact it is useful most of the time, there is one problem with it.  If you have an extremely popular blog that gets tons of comments within seconds of a new article being posted, then everyone is going to want to be one of the first to comment so that their website link is clicked most.  Normally, you could only do this if you literally sat on the site and clicked refresh every couple of seconds until a new article showed up, and then typed a comment as fast as you could.  However, with inline replies, you can just reply to the first comment on a post, and your reply is displayed right below the first comment.

If the first comment is an actual question, and the reply is an answer to that question, then this is fine.  But if the reply is nothing more than a way to get a link to the top of the comment list, then this can become a problem.

The solution?

The obvious solution for this is to simply not use inline comment replies on your blog.  However, sometimes it is a nice feature to have on your blog, and you don’t want to give it up.  So what do you do?

One thing you can do is manually delete comments that are obviously from people trying to just get to the top of the comment list.  The problem with this is the 1) the commenter might wonder where his comment went and get angry at you for deleting it or 2) the comment could actually have some good content in it, but doesn’t have anything to do with the comment it’s in reply to.  Deleting it would be removing legitimate content.

Another thing you could do is just move the reply comment to the bottom of the list.  The commenter might get annoyed that his comment was moved, but at least he didn’t get away with his scheme.

So now I ask you – do you worry about this on your blog, and if so, how do you prevent it from happening?

This can be extremely hard to do, especially if you have a lot of things to say, and a lot of people don’t even bother to sign up because of it.  Don’t give up on Twitter yet, however.  Though it may be hard to sum up your thoughts in 140 characters, there are ways that you slim them down without really removing any content.  I like to call it “making the most of your 140 characters”, and below I have listed a few of the ways you can do just that.

1. Shorten URLs

If you’re posting a URL in your tweet, then the best way you can cut down space is by using a URL shortening service.  Basically, you type your long URL into one of these services, and out pops a tiny URL that you can use in your tweets.  Here are a few of my favorite shorteners and why I like them:

• u.nu
  • It is the absolute shortest URL possible.  No url can be shorter than three characters, and that is exactly what u.nu is.  If you’re looking to make your URLs as short as you can, then this is the service for you.
  • After you shorten a URL, it gives you the shortened link, HTML code for the link, and even BBCODE for the link so you can use it on a website of forum without typing code.
  • To see information about a URL shortened with u.nu, simply put a question mark, “?”, at the end of it.  This shows you where the URL redirects to, when it was shortened, and how many people have clicked on it.
• tr.im
  • It has lots of extensions that let you access it from FireFox, your Mac dashboard, or any other browser.
  • It is very fast, which means you can shorten URLs with lightning speed.
  • After you shorten and post a URL to Twitter, you can see statistics on how many people clicked the link, where they are from, and more.
  • You can customize it so that it works just like you need it to.
• is.gd
  • It also has lots of extensions like a FireFox plugin, bookmarklet, Dashboard widget, and Mac app.
  • You can preview a shortened URL (see where it redirects to without actually going there) by putting a hyphen, ‘-’, at the end of the is.gd URL.
• bit.ly
  • Just like the two mentioned above, it gives you extensions like a FireFox plugin, bookmarklet, sidebar, and even a Gmail gadget.
  • You can see real-time analytics of how your links are doing, like how many people are clicking on them.
  • You can save your preferences and always use it the way you want.

Though those shorteners have extremely short domain names,

Note: If you’re looking for some good Twitter apps for your Mac, you should read another post here at TutWow named 7 Free Twitter Apps for Your Mac.

2. Remove multiple RT sources

In Twitter, when someone else tweets something cool and you want to tweet the same thing, you use something called a “Retweet”.  This is how it works: your friend Joe (username joe987) posts a link to an amazing portfolio, and you want to spread it around among your followers.  To do this, you copy his tweet, post it into a new tweet, and add “RT @joe987″ to the front of it.  This not only shows the cool tweet, but it also gives credit to the original tweeter.

Sometimes you see a retweet, or a tweet that already has a “RT @username” on it, but you want to share the tweet with your friends as well.  Most people just add another RT onto the front of the tweet (”RT @one RT @two tweet“), but this adds a bunch of extra characters that aren’t really necessary.  The important thing is that you give credit to the original tweeter, so to make the most of your tweet space, you should remove the first RT.  So if you had “RT @secondary RT @original tweet“, you would change it to just “RT @original tweet“.

3. Use one space at the end of sentences

As your grammar teacher used to tell you, “always use two spaces at the end of your sentences”.  This is great, if you’re writing articles or papers, but for Twitter, it just grows your tweets.  Though this may not save tons of space, it can help if you’re really pressed for characters.  For example, take a look at this tweet:

Hey tweeple!  How’s your day going?  I’m feeling great today, and I hope you are too.  I’m working on a new article for my blog.  How about you?

If you put that into Twitter, you’ll see that it’s four characters too long.  But if you remove the extra space between the sentences, you come out with an even 140 characters.  Not huge, but useful!

4. Use Contractions

Often, when tweeting, you talk about yourself, saying things like “I am eating spaghetti” or “I will go for a walk tomorrow”.  To save extra space, use contractions as often as possible.  So instead of the previous tweets, you would say “I’m eating spaghetti” or “I’ll go for a walk tomorrow”.

5. Substitute Letters for Words

Though I don’t recommend it since it looks rather unprofessional, you can replace words like “you” and “are” with their sound-alike letters “U” and “R”.  This saves lots of space, but as I said, you shouldn’t do it if you’re trying to sound professional.

One thing you can do that doesn’t look as unprofessional is use the “&” and “@” signs in place of “and” and “at”.  Since most people are used to reading these symbols every day, they won’t notice the difference as easily. (thanks Chris and Malcolm Coles for sharing this tip in the comments!)

A good website that does this for you automatically is Twonvert.  You just type in your original, long tweet, and Twonvert converts it to SMS shorthand on the fly.

6. Use multiple tweets

Ok, this might not be a way to make the most of your 140 characters, but the fact is, if you have something great on your mind and you can’t possibly let it out in 140 characters, then you’re going to need multiple tweets to convey your message clearly.  To do this, post the first half of your thought in the first tweet and the second half in the second.  True, this makes people read bottom up, but sometimes it’s necessary.

7. Remove unnecessary words

When we write, we often use words that aren’t really necessary or could be removed without taking away from our meaning.  As I said above, this can be good if you’re writing articles or a paper, but it doesn’t make sense for Twitter.  When tweeting, you should remove your flowery language and post just the basic meaning of what you’re trying to say.

For example, instead of writing “I am being filled with such an awesome sensation of joy and gratefulness that I can barely portray it with mere words”, you could just say “I’m happy”, or “I’m so happy I can’t describe it”.  See the difference in length?

Note: Thanks to Jaremy in the comments for this tip.

More?

There are many ways to shorten your tweets, as you can see.  Did I miss one of your favorite techniques?  Let me know in the comments below, and I’ll add it to the list.

I always find these types of portfolios especially fascinating because of the amazing effects you can achieve with smooth scroll.  You aren’t just limited to vertical scrolling, though.  You can scroll horizontally, diagonally, or basically however else you can think of.

Below is a list of 10+ of my favorite sites that utilize smooth scrolling to impress their visitors.  But before we get to the list, let me give you an idea of how to implement this effect on your own site.

There are many ways you can use smooth scrolling on your own site, but my personal favorite is the dfSmooth Scroll script.  To use it, go to the download page, download the script, and simply follow the instructions on that page to set it up.

1. Moziweb

2. Andrew Greig

3. Carrot Creative

4. Red Crown Studio

5. shn.me

6. Edit Studios

7. Black Estate Vineyard

8. GIANT Creative

9. Dean Oakley

10. Greg Wallace

11. Work at Play

Before we dive into the tutorial, let’s take a look at what we’ll be creating. You can download the PSD for this tutorial if you get stuck on one of the steps

Step 1

As you can see, we’ll be creating a nice wooden sunset in Photoshop.  We’ll even throw in a few grunge textures to spice it up.  Let’s get started!

Open up Photoshop, and create a new document of the dimensions 1000×1500 pixels.  Fill the background with #d08e00, an orange-brown color that will be the basic color of the wood.

To give it a bit of texture, double-click on the “Background” layer and press enter to unlock it.  Double-click on it again to open up the Layer Styles dialog, and enter these settings:

Drop Shadow

Inner Shadow

Pattern Overlay

You may be wondering why we put a drop shadow on the background layer.  The reason is because we’ll be reusing the style we just created on different layers, and they will need it.  You should now have this:

Step 2

Now we’ll create the hills for the sunset.  Take the Pen Tool (P), and make a shape similar to this:

The new shape should already have the same style as the “Background” layer.  If it doesn’t have any styles, then right-click on the “Background” layer, select Copy Layer Style, right-click on the new shape layer, and select Paste Layer Style.  This will copy the first layer’s styles to the second layer.

Step 3

Set your foreground color to #906200, select the first shape layer, and press Alt + Backspace to fill it with the foreground color.

Now we’ll make the other hills.  Get the Pen Tool, make a shape like the one below, and fill it with #6f4c00.

Make a new shape like the one below, and fill it with #523800.

Finally, make a shape like the one below and fill it with #2f2000.

Step 4

What would a wooden sunset be without a wooden texture?  Head over to Bittbox and download their Free Hi Resolution Wood Textures Pack.  Unzip it, and place (File > Place…) texture number 7 (7.jpg) into the document.  Rotate the texture, and scale it up so it looks like the image below.  Then press enter to apply it to the document.

Set the wood layer’s blending mode to Overlay, and lower its opacity to 38%.  Your image should look similar to this:

Step 5

To make a more grungy feel, download this texture and this one from TextureKing.  Place them (File > Place) both into the document, rotate them, and scale them up like in the images below:

Set each of the new texture layers’ blending modes to Multiply, select them both, and go to Layer > Rasterize > Layers to rasterize them.  Get the Rectangular Marquee Tool (M), and in the toolbar change the Feather size to 250px.

Drag out a selection of the whole document, select each of the layers separately, and press backspace to clear the selection.  Set the first texture layer’s opacity to 71%, and the second layer’s to 31%.  You should now have this:

Step 6

All that’s left to do now is make the sun and its glow.  Make a new layer below all of the other shape layers but above the Background layer, get the Ellipse Tool (U), and drag out a circle about this size and location:

Fill the shape with #ffba00, and apply these styles to it:

Inner Shadow

Outer Glow

Inner Glow

You should now have this:

Step 7

Now all that’s left to do is add some glow effects to the hills where the sun in shining.  Make a new layer below the wood texture layer, take the Brush Tool (B), and put these settings into the Brushes Pallet (F5):

Brush Presets

Shape Dynamics

Press D and X to set the foreground color to white, click a few times around where the sun’s rays would hit the hills, and make something similar to this:

Set the layer’s blending mode to Overlay, duplicate it, and set the duplicated layer’s opacity to 23%.  This will make the hills glow seemingly from the sun’s rays.

And that’s all for the beautiful wooden sunset!

Conclusion

I hope you found this tutorial useful.  As I said before, you can download the PSD if you get stuck on any of the steps.