|
Get the Most from your Graphic Software
|
|
|
|
Have you ever seen one of those daytime infomercials that are selling some sort of "answer to all your problems" product that you just absolutely can't live without? You know the ads I'm talking about, the products usually have some eye-popping name like The Super-Duper Hydro Chopper, or The Buns of Solid Rock exercise machine. What has always interested me about these commercials is that they always, and I mean always, have some added bonus at the end. Something like, "Call in the next 15 minutes and not only will you get the Fantastic Food Cooker 2000, but we'll throw in a boomerang and a saddle bag ABSOLUTELY FREE!"
As annoying as they are, there is something that those infomercials can teach web designers: the more you can get for your money, the better. In particular I am referring to your graphics software. Most beginning web designers don't utilize their graphics programs as much as they could or should, and unfortunately it usually shows in the finished product. Therefore, I have vowed to give you, the EZ-NetTools™ Reseller, the power to immediately improve your web pages. Simply put, I'm going to tell you how to get more for your money out of your graphics software.
Now, before I go on, I need to clarify something. When I refer to graphics software I don't want you to think that I mean graphics software in the "any software that is being used to create graphics" sense. I have watched people try to design web graphics with everything from Microsoft Paint to Coloring with Barney. If you are designing graphics, and especially web graphics, it is well worth the investment to get a true graphics program. For starters I would recommend something inexpensive yet very functional like Ulead's PhotoImpact (which we distribute to those who attend Reseller Training).
Now having said that, I will proceed with the assumption that everyone reading the remainder of this article has some sort of true graphics software. Below I will give you four tips for creating web pages and web graphics that will, if used, improve your graphics right away. And, as an added bonus, if you use these tips in the next fifteen minutes....
Tip #1 - Use your graphics software for web page layout.
Most beginners in the web design industry do exactly what I did when I first started designing web pages - they do it piece by piece. It seems logical that you would design and build a header and then put it into the page, and then build some buttons and then a sidebar and put those into the page, and finally design some content related graphics and put those into the body of the page. There is, however, a better way.
All of the good web designers that I know of actually lay out a web page before they ever begin building it. Many of them lay it out on paper. When I design a web page I actually take that a step further and do all of my design work in my graphics software first. For example, click here to see the actual layout I produced when I first got the assignment to build the Reseller Resources site.
Notice that it's just one big graphic. Simply put, I had the whole web page laid out in my graphics software before I ever started building anything in the Tools. There are a number of advantages to designing this way.
It Saves Time
If you are building a page piece by piece you have to wait until all of the pieces are in before you will know how they really look together. If you decide you don't like something you have to go back and rebuild that piece, put it into the page and look again. This process is repeated over and over until you finally get what you want. By laying the whole thing out in your graphics software first you can see the whole design as you go, and you can make and see changes right away.
It Increases Creativity
The second advantage is that it increases your creativity. Because you are designing the whole page in your software you don't have to worry about all of the time spent putting the pieces together after each change, so naturally you will feel free to try more things and see how they look.
Your Graphics Are Ready Already
Third, when you get done with a design and you like it, your graphics are all built and are all in proportion to each other! Now you simply need to use the old "crop & undo" method until each piece is accounted for. For those who aren't familiar with the "crop & undo" technique it is simply where you crop everything out but the piece you need and save it for the web. When you are done saving for the web simply Undo until you are back to your full layout and repeat for the next piece.
It's More Flexible
Finally, a great advantage to designing layouts in your software comes when you are designing for a client or an employer. It takes you considerably less time to change things in your graphic software,
|
|
|
therefore, when you complete a layout that you think they will like you can actually send it to them as one big graphic and say "is this what you wanted?" If the answer is "no" you haven't wasted all that time building the thing on the web, and you can go back to the drawing board. If the answer is "yes" you are free to pass go, collect $200 and move into the production stage.
|
|
|
Coming Soon!
We are constantly making changes to improve the Tools for you and your customers. The following are a few of the things that you can look forward to.
|
|
|
- Enhanced Hit Counters
- Enhanced EZ-MailList
- Ability to download past orders into a file
- EZ-Pagebuilder Enhancements
- Password protected subdirectories
|
|
|
|
Tip #2 - Use your graphics software to create templates.
This tip actually sounds more complicated than it really is. There are some graphics, like buttons, that you will use over and over again, and the only thing that changes is the text on top of them. Well, you could create each button one by one and just remember the steps each time (which will work) or you could create the button once in your graphics program, and then save it as a graphic file (I like to name my template files something very elaborate and mysterious, like "button" for buttons or "banner" for banners). Then, each time you need to make another button, for example, simply open your template, change the type, and save for the web. When you are done using the template simply close the file without saving changes so that it will be ready again for next time.
This process has literally cut my design time in half. I just love it when one of the webmasters asks me for a button or something else that I have already created a template for. I can usually have it done in less than a minute, and the webmaster usually says something like "Wow, you are sooo fast, you built that whole button in just a few seconds, that's amazing!" Nah, I just planned ahead when I designed the original and created a template (but don't tell them that).
Tip #3 - Use basic built-in effects
Most graphics packages come with a mantra of instant effects that you can add to any graphic. While there will undoubtedly be a bunch of them that you will rarely if ever use (like the tie-die effect) there are some good ones that you should become familiar with. Three effects (they are also commonly called filters, styles and plug-ins depending upon your software) that I find myself using almost daily are the bevel, the drop shadow, and the outer glow.
Bevel
This one is just as it sounds, the bevel tool is used to make beveled edges and give a three-dimensional look to your graphics. The most common use for a bevel would be for buttons, but they come in handy whenever you want to emphasize something (like a logo). There are some things to remember about bevels though: First, don't over-do it! One of the best ways to tell if someone is a novice designer is to look at how many surfaces are beveled on any given page. If everywhere you look there are bevels and 3D surfaces, chances are good that the creator is a beginner. Second, don't bevel too deep. Too often I see buttons and graphics with a rounded top or a beveled surface that looks extremely tacky because there is just too much bevel. Remember that a bevel is meant to accent a graphic, not BE the graphic. Additionally, always remember that the more you bevel a graphic, the larger the file size will be.
Drop Shadow
The drop shadow is one of the most useful features of your graphics software. It is an excellent tool for making things stand out and when used properly can lend a very distinguished look to your web pages. Just like the bevel, however, don't over-do drop shadows, and don't use drop shadows to try to make your images stand 10 feet off the screen. One handy use for drop shadows is to increase readability. If you have a light logo or word that you want to put on a light background, add a drop shadow to make it easier to read.
Outer Glow
The outer glow feature (also called the soft edge or the backlight tool) is one of the most useful but unused tools in the web designer's toolbox. Basically, giving an object an outer glow puts a soft halo around the object. This is especially handy if you have a dark logo that needs to go onto a dark background (or header). You can increase the visibility of any object by adding a slight outer glow. Here's a winning combination for you: try putting a dark object on top of a dark background and add a slight outer-bevel coupled with a soft outer glow.
Tip #4 - Learn to use Layers and Custom Masks.
While I don't have time here to give a tutorial on how to use layers and masks (those who come to training are introduced to these concepts), I want to encourage you to take some time to at least learn the basics for these powerful tools. The effective use of layers and masks is really what separates the pros from the amateurs in the world of graphics. You can usually look up layers or masks in the help section of your graphics program, or in the users manual. Some of the better programs have online tutorials and reference desks that also prove to be very useful. To get you started, I'll give you a basic description of what these two tools are:
Layers
The use of layers in graphics is basically what the name implies. It allows you to add items or text to your work on different levels without affecting the other levels. Imagine that you are standing directly above (and looking down upon) a glass cabinet with glass shelves. If someone were to paint the bottom shelf red, it would make the entire surface of the cabinet look red. Now imagine that someone paints an orange dot in the middle of the second shelf from the bottom - now from your perspective you see a red surface with an orange dot in the middle. You could achieve the same effect by simply painting the orange dot onto the bottom red shelf, but there are some advantages to putting them on different layers: lets say that you want to move just the orange dot around to see how it looks in different places. If it were painted onto the red layer this would be impossible, but if the dot were on a different layer you could slide that layer of glass around to see how the dot looks in different positions. Also, if you decided that you wanted to see the orange dot on a green surface, you could simply remove the bottom red layer and put a green shelf in its place.
In a rough way, this is the basic concept behind layers. Using most graphics software you can move, delete and add effects to individual layers without it affecting the other layers in your work. This concept saves time, and increases your ability to try things out without ruining the rest of your graphic.
Custom Masks
If you have selected something using your graphics software you have made a mask. Basically, a mask is a selection - usually denoted by a moving dotted line. Some of the more common masks are rectangular and circular and can be found on the toolbar of your graphics software. Making a circular or rectangular selection is just the beginning though - using custom masks is where the most productive work is done. In most graphics software you can create and manipulate masks to accommodate the job at hand. For example, let's imagine that you wanted to draw a half circle. Normally you would have to select a circular area, fill it with a color, and then use the erase tool to get rid of half the circle. Using custom masks, however, you could simply select a circular area, subtract half the selection and then fill the selection to create a half circle. The three most important commands in terms of using custom masks are the invert command, the subtraction command, and the addition command. As with layers, it would be well worth your time to learn how your particular graphics software handles these three operations when working with masks.
Just like anything else, learning to design and produce graphics takes some time and effort. One of the best things you can do for yourself, though, is learn how to most effectively use your tools – and your graphics software is one of the best tools you have. At first some of these tips might seem tedious or difficult (like masks and layers) but in the end you will be glad you invested the time.
|
|
|
