1.WeLoveWp

This site is dedicated to showcase only WordPress based sites, very good collection and website, I think this is the most popular Wordpress showcase site for now.

2. WP Inspiration

Website showcasing the best WordPress sites on the Internet.

3.LoopPress

This is one more site, created by one more WordPress fan, who really want to know how other developers and designers are using ut, designing for it and adding to it and LoopPress is a gallery devoted to beautiful websites, blogs and themes built on the Wordpress platform.

4.WPLuxe

WPLuxe brings you news on the top Premium WordPress themes and plugins, and provides a showcase of gorgeous sites using Premium Themes.

5.Official WordPress Showcase

Also some time ago WordPress added showcase section to their own site too, where you can rate, vote and submit Your WordPress based designs.

6. WPCube

This site is created to showcase best designed Wordpress sites around the net, main objective is to display well designed unique WP themes created by great designers and the gallery is updated frequently, the sites listed are collected while we browse the net or submitted by our visitors or by authors themselves…

7. WP Garden

WP Garden is here to highlight some of the beautiful websites, created using WordPress. It gives an opportunity for the site creators to show off their work and it also benefits common people as a means of inspiration. All websites featured here are carefully chosen by a panel of experts.

8. WP Float

Here at WP Float you will find an up-to-date collection of websites created using WordPress – truly amazing and open source platform.

9. WPInspire

WPInspire is a place where beautifully designed websites powered by WordPress are showcased.

Its purpose is to showcase designers’ work and be source of inspiration for others.

10. MixCSS

Also one more beautiful website showcase site, not completely dedicated to blog websites, but has inspiring section there. One friend of mine told me this site is really previous year treasure mine, must know this one.

11. Best Web Gallery

Again not completely dedicated, but with great Blog section there, I am sure you’ve heard about this one.

12. CSSArtilery

CSSArtillery, showcase of web standards state-of-the-art & inspirational websites from all around the globe. Not specifically created for blog showcasing, but they have a nifty “Blogging” section there.

Of course, there are many web-design showcase sites with blogging sections, but I just featured three best ones in my opinion. If you feel I am thinking wrong, you can always add your picks to create this article more complete!

Step 1

Open the Pixelmator file we created for UI tips tutorial.

Step 2

The tool that we will use in this tutorial that will allow us to transform our design into a Web page is the Slice Tool (K). Basically we will use this tool to select the areas that will be save-as images. We won’t need the whole design, just a few parts that will be a part of the UI (background, logo, buttons, screenshots).

Step 3

With the Slice Tool (K) selected, create a rectangle slice around the logo as the first slice. Notice that I didn’t include the text next to it because that will be HTML text.

Step 4

Now select the Tab of the navigation. Try to be very precise when slicing your site because a single pixel can disrupt the alignment later on in the HTML part.

Step 5

The cool thing about the Slice Tool is that we have some options; for example, if we are slicing a photo, we can use JPEG, while for UI elements, we can use transparent PNG. Also, you can change the slice name; in this case, my slice name is “active-tab.”

I’m using transparent PNGs for the UI elements and logo, and JPEG for the screenshots.

Step 6

Keep selecting the parts of the design that need to be sliced. In the screenshot below, I created 2 more slices, including one for the line that divides the feature content that will be used twice, at the top and bottom of this section. I also selected the main screenshot.

Step 7

Here, let’s select only one screenshot, and then we repeat it in the HTML, or you can save different images later on..

Step 8

A very important part is the background. This slice will have to be exported first because we will need the background to be active for this UI element; otherwise, it will be transparent.

Step 9

This is a the shadow that we have in the feature section, but I moved it down to slice it separately from that area; once you export it, open the file and go to Edit > Transform > Flip Vertical to create the bottom shadow.

Step 10

After you have created all of the slices and named them properly, go through the layer palette hiding layers that are not necessary: all of the text and the background. As I mentioned before, the background slice will have to be exported again later on with the background active.

