Tutorial How to create a professional website

UndeadDragon

Super Moderator
Staff member
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.
 

UndeadDragon

Super Moderator
Staff member
Thanks for the ideas.

>Same thing with gradients, however not very well supported you may want to mention it.

IE has been able to do that for a while, using filters.
 
General chit-chat
Help Users
  • No one is chatting at the moment.
  • Ghan Ghan:
    Chat should show on the sidebar when not logged in now.
  • Ghan Ghan:
    (You'll still need to log in to post messages)
  • Ghan Ghan:
    Test!
  • tom_mai78101 tom_mai78101:
    I must be in a test server.
  • tom_mai78101 tom_mai78101:
    Nice, Twitter tweets embedding now works
  • Wizard Wizard:
    Yup.
  • Ghan Ghan:
    Excellent.
  • Ghan Ghan:
    @tom_mai78101 Hello there.
  • Ghan Ghan:
    Tagging works in the chat too.
  • tom_mai78101 tom_mai78101:
    @Ghan Missed it.
  • Wizard Wizard:
    Still fixing things here and there. Added widgets to the portal, will make it match the ones here on the forum index tomorrow.
  • Ghan Ghan:
    The venerable World Editor Tutorials site has been converted to HTTPS at last.
  • jonas jonas:
    cool
  • jonas jonas:
    and I can even edit my messages, nice
  • seph ir oth seph ir oth:
    GENERAL CHIT CHAT, YOU ARE A BOLD ONE
  • Ghan Ghan:
    Hello there
  • The Helper The Helper:
    this new chatbox is great and the forum software update is great too
    +1
  • The Helper The Helper:
    upgrade has fixed forum registration spam problem
  • tom_mai78101 tom_mai78101:
    Something tells me we might be able to customize the chatbox a bit, considering that there's a gap under every message.
  • Wizard Wizard:
    Going to deploy a fix soon, just had to take some time for myself this weekend.
  • Varine Varine:
    Unbelievable. Time for yourself? How dare you!
  • Wizard Wizard:
    xD
  • tom_mai78101 tom_mai78101:
    Hm, it is now harder to type anything on an Android phone. Pressing Backspace or Enter keys will dismiss the Android keyboard for some reasons.

    Members online

    No members online now.

    Affiliates

    Hive Workshop
    Top