I thought that an introduction to tools used in web development would be a good start for a first article. This will be good for beginners as a starting point, and will give you an idea of what you need to get started with your first website. By the way, this is a long article, so make sure you have time on your hands. So, let’s get started!
There are lots of tools in Photoshop that help to create a layout. Here are the most useful ones; you will get a more hands-on look at them during my first screencast, which will teach you how to create a layout in Photoshop.
- Marquee Tool: The marquee tool allows you to make selections of varying shapes. Although it may seem basic, combining selections (adding and subtracting) can allow for some cool concepts in your design.
- Move Tool: The move tool is self-explanatory; it may seem silly to mention it here, but it is obviously an important asset in Photoshop.
- Brush/Pencil Tool: The brush tool is primarily used for design; you can select brushes of various styles (ex. grunge, tech, splatter, etc) and make use of them in your design. With the large amount of brushes available to download, the possibilities of creating a unique layout are endless. The pencil tool is a non-anti-aliased version of the brush tool – that’s not to say it isn’t useful, though. Use the pencil tool to add simple touches such as a 1 pixel line separator to your website; it may seem simple, but it does loads to enhance your design.
- Fill/Gradient Tool: The fill tool fills a selection with a certain color; it is present even the simplest programs such as Paint, so I’m almost 100% sure you would know what it is. The Gradient tool fills a selection with a gradient, which is a gradual change from one color to another. Using subtle gradients can greatly liven up your design.
- Eraser Tool: The eraser tool erases things. I don’t think I need to say more about it.
- Pen Tool: The pen tool cannot simply be described in one little blurb. It is a versatile and important tool in the field of design, but it comes with the price of being extremely complex. You can use it to cut a person out of an image, make selections, use it to create gradual strokes, and much more. I might just dedicate a whole article to this tool.
- Text Tool: The text tool allows you to write stuff. It comes with the option to write vertical/horizontal text. You can use the pen tool to create a line on which you can write text, and the text will follow the line exactly.
Those are just some of the tools that you see when you open Photoshop. There are many more features that are regularly used when creating a website. I suggest that you just play around in Photoshop, follow tutorials (resources at the end of this article), and get familiar with the program. Also learn the shortkeys, they can save you TONS of time.
The code editor is the most important program that is used for web development. After all, it doesn’t matter if you have a layout if you can’t put it into a browser, does it?
There are hundreds of code editors out there, and each of them advertise themselves as the best. I’ve experimented with many code editors, but I have found Aptana to be my favorite. It’s code hinting is very useful, and you can theme it to change its appearance. Of course, it comes with code highlighting, as do most editors. Also, it does not come installed with support for every single language; it has plugins that you can download to install support for the script you want. For example, let’s say you need to code for the iPhone. All you have to do is download their Apple iPhone plugin, and you have full support for that particular language. Yeah, it’s that easy. Best of all, it’s free.
Another code editor that I avidly used was Adobe Dreamweaver. Unlike Aptana, it has built-in support for all scripting languages. It doesn’t have the theme capabilities of Aptana, which I, personally, don’t like. I prefer working on a dark background as opposed to a white one; it’s a little less harrowing to the eyes. Dreamweaver also has a large snippet library, which comes useful when you’re still learning all the various codes. This is an expensive program at $399, but it is worth the money, considering its multitudinous features.
A great article was written by Andrew Burgess of Nettuts+. It outlines 18 IDEs for Windows, Mac, and Linux. You can view it here.
You need an FTP program to upload files onto your server. I recommend using FileZilla; it is a free program that uses minimal RAM and works efficiently. It looks ugly, but does that really matter?
A program that makes my web design life way easier is called FasterFox. Contrary to what it sounds like, it is NOT a Firefox addon. This program allows you to write snippets of code that are activated when a certain key combination is pressed. It makes writing code a lot faster. For example, if I type in “img” and press tab, it writes the whole HTML code for embedding an image. You have to write all the snippets yourself, but it’s a great time saver.
Alright, I think that I have covered a fair amount here. I am going to create a screencast (or a series, I haven’t decided yet) in which I will create a website in Photoshop, and code it using HTML/CSS. Hopefully, I can show you some features of everything I mentioned here in that screencast. I originally intended for this to be a short article and make a screencast introducing all these programs, but I saw no reason for that once I started writing this. Anyways, I hope this helped you out, and check back soon for that screencast!