UndeadDragon
Super Moderator
- Reaction score
- 447
How to create a professional website
Introduction
So, you want a website that looks professional? A website can easily look professionally made if you follow a few simple steps. For this tutorial I will be using Photoshop CS3, but you can easily reproduce what I am doing with another image editing program, such as GIMP. I will be explaining the different techniques used to be able to create a professionally made website.
Using Corners
In the modern Web 2.0 era, corners are everything. You can see the use of the corners on many influential Web 2.0 sites, for example: http://digg.com, http://www.facebook.com and http://www.blogger.com .
Corners look good in moderation, but if over-used they can be distracting (unless used really well). Corners are often used around content containers. Even smaller corners can be effective. Below is an image showing the how the different, commonly used radii look.
As you should be able to see, anything over 20px would be too much, as 20px is started to become quite like a stretched circle. Another tip concerning corners is to not use a border which contrasts too much with the inner colour. If you have a background of #eee (same as in the examples) and then have a solid black (#000) border, it will contrast too much. It will make the edges seem sharp, which is what the corners are trying to avoid. This brings us on to:
Effective Colours
Colours mean a lot when designing a website. You can have the greatest layout in the world, but it could be ruined by poor colour choice. A commonly used poor colour choice is bright green on black. It may have looked good in the 90’s, but it doesn’t anymore. If you don’t know what I am talking about, I have made an example:
We should be moving on past that era and into nice, clean web design.
To decide on your palette, you must first know what type of website you want. For example, if the website is for a gardener’s service, you would not want to use dark colours, instead you would use light colours and a lot of green (Not too much though). If you know what sort of colours you want, but you can’t decide the exact colour, then don’t worry, there are various online applications which can help you out. My personal favourite is http://kuler.adobe.com . Simply click on the Create button on the left navigation bar and you can play around with the different settings to create a nice colour palette. Below is the same layout as the one above, but instead of using contrasting colours it uses a nice clean palette and smoother sides, with the use of corners.
3D Effects
3D Effects can look great on almost any website. They, like corners, are important in the Web 2.0 stereotype, however they should not be overused because that makes them look tacky.
The easiest way to create a 3D effect is to add a drop shadow to it. In Photoshop this can be down by selecting the layer that you want to add it to and then click on Blending Options --> Drop Shadow. Now you can play around with the settings to get a nice 3D effect. I personally lower the opacity to something around 20% to achieve a drop shadow similar to the one below:
The drop shadow is not too obtrusive, but it is still clearly visible and it does have an effect on what it is used on. Another way that 3D is used is for text. However, this effect is not so easily recreated in Photoshop. I believe that 3D text is more commonly made in Illustrator and then imported into Photoshop for editing.
Gradients
This section goes hand in hand with colour choice. Unless you pick colours that go well together the gradient will not look as good. Here are some examples, which I will explain:
1 & 2 can look good in special circumstances, but usually having a dark colour to white is a big mistake, because they contrast too much. It is much better to have two colours which are closer together. For example, instead of 1, you may choose 3, which is black to a dark grey. Or, instead of choosing 2 you could go for 6. The gradient doesn’t show up so well on 6, but it goes from a darker blue to a slightly lighter blue. The gradient in 5 is the same gradient I used for the Web 2.0 style badge with the drop shadow.
Another good reason to use gradients is because you only need a 1px by (height of gradient) image to use, because you can just repeat it along the x axis (or y). This means that it will be a very small file size which will speed up the loading time of your website.
----------
Expect more to be added.
