The “Love Design” iPhone Wallpaper

by Steve Tolley

This tutorial will teach you how to make a cool “Love Design” wallpaper for you iPhone, obviously not everyone has an iPhone so if you wanted you could use the techniques and scale it up to a wallpaper for you desktop for instance, the main idea is to teach you how to get cool effects.

This is what we will be making:


Step 1 - New Document

First of all we need to create a new docurment, with the sizes 320 x 480 (W x H) in pixels, this is size needed for it to fit on the iPhone screen and leave all other settings as default.

Step 2 - Gradient Background

Next we need to create a gradient on the background layer, to do this select the gradient tool in the left hand toolbar and use the below colours:

Gradient Settings

And make sure that the radial gradient is selected, when this is done click in the middle and drag to any corner of the canvas and let go to get your gradient like below:


Step 3 - Draw First Rectangle

When this is done, make sure the primary colour is set to #931D1D and draw a rectangle across the canvas as shown below:

First Rectangle

Step 4 - Shadowing

Now we need to create some shadowing to do this set the primary colour to #D5C38A and draw a rectangle in the same way you did with the first one but draw it a lot thinner and at the top of the first one as below:

Small Rectangle

When this is done press (CTRL +J) to make a direct copy of the selected layer and move it to the same place but at the bottom of the first rectangle as below:

Small Rectangle 2

With this done, select the first small rectangle you drew and go to Filters > Blur > Gaussian Blur and set it to 3, and then do this process again with the second small rectangle and you should have something like this when done:

Small Rectangle blur

Step 5 - Adding The “Love Heart”

Next we need to get the heart, I did a quick Google search for “love heart” and found a suitable one so I put it into the document and resized it to fit where I wanted it to go, after this use these settings below using the blending options to get the right colour and effects:

Inner Shadow

Heart Shadow

Color Overlay

Heart Color

When these are done you should be left with something like this:

Heart Done

Step 6 - Creating A Square

Next we need to create the box that goes behind the heart this is simple, choose the rectangle tool again and set the primary colour to #690F0F and hold shift and click and drag a box around your heart so that the heart fits nicely inside the box as below:

Heart Box

Once you are happy with the size put the below settings on the layer using the blending options:

Drop Shadow

Heart Box Shadow

Once these are done you should be left with the below:

Heart Box Done

Step 7 - Add The “Design” Text

Next we need to add the design text, this is simple pick the text tool on the sidebar and select the Arial font and make sure it is bold, next to where you have placed your heart click and write the word “Design” when this is done use the settings below (again using the blending options) to get the right effect:

Text Shadow

When this is done you will have something like this:

Text Done

Step 8 - More Shadowing

The penultimate step is to create some darker patches at the top and the bottom of the original rectangle this is again to give the idea of shading, to do this do the same as the other two small rectangles (Step 4) but use the colour # 801B1B and place them just inside the top and bottom of the original rectangle:

Shadowing 2

When this is done again apply a Gaussian blur of 2 with this done you will have this:

Shadowing 2 Blur

Step 9 - Adding Texture

The final step is what makes this wallpaper comes and alive, as we all know textures make things jump out and give things depth, so what we are going to do is add a texture I again found THIS cool texture, of paint on a canvas, copy this and paste it onto the canvas and place around this area (with the top left of the image in the top left of the canvas)


With this in place make sure the texture layer is selected and go to Image > Adjustments > Black & White and then set the layer mode to Color Burn this will give you the finished wallpaper as shown below:


iPhone Test

Also below is what the wallpaper will look like on the iPhone:

Wallpaper Test

If you want to know how to make the iPhone itself, leave a comment on this tutorial and if enough people want to see how it’s done then I will make it for the next tutorial.

It would be cool to see what you come up with so feel free to upload them to the Photoshop Tutorials Flickr Group and leave me a comment to say when you have uploaded one so people can comment on them,

And as always if you have any problems with this tutorial then don’t hesitate to leave me a comment or head over to the Online-Photoshop Tutorials Forums and post in the Tutorials Problems section and I and others will be able to help you.


Helvetica - Why is it SO Popular?

by Steve Tolley

The other day I was thinking about what font to use for a some Photoshop work I was doing, and whilst searching through the many different fonts I had, the one that jumped out at me was Helvetica I don’t quite know what it was about the font that stood out so much to me, was it the simplicity, the beauty or something else, this got me thinking and so I did some research…

First let’s look at some of Helvetica’s history,

Who Developed It?

Helvetica was developed in 1957 by Max Miedinger with Eduard Hoffmann in Münchenstein, Switzerland.

The font was originally called Neue Haas Grotesk based on a typeface called Schelter-Grotesk, the main aim of Helvetica as a typeface was to create something that was quite neutral and could be used on a wide variety of signage.

The Name was changed to Helvetica in 1960 which was derived from Confoederatio Helvetica which is the Latin name for Switzerland, this was an idea to make it more marketable internationally.


Neue Helvetica is a re-working of the original font done in 1983, this style of Helvetica offered more structurally unified set of heights and widths, this was developed at D. Stempel AG which was the daughter company of Linotype, there are also other redesigns which include improved legibility, heavier punctuation marks and increased spacing in numbers.

Where Is It Being Used?

To put it simply… Everywhere!

It is a widely used typeface which has been designed for the following alphabets/scripts Latin, Cyrillic, Hebrew, Greek, Japanese, Korean, Hindi, Urdu, Khmer and Vietnamese.

It is being used in big companies such as AT&T, Microsoft, Panasonic and NASA also use the typeface on the side of their space shuttles!

When you’re walking down the street next, stop and look around to see how many places are using Helvetica as a typeface for their company, or simply try and spot some Helvetica near you, I bet it won’t be long until you can see some!

So Why Is It So Popular?

There are many reasons why Helvetica could be classed as popular, because it is simple yet it still manages to keep the beauty and keeps design looking good, and it never seems to get old, after 51 years it is still as loved as ever.

Below I asked some fellow designers to tell me there reasons why they think Helvetica has been so popular and why they like using it in their design work:

Andrew Taylor (Additive Designs)


Andrew explains why he thinks it is popular and the reasons he fell in love with the typeface:

It’s a good type face. It’s generic and fits well with everything, but at the same time has those beautiful little nuances that stand out; I’m specifically thinking of the lowercase a and the uppercase R.

My personal obsession with Helvetica started with seeing the movie; it was fantastic! I was already heavily drawn to typography so it was natural that I would fall in love with that movie and it’s type face. For awhile I used Heltetica exclusively, haha. I was already enamored with Josef Mueller-Brockman and David Carson; I was torn between the idea that everything had it’s place and that you can create something beautiful from anything (kind of like the Punk ideal of how even ugly can be beautiful). I used Helvetica for clean, modular layouts and then I have pieces on my wall from a very David Carson inspired piece set entirely in Helvetica.

I think designers love the flexibility of Helvetica. I’m well aware it isn’t the only type face like that and I actually haven’t used Helvetica in months; I’ve been hand lettering everything, but the neutraility of the type face makes it very appealing. The neutrality and the repition; I belive many people use it simply because it’s all around us so it must be a safe choice. It’s minimalist, it’s corporate, it’s cold, but at the same time it can be so powerful, emotional and moving when used just right.

Adelle Charles



Adelle simply put:

I think it’s popular in the design community because it’s been around for over 50 years & it meshes well into projects. There are so many typefaces out there that are so popular, but the signature of the designer is in all of the work.

She also left this quote by a famous designer:

“Helvetica leaves you with just the shapes. Other typefaces give you that but with other characteristics, whereas Helvetica is reduced down to just letters,” says Saville

Selene M. Bowlby



Selene went into detail about why she thinks it’s as popular as it is:

Helvetica is just one of those fonts - it’s clean, it’s simple, it’s versatile… It’s a font that can work well in many different applications.

With so many variations on the font, it can be used in many ways - each version capable of giving a completely different look and feel to a design.

I’m personally fond of clean / simple designs, often going for a “less is more” approach with many of my own creations. I especially like the thinner versions of Helvetica Neue, and use it on my own website, as well as on a few of my client web sites.

Although simple, Helvetica is still a stylish and highly readable font… simply put, it’s a classic that I don’t think will go away any time soon!

So there you some great responses as to why top designers today still think the font is popular within the design community even after 51 years!

In my opinion I think it is beautiful yet so simple and effective that it can bring any design to life and still give it the WOW factor that so many people crave when designing, and I can’t see it going anywhere just yet…

Here are some examples of Helvetica being used in everyday life and in design itself,

The Movie

Yes thats right a movie about a typeface, sounds weird doesn’t it? But actually it is a great movie, where top designers explain where Helvetica fits into their design life, here is an explanation of the film from the website:

Helvetica is a feature-length independent film about typography, graphic design and global visual culture. It looks at the proliferation of one typeface (which recently celebrated its 50th birthday) as part of a larger conversation about the way type affects our lives. Helvetica is currently screening at film festivals, museums, design conferences, and cinemas worldwide

The film which was originally released last year (to celebrate Helveticas 50th Birthday) was a massive hit and being very popular within the design community, to read more about the film and to buy the DVD etc…visit the official Helvetica Film website HERE

Below is an example of some of the designers you can expect to see in the movie:

Erik Spiekermann, Matthew Carter, Massimo Vignelli, Wim Crouwel, Hermann Zapf, Neville Brody, Stefan Sagmeister, Michael Bierut, David Carson, Paula Scher, Jonathan Hoefler, Tobias Frere-Jones, Experimental Jetset, Michael C. Place, Norm, Alfred Hoffmann, Mike Parker, Bruno Steinert, Otmar Hoefer, Leslie Savan, Rick Poynor, and Lars Müller.

Some Helvetica Inspiration

So to finish off this post on Helvetica I will show you some Helvetica pieces to inspire you…Enjoy!

To Conclude

I think using Helvetica brings a piece of design to life just because it is so simple and yet it means so much to so many people! I know one thing is for sure, I LOVE IT!

What do you think?
Do You Love it or Hate it?

Leave a comment below and let me know what you think!

Making a Compact Disc Icon

by Steve Tolley

This tutorial will show you the steps and techniques used when creating a CD icon which can be used on websites etc… Very useful as the same techniques can be applied when making other icons/images

What We Are Going To Achieve

As you can see it looks realistic and it is also vector style so can be scaled easily

Step 1 - Create A New Document

The best thing to do when making an icon is to make a large canvas when designing it as this helps add detail and allows for the image to be scaled later without the worry of pixelating it, bearing this in mind I started out with a canvas of 500×500 so therefore I can scale it down later.

Step 2 - Creating The Basic Shapes

The first thing you need to do is create the basic shapes for the CD and then we will add the stylings later

The first shape is a simple circle in the middle of the Canvas, to start with give it a neutral colour and then we can also change this later use the image below as reference:

First Shape:

The next shapes are also simple circles so just use the images below as reference on where to put them and what sizes they all need to be:

Second Shape:

Third Shape:

Fourth Shape:

The next few shapes are different to make as they involve using the perspective tool and rectangles:

First of all grab the rectangle tool and draw a rectangle like below:

Next press CTRL + T on your keyboard to enter transformation mode, this then allows you to play around with the shape, simply right click on one of the anchors and choose “Perspective”

When you are in perspective mode then click on one of the right hand side anchor points and drag either up or down (depending on which anchor point you chose) the idea is to make one side larger than the other:

Now you need to move this rectangle to the desired position, to do this simply rotate the rectangle and place in the position you want, also if needed resize and change perspective:

Now we need to make it fit to the outer shape to do this right click the rectangle layer in the layers tab and choose rasterize layer which allows the shape to be edited further, with this done CTRL and CLICK on the preview image of the Fourth Shape in the layers tab, like below:

This will give you the crawling ants around the biggest circle which indicated that it is selected, now press CTRL + SHIFT + I to invert the selection and make sure that the rectangle layer is selected in the layers panel and then press delete to get rid of the excess part of the rectangle to leave you with something like below:

Now press CTRL + J to duplicate it then simply rotate it and place it on the other side of the circle so that you have something like below:

Using the same principles as the above 2 rectangles we need to make 4 more, but they dont need to have the perspective added to them, so repeat the last few steps without the perspective steps so that you have something like this:

Step 3 - Adding The Blending Options

Now that we have the basic shapes in place we can start to add the blending options and effects which will then start to give this CD some life,

We will start with the first circle shape and work up from there, on this we need to set the colour to white and add a drop inner shadow using the settings below (to access the blending options menu simply double click the desired layer in the layers tab) :

Color Overlay:

Inner Shadow:

When these blending options have been applied your first shape will look something like this:

Now to move onto the second shape, on this shape we need to add a colour overlay again using the colour #CFCFCF and the add a stroke which is just plain white (#FFFFFF) and has a size of 3px:

When the color and stroke have been applied you will have something like below:

Now for the third shape we need to add a simple drop shadow, this effect is faint but will add to the final effect:

For the biggest circle we need to add the main gradient and a white stroke, for the gradient use the settings below:

And for the stroke you need the settings below:

When these settings have been applied then all of the main basic shapes are done, and you will have something like the image shown below:

Step 4 - Adding Details

To give the overall CD shape a border the best thing to do is to duplicate the biggest circle shape and add a larger stroke to it, this will show the CD to have a grey coloured border, to duplicate just press CTRL + J when the fourth shape (biggest circle) is selected in the layers tab and it will create another exactly the same, then go into the blending options and add a stroke with a size of 6px and colour #B7B7B7, this will give you the image below:

To finish off this CD we need to add some colour to the extra rectangles that we have created, using the image below as a colour reference simply add a colour overlay to each of them with the colours specified, or a gradient overlay if there are 2 colours shown:

And there you go we are finished! once you have all of the colours and gradients added then you will have a finished CD icon which can be used for many different things, below is the fullsize finished image.

It would be cool to see what you come up with so feel free to upload them to the Photoshop Tutorials Flickr Group and leave me a comment to say when you have uploaded one so people can comment on them,

And as always if you have any problems with this tutorial then don’t hesitate to leave me a comment or email me at: and I will help you as much as I can…

Also if you want, this CD will be in an icon pack that I will be releasing soon just leave me a comment and if I get enough people wanting the pack then I will release it when it is completed and I once I have done some more icons.

Top Designers and THEIR Inspiration

by Steve Tolley

In the 2nd part of my design inspiration article series I asked 2 TOP Designers/Photoshoppers to let me know what inspires THEM in order to see how they come up with their ideas and what artists, websites, sources etc…they use, here are the answers that I got,

David Leggett - Tutorial 9

Tutorial 9 is a fantastic website offering top quality Photoshop Tutorials and resources, and home to the famous Photoshop School which will teach the beginner how to progress in Photoshop with exams at the end of each grade.

My work is mostly web based, so I do a lot of web design, interface design, etc. My goal as a designer is to balance compelling media with a usable interface. When it comes to inspiring myself, I like to browse through online galleries like,,, and see what friends are doing on Flickr.




A lot of my inspiration comes from outside the web though. For example, I greatly admire the folks who design magazines like WIRED - who really use unique grids in their work to create page layouts that are really creative and out of the ordinary. Along with magazines, I like collecting album art, cool package/product designs, and flyers/business cards.

I’ve got a bunch of really artistic friends that are fun to watch as well. Whether I’m bouncing ideas off them, or if they ask for my opinion on their work, I find myself being inspired all the same.

Last, but not least, scenery is a great tool for me. Not just nature, but taking in an entire scene of just about anything, and observing how things fit together or stand apart from each other. Skylines, Offices, the Outdoors, anything really.

Adelle Charles - Fuel Your Creativity

Fuel Your Creativity is a website dedicated to design and web resources, offering great links to cool websites, Adelle describes her site as being: “An open forum where everyone is welcome (and encouraged!) to exchange ideas and tips. It’s not just for designers either. Writers, photographers, graffitists…come one, come all.”


This site is such a great resource for all types of design. Everything is broken down into categories or sets to quickly find the type of inspiration you’re looking for. When I’m working on website comps, I usually visit the “articles” & “layout” category and when gathering research for posts, I head over to the “typography” section.


Amazing articles on web design to get your creative juices flowing. The site itself is inspiration! Great site to visit daily for design trends, ideas and tuts.


Great place to look at Logo designs, Business Card Designs & Flash Websites which are all user submitted. Another great inspirational site made by the folks over at Envato. I primarily use faveup to check out logos & business cards.


One of the best showcases around to draw inspiration quickly. They have some of the best looking sites listed and my favorite part about the site (or most useful) is the rollover (very fast) screenshot view. In most cases if I don’t like the quick view - I keep on going.


Tasty sites focused on typography. What can I say; sometimes those are the best looking sites! Great inspiration and go to when you’re stuck on layouts.


Believe it or not - I gain inspiration from the people I follow on twitter. No it’s not a gallery, but if you utilize twitter in the right way, you can get a lot of opinions on things fast and check out what other people just like you are doing, reading, surfing & talking about. This has been one of the best tools for me & inspiration on blogging or even what to blog about.

Design Inspiration from Other Top Designers

Both of the above have done posts on what inspires them and how to best utilize the web in order to get the most out of the inspiration available to use, so just click on either of the above links to find even more inspiration sources etc…

Useful Designers to Follow on Twitter

Some of the most useful and influential people to follow on twitter are listed below, this is because they offer good feedback on work and generally tweet about interesting articles around the web, which offer more inspiration and some general fun along the way,

And then there is always me, I try my best to help my fellow twitterers, so head over to MY TWITTER PAGE and click the little follow button,

Thats all I have for this article, hope you enjoyed it and that it has helped you find that much needed inspiration, when I was making this article I enjoyed looking at the websites that these designers use and have bookmarked my favourites to help me when I need inspiring.

Design Inspiration - Posters

by Steve Tolley

This article will get your desiging juices flowing, Part 1 in a series of design inspiration articles, this one will look at modern and old posters, I have hand picked the ones that I believe are the best at giving you ideas, they have certainly given me some,

1 - As The World My Eyes See

2 - Design Is…

3 - Do Not Copy, Create Something New

4 - Graphic Design Is About…

5 - Error 404

6 - Coming Soon

7 - Technix

8 - Ink And Water Don’t Mix

9 - Past

10 - Love…

11 - Playful

12 - Retro

13 - Stay Fresh

14 - Typography

15 - What Is Graphic Design?

16 - Solid Gold Bomb

17 - Wall-E

18 - Gill Sans

19 - Formality

20 - Design Culture

And there you go, I hope you all have enjoyed looking at this collection of posters and that you are now in the mood to go and get some cool designs done, Part 2 will be design inspiring websites, so make sure you sign up to the RSS Feed so that you don’t miss it.

Making A Social Bookmark Background

by Steve Tolley

This tutorial will show you how to make the cool image you often see behind the social bookmark links at the bottom of posts on most websites, some are more elaborate than others which helps to make your social bookmarks stand out more, I will show you how to make the background image and what techniques i used in order to get the effect I have ended up with, they are basic steps but ones that can be applied to other situations,

Images You Will Need:

As this is a social bookmarking background we need some images that represent the best social bookmark sites, e.g. Digg, Reddit and Stumbleupon, these can be changed to what bookmarks you prefer or use the most you just need to find your own images, all the images I used are shown below (they all should have Transparent backgrounds so you won’t need to cut them out):

1. Digg

2. StumbleUpon


4. Reddit

5. RSS Icon

6. Folder Icon

Step 1 - New Document

As always we will start with a new document, for this tutorial I have picked the size of 650 x 200, this is because it best matches my website and it’s sizes so match the sizes you pick to your website (if you are just here for the techniques then use the sizes that I am using)

Step 2 - Draw A Rectangle

For this use the Rounded Rectangle tool (shown below) and draw a rectangle that fits most of your canvas as shown below:

Drawn Rectangle:

Step 3 - Add Blending Options

Next we need to add some blending options to the rectangle to make it stand out from the background and look better, I used the settings below, but again this was to match my website so if your website is a different colour or you just want to use a different colour then by all means use what colour you want:

Gradient Settings:

Stroke Settings:

Now you should be left with something like the image below:

Now that we have are main background you can add a shadow underneath it to make it look like a physical presence rather than a flat image by using THIS tutorial which shows you how to add different realistic shadows.

Step 4 - Adding The Icons

The next step is to add all of the icons to the image making sure that they are in the right positions and at the right size (personal preference) so first make sure you have downloaded all of the icons you need and then make sure they are opened up in Photoshop along with your backround image, to get an image on to your background make sure the Move Tool is selected and simply drag and drop the image onto your image like shown below:

(Note: Once you have placed the image onto the document you can close the original image as you won’t need it anymore and it will create more work room)

Once all images are positioned correctly then you should have something that looks like the below image, if you are following this tutorial to receive the same outcome then use the image below as a guide on where to place the images and what sort of sizes to put them at:

The image below shows the order of the layers which is important to show things appearing in front and behind the folder and rectangle:

Step 5 - Editing The Icons

Next we need to edit a couple of the icons to get the right effect and bring a bit of life into the image,

The Digg Icon

With the Digg icon you can probably see he doesn’t look like he is integrated into the image properly as he is just placed on the top of the folder, to make him look like he is inside the folder looking out we need to rub out a few bits of him

So first make sure that you have the Digg layer selected and then set the opacity of the layer to around 30% this is so that we can see through him and can see the edges of the folder, now we can see this we can pick the eraser tool and rub away the bits that look as though they are infront of the folder the outcome is shown below for reference:

When you have achieved something similar to the above image set the opacity of the layer back to 100% and then you will notice that he looks as though he is part of the image and is looking out of the folder saying “Hello”

The StumbleUpon Icon

Now we need to change the StumbleUpon icon a little bit in order to make it look like it has fallen out of the folder and is heading towards the floor to do this zoom into the image and make sure that the StumbleUpon layer is selected and then pick the Smudge Tool (Shown Below) and just simply click on the outer edge and drag away as shown below:

This will give the illusion of the Icon falling from the folder, repeat this 3 - 4 times across the shape until you have an image that resembles the outcome below:

To make the icon look as if it is falling towards the ground we are going to add a shadow on the floor, to do this choose the Eliptical Marquee Tool and draw a oval shape like the one shown below:

Next using the same techniques as in my Realistic Shadows tutorial, create a new layer and fill it with black and set the opacity to around 30% and then deselect by pressing CTRL + D, now go to Filters > Blur > Gaussian Blur and set it to around 3 pixels, this will give a good shadow effect and make it look as if the image is falling towards the ground as shown below:

That is pretty much it, you can add a title like I have done so that people know what it is, (e.g. Save/Promote This Post) and that is the image complete, the final outcome is shown below in my actual social bookmark section.

To get a social bookmarking section like mine and in order to use the image you have just made, follow THIS tutorial that I found when making mine which helped me alot (if you are using WordPress of course)

And you can see a working demo of that and the image below (don’t forget to submit this tutorial whilst your admiring it)

As always if you have any problems with this tutorial then don’t hesitate to leave me a comment or email me at: and I will help you as much as I can.

Simple Polaroid Design

by Steve Tolley

This tutorial will show you how to get a nice polaroid image effect just using standard shapes and images, not difficult to follow and can be used in many projects, e.g. Family Holiday Photos, Weddings etc…
Very easy to follow and not complicated to complete PSD files included incase you need any extra help.

Step 1 - New Document

First of all make a new document size 500 x 500 and fill the background with default black.

Step 2 - Draw a Rectangle

Now choose the “Rectangle Tool” and draw a fairly large white rectangle as shown below, and then right click this layer and choose “Rasterize Type”:

Step 3 - Delete The Inside of The Rectangle

Now choose the “Rectangular Marquee Tool” and draw a selection as shown below, once happy with your selection simply press delete and it should delete the selection and you will end up with a Polaroid shape:

Step 4 - Apply Blending Options

Now double click the Polaroid layer which should bring up the “Blending
Options” and use the settings below:

Step 5 - Drag and Drop Polaroid Template

To put a picture into the Polaroid simply find the picture you want and open it up in a new document, when this is done grab the move tool on the Polaroid document and drag and drop the Polaroid onto the image document as shown below:

Step 6 - Resize and Position

Now resize and position your Polaroid onto the image so that you are happy with the selection

Step 7 - Copy The Image Inside of The Polaroid

Now again grab the “Rectangular Marquee Tool” and select the inner part of the Polaroid image, with the original image selected choose the move tool and simply press CTRL +C and then CTRL + V to copy and paste the selected image, now go back to the original image layer and press delete to leave you with the image below:

Step 8 - Apply More Blending Options

Next double click the selected part of the image layer and it will bring up the blending options now use the settings below:

Step 9 - Write The Title of The Polaroid Image

To finish simply choose the text tool and the font “Lucida Handwriting” and write out the title of the image on the whit space at the bottom of the Polaroid.

Final Image:

You can now make some more and compile them into an image like the one I have made below, very effective when displaying special photo’s e.g. holiday or baby photo’s.


If you have had any problems with this tutorial then don’t hesitate to contact me and I will get back to you as soon as I can.