Beginner Web Design: The Tools You Need
You’ve probably read plenty of web design advice or noticed some tips around the web, especially if you have any interest at all in customizing your own theme and creating your own graphics.
You want to create a kick-ass design yourself, but when you’re a beginner, where should you start? We’re asked that question all the time. There’s plenty of advice around the web, but much of it can be confusing, and the help you do find is often written for an advanced audience.
Every technique seems to require the knowledge of another one – and you realize that you have to have some fundamental understanding of the basics that many seasoned designers take for granted.
Starting Out in Design
Not long ago, anyone could pick up a pencil and a sketchpad and start creating. That’s how I got started. Most of my childhood was spent pouring over my dad’s art books from a correspondence course he’d taken before he went to college. I can still see them; those big three ring binders were full of everything I needed to know about drawing, painting and sculpting.
Those books taught me the basics of shape, form, color and composition, the building blocks of great design. This is the real beginning of designing your own art, to be honest. Without a solid understanding of composition and color, your work won’t shine the way you want it to.
But I’m going off on a tangent.
The point is that breaking into design isn’t like it used to be. Today, there is so much technology involved in designing for your site that you have to cross-train and know a little bit of everything. Design, development, and coding go hand in hand. You can specialize in one, but it’s good to know as much as you can about each.
What Tools Do I Need To Design?
What you really need is to start at the beginning and focus on one element at a time. If you have an idea of the result you want, break it down piece by piece instead of diving into the whole project. Otherwise, you’ll be expending energy running around in circles.
All web projects, whether full websites or simple banner ads, start with graphics. To create graphics, you need a program that allows you to resize and crop images, change colors and add text.
The most popular graphics programs are made by Adobe. Their Creative Suite 4 (or CS4) offers everything from Photoshop to high-end video editing (Premier). Here’s a quick rundown of each program:
Photoshop: This program is the designer’s workhorse. It allows you to manipulate digital images in ways limited only by the imagination. Use it to adjust color, erase sections of photos, add elements, and create depth through drop shadows or bevel effects. With additional plugins, you can create effects like chrome, fire, smoke and more.
Adobe Illustrator: This program is a little more complex. Its main purpose is to create vector images, which are images based on shapes. Illustrator allows you to manipulate the lines, points, dots and curves used to create these images.
With a vector image, there are no pixels. The image can be enlarged and retain its integrity regardless of the size. If you’re creating flat, 2D images, like cartoons, Illustrator is your best bet.
Quark and InDesign: These two programs are very similar, and with good reason. Apple, the forerunner of many graphics programs, created Quark, and the program’s goal was to do layouts for magazines, brochures and now ebooks.
InDesign was Adobe’s answer to Quark, but Quark (available for both PC and Mac) is still the number-one choice for print houses when it comes to typesetting and layout.
Quark and InDesign cannot do what Photoshop does. You still need a program like Photoshop or Illustrator to create images used in Quark or InDesign. You can do some image manipulation with these two programs, but you can’t do it all.
Gimp:Adobe programs may be the best and most used, but they’re expensive. One of the most popular free Photoshop copycats is GIMP. The interface is different from Photoshop, but there is a free extension called GIMPshop to make the program resemble Photoshop’s interface
Alternative Solutions and Buyer Beware
If you decide you’d rather have the best programs than free versions, try searching Amazon for used or older versions. Many times, you can buy programs and software at discounted prices. They may not come with packaging or instruction manuals, though.
Be careful when shopping for programs this way. Some copies may be pirated versions, and you may not be able to upgrade to newer versions. Also, keep in mind that Adobe has tightened up on security so much that legitimate copies may be limited to one install per household.
If you’re a student, you may also qualify for Adobe’s discounted educational versions of their programs.
Tutorials
You can find hundreds of graphic tutorial sites on the web to learn practically anything you want to know. Two of the best are Abuzeedo and PSTuts. Layers Magazine also has a plethora of tutorial resources.
For design advice, Vandelay Design offer some great tips as well.
It takes a lot to create a website and there are tons of various programs, tools and terminology. Have you found a great little program that gets you the results you want? What about your first graphic design projects? Have you dabbled yet? How’d it go?
25 Responses to “Beginner Web Design: The Tools You Need”
Comments
Read below or add a comment...
Go ahead. Leave a Comment!
-
Affiliate Program
-
James Is Reading…
-
Social Hookups
As Seen In…
Overheard on the Web
MwP is Powered by…
I was pleasantly surprised that many of the plugins for photoshop worked in the cheaper Photoshop Elements. To illustrate one blog I run, I take images and run them a few times through the Photoshop plugin SnapArt.
This plugin is meant for Photoshop CS4, but it also works quite nicely in Elements.
It can result in some really nice effects, without the need for the expensive professional Photoshop CS4.
Vector images are based on MATH – not shapes. Which is why the images can become exponentially larger.
Honestly, besides the people holding on to old tech… who still uses Quark? There’s absolutely no reason to now, as the creative suite makes cross-application integration way easier. I mean, you can place friggen PSD’s right into Indesign layouts, and it has features like live preflight!
Interesting line-up, and nice to finally know what Quark does.
I would also suggest, for cheaper alternatives to PhotoShop, Paint Shop Pro. I’ve used this for years, and have been impressed with it. Since I didn’t want to pay for the latest version, I bought a previous version very cheaply on eBay.
Dot´s last blog post…You Want What?!?
I’ve used Photoshop Elements for a couple of years. I’ve been very happy with it, and it’s much cheaper than the full Photoshop version.
I’ve used Lynda.com to learn how to use Elements and also Dreamweaver and I recommend them highly.
John Soares´s last blog post…The 20 Crucial Tips for Writing Great Multiple-Choice Test Questions
I just bought Photoshop Elements. I really want to be able to do the basics. I love design and color, I just do not have any experience. I also got the Bamboo Fun Writing Tablet. You have to start somewhere.
Writer Dad´s last blog post…7 Easy (And Fun!) Exercises to Boost Your Creativity
Thanks for the tip on the Gimp plug-in to make it look like PS, Harry. Now if I can just get it to work..
RhodesTer´s last blog post…“Who you gonna call?.. GHOST HUNTERS!â€
@Patrick: Alien Skin plugins are another one of my long time favorite tools. Snap Art is a lot of fun and I recently read Alien Skin released an upgraded version a few weeks ago that improves many of the features. Can’t wait to try it out myself
@Awesome: Who still uses Quark? Me for one. It’s far from old tech. I’ve worked with both programs and find that Quark is just a touch more user friendly than InDesign.
@Dot: If you find something that works for you, then by all means use it. I completely forgot about Paint Shop since it’s been years since I’ve used it. Thanks for the reminder!
@John: Lynda.com is an excellent tutorial site. I’ve found myself there on many occasions when I get stuck. Dreamweaver is also a good program and I would recommend it to anyone who’s serious about maintaining their own website.
@Writer Dad: That’s how it starts. You get a program you can handle, start playing and before you know it, you’re moving on to bigger and better things. What you’ll find after a while is that no matter what graphics programs you use, once you use one, you can figure out the others.
@Rhodester: You’re welcome! Yeah, it was a little tricky to get working, but once I did get it going, I was surprised at what a good job Gimp did with the program.
Thanks for the heads up on that Harry – I’ll see what the upgrade cost is.
Snap Art is a niche tool for sure, but it’s one of my favorite digital toys and it really works well for certain things where you’re after a certain look. The trick is to finding the right image to use with it and matching that up to the right filters.
Web designing is a creative activity. This would really test how unique and well you when it comes to designing. Also, when designing a web the colors and layout should fit the concept and the topic of what you are promoting. Using appropriate colors and fonts could add up the beauty of the site.
good break-down for beginners. i am an adobe fiend. i’m so glad they scooped up macromedia. mainly cuz of dreamweaver and partially cuz of fireworks. never used teh free stuff but sounds like a great option/resource for beginers or those on a tight budget. i am also a quark man, myslef. the only reason i haven’t touched indesign is because i don’t do layout anymore. but when i used to do layout and design for a newspaper, quark was the real deal.
Thanks guys, except for tuts site, the other sites mentioned are new to me, so I’ve got plenty of resources to get me going, among others. Thanks again for sharing. What CSS books or links do you all find helpful?
-Mig
I’m not in a position to invest–when I needed a tool to design ebooks, I used Microsoft Powerpoint. It’s turns out a great PDF copy, it’s cheaper than Adobe, and much easier to learn than Photoshop/Gimp. It has a free open-source brother: OpenOffice Impress.
Kaushik´s last blog post…Awakening is Simple – FREE!! ebook excerpts
@Patrick: For sure, not all images go through the filter well and it does take some playing with. If you get the upgrade you’ll have to tell me if it’s improved the program any, I’m itching to try it out myself.
@dick: oh that was a happy, happy day when Adobe pounced on Macromedia! I enjoyed the whole Macro family, and love it even more now that they’re integrated with the rest of CS.
@Miguel: Hmmm…*looks at book shelf* There’s a series of books called “Bibles” (Flash CS4, Action Script, Photoshop, etc.) that are chock full of info. And we can’t forget the Dummies series either.
@Kaushik: I used to use PowerPoint back in the day, and yes, it is good for doing quick ebooks. There comes a time though when a person needs more versatility than what PowerPoint or Word offers, especially if they’re even remotely considering going to print.
@ miguel: your best bet is to start with The World Wide Web Consortium (W3C) http://www.w3.org. there you can learn the basic, if not more, of css and webdesign in general. they have a section dedicated to css with a gang of useful info, links, and resources (including book recommendations).
if you’re new to web design, i do recommend you start there first and take the time to learn the basics. once your site is done you can even run it through their validator to check your site for any errors.
I feel compelled to mention that the You Suck at Photoshop videos on YouTube are both HILARIOUS and very educational. Oh, and by hilarious I mean they use a lot of foul, horrible language. So if you’re not into that, it won’t be hilarious. Fair warning.
(P.S. I love you, Harry!)
Geek’s Dream Girl´s last blog post…Turning a Laundry List Into A Great Online Dating Profile
Another tool I am considering for my blog is some sort of framing plugin for pictures.
Recently have been playing around with the “old photo” frames in Photoshop Elements and they really add something to the pictures over just a simple drop shadow. Mostly because of the particular effect am going for the blog.
As much as the Elements frames are nice for simple projects, am considering onONe’s Photoframe 4 (http://www.ononesoftware.com/detail.php?prodLine_id=10).
Patrick Vuleta – Lawfully Green´s last blog post…Brand New Environmental Law Site
Apple most emphatically did not create QuarkXpress – it was, and remains, an independant company. It did start out on the mac platform, but was then ported to windows. I used it for 9 years, but moved to InDesign as soon as it became industry ready with v2. And, contrary to what you say, I believe that Quark’s market share in publishing is now quite small.
But neither of these applications is designed for, or really suitable for, web design.
For a beginner, I would highly recommend the new Xara Web Designer.
I love to mess around with design software. I love fireworks for essentials. I’m getting better with photoshop. However, I can screw around for hours, even days before I get the image I want, etc.
So, I’ve come to really rely on http://www.fotolia.com. The images are only a few bucks each and they’ve got a ton of images, vector graphics (loving these) and more.
Needless to say, that’s where I go first.
Good post, I wrote something Similar to my bl0g.
Excellent! A most informative post on beginner web design. These days, to really call oneself a web designer, you would need to be competent in different aspects. As you said, design, development, and coding. And that’s only the basics. One needs to constantly improve, train, and develop their skills to adapt to the ever-changing demands. Thanks!
Personally I’m a Gimp person, but that’s only because I can’t afford Photoshop.
I agree, websites do begin with images. I usually try to create the logo before I do anything else. Once I get a logo I can find inspiration for the rest of the page.
We recently purchase Adobe’s Creative Suite 4 (CS4) Web Premium. It is a little expensive, but the amount of software you get is ridiculous…
Fireworks, Photoshop Extended (32 & 64-bit), Flash, Illustrator, Dreamweaver, Acrobat 9 Pro, and a bunch of other programs.
These tools are simply INVALUABLE to someone working in, or aspiring to work in, the web design and development market.
In my opinion, Fireworks is where it’s at for template prototyping.
If Gimp is free version for photo editing, I am looking for free version for vector design similar like adobe illustrator.
Ruri@Free article directory´s last blog ..Fighting Depression And Managing Your Anger
Let’s not forget about Picasa as a great photo editing tool – not as advanced as say Photoshop, but it’s free and packs a punch…made by Google, how can you go wrong there?
~