Ultimate Web Design Tutorial
By: Яelentless
By: Яelentless
Table of Contents
- i - Revision history
- 1.0 - Introduction :: What's this tutorial about?
- 2.0 - Foundations :: Starting out in Photoshop
- 3.0 - Includes :: What to include in your design
- 4.0 - Resources :: Useful Tutorials & Packs
- 5.0 - FAQ :: Answering the inevitable
- 6.0 - Credits :: Anyone who contributed
1.0 - Introduction
So you want to get in to web design but you really don't know where to start? First of all you're only going to get far if you're creative, and you have an eye for design. Individuality is the key when designing, as well as being unique. This tutorial will basically give you a detailed look at how you'd start your design foundations, and how you should blossom from there. I hope you enjoy reading, please be appreciative and try to keep your negative comments to yourself.
2.0 - Foundations
To start off, you're going to need Photoshop. You can find a cracked copy on TPB, or some place else around the internet, or you could always purchase Photoshop from their official vendor (Adobe). Following on from that, for your first couple of designs you're going to need a grid to keep your layout intact. You can find the most popular & well known grid here. Once downloaded, extract it to your desktop, and open it in Photoshop. There's a lot of resources in the folder, so navigate yourself into the following directory:
And open the PSD entitled: 960_grid_12_col. Once you're at that stage, you should have something like the following (click). Now you have your foundation ready. I suggest you also enable a secondary grid, which will help you a hell of a lot (View > Show > Grid). Now you have that sorted, you can decide what kind of layout you want. I cannot decide a layout for you, however I have created a small simple layout that you can use as a starter, and just develop it with text and other variables. To find that PSD, please click here. Now you're ready to develop your layout! It's reasonably easy from here, you just need to have some decent fonts, an eye for design, and determination!
3.0 - Includes
When creating your design, you should make sure it's very appealing. Bog standard text and next to no effects are a complete no. However, an overuse of effects make your design look tacky. Some web friendly fonts for general writing would be Tahoma, Arial (Narrow works well), Cambria, Verdana & Franklin Gothic (any of the family). I also find that a low opacity gradient overlay gives text a nice tinted effect (see here). Another tip would be try to optimize your design as much as possible, meaning keep it compact, as it'll be hard when it comes to coding it (if you're planning on getting it coded, of course). As seen on my example layout, a good design would include a header, head-body, main-body, and footer. Each slice should be accompanied by the appropriate text and images. For example, in the header section you should include a navigation bar of some sort and a logo or banner; and in the footer section you should include some kind of contact, terms and conditions, and any other text you deem suitable for it.
» Example 1: Average Design
» Example 2: Mini-Folio
» Example 3: What your first design should look like (ish)
4.0 - Resources
» NetworkMancer: Graphics Resources
» Darko: Making a Custom HF Userbar
» Masterftp: Rendering Images
» Mystic: Installing a Font
» ConCax: Simple GUI Buttons
» Webmaster: Graphics Resource List
» Onyx: Photo Manipulation
» Vibrant: Graphics Resources #2
» BuzzLightYear: Signature Tutorial
» Evolution Zero: 3D Text Tutorial
» Tomynho: Simple Icons
» Infect3d: Editting vBulletin Skins
» Valik: Video Tutorials
» Valik: Star Effect
» Valik: Animation Effects
» Richie: Text Tutorial
5.0 - Frequently Asked Questions
Q: How Can I get Photoshop?
» A: You can download the 30-day-trial from Adobe, or you can download a cracked version from ThePirateBay.
Q: Can I suggest something to add?
» A: By all means, go ahead! I'm open for suggestions, and will be adding all appropriate suggestions to the OP when/if I deem them beneficial enough.
Q: Could you assist me further?
» A: Yes, of course I can. Just drop me a private message whenever you're ready and I'll reply back to you with the best response I can, and if need be, contact you further. But yes, please feel free to PM me.
6.0 - Credits
Яelentless: For Creating This Guide
All Resources: Anyone's tutorials I've listed
Omniscient: Providing us With This Forum