New installation

I noticed new features before WordPress finished installing. The installation process has been reworked to make it more friendly and your blog more customized from the beginning. You now have the opportunity to chose your username, so you can have something other than the old default, “admin”. In addition, you can set your password right at the installation screen. There is no more automatically generated password, and the “Hey, change your password!” reminder when you first sign in. This not only reduces the steps you need to take to set up your site, but increases security greatly.

Since they added the password reminder, most people do change their password right away when they install, but some may forget about it. Hackers may be able to get into your site using a tool that generates passwords similar to WordPress’ generator. Now your site can have a custom password from the beginning, and a custom username if you wish. Hackers will have to guess your username and your password.

New themes

New backend theme

The WordPress backend theme has been updated to a more modern looking grey color. In addition to the color, the font in the content editor for pages and posts has changed. It got a bump up in size and change from black to a dark grey.

New site theme, Twenty Ten

The default theme has been updated as well. The new theme, aptly named “Twenty Ten”, includes support for all of the new features, and six widget areas. There are two widget areas in the right sidebar, and four in the footer.

Comments directly on the page/post in the backend

When you’re viewing a page or post in the backend, you can now view all the comments that have been posted to it. The new comments section is not a replacement for the existing comments section, it’s just a way to extend it. In the new section, you can control all aspects of the comment like you can now in the existing section.

Theme management

The themes section has been revamped to include tabs for your existing themes, and to install themes. Both of these functions are available now, but the tabs make them more prominent. In WordPress 2.9, there is also no way to get back to the “Manage Themes” page without selecting it from the menu on the left, or using your back button.

Menu system

This may be one of my favorite new features. Keep in mind that this is far from complete. They say that it will not function/look the same in the next beta, but they didn’t want to hold up the beta release for this one section.

The new menu system gives non-web-savvy people control over their menus on their website. I just had an experience that this menu system would have been perfect for. I created a client’s site that had all menus and dropdowns dynamically populating from their pages and categories. They only wanted some of these pages to be displayed, so I created a custom field solution to display certain pages in the menu.

With this new menu system, users can just go into the “Menus” page and select what they want to display in the menu. Users can create multiple menus, which can then be placed on the page via PHP code or widgets. Users can put any link in the menu they want. They can link an existing page or category, and even custom links to any URL. When linking to an existing page or category, the user can search for the page name, and WordPress will find all the pages with that word in the title. From the results, that link can added to the menu.

Miscellaneous Features

There are a few other new features such as the ability to change the background and header images within the backend. I’m assuming these are theme dependent features, but I haven’t tested them out yet. There is also a new “featured image” area when editing a post or page. I added a featured image to one of the posts, but didn’t notice any changes. I’m assuming this feature isn’t quite finished.

Explore WordPress 3.0

If you want to check out WordPress 3.0 for yourself, hop over to the WordPress blog post and download the release! Leave a comment if you find a new feature that I have missed, or comment about your favorite new feature.

In the meantime, there’s no reason we can’t chat it up a bit on twitter! @cameronbaney

This is the first tutorial in the series that I will teach you how I created the site. In this tutorial, you will learn how to recreate the background of my website.

Create the gradient

In Photoshop, create a new document and make it the size you want. For my background, I used 1920 pixels x 1200 pixels. Next, create a new layer (Layer -> New -> Layer) and name it “Gradient”. Fill this layer with any color. It doesn’t matter what color you use, because the gradient will be all you see.

Next, add some blending options to the layer (Layer -> Layer Style -> Blending Options). In the layer style window, select Gradient Overlay and use the properties in the screenshot below.

For the actual gradient, you may use whatever colors you want. I chose to use a variety of colors in the spectrum. Once you applied the gradient, you should have something that looks similar to the following:

Darken the Edges

To add more depth, you can darken the edges. This adds depth to the graphic, and creates a subtle border. This step is simple, and a matter of preference.

Create a new layer above the gradient layer to separate the image effects and name it “Edges”. Use a large soft brush with black as the color (I used around a brush size of around 300.) Next, go around the edges of the image and paint the black. The easiest way to achieve this effect is to zoom out of your image so you can see the grey document background. Once you have zoomed out, paint with your only a quarter of your brush over the actual image, and the rest of the document background. Put more of the brush on the image to create a darker area. Repeat this process until you are please with the look. After this step, you should have something that looks similar to the following:

Adding Lines for More Depth

The next step is where the background comes to life. Create a new layer above the dark edges, name it “Lines”, and fill it with any color. Add blending options to the new layer, and select Gradient Overlay. This time, we are going to use a noise gradient instead of a solid gradient. This layer will be desaturated in the end, so colors do not matter. Use the properties in the screenshot below.

To get different effects, use the Randomize button in the Gradient Editor. You can keep hitting the button until you find a pattern that you like. Make sure you are focusing on the lines that it is creating, and not the colors. Remember, this layer will be desaturated in the end, so colors do not matter.

After the blending options have been set, and you are satisfied with the look, you need to separate the layer style from the layer. This is done by selecting the layer, and then selecting Layer -> Layer Style -> Create Layer. This creates a new layer for all of the layer styles applied in the Blending Options.

Once the new layer was created, you can delete the original “Lines” layer. Rename the “Lines’s Gradient Fill” layer to “Lines”. Next, desaturate the layer so the original gradient’s colors can be shown. This is done by selecting Image -> Adjustments -> Desaturate. The desaturate property will remove all color from the layer. Finally, select the “Lines” layer and change it to a Hard Light layer with 75% Opacity. This allows what is under the layer to show through the “Lines” layer. You should end up with something that looks like the following:

Add Highlight Lines

The final step adds another level of depth to the image, but this time with highlights. This step is depends entirely on preference. Create a white line using the Line tool that follows the existing lines. The best way to do this is to zoom out of your image so you can see the document background as well. Then, when creating the line, hold in the shift button so you create a line that has an angle of 45°. Also, when you create the line, make sure that it extends the entire height of the image. See below for an example of what the plain line should look like (located in the middle).

Next, line up the highlight line with one of the existing lines. This will keep up with the consistency of the image and make the highlights more fluid. Finally, add a mask to the line shape layer. This step will be for the lines in the middle that come up from the edge, and fade near the middle of the image.

For the mask, use a large soft black brush and paint over the areas of the line you don’t want to appear on the image. Make sure that you keep the soft edge of the brush towards the part of the line that you want to appear in the image. That way, you will have a smooth fade. Once the mask is complete, adjust the layer’s opacity so it blends with the image, and doesn’t look out of place. For the four highlight lines that I created, I used one 25% opacity layer and three 40% opacity layers. The level of opacity will depend on the colors you used, and your preference. Repeat these steps to create more highlight lines until you are satisfied.

You’re Done

The final image should look similar to the following:

Feel free to use this tutorial to create backgrounds for your own website, design, or desktop! Tune in for the next tutorial in the series that will teach you how to create the animation effect for the different pages of the portfolio.

I will be posting everything from website showcases for inspiration to tutorials and even my favorite tweets. Aside from my blog, you can also follow me on twitter: @cameronbaney where I tweet about everything web design.