Making Your Website With Photoshop TIPS

Making your website with photoshop can greatly improve the end result of your site. You will not only know the direction you want to go in before you end in the final site however, the ability of the tools that offer lets you create stunning designs in a matter of minutes. But, it’s not always as simple and I’ll go over the fundamentals of creating a stunning, clear image in Photoshop.

1.) Be sure to provide yourself with a good starting point. The height will differ based on the amount of content you’ll be putting on your website. I generally aim for between 900 and 1000 pixels, so I always have space for more content should I need to. This is the width that most people have a hard time with. If you’re not creating an unusually-shaped sms payments website make sure you choose an average width of the 960 pixels. I almost always employ the 960 grid for my website, so somewhere in the vicinity is a good starting point. Additionally, you’ll hardly ever discover that your client has a resolution smaller than 1024×768, which means you’re covered with that type of size.

2.) OK – the text you want to put on your mock-up. It is essential that in all sections of your site that live text is displayed, you choose the font that is compatible with browsers. It’s not worth using an attractive font and impressing the client by using a photoshop image in the event that you are unable to go and convert it into CSS or XHTML code and not replace it by images. Be aware that search engines won’t be capable of reading text from images, so don’t use images to create anything other than logos, as it’s an unnecessary expense in the SEO sense.

3) Keep it tidy. Utilize layers and folders to divide the different elements of the page and label all your layers. It might be tedious but believe me when I say that you’ll be glad that you did it. If you submit it to be approved and the customer does not respond to you for two weeks and then comes to cutting it up, you’ll have no clue which layer is which unless you had it sorted out before you created the original cut.

4.) Apply crisp anti-aliasing to every single word of your text. What do you think of the dropdown on the toolbar? It’s the closest thing to what the browser is going to render it, which is why it’s best to make it. The thicker the better, and if you don’t apply any of them, it will look awful.

5.) When it comes to the design you want to send off to the customer Don’t save it in low quality. Always use jpg in full resolution. It’s a little larger file, but it will look much better from the client’s perspective.

6.) If the client hasn’t provided you with specific information they would like to see in the webpage (I’m I’m assuming that they don’t at this point) Use the lorem ipsum passage complete any paragraphs on your page, so you don’t spend your time creating fake content to fill over the gaps. But, be certain to inform the client that this is the content you’re using and that you’re not planning to include it on the final website!

7.) Blending options can be used for your benefit! They can be extremely helpful in creating amazing effects on various elements of your website, provided you don’t make use of the default settings, and don’t use them too often. There is only so numerous drop shadows in your page before it gets boring to view. But, you should definitely look at them because they are an simple way to bring amazing effects on your website.

8.) Include some interesting effects to your photos. Simple images can appear boring on a website and that’s why you should add an outer glow or inner glow to your photos to spice the images up.

9) When you are cutting up your images, make use of the Save for Web feature. In this way, your image will be optimized for use on the web, reducing excessive loading times and keeping the size of the image at a minimum, without sacrificing the quality. Be aware that only gifs and pngs allow transparency (with PNGs being the only ones that allow partial transparency) If you have an image that covers the other content on the page or has information behind it, make sure to save it in an appropriate format.

10.) Always think ahead. Be sure that the design you’re creating in Photoshop can be coded later. It’s more awkward to explain to a customer the reason you can’t create what you’ve previously shown them than it is not creating a stunning original concept. Be aware of your limitations and don’t create more work for yourself! You’ll only need to go through this one time.

Leave a Comment