Back to this tutorial. I realized that sneak previews of upcoming websites can be very useful and drive a lot of traffic to your site, because visitors get excited to see the whole design and will check out your blog for new updates. This was the main reason why I wrote this article. But I don’t want to talk to much so I just continue with the tutorial.

Step 1

First, create a new document with the screenshot of your design, which you want to create a cool preview of. I decided to use Pacifica, a very professional wordpress template from themeforest ( link )

Step 2

Copy this layer and name it “blur”. This will be the blurred layer. Then go to Filters -> Blur -> Gaussian Blur and apply this filter with the settings below.

Step 3

Create a layer mask to the previous created layer “blur”. Be sure to have black as your foreground color selected. Then selecte the Elliptical Marquee Tool and create a small small circle of the screenshot you want to keept the attention and fill it with black. Now this circle isn’t blurred. After that don’t deselect your selection. We will need it in the next step.

Step 4

Now create a new layer and call it “Border”. Then go to Edit -> Stroke…
Add a stroke to the selection with the settings below, but you can change the color of the border in the way you like. Then deselect it with STRG -> D . That’s it. You can even add more such circles to your blurred screenshot to make your visitors more excited.

My Final Version

The following list is to inspire you and to give you ideas to improve your comments.

1. www.nettuts.com

2. www.fuelyourcreativity.com

3. www.sitesketch101.com

4. www.pvmgarage.com

5. www.themeforest.net

6. www.wefunction.com

7. www.designshard.com

8. www.abduzeedo.com

9. www.webdesignerdepot.com

10. www.hongkiat.com

Further Link

• http://www.smileycat.com/design_elements/blog_comments/

1) Use Headlines

One of the best possibilities to separate paragraphs from each others, is to use Headline Tags. Common H-Tags are h1, h2 or h3, it depends on the blog theme you are using. To improve the visual appearance, insert every big paragraph an Headline, to make clear, that there is a new paragraph.

2) Use lists , tables, block quotes

To improve scanning speed of the article, use this tags. Because they look different than the rest of the post, it’s easier to recognize them. And do not forget! The most visitors only scan your blog for the interesting parts. So, if they see a good looking table with data or a list with some enumerations, they will read that and remember that. Personally, when I’m learning for school, I like to have a structured and visual appealing document to learn from.

3) Keep your article as short as possible

Nobody wants to read a novel on a blog. We are all searching for information we want. And we do not have time enough to read everything until we found what we are really interesting in. Before you publish your article, read everything again and delete unnecessary parts. Avoid long introduction paragraphs, instead keep it short and get to the point. Try to keep everything under 300 words.

4) Try to use images as often as you can

A picture says more than 1000 words. So, try to use images as often as you can, to replace long and boring text paragraphs. It is also always a good idea to include a big picture at the top of every article.

5) Avoid misspelling

Before you publish the article, check if there are any grammar mistakes. They are really annoying and distressing. If you do not have Microsoft Office Word installed or you want to use an online tool, I recommend you http://www.spellchecker.net/spellcheck/ . It is a great and also free tool to check your article for misspelled words.

6) Use syntax highlighting

If you are going to post some programming code on your blog, you should use a syntax highlighter to improve the readability. It is easier to re-use the code for your visitors, because most scripts allows users to copy the plain code and paste it into their IDE’s. A great script is e.g. http://code.google.com/p/syntaxhighlighter/wiki/Usage . There is also a wordpress plug-in available, if you do not want to implement everything yourself.

7) Do not overuse foreign words

Keep your article or tutorial as simple as possible. Not every reader has the same knowledge you have.

8 ) Use Keywords for better SEO

When you are using Wordpress, you simply can add keywords to your articles. It is not only for your readers, it’s also for the nice little Google crawlers out there, which make everything public to our visitors.

9) Write a short summary of the article

At the end and on the top of each article, append a short summary of what you have written. It will help your readers to think of everything again and remember the most important things.

10) Format important words

To let words look more important, style those bold or even with a bigger font size.

What are your tips to style blog articles for better reading and scanning?