With all the adjustments done, click on Export for Web in the Slice Tool Option. A dialog box will open asking where you want to save the slices. Create a new folder on your computer called “Site”; inside this folder, create another folder called “imgs.” Select the imgs folder and export all of the images into it.

Step 11

If you did everything right, you will have images like those pictured in the image below.

Step 12

This is not exactly part of Pixelmator, but I will illustrate the HTML and CSS parts so you can understand what I did. Below, you can see the HTML file. We will use the “<div>” tag to create the structure of our HTML. We could use the new HTML 5 tags for that, but we would have to make some adjustments on the CSS, and it would have problems with the different browsers. However, I highly recommend that you check out HTML 5; it’s the future.

Step 13

If you take a look at the HTML code in line 8, there is a <link> tag where I linked the HTML file to the CSS file, the “styles.css” file. In this CSS file, I will define the look of the page using the images from Pixelmator.

CSS is like writing a cooking recipe: you indicate how the elements will look. You define the font properties (size, color, type, style, weight…), the background, the margins, the padding, and everything. The BODY element is the page itself. There you can find the background using the slice image from Pixelmator (bg.jpg). Also, there are HEADER styles.

Step 14

Here you can see how I coded the menu. The slice image of the tab is defined in line 71 for “#menu ul li.active a.”

Step 15

Here we have the FEATURE area; again, the backgrounds are defined in lines 79 and 85. Also, the font size for the title and the paragraph are present.

Step 16

Here is the code for the screenshots section. I used some CSS 3 properties to create some eye-candy effects, like the -webkit-transition and the transform.

Step 17

Here is the code for the footer; it is very simple.

Conclusion

Pixelmator’s Slice Tool (K) can definitely be used to design user interfaces. The secret of a good UI is simplicity and consistency, so it’s very important to optimize your design to have as few slices as possible as well as the code. Now it’s up to you. Once again, I highly recommend that you check out some tutorials on CSS and HTML; it’s not difficult, and in my opinion, it’s super fun.

Tutorial Resources

• Site demo
• Site demo files
• Pixelmator file

Step 1

Open Pixelmator and create a new document. I used 1000×1000 pixels. Then, fill the background with grey. On the menu, select File>Stylize>Noise. Select 1 as the amount.

Step 2

Select the Rectangular Marquee Tool (M) to create a rectangular marquee.

Step 3

Go to Edit>Refine Selection. Now you will be able to change the selection; you can increase or reduce the size, make the edges blurry with Feather, or create rounded corners with Smooth. I select level 15 for Smooth.

Step 4

Add a new layer, and then use the Gradient Tool (G) to fill the marquee area with the gradient. For the colors, I used a dark grey gradient from #666 to #999.

?

Step 5

Select the Rectangular Marquee Tool (M) again and create a marquee selection like the one in the image below. The idea here is to create a tab for site navigation. Next, simply delete the bottom part of the rectangle.

Step 6

To select only the objects within the layer, roll over the Layers Panel, hold Command, and click on the thumbnail of the layer you want to select.

Step 7

Go back to Edit>Refine Selection. Let’s increase the size by 1% and raise the Smooth level by 1%. The idea here is to create a little bevel, or stroke, and apply a gradient on it.

Step 8

Add another layer behind the tab layer. With the gradient tool and the selection still active, fill the layer with the gradient. The colors of this gradient are black to white, with the dark grey is at the bottom and the white at the top like a highlight 3D bevel. Use the image below for reference.

Step 9

Here is our navigation tab. We are accustomed to having filters and commands to create this type of effect in tools such as Fireworks or Photoshop, but as demonstrated here, these can be easily replicated. Of course, the manual process might take a few extra steps, but it can also help us better the way in which light and shade add depth to things.

Step 10

With the Rectangular Marquee Selection (M), create a rectangular selection of 1px height.

Step 11

Add a new layer and fill the selection with white. That way, we can create a white line.

Step 12

Add another layer and fill it with grey that is a little bit darker than the background. Go back to Filter>Stylize>Noise and add 1% noise to the grey. Then, move the layer down and place it right beneath the white line. The line will be the 3D bevel of the layer.

