In this tutorial I am going to show you the process of making a simple and clean design blog using the latest Photoshop. We are going to use the new Character Styles and Paragraph Styles to help us streamline the process.

Here’s a preview of what our final result should look like.

To follow this tutorial, you will need the following resources:

• Free Font Sansation from Bernd Montag.
• 26 Repeatable Pixel Pattern from PSDfreemium.
• Free Social Media Icons from Daniele Selvitella.
• Hand Cursor Icon from PSDfreemium.
• Stock photo: Harvest 1 from mordoc.
• Stock photo: New York Streets 3 from lonniehb.
• Stock photo: Daisy Age from SteveFE.
• Stock photo: A tree on the horizon from Ydiot.
• Stock photo: Sales figures from wagg66.
• Stock photo: Time is Money! from knox_x.

Preparing the Canvas

Step 1

In this design, we are going to use 960 gs as its framework. Download the template from its main page and inside the zip file, search for the photoshop file. Open the ’12 Column Grid’ file in Photoshop.

Click the eye icon for the 12 Col Grid layer to hide it; we are not going to need it for now.

Step 2

The current canvas size is too small. Click Image > Canvas Size (or Ctrl + Alt + C). Add a bigger size and make sure to set its anchor point to center.

Step 3

Hit Ctrl + R to reveal the ruler. Click View > New Guide to make new guide that will help us design accurately. Select Vertical and at Position: 185 px to make a vertical guide 185 px from the canvas top left corner.

Step 4

Draw another vertical guide at position 150 px, 1095 px and 1130 px.

Below is our final guide inside the canvas.

Preparing Color Theme

Step 5

For this design, we are going to use a nice color combination from Colorlouver. Click on the Preview link to open the color combination as a jpeg file.

Save the color combination and place it inside the Photoshop file. By placing the image directly inside the canvas we can sample its color faster and easier.

Preparing The Background

Step 6

Select Background layer and click lock icon on top of the Layers panel to unlock it. Double click the thumbnail to change its color.

Click the second color, #948371, to select it.

Step 7

Draw a rectangular shape on top of the canvas. This will be the second background.

Step 8

Keep the shape selected. In the Option Bar, open Fill Color box and then click the color wheel icon. When the Color Picker dialog box is opened, click the first color to select it. For its Stroke color select None.

Step 9

Make a new layer and then select the upper canvas using the rectangular marquee tool. Activate the gradient tool and fill it with radial gradient from white to black. Make sure the gradient is centered on top of the canvas.

Change its Blend mode to Screen and reduce its Opacity to 37%.

Step 10

Make a new layer and name it ‘shadow’.

Draw a rectangular selection at the bottom of the secondary background like shown. Click Edit: Fill. Set Use to Black. Click OK to fill the selection with black.

Step 11

Soften it using Gaussian Blur. Click Filter > Blur > Gaussian Blur.

Step 12

Hold Alt and then place the cursor between shadow and upper background layer. Without releasing the Alt key, click to convert the layer to Clipping Mask. By converting it to Clipping Mask, the shadow now goes inside upper background.

Step 13

Bring down shadow Opacity to 50% to make it subtle. Below, you can see the result in 100% magnification.

Step 14

It’s always a good idea to put these layers in one group. To do this, select all layers and then click Ctrl + G.

Header

Step 15

Draw a rectangle on the upper canvas like shown.

Step 16

In the Option Bar, set Stroke color to #af9f8e.

Step 17

For its Fill color, select linear gradient from #d0c4b9 to #a89c91.

Below is the result in 100% view.

Site’s Name

Step 18

Add the site’s name on the left side of the design. Observe the placement as shown below. Double click the text and add Drop Shadow. For its font, use Sansation.

Menu

Step 19

Draw menus on other side of the menu bar. Use font Sansation 14 pt. Again, notice the placements.

Step 20

For the active menu, set its font type to bold.

Step 21

Activate Polygon tool and set Sides to 3. Draw a triangle shape with Fill: #3d3123 and Stroke: None. Add Layer Style > Drop Shadow.

Step 22

Let’s emphasize the active menu by adding a line underneath it. Activate the Line tool and set its weight to 5 px. Select #f76b6a for its Fill, without Stroke.

Put the line right under the active menu and add 1 px space to bottom of the menu bar.

Using Character Styles

Step 23

Let’s save the character setting as a Character Style. This feature is a simplified version of Character Styles in InDesign. To save it, activate the text and then click the ‘New Character Style’ icon.

Double click the new Character Style and use the following setting.

Step 24

Select the other menu and then click the Character Style to apply it. If you find a plus sign next to the Character Style it means that the character has a different setting. To override the settings, click the circular arrow icon.

Step 25

Repeat the previous step to make a new Character Style for the active menu.

Step 26

So, what’s the point of using Character Styles? Character Styles help us centralize the character setting. We can simply edit the Character Style to edit every text using that style. See an example below. If we edit the font type inside Character Style Top Menu – Normal to Corbel, all the normal menu is automatically changed to Corbel.

Step 27

Make a new layer and place it under the menu bar. Ctrl-click the menu bar to make new selection based on its shape. Fill it with black.

Step 28

Remove selection using Ctrl + D. Soften it by adding Gaussian Blur, Filter > Blur > Gaussian Blur.

Slider

Step 29

Draw a rectangular shape with the width of 10 columns (see below).

For its Fill color select #dfd1c2. For its Stroke select #c8baac with size 10 pt. Click the small dropdown arrow next to the line preview and make sure Align Inside is selected.

Step 30

Paste a picture on top of the frame. Convert it to Clipping Mask by hitting Ctrl + Alt + G. The picture will automatically goes inside the slider frame. If needed, you can move and resize the picture without affecting its frame.

Step 31

Draw another rectangular shape behind the slider with same color. Make sure to snap it to the outmost guide. Add Layer Style > Pattern Overlay using pixel pattern from PSDfreemium. Tone down its Opacity to make its subtle.

Step 32

Draw a rectangular shape above the shape with Fill: #b3aca5 and no Stroke. Hit Ctrl + T and then rotate it 45°. Convert layer shape to Clipping Mask.

Step 33

Duplicate the shape and resize it. Change its Fill to a darker color. Convert layer shape to Clipping Mask.

Step 34

Repeat the same step to draw another arrow on the other side.

Step 35

Ctrl-click slide frame to make new selection. Make a new layer and convert it to a Clipping Mask. Fill the selection with black.

Step 36

Deselect (Ctrl + D) then soften it using Gaussian Blur.

You can reduce the shadow Opacity if needed.

Step 37

Draw a rounded rectangle on corner of the slider with Fill #c8baac.

Step 38

Draw a circle inside the shape. Set its Stroke to black with Size 1 pt and remove the Fill.

Step 39

Select the circle path using Path Selection tool. Shift + Alt-drag the path to duplicate it.

Repeat this to draw more circles.

Step 40

Select one of the circle paths. Hit Ctrl + Shift + J to cut it to a new layer.

Step 41

In the Option Bar, remove its Stroke and change its Fill to a radial gradient from #e38989 to #bb5c5c. Add Layer Style > Outer Glow and Drop Shadow.

Step 42

Draw an elliptical selection under the slider. Make a new layer and fill it with black.

Step 43

Deselect (Ctrl + D). Soften it using Gaussian Blur.

Lower Background

Step 44

Draw another rectangular shape for the bottom background. Use the same Fill and Stroke color as the slider shape.

As always, be very cautious with its placement. We want it to cover every guide on the canvas.

Add Layer Style > Pattern Overlay.

Below is the result in 100% magnification.

Step 45

Select its uper area using the Rectangular Marquee tool.

Step 46

Make a new layer, place it behind the shape. Fill the selection with black. Hit Ctrl + T, right click and select Perspective.

Drag its upper corners outward.

Right click again and choose Scale. Drag the upper handle down.

Right click and choose Warp. Drag left and right segment inward.

Soften it using Gaussian Blur.

Tone down the Opacity to 20%.

Step 47

Draw a white rectangule inside the background. This is going to be background for the site’s main content.

Add a space of 10 px to the left, right and upper side of the background. The spacing should be easy because we have made the guide in early steps. Add Layer Style > Outer Glow.

Step 48

Add a new guide, 25 px from the upper side of the shape.

Section Title

Step 49

Add a new Character Style for the page section title and its description.

Add the section title and its description using Type tool. Apply styles we have made earlier. Make sure to add 25 px space from the upper side of its background with the help from guide made earlier.

Step 50

Draw a 5 px line under the site’s description with Fill: #938270 and Stroke: None.

Blog Post

Step 51

Make another Character Style for the post title.

Step 52

Add a post title and apply previous Character Style.

Step 53

Draw a rectangle shape under the title with 4 columns width. Set white for its Fill and #bebebe for its Stroke. Add Layer Style > Stroke.

