Helping You Rock Out Your Site Like A Rockstar!

A web developer’s job is often confused with that of a web designer’s; while both pertain to the creation of a website, the former deal with aspects that lie under the hood while the latter is more about the visual department and the way the website looks. You could say that development is the nuts of bolts of a website while design is its beautified exterior that serves as the user interface. In fact, most people don’t understand that web design starts with web development and that the two aspects are inter-related. If you’re an aspiring web developer, here are a few mistakes that you must be careful not to make over the course of your career:

• Trying to do it all: While web developers may double as web designers at times, it’s best to focus only on one part of the creation aspect. Focus on improving your skills as a developer rather than trying to master all creation skills at once. If you’re a freelance developer who is hired by clients for the whole package, hire the services of a designer who you can work with. This way, you can concentrate on your responsibility and the designers on theirs. Besides, you stand to gain when they send you the development work for sites they’ve been asked to design, so it works out to both your advantage.
• Not understanding what the client needs: Misunderstandings tend to happen when developers don’t understand what the client needs for their website. While they may have an idea of the design they want, most clients are not familiar with their web development needs. It’s up to the developer to find out the purpose of the site and liaise with an employee who understands technology. Also, if a middle-man is involved (some people outsource their web design and development services to outside agencies), it’s the developer’s job to ensure that the client’s instructions are not lost in translation. When you go ahead without understanding what your client wants, it involves a lot of wasted time and effort.
• Ignoring the power of cooperation and teamwork: There are various aspects to a complete and comprehensive web design, and unless all these aspects integrate in the right amount and at the right time, the design is not satisfactory. There are some things that must be done before others and others that can be done in parallel. The team working on the design is responsible for planning the various stages of the design and then executing the plan in the least time possible and with the least effort. When web developers don’t cooperate with the rest of the team, they compromise the entire project. Teamwork is essential, and web designers and developers need to be team players to come up with an exceptional design.

This tutorial is designed to help you get an idea how to vector. For this tutorial, the photo to the bottom of this article will be the one that will be referenced throughout the tutorial. The same techniques can be used for other pictures and even freehand vector images. Although I am going to be using Paint Shop Pro, these same things can be done in Photoshop and Illustrator. Also, because some of the images are quite large, they will be resized, so you will have to right click and open in a new window or tab to see the larger version. Some images may only be opened in a new window to view.

1. Choose an image. As said, for this tutorial, you can download the image HERE. You will have to right click and open it in a new window before saving it to your own computer.

2. Posterize the image. This will help you be able to differentiate which layer is which. In this case, for Paint Shop Pro, go to Edit> Artistic Effects> Posterize. For the best layer separation in this particular photo of a lily, use 10.

3. For this image, you can either use your own colors or the ones in your image. For this tutorial I am using ones closest to what the image has already. To get the colors for your first layer, choose the dropper tool and click in the color that you will start with. My suggestion is to pick a starting place that will be best, like a base color. When I create vectors, I start with a base and then continue with my lighter colors before going back for the darker shades. It makes less work as some vectors are difficult and require that you move some layers around.

4. You will need to zoom in on the image to help you focus on outlining. Use the pen tool and with your first color, outline the flower. Using 1.0 width. You do not want it to be a wide line.

5. Once done with the first layer, put that on invisible in your layer toggle area. With the next layer, you will outline the next lighter color from your base color. Make sure to click on New Drawing Object to start your next layer.

6. ( Second Layer Screenshot |First 2 Layers | Three Layers | Almost done)Repeat each layer until you get to the lightest layer. You may improvise with more layers if you like a smoother vector. When the light layers are done, touch up with the dark layers.

7. Once all layers are completed, toggle all layers to be visible to check work. Make appropriate changes until satisfied. Delete the background rastor image to leave background transparent. You can make your own background if you want.

8. Save in raw form so you can make later alterations if needed. To save for use, merge only the layers visible. Do not merge all or you will have a white background.

[This is a guest post by Lawerence Hall. Lawerence Hall is working as community manager at Go-gulf, a Dubai based web design company that
provides affordable web design and development solutions in the Middle East. ]

Choosing the right color scheme is vital in successful web design. Colors express feelings while bringing attention to areas of interest even before imagery or text begins speaking to a user. The goal here will be to understand what to use and when to use it, that’s where color theory comes in.

Color theory is the set of rules that say which colors work well together and why. Following these rules during your color selection can improve the efficiency of color in design. Here I’ve outlined some popular tools for color selection including color schemers, color palette resources and a few general color theory information sites below.

Kuler : Color Scheme Tool from Adobe

Kuler is Adobe’s free online color schemer. Kuler makes color exploration educational and social. Themes can be generated from scratch or from uploaded images. Using the community functions of the site can provide inspiration. Many user-generated themes are posted and rated here, waiting to be downloaded directly into adobe programs.

ColorsOnTheWeb : Color Wizard Color Scheme Generator

The Color Wizard is a great tool with many options. The greatest function it may have over the others is a quick way to check color variations. When you select the main color you want to work with, there are three boxes that provide various color tones by hue, saturation, and tint. This is a great way to experiment with fine toning your color selection quickly.

Color Scheme Generator 3

This easy to use tool has both a color wheel, and will generate color palettes. It allows for selection of many color theory algorithms and is easy for anyone to understand. It will also has settings to display the chosen color palette for various states of color blindness. The exports are plentiful with options for GIMP, text, HTML, Photoshop, and xml.

Color Hunter

Color Hunter is a nice tool for designing a scheme around a specific picture. After you upload a url or picture file the tool returns a light and a dark set of colors. If you create a login to the site you can save, tag, and rate schemes that you create for other users. Also schemes can be rated to see which ones are the most popular.

WebsiteTips : Colour Scheme Chooser

The SitePro Color Scheme Chooser users sliders instead of a color wheel to aid in color selection. This may be more familiar to people not accustomed to advanced design programs. It also has a drop down menu with seven values to choose from. This is a nice tool to perform quick color scheming tasks.

ColorSpire : Create Website Color Schemes

ColorSpire is a simple scheming tool. It uses a color wheel for color selection on the palette. Instead of working with known color theories it uses the selected base color and users can adjust for brighter, darker, saturation, or just make a random palette. It won’t help sort out usability issues like other tools I’ve listed but its quick and intuitive.

ColorBlender

The Color Blender is another simplified tool. It develops a 6 color pallete based on the main color you select from the slider. Like some of the tools here it includes functions to export pallete files to photoshop or illustrator. They can also be sent by email.

ColorDB

ColorDB is a very robust tool. Upon selecting the base color, variations and harmonies are all shown at the same time. Amongst the harmonies are complimentary, opposite, neutral, shades, split opposite, split complimentary, triadic and tetradic, which you can use to build color schemes from. There is also a color map and memory functions so that you can return to the site later and learn more of its many many functions.

ColorSchemer

The online ColorSchemer is an extremely simplified version of the popular desktop ColorSchemer. Once you simply pick a color it will show you 16 matching colors on the palette. Great way to get a quick look at some possible color combinations.

If any of the above terminology went over your head. Or you if just couldn’t figure out some of the terms and need a good root understanding of how color theory works check out the following sites.

Color Worqx
The Color Worqx website provides a step-by-step tutorial on color theory. It starts from the very basics and builds to very complex ideologies involving color that transcend the boundaries of just web design.

Color Theory – Wikipedia
This is a basic article on the Wikipedia on color theory. It is not as in-depth as the one by Color Worqx, but that makes it a great resource for picking up a quick overview on color theory.

Do you know any more online resources for color scheme generators? Do you use them?

Making your own emoticons (smilies) involves using your creativity. However, in this lesson, you are going to be give a zip file filled with the basic smilies that I use for mine which I like to say are considered cute anime smiley templates. They are only the eyes and mouth and whatever comes with it, like for the idea emoticon, there is a lightbulb, and the kiss one, the eyes are hearts.

Your smilies when finished will have to be saved in GIF format. If you have a animation program and want to animate some in your own way, you can do so.

I am using Paint Shop Pro for this tutorial, but the same concepts can be applied in Photoshop as well as other graphic editor programs too.

Download Emotion Bases (for the smiley faces I use) – Emoticon Bases (210)

Step 1. First off, you have to decide what size you want your smilies to be. You do not want them too large and sometimes if they are too small, you are limiting what you can do with the image.

For a decent size, we will go with the 21 (wide) x 17(tall) pixel smilies that I use as a base for the creative cute smilies I have like the alien, bunny, panda, and bear sets. So, first, we work with a blank template of 21 x 17 that has a background color of #FFC0FF.

Step 2. Pick a color and with your pen tool, you adjust it to be 1 pixel (or in Paint Shop Pro, Size 1. Make sure your image is large as you will be able to see your small pixels as you make them. I used 4000% when making mine. Using the blank template above, you outline what you want your emoticon shape to be. In the case of this tutorial, the smiley I am making will be an ellipse.

Make the shape as smooth as possible. It may be hard to tell when you have the image zoomed in, so you can play around and zoom out to work with your image.

Step 3. Part A. Fill the inside of your emoticon with a lighter color. If you do not want any style, you can simply fill it with one color. If you want an effect to make it seem like it has depth, you with have to use more than one color. To have just one color, you can make it like this:

As you can tell, there are no effects and the image seems flat. For depth, try Part B.

Step 3. Part B. To make more depth in your smiley, you will have to apply a vector-like technique. A vector is a shape and and in make a graphic, we apply the different shapes and colors to make the depth of the object appear.

Of course, when working with the emoticons, especially this one, we want the colors to be somewhat similar, but as they are applied, next layer on top is smaller and also a lighter color than the previous.

Step 4. Now that the main base is filled, we will be making the simple smile emoticon. As provided, the smile base I use is in the zip file with the other bases. Of course, if you would like your smile to be a bit different, you can make your own. The templates are for anyone’s use.

Make sure your background is the same as the template background of #FFC0FF. Copy the smile and paste as a transparent layer onto the main emoticon template that you just completed.

Step 5. Make your image transparent. With your background still set at #FFC0FF, in your graphic editor you should be able to make your image transparent. In Paint Shop Pro, usually, you can press the keys Ctrl+Shift+V . You will get a few windows that will direct you through this. Once you have clicked OK, you can press the keys Ctrl+V to view your transparent image and then save it. You can right click on the following to make sure you are selecting the right fields in the command prompts of the graphic editor. Screenshot 1 , Screenshot 2

Your image should be finished. Of course, as mentioned, you can make your emoticons any shape, color or size, so have fun!

Have you tried this tutorial? Do you make your own smilies?

This tutorial is on how to make a guitar vexel. When you vector or even vexel, it is about your personal preference. You can put more layers to make your guitar look smooth or more realistic, or be very basic with using a few layers.

We are going to use a base image. In the case of this tutorial, the original image came from Fender. Click to download image that we will be using as a base. The concepts of this tutorial can be used in Photoship, Illustrator, or Paint Shop Pro.

You will be using the pen tool ( ) and set it similar to . You may us any color you wish for your guitar. For this tutorial I am using a blue color, but as you can see in the current layout for Blondish.net, I have a pink one.

Because the original image is huge, I will include each result as a link for you to click to see how you are doing.

1. With your image, you will start with the body of the guitar. Right click to open in a new window – [1]

2. We want to give our guitar a little depth so we will give it some shading and highlighting. Use the pen tool and make sure to create a new layer for each. The image to the side is an example of individual layers that make up the vector. Right click to open in a new window – [2] [3]

3. Next, we will make the shape of the neck for the guitar. Right click to open in a new window – [5]

4. Add some of the features to the guitar like the whammy bar to your guitar. Right click to open in a new window – [6]

From this step on, you are basically adding more details to your guitar, like knobs, strings, and tuning features. Right click to open in a new window [7] [8] [9] [10] [11] [12]

A lot of the concept behind vectoring is making an image using shapes. With your imagination, you can even make your own vector and vexel images without a base to use. Happy vexeling!

I thought after I was reading a few websites that I would address some common mistakes I see in web design layouts. I am not too much of a stickler about being valid, but more on the design issues as those are what people catch.

1. Margins. I cannot express the times I have been to websites and the margins between images, the browser itself, or other elements within the layout are either too far apart, over lapping, or way too close. Whitespacing is obviously an art in itself.

2. Bulky site. Too many graphics or too many large graphics.

3. Colors. Some sites, the colors are absolutely atrocious. For those who are unsure of what looks great together, try Colourlovers.com for some great palettes.

4. Too Simple of a design. Sometimes simplicity is great, but too simple and it can detract from the reader’s experience. Remember, a website is like a business card. Sometimes having an interesting one will stick in your reader’s mind more than others that they have gone to.

5. Inability to navigate easily. Some type of navigation should be clearly placed. With WordPress users, WP-PageNavi and Yoast Breadcrumbs are great tools to incorporate into layouts. They allow people to always know where they are on the site and can find a way back.

6. Too many scripts. Like images, too many scripts operating at the same time can be a real drag on load time. Make sure to choose ones you believe are really necessary. This goes for plugins as well.

7. Too many advertisements. Monetizing a site is a great way to make some cash, but too many ads, and your visitors might feel spammed. Your visitors are on your site for the content, not to be blasted by your advertisements.

8. Inconsistent fonts. While making different sections have different fonts, too many can detract from the layout. Keep it consistent and to no more than a couple choices.

9. Header tags are wonky. There are times when I have gone to websites and h1 tags are huge as well as h2, h3, and so on. Keep these varied and tasteful. Also, try not to vary the, no text tranform, uppercase and lowercase on text transforming in your CSS. Plan to choose one.

10. Not a memorable main graphic. Whether it is a logo or a special image, if it is too small, too plain, or sub par on design, you might not be putting your best foot forward. You do not want your logo too small or where next to it is a huge banner. Your visitors may get the idea that your banner is more important than you trying to brand yourself properly.

What mistakes do you often see when you visit websites?

If you freelance, you may have done the job bidding sites. For example, if you list that you work $20 per hour, then do not bid for a job any less what you are worth. However, in the same breath, do not overcharge.

If you are conducting business with a client, remember to get the agreement on some type of contract whether a digital email, or an actual signed paper by both parties. It is also important to work out a payment method whether you require a non-refundable deposit, barter in exchange for a service, or require immediate payment at the end of the contract. Also, always try to get credit for your work. That text or small graphic defining that you completed the project is proof that you did that website and could help lead to more jobs.

Here are some guidelines to consider when pricing your work:

1. What does the job entail? What kind of graphics and design work needs to be done?

2. How much time will it take for you to complete a project? Sometimes knowing ahead of time how many pages that you need to design and how much time it takes can allow you to give a quick price.

3. Does the client need the project done within a certain time? In this case, make sure you can meet the scheduled agreement before agreeing and consider how many hours you will probably designate to complete that project on time.

4. What is your experience? Can you code in php, html, xhtml? Can you design on several graphic programs? The more experience you have, you are entitled to price your projects to reflect your talent. Also, compare to other web designers. You can look online and find out pricing to determine what you should be charging for your work.

5. Are you asked to possibly be the site maintainer after the large project. Ideally, you should be paid by the hour. Remember to get this down in your original contract. You can phrase it like: “Site Maintenance done outside the contract will be done on an hourly fee basis.”

In the end, it is your work, so be honest, knowledgeable, and overall, proud. If you are, then your clients will probably even recommend you to others for more work.

What other ways do you decide what to charge clients?

The art of vexeling and vectoring are interesting as each layer created goes toward the whole look of an image. It takes careful attention to the layering, and certain techniques to make an image that draws awe from others. I have gone through DeviantArt carefully and found several amazing tutorials for those who have never vexeled, or those who would like to brush up on their techniques. Some of these are Photoshop tutorials and others are for Illustrator. However, from experience, you can use the tutorials toward either program, or even the concepts to other graphic editors.

Please note that this form of art takes time and patience. I have been known to work on a vexel for over 7 hours, just to give an example.

Vexel Eye Walkthrough-Tutorial by binjoo

VectorTutorial for Illustrator by ChewedKandi

Urban Propaganda How-To by domnx

Real Photoshop Vector Tutorial by donbenni

Basic Vexel Tutorial by photoshop-tutorials

Silhouette Vexel Tutorial by shesta713

Vexel Tutorial – Hair by VAngelLJ

Do any of these tutorials look interesting enough to try?