4 quick tips to help you create a better mockup/design in photoshop

When Designing a website in Photoshop you should always try to make the mock-up look very similar to the final coded version. Some designers get very lazy and try to create a design then figure out everything while they’re coding the real layout. In this Article I will give you 10 tips to designing a professional looking website mockup in Photoshop.

Whenever You start a new mobile website design and Photoshop I recommend that you Always you Photoshop guide lines. Guide lines help you keep your website centered and all of the elements inside of it align. I know there are newbies out there who just open up Photoshop and design and never turn on their guide lines.

Use Guides

Whenever You start a new website design and Photoshop I recommend that you Always you Photoshop guide lines. Guide lines help you keep your website centered and all of the elements inside of it align. I know there are newbies out there who just open up Photoshop and design and never turn on their guide lines.

To see your guide lines go to press ctrl+; and for mac I believe it is cmd+;
guides

Use real font for Text

This is for all the beginners! I know when most people first start designing websites in Photoshop they often try to use fonts that are not supported on other browsers. It’s ok to use other fonts for logo’s and heading but for real text it is good to use some of the supported well known fonts. You’re probably thinking how do I know which font works for all computers. Well the answer to that is a font list from Ampsoft and they give a pretty well explain explanation on which fonts you should choose, so make sure you check out their article.

Use ruler

Photoshop rulers are a must! Whenever you start a design you should always have your ruler grid turned on. Ruler grid comes in handy for aligning your website, text, images, logo’s and other web elements. Without your ruler your design would be uneven and margins and padding would not equal each other.
ruler

Canvas Size

Starting a new design can be very frustrating for some designers. The reason it can be very frustrating sometimes is because you do not know what size canvas you should start with or create. I normally start my design using 960px width. I think 960 works the best considering it can fit all website screens. The graph below shows what screen size most people use as of August 29 2009.
Website size

All of the tips listed above all go hand and hand. Each tip should be took in consideration before or during every design process. I know this article was very short but I hoped you have learned something from it. I will try to make longer post in the future that are more valuable.

Razvan Sava the author

Razvan is the founder of Webdevtuts. He is also a web designer & developer who loves to design and develop websites. If you're looking for him you can find him via @webdevtuts
  1. This is a outstanding blog, I found your weblog checking yahoo for a similar theme and arrived to this. I couldnt get to much additional info on this summary, so it was nice to find this one. I probably will be back again to check out some other articles that you have another time.

Leave a Reply