PSDFan

30 Fresh and Professional Blog Designs

Tom — Tue, 09 Mar 2010 18:08:45 +0000

30 Fresh and Professional Blog Designs

Blog design has always been a special art. Bloggers often have to fit a lot of content into their designs – post contents, titles, dates, social bookmarking options, advertising – the list goes on…

That’s why today we present 30 fresh and professional blog designs that present their content elegantly and cleanly. Some really inspiring designers here!

Members Area Tutorial: Design a Rocking Grungy Band Website

Tom — Mon, 08 Mar 2010 21:40:25 +0000

Members Only Tutorial

This tutorial is available exclusively to our VIP members. In order to read the tutorial and download it’s original .psd source file you must sign up as a member.

If you sign up today you get access to over 75 .psd source files, as well as our weekly members only tutorials and other content!

Design a Rocking Grungy Band Website

Final Image

The result of this tutorial is shown below:

What You Will Learn

This tutorial teaches you:

How to work with brushes/textures
Applying complex overlays and layer styles
How to create a grungy ‘rock&roll’ look
How to construct unique menu designs from scratch
How to lay out your content in a good visual manner
& Much More!

Learn how to layer up textures, brushes and overlays to create a highly complex, grungy website header.

Learn how to manipulate photos in order to create an eye-catching and dramatic photo montage header.

View the Tutorial

You can view this tutorial using the link below, but remember, in order to do so you must have a VIP account.

VIEW TUTORIAL.

30 Minute Redesign: Rich Gates

Tom — Sat, 06 Mar 2010 18:51:20 +0000

30 Minute Redesigns Every Saturday!

I’m very excited to announce the launch of a new weekly post series at PSDFAN – 30 Minute Redesign Saturdays.

The idea is very simple, each week I redesign a visitors website in 30 minutes. I then observe what I tried to achieve with the redesign, and identify problems with their original website.

Why 30 Minutes?

Good question! I chose to spend 30 minutes on each week’s redesign in order to prove that you don’t need weeks of labour and an expensive design team to improve your websites’ design! Obviously with more time I could make the redesign considerably better. However, these posts show that with just 30 minutes of your time spent identifying problems with your current website, and spent mocking up a new design, you’re well on your way to providing your visitors with a better user experience.

Week 1: Rich Gates

Rich Gates provides professional voice overs for a living. You can view his current site below:

RichGates.com.

In the space of 5 minutes I can identify some of the key strengths and weaknesses of this design, and sketch out a mockup.

STRENGTHS:

Clean design (whoever designed this originally does have skills)
Readable content, bold colors
Easy to Navigate
Concise Content
Interactive Demo Player useful for Potential Clients

WEAKNESSES:

Visually you can’t tell what the site is about. There are no visual cues promoting the ‘theme’ of the site.
The content whilst concise has no visual hierarchy. All text is roughly the same size, so your eye doesn’t really get ‘grabbed’.
There is a distinct lack of images, nothing is hugely wrong, yet nothing is particularly interesting.
There are no factors really drawing you further into the site. You need some ‘call to action’ buttons!

My Redesign

As mentioned, I could do a hell of a lot more with more than 30 minutes, but off the top of my head I produced the following design.

WHAT I TRIED TO DO:

Add a logo for some personal branding. I tried to create a set of lips from music equalizer bars. This could be done better with more time, but the basic idea is there.
I created a more structured layout, framing the content better and drawing the visitors eye down the page.
I created a large, attention grabbing headline, instantly showing what Rich does.
I created a simple image montage, visually depicting what kind of industry Rich is involved in. This also ‘jazzes up’ the page a little.
I created more of a textual hierarchy. Using larger headlines to identify areas of content and prompt the visitor to scan content more.

Comparing the 2 Designs:

Here is a quick comparison between Rich’s original design and my 30 minute redesign. Sure, my design could be more polished, but I believe that a lot of the basic elements have been improved upon, creating a more pleasant browsing experience.

How and Why To Enter Redesign Saturdays

You can have the chance to have your website redesigned in next weeks post. All you need to do is leave a comment to this post with your website address and why you think it needs a redesign.

The Benefits of Getting Your Site Redesigned Include:

Most obviously – a FREE redesign job!
Your website gets exposure to PSDFAN’s thousands of readers
You understand how to improve your website. This isn’t just a redesign, it’s a lesson in design.
You will get emailed the .psd of your redesign and can do whatever you want with it!

So please, leave a comment today for a chance to have your website redesigned next week!

Design a Retro Styled Poster

Tom — Fri, 05 Mar 2010 21:18:26 +0000

Final Image

As always, this is the final image that we’ll be creating:

Step 1

Create a new document (600X700px).

Paste in this great old paper texture. Call this layer ‘paper texture’.

Step 2

Create a new layer called ‘gray area’. Now use your rectangular marquee tool to create a box 10px in from the top, left, and right edges of your canvas, and 250px in from the bottom edge. Fill your selection with dark gray (252525).

Step 3

Reduce the opacity of your gray area layer to 90%.

Then download this great Splatter Brush Set.

We want to erase the edges of our gray area using this grungy brush set. To do this in a non-destructive way though, go to layer>layer mask>reveal all. Select one of your splatter brush set, black brush and erase the edges of your gray area.

Step 4

Apply a pattern overlay to your gray area layer. I downloaded great set of patterns from SquidFingers.com.

Reduce the patterns opacity to around 25% to give a subtle effect.

Step 5

Download this Free PSDFAN Sunburst Set

Apply the sunburst over your gray area. Then go to layer>layer mask>reveal all. Apply a radial gradient ranging from transparent to black, to erase the edges of your sunburst.

Then reduce this layers opacity to 15%.

Step 6

To try and add a little extra to your sunburst effect go to edit>transform>warp and warp as demonstrated below:

Step 7

Download this photo of clouds and paste it over the top area of your gray area.

Then go to image>adjustments>desaturate. Use a large, soft eraser brush to erase the edges and bottom of your image, until you have a subtle cloud overlaying your gray area.

Step 8

Now download this photo of a mountain range.

Cut it out using your lasso selection tool, and then paste the mountain range over the bottom of your gray area.

Then use a large, soft eraser to erase the edges of your mountain range.

Step 9

Now apply a red color overlay blending option to your mountain layer. (Vivid Light – 15% opacity).

Finally, reduce your mountains layer opacity to 50%.

Step 10

I decide that my cloud layer is looking too faint, so I increase it’s opacity to 30% and apply the same red color overlay effect (blend mode: vivid light, opacity: 10%).

Step 11

Now open a new document (100X500px). Create 4 vertical guides at 20, 40, 60 and 80px. Then fill each of the 5 available spaces with a different colored bar, creating a rainbow effect.

Step 12

Now return to your original poster and select/copy your paper texture layer. Paste it over your stripes in your other document, and change your paper textures blend mode to ‘multiply’. This should give your stripes a nice texture.

Step 13

Paste your colorful lines image into your main document. It should automatically be pasted central in your canvas. Then select the very bottom of your colored bars and go to edit>distort>perspective.

Draw in the corners of your selection, to bring your colored bars to a fine point. This should create a cool center piece for your design.

Step 14

Now create a new layer called ‘colored circles’. Create multiple circular selections, and fill each with a color-transparent linear gradient. Then change this layer’s blend mode to ‘overlay’ and reduce the opacity to 40%.

Step 15

Paste in a photo over the top of one of your circular gradients.

Go to image>adjustments>desaturate to grayscale the photo.

Then reduce the opacity of this layer to approx 30% and use a large, soft eraser brush to erase it’s edges.

Step 16

Add various other photos over your gray area and colored circles, each time desaturating the photo, reducing it’s opacity and erasing it’s edges:

Step 17

Add some text to the bottom half of your canvas:

Step 18

Now use your marquee selection tools to add some basic dividers between the lines of text:

Step 19

Finally, go to layer>add adjustment layer>gradient overlay and apply the gradient demonstrated below:

And We’re Done!

I really hope that you enjoyed this tutorial and would love to hear your feedback!

Comment to Win a 3 Month PSDFAN VIP Area Membership – Winners

Tom — Fri, 05 Mar 2010 21:17:35 +0000

PSDFAN VIP Area Giveaway Winners Announced!

We recently hosted a giveaway celebrating the launch of our new VIP Members Area.

We Appreciate Your Feedback & Suggestions

After receiving 69 amazing entries, we feel that we have a much better idea of what our community wants from our tutorials and members content! The suggestions were original and inspiring, and we’ll do our best to cover each of the topics suggested.

The Winners

Each winner receives a full 3 month subscription to the , giving them access to all of our 75+ source files and all members only tutorials/downloads.

The 3 winners are:

Stratos
Evert
Voras

Congratulations go to the winners! You will be receiving an email soon containing your membership details.

Bad luck to those of you who didn’t win. But remember, you can join our members area access the great new content today, for just $9.95:

Texture Thursday: Glass 2

Andre Meca — Thu, 04 Mar 2010 13:16:26 +0000

Glass 2 Textures

You can view the textures below, and can download the full sized textures at the bottom of this page.

Download Them Free

You can download the full-sized textures totally free using the link below:

Download Textures Free

License: Creative Commons Attribution

Member Bonus Content: 25 Super Useful Ways to Get Inspired

Recommend Inspiration:

Answers.DesignReviver

Other Inspiration:

Graphic Design Forum

How Design Forum

Your Design Forums

Want Inspiration Tips 11-25? Join Our VIP Members Area Today!

30+ Overwhelming Panoramic Photographs

Tom — Tue, 02 Mar 2010 22:25:56 +0000

30+ Overwhelming Panoramic Photographs

Panoramic photography is a technique of photography, using specialized equipment or software, that captures images with elongated fields of view. It is sometimes known as wide format photography. The term has also been applied to a photograph that is cropped to a relatively wide aspect ratio. While there is no formal division between “wide-angle” and “panoramic” photography, “wide angle” normally refers to a type of lens, but this lens type does not necessarily image a panorama. An image made with an ultra wide angle fisheye lens covering the normal film frame of 1:1.33 is not automatically considered to be a panorama. An image showing a field of view approximating, or greater than, that of the human eye – about 160° by 75° – may be termed panoramic. This generally means it has an aspect ratio of 2:1 or larger, the image being at least twice as wide as its height. The resulting images take the form of a wide strip. Some panoramic images have aspect ratios of 4:1 and sometimes 10:1, covering fields of view of up to 360 degrees. Both the aspect ratio and coverage of field are important factors in defining a true panoramic image.
-Source: Wikipedia.com

Members Area Tutorial: Design a Professional Ecommerce Website

Tom — Mon, 01 Mar 2010 19:46:25 +0000

We’re Listening To Our Community!

PSDFAN is currently running a giveaway to celebrate the launch of it’s new VIP Members Area.

For the giveaway we’ve asked you guys what kinds of tutorials and content you would like to see in the members area. We’ve been getting loads of awesome responses and we’re keen to give you what you want!

That’s why today we’re publishing a super useful tutorial walking you through designing an ecommerce site from scratch. A few of you asked for this tutorial, so we hope that you enjoy it!

Remember – you can let us know what content YOU want to see, and who knows, we could be publishing your requested tutorial next week!

Members Only Tutorial

This tutorial is available exclusively to our VIP members. In order to read the tutorial and download it’s original .psd source file you must sign up as a member.

If you sign up today you get access to over 75 .psd source files, as well as our weekly members only tutorials and other content!

Design a Professional Ecommerce Website

Final Image

The result of this tutorial is shown below:

What You Will Learn

This tutorial teaches you:

Visual Hierarchy
Lighting Effects
Content Placement
Texture Integration
Working With Advanced Blending Options
& Much More!

Learn how to construct complex menus and content areas with ease!

Learn to pay attention to the details of design, through subtle lighting and blending options.

View the Tutorial

You can view this tutorial using the link below, but remember, in order to do so you must have a VIP account.

VIEW TUTORIAL.

30 Striking Examples of Reflection in Photography

Tom — Fri, 26 Feb 2010 15:51:43 +0000

30 Striking Examples of Reflection in Photography

Reflections are all around us, and are a large part of natural beauty. I particularly like reflections as the symmetry created draws parralels to some of the primary principles of good design. Additionally the reflections often expose things not obvious in the original subject. Often reflections can take on new, and more interesting forms, displaying an entirely new dimension to things.