Now that you’ve learned the basics of graphic design and what your graphics editor is capable of, you are now ready to begin moving the idea that you’ve put together in Chapter 2 to good use. As I’ve described before, a website is developed in parts: a navigation menu, header, body, and footer (in whatever layout you chose to use). Here, I’m going to walk you through building a design for a client of mine.

  1. Create a new file and select the preset resolution to 800 x 600.
  2. When using Gimp, the instructions are exactly the same: Select File, New, and set your width to 800 and your height to 600.)Screenshot of Adobe Photoshop’s Design 1
  3. Choose a background color. In this case, I’m going to choose black. To do this, add a new layer, choose the paint bucket tool, select the color black, and pour that color on to the screen. It might be a good idea to lock the layer once you’ve poured the color on to it. The lock feature is pointed to in the image below:
    Screenshot of Adobe Photoshop’s Design 2
  4. The next step is to create the logo we spoke earlier in the book. My client had photo in mind of a woman singing beside her organization’s name. I found the picture on a white background on Boxed Art. I added a new layer, clicked File, place, and chose the file I downloaded, and I dropped the emblem onto the layer I just created. I selected the background using the Magic Wand tool and I hit delete. This made the white background transparent so it looks nice on my black background. I then used the text tool to type “Company Name ” on a new layer and “Company Logo ” on a second layer. I moved the text around to form a nice logo, and I added blending options to all of my layers (notice the gradient).Screenshot of Adobe Photoshop’s Design 3
  5. The next step is to create your navigation menu. While there are many different ways to do this, and it’s up to your creativity to make it any way you’d like, I chose to use the horizontal text tool and type in “About Us”, “Events”, “Members Only”, and “Contact Us”. I used the blending options tool to create the drop shadow you see below:
    Screenshot of Adobe Photoshop’s Design 4
  6. Add your body and test images and position in an appropriate way for your design. I used the text tool and changed the anti-aliasing method to “none”. This setting is located on the top menu when using the text tool and will replicate what your text will look like on the web.Screenshot of Adobe Photoshop’s Design 5
  7. Finally, add any finishing touches you have to make the design perfect for you. I recommend using stock art from Boxed Art, or you can also use other alternatives as well. Boxed Art, from my experience, is the best investment you can make to get an unlimited stock of royalty free images at an affordable price.

Design Secret

Boxed Art - There is a great secret in the web design world and I’m going to share it with you: “most web designers DO NOT create their designs on their own, they have help”. I’ve already introduced you to a few secrets, but Boxed Art— sells a large assortment of stock art (for a small price).

Dream Template

Dream Template - Dream Template is a wonderful service which allows you to download an unlimited number of pre-made web designs for a flat rate. It is highly recommended doing this, especially for beginners because it will give you the opportunity to develop web designs based off of already created material. This method allows you to drag and drop your own content into a great design which will save you time and money. Give it a try!

Stock.XCH

Stock.XCH - Stock.XCH is another great tool which web designers use and it’s completely free to use. There you will find thousands of royalty free pictures from independent photographers that you can use on your website and advertising campaign.

Article written by Andrew J. McClary, © 2008, All Rights Reserved.

Social Bookmarking:
BlinkList | Blogmarks | del.icio.us | Digg it | FeedMarker | Furl | Linkroll | ma.gnolia | Netscape | Spurl | StumbleUpon | Yahoo MyWeb |

Related Posts

Comments

Leave a Reply