Demo | Buy this Template

Light Grunge Demo
Wooden Demo

Features of Show&more:

• 3 Different Styles
• 6 Different Styled Page Templates
  • Index Page
  • Portfolio Page
  • Services Page
  • Blog Page
  • Single Blog Post Page
  • Contact Page
• Valid HTML
• Project Slider
• Dropdown Navigation with jQuery
• Easy Change between the different styles
• Filterable Porftolio site
• Sidebar with Advertising
• All PSD Files included
• Lightbox implemented and easy to use

Credits:

• jQuery.com
• creattica.com

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/

The aim to create this theme was, to design a professional looking portolio theme, to showcase your work in a great way and also give the visitor the chance, to contact the owner of the site easily.

In the finale theme, there will be about 5 sites (homepage, services, blog, portfolio, contact) and I’ll try to develop 2 or 3 different stylesheets. I will also create a custom wordpress plugin to manage the theme and the layout, to change the current stylesheet and manage RSS, Twitter, Flickr and so on. You see, this theme will definitely a premium one. New screenshots will be available this weekend. Stay tuned and look for new posts on my blog.

selector:pseudo-class { property:  value }

CSS Pseudo Selectors can also be used with classes

Selector.class:pseudo-class { property: value }

Common Pseudo Selectors

We often use pseudo selectors on our websites and they are really important. I am talking about the link states.

a:link {color:#FF0000} /* unvisited link */
a:visited {color:#00FF00} /* visited link */
a:hover {color:#FF00FF} /* mouse over link */
a:active {color:#0000FF} /* selected link */

Take care of the right order, otherwise they will not work.
You can also combine the Pseudo-Classes with CSS Classes

a.red:visited {color:#FF0000}

The :first-child Pseudo-Class

A really useful but most people do not know that it exists, is the :first-child selector. It matches the first child of another element. To make sure, that it is also working in Internet Explorer, a doctype must be declared
In the example below, the selector matches the first “p” element and changes the text color to blue.

Blue colored paragraph

Normal styled paragraph

Now we are going to select every “i” element in the first “p” element of the document. It is really easy, we only have to write p:first-child i { }

I am italic. I am italic

I am italic. I am italic

In this example, the selector mathes the first “i” element in every “p” element.

I am bold. I am bold

I am bold. I am bold

That’s it. In the next article I’ll write about Pseudo elements in CSS, like :first-letter.

Now to the design. It’s a simple and very clean design and it only costs 20$. If you want, you can buy it here and for a live preview, visit Designica Preview

Features of this Theme:

• 3 psd Files, including the Homepage, Blog Post and the Contact Page
• Contact Form Plugin
• Widget able Sidebar
• Lightbox included
• Compressed Images for faster loading
• Featured Post on the hompage with automatic image resize script
• Valid CSS and HTML Code
• Compatible with all major browsers
• Social Bookmarks
• Recent Posts
• Archives
• Custom About Page
• Custom Contact Page
• Help File included

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?

http://christopher-scott.com/

http://www.dhcards.com/index.html

http://www.vyniknite.sk/

http://www.digimurai.com/

http://www.taptaptap.com/

http://designyantra.com/

http://www.corvusart.com/

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

http://www.madfrogdesigns.com/

http://www.dreamzmaster.com/

http://www.ayushsaran.com/

http://www.efinterns.com/

http://wpantivirus.com/

http://sarahlongnecker.com/

http://www.clearspring.com/

http://www.outlawdesignblog.com/

http://www.pvmgarage.com/

http://ayakaito.com/