How to create stunning PSD Templates in Photoshop?

How to create stunning PSD Templates in Photoshop?

Have you ever dreamed about creating pixel perfect PSD templates with Photoshop? Have you looked around the web and found some very beautiful templates and you told yourself: “Man, I wish I could create such beautiful designs one day!“.

Well with a little determination and time to invest, anyone can do it. There is no such thing as you can’t do it, only you don’t wanna do it. Always remember that.

I was in that situation too, where from time to time I wanted to give up, because I couldn’t achieve what I was looking for in terms of web design, but in the end the time invested has paid off.

So here are the steps I take when it comes to create a stunning template:

1.Create a sketch

Take a notebook and a pen and start creating a sketch, on how will you want the design to look like, and how you want it structured.

For example you could have a top bar with some info like phone numbers, social links and other infos, bellow that a logo on the left, on the right side you could add the menu.

Then a slider, a lovely picture and an eye catching caption.

Then you could add some services, portfolio and blog posts, a team section, and so on. (the choice is yours).

Also consider making the footer appealing and add more sections to it such as company info, logo, phone numbers, social profiles, some useful links, some recent tweets and/or maybe some nice flickr photos.

Do not forget to add a small copyright text, maybe bellow the footer.

2.Define a typography

When it comes to design, typography plays a major role. A good typography makes the design stand out and look amazing among other designs.

But typography doesn’t mean just lots of text dropped on the canvas area. It should be consistent and well organized, very easy to read for the users. It’s like telling a story from top to bottom, but not a boring one.

Avoid using lorem ipsum text, as it’s kind of overused and outdated. Instead you could use some famous quotes (google it), or some text you created.

For big headings consider including words such as “Fresh”, “Clean”, “Awesome”, “Yo”, “Kboom”, “Bowza”, “Horray” and so on. You got the point.

Also define size for headings, sub-headings, paragraphs, buttons and so on. For example you could use a big bold text for headings with sizes that vary between 42px – 150px, for sub-headings sizes between 24px and 42px, for paragraphs something between 12px and 18px and so on.

Also consider defining the line height for each text. The most good looking line-height it’s somewhere between 1.3 and 1.6 multiplied by the font size used. (i.e – you use a text of 12px, the line-height should be somewhere between 16px and 19px)

3.Pick the right fonts

Picking the right font(s) is also really important, as a nice looking font immediately catch the user attention and eye. I like to use a medium – bold text for headings, a regular-light for sub-headings, and a regular one for normal paragraphs with  a lot of text.

There are several places where you can find great free fonts to use in your web design. I am going to mention the most important sources:

  • Google Fonts – offers nice collection of fonts that you can also embed inside your HTML/Wordpress designs.
  • Font Squirrel – also offers super duper lovely fonts, that are totally free to use in webdesign, and it also has a web font kit generator if you have a specific font that you need to use when converting your templates to HTML/WOrdpress and so on.
  • DaFont – here you can also find great fonts, but you will have to hit the Advanced Search and filter the sans serif fonts only, and also the 100% free fonts.
  • FontFabric – lovely fonts, but more like of a premium fonts website, yet it also offers free families versions of different fonts that you can try.

4.Color scheme

Here it’s all about the taste of each one of us. Every color can look good or bad, depending on what kind of design it is used in.

There aren’t many things to say here, but if you are looking for stunning color schemes and have no inspiration, you could go to Adobe Color CC, and pick one or more colors from there. They look really great.

5.Images

Maybe the most important thing when creating psd templates. Perfect typography combined with lovely images create the ultimate psd template. That’s right indeed!

But finding good quality images is a real challenge. You could choose the free way, or go premium. I am not going to lie, but if you want your web design to look perfect you could spend some bucks on premium images.

I am going to list some websites where you can find free, and some where you can find affordable premium images.

Free images:

  • Flickr – the most popular website, where people from around the world share their lovely photos. Also offers and advanced search where you can filter only 100% GPL Images.
  • Unsplash – Offers high quality images at high resolutions that are totally free to use in web design.
  • FreeImages – Huge collection of lovely looking images

Affordable Premium images

  • Dollar Photo Club – Every premium image cost only 1$.
  • PhotoDune – Premium images that may vary from 1$ to 5$ depending on the resolution.

6.Inspiration

I am going to open this one with a famous quote from Albert Einstein: “The secret to creativity is knowing how to hide your sources.” Well, he couldn’t be more right. Every web designer inspire from somewhere or something. And if they tell you they don’t, they lie 🙂

Inspiration can come from numerous sources. I am going to list some of them here, the rest you will have to figure out for yourself :). At some point everything can be inspiring, even reading the label of your yogurt and finding some nice colors or typography you like.

I like to take my inspiration from the following sources, but of course there are way way more:

  • Magazines – popular magazines always have great colors and typography that can be very inspiring .
  • Billboards – we see them every way we go, every road we take. They have vivid colors and nice fonts.
  • Webesites such as themeforest.net , dribbble, behance.net, niice.codesignspiration.net, httpster.net (I’m sure you’ll find way way more than this if you google for inspiration websites)
  • Mother nature – like I said above, at a certain point everything can be inspiring.

7.Practice, practice, practice!

…and practice! Never stop doing it. It will help you improve your skills, and as the days will passed by, you will become better and better at web design.

8.Take a break

Yup, that’s right. Don’t stand in front of your PC for  long periods of time. It can affect your power of concentration, even depress you if something displeases you in your design.

So take a break from now and then.

You could go out for some fresh air, get in your running shoes, go for a walk in the park, have a coffee break, riding the bike etc. This activities oxygenates your brain, and when you’ll come back at the office you will have more ideas and it will be a real pleasure to start working again.

I hope this thoughts and ideas will help you become a better web designer. If you have other points of view or suggestions please leave them in the comments.

Leave a reply

0
Connecting
Please wait...
Send a message

Sorry, we aren't online at the moment. Leave a message.

Your name
* Email
* Describe your issue
    Chat now

    Need more help? Save time by starting your support request online.

    Your name
    * Email
    * Describe your issue
    We're online! Ask us anything!
    Feedback

    Help us help you better! Feel free to leave us any additional feedback.

    How do you rate our support?
      Hey you!
      Want to receive our latest freebies and articles straight to your email?
      We never spam Sparky. We hate it as much as you do!