30 Minute Redesigns

I hope many of you saw last week’s 30 minute redesign. If you missed it then please check out the redesign I did of PDF n Manual

30 Minute Redesign: PDF n Manual

The idea is that I redesign a website in just 30 minutes, trying to improve upon it’s design aspects. I then publish a case-study of my improvements for learning purposes and email the webmaster the final .psd design. I will be doing one redesign each week, and to be eligible for the following week’s redesign you must leave a comment to the previous week’s redesign with your web address and why you would like a redesign.

*NOTE: Site’s must have content in English, otherwise it’s simply too difficult for me to work with.

Voting Begins

After receiving lots of great comments to last week’s redesign post, I’m happy to present the candidates for this Saturday’s redesign.

Please look over the websites below, and then use the poll at the bottom of this post to choose which site you’d like to see redesigned:

1: Vision

2: Free PSP Themes Wallpapers

Vote Now!

Please cast your vote using the poll below:

Be sure to check back on Saturday for the winning case-study!

Tile 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

Beautiful Water-Themed Graphic Design Projects

Today we’ve compiled some inspiring graphic design projects utilizing water. Each project takes a highly unique approach, and really shows what can be done with the subject matter:

Alexandra Zaharova & Ilya Plotnikov – Splashes

This great design project constructs various objects out of water splashes. This effect is actually very difficult to do well, and so I have the upmost respect for these artists:

Alena Nikiforova

This photography project really emphasizes the substance of water by coloring it with dye and enhancing it on Photoshop. The effect is a project rich in textures and colors:

Mark Mawson – Underwater Dance

I love this photography project. The lighting and color of these photos is really impactful. The floating figures accentuate the fluidity of water, and create an atmosphere that appears devoid of any kind of gravity:

Wojciech Pijecki – Rites of Water

This is one of my favorite ever typography projects. The attention to detail is stunning, and I love how the artist has so accurately captured the texture of water.

YouWorkForThem – Typography in Water

This project is really interesting. The artist takes some fairly basic typography, and then photographs water lapping over it. This adds so much to the typography, really giving it extra depth and detail:

Peter Jaworowski – Barcardi Shoot & Fly

This is a great example of water being used in product advertising. This really shows how water can be manipulated. The artist has artfully wrapped the streams of water around the centrally positioned product, and even manipulated it to form the shape of a dragon:

Joseph Tremblay – VOSS

Like with the Barcardi advert, I love how the artist has manipulated water so artfully. He has moulded various photos of water perfectly to form the shape of a woman, and given added emphasis to his piece by including extra splashes of water:

Final Image

As always, here is the final image we’ll be creating today:

Step 1

Create a new document 600X600px.

Then paste in this image of a baseball:

baseball photo.

Cut it out from it’s background. I selected it using the circular marquee tool, and then inverted my selection and hit ‘delete’ to delete the background part of the photo.

Step 2

With your baseball layer selected go to image>adjustments>levels and apply the settings shown below:

Step 3

Now select your dodge/burn tools. Option+click on your layer thumbnail in your layers palette. This will select your baseball shape. This way when you apply your dodge/burn tools they won’t leak out of your baseball shape at all.

Dodge/burn your baseball subtley to give it added impact.

Step 4

Now repeat these steps for the following images of a basketball and football:

football

basketball

Below you can see the result of extracting, leveling and dodge/burning these additional images:

Step 5

Now hide your sport balls layers, and type out ‘PS’ in large, medium gray letters. I used Times New Roman for my font:

Step 6

Now duplicate your baseball layer, moving the duplicate above your text layer. Resize it to make it much smaller, and then begin fitting it over your letters. Each time you want a new baseball simply duplicate your layer, the move the duplicate to be nicely spaced from the original:

Merge together all layers containing your smaller baseballs. Call this layer ‘baseballs’.

Step 7

Now repeat this technique but with your football image. However, use half the amount of duplicates, and make sure to place these overlapping your baseballs slightly.

Merge all football layers together and call this layer ‘footballs above baseballs’.

Step 8

Now repeat this technique, again using footballs. However, this time resize your football to be slightly smaller than your baseballs, and place them BEHIND your baseballs. This gives the illusion of depth, making your text more 3d. Merge these smaller footballs together and call this layer ‘Footballs behind baseballs’.

Step 9

Repeat this technique, using your basketball. Be sure to place larger basketballs in front of your baseballs, and smaller ones behind. Continue with this effect until most of your letters are covered:

Then hide your text layer! And voila! Some awesome sporting text .

Step 10

Now create a new layer just above your background layer.

Select your entire canvas, and fill it with a radial gradient ranging from FDF4E7 to F9E9D0.

Step 11

Download this great brush set:

Swirly Hi-Res Brushes.

And then begin applying them on a new layer just above your radial gradient layer. This should add some cool background details:

Reduce the opacity of this layer until you’re happy with how it looks:

Step 12

Now create a new layer called ‘circles’. Use your circular marquee tool and linear gradient tool to create a host of circles filled with fading color (see below):

Step 13

Now return to your original hidden ball layers. Duplicate each one, and then hide the original once again.

Then move your duplicates to act as the ‘foreground’ to your image. You want to give the impression that these large balls are flying at you. To help this effect, go to filter>blur>gaussian blur and apply various amounts of blur to your larger balls. The large balls should appear to be closer, and therefore need a more intense blur.

Step 14

Now create a new layer called ‘black shadows’. Make sure that this is your upper most layer.

Grab a small, soft black paintbrush (20% opacity) and then zoom in on your image. You want to brush in shadows that are cast from where the various balls constructing your letters overlap. This should make the 3d effect more realistic, as clearly if the balls were overlapping in this way they would be casting shadows upon one another:

Step 15

Now you guessed it! We’re going to add a layer called ‘white highlights’. Repeat the previous step, this time using a white brush to enhance the highlights on your sport balls:

Step 16

Now select your ‘large baseball’ layer and duplicate it. Move the duplicate beneath the original and then go to filter>blur>motion blur. Apply a motion blur with the settings below.

This should effectively make it seem that the ball is moving really fast towards you:

Step 17

Apply this effect to all of your other balls.

You’ll notice that when applying a motion blur it goes out in two directions. Clearly you only want it to stem from one side of your ball, so simply use an eraser to erase the other side’s blur. Where necessary, reduce the opacity of your blur layers to fit with your overall composition:

Step 18

Now create a new top layer called ‘vignette effect’. Use a very large, soft black paintbrush (20%) and paint around the edges of your canvas. Paint over the corners more, in order to enhance the effect in those areas.

This should create a nice vignette effect, giving more depth to your composition:

Step 19

Finally, create a gradient overlay adjustment layer ranging from 290A59 to FF7C00.

Reduce this layer’s opacity to 5%. This should give a nice subtle tint to your composition:

The Power of This Effect

Whilst this effect is quite simply and easy to produce, it’s very versatile. You can replace the sports balls with something more personal to you, and can clearly make the letters whatever you want. For example – if you like music you could spell out your name with music instruments. I hope that you’ll give this effect a try, and I’d love to see what you guys come up with!

And We’re Done!

You can view the final outcome below. I hope that you enjoyed this tutorial and would love to hear your feedback on the techniques and outcome:

Week 23: PDF n Manual

PDF n Manual.

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:

• A bold and clear color-scheme gives plenty of impact to this design
• There is very relevant imagery, with standard PDF icons helping display the theme of the site
• Content is fairly readable and clear

WEAKNESSES:

• No logo, this makes the site seem unprofessional
• Typography is too small, and the font choice is not particularly engaging
• There is some unnecessary content, including headers with no actual content beneath them.
• There is a distinct lack of call to action buttons. And it’s not totally clear exactly what the site does.

My Redesign

As always, I was limited by the 30 minute time-frame, but I tried to improve upon several of CAMASEJ’s features, adding a few design flourishes and a clearer layout that promoted content over wasted space:

WHAT I TRIED TO DO:

• Add clearer, more legible typography
• Make the great color-scheme more site wide, continuing it through headlines and call to action buttons.
• Simplified the amount of content, reducing it to just what is necessary for the homepage.

Comparing the 2 Designs:

Here is a quick comparison between the 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.

*NOTE: I can only accept sites with English content, as foreign language websites are simply too hard for me to work with.

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!

Premium Tint Textures

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

This premium texture set is huge, containing 8 super-high res textures!

DOWNLOAD PREMIUM TEXTURE SET.

License: Creative Commons Attribution

When it comes to web design, less is often more, and you can’t get much more minimal than a website which spans just one, single page. People low on cash, time and content will instantly benefit from the single page trend, such sites being relatively easy to construct and manage.

People with more to burn, however, should not be put off by the perceived simplicity of the single page format. Many of the slick sites below are incredibly impressive, intricate and forward-thinking. Remember, on the web, the size of a single page is potentially infinite. If anything, limiting yourself to a single page stimulates creativity and ingenuity.

1. Komrade

A single page site with a superb scrolling layout. Bits of information hang from a rather tall plant, rooted in the contact information below.

2. Minneapple Pie

Minneapple Pies are ‘Tastier than a 67 Nova’ and so is this website! Large high-res images and a great color scheme set it apart from the rest.

3. Vrasa

Completely unique! Click on the different faces of the large gemstone which dominates the page to change the site’s background colors.

4. I Want One Dollar

If all you’re doing is begging for money, you probably don’t need more than one page to do it on. I Want One Dollar looks great, but sadly doesn’t seem to be having the desired effect on visitors- only $8 raised so far. Nice try though.

5. re:dzgn

‘What’, ‘Who’, ‘How’ and ‘Where’. All of these questions are answered within a single page thanks to a highly innovative, vertically scrolling layout.

6. Oliver James Gosling

Web developer, Oliver Gosling, knows his stuff. That’s why his personal site looks so good. I particularly like the way the gallery has been integrated so seamlessly.

7. Curious Generation

There’s a lot of information on this single page, but the color-coded, circular links make navigation easy.

8. Orange Label Design

Design doesn’t get much more imaginative than this. Past projects are displayed vertically and read like a glossy magazine.

9. Project 365

Plenty of white space makes this website a joy to behold. The typography used is excellent too- it’s creative and vibrant.

10. Adlucent

Adlucent’s homepage provides visitors with the minimum amount of information they need, presented in a neat and unfussy way. It makes the site totally uncluttered. Clicking on the tabs reveals the details.

11. Volll

Volll’s site might only be one page in length, but the different sections are so distinct that you almost forget they’re connected. The About section’s in the sky, for example, while Goodies can be found in a subterranean environment inhabited by spacemen and octopi! Check it out for yourself or you’ll have no idea what I’m talking about.

12. Hot Meteor

Hot Meteor’s site scrolls in both vertical and horizontal directions with each discipline (web, print, branding) presented on a different level.

13. Pikaboo

The main focus of Pikaboo’s site is a scrolling show-reel in the centre of the page. Click on an image in the reel and a video instantly appears. News, About and Contact information is presented simply, so as not to detract from the proper creative work on show.

14. E-Space

Espace’s website is based around an aerial view of a buzzy office space, complete with garden, meeting rooms and bar. It’s a thoroughly unique take on the website background.

15. Ben Lind

His name’s Ben and he ‘loves making websites’. This one-page-wonder is easily achievable for anyone, but looks really polished.

16. Jiri Tvrdek

This site centers on a tree- a very tall one at that. The navigation buttons can be found in its branches with previous work descending down the trunk.

17. Justin Tsang

Nothing like a funky mascot to differentiate your site from the competition. Justin Tsang’s furry friend sits atop previous projects, an About section and the usual Contact info.

18. OurType

A straightforward color scheme and classic fonts make this horizontally scrolling website a pleasure to behold.

19. Luke Larson

Luke Larson

This website is as slick as they come. With tons of white space, it’s so easy to navigate and fun too, thanks to the goldfish you’ll spot along the way.

20. Brizk Design

A handmade-paper-type background and water-color illustrations give this site a distinctly vintage feel. It looks classy and stylish.

21. Riot Industries

A really classic looking site. Chunky tabs make it easy to find exactly what you’re looking for.

22. Deelux

This site has a clever layout. The portfolio is ‘hidden’ behind an imaginary fold in the page, set behind a great looking blog.

23. SR.UP

This website is simplicity at its best. There’s very little going on, making it quick to navigate. Despite a lack of substance, it’s in no way boring.

24. The Great Bearded Reef

Like Volll’s site, this one houses its different sections on separate levels, starting at the top with the bright, blue sea and sinking all the way down to the seabed.

25. Bullet PR

Another site with a vintage aesthetic, this time for UK PR agency, Bullet. The navigation bar seems to get in the way a little, but it’s extremely user-friendly.

26. 1Sest

Blocks of color make this single page site leap from the monitor. Past work can be opened and collapsed at the touch of a button.

27. Jon Brousseau

Jon Brousseau’s site is little more than a vertical display of his previous work with a very brief introduction. It’s simple, but very effective thanks to its logical layout.

28. 3BOB

If there’s one thing that New Zealand has got a lot of, it’s sheep. You’ll even find them dotted around the hills which provide the backdrop to this super-cool kiwi site.

29. Visualbox

On Visualbox, past projects are assembled vertically down a single page. Visitors click on the corresponding tile in the grid at the top to quickly find their favorite.

30. Morphix Design Studio

Split on three levels, you’ll find Morphix Design Studio’s homepage between the earth and the clouds, Portfolio in the upper atmosphere and About information underground.

31. Bitbots

Bitbots makes toys, but not as you know them. They make pricey, vinyl toys so they need an upmarket site to match. They opted for a single-page site to underline their sense of individuality.

32. Margaret PR

The second London based PR agency in this list, Margaret, has a site housed on a single page, but an absolutely massive one! Click on any button in the navigation bar and you’ll be whizzed across its surface.

33. We Shoot Bottles

Call me na?Øve, but I never realized there were companies out there with the sole purpose of photographing bottles! Well, there are and We Shoot Bottles is one of them. Its site is every inch as crisp and clear as its photography.

34. Contrast

Hand-drawn fonts and cool photography set this website apart from the rest, not to mention its sophisticated layout and buttons which guide you through the single page.

35. Peter Pearson

By setting it among the clouds, Peter Pearson has transformed a rather simple portfolio site into something far more appealing. Dotted lines appear tying each image together as you scroll from one side to the other.

36. 180 Degrees

180 Degrees is a site built to honor Rob Gauntlett and James Atkinson, who died whilst mountain climbing in 2009. Incredibly moving and thought-provoking, the site has been exquisitely designed and is highly interactive.

37. Gotta Get to FOWA

Although I think my cash could be better spent on a more deserving cause, I fully appreciate how well this site inspires donations for two web appers desperate to get to FOWA.

38. Zach Klein

Zach Klein’s companies include Vimeo, CollegeHumor and Busted Tees. Such success speaks for itself, which is why a single page is sufficient for his personal site.

39. WooConcept

WooConcept’s site is wonderfully uncomplicated. Not relying on gimmicks lets the previous work and client list do the talking.

40. Made By Giant

Made By Giant is a web design and development agency from Seattle. The website is all about clarity. Four simple pages and chunky buttons make finding your way around even easier.

30 Minute Redesigns

I hope many of you saw last week’s 30 minute redesign. If you missed it then please check out the redesign I did of UNECE

30 Minute Redesign: UNECE

The idea is that I redesign a website in just 30 minutes, trying to improve upon it’s design aspects. I then publish a case-study of my improvements for learning purposes and email the webmaster the final .psd design. I will be doing one redesign each week, and to be eligible for the following week’s redesign you must leave a comment to the previous week’s redesign with your web address and why you would like a redesign.

*NOTE: Site’s must have content in English, otherwise it’s simply too difficult for me to work with.

Voting Begins

After receiving lots of great comments to last week’s redesign post, I’m happy to present the candidates for this Saturday’s redesign.

Please look over the websites below, and then use the poll at the bottom of this post to choose which site you’d like to see redesigned:

1: Vision

2: PSD n Manual

Vote Now!

Please cast your vote using the poll below:

Be sure to check back on Saturday for the winning case-study!

Tetris 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

Professional Retouching Tutorial: Dodge and Burn (Part 2)

If you’ve completed the Professional Retouching – Healing tutorial with your chosen image, you’re ready to jump into the next step in your professional workflow, Dodging and Burning. This is an advanced retouching tutorial, so stick with it and keep practicing!

You may know the Dodge and Burn tools (O) alter local exposure, lightening or darkening your image in brush strokes. By using Dodge and Burn we’re going to smooth and perfect skin while leaving texture intact, which is of critical importance in professional work. If you’ve ever followed those blurry skin tutorials on other sites, this is definitely the article for you. Some may have refined their understanding of blurring to a high level, which is fine but it’s like spending years becoming so good at pitching a ball you can hit a batsman right in the face 95% of the time. It’s a skill, sure, but unless you change your technique you won’t make the pro team

Here’s an example of skin retouching using dodge and burn;

Rather than use the standard tools, there is a better, more controlled and less destructive way to dodge and burn by using Curves, and we’re going to use that method in this second part of the tutorial.

• Open your chosen image and start a new Curves Adjustment layer and pull the middle of the RGB curve up as demonstrated below.

• Name the layer ‘Dodge’, click on the white mask tab and press Ctrl+I (Cmd+I on a Mac) to invert it, turning it black.

• Start a second Curves Adjustment Layer and pull the middle of the RGB curve down as demonstrated below.

• Name the layer ‘Burn’, click on the white mask tab and press Ctrl+I (Cmd+I on a Mac) to invert it, turning it black.

Alongside each Curve below I’ve added blocked in red how each layer should look in the Layers palette when you’re finished, named and with a black mask tab.

I’ll reopen the image I began in part one to demonstrate.

Select a soft Brush set to around 1-4% flow, with your foreground colour set to white.

On the black masks you’re going to paint with white, showing the effect beneath gradually.

Click on the Dodge layer’s black mask and paint an area lighter, or click the Burn layer’s black mask to paint an area darker.

Remember the dark area at the side of the mouth from the first part of the tutorial? Simply paint it out with the Dodge layer;

With your Flow set to 1% you won’t see a huge change with every mouse click, it’s a gradual, controlled build-up. Gently stroke your brush across all the problem dark and light patches, switching between Dodge and Burn until you have a beautiful, uniform skin texture.

If you’re having trouble seeing what needs dodging or burning, open a Black & White Adjustment Layer and pull the Reds down far enough to add contrast;

See them now?

The rest is just time, a keen eye and practice. Here’s the original side by side with what we can achieve with heal, dodge and burn;

It’s subtle, it takes a lot longer than quick-fix blurring, but remember the bus stop analogy from part one. Good retouching is invisible, cut corners and every waiting traveller, driver and pedestrian on the high street will find out about it.

Professional results take time, but it’s worth it. Web-sized images only tell a small part of the story, but in print, you need to be perfect.

If you have any ideas for future tutorials, please comment below and let us know, I’ll be happy to explain the techniques behind any popular suggestions.

Remember, you can check out Part 1: Healing