Way to enhance the appearance of your website

Incorporating photoshop into your website design is an excellent way to enhance the final appearance of your website. It’s not just that you will know the direction you want to go in before you end with your final website, but the sheer ability of the tools that offer allows you to make amazing designs in a matter of minutes. But, it’s not always this simple therefore I’ll run through the basics for creating a stunning, clear design using photoshop.

1.) It is important to give yourself a decent canvas to start off with. Height will vary depending on the amount of content you’re planning to include on your site. I usually go for something between 900 and 1000 pixels, so that I have enough plenty of room to add additional information if I’m looking for. This is the width that most people struggle with. If you’re making an unusually-shaped website ensure text to pay that you have a width of about 960 px. I almost always employ a 960 grid on my website, so somewhere in the vicinity is a good place to begin. Additionally, you’ll hardly ever find that your customer is using a resolution of smaller than 1024×768, which means you’re covered with that type of size.

2.) Okay , the text that you’ll use in your mock-up. It’s vital that for areas on the website where live text is displayed, you use an internet-friendly font. There’s no reason to use an impressive font and wowing the user with your photoshop file, if you can’t then go and convert that into CSS or XHTML code instead of replacing with photos. Be aware that search engines won’t be able to read text off images, so avoid using images for anything other than the logo, because it’s an unnecessary expense in terms of SEO.

3) Keep it tidy. Utilize layers and folders to categorize the different elements of the page and also to name your layers. It’s not always fun, but trust me, this is worth the effort. If you send it off for approval and the client does not respond to you for two weeks, when it comes to cutting it up, you’ll be left with no clue what layer it is in the event that you didn’t sort it all out when you made it first.

4) Make sure you have a crisp anti-aliasing effect on every single word of your text. You know, the drop down on the toolbar? It’s closest to what the browser is going to render it, so it’s an excellent idea to use it. Strong is too thick, and if you don’t apply any it just looks appalling.

5) When transmitting your design to the customer make sure you don’t send it off in rubbish quality. Always go for jpg, at the highest quality. It’s a little larger file, however it will make it look more appealing from the clients perspective.

6.) If the client hasn’t provided you with specific information he would like to see in the webpage (I’m assuming they haven’t at this point) then use the lorem’s ipsum passage to complete any paragraphs on your page so that you don’t waste your time creating fake content to fill between the lines. But, be sure to inform the client that this is what you’re doing in the first place, and not planning to include it on his final site!

7) Blending options can be used for your benefit! They can be so helpful in creating stunning effects on different elements of your website, providing you don’t rely on the default settings, and don’t use them too often. You can only have as many drop shadows on a website before it becomes tedious to view. However, it is a good idea to play with them as they are an easy method of bringing amazing effects to your site.

8) Create some cool effects to your photos. Plain images can look so boring on a web page So, add a drop shadow, outer glow or inner glow to your images to liven the images up.

9) When you’re cutting your images, use the Save for Web feature. This way, the image will be optimised for web use, avoiding excessive loading times and keeping the size of your image to a minimum without sacrificing any quality. Be aware that only gifs and pngs support transparency (with pngs being the only ones that support partial transparency) If you have an image that covers the rest of the page, or has information behind it, make sure that you save it in a compatible format.

10.) Also, always think ahead. Be sure that the design you’re designing with Photoshop is actually a possibility to code later. It’s more awkward to explain to a client why you’re unable to make what you’ve already shown them than it is not having such an amazing original design. Know your limits, and don’t create more work for yourself! You only want to have to do this once.

Leave a Comment