Computer Education

Create an Awesome Number-Based Illustration

2010-11-11T00:50:00.000-08:00

Final Image Preview

Step 1

Open a new document, A3 300 dpi or bigger so we always have a nice High resolution artwork incase Magazines or other people want to buy your work or use it for an exhibition. It’s also a lot easier to work on a bigger canvas, to get your details correct.

Step 2

Now before I start adding new layers, i quickly make some groups to arrange my layers. I add more groups on my way but I start with these groups, from top to bottom; Color effects – Play – Logo or Model – PLay – Background. The “Play” groups are all the experimental textures and patterns with my shapes.

Step 3

Personally I don’t like to starting on a blank background, lately I just grab a paper texture and place it in the background, change the contrast and brightness a little bit and we’re ready to go.

Step 4

I’m going to make an artwork around the number 5. Why? To be short it’s my favorite number, or lucky number. And with the new cs5 I though it would be cool to work with this number. Plus it is a really nice shape to work with. I used the font, Avant Garde Bold, but you can choose any font or shape to try this tutorial on.

Step 5

First thing I want to do with my number is add some white shapes to create a glossy vector effect to my number. Use your pen tool and add every shape in another layer, so you can correct them a little bit till it fits perfectly.

Step 6

For the next Step we’re going to create a useful pattern. We will be using this pattern to add some cool effects on our number and background. Open a new file, 25px on 25px with a transparent background. Now select the LineTool (5px) and make a cross. Go to Edit>Define Pattern, give it a name and save.

Step 7

Now create some new layers (in our “play” group) with shapes filled with our new pattern. Ellipses, circles, rectangles and triangles can be filled with the pattern and placed to match the natural features of the number that we’re using, or you can use the pen tool to do it. These shapes can be used to add shadows or just make the graphic a bit more interesting. You can see my example for inspiration.

Step 8

The next step has everything to do with my personal taste. I prefer a more grungy look on my patterns, so I softly erase some parts with a traditional paint brush selected.

Step 9

Now I want to add a soft texture on my Number. For this I open one of my paper stocks in a new layer and desaturate them by (cmd + U). New you select your number layer by (cmd + click on layer), go to select inverse and delete. Now you change your layer blending option to ‘multiply’ and adjust some brightness and contrast till you think it looks perfect.

Step 10

Next, duplicate your texture layer, with the ‘multiply’ blending option on and place it under the original layer. Next I made kind of “fluid dripping selection” with my pen tool and press (cmd+c) top copy and (cmd+v) to paste some of this pattern in a new layer. Create some darker spots in your work with these pattern selections. You can choose where you use this technique. Check my example, to see where I added mine and see what I mean with ‘fluid dripping bubble selection”. This can also be done with custom brushes, but if you use the pen tool, you have infinitely more control over how they will look.

Step 11

Next step is to add some more abstract shapes into our number. Simply add a new layer under our paper texture and create some round white abstract shapes with your pen tool (see example). In order to get good looking abstract shapes, you’ll have to understand how Bezier curves work with the pen tool. For those of you who haven’t used the pen tool in this manner before, there’s a nice quick tutorial over at PhotoshopCAFE that demonstrates these techniques: http://www.photoshopcafe.com/tutorials/pen/pen.htm
The white abstract shapes will keep the texture, but makes it a little brighter. Do this few times till you like the outcome. This is what I’ve done.

Step 12

Now it’s time to add some colors. What we’re going to do is simple. Again, use your pen tool to make some round fluid selections at the bottom of our five or whatever shape you’re using (like something is dripping of our shape). Give the selection some real velvet colors. Feel free to use my example.

Step 13

For the next step we have to make another pattern, Some oblique lines to fill our abstract round shapes again. Side note, feel free to create your own patterns and go crazy with it, experiment and make amazing artworks.

Step 14

Now I ask you to stop thinking and do some crazy stuff with colors and shapes. At this point you need something different that makes your artwork interesting and personal. Just keep on experimenting with shapes drawn with pen tool and different patterns. This is what i got after a couple minutes of 0% brain usage.

Step 15

As you can see I’ve been experimenting with some movement here. I came up with the idea inspired by the game “spin the bottle”. As you can see, I only concentrated on shapes and pattern and completely ignored my color usage. This step is to fix that moment of ignorance. This time we only concentrate on colors. This my way to create this stuff. If you can do shapes and colors in one step,that’s great, but most people will tend to get bogged down trying to do both at once. I simply took the time to workout the idea and then finalize it with the coloring.

Step 16

Now we start with my finishing touches. Lately I love to use the “nebula” Stock photographs from “http://moonchilde-stock.deviantart.com/gallery/#Nebulae-and-Scifi” to add some sci-fi effects to my work. Nebulae have an amazing selection of stars and outer space stocks, perfectly to cover some parts of your work with blending option “screen” selected.

Step 17

Quick tip on making your artwork look great on the web. You started to work on A3 with 300 dpi. You know the web is 72 dpi, so we can show some high quality work here if you use the right techniques. What I do is, quickly go to layer>flatten image after I saved my A3 as .psd Reduced the image size to 1500 pixels width go to to Filter>Sharpen>Unsharp mask with an amount of 80% , radius of 0.3 pixels and threshold of 0.

Step 18

Now repeat the last step but play with the % try 50%, 80% will be a little bit to sharp after you resized it to your favorite preview size, I prefer 650x… but for this tutorial I used 500px width.
Hopefully you learned something with this tutorial. Use these techniques to create your own personal work. Be creative with it and don’t be scared to experiment and show off your results. Every comment can help you getting closer to your goal. Don’t forget to have fun experimenting with objects, shapes, numbers, typography, you name it. Just have fun!

Combining Custom Brushes for Wild Effects in Photoshop

2010-11-11T00:10:00.000-08:00

Custom brushes can be an incredibly powerful way to add a touch of originality to your work. By photographing or otherwise capturing given effects such as splatters, drips and watercolor textures, you can easily create your own custom brushes in Photoshop, and apply them to your own work right away to make it stand out.

In this tutorial, you’ll learn how to create some custom brushes based on scans of different types, and then you’ll instantly put them to use to come up with a wild finished result. You’ll see how simple custom brushes can make all the difference, and you’ll learn some great tips on how to get the best results.
Let’s get started.

Tools Used:

Adobe Photoshop
A scanner (not required but preferred)
Stock Images

Final Image Preview:

Step 1: Document setup

We will start this pressing ‘CTRL N’ on your keyboard; this will bring up the new document dialog box. We will use this to setup the width and height for our new document. We will now set our document as 2000*3000 which is a great ratio for a piece like this. This is especially a good thing because once we are done we can size our document down to 800*1200 without any cropping.

Once our document is up we will head over to Deviant Art to grab a texture for our background. Since we are trying to create something between illustration and photo manipulation we will use a background that looks like a traditional texture. So go to http://bashcorpo.deviantart.com/art/Grungy-paper-texture-v-6-37649221 and copy the image and paste it into our document. If you have a texture you have made, found or purchased that you liked more than the above texture then by all means use it, I will be using one I made. Once you paste it into Photoshop make sure the top hits the top of the document and the sides are matching. Your document should look similar to mine below.

As you can see our background doesn’t fit all the way, there’s a big gap at the bottom. We can fix this with the clone stamp tool. The clone stamp tool simply grabs sections of an image and duplicates it where you tell it to. So press ‘S’ on your keyboard to select the clone stamp tool and right click on the document to bring up the brush settings as we have done before. We will be using a similar brush as before this time just a little bit smaller. Make sure you have your hardness set to 0%, this is very important otherwise your duplicated pieces will not blend together due to their hard edges.

Now holding the ‘ALT’ key on your keyboard click on the document around three quarters of the way up and all the way to the left; this is where we will be duplicating from, so any where we click it will duplicate from this area. However once you click the selection we will be copying from will move; this is very good since we don’t want to duplicate the same section over and over again. Once you have held the ‘ALT’ key and clicked we can now go to the left side of the white space and click and drag to the right. If you’re new to the clone stamp tool it might help to press ‘CTRL SHIFT N’ to create a new layer once you have selected your start point. That way anything you stamp can easily be done by deleting the layer.

Once you have dragged the mouse to the right you might need to grab a few more locations to just make sure everything blends well. Once you are satisfied with the end result yours should look similar to mine. Make sure you have copied over all of the white on the canvas before you continue though!

Now this should be fine for your document, but remember if you have one you like more then use it! I’m using a personal stock that looks like the below.

Step 2: Custom brush creation.

Alright so we will start off by creating our own custom brushes to use, if you have your own or a set you downloaded go ahead and use those; if not head ever to http://www.sxc.hu and grab this splatter: http://www.sxc.hu/browse.phtml?f=download&id=524477 Do note that to download the stock images from Sxc you will need an account. They are free so if you don’t have one go ahead and set it up so you can follow along. Once you have downloaded or copied the image open up Photoshop and create a new document. Set the size for this new document to 4500*4500 as I have in the below screen shot.

Now this is one big document, but that’s ok, we will be working with different stocks at different resolutions so it’s nice to have some breathing room. Once you have created the document press ‘CRTL V’ on your keyboard, this will paste the image we have copied into our document. If you did not copy the image, just go to the file tab and find where you saved it at and drag it into our document.

Once the image is in our new document we can start isolating it so we can make a brush out of it. Since the background is white we don’t really have to isolate the image much at all. This will be more of less a cleanup procedure so we won’t have any issues using the brush later on in the image. Start off by pressing ‘M’ on your keyboard; this will equip the marquee tool. Be sure your marquee tool is set to the rectangle marquee and has no feather. Once you have the marquee tool set up properly we will grab the outer edges of our layer as I have, we don’t want any hard edges in the final image or any strange cut offs. Now that it is selected we can just press ‘DEL’ on the keyboard to clear this selection and move on to the next step!