Step 1

First create a new document and a new layer, call it “Background” and fill it with a radial gradient from #224897 to #417fba.

Step 2

Now grab the Rounded Rectangle Tool with 10px, draw a Rounded Rectangle and fill it with white. Then duplicate this layer, drag it under the other Rectangle and fill it with black. This will be the shadow for this window.

Step 3

Select the layer with the black shadow and apply the gausian blur with a radius of 5px. After this make a selection of the white rectangle, by holding down the Control Key and clicking on the Form layer. Now press the delete key. Last we also reduce the opacity of the white rectangle to 6% and the opacity of the Shadow layer to 60%.

Step 4

To create the white border, make a selection of the white rectangle again, create a new layer and fill it with a 1px white stroke with clicking on Edit -> Stroke… Choose “inside” for location. Because the border is too bright, we also reduce the opacity of the layer to 30%.

Step 5

Select the rectangle tool and create a white rectangle. Rotate it and rasterize it. Then make again a selection of the transparent rounded rectangle, invert it by pressing Control + Shift + I and press the delete key.

Step 6

Apply a gausian blur to the new made layer with 10px and also reduce the opacity to 8%.

Conclusion

I hope you had fun while doing this tutorial and subscript to my rss feed for future tutorials and articles.

Download the .psd file

Today I want to show you, how to create the Letterpress effect. It’s a very cool looking effect and it’s used on lots of new designed websites, because it’s also a design trend for 2009. A list of more cool design trends for 2009 can be visited on http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/

So, let’s start

Step 1

First create a new document with a size of 800×600px and fill it with a gradient from #b8b8b8 to #f0f0f0

Step 2

Grab the text tool and write some words. I wrote my name “Bernd Artmüller” but you can write anything you want.

Step 3

Now we’re making the cool Letterpress effect with some simple layer styles. Double click on the layer with the text to open the Layer styles panel. Apply a Inner shadow effect with opacity of 60%, distance 1px, choke 0px and size of 4px

Now fill it with a gradient from #6f6f6f to #b0b0b0

That’s it. You created the Letterpress effect.

Now you can play with it and apply this style to other shapes like i did.

Download the .psd for practicing

Today I want to show you a way to create an amazing 3D depth effect. I have seen this effect on http://dragoninteractive.com/ and I think, this is a really great way to give your website a 3D feeling.

Step 1

Create a new document 800×600px. Then create also a new layer and call it “Right Side”. Take the Pen Tool and make a shape, similar to this one and fill it with #464646. After this rasterize it.

Step 2

Create a new Layer, call it “Left Side”, fill it with #626262 and put the layer below the layer “Right Side”.

Step 3

Create a new Layer and grab the brush tool. Set it to a size of 35px, a hardness of 0 and the foreground color to white. Then draw a line from left to right with an opacity of 40%.

Step 4

Set the brush to a size of 12px and the opacity to 50 and draw another line above the previous made line. Then change the opacity of the layer to 20%. Now we have to cut out a little bit of the line on the left side. To do this, make a selection of the “Right Side” layer by pressing the Control Key and clicking on the small Thumbnail of the layer in the layers panel. Now invert the selection with pressing Control + Shift + I and press the delete button.

Step 5

We have to make this again, to create the 3D effect. It very similar to the two previous steps. Create a new layer, grab the brush tool, set the size to 40px, the foreground color to black and the opacity to 50%. Draw a line from right to left with a brush size of 15px and a opacity of 60%. Now make a selection of the “Right Side” layer, invert it and press delete.

Step 6

Repeat this steps, until it looks like the same as the picture below and try to make the lines a little bit different than the others.

Step 7

Now create a new layer, draw a rectangle at the top of the picture and fill it with a gradient from grey to a darker grey.

Step 8

Create a new layer. Grab the brush tool again and set the foreground color to black. Draw with the brush until it looks like the image below.

THATS IT. It’s a simple tutorial, you can change a lot when using on a webdesign.

]]> http://berndartmueller.at/2009/04/13/tutorial-create-a-nice-3d-effect/feed/ 1