Step 54

Paste an image on top of the shape. Convert it to Clipping Mask (Ctrl + Alt + G).

Step 55

Draw a rounded rectangle with Fill: #8e8380 and Stroke: None. Convert it to Clipping Mask.

Step 56

Make new Character Styles for the blog metadata.

Step 57

Add metadata text on top of the shape and apply the Character Style we have made earlier.

Step 58

Activate Type tool and click-drag to make a text box. Set its width to 4 columns. Click Type > Paste Lorem Ipsum to fill it with auto-generated Lorem Ipsum from Photoshop.

Step 59

Make a new Paragraph Style for the character content. Click on the new icon on the Paragraph Styles panel.

Double click the Paragraph Style and use this following setting.

Step 60

Apply this style to the post content. You can also experiment with its Indent and Spacing settings.

For web design, deactivate Hyphenation.

Step 61

Draw a rounded rectangle with Fill: #8e8380 and Stroke: None. Add Layer Style > Pattern Overlay. For consistency, use same pattern as in the slider.

Step 62

Add a button label. I suggest you to save it as a character style. This way, we can use it easily for other buttons.

Step 63

The previous button is for normal condition. Let’s duplicate it and change its color to #f76b6a. Also, set its label type to bold.

Step 64

Place the post inside a group and then hit Ctrl + J to duplicate it. Alt-drag to duplicate the group.

Repeat the same step to make more posts. Remember to change the picture and title of each post.

Step 65

Duplicate Read More button and change its label to number. We are going to use it for page navigation. Remember to set one of the button to hover condition.

Step 66: Footer

Let’s start working on the footer. Add a widget title and its description.

Step 67

Add link and draw a 1 px line underneath it. Set Fill: None and Stroke: #8e8380.

Step 68

Click More Options button and select dashed line.

Step 69

Add more links into the widget.

Step 70

Duplicate the widget.

Step 71

We also need to add the hover condition. Set one of the link to bold.

Underneath that active link, add a 5 px line. Set its color to #f76b6a. For consistency, the appearance of this link is similar to the active menu on the menu bar.

Step 72

Add another rectangle at the lower area. Set its Fill to #3d3123.

Footer Information

Step 73

Add footer info using Type tool. Give it a dark Drop Shadow to add contrast to its background.

Social Network

Step 74

Add some social media icons from Daniele Selvitella. Add Layer Style > Outer Glow.

Step 75

Tone down normal icon to 50%. For hover condition, let’s just keep its Opacity at 100%.

Step 76

Grab a free hand cursor icon and place the smallest hand cursor above the active or hover link.

Final Result

This is our final result. You can see that the latest Photoshop version has some interesting features for designing a web layout. Character Styles and Paragraph Styles is a significant improvement for every web designer.

• Demo
• Download Source

Related posts:

1. Design Sleek Video Player Interface – Photoshop Tutorial
2. Drawing Realistic iPad2 – Photoshop Tutorial
3. How to Draw Apple iCloud Icon – Photoshop Tutorial
4. Creating The Avengers Text Effect With Illustrator & Photoshop

Editor’s Note: This article was written by Tom George, who is working as a .NET consultant for top10hostingonweb.com.

E-commerce is a very competitive field because your rival is no more than a click away. If a customer doesn’t like your site, he simply looks for another e-commerce site to buy products from. If you want to gain more customers and attract attention, you want to make sure that your website is as usable and as customer-friendly as possible. It doesn’t matter if your prices are very low or you have the best products in the market because if customers get confused navigating your website, reaching a preset target will likely be difficult.

(Image Source: Fotolia)

Usability means that you have to make the buying process as quick and as easy as possible. These tips will let you create a more usable e-commerce website that can create higher conversion rates.

Read First: How to Ruin Good User Experience in 20 Simple Steps

1. Call To Action & Sign-up Buttons

Avoid lengthy sign-up forms that can take a few pages or so before visitors can successfully register to your site. As an e-commerce site, you don’t actually need to know their address, phone number, what kind of work they do, etc. A simple email address and a password are just all you need. That being said, never underestimate call-to-action buttons as this help in building higher conversion rates and improving site usability. Make these call-to-action buttons stand out.

You need to think about the button size, color, font, wording and positioning. It needs to be very clear and in a color that will stand out from your website background. Moreover, local language should be taken into consideration, so use IP delivery to serve custom versions of your call-to-action button based on the customer’s location.

Also read: Call-to-Action Buttons: Guidelines, Best Practices and Examples

2. Buying Without the Need to Register

One thing online shoppers hate the most is the long and tedious sign-up process before finalizing a purchase. What if you go about allowing guest users to checkout products without the need to register, then ask them afterwards if they want to sign up, to make the next purchase on your site easier? This kind of method is known to increase sales (up to the tune of $300 million), improve customer retention, and reduce cart abandonment.

If you are still looking for inspiration for registration materials, check out this collection of Beautiful Examples of Login and Registration Forms.

3. Search Function

Search functionality helps customers to find what they are looking for, making their shopping experience more satisfying than frustrating. Who would want to go from one page to another, read the description of every product you have in your online store, just to find what they are looking for these days?

This is highly recommended for an e-commerce site that has a wide variety of products sold, and if it is added with category refinement, the search process can be even quicker, allowing buyers to find what they are looking for.

You may also like: Showcase of Beautiful Search Box User Interface Designs

4. Breadcrumb Navigation

When placing orders, customers have to know where they stand in their purchase process – how many steps have they accomplished, and how many more to go. Without breadcrumb navigation, customers will easily get bored and think your shopping procedures take forever, making them more likely to just abandon their purchases, halfway through.

Moreover, using breadcrumb navigation will help customers to go back a previous step and edit any mistakes they have made rather than start over from scratch, or give up on the whole process altogether.

For your Reference: Breadcrumb Navigation Examined: Best Practices & Examples

5. Shopping Cart

No e-commerce website is complete without proper content management and personal detail security. Shoppers should feel confident in buying products at your e-commerce site, so you need to assure them that your site is a reputable site that has features to protect the privacy of your customers. Get a trust certificate like Hacker Safe or VeriSign and an updated SSL certificate to build up customer trust and offer better shopping security.

For more Shopping cart options, check out our best of Open Source e-Commerce Shopping Carts

Suggest Related Items

The way Amazon.com suggests related items, like batteries, accessories and peripheral products when a buyer is purchasing a laptop, not only help save the customer’s time but also helps increase revenue and customer retention on your e-commerce site.

Hidden Charges

Customers hate agreeing to the price of a product only to find out that it is going to cost them 2% more when it is time to share their credit card details. Make sure that you display prices, taxes, shipping charges, discounts early, so that buyers know the final sum they will be forking out.

If you present your customers with a lot of unexplained costs, they will more likely to abandon their purchase, and even worse, their trust in your site will be broken.

Further Reading

If you are interested in more materials related to e-commerce, check out the following posts on the subject:

• E-Commerce Design Resources: The Ultimate Round-Up
• 10 Essential Things Your E-Commerce Site Should Have
• Ultimate Guide to Setting Up Your First Online Shop

Related posts:

1. 10 Essential Things Your E-Commerce Site Should Have
2. 7 Rules To Creating A Professional Portfolio Site
3. Diving Into E-Commerce: Do You Have What It Takes?
4. [Freebie] Glossy E-Commerce Icon Set

Many of you spend long hours every day on Facebook to keep up with your friends’ activities, but who has got the time these days to stick to just one website? It would be helpful to check on updates although you are on a different website, doing your work or assignments.

There are a number of alternatives to get Facebook updates without opening the website, one of it is by using the RockMelt browser, but many people are more that comfortable with Chrome and Firefox already.

In this quick guide, we will show you how you can skip the website and still get to check real-time Facebook updates and notifications with the MyStatusBar extension, available for both Chrome and Firefox browsers.

Recommended Reading: 9 Ways To Keep Hackers Off Your Facebook Account

Facebook Notification with myStatusBar

If you are already on Chrome, go to the MyStatusBar download page and install the extension.

When installation is completed, you will be redirected to the MyStatusBar homepage, click on the Login to Facebook button at the bottom left of the page.

Click Log in with Facebook.

Click Allow to allow MyStatusBar access to your Facebook account.

Now, you will see MyStatusBar appear at the bottom of your browser with your Facebook notification updates in real-time.

On a closer look, you will see this;

Conclusion

Now you don’t have to worry about having to open your Facebook account every time you want to check your updates. MyStatusBar has made it easier for you to be notified of updates without opening up your Facebook.

Related posts:

1. Disabling Activity Posts from Facebook Apps [Quicktip]
2. How to Unfollow Post Updates After Leaving Comments on Facebook
3. How to Listen to Music with Friends on Facebook [Quicktip]
4. How to Prevent Yourself From Turning Up on Facebook Recommendation Ads