Design using photoshop tips

Design using photoshop tips

Designing your websites with photoshop is an excellent way to enhance the final appearance of your website. You will not only know what you’re trying to achieve at when you have the finalized site The sheer power of the tools on offer allows you to make breath-taking designs in a matter of minutes. However, it’s never an easy task, so I’m going to walk you through the basics of creating a stunning, clear design using photoshop.

1.) Be sure to give yourself a decent canvas to start off with. The height will differ based on the amount of sample content you’ll be putting on your website. I generally go for about 900-1000 pixels so I always have room for extra content should I need to. It’s a width that a lot of people struggle with. Unless you are making an abnormally shaped site ensure that you have an average width of 960 px. I almost always employ the 960 grid for my site, so somewhere in the vicinity is a good starting point. Additionally, you’ll hardly ever encounter a client who uses a resolution lower than 1024×768, which means you’re covered with that type of width.

2) OK – the text you want to put on your mock-up. It is essential that in all areas on the website in which live text will be displayed, you use an internet-friendly font. It’s pay by text pointless using a stunning font, and then impressing the client with your photoshop file, when you’re unable to then go and convert that into the XHTML/CSS code instead of replacing with photos. Remember that search engines will not be capable of reading text on images, therefore avoid using images other than the logoas it will all be unproductive in SEO.

3) Keep it tidy. Use folders and layers to divide the different elements on the page, and then name all of your layers. It’s not always fun, but trust me, you’ll be glad that you did it. If you send the file off for review and the client isn’t in touch with you for two weeks, when it comes to cutting it up, you’ll be left with no clue which layer is which until you sort it all out when you made it first.

4.) Use crisp anti-aliasing on every single word of your text. Do you know the drop down on the toolbar? It’s the closest thing to how your browser will render it, which is why it’s a good idea to do it. Strong is way too thick and if you don’t use any it just looks appalling.

5) When sending off your design to the customer make sure you don’t send it off in poor quality. Always use jpg at full quality. It will be a slightly larger file, but it will appear significantly better from a client’s perspective.

6.) Unless the client has provided you with specific information he would like to see within the site (I’m I’m assuming that they don’t at this time) Use the lorem ipsum passage to fill in any paragraphs on your site, so that you don’t have to spend time making up fake content to go in the gaps. However, make certain to tell the client that this is the content you’re using and that you’re not planning to use that on his site!

7.) Blending options should be used effectively! They can be very helpful to create amazing effects on the various elements of your website, so long as you don’t rely on the default settings and do not overuse them. You can only have so several drop shadows appearing on a website before it becomes tedious to look at. However, do have a experiment with them since they could be an easy way to get great effects on your website.

8.) Create some cool effects to your images. Simple images look boring on a website So, add a drop shadow, outer glow or inner glow to your images to liven the images up.

9) When it comes to slicing up your photos, you can use the ‘Save for Web’ feature. In this way, your image will be optimised to be compatible with the internet, eliminating lengthy loading times, and keeping the size of the image to a minimum and without losing too much quality. Bear in mind that only pngs and gifs can be transparent (with pngs being the only ones that support partial transparency) If you have an image that is overlaying the background of the page or has some content, make sure to save it in an appropriate format.

10.) Also, always think ahead. Check that what you’re designing with Photoshop can be coded up later on. It’s more awkward to explain to a client why you’re unable to achieve what you’ve shown them than being able to create a unique concept. Know you’re limitations, and don’t create more work for yourself! You only want to have to do this once.

Leave a Reply

Your email address will not be published. Required fields are marked *