Image preview: Design a Cool Football Wallpaper

Design a Cool Football Wallpaper

This tutorial will show you how to design an interesting football wallpaper. It will go over techniques such as transforming images and applying some great lighting effects. Download the source file for this and all our other tutorials in our VIP Members Area.

Read More... 20 comments

PSDFAN Downtime:

I just wanted to give you guys a quick explanation as to why the site has been down for the last 12 hours. Basically my bandwidth for PSDFAN got used up due to a recent surge in traffic, and I missed the warnings from my host due to the internet problems I’ve had recently. Anyhow, I hope that the downtime wasn’t too much of an annoyance for everyone and can assure you that I won’t let it happen again. I’m upgrading my hosting package to cope with the site’s growth first thing tomorrow! Enjoy the tutorial :) .

Final Image

This is the final image that we’ll be creating:

football19c Design a Cool Football Wallpaper

Step 1:

Open up two documents in Photoshop, one 1024X768px and one 3000X3000px. The first document will be for our final wallpaper, and the second larger document will be for creating our main background. We’ll start off in the larger document. Go to view>show>grid to make a grid visible over your image. Then using the rectangular marquee tool create a rectangular shape that spans across your entire grid but is only one grid square high. Fill it with 0FC113 (medium green). Then using your grid select half of your rectangle, and go to edit>transform>distort and pull together the corners of the edges of your rectangle until you have a nice point. Then repeat this for the other side of your rectangle so that each side of the shape ends in a sharp point. Then copy and paste this shape repeatedly, at equal distances along your grid until you fill the entire grid, making sure to leave 1 grid square gaps between each shape. If you want to speed this process up just merge down your shape layers when you have about 5 and then copy and paste your merged image.

football1a Design a Cool Football Wallpaper

football1b Design a Cool Football Wallpaper

football1c Design a Cool Football Wallpaper

Step 2:

Now merge all of your shape layers until you have them all on one single layer. Go to edit>transform>perspective and drag in the top corners of your image, creating a nice amount of perspective. Go to edit>transform>rotate, inputting -45 as the rotation angle. Your shape will now be partially outside of your visible space within your document, so to make it easier to transform the part of the shape that we want simply select all of your document, and then copy/paste the visible part of the shape onto a new layer. Then go to edit>transform>distort and distort the shape until it looks like the image below.

football2a Design a Cool Football Wallpaper

football2b Design a Cool Football Wallpaper

Step 3:

Now paste your shape into your 1024X768 document. Go to edit>transform>scale and widen the shape until it fills most of your image. Then again, select all and copy/paste to a new layer so that your shape that you’re working with is completely visible.

football3 Design a Cool Football Wallpaper

Step 4:

Go to the layer’s blending options and apply a gradient overlay at an angle of 180 degrees ranging from 054006 (dark green) to 0FC113 (medium green).

football4 Design a Cool Football Wallpaper

Step 5:

Now paste in a photo of a soccer player, and cut them out using the lasso tool. (original photo)

football5 Design a Cool Football Wallpaper

Step 6:

Now go to image>adjustments>desaturate. Then go to image>adjustments>brightness/contrast and up the contrast by +88.

football6 Design a Cool Football Wallpaper

Step 7:

Now duplicate your footballer layer and reduce the opacity to 20%, then move the layer below the original and move it slightly to the side. Repeat this step a few times until you have a build up of layers. Then use the circular marquee tool and create circles on top of your duplicated layers. Fill the circles with a black to transparent gradient, and then reduce their opacity to 20%.

football7 Design a Cool Football Wallpaper

Step 8:

Now create a new layer beneath your background lines layer, and fill it with green (99E01C). Then reduce the background lines layer’s opacity to 50%.

football8 Design a Cool Football Wallpaper

Step 9:

Paste an image of some cool light effects onto a new layer above your footballer. Desaturate the image, and then go to layer>apply layer mask>reveal all. Select a radial gradient ranging from black to transparent and then drag outwards from the center of your image to fade out the edges of the image. You can find the original photo here: www.sxc.hu/photo/1043950.

football9a Design a Cool Football Wallpaper

football9b Design a Cool Football Wallpaper

Step 10:

Now use the circular marquee tool and make an oval selection. Fill it with white and go to select>modify>contract, and contract the selection by 1px. Then rotate your 1px ring manually and duplicate the layer a few times until it looks like there are rings going around the footballer.

football10a Design a Cool Football Wallpaper

Step 11:

Use an eraser brush to brush away the parts of the rings that should be behind the footballer. Then apply an outer glow effect to the layer using the settings shown below:

football11a Design a Cool Football Wallpaper

football11b Design a Cool Football Wallpaper

Step 12:

Repeat this technique on the right arm and left leg, and to save time applying the outer glow simply copy the layer style from your original ‘light circles’ layer and paste it onto your new layers.

football12 Design a Cool Football Wallpaper

Step 13:

Now open up a new document 400X250 and turn on your grid. Using the grid and your rectangular marquee tool create the basic frame for a goal. Then use the single row and single column marquee tools to draw in your net, using the grid as a guide.

football13 Design a Cool Football Wallpaper

Step 14:

Paste your goal back into your original image. Then go to image>adjustments>invert to invert it’s color from black to white. Go to edit>transform>distort and make your goal fit along one of your background green lines.

football14 Design a Cool Football Wallpaper

Step 15:

Now paste an image of a football into your image. You can find the original image here: www.sxc.hu/photo/983279.

football15 Design a Cool Football Wallpaper

Step 16:

Now duplicate your football layer. With the original layer selected apply a motion blur: angle 25, distance 500.

football16 Design a Cool Football Wallpaper

Step 17:

Put some text in the bottom right of your wallpaper. I used Helvetica Neue Condensed Bold, 72pt, with -50 kerning.

football17 Design a Cool Football Wallpaper

Step 18:

Now copy your football image and paste it onto a new layer above your text layer. Resize it, and copy it several more times to cover up your text. Then merge your small ball layers. Hide this merged layer, and then using the magic wand tool selection around your text and the gaps within the letters. Go back to your small footballs layer and hit delete, leaving you with some cool text, patterned with footballs.

football18a Design a Cool Football Wallpaper

football18b Design a Cool Football Wallpaper

Step 19:

Apply a drop shadow and stroke to your text using the settings shown below. Reduce the football pattern overlay layer’s opacity to 90%.

football19a Design a Cool Football Wallpaper

football19b Design a Cool Football Wallpaper

And we’re done!

Here is the final image. You can see the full sized version by clicking it. I hope that you enjoyed this tutorial and would love to hear your comments.

football19c Design a Cool Football Wallpaper

About the Author: Tom is the founder of PSDFAN. He loves writing tutorials, learning more about design and interacting with the community. On a more interesting note he can also play guitar hero drunk with his teeth.

20 Awesome Comments: Leave Your Comment

  1. twopo 27th July 2008

    a great on there as usual.trying it out shortly

  2. User GravatarTom 27th July 2008

    Thanks twopo! I’d love to see your outcome if you’d like to post it here :)

  3. Alt 28th July 2008

    Great tutorial!

  4. User GravatarTom 28th July 2008

    Thanks Alt :) I hope that you’ll consider subscribing!

    Oh and as always guys submitting to social networks is much appreciated :)

  5. beets 28th July 2008

    I really like the background lines on this one – nice touch. :)

  6. 2G 28th July 2008

    nice tutorial , good outcome , i loved the scaling effect of striping line learned this technique, thanks :)

  7. User GravatarTom 29th July 2008

    Thanks guys :) I’m glad you found the tut useful, it was fun to come up with that technique for the background.

  8. FRANS HALS 30th July 2008

    nice tut but don’t really like the outcome
    it’s a little bit mcdonalds world cup 02

  9. User GravatarTom 30th July 2008

    I’m glad you enjoyed it Frans. I see what you mean about the outcome :P But I hope that it’s still useful for people.

  10. 2R 7th August 2008

    Nice tutorial, easy step and understanding.
    Thanks

  11. User GravatarTom 7th August 2008

    Cheers 2R, I hope that you’ll consider subscribing to the feed.

  12. User Gravatarabdullah 7th August 2008

    very nice

    thanks dear

  13. User GravatarTom 7th August 2008

    No problem :) Glad you enjoyed it.

  14. User Gravatarrmnarts 1st September 2008

    nice…)))

  15. User GravatarTom 2nd September 2008

    Thanks rmnarts :)

  16. User GravatarStefan Ashwell 6th October 2008

    Great tutorial thanks a lot for the tips :D

  17. htasarp 15th January 2009

    simply best tutorial but give a clear explanation to us. simply beat

  18. User GravatarYeah 1st February 2010

    Great tut. But I can’t find “cool light effects” image at sxc.hu :(

  19. User Gravatarsamantha liska 19th February 2010

    how are you doing to day

  20. User GravatarAfino 26th February 2010

    Good, but the goal line is not likeable

Leave a Comment: