Incorporating photoshop into your website design is a great way to improve the end result of your website. You will not only know where your trying to end at when you have the finalized site However, the sheer capabilities of the tools available on offer lets you create breathtaking designs in just a couple of minutes. But, it’s not always this simple therefore I’ll walk you through the basics of creating a clean, beautiful design in photoshop.

1) You must create a quality base to work from. The size of your page will depend upon the amount of example content you’ll be putting on your site. I usually go for something between 900 and 1000 pixels, so that I have enough the space to add more content , if I’d like. It’s width that most people have a hard time with. If you’re making an unusually-shaped website, always go for the width of around the 960 pixels. I almost always employ a grid of 960 pixels on my website, so somewhere close to that is a great starting point. Also, you’ll rarely ever find that your customer has a resolution less than 1024×768, which means you’re safe with that kind of width.

2.) Okay , the text you want to put on your mock-up. It’s essential that for any parts of your website where live text is displayed, you select the right font for your browser. There’s no point using an attractive font and impressing clients with your photoshop files when you’re unable to then go and convert that into CSS or XHTML code without replacing it with images. Be aware that search engines will not be capable of reading text on images, so you should avoid using images for anything other than logos, as it’s a waste in the SEO sense.

3) Keep it tidy. Utilize layers and folders to divide the different elements on the page, and then name all of your layers. It might be tedious, but trust me, your time is well spent. payment by text If you send it off to the client for approval, and the company isn’t in touch with you for two weeks in the process of cutting it up, you’ll have no clue which layer is which unless you sorted it all out when you made the original cut.

4) Apply crisp anti-aliasing to the entire text. You know, the dropdown in the toolbar? It’s closest to how the browser will eventually render it, which is why it’s best to do it. The thicker the better, and if it doesn’t contain any it just looks appalling.

5) When sending your design off to the client, don’t save it at low quality. Always send jpg files in full resolution. It’s likely to be a bit larger file, however it will appear a lot better from the customer’s point of view.

6) In the event that the client has not provided you with specific information the client would like to have at the top of the page (I’m guessing that they haven’t yet at this time), use the lorem ipsum passage complete any paragraphs on your page so that you don’t get caught creating fake content to go between the lines. However, make certain to inform the client that this is what you’re looking for and that you’re not expecting to put that on his final site!

7) Blending options should be used effectively! They can be extremely helpful in creating amazing effects on different elements of your page, provided you don’t make use of the default settings and do not use them too often. There is only so several drop shadows appearing on your page before it becomes tiresome to view. But, you should definitely take a look as they could be an easy method of bringing amazing effects onto your site.

8) Create some cool effects to your photos. Plain images can look so boring on a website Add a drop shadow, outer glow or an inner glow to your photos to spice the pictures up.

9) When you are cutting up your images, use the ‘Save for Web’ feature. This way, the image will be optimized for use on the web, reducing lengthy loading times, and keeping the size of your image to a minimum without losing any quality. Keep in mind that only pngs and gifs have transparency (with the pngs being the sole ones with partial transparency) So if you are using an image that overlays the other content on the page or needs to have information behind it, make sure that you save it in an appropriate format.

10.) Always think ahead. Make sure that what you’re designing in photoshop is actually possible to code up later on. It’s more awkward explaining to a client the reason you can’t produce what you previously showed them than it is not creating a stunning original design. Be aware of your limitations, and don’t create more work for yourself! You’ll only have to do this once.

Leave a Reply

Your email address will not be published.