Now press ‘CTRL SHIFT D’ to deselect the selection if it’s still up. Once that is done you can press ‘CTRL L’ on your keyboard, this will bring up the manual level editor. We will not be using the auto level tool for this because we want to keep the majority of the splat semi transparent. Using the auto leveler might cause the grays in our image to become absolute black which would not be good. So with your level editor up slide the middle triangle way over to the black triangle, not all the way though you want to stop at about ’1.44′. This will cause our image to become much brighter which is fine; it will also help if there are any strange grays around the edges that we cannot see to become pure white. And as I said before, we don’t want any strange edges.

Once you have hit the ok button we will start the final process. That is to remove any last remaining unwanted splats or grey lines that might linger around in the stock image. We will do this by pressing ‘E’ on our keyboard to bring out the eraser tool. Now right click on the screen and a new dialog box should appear; this dialog box will be how we adjust the settings for our eraser brush. Set your brush up as mine is below, don’t be to concerned about the size of the brush the document and image are both huge. Once your brush is set up as mine you can set the opacity to around 45% and eraser along the outer edges of the layer. Try not to erase anything to far to the center of the image, we just want to clean up the image, not destroy it!

We will now grab the marquee tool once again, which is ‘M’ on your keyboard. This time we will select everything we want to become our brush. Remember that everything that is white will become transparent and all that is black will be our brush. With all of that selected press ‘CTRL SHIFT U’, this will desaturate our selection so that our brush becomes black and white.

Go up to the edit tab, located between the file and image tabs, and select define brush preset. By clicking the define brush preset button we will be creating our brush. Everything that is black will be 100% opacity on our final brush, the grays will be around 50% opacity and the whites will not exist. The dialog should look something like mine does, once it comes up type in the name for your new brush and select ok.

Now you can browse through your brush dialog and see that your brush is ready to use!
Before we get all excited there are more brushes to be made. So we will go back to Sxc and grab this image: http://www.sxc.hu/browse.phtml?f=download&id=277806 We will paste it into the document the same way we did with the other stock image. However this time since the white is so much brighter and there are no strange outlines our isolation will be much simpler.

We will press ‘CTRL SHIFT U’ the same way we did before just to make sure everything is black and white. Once that is done we will press ‘CTRL T’ this will bring up our free transform tool. Since the image is much larger than the previous stock image it must be sized down before Photoshop will allow us to define it as a brush. Once the free transform tool comes up select the chain link in between the width and height settings so that we do not skew our stock. Now we will just change the size settings as I have in the below screen shot.

Now that our stock has been sized down we can grab the marquee tool one last time by pressing ‘M’ on your keyboard. This time we will make a very tight selection, keeping the dashed lines as close to the stock as we can get them, this will ensure that our brush does not exceed the size limitations (2500px).

Once the selection has been made we will go back to the edit tab and define our selection as a brush preset.
If you really want to create a completely opaque brush you can just duplicate the splat layer twice and set both of the new duplicated layers as a multiply at 100%. This should make the image completely black.

Now we will just repeat this process many times over. If you don’t have a scanner I have provided links to images on Sxc that you can use the same way we have in the above steps. If you do have a scanner you can just throw some paint, ink, finger nail polish, dye or really anything that will dry and look the same way our stocks have. Once you have splatterd or brushed your chosen liquid onto the paper just wait for it to dry, scan it and manipulate it to create a brush the same way we have in the previous steps.
If you are without a scanner here is a large list of stocks, if you don’t want to fool with all of that there are plenty of splatter and brush stroke brush packs around on the net just go looking!
Stocks:

http://www.sxc.hu/photo/1083404
http://www.sxc.hu/photo/277790
http://www.sxc.hu/photo/626005
http://www.sxc.hu/photo/524461
http://www.sxc.hu/photo/524460
http://www.sxc.hu/photo/524478
http://www.sxc.hu/photo/1192353
http://www.sxc.hu/photo/902891
http://www.sxc.hu/photo/826501
http://www.sxc.hu/photo/1079392
http://www.sxc.hu/photo/1058438
http://www.sxc.hu/photo/615813
http://www.sxc.hu/photo/826508
http://www.sxc.hu/photo/826507
http://www.sxc.hu/photo/886378
http://www.sxc.hu/photo/193172
http://www.sxc.hu/photo/277771
http://www.sxc.hu/photo/906249
http://www.sxc.hu/photo/277759
http://www.sxc.hu/photo/331123
http://www.sxc.hu/photo/277805

So by now you should have quite a bit of brushes. However you may want more. So go looking for stocks! Look on google images, stocks sites etc… the more you have the better your images will appear. Also if I was not clear, if you have a scanner spat some ink on some paper, scan it in and isolate it the same way we did the above stocks.

Step 3: Stock selection and manipulation

Stock selection for a piece such as this is very important. However you do have a wide variety of stock types you could choose from. Below is a list of tips you should keep in mind when looking for yours, also if your having trouble deciding you can always check out my gallery (www.soad2k.deviantart.com) I have quite a few pieces in this style.

Size, go big. The bigger the stock the easier it will be later on when creating the crops and deciding where to start.
Choose one that looks good! It’s a very popular trend to use a beautiful woman for this style of manipulation but you don’t have to! Just make sure your stock looks good!
If you are not going to create a monotone piece like we are here then make sure you choose one with clear vibrant colors.
Choose a image with a nice amount of contrast.
Most importantly just choose a good stock image!

The below screen shot is the stock image I will be using.

Now that you have a stock image just follow along as I show you how I create the final image. From now on I will continue on as if you are using the same stock image I’m using, just to make things a bit easier.
So to start off we need to make a layer mask and then fill in the area of the face. You can use the pen tool for this or the brush tool. The way I did it was to apply a layer mask and then with a 3px small brush I drew in black on the mask to cover the face. Once the face was covered I just inverted the mask and ta da! I would suggest that you do this the same way or use the pen tool if your better with it.
As of now my canvas looks like the below screen shot.

Once you have isolated out your face so that only it is visible we can continue on to the brush work.
So this image is created by using a white brush on a layer mask. This means that everything that is white will become visible on the final image. This is why the transparency of your brushes is very important. But its also very important to keep in mind that if you ever mess up you can switch your color to black and use your splatter brushes as erasers. Also keep in mind that patience is the key here! Take your time.
So to start off you want to use any splatter brush you like and just lay down about 2 or 3 brushes coming off of one side of the face.

If your brushes are more opaque then you want (they should be about 70%) then just turn the opacity down to match what you are looking for. Also keep in mind that you don’t need to just throw spat brushes around you need to make them blend into your stock image and create a flow of sorts. Just have patience with the process and you shall be rewarded!
Next we just need attack the other side of the figures head. The below screen shot is what my image looks like as of now.

Now we need to create a new layer underneath the stock image. Once you have done this we need to grab one of our brushes and apply it underneath the head to create an abstract hair like effect. I applied 2 or 3 brushes to achieve the effect I wanted. The below screenshots are what my image looks like as of now.

Now our tutorial will take a change of sorts. The following screenshots will show the process of creating the flowing and dripping effect. I have found a stock that is extremely similar to the dripping lines that I used. To use this stock apply the layer as a multiply.

The stock can be found here : http://cgtextures.com/login.php?&texid=10302&destination=texview.php?id=10302&PHPSESSID=66254d7f423b0658bb4b2d23649b4ead
My canvas now looks like the below screenshot.

Now we need to create a layer above the stock image. Once you have done this grab one of your brushes and throw it down so it appears as if its black tears as I have done in the below screen shot.

Next, while on this layer we need to enable the standard 3px hard brush.

With this brush enabled just darken the area around the eye lightly. The trick here is to really darken the eye area while still keeping it realistic.

Now we can move over to the other eye.

I also took the opportunity to darken the lips with the 3px brush at this time. As well as to add a few more small details in the splats themselves.

My image now looks like the below screenshot.

Well we are done! My final image is displayed below. There’s more you could add, some small details here and there but for the most part we are finished with our tutorial! I hope you learned a bit about how this style of picture is made and have either came out with some new brushes you like, learned something or at least got an image you like. If you have any questions regarding this don’t hesitate to ask! Thanks for reading!

10 Javascript Accordion Scripts

2010-08-24T11:48:00.001-07:00

A Javascript Accordion is a script that allows areas of content to be hidden and then activated and shown using a mouse click, a great piece of script for sites that are tight on space or for navigation where lots of options are needed.

Deziner Folio – Simple javascript Accordions

Moofx – javascript effects for use with Mool Tools or Prototype frameworks

Stickman Labs – Accordion v2.0

Chris Esler – Moo Tools Accordion

Aariadne – Accordion widget example with drag and drop

Artviper – Mootools menu with Accordion and hover effects

Nyokiglitter – Tabbed accordion boxes

Portalzine – Horizontal accordion which mimics the Xbox 360 “Blade” interface

Learning jQuery – More showing, more hiding

Solutoire – Accordion with color transition

Bookmark & Share

Welcome to SAP Tutorial and Guide

2010-08-10T05:49:00.001-07:00

In today’s world, running a business is no longer only about making a profit at the end of the day. Running a business, especially those in the medium to large scale enterprises, will also entail optimization of processes such that the cost and time to execute those processes are reduced and efficiency is increased. This means managing all aspects of the business and making sure that each aspect develops synergism with the other aspects.

The electronic era ushered the era of speed. Today, everything is in electronic speed. Computing power has exponentially exploded and communication is nearing light speed. Managing businesses in today’s world must involve harnessing that speed and integrating them into the processes of the business.
Today’s computing technology has enabled us to create software that will help businesses harness speed and precision, coupled with the speed of communication, and use it in creating unprecedented control over all the processes and aspects of your business. It will enable you to get real time data and feedback so you can make quick decisions that will help your bottom line.
SAP, which stands for Systems, Applications and Products in Data Processing is one such example of the convergence of computing genius and today’s advancing information and communication technology. It is a very complicated system composed of systems (many many of them). Each system is equipped with the awareness of the other systems such that data is shared among them. However, they are also capable of existing as stand alone systems or as part of the whole thing.
The SAP system creates an electronic awareness of all aspects of your business such that each aspect will have the data it needs from the other aspects to optimize its operations and processes which should lead to a better, more efficient way of doing your business.
SAP Tutorial and Guide is dedicated to SAP and to all professionals looking for more information about this renowned software. It hopes to become the top resource for those who wish to learn SAP. Browse around and read on.

2010-08-08T22:45:00.000-07:00

cPanel User Guide and Tutorial
Packt Publishing | ISBN 1904811922 | 208 pages | PDF | 6.3 MB

This book will help you to:
- Learn how to find hosts that offer cPanel with their web hosting packages
- Discover how to access your cPanel account in several different ways, even behind a firewall
- Familiarize yourself with the standard cPanel layout so you can find what you are looking for quickly
- Discover what the information you see on the main cPanel interface means and how to use it to keep track of what is happening with your hosting account
- Create, manage and remove FTP accounts so you (or your web master) can upload, access and remove files from your website
- Set up, manage and learn how to access e-mail accounts, including e-mail aliases (forwarding), web mail access, e-mail quotas, mail filtering, spam blocking and mailing lists
- Create, manage and delete databases from within cPanel
- Learn how to protect and control access to information on your web site using the tools that cPanel provides
- Monitor site traffic using web stats
- Discover how to create an effective backup strategy using cPanel’s web site backup and restore features
- Explore some advanced tools that cPanel offers to help manage your web site
- Learn basic techniques to keep your web site safe from hackers and learn what to do if the worst happens
- Examine some common third-party add-ons and themes that your host may choose to offer
- Discover a wealth of external tools that make the aspiring web master’s job easier

..::Downlaod::.. here

How to Customize Microsoft Excel Fonts in Excel 2010

2010-08-08T14:36:00.000-07:00

By default, the new Microsoft Excel 2010 uses Colibri font along with size 11 as soon as you open a new Excel document. If you don’t like such a font and wish to customize it with your own font and size, then this little, quick tutorial is right for you. So, let’s see how to customize and change the default Microsoft Excel Font to something else.

Open Microsoft Excel 2010.
Click the File tab.
Click Option.
On the left pane, click the General link.
Now, under the When creating new workbooks section, select the new font you wish to use from the Use this font drop down menu.
Click OK.

2010-08-08T01:23:00.000-07:00

Remember when digital cameras first came on the market a few years ago? Like most people, you probably waited to buy one, waiting to see if it was just a fad or if it was going to become a way of life, much like PCs did in the 1980s. Well, years have gone by and digital cameras are only getting better with time. Yet it seems like more people have digital cameras than know how to use them. How Digital Photography Works is a digital camera and photography book that actually tells you how it all works. Full-color, large illustrations take the guesswork out of understanding all of the cool things your digital camera and software can do, from capturing images to fixing mistakes.

You will learn:

* How a lens works
* How exposure works
* How digital cameras transform light to become data
* How digital cameras manipulate photos
* How digital tools correct picture-taking mistakes
* How digital print-making works

How Digital Photography Works is the only book that gives you a behind the scenes look at digital photography, ultimately making you a better digital photographer.

Download : Click here

Flash - Countdown in Style With an Airport Terminal Timer

2010-08-03T10:21:00.000-07:00

In this tutorial we’ll make a reusable countdown timer with a dynamic target date that can be set via XML. We’ll animate the numbers flipping down in the style of an old airport or train station status board. We’ll cover code, graphics creation and animation. What are you waiting for..?

Step 1: Set Up Your Flash File

Create a new Flash file (Actionscript 3) with these settings: 500×300, black background, and 30 fps.

Step 2: Create the digit_bottom MovieClip

Create a new MovieClip called ‘digit_bottom’ and draw a rounded rectangle inside it approximately 36px wide by 50px tall. (A quick way to draw a rectangle with precise dimensions is to select the rectangle tool and Alt-click on the stage.)
Give the rectangle a gradient fill from #111111 (top) to #333333 (bottom) and a 2 px outline colored #333333.

Step 3: Position the Rectangle

Position the rectangle so that the registration point of the MovieClip (the little ‘+’) is exactly halfway between the top and bottom and the left edge. If you made your rectangle 50px tall, then the y value should be -25.

Step 4: Add the Number

Create a new layer and add a dynamic text field called ‘t_num’. Choose a font that has an airport or train station feel to it (like Helvetica, DIN, or Interstate). I’m using Helvetica Bold.
Set the Paragraph Format to centered, and remember to embed the fonts for the numbers 0–9.
Position the text field so it’s centered on the background rectangle.

We’re going to be using this MovieClip as the base for another graphic, so take a moment to make sure it looks good.

Step 5: Add a Mask

Create a new layer on the timeline of the digit_bottom MovieClip and call it ‘mask’. Copy the rounded rectangle and Paste in Place on the mask layer (Edit > Paste in Place, or Command-Shift-V).
Select the top half of the mask rectangle and delete it.
Right-click the mask layer, choose Mask and make sure that it is masking all of the layers below it.

Step 6: Create the digit_top MovieClip

Go into the Library, duplicate the digit_bottom MovieClip and name the new copy ‘digit_top’.
This MovieClip will be virtually identical to the digit_bottom clip, except the mask will be showing the top half of the graphics instead of the bottom.
Delete the graphics currently on the mask layer. Copy the rounded rectangle and again Paste in Place on the mask layer. This time select the bottom half and delete it.
The only other adjustment you might want to make here is to adjust the color of the text and the shading of the background rounded rectangle. I made the graphics in my digit_top clip a bit darker to simulate light coming from the top.

Step 7: Create the Digit MovieClip

Create a new MovieClip named ‘Digit’. Drag in the digit_top and digit_bottom MovieClips and position them both at 0,0. Give them the instance names ‘top1′ and ‘bottom1′.
Now copy both of the MovieClips (digit_top and digit_bottom), create a new layer, and Paste in Place a copy of each. Name the new copies ‘top2′ and ‘bottom2′.
You should now have 4 MovieClips inside your Digit MovieClip: 2 copies of digit_top and 2 copies of digit_bottom. I’ll explain why we’re setting it up like this in the next step.

Step 8: Animation Strategy

We have to do a bit of animation trickery to get the flipping numbers effect we want. Take a look at the diagram below of our Digit MovieClip (I’m rendering it in 3D just so you can see the layering more easily):

Animation Step 1:

We start out with the bottom2 clip flipped upside down (using the scaleY property) and placed behind the top2 clip. At this point the 2 clips that are visible are top2 and bottom1. The numbers on these two clips correspond to each other, so they form a complete digit.

Animation Step 2:

Now we flip down the top2 clip to the center of the digit. At this point scaleY will be zero, so the clip won’t be visible. At the same time, we’re also flipping down the bottom2 clip, but this one we’ll flip all the way to the bottom. Since it’s behind top2, it won’t show until it flips past the halfway point. Now the 2 visible clips are top1 and bottom1. The numbers on these two clips don’t match, but that’s okay because this step only lasts for a brief moment.

Animation Step 3:

The top2 clip stays in the center as bottom2 continues to fall all the way down to the bottom. Once it’s in place the numbers on the visible clips (top1 and bottom2) again match to form a complete digit.

Animation Step 4:

At this point we’ll relayer and reset the positions of the 2 hidden clips to get ready for the next flip. Notice how the clips are in the same positions as Step 1, only reversed.

Step 9: Create the Clock MovieClip

Now that we have the individual Digit MovieClip set up, let’s build the clock.
Create a new MovieClip on the stage called ‘Clock’ with the instance name ‘clock’. Inside the new MovieClip place 9 copies of your Digit MovieClip; 2 for seconds, 2 for minutes, 2 for hours, and 3 for days. Give each digit an instance name. From left to right name them ‘digit0′, ‘digit1′, ‘digit2′, and so on.
Add some colons to separate the MovieClips and labels for each section. The design is up to you. I added a dark rounded rectangle as a background for my clock.
Lastly, add a dynamic text field called ‘t_date’. This is where we’ll show the target date the clock is counting down to. Remember to embed the font for this text field if you’re not using a system font.

Step 10: Create the Digit Class

Create a new Actionscript file called ‘Digit.as’ and add this code to create the empty shell for the class:

01package {
02 
03    import flash.display.MovieClip;
04 
05    public class Digit extends MovieClip {
06        private const TOP:int = 0;
07        private const BOTTOM:int = 1;
08 
09        private var _currentDigit:Array;
10        private var _nextDigit:Array;
11        private var _number:String = "0";
12 
13        // CONSTRUCTOR
14        public function Digit() {
15            _currentDigit = new Array( top1, bottom1 );
16            _nextDigit = new Array( top2, bottom2 );
17 
18        }
19 
20    }
21 
22}

This doesn’t do much yet. We’ve got a couple of arrays to hold the 2 sets of digit_top and digit_bottom MovieClips. I’ve set up 2 constants, TOP and BOTTOM to help keep track of the top and bottom clips within those arrays. The _number variable will hold the digit that’s on display at any given time.
(Note: I’m using the underscore in my variable names to indicate private variables.)
Find your Digit MovieClip in the Library and assign this class to it in the Linkage settings.

Step 11: Import the TweenLite Library

We’re going to be using the TweenLite library to animate our Digit MovieClip.
Download the AS3 version of the TweenLite library here.
Place the ‘com’ folder in the same directory as your main Flash file (or in your source path, if you’ve set up a different class path).
Add these two lines at the top of your Digit class, just below the MovieClip import:

`5`	`import` `com.greensock.*`

`6`	`import` `com.greensock.easing.*`

We’re barely going to scratch the surface of what TweenLite can do in this tutorial. For more information check out the TweenLite Documentation.

Step 12: Program the flipTo Animation

Add this function to your Digit class:

22public function flipTo(num:String):void {
23    _number = num;
24    _nextDigit[TOP].t_num.text = num;
25    _nextDigit[BOTTOM].t_num.text = num;
26 
27    // flip down the top of the digit to the halfway point
28    TweenLite.to(_currentDigit[TOP], .15, {scaleY: 0, ease: Linear.easeNone});
29    // flip the next digit bottom down
30    TweenLite.to(_nextDigit[BOTTOM], .3, {scaleY:1, onComplete: flipComplete,  ease: Bounce.easeOut});
31}

Here’s what’s happening, line by line:

This function accepts a String that will hold the digit we’ll be flipping to. The first line just sets our _number variable to hold that digit.
Next we set the text fields in the TOP and BOTTOM MovieClips in our _nextDigit array to display that same digit.
Then we use TweenLite to tween the scaleY property of the TOP MovieClip of the _currentDigit to 0. This gives the effect that it’s ‘falling’ toward the center of the digit.
The last line is another tween, this time animating the BOTTOM clip of the _nextDigit from the the top of the digit down to the bottom. Again we’re using the scaleY property to simulate this effect, but this time from -1 to 1. Since it’s tweening twice as far as the TOP clip, we give it twice the amount of time (.3 seconds instead of .15). When this tween finishes it will call a function called ‘flipComplete’. We’ll write that function in the next step.

Take another look at the diagram in Step 8 if you’re confused about the animation here.

Step 13: Add the flipComplete() Function

Add this function to the Digit class just below the flipTo function:

33private function flipComplete():void {
34    // swap digits
35    var next:Array = _currentDigit;
36    _currentDigit = _nextDigit;
37    _nextDigit = next;
38 
39    // reset layering
40    reset();
41}

Once the flip animation completes we’ll run this function. It swaps the _currentDigit and _nextDigit arrays. After that’s done it calls a function named ‘reset’ to reset the clip layering and positions for the next flip. Let’s write that function now.

Step 14: Add the reset() Function

Add this function to the Digit class:

47private function reset():void {
48    addChild(_nextDigit[BOTTOM]);
49    addChild(_currentDigit[TOP]);
50 
51    // flip up the next bottom to be behind the current top
52    _nextDigit[BOTTOM].scaleY = -1;
53    _nextDigit[TOP].scaleY = 1;
54}

The first two lines in this function pop the _nextDigit BOTTOM and then the _currentDigit TOP to the top of the display list. I usually just use addChild() to do this because it requires less typing than using setChildIndex().

After the clips are re-layered, we set the scaleY properties so they’ll be ready for the next flip. This means changing _nextDigit[BOTTOM] from 1 to -1 and _nextDigit[TOP] from 0 to 1.
Again, check the diagram in Step 8 if you’re getting lost.

Step 15: Add to the Constructor

One thing we forgot to do is position the clips properly for the first flip animation. We can do that easily by adding a call to the reset function right in the Digit class constructor:

16// CONSTRUCTOR
17public function Digit() {
18    _currentDigit = new Array( top1, bottom1 );
19    _nextDigit = new Array ( top2, bottom2 );
20 
21    reset();
22}

Step 16: Add the number() Function

One last thing we’ll need in our Digit class is a way to access the private _number variable from outside the class. We’ll add a simple accessor function:

35public function get number():String {
36    return _number;
37}

Step 17: Create the Clock Class

Create a new ActionScript file named ‘Clock.as’. Paste in this code:

01package {
02 
03    import flash.display.MovieClip;
04    import flash.events.TimerEvent;
05    import flash.media.Sound;
06    import flash.utils.Timer;
07 
08    public class Clock extends MovieClip {
09        private var _clockTimer:Timer;
10        private var _targetDate:Date;
11 
12        // CONSTRUCTOR
13        public function Clock() {
14 
15        }
16 
17    }
18 
19}

Not much here yet. Just importing some of the classes we’ll need. I also have a couple of private variables. _clockTimer will count down the seconds for us, and _targetDate will hold the date that we’re counting down to.

Step 18: Add the set() Function

Add this function to the Clock class just below the constructor:

18// set the target date and start the countdown timer
19public function set(date:Date):void {
20    _targetDate = date;
21 
22    _clockTimer = new Timer(1000) // tick every second (1000 milliseconds)
23    _clockTimer.addEventListener(TimerEvent.TIMER, update);
24    _clockTimer.start();
25 
26    // display the target date above the clock
27    t_date.text = _targetDate.toLocaleString().toUpperCase();
28 
29    // update the clock once here so it starts with the correct time
30    update();
31}

This is the function that we’ll use to set the target date for the clock. It accepts a date (of course) and assigns that to the _targetDate variable. It then instantiates our _clockTimer. The _clockTimer will call the update function once per second to update the digits.
After starting the timer, the function sets the t_date text with the target date. The toLocaleString() function ensures the date is displayed in the user’s local time zone.
The last line of this function calls update once to set the clock to the proper time. Otherwise it would display “000 00:00:00″ for one second until the first timer event.

Step 19: Add the update() Function

This function is a bit long because it’s where most of the work gets done. Add it to your Clock class:

33private function update(e:TimerEvent = null):void {
34    var now:Date = new Date(); // get the current time
35 
36    // find the difference (in ms) between the target and now
37    var diff:Number = _targetDate.valueOf() - now.valueOf();
38    if(diff <=0){
39        // TIME'S UP!
40        // do something cool here
41        _clockTimer.stop();
42        _clockTimer.removeEventListener(TimerEvent.TIMER, update);
43        diff = 0;
44    }
45 
46    // convert to seconds
47    diff = Math.round(diff/1000);
48 
49    // number of days
50    var days:int = Math.floor(diff/ (24 * 60 * 60));
51    diff -= days*(24 * 60 * 60 );
52 
53    // number of hours
54    var hours:int = Math.floor(diff / (60 * 60))
55    diff -= hours*60 * 60;
56 
57    // number of minutes
58    var min:int = Math.floor(diff/ 60);
59    diff -= min*60;
60 
61    // seconds are all that remain
62    var sec:int = diff;
63 
64    // create an array of strings to hold the number for each value
65    var diffArr:Array = new Array(String(days), String(hours), String(min), String(sec));
66    var diffString:String = ""
67    var len:int = 3; // the first value (days) has 3 digits. All the rest have 2
68    for each(var s:String in diffArr){
69        // pad the string with a leading zero if needed
70        while(s.length < len){
71            s = "0"+s;
72        }
73 
74        len = 2; // all the other values are 2 digits in length
75        diffString += s; // add the padded string to the diffString
76    }
77 
78    // go through each character in the diffString and set the corresponding digit
79    for(var i:int = 0; i< diffString.length; i++){
80        if(diffString.substr(i, 1) != this["digit"+i].number){
81            this["digit"+i].flipTo(diffString.substr(i, 1));
82        }
83    }
84 
85}

This function accepts a TimerEvent as its parameter. The default value for this parameter is null. This allows us to call the function without sending a parameter, as we’re doing in the set function.
The first line of this function gets the current date and time as a Date object. Next, we find the difference between the current date and the target date (line 37). If the difference is 0 or less, then it’s past the target date, so we stop the _clockTimer (lines 38-44).
Since the difference in time between now and the target is calculated in milliseconds, we need to convert that into a nice readable display of days, hours, minutes, and seconds (lines 46-62). The math here is pretty simple as long as you know that there are 1000 milliseconds in a second, 60 seconds in a minute, 60 minutes in an hour and 24 hours in a day.
On line 65 we store all those values as elements in an array. Starting on line 68 we loop through each element and add it to a String of characters called ‘diffString’. While doing this we also add leading zeroes where necessary (line 71). So if our values for the clock were 30 days, 5 hours, 56 minutes, and 6 seconds the diffString would look like this: “030055606″.
The last thing this function does is loop through the characters in the diffString (using the charAt() method). For each character in the string we check to see if it’s different from the number currently displayed on the corresponding digit. This is easy because of the way we named our digit instances. If the number is not the same as the one currently displayed we tell that digit to flip to the number in the diffString.

Step 20: Add Sound

Find (or create) a good ticking sound that will play every time the clock updates. Import it into the Library of your Flash file and set the class name to ‘TickSound’ in the Linkage settings.

Add the _tickSound variable to the top of your Clock class just below the two other variables:

09private var _clockTimer:Timer;
10private var _targetDate:Date;
11private var _tickSound:Sound = new TickSound();

And play the sound inside the update function:

`35`	`_tickSound.play();`

Step 21: Add the Main Document Class

Our countdown timer is complete, we just need some way to set the target date. Create a new Actionscript file called ‘Main.as’ with this code:

35package {
36 
37    import flash.display.MovieClip;
38 
39    public class Main extends MovieClip {
40 
41        public function Main() {
42 
43            // set the target date for the clock
44            var targetDate:Date = new Date();
45            targetDate.setTime( Date.UTC(2010, 4, 28, 20, 00) );
46            clock.set(targetDate);
47        }
48    }
49 
50}

All this does is set the target date for the Clock instance on the Stage. I’m using setTime() and Date.UTC() to convert the date to Universal Timecode. This way the date will be correct when it gets converted back to local time on the user’s computer. Also, remember that the months are zero-based. So, the month 4 is actually May, not April.
In your Flash file set the Document class to ‘Main’.

If you need a refresher on using the Document Class check out this Quick Tip.

Step 22: Test

Test your movie now and everything should work. Try changing the target date in the Main class and see how the countdown changes.
One potential downside to how we’ve set this up is that the target date is hard-coded in our SWF. That’s fine, but it would be cool if we could dynamically load the date so that we could reuse the countdown for different things.
Let’s see what we can do about that…

Step 23: Create the XML File

Create a new XML file in the same folder as your Flash file called ‘targetDate.xml’ (an XML file is just a plain text file). Add this to the XML file:

1<targetDate>
2    <year>2011year>
3    <month>3month>
4    <day>25day>
5    <hour>20hour>
6    <minute>21minute>
7targetDate>

Using this format for our target date is pretty bloated (there is more markup than there is actual data), but it will keep things very clear for the purposes of this tutorial.

Step 24: Load the XML

Now let’s make some changes to our Main document class. Replace everything in that file with this code:

01package {
02 
03    import flash.display.MovieClip;
04    import flash.net.URLLoader;
05    import flash.net.URLRequest;
06    import flash.events.Event;
07 
08    public class Main extends MovieClip {
09 
10        // CONSTRUCTOR
11        public function Main() {
12            // load the XML
13            var xmlLoader:URLLoader = new URLLoader();
14            xmlLoader.addEventListener(Event.COMPLETE, onDataLoaded);
15            xmlLoader.load( new URLRequest("targetDate.xml") );
16 
17        }
18 
19    }
20 
21}

You’ll notice we’ve imported some additional classes to help us load the XML file. In the constructor function we’re creating a new URLLoader instance to load the file for us. We attach an event listener that will call a function named ‘onDataLoaded’ when the file is finished loading.

Step 25: Add the onDataLoaded() Function

Add this function to the Main class:

18private function onDataLoaded(e:Event):void {
19    var xml:XML = new XML(e.target.data);
20 
21    var targetDate:Date = new Date();
22    targetDate.setTime(Date.UTC(int(xml.year), int(xml.month), int(xml.day), int(xml.hour), int(xml.minute) ));
23 
24    clock.set(targetDate);
25}

This function creates a new XML object from the file we loaded. We then create a new Date object from the values in the XML. We’re again using setTime() and Date.UTC() to convert the date to Universal Timecode. The final line is the same as before, it just sends the target date to our Clock instance.

Step 26: Wrap Up

That’s pretty much it for this one. There are a couple of enhancements you might like to make though:

Depending on what you’re using the countdown for, you might want to do something special for the user when the countdown hits zero. You’d add this to the Clock class in the part of the update function that checks if the timer is at zero.
As I mentioned, the format of our XML is pretty wasteful as it is. You might rather just pass in the date as a string via FlashVars, use a different data format (like JSON), or just reformat the XML to be a bit more compact.

Good luck! As always, post a comment and let me know what you think.

General Graphics Tutorials -- Color

2010-08-02T23:44:00.000-07:00

This is kind of an ambitious undertaking for me. Normally I try to keep the size of tutorials down to a few pages at most (this one was over 20 pages in Word!). Unfortunately, color is a difficult and rather lengthy topic even where web graphics are concerned. I hope you won't find this tutorial too long-winded and that you'll find it a welcome reference.
--tmc

Color

Color Models (Part I)

CMYK
RGB
HSL/HSB
Indexed
How the Models Work
Color and Your Computer Screen

Color Depth (Part II)

8-Bit
16-Bit
24-Bit

Color Palettes (Part III)

Problems with Limited Palettes
How to Build or Select a Palette
Types of Palettes
- Exact Palette
- Adaptive Palette
- Web Palette

Previewing Your Images (Part IV)

Hexadecimal Notation (Part V)

Counting in Hexadecimal
Converting Hexadecimal to Decimal
Converting From Decimal to Hexadecimal
A Necessary Evil

Color

When taken all together, color is one of the hardest web graphics topics to understand. There are a lot of new buzzwords and some really geeky computer stuff involved. As with the rest of my tutorials, though, I'll try to make this experience as painless as possible. Once you've finished this tutorial, you'll be able to move on to other tutorials with real confidence.

Even some graphic artists have problems with color and how it relates to web graphics. Some of the things they, and you, must get used to are how computers display colors. The displaying of colors involves both hardware and software. Some of the buzzwords involved are: bit depth, palettes, browser-safe and platform dependence. All of these topics will be covered in this tutorial. Don't worry if it doesn't all make sense the first time around. I suggest you read through this tutorial to get a feeling for what it's all about and then refer back to it as necessary.

Color Models

For our discussion of color, there are a few models that you need to know about. Some of these, such as CMYK, are intended more for printing and, as such, are not applicable to web graphics. These various models are really just different ways of looking at the same thing, similar to the way a word in a foreign language has a counterpart in English. The words sound different and look different but they mean the same thing.

The different models we'll look at are CMYK (cyan, magenta, yellow and black--yes, K=Black; that's not a typo), RGB (red, green and blue), HSL/HSB (hue, saturation and luminance or brightness) and Indexed (a subset of RGB).

Q&A: What's the difference between CMYK and RGB?

The main difference is that CMYK is used to describe colors when discussing printing and RGB is for describing colors for screen-based display such as your computer monitor or television set.

C,M,Y & K are the four colors of ink that, when mixed together, can produce all of the colors needed for printing. C is for Cyan, M for Magenta, Y for Yellow and K for percent blacK.

R,G and B are the three colors that, when mixed together can produce all of the colors needed for onscreen images. R is for Red, G is for Green and B is for Blue.

The CMYK color model is what is known as subtractive. This means that when you mix, or add, multiple colors you'll eventually end up with black and when you subtract colors you'll eventually end up with white.

The RGB model is additive. This means that when you mix, or add, multiple colors you'll eventually end up with white and when you subtract colors you'll eventually end up with black.

To see what I'm talking about, look at the CMYK and RGB values in figure 3.1 and you'll see that, for the color white, all of the CMYK values are 0 (subtractive) and all of the RGB values are 255(additive). i.e. subtracting, or moving the separate color values towards 0, in CMYK results in white and adding, or moving the separate color values towards 255 in RGB results in white.

figure 3.1
Color Picker dialog box

CMYK

As mentioned earlier, CMYK is the color model associated with color printing and, therefore, is not of immediate interest where web graphics are concerned. If, on the other hand, you sometimes import graphics from predominantly print type graphics programs such as Corel DRAW! or Adobe's Illustrator into a program like Adobe's Photoshop, you may have a problem with the default mode being reset from RGB to CMYK. The first clue that this has happened may come when you go to apply a plugin filter only to find the entire menu grayed out. If this happens, don't panic. Check to see if the mode has been reset and, if it has, set it back to RGB.

NOTE: You can determine which mode an image is using in Photoshop by choosing Image, Mode. The current color mode will have a check mark next to it. To change the mode simply select the one you wish to use. Once you've set an image to RGB you should then be able to use all of the available filters.

RGB

RGB, which stands for red, green and blue, is the most common computer graphics color model. There are 256 possible values for each of the three colors. Without getting into the higher math, what this means is that you have a possible 256*256*256 colors--256 values for red, 256 values for green, and 256 values for blue. A quick glance at a calculator will show that there are 16,777,216--or approximately 16.7 million--colors available with this model. You may or may not have access to all of these colors depending on a number of software and hardware related factors.

NOTE: To determine how many colors your hardware is capable of displaying:

Windows 95: right-click anywhere on the desktop. A pulldown menu will appear. Choose Properties this will bring up the Display Properties dialog box. Choose Settings to see how many colors are being used.

Windows 3.1: Select the Windows Setup icon (found in the Main program group). In the Display pull-down menu you'll see the current settings.

Mac: open the control panel (named Monitors, or Monitors and Sound depending on which version of the system software you're running) from the system folder. The current setting for your monitor will be displayed there and can be changed from there, as well.

Once you've bumped up the color resolution most of your software should take advantage of the extra colors.

HSL/HSB

HSL or HSB for hue, saturation, and luminance or brightness is just another way of looking at the RGB model. Hue means the same as color, saturation is the amount of color and luminance, or brightness, is self-evident. Usually, in cases where you can adjust the color within your software program, both the HSL and RGB models will share a common dialog box. This is true in both Paint Shop Pro and Photoshop, for example.

Although different programs will use either L, for luminance, or B, for brightness, these two are exactly the same. When you adjust the brightness by adding to it you'll get a brighter version of the color you're working with.

Saturation is the amount of color being used. Bringing this value up will increase the color and decreasing this value will eventually give you a shade of gray.

Changing the value for hue will take you through the different color values i.e. red, green, blue and all of the various colors in between.

NOTE: If you become more familiar with one color model (RGB or HSL) over the other, use whichever you please. During the course of this tutorial I'll use mostly the RGB model.

Indexed

Indexed color is similar to RGB and might be considered a subset of it. With indexed color you are limited to 256 colors. These 256 colors, though, can be any 256 colors from the 16.7 possible colors. Software such as Jasc Software Inc.'s Paint Shop Pro don't discuss colors in terms of indexes but choose to refer to them in terms of color depth.

NOTE: Indexed color is important with GIF images. GIF is one of the two possible image types available for web graphics. We'll look at GIF and JPG, the other image type, in more depth in a future tutorial "Creating a Successful Image".

How the Models Work

Because computers start counting at zero rather than 1, the possible values for red, green and blue go from 0 to 255. When all three values are 0, the resulting color will be black (in RGB and Indexed); when all three values are 255 the resulting color will be white. As expected, then, a value of R:0, G:0, B:255 (no red, no green, and all blue) will yield a vivid blue. A value of R:0, G:255, B:0 will give you a bright green. And a value of R:255, G:0, B:0 will be bright red. Mixing the values for R, G, and B will produce one of 16.7 million colors.

Your color television uses the same method of displaying colors as your computer monitor. When all three of the colors are fired at full strength the result is bright white. If you could get close enough to your television, although I don't recommend this, you might be able to see that what appears to be a white dot is actually a collection of very small red, green and blue dots.

On the computer these dots are called pixels. Pixel stands for picture elements. Your computer screen displays a rectangular array of these dots in a fixed set of numbers like 640x480, 800x600 and 1024x768. The more dots or pixels displayed, the better or higher the resolution. This higher resolution, though, requires more video memory.

To put it simply: Resolution is the number of pixels your monitor can "resolve" or display. The higher the resolution is the better the picture quality. I'll also use the word resolution when talking about color. Again a higher color resolution will result in more colors being displayed.

You may wonder how these numbers 640x480 and 800x600 work, since your screen doesn't actually change its size. What happens is that at a higher resolution, say 800x600 versus 640x480, the computer displays more pixels over the same surface. This will mean that the icons and windows on your system will get a little smaller. At the same time, though, you'll be able to see more on your screen. If you have a problem with higher resolutions on your screen you may want to consider getting a larger screen. The prices on 15 and 17 inch monitors have really come down in the recent past. A 15 inch monitor running at 800x600 with millions of colors will give you a really nice picture, especially if you spend a lot of time in front of your computer.

The 15 inch screen that I have hooked to my Internet machine runs at 800x600 with 64,000 colors and gives me a really nice view of the web. If you've only seen the web with 256 colors you'll be really surprised the first time you see a web site with a higher color resolution. You won't see any dithering or muddy looking graphics--instead, most all colors will appear exactly as they're supposed to. It'll be like a whole new web.

Color and Your Computer Screen

How many colors does your screen display? Chances are good that, if you bought your computer recently, it was sold to you as a multimedia machine capable of great wonders. When you bought the machine was it set up correctly, though? How do you know how many colors it's displaying?

If you're running Window 95 it's fairly easy to find out. Right click anywhere on the desktop and you'll a the pop-up menu like the one shown in figure 3.2

Q&A: What if I'm not using Windows 95?

Checking your color resolution on Windows 3.x and Macs was discussed in the section RGB, earlier in this chapter. The dialog boxes will be similar to the one seen in figure 3.2. (If you're nervous about playing with the system settings you might want to refer to the documentation that came with your machine.)

figure 3.2
Windows 95 Desktop options pop-up menu

At the bottom of this menu is the "Properties" selection. Clicking on this choice will bring up the "Display Properties" dialog box as seen in figure 3.3.

figure 3.1
Display Properties dialog box

Your dialog box may appear a little differently than this one. The software that came with my video card enhances this one. In any event you should have a tab labeled "Settings". Clicking on this tab will allow you to view the current color depth and resolution of your computer's monitor. You can see that mine is currently set to 1,152x864 at 32 bit color depth. You should be able to change the resolution and color depth to something higher than the standard 640x480 with 256 colors. Experimenting with the settings shouldn't prove troublesome as the drivers normally won't allow you to select higher resolutions or color depth than your machine can handle. Even on today's 14 inch monitors and with a 1MB video card you should be capable of seeing 640x480 with 64,000 colors or even 800x600 with 64,000 colors. Some people find that text on an 800x600 setting is to small to read. However, you should also be able to choose large fonts from the same dialog box. In any event, you should play around until you find a setting that gives you an acceptable picture with the highest resolution and color depth that your system can give you.

NOTE: Some people believe that a higher color setting will slow down the rate at which you can view web pages. This is untrue, however. Even the quicker 28.8 modems are much slower than your video card.

Paint Shop Pro Tutorials -- Red Eye Removal

2010-08-01T23:50:00.001-07:00

Red Eye Removal with Paint Shop Pro

Even today's smartest cameras and flash systems can leave you with portraits of friends and family looking like something from a Wes Craven movie... Spooky :) Those bright red eyes glowing out at you from the surrounding darkness... There's a solution, though, that's both elegant and powerful! Paint Shop Pro's Red Eye Removal tool. With just a few minutes practice at setting the different values you'll have your family's portraits looking more normal and less like the cast for the next "Freddie" movie.

This Paint Shop Pro Photo XI lesson will demonstrate how you can correct red eye in any of your digital portraits. Even though my portrait subject is a boxer puppy you can achieve the same results with portraits of your human subjects. Of course the human portraits will have subjects with red eyes, not the blue eyes that you see in the puppy's portrait... no matter, though, as you'll see once you get started.

A case of dreaded "red", or in this case "blue" eye

NOTE: This Paint Shop Pro lesson was created using Corel Paint Shop Pro Photo XI.

A Note on Glint

Before moving on to the actual red eye removal technique I'd like to point out that one of the differences between human red eyes and the pup's blue eyes is the positioning of the "Glint" (this is what Paint Shop Pro uses to refer to the bright white specular reflection from the flash). Either the puppies wide set eyes reflect things a little differently, or the pup needs glasses (see below), but there are a couple of glints in her eyes that aren't really centered, or exactly evenly spaced. No worries, though. I'll cover the "Glint" setting such that you'll see exactly how it can be applied to any red eye problem.

Sugrrr in glasses?!?

A Little Prep Work

Although Paint Shop Pro's Red Eye Removal tool is very powerful, and easy to use, it is what I refer to as a "destructive" tool in that it changes the pixels of your original image. You can get around this in a number of ways...

...you can work on a duplicate of the image. This is a good solution, but it means keeping track of more than one version of all of your affected portraits.

You can work on a copy of the layer. This is a pretty good solution, too, but it will increase the size of your .pspimage file(s).

A good compromise, in my opinion, is to copy the areas that need to be affected (in this case the subject's eyes) to a new layer above the original. Copying only the area that's needed will help keep the file size down.

To get started, select the Selection tool from the Toolbar, set the Selection Type to Ellipse and the Mode to Replace. The other settings aren't really relevant for this correction.

TIP: For the keyboard shortcut fanatics in the crowd, you can press the 'S' key to select the Selection tool

Click-and-drag an elliptical selection around one of the eyes that are affected.

With the first eye selected, hold down the Shift key to add to the current selection (you'll see a small plus sign above the mouse pointer) and drag another selection around your subject's other eye. You should end up with two selections around the eyes as seen in figure 25.1.

figure 25.1

Choose Edit, Copy to copy the selected areas.

With the eyes selected and copied create a new layer for them by choosing Layers, New Raster Layer... Doing so will bring up the New Raster Layer dialog box. Give the layer a name ("Eyes" or "Red Eye Correction" would be appropriate) and click OK to create the new layer.

Choose Edit, Paste Into Selection to paste the selected areas into the newly created layer.

TIP: For the keyboard shortcut fanatics in the crowd, you can press the 'Ctrl-Shift-L' keys to paste into the selection

By following the preceding steps in the order they're written you prevent Paint Shop Pro from pasting the eyes into the center of a new layer... not necessarily the place you want them to end up. The method used here will assure that the eyes in the new layer are in exactly the same place as those in the main layer below.

Now that the eyes are in their own layer it's time to correct the red eye problem...

Paint Shop Pro's Red Eye Removal Tool

The new "Eye" layer should be the active layer. If it's not, perhaps because you've saved and re-opened the file, simply click the "Eye" layer in the Layers palette to activate it.

With the layer containing the selected areas active, choose Adjust, Red Eye Removal... Doing so will bring up the Red Eye Removal dialog box (see figure 25.2).

figure 25.2

TIP: Use the Pan option in the Red Eye Removal dialog box to help you zero in quickly on the area you want to work on. You can activate the Pan option by clicking the Pan button located just below the "After:" preview window

Use the Zoom slider to adjust the red eye area so that you can see all of it (take another peek at figure 25.2).

Choose the Method. For the image of the puppy I chose "Auto Animal Eye". If you're working on a photograph of a human subject you can choose "Auto Human Eye".

Click-and-drag, in the Before preview window, from the center of the pupil outwards until you've created a selection that surrounds the pupil (see figure 25.3)

figure 25.3

I started with the pup's left eye (the one on the right in the photograph) and it does have a small glint in it that I'd like to preserve, or even (slightly, VERY slightly enhance). To do so I set the "Center Glint" on and I set the size of the glint. In this case only 2 pixels, but it will be enough to preserve the glint.

If removing the red eye from a portrait leaves black holes in space where your subject's eyes should be, you can actually add a glint to help give the eyes a more realistic appearance.

When you've finished up with one eye move on to the next. With the pup's right eye, I turned off the glint. Note that doing so doesn't remove any existing specular highlights.

For both eyes I left the default values for both the Feather and Blur settings. That is I left the Feather set to 1 and the Blur set to 0. If the image you're working with is suffering from a little soft-focus you might want to bump up the Feather or the Blur values a little.

To get the best results turn on the Preview on Image. There's a check box to do so located at the top right of the dialog box. I turned that preview on to help me set the lightness values for both the Glint and the Pupil. I set both of those values to 60 based on observing the changes in the preview as I played with the sliders.

I left the default Color setting, but you may want to play around with this, keeping an eye on the preview as you make changes to see what effect it has on the photographs you're working with. Figure 25.4 shows my final result. Now that's one cute little boxer puppy :)

figure 25.4

As always, make sure that you save a copy of your image as a .pspimage file so that you can come back to it later if necessary and make any subsequent changes or re-edits.

Corel DRAW! Tutorials -- Animated Logos

2010-08-01T23:30:00.000-07:00

Creating Animated Logos with Corel DRAW!

Animated GIFs

figure 9.6

This tutorial will demonstrate how you can create an Animated GIF logo. I used Corel DRAW! 7.0 for Windows for this technique. Some things may be done differently with other versions.

Putting a New Spin on Your Logo

I'll be the first to admit that I'm probably the last person to jump on the "Animated GIF" bandwagon. To be honest, I didn't really see the potential for animated GIFs. Most of the early images I saw were kind of cheesy. On top of that, I prefer keeping my images' download time to a minimum, and animated GIFs can get rather large very quickly.

Recently, though, I've seen the light. Done right, animated GIFs can be pretty cool. And, with today's GIF animation software, animated image file size can be kept quite reasonable. Animated GIFs can be real attention-getters on banner ads, can really add to the appeal of a static logo, and they can certainly add some pizzazz to a web page.

Animated 3D text has become so popular on the web, in fact, that there are now several dedicated programs available for you to choose from. These programs, produced by software companies such as Xara and Ulead, make the creation of animated 3D text as simple as point-and-click.

What if you need to do more than animate simple text? Normally you might think of resorting to a dedicated 3D-rendering program. These programs can be expensive, though, and they often have pretty steep learning curves. So what can you do? Well, you can use Corel DRAW! to create the frames for your animated masterpiece. That's right! Corel DRAW! has all the features necessary to help you create a 3D animated logo.

Here's how you can use the extrusion features to give depth to, light, and spin your creation...

Open a new graphic in Corel DRAW! (I'm using version 7, but the method should translate well to other versions).

I'll be creating a simple logo using the first letters of GrafX Design, my design company.

First I entered the text using the Text tool. I then selected the text by clicking on the Pick tool. This enabled me to change the font and the size of the text. I chose Braggadocio at 72 points.

Because I didn't want to create just simple text, but rather I wanted a logo, I decided to cut the text out of a simple oval shape. To do that, I selected the Ellipse tool and dragged an oval shape around the text.

To line these elements up, marquee-select them all with the Pick tool and choose Arrange, Align and Distribute. In the Align and distribute dialog box, check Center of Page and click OK.

With the elements still selected, click the Combine button on the property bar. This will combine, or cutout, the text from the oval.

You can change the color of the oval logo by left-clicking a color on the color palette. I choose a light blue color (see figure 9.1).

figure 9.1

Now that the logo design is complete (as simple as it is), it's time to extrude the image, light it, and start creating the separate frames you'll need in order to complete the animation.

Choose Effects, Extrude to bring up the Extrude dialog box (see figure 9.2). This is where you'll do most of the work needed to create the frames of your spinning animation.

figure 9.2

In this dialog box you'll see 5 tabs. The first three, Extrude, Rotate, and Lighting are the ones you'll need to use to create the frames for your animation.

The first thing you should do is extrude the logo. This process gives your logo some depth, i.e. it adds the 3rd dimension to your image.

Click on the first tab if it's not already active. You can now set the basic shape, viewpoint, and depth of your image. I set the shape to "Small Back," the viewpoint to "VP Locked To Object," and the depth to 2.0. You can play around with the various choices until you get the look you're after. When you're done, click Apply.

The next thing you will do is create the lighting.

Click the third tab. Turn on the first light by clicking the first lightbulb icon (or Light switch 1).

You can now position the light by dragging the small black icon around the 3D grid. You must place the icon on an intersection. I chose the upper-right corner. Once you've chosen the position for your light, click Apply.

At this point you won't really see much difference in your image. It's coming, though.

Click on the 2nd tab. This option enables you to rotate the logo in 3D space. You'll notice the Corel symbol that's visible in the middle of the dialog box (see figure 9.3).

figure 9.3

This symbol can be dragged around with the mouse, and its position will correspond to the position of your image in 3D space once you click Apply. Changing the position in this manner is a lot of fun. However, you'll need to be more exacting when creating your frames. Below and to the right of the Corel symbol is a small, bent-cornered, rectangular icon. Clicking on this icon will replace the Corel symbol with a set of coordinates, or rotation values. The first controls the rotation about the x-axis, the second about the y-axis and the third about the z-axis. Because I'll be spinning my logo around the y-axis, I'll only need to change the values for number 2.

Before you start to apply the rotation values you should save the first frame. Obviously the first frame doesn't need to be rotated.

Before saving the first frame, though, create a white (or some other color, if you prefer) bounding box around your logo image. You'll need to do this because of the way Corel DRAW! saves an image. When Corel DRAW! saves an image it doesn't keep all of the white space you see around the onscreen representation. Instead, all of that white space is cropped off. It's best to have all of the frames of your animation the same size, and adding the bounding box will assure that this is the case.

Select the Rectangle tool and draw a box around your image. It doesn't have to be much bigger than the image but it should give you a little extra elbowroom.

On the color palette, left-click the color that you want the box to be. This hides your logo, of course. Press CTRL-Page Down until the box moves to the back and your logo is again visible.

To center everything again, marquee-select all of the objects and then select Arrange, Align and Distribute. Place a check mark in the Center of Page box and click OK.

To save the first frame of your animation, choose File, Export. In the Export dialog box, choose a folder in which to store the image, give your file a name, and choose a file type. I like to use the BMP file format, (because it's 24-bit and it's a format most animation programs recognize) and let the animation program handle the palette. I also like to name the frames in sequence. I started this sequence as GD00.BMP.

Click Export to bring up the Bitmap Export dialog box.

Set the colors to 16 Million Colors. Set the Size to Custom and place a checkmark in the Maintain Aspect Ratio box. You can leave the Resolution at anywhere from 72 dpi to 96 dpi because the animation is intended for screen viewing. I always like to set Anti-aliasing to Super-sampling. Once you have entered all of the settings, click OK to save the image.

Now you're ready to rotate the logo.

By adding the bounding box you de-selected the logo. Simply use the Pick tool to re-select the logo.

Back at the Extrude dialog box, click Edit and enter 10 in the 2nd spin control. Click Apply to apply the rotation. You could rotate the logo by a value of 1 rather than 10 each time, and this would result in an extremely smooth animation. However, it would also result in an unacceptably large final file size.

The 2nd frame (see figure 9.4) is ready to be saved. Not so bad, eh?

figure 9.4

Choose File, Export and name the second frame. I named mine GD01.BMP. You'll need to select the Maintain Aspect Ratio and Super-sampling boxes again.

That completes the 2nd frame.

Back at the Export dialog box, click Edit and enter 20 in the 2nd spin control. Export this frame.

Continue on until you hit the value 70. You'll notice that the image is now at 90 degrees (see figure 9.5).

figure 9.5

This occurs because Corel DRAW uses the values -100 to 100 for the rotation values and not, as you might expect, 0-360 degrees.

After saving the frame with the value at 70, start back down using negative values. Start with -60, then -50, etc, until you hit -10. Although, technically, using these values won't spin the logo so that you see the back of it, using these numbers will give your animation the appearance of spinning 360 degrees around the y-axis.

You should now have 14 frames numbering 00 through 13. You're ready to animate your logo!

It's time to fire up your animation program. I'm currently using Ulead's GIF Animator. I like it because it's relatively easy to use-it offers animation and optimization wizards, has good palette control, and accepts a fairly wide range of file formats.

After opening GIF Animator, I created the final animation, which can be seen below. Because the wizards work so well, I simply chose to use all of the defaults.

When the animation program opens, it offers you a chance to use the Animation Wizard. This wizard enables you to Add Images/Videos. From this first dialog box, you can add the images, or frames of your animation. Simply point to the folder where you stored the separate frames. There's a small quirk, though. The frames will not be in sequence unless you follow this simple rule: Choose the last file in the sequence and then, while holding down the shift key, click on the first filename in the sequence. Click OPEN. You can click through the remaining choices by choosing Next each time. The one place you might want to stray from the default is the Frame Duration. I like my animations to run more quickly than the default and usually choose 10/100's of a second rather than the 25/100's. In the last dialog box, choose Finish to close the wizard.

To see how your animation will appear, click on the Start Preview button. You'll see your animation for the first time. Pretty cool, eh?

If everything looks okay, you can choose File, Optimization Wizard. Again, you should be able to just let the wizard do its thing. My final, optimized, spinning logo weighs in at a pretty good 11K. If you're not happy with the final result, re-run the wizard and tweak some of the settings. Some of the biggest savings can be achieved by lowering the color depth. I saved the logo with 64 colors, but I probably could have gone lower without sacrificing too much of the image's quality. You should spend a little time getting to know the animation software. Most of the packages I've tried are fairly easy to use and come with pretty extensive online help.

That's it. I invite you to play around with some text and some different shapes in Corel DRAW!. Try adding a bevel (use the last tab in the Extrude dialog box), or adding a second and third light, etc. Extrude your images to different depths and try filling them with textures as well as solid colors. Pretty soon you'll be wowing the visitors at your web site with all manner of spinning and moving logos and buttons.

figure 9.6

NOTE: If you'd like more information on creating animated GIFs visit our Animated GIF pages.

Photoshop Tricks And Tips

2010-07-29T20:30:00.000-07:00

Photoshop makes it very easy to build an online portfolio.
Fluid Canvas Rotation and File display options. If you’re a Photoshop power user,
or aspiring to be one, check out these in-depth feature spotlights that offer
useful tips and explain important, often overlooked new capabilities of Photoshop CS4.

Sharpen your creative skills and learn from industry experts.

Create extraordinary photos and incredible movies, and use them together in
cinematic slide show.
Make and optimize images for the web more quickly and accurately than ever before.
Custom shapes are vectors so they will never pixelate or lose quality.
Again this is such a handy skill, you’ll end up using it all the time!

Custom tools will be provided for users to create involved image scenarios.
Upload a screen shot of your final result showing the separated components and
filter layer placement.

The different tools here can allow a photographer to do some minor editing
such as the removal of scars, bruises, freckles and eye bags to more drastic
modifications such as the slimming down of the entire body of the model or
providing that bronzed skin look on an actor to meet the needs of the advertising agency.

Photoshop can really work wonders. Photoshop actions are commonly overlooked when
creating designs and artwork, often left only for batch editing photographs.

However this is about to change, with a bit of imagination you can create very
impressive abstract pieces, detailed images which beg for a closer look.

If you’re a Photoshop power user, or aspiring to be one, check out these in-depth
feature spotlights that offer useful tips and explain important,
often overlooked new capabilities of Photoshop .

Different Tutorials For Adobe Photoshop

2010-07-29T20:07:00.000-07:00

Adobe Photoshop is a tool well popular among people with photographic and creative interests. This software can be used by amateurs as well as professional alike. If you are an amateur and new to Adobe Photoshop , a little bit of guidance with the tutorials can make you work like a professional. You can use this program to make your pictures look life-like.

There are lot of things you can do with Adobe Photoshop like color corrections, setting contrasts and sharpness, blur out unwanted things, create collages, and so on.

There are two types of tutorials for Adobe Photoshop. These are the beginner’s tutorials for Adobe Photoshop and the advanced tutorials for Adobe Photoshop. The beginner’s tutorials focus on the basic functions of the product. A beginner can start with this tutorial to understand the tool better. You will get a better understanding of the functions and advantages of the tool over other conventional image editing software programs. The advanced tutorials are focused at people who have a basic understanding of the tool. Using the advanced tutorials you can learn the advanced functions available in the tool like creating collages and keyboard shortcuts. Even if you do not learn the tool with the tutorial completely, you can experiment using the different tools and learn the functionalities.

The tutorials for Adobe Photoshop are available as both hard copy and online versions. If you require a hard copy version of the tutorial, you can request the same from the Adobe Company at the official web site. But if you can get the tutorial from other sources it is much better, you may get it at a reduced price. Most users prefer the online version of the tutorial as it is easy to use, locate, and navigate to topics. The search function in the online tutorials helps you to locate the relevant content in a matter of seconds.

There are many video tutorials for Adobe Photoshop available on the web. Video tutorials are very effective for the purpose as they give you a good visibility of what actually happens. There are video tutorials available for the specific functions. So you can browse the web for the specific functions and view the tutorials. You can find the video tutorials in web sites offering content on Adobe Photoshop or there are people hosting blogs solely for this purpose. If the web sites require you to become a member you can do that as it would let you get newsletters and updates on the tool very often. This will keep you updated on the advancements.

Another good way to learn the Adobe Photoshop is by reading the blogs of people who use the tool. In the blogs they will upload the before and after images also which will give you an idea of the effect. With the specific instructions, you can also try working on your images. These blogs will also have a community of the Adobe Photoshop users. You can interact with them and exchange ideas. You can also ask your doubts and get them cleared from the professionals on the list. There might also be links from where you can download the latest tutorials of the tool for free.

Clone Stamp Tool in Photoshop: Cloning Made Simpler!

2010-07-29T19:56:00.000-07:00

The massive popularity of adult sites has opened up productive windows for adult web site designers worldwide. As a high-on-demand online activity, adult sites also generate heavy revenues – thanks to the curious minds of visitors as well as efforts on adult designers’ side.

Adult designers working on such projects understand the demands of the visitors well, and therefore they make use of the best graphic design programs to make the sites even more lively and traffic-generating.

Adobe’s Photoshop, the flagship software of the firm has been in the graphic designing scenario for years now and the software is still heavily used. With image duplication playing a big role in the adult industry, Photoshop has gained even more popularity. The software comes with a unique feature called the Clone Stamp Tool. As the name suggests, the tool is used to duplicate part of an image. Using it, you can effortlessly copy a portion of an image and reapply it repeatedly in order to cover an unwanted portion of the image. The Clone Stamp Tool of Photoshop can be real handy in providing a whale of options for adult website design. Adult website designers offering adult web design services can enhance as well as modify images using the Clone Stamp Tool by erasing parts or elements from an image of a sexy model that are unwanted.

An adult website designer can easily access the tool by selecting it from the toolbox. He can select the brush size and type from the options bar across the top of the screen. He can also view a menu for extended brush options by clicking the arrow on the upper right corner of the brush palette.

After moving the cursor over the image to the area the adult designer wants to reproduce elsewhere, he needs to hold down the Alt key and click to select the area to clone from. When he releases the mouse, the brush can be seen appearing on the image with crosshairs. Then he needs to click repeatedly or drag the mouse to reproduce the pattern.

What To Expect When You Hire Services For Business Logo Designing

2010-07-29T19:24:00.000-07:00

Business logo designing services play a significant role when it comes to creating competent business logo design. In order to strengthen commercial online presence it is essential for every business to have an efficient business logo to represent their company. You may be aware that a brochure is essential to summarize about your business operations;

in similar manner a logo represents your business and enables users to identify your organization by your uniquely designed company logo. This develops the need of hiring professional logo designers to help you obtain a perfect logo that may represent your business efficiently. While electing a graphic designing company it is essential for you to make sure that the company is well established and has served its client with numerous impressive designs.

The logo designing company that you hire should be able to provide you with uniquely designed logo for your business. Any logo if resembles a logo of some other organization it may lead to copyright issue if the company has registered their logo. So you need to make sure that the business logo design that you will use should not bear resemblance with symbol of another company. There are numerous competent companies that will help design and provide exclusive and unique logo to you.

You can expect your company to offer you a range of designs. This will enable you to choose the best business logo design from the spectrum of attractive logos. However, when you select your favorite logo design you need to make sure that it promotes your business and its operations efficiently. Also important to consider is the format in which you get your logo. You can ask your company to create your logo in vector format so that you can also enlarge your logo to a banner size without influencing its image quality. If you do not find your logo to be satisfactory then you can ask your designer to modify it until you find it suitable for you business.

A professional logo designing company will have expert designers who will be dedicated towards the task of designing your business logo. Hence, you can expect your design to be optimally developed using intricate and advanced designing tools. You can have your logo in different styles, such as Wordmark logo, lettermark logo, brandmark logos and iconic logos. Most companies also use 3D image as their business logo designs. Some people may also use clipart as their logo design; however, it should be known that some clip art logos do not portray professionalism competently.

While selecting a competent graphic designer to design your business logo, most people consider cost and get ready to comprise with the quality of their logo which should be avoided. It should be understood that your business logo creates impression on your customers; hence, it should be well designed and unique. You can also have animated designs as your logo as internet serves as a platform for implementing creativity, even in case of businesses, through its advanced technology. Hence, while you hire a competent company you can expect high quality and distinctive business logo design from your graphic designer.

Do It On Your Own: Freelance Work

2010-07-29T19:17:00.000-07:00

Many talented individuals tend to want to work for themselves rather than for someone else. Some often do have employers but may also do specific work on other related or unrelated projects. The appropriate term for this type of work is called freelance.

Freelance is a self-employed person who practices a profession without a long-term commitment to any particular employer or company. Other terms used include: freelancer and freelance worker.

Common Freelance Fields

Journalism Book Publishing Journal Publishing Computer Programming Graphic Design Consulting Translating Copywriting Editing

Even though a freelancer is not in a long-term commitment, some require clients to sign written contracts, while others may perform work based on verbal agreements.

Payment varies significantly from one freelancer to another. Some prefer to charge either by the hour, day, or per-project basis. Payment arrangements may be made upfront, percentage, or upon completion. Contracts can be drafted to ensure that work and payments are made within a certain amount of time.

Being a freelancer has a few perks to it. Freelancers are given the opportunity to enjoy a greater variety of assignments than in regular employment. They usually have the freedom to choose what work they would prefer doing and their actual work schedule. The experience can lead to a wonderful portfolio of work and the establishment of a network of clients.

The only most important disadvantage of doing freelance work is the uncertainty of projects and income. Other drawbacks include lack of company benefits, paid holidays, and bonuses.

A Quick Guide To Locate The Right Graphic Designer

2010-07-29T19:10:00.000-07:00

With a plethora of website designing agencies operating in the market, it often becomes difficult to make a choice of the best graphic designer agency out of the others available. If you too are caught in a situation as this, you can look for the under-mentioned points and find an appropriate web designer for yourself.

A strong portfolio and experience in designing is the foremost and the primary factor that enables you to trust the services of a certain company or website. I am not denying the possibility of finding a web graphic designer who is capable of exceptionally brilliant work despite him being inexperienced and new in this field. But experienced players ascertain quality services with the most efficient execution. And it relieves your worries about the work.

You can also come to know about the quality of the services of a certain graphic designer by reading the testimonials of his clients and their feedback on the kind of work that is delivered by him. You can send in an email at the various testimonial addresses given on the website and check if they exist in real or if it is a mere gimmick to gain the trust of the clients.

You can check if they have a logo design process which is capable to produce a logo in 48 hours. Such logo factories should be discouraged. A professional web designer will at least take 4-6 days in coming up with an idea and crafting a logo based on your suggestions rather than producing it in the factories on a mass level.

A good custom web designer or such agencies also win various prestigious awards that again stand witness to their good work. You can check out this detail with them as well.

You need to know about the strength of their portfolios. There are many websites which are quick to produce the fictional clients and their logos or web designs. Don’t let them befool you.

Then the price is one of the most important aspects of the deal. If you are being offered the best services at a cost effective package, you will surely like to grab it.