Step 13

Select each layer and go to Layer>Add Layer Mask. Fill the layer mask with black using the Paint Bucket Tool (N). The layer will disappear. With the Brush Tool (B) and a very soft brush, select the color white and paint over the areas you want to show. In this case, only the top center part of the rectangle and line will show, as in the image below.

Step 14

Select the two layers and duplicate them, then go to Layer>Merge Layers. Next, select Edit>Transform>Flip Vertical. This will create a rectangular area in which to feature the main content of the site. Try to match the colors of the tab with those of this main area. You can edit the colors of the layers by selecting Image>Adjustments>Hue and Saturation.

Step 15

People often ask me how to create a subtle letterpress effect. Some tools allow you to apply shadows or bevels, but Pixelmator does not have such an automated feature. However, there is a quick and easy way to create the same effect. First, add the text you want; in my case, I added “About Us” in black text, Arial font 16px.

Step 16

Duplicate the layer and change the color of the text to white, and then move it down 1 pixel. Now you will have a very nice letterpress effect. You can also make the effect subtler by reducing the opacity of the white.

Step 17

Create a few more navigation items, this time without tabs. The tab will be used only for the selected item.

Step 18

Add a little text about the product. For this, I switched to a bigger font, black Arial at 20px.

Step 19

Repeat the Step 17 to create the letterpress effect. Duplicate the text layer, change the color to white, and move it down by one 1 pixel. Tip: If your text color is white, you can create the effect by selecting black and moving the text 1 pixel up.

Step 20

Add more text using a much smaller font of 12 pixels. Outside the main area, add a title for Screenshots using the same 20-pixel font used to create the main text. Repeat the letterpress effect.

Step 21

Import a screenshot or other image and place it in your design. Move it to the right side so it can become the main image of the site. As you can see in the image below, the one I used is bigger than the main area and is overlapping the white line. To fix this, use the Rectangular Marquee Tool (M) to select an area that fits the part of the image located within the two white lines. Use the image below for reference.

Step 22

Next, go to Layer>Add Layer Mask. The mask will hide the areas that did not fit inside the marquee selection.

Step 23

Import a few more screenshots to use in the area below the Screenshots title. Let’s add some nice touches to these images. To create a little white stroke, go to Edit>Stroke. Select white for the color, 4 for the Width, and Inside. Press OK.

Step 24

It’s also very simple to create a shadow. First, create a marquee selection of the image, as we did in Step 6. Then add a new layer and fill it with black using the Paint Bucket Tool (N). To create the shadow, go to Filter>Blur>Gaussian Blur. I used 15 for the radius, but you can select a larger radius to create a larger shadow.

Conclusion

Next, just add your logo and a slogan. That’s it! Even though there are not explicit filters to create round corners or bevels, it’s very simple to make these yourself with only a few extra steps. This process is a good exercise for our eyes and brain, and will help us better understand the way in which simple gradients, colors and shades can add depth to a flat image.

I hope you find this tutorial useful.

Tutorial Resources

• Pixelmator file

Step 1

Open Pixelmator, go to http://960.gs/ and download the template files. Open the PSD version so that you will have layers with guides. Select them all and go to Layer>Merge Layers. After that, fill the background layer with dark grey (#333) using the Paint Bucket Tool (N).

Step 2

Go to Filter>Stylize>Noise. Use 1 for the Amount. Also make sure that Monochrome is not selected.

Step 3

Add a new layer, and fill it with white, again using the Paint Bucket Tool (N). Then go to Filter>Generator>Stripes. Use 6 for the Width and 100 for the Sharpness. After that, change the Opacity to 5%.

Step 4

Add a new layer, and, with the Gradient Tool (G), fill the layer with a gradient from Grey (#666) to black (#000). You will have to resize the layer as well because, when you fill the layer with the gradient, it will fill the whole area. Go to Edit>Free Transform.

Step 5

Add another layer and fill it with black using the Paint Bucket Tool (N). That layer will be beneath the layer with gradient. After that, change the opacity of this layer to 70%.

Step 6

Create a new layer with the Rectangular Marquee Tool (M), and then fill it with white using the . Go to Edit>Free Transform (Command +F). Then resize the rectangle until you achieve a 1 pixel height line. After that, change the Opacity to 20%.

Step 7

Place the logo on the header now. Use the Type Tool (T) to create the text.

Step 8

Let’s import an iPhone template. Download iPhone PSD. Place it in the document. Use the image below for reference.

Step 9

Choose an image, and place it in front of the iPhone. Then, with the Rectangular Marquee Tool (M), select the visible screen area of the iPhone and mask the image you have just imported.

Step 10

Import some icons and then create blocks of text using the Type Tool (T) for the titles. Use Lucida Grande Regular, 14pt and white. For the description text, use Lucida Grande Regular, 11pt and grey (#999)

Step 11

Now add a slogan, again using Lucida Grande Regular, 24pt and white for the color. Then add a little text below that, again using Lucida, but now in 14pt and grey (#999). It’s important to create a big block of content with the slogan and description aligned to the left and with the block of features.

Step 12

Add the App Store Badge with some text next to it.

Step 13

Add a new layer beneath the iPhone, and go to Filter>Generator>Clouds. Use black and white for the colors.

Step 14

With the Eraser Tool (E), delete most of the layer, leaving just a few parts beneath the phone, as if it is smoke coming from behind it.

Step 15

Add a new layer on top of the smoke layer, and fill it with dark yellow (#f88b00). Then change the Blending to Color Dodge. With the Eraser Tool (E) again, delete most of the layer, leaving just the parts over the smoke. That will create a nice flame effect.

Conclusion

Now, with the Slice Tool in Pixelmator, we can start creating layouts. In this tutorial, I covered basic tips such as creating a nice stripped background, subtle 3D effects, and, of course, a nice light/fire effect.

Click here to download the Pixelmator file used for this tutorial

CSSMania

BoxedCSS

CSSelite

CSSbased

OneCSS

CSSleak

DesignerSource

CSSdesignYorkshire

DezInspiration

CSSclip

Feel free to share any other css galleries you know.

Brusheezy

Vecteezy

Flasheezy

BittBox

QBrushes

FreeVectorDownload

FreeIconsWeb

OfficialPSD

FreeVectors

FreeBrushes

Feel free to share any other sites that you may know.

1. Get a Comfortable Desk Chair

Having a comfortable desk chair really is a necessity since you will be spending so much time in it. If you have an uncomfortable chair, you’re probably not enjoying your work as much as you could be. A good chair can cost a lot more than a cheap chair, but your health and comfort are worth the expense.

2. Have a Separate Sitting Area

If the size of your home office allows for it, set up another area where you can sit comfortable away from the desk, such as a small sofa or some other type of comfortable chair. For times when you are not working on the computer this will give you a break from the desk and the small change in environment may help with creativity. I did this a while ago in my home office and I’ve found that for times when I am brainstorming or working away from the computer it is a nice change of pace.

3. Get Plenty of Light

An office needs to be well lit, and preferably with plenty of natural lighting. Many home offices are in basements or tucked away in corners where there is not much natural lighting, but if possible try to maximize it. It can also help to have multiple options for lighting, like a desk lamp, aside from just overhead lighting. Depending on the time of day and how much natural light is coming in, it may be more comfortable with various types of lighting.

4. Keep it Clean

Avoid having a desk that is full of crumbs from your lunch or other things that keep it messy. Maintaining a clean office doesn’t require much more than just straightening up at the end of each day.

5. Get (and stay) Organized

In addition to just keeping it clean, it’s equally important to have an organized office. If your surroundings are unorganized it is likely that you’ll feel like your thoughts are unorganized and more stress can come as a result. Take the time to get organized, and make an effort to keep it that way.

6. Get Rid of Excess

Once you have organized the office you should be able to identify some things that you really don’t need. Get rid of all of this excess stuff that is cluttering up the office, and give yourself a more peaceful working environment with fewer distractions.

7. Keep it Single-Purpose

With a home office it can be very tempting to make it a home office/storage space or to use it for some other purpose. If you’re spending a considerable amount of time in the office it is best to use that space only for work. Having a clear separation of work and personal space is helpful for a healthy work-life balance, plus having a dedicated office will allow you to set it up in a way that makes it most comfortable for your working hours.

8. Keep Wires Under Control

Chances are you have a lot of items and gadgets in the office with wires. Try to keep wires together and hidden, as this can help with creating a more peaceful working space. In some cases you may be able to get wireless devices, and in other cases you’ll just have to as hidden and unexposed as possible.

9. Decorate the Walls

Part of making a home office comfortable involves decorating it in a way that inspires you and encourages creativity. Wall art and decorations are a great way to improve a home office.

10. Add Some Plants

Having a plant in the office can help to make it feel more natural and inviting. Plants can be bought inexpensively and there are all kinds of plants available for various amounts of natural light.

11. Keep a Comfortable Temperature

Trying to work in an environment that is too hot or too cold is not a good idea. Being comfortable with the temperature will help you to be able to stay productive for longer periods of time, and it can even help with creativity.

What is Your Advice?

How do you make your home office comfortable?

Doing the same for yourself isn’t as difficult as you may think. Almost all digital cameras, even the inexpensive and old, are capable of taking great photos in the right hands. These five tips, tricks, and tactics for taking better pictures can help you improve your photography, build a portfolio of high quality images, and boost your visual artistic ability.

1. Understand Aperture.

Beyond focus, aperture is one of the most important factors in creating great photos. Described simply, the aperture setting of your camera will determine the focal depth (also known as “depth of field” of the shot. A shallow aperture results in a very thin range of focus, which is perfect for framing portrait photos and separating foreground from background. A deep aperture brings almost the entire frame into focus, giving you the ability to photograph large landscapes and environments without risk of blurring or poor focus.

Balancing the two is essential for good photos. Photos with a defined point of focus – photos of people, moving events, or specific objects – benefit from a shallow depth of field, while landscape photos and scenic photography is best done with a large range of focus.

2. Take More Photos.

To an extent, photography is a numbers game. Professional photographers don’t just go out to take a couple of photos and call it a day – they capture everything they can find from every possible angle. Just like design gets better with experience, photography gets better with quantity. More photos means more choice during editing, and a greater range of captures gives you more room to crop photos to your preferences, edit them for use in designs, and apply filters and effects.

3. Always have a camera ready.

For all the Pulitzer Prize-winning photographs that are out there, millions of utterly amazing photos have gone unpublished. Why? Because the could-be photographers with an opportunity to take them didn’t have a camera with them.

Whether it’s your cellphone, a point-and-shoot style camera, or a bulky dSLR, always keep a camera on you. The most interesting and exciting events tend to happen at the most unexpected times, and without a camera somewhere in your bag it’s unlikely you’ll ever be able to capture them. A simple phone camera or small $100 point-and-shoot is more than enough for ensuring you’re ready to shoot wherever you are.

4. Use a camera with manual focus, zoom, and aperture controls.

That ultra-cheap digital camera is only going to last you so long. After years of taking pictures with a point-and-shoot camera, it’s very likely that you’ll outgrow your equipment, or at least hit a plateau with regards to the quality and composition of your photos. Cheap cameras give poor results, both in image size, scale, and clarity. Just like great designers reward themselves with ultra-flash working set-ups, great photographers should reward and enable themselves with better gear.

Stepping up from a point-and-shoot, the best thing to look for is a mid-level dSLR camera. They’re not particularly aesthetically pleasing or compact, but they’re virtually unbeatable when it comes to image quality and clarity. If you’re worried about having to carry a large camera with you everywhere, a digital rangefinder or 4/3 camera could be a better pick. Both offer full manual controls and a range of other photographer-friendly options.

5. Edit every photo you take.

Editing isn’t about applying tacky effects and pushing every filter you can find on top of your photos. While Photoshop may have enabled thousands of wannabe photographers to make ugly HDR shots and terrible filtered landscapes, it’s also given professional photographers the ability to vastly improve their photographs before publishing.

The first edit that any photographer should start with is the levels of their image. Adjust the levels so that exposure is relatively constant and the image is neither too light nor too dark. Then, using the sliding options in Photoshop, feel free to adjust color intensity and saturation, definition and image highlights, and the entire image’s light and gradient profile.

Other creative editing ideas can add interest and life to a picture. Most editing programs offer a range of black and white features, each slightly different from the other. Over-saturation, creative cropping, and different framing options and image sizes can all change photographs drastically. Being too liberal with effects can result in some Photoshop disasters, but a subtle touch can bring life and flair to an otherwise boring photo.

Apple Gradients (54 Gradients)

Shattered Gradients (8 Gradients)

Pastel (12 Gradients)

Clean Gradients Set (50 Gradients)

Ocean Breeze (75 Gradients)

Vintage (24 Gradients)

iPhone Gradation Set (20 Gradients)

Bold Gradient Pack (3 Gradients)

Matte (26 Gradients)

Dooffy Gradients Set (30 Gradients)

Modern (75 Gradients)

Adobe Gradients Pack (14 Gradients)

Adobe CS3 Gradients (35 Gradients)

Web Style (30 Gradients)

Web Style 2 (20 Gradients)

Soft Blue (20 Gradients)

01. Design a Beautiful Website From Scratch

02. Create a Dark and Sleek Web Layout Using Photoshop

03. Design a Sleek and Modern Hosting Layout

04. How to Make a Light and Sleek Web Layout in Photoshop

05. Design a simple, modern web template

06. Portfolio Layout Design Tutorial

07. How to Create a Unique Colorful Site Layout

08. Create a Clean Modern Website Design in Photoshop

09. Create an Apple inpired website layout in Photoshop

10. Software Layout Design Tutorial

11. Making your own portfolio web page

12. Designer portfolio layout

13. Business Layout Design Tutorial

14. Clean Business Layout Tutorial

15. Create a Clean and Effective Product Layout

16. Design a Clean and Colorful Portfolio in Photoshop

17. Portfolio Web Layout

18. Create a Clean and Colorful Web Layout in Photoshop

19. How to Make a Creative Blog Layout

20. Software Layout Design Tutorial

21. Awesome Tutorial Portfolio Design

22. How to Create a Unique Wordpress Theme

23. Company/Business/Software Web layout

24. Create a Professional Portfolio Design in 17 Easy Steps

25. Photoshop Paper Texture from Scratch then Create a Grungy Web Design with it!

26. Wordpress Layout Design Tutorial

27. Design a colorful theme for wordpress

28. Design A Clean And Fresh Company Website In Photoshop

29. Design an impressive web hosting layout

30. Hosting Layout Design Tutorial

31. Design a Portfolio Site with a Textured Background

32. Create a gritty website layout

33. How to Make a Green & Sleek Web Layout in Photoshop

34. Web Design Layout

35. Design a Minimal and Modern Portfolio Layout with Photoshop

36. Create A Stylish Portfolio Layout

37. Create a webdesign company layout in Photoshop

38. Design a trendy business & finance layout

39. Create a Sleek High-End Web Design from Scratch

40. Design an elegant dark portfolio site

41. Business Layout Design Tutorial

42. How to Create a Grunge Web Design Using Photoshop

43. Web Design Tutorial: Blog/Portfolio Template!

44. Tutorial RocknRolla Blog Design

45. Create a Promotional iPhone App Site

46. Create a Nice Web Portfolio Design with a Watercolored Background

47. Design a Cartoon Grunge Web site Layout

48. Create a Nature Inspired WordPress Layout

49. Shopping Cart Design Mockup

50. How to Create a Worn Paper Web Layout Using Photoshop

51. How to Make a nice, eye catching web/blog layout

52. Personal Portfolio Layout Design Tutorial

53. Design a creative unusual layout

54. Wordpress Layout Design Tutorial

55. How to Design a Space Futuristic Gallery Layout