Free Power Boards: header design

We are going to inaugurate a section that i think it might be interesting, it’s about real cases of orders we did in our beloved SOSFactory.

In this case we are going to see the design we did for the header of Free Power Boards, a content management system for forums based in PHPbb which is about to launch it’s third version. They ordered us to created their new header design.

Click in the image to see the original design.

The first thing you can see, is that it’s a funny design, but with poor graphic quality. The penguin designs are clipart, which means it’s not an exclusive design, the logo is pretty basic and the colors aren’t ugly, but they could be better.

The first thing the client asked us to do, was the design of a mascot and the typical button encouraging us to register in their website, we’ll see that when you work, a good client can turn into a really excellent one . At first, the work was estimated in 300US$.

After a while chatting, we got to the conclusion that the mascot would be a llama. At first, i had some doubts about the choice of the animal… but the client orders, you know. When the first sketch was in my hands, it was clear that the animal had a lot of potential, take a look:

This design was funny but something was missing, we thought… “Since Free Power Boards V3 is a lot about customization, we really want to show just how customizable it is. Having the mascots actually *building* the layout would be great”. Said and done:

This started to look funny. Our character would be painting the header with new colors, more vibrant. We just had to do two corrections:

1. You can see that the character right now is a normal llama. We decided to give him a corporative uniform.
2. Another little detail; look at the painting cans, anybody would say that our workers (company image) are a little bit negligent… we aren’t transmiting the addecuate message.

Our characters would look like this after the corrections.

We did two designs of the same character to give our client more options, but they liked it so much that they bought both designs, we simply changed the face of the second one to make it a bit different. The job raised to 500US$, in exchange we did a new version of their logo.

Here you can see the final lines for both mascots.

Let’s see the color now. In the first place, we asked for a final version of the new design, to make sure the colors of our mascots would look good in the new background:

Click in the image to see the new design.

We were doing some color tests and it turned out that the colors that better adapted to orange were fresh tones, here you can see the full color mascots:

In this point of the order we thought it would be much better to add another llama to hold the “Join Free” button, we offered to do it for free. From the design we already had, we did some minor modifications of the face and color, and it looked like this:

Sometimes, when the design has so many possibilities, i prefer to do some extra little work so the design doesn’t seem incomplete, as a reward we will have a new super design in our portfolio, and who knows what else… Ok, let’s see the header, the logo consisted in a metallic effect with a modern font, technological and blunt but fun:

The client was very happy with the design but he thought the text in the right side should dissapear. We gave him several options and he ended up ordering a new character. This time it would be something more comical, we thought in adding a new llama in counterpoint from the rest, bigger, clumsy and very funny. It’s mission will consist in cleaning the “V3″ of our logo… here you have the final version of the character:

And that is how we created this wonderfull header, at the end the design was 700US$. The client ended up winning because he got a good disscount, and we too because we enjoyed a lot this work, and we did various sales without having to change customers and on top of that, we have a great addition for our portfolio.

As you can see, when you work well, a good client can turn into an excellent one

We are actually working in some banners, he hope this new relationship will last a long while.

You could check out Free Power Boards website to see the live design. Thanks a lot to Chris, CEO of Free Power Boards for giving me permission to write this article.

Related Post:

1. Free: Vectors, Icons, logos…
2. Linerider mascot design, the true story
3. Free mascot design (new mascot added)

Freelancing in 7 steps

In this article we are going to talk about what you need to start your freelance designer job without dying in the process. Of course your designs must have a good quality, and you must want to do this job perfectly… but what else do you need?

As you can see, this is a guide; i will explain more deeply every point, specially the ones about the domain name choice and the hosting company, and online promotion.

1. Learn English

This is essential, 99.9% of my clients speak english, they are generally from United States, England or Australia. You will also get to Germany and France. Don’t expect to live from the Spanish or Southamerican market, design is badly valued there.

2. Create a Paypal account

I would never start designing without some payment in advance, so we need a quick payment method, otherwise you can loose clients that need something quick, the majority.

Paypal is indispensable if you don’t want people to cheat you; you can recieve instant payments through email, besides it’s free and easy to use. If your client doesn’t have an account, it’s easy to register and pay with a credit card, fees aren’t high and transfers to your bank take about 3-4 days; if you use a personal account you save all the fees but you have limits at the time of using the money, it’s better to use a business or premier account. This way, when you ask for the payment in advance there wont be any excuses. The problem with Paypal is that it’s not available in every country, specially Southamerican ones.

You can also use Epassporte, it’s similar but less people use it and it’s worst for Europe (it costs 50US$ to transfer your payments to your bank).

Another alternative is Western Union; the client deposits to your name and gives you a code, after that you can request your money in any Western Union office. This system is pretty fast, but it can take a couple of days.

The rest of the alternatives (check, money order, bank transfer…) are a lot slower, so we will have the same time problem.

3. Create a 5 stars portfolio

If you don’t have any samples of your job, you can’t show how good you are.

Nobody will pay you a fortune without a good portfolio, try to pick works where you can show off; your priority now shouldn’t be the money, but building a quality portfolio. If you work hard, in a couple of years you will have a great portfolio and you will be able to choose more profitable clients… if what you need is quick money, i’m sorry pal, you are in the wrong business.

I started charging 15US$ per design, now i don’t charge less than 250US$ per logo or mascot design.

At first you must be very versatile, the more things you know how to do, you will have better a chance to get clients: logo design, web design, graphic design, comics, illustrations… anything. Besides, if you offer all this, more than one client that came for a logo will also order a website.

4. Create a Website

It’s useless to have a great portfolio if nobody can see it… if you are not in the Internet you don’t exist.

You have to design a website, it doesn’t have to be anything very advanced at first, a site in html with a gallery of your work and your email is enough. While you grow you should make it better.

5. Register a domain name

Now we need a domain name (for example: www.sosfactory.com); do not register it through hosting companies, many of them offer it free but sometimes that’s a cheat because they don’t give you a total freedom to use it, specially if you want to change to a different hosting company.

It’s better to spend from 8 to 20US$ and register it yourself with godaddy or eurodns or any other that you know that let’s you manage it completely. It’s also important to register a .com, because they are better valued.

Of course you have to think of a good name, now it’s a good time for it… don’t choose long names or difficult to write, or that sound bad in english.

6. Hire hosting services

Hosting is the space where you host your website to let everybody visit it.

I have all my sites hosted in Downtownhost, they are a young business, not overcrowded and with an excellent technical service, now that you are staring if there is anything you need, is help with your doubts and problems… forget about unlimited bandwidth or terabytes of hard drive.

I have been with very bad hosting companies and overcrowded like Midphase that give you a free domain but they hide in clauses that nobody knows where they are (not even their own employees); this way they don’t let you go when you discover the horrible service they offer, or shameless hosting companies like HostingLMI that kept their clients more than 4 months without any support but charging them and also making new clients, due to problems in the company’s address.

7. Promote yourself

Well, after you have everything we said above, only the more difficult part is left :), promotion.

It’s better if a lot of people see your website, you never know who can visit it, prote yourself in art communities, forums, blogs… my biggest client until now, Funrise Toy Corp, came through an art community named Deviantart… so go there.

As you can see, the more visits, the better, but it’s also important that your traffic is directed to possible clients. Go to designers forums where you can offer you work, my first source is WHT, here there are persons with a lot of money and thousands of websites that need designs.

It’s good to learn something about Search engine optimization (google, yahoo, msn…). It basically consists in getting quality links to your website, this way you will gain relevance for certain search terms and your site will appear in the first google results.

Conclusion

Being a freelance designer is not easy, you need quality, to be versatile, quickness, and intelligence to be seen where the possible clients are.

To be able to live from this, i mean to have stable clients that appreciate you, i think you will need a minimum of 2 years… you know… you want Fame?.

Related Post:

1. How to create a portfolio to sale
2. 12 freelancing lessons for 2008

Free image banks

Every designer needs to use great photographs to emphasize its design, if you are a begginer photographer and you are interested in making some extra money this can help, here you have a couple of photo banks, normally all of them have a free material section, for others you have to pay a very affordable price.

1. 123rf: this one offers 1€ photos (web), 2€ (printing) and 3€ in high resolution, but there is also a free photos section. Photos look very professional. The site is very nice and also easy to use. Very recommendable.
2. SXC: It’s completely free, you only need to register and start downloading high resolution photographs. The quality of the photos varies, there are some professional and others not so much. The site is very nice and also easy to use; you have tutorials and blogs to spend some time.
3. Dreamstime: similar to 123rf but i find it a bit harder to browse, it needs some order.
4. Microstockphoto: more of the same.
5. Fotolia: more…
6. Inmagine: more…
7. Textureking: this one is a texture photographs bank, if you are a 3D artist this site is great for you.
8. Texturewarehouse: another textures site.
9. Spacetelescope: a lot of space photos. You can download 100 photos in one compressed file. Curious and completely free.

Don’t forget to read the license of each photo, some are free for any use, others just for personal use, and other for commercial use… read them well, you don’t want any trouble

Here you have some more, i didn’t have time to look at these ones, if you test some you like, put it in the comments and i will watch it more thoroughly.

Related Post:

1. Free: Vectors, Icons, logos…
2. Free mascot design (new mascot added)
3. Free Power Boards: header design

Get a super girlfriend… with Photoshop

Why spending thousands of Dollars for a photographic session in a studio with a top model when you have your neighbour, a digital camera and Photoshop?
Here you have a little work i did a couple of days ago.

This is the original photo:

What do you think about the neighbour? The girl is not a beauty but it has potencial. Now i’ll show you what you have to do:

1. We will start with a more sensual look. Let’s sepparate her eyes, then retouch the eyelids, and put some hair in the eyebrows.
2. Now we will delete the spots on her face, and then a lifting for the wrinkles
3. After that lift her nose and design a sensual mouth
4. Retouch the head shape, and do a hair treatment.
5. Remove the neck wrinkles and also fix it a bit
6. Also retouch the breasts
7. Let’s cover her armpits
8. A little makeup… and now we have the neighbour we always wanted

Here you have the step by step animation to see that “SoS” doesn’t cheat (patience, it’s 2 mb):

Too bad that back into reality the neighbour is not like that

Related Post:

1. SuperIcon V3: Thumbnails for Photoshop and Illustrator files
2. Advantages of the Freelance worker
3. About

Extract comic lineart

This is a Photoshop action (that is to say a set of automated commands) to extract the lines of your black and white drawings. The idea of having the lines in onw layer and adding the colors in other layers below, this works like some kind of guide.

There are two procedures to color comics; the first one is putting the layer where you have the lines in multiply mode and on top of all color layers (this way the white color transforms in transparent, letting the colors be seen, but you can still see black). And the second one has an advantage… by extracting literally the lines off the drawing, you can color them (the lines) very easily.

Instructions to install the action:

1. Download the action to your hard drive and decompress it.
2. Save the file in: C:\Program files\Adobe\Adobe Photoshop CS3\Presets\Actions
3. Open your black and white drawing in Photoshop.
4. In the actions panel an action called “extract lines” will appear, click on it to load it.
5. A folder will appear, click to expand it and click “extract lines”.
6. Press play and you are done (if a message appears click OK).

If the action doesn’t appear on the list, click “load action” and search for it until you find it, the rest will be the same.

Here you can see an example: Photoshop digital inking

Related Post:

1. Videotutorial: digital inking with Photoshop
2. SOSFactory is looking for illustrators
3. Advanced digital drawing (Photoshop Videotutorial)

Photoshop: PSD 75% lighter

Photoshop seems to me like a marvellous software, in my opinion isby far the best out there… is the most powerful, versatile, the greatest. But it still has a problem since previous versions, the weight of the files is huge, we could think that for the information it has the size is reazonable but…

Did you know that we can reduce the weight of the PSD up to 75%?

This is something to think about, if we can reduce so much the information in a PSD it would be because this format is not very optimized, right?. Most people think that’s why there are files with compression, TIFF or JPG… but they agree that keeping the original files in PSD format is much more comfortable than working with TIFF (i don’t think we need to compare it with JPG).

Well, how can we do this? Something as simple as hiding the layers before saving the file, if after that you compress it with Winrar or Winzip you will save a lot more.

Here you have the information of the experiment:

1. Normal PSD: 49,2 MB
2. PSD saved with the hidden layers: 38,9 MB
3. PSD saved with the hidden layers and zipped: 11,5 MB

The new version of Photoshop CS3 is out and we still have the same problem… we will have to wait a little more. Now, if you have to send a PSD via ftp or email… you have no choise than doing this.

Related Post:

1. Vectorial illustration with Illustrator
2. Advanced digital drawing (Photoshop Videotutorial)
3. Videotutorial: digital inking with Photoshop

Color scheme selector

This post is to share with you a great tool I found browsing the net, I really think is great… its a online aplication developed by Adobe genius, its a color scheme selector specially useful for web or graphic designers.

I think its great because its useful, but take a look to the design of the site, good eh?.

We can create our color schemes using different rules: analogous, monochromatic, complemetary, triad… you can share your creations with the rest of users too.

Ok, here you can visit KULER

Related Post:

1. Mascot design for websites
2. Videotutorial: digital color with Photoshop
3. Extract comic lineart

Photoshop videotutorial: Save for web

Click on the imagen if you want to see the Photoshop videotutorial  to learn how to save for the web, the goal is saving with the best quality but the smaller size

I have use 2 characters like examples, the one Sosfactory designed for realvideosite (mascot with gradient and lot of colors) and the main character of relaunch of POG games, designed by Sosfactory for Funrise Toy Corp .

Which is the file format I should use for the web? ¿JPG o GIF?

This is the proccess:

1. Save for web in Photoshop “ARCHIVE” menu
2. Choice JPG with 60% (for web we really dont need more quality)
3. We see how many kb´s have the image
4. Then we choice GIF and we go down with the number of colors until it starts to looks bad. 
5. See how many kb´s it is.
6. Depending on the weight of the file we choice our file format.

If you really want to save size when designing for web, the best is using Pixel art, notice we use just a few colors, so the file is really light… here is 2 examples:

PIXELART saved as Gif 64 colors = 8.976 kb

Standard image with JPG 60% quality=18.83kb

Ok, so you already have no excuses

 NOTE: the video textboxes are in spanish, this tutorial is not too complex so I think everybody will understand it. In the future I promise all the videos will be in english… sorry too much work doing 2 blogs (spanish and english) for just me.

Related Post:

1. Advanced digital drawing (Photoshop Videotutorial)
2. Extract comic lineart
3. Vectorizing with Silhouette

Designing for customers

In this article we are going to skip the designing tools and focus in the procedure we follow in SOSFactory when creating a Design by Order (for example a mascot design). We do everything via internet, communication, payment, sending files… this is our business model, the one we will be talking about here.

Contacting the Client

Ok, if you don’t have the luck of being contacted, the first thing to do would be contacting the client (of course that you can’t send SPAM), if you notice someone needs a design send him a personalized email, explining how do you know what he needs and offering gently your services. A good idea is to hire someone you trust to be a salesman.

In our case clients generally contact us through our contact form.

I estimate that every 1000 visits to SOSFactory i recive 5 emails asking for prices, of those, only 1 keeps going. This presuming i have a highly oriented traffic and a correct portfolio; if i lowered the prices i’d certainly get more clients, but i’d also have to work more… which in a long term would affect quality, and we don’t want this, right?.

This would be the normal email i always send whe i’m contacted:

“Hello ****, my name is Sergio Ordoñez from www.sosfactory.com

Normally we charge about 200-300US$ for a mascot design and 150-200US$ for a logo design, if you are interested in both we could offer you a discount. In the case of the mascots, every extra pose would
be 200US$.

I would need to know more details before giving you an estimate… delivery date, file format, estimate price, examples of what you like, number of designs you would need…

To start recieving sketches we would need a payment in advance, 30-50% of the total would be enough, through Paypal to *****

Please, let me know more details.

Yours faithfully.

Sergio Ordóñez
www.sosfactory.net”

Some things to keep in mind:

1. It’s always better to say an interval of money (For example: 200-300US$), that way you’ll have a negociation margin.
2. Normally, in the first contact they’ll give you poor information, so don’t risk to give estimates… it’s always better to ask for more information before.
3. Offer extra services, like in this case i offer the logo, if you can make more than one sell it’d be bad to loose the opportunity, right?
4. Always ask for some payment in advance… it’s the golden test, if he pays that, it’ll pay the rest. In 3 years nobody remained owing me money.
5. If you are working through internet, you need to get a Paypal account, it’s the most extended system in payments.

Negociating the Order

Sometimes the client wont answer you back, in this case i would wait a couple of days before sending a reminder, if it doesn’t answer… i’m sorry pal, you lost a client.

Let assume he writes back, now our work consists in getting that payment in advance, how do we make the client decide? This are our strong points:

1. Refund policy: we make him understand that he can abandone the project in any moment, and he will get all his money back. As i said in other post, in 3 years this happened to me only twice.
2. Unlimited revisions: we do all nesesary revisions, but when a step of the project is approved, we can’t go back. If we have to you should charge extra ***US$/h for the corrections.
3. Unlimited sketches: we start with 1 sketch, if he doesn’t like it we make some corrections… in not, a new concept, and you keep this untill you both get tired (make sure to clarify you have the right to reject the project, and then you give their money back and you keep the designs). This way you save a lot of time, normally at the 1st or 2nd we get the approval.
4. Revision of the stages: we go on only when the client approves every stage. For mascots it would be sketch, final lines, color and final revisions.
5. Reproduction rights: we give unlimited rights.
6. High resolution files: it’s included in the price.
7. Time: this is to agree with the client. If the time is tightened and you have pending works i’d charge 30-50% more.
8. FAQ: it’s always good to make a list of frequently asked questions and send it to the client, that way he might have many doubts answered.

Briefing

Well, we have obtained the payment in advance, now we have to pick up the necesary information to create the design. The best thing to do here is to create a Briefing.

Organization of Tasks

In SOSFactory we divide tasks, that way everyone does what it knows how to do best and quicker, we have various roles: sketcher, inker, colorist and designer; everything under the supervision of an art director, in this case, me. The advantages of this specialization are mainly three:

1. Rapidity: if you are quicker = lower costs = more revenue. A good sketcher saves time because it has a lot more experience, so it can draw faster, obviously, but on the other hand saves more time on corrections and extra concepts because he knows how to draw for an order, the beggines draws for itself.
2. Quality: if a sketcher invests 8 hours a day drawing it will be great at it, but it’s impossible for him to be a great colorist too. That’s why we have the colorist, that invests his 8 daily hours coloring. This way we have a great sketcher, a great colorist and also a great designer.
3. By going step by step, and asking for our clients approval, we are certain on what we are doing. If after that we have to make changes, it goes in our clients account.

After the briefing was revised, the art director communicates with the sketcher and designer out clients necesities, this is something dynamic, the ideas come from both sides, at the end the art director takes the appropiate desition.

First sketches

After we decide what we are going to do, the sketcher makes a couple of sketches, which will be given to the art director and he will show it to the client which will tell him what corrections to do or suggests some new concepts.

Notice that the sketcher only spends his time in drawing, the art director is in charge of the talking to the client and also of coordinating the whole project.

Final lines

After the client approves the sketches, we handle it to the inker (or the sketcher depending on the work load) to make the final versions of the mascot. Then we show it again to the client to approve it before starting with the color.

Color

Now the colorist makes his job in the same way as the sketcher or the inker. When the design is ready he handles it to the designer who designs the logo and integrates the mascot (in the case its hired).

Payment and files delivery

During the whole process we only send low resolution JPG images, when the client is satisfied with the result we ask him to send the rest of the payment, and then we send the high resolution files via email of FTP.

In SOSFactory, we are all freelance, so every person involved in the process takes it’s part. If something fails (Example: the client doesn’t pay or is delayed in the payment) i’m responsible of the payments for the rest of the team.

It’s always good to thank the client for it’s collaboration, ask for future orders or for his opinion about the process. It’s said that a happy client recommends you to 3 possible clients, while a bad one will talk about you with 30 possible clients, so treat them well.

Extras

If you can make your client put a link on their site to your web, great… try, that way your website will be gaining visitors and be in a better ranking in search engines (Google), so you will get more clients.

Before showing the finished works ask for permission to the client. If it’s confidential and you sign some contract, make the rest of the people involved sign in it too, this way you’ll be sure it wont be shown.

Create a file with all the details of the order, so if the client returns you know how much you charged, how long it took you, how many designs you made… you can also create a clients database, so you can inform your clients of any incident that occurs or send them Christmas greetings that might take you to new orders. IMPORTANT: never show this information to anybody.

Related Post:

1. SOSNewbie is looking for Spanish-English translators
2. Videotutorial: digital color with Photoshop
3. 8 top questions for newbie designers

Photoshop Tutorial: digital drawing

This tutorial is for beginner Photoshop users, so we will explain everything in detail; you’ll learn to use the vector drawing tools of Photoshop using our mouse… for now we won’t be using a digitizer tablet.

To start, the best thing to do is having a good sketch on paper; the size of the drawing doesn’t have to be very big because we will delete it at the end, but also it doesn’t have to be very small. Let’s scan it at 150-300 dots per inches (dpi from now on) to make sure that when we zoom we can clearly see the lines to work properly.

Let’s start with a white canvas (Ctrl + n), with a good size and resolution just in case we want to print in a big size.

To add new layers just click the button “Create layer”.

Let’s put the sketch in it (to do this, open up the file where you have your drawing, select everything with Ctrl + a and cut the selection with Ctrl + x. After that, paste it with Ctrl + v in the layer; if it’s small, alter it with Ctrl + t) and name it “sketch”, then create a new layer where we will put the trace of the figure and let’s name it “lines”. So we should have the 3 layers as it appears in the image.

Now we’ll use the Pen Tool to redraw the sketch; select it and activate the Paths Mode (left superior corner, the icon of the pen inside the square):

Now let’s click in the 3 sectors, and 3 little squares like these ones will be created:

If you right click (or click and maintain pressed) the Pen Tool, a menu like this one will appear:

Choose “Convert Point Tool”(the last one), press in any of the 3 squares we created a moment ago and drag it; this way you can twist the line and form what it’s called a Berzier Curve. Start shaping it in the way you want (we can always add or remove this squares with the Add Anchor Point or Delete Anchor Point as we want more or less complex shapes). You should get something like this:

There’s a little trick to create rounded shapes. It consist in create the vertexes and to add an intermediate point, after that you just have to move it with the Direct Selection Tool and that curve will be made by itself.

Make sure you are in the “lines” layer, select the Brush Tool and choose a hard brush (right click in the canvas, they are the first ones in the brushes list) of about 5 pixels with a different color from the one of the sketch, for example red:

With the Pen Tool selected, right click in the canvas and choose “Stroke Path”, and a window like this will appear:

Choose the Brush Tool and hit OK; this will generate a trace with the characteristics of the brush we chose before that will follow the previous route (this can be done with all the other tools).

If you mark the square Simulate Pressure we will obtain traces that will be smaller in the edges; with a little of imagination you can get all types of traces.

WELL DONE! You have you first trace, now do the rest The trick here is to make the traces in parts, in different layers so you can retouch comfortably superposed traces… like in this image:

It’d be ideal if you could make traces of the complete areas (for example we trace the glasses in one layer and the hair in another one, after that we delete the traces of the glasses covered with hair); it’s better to do it that way than starting tracing through the eyebrows and the hair with the same trace.

Now you have to work with the rest of the traces. When you’re done with it, we have to put together all the layers; we can do this selecting all the layers and pressing Ctrl + e. At the beginning it can be hard to manage with all the curves, but with some practice, the sketch can look as the original.

We have just finished our digital inking. You might probably notice that the lines are a bit boring as they aren’t modulated… patience, we’ll see that with more detail soon

Related Post:

1. Advanced digital drawing (Photoshop Videotutorial)
2. Videotutorial: digital inking with Photoshop
3. Drunken Monkey Photoshop tutorial

Win a mascot at BloggingTips

Hello mates, time for a competition!!! my buddy Kevin from Bloggingtips is running a cool SEO (search engine optimization) competition, the 1st prize: a SOSFactory Mascot and a domain name. Read the whole post to know more… and good luck!!

The Prizes

1st Place: A complete mascot from SOSFactory worth $300 plus a free domain name from 815Domains*. This is the kind of quality you can expect:

2nd Place: 2nd place gets $50 cash via paypal plus a free domain name from 815Domains*.

3rd Place: Free domain name from 815Domains*.

* The domain name will be registered for you by myself and then pushed to your domain account

Special Prize - $50: If this type of competition proves popular then i may use it again however i am keen on using a different type of competition. The blogger who suggests the best competition idea here for BloggingTips in the comments of this post will win $50 via paypal.

The Competition

Bloggingtips want bloggers out there to link to this competition using the title of this post. So all you need to do is link to this page using the text win a mascot at BloggingTips.com. Thats it.

In about three weeks time I will check Google for the phrase “win a mascot at BloggingTips.com”. Pay attention to the parentheses around the search term. This ensures that google only searches for that exact sentence which means that the only websites that will be listed in the search will be this one and anyone who is linking here through the competition. I strongly encourage you all to NOT create a new post to link to me. All i’m looking for is the link to this page. My suggestion is to include a small reference at the end of a post but you could instead add a link to the competition in your footer or somewhere out of the way.

1st place will go to the highest ranking blog on google for the search term i mentioned, 2nd place will go to the next blog listed and so on and so on. Obviously, BloggingTips.com, Sosnewbie.com and Sosfactory.com doesn’t count.

Nothing more to say except…

Good Luck to everyone who takes part!

If you have any questions about the competition please leave a comment and i will answer as soon as i can. You can visit the original post at Bloggingtips

Related Post:

1. 12 freelancing lessons for 2008
2. Linerider mascot design, the true story
3. Drunken Monkey Photoshop tutorial

The Briefing

Briefing is a communication instrument between the designer and the client in form of key questions to know their needs at the time of designing any product by order. It will save you time, money and misfortunes.

To give the Briefing is the first this you should do, even before the estimate… If you don’t know your client’s needs, how are you going to calculate the time you’ll spend working?

You can do it in a more or less formal way; many freelance designers talk in plural and try to make people think they are a big company with dozens of employees… to try to look serious is ok, but there’s no need to lie, being a freelance designer also has some advantages.

I talk to clients in an informal way, after all, personal relations are the ones that move the world… and that has many advantages if you know how to use them.

Once you’re done with the Briefing and everything is negotiated, I recommend that both of you sign, that’ll work like a contract.

Ok, this is what every single designer manual will say… but we are Newbies (and we are proud of it :P) and freelancers, and our clients aren’t huge companies with millions of dollars to make market research, they are generally people with just a few methods of research and too little time to spend it in lots of formularies.

Your job isn’t just designing what you are asked and do it well, but also to help the client exteriorize its needs… here’s the real art, you have to find the balance between quickness and precision. It’s useless the bore the client with an endless list of questions, but you can’t start with the design if you don’t have any idea of their needs; keep that in mind.

I’ll show you now the most common questions; you have to choose which ones are the more appropriate for every project and client. There are no rules, just common sense.

Welcome to the world of freelance designers, flexibility… every day’s bread… so "Be water my friend".

Company’s profile and goals

Ask for a general and sincere description of the company we are going to design for:

• What does the company do?
• For how long has it been working?
• How many employees does it have?
• What’s its sector of the market?

It’s also important to know the company’s goals; after all we’re hired to get to those goals, some examples:

• Generate sales?
• Generate incomes by publicity?
• Gain subscribers?
• Get to know their clients?
• Get a visible presence on the internet?

The product

Considering products in the ample sense of the word, the company can be the product itself:

• Which ones are the main benefits of the product?
• What makes this product unique?
• Why would the audience be interested in this product?
• Which qualities are wanted to stand our and which ones aren’t?

Competition

Another important point is the competition; it’s always difficult to establish goals from nothing so taking like an example other businesses can be very beneficial:

• Which ones are the main competitors?
• Which position has our client about their competitors?
• What position aspires to occupy?

Audience

To whom it goes directed our message? We have to know our audience; for that we can ask:

• Age
• Gender
• Salary
• Occupation
• Localization

Communication objectives

Here we’ll recollect information about the visual aspect and the emotional answer that our client wants to provoke in its audience.

• Visual aspect: elegant or entertaining, modern or classic, formal or informal… ask for some examples of designs that their customers may like.
• Feelings to generate in the audience: excitation or calm, security or risk, curiosity or desire…

Production process

Raise a date for the original concepts, for revisions, the final design… also add a reasonable time margin in case unexpected things come up.

It’s good to clarify that the completion of the dates doesn’t depend exclusively on you, and to make them know they are an active part of the process. Imagine that every time you send an email they take a week to answer it, that way you’ll never fulfill the dates no matter how hard you work.

Ask if there are any special circumstances that can delay the process, for example parties or important events.

It’s also good to ask things like:

• Who will provide the text or photos in case you need them?
• How many concepts do you offer to choose the final design?
• Number of final designs and formats in which you will work?
• Media to which is destined: printing, web, DVD…

Estimate

Maybe what you were waiting for. It’s the worst part… how do I know how much I need to charge?

I recommend to establish a price per hour (for example 30US$/h) y calculate the number of hours you’ll spend with this work (for example 10 hours… so I’ll charge 300US$).

Don’t follow what others tell you, they might charge 9000US$ for just 1 logo… and they probably deserve it, the thing is if you have a client who can pay that amount.

It’s always good to show to the client that you are a flexible person, and that the estimate will vary depending on things like the number of initial sketches, of revisions, delivery date… if you are not sure, ask freely their budget and negotiate from there; consider the possibility that the client and you may not get to an arrangement… you don’t have to force the situation.

Other important questions:

• Payment methods (banking transference, paypal, epassporte, western union…)
• If some percentage will be paid in advance (recommended 30-50%), according to my experience, if he pays in advance it wont fail.
• If there is some refund policy in case they don’t get the expected results; my suggestion is that you should offer it. If somebody contacts you it’s because thy like your work… if you try hard everything should be ok. In Sosfactory we just had to refund twice in 3 years.

Copyright

You can offer limited reproduction rights (for example, for just one use) or unlimited (without restrictions).

In theory, if you sell the unlimited reproduction rights, you should charge a lot more… but going back to the freelance designer’s reality, this is very hard to do… if it’s a big company you should try it, if it’s a small one, fight to get a fair pay, but take into account their limitations.

If they ask for something very unfair, it might be better if you reject the job… what starts bad generally ends bad, you’ll just get to burn yourself. Just think there will be plenty of opportunities to show what you are worth.

If you liked this article, please DIGG IT

Related Post:

1. Designing for customers
2. Vectorial illustration with Illustrator
3. Mascot design for websites

Videotutorial: digital color with Photoshop

To see the video just click on the image.

Here is the last step when designing mascots for websites. I did this color job just to do this video, so its a short version, I usually spend around 3h per mascot design when I work from sosfactory, but this would be too long, impossible to edit, maybe in the future

If you have any doubt, or suggestion, please just leave a comment and I will reply as soon as possible.

1. Advanced digital drawing (Photoshop Videotutorial)
2. Extract comic lineart
3. Videotutorial: digital inking with Photoshop

Videotutorial: digital inking with Photoshop

Please click in the image to see it

This is a photoshop tutorial where I show how to clean lineart done in a traditional way. Its the usual process we do at time to design mascots for websites from sosfactory.

Notice this tutorial is just to clean lineart, if you want to do digital drawing with photoshop, from scratch, you should visit this post about vectorial drawing with Photshop (peding of translation)

1. Advanced digital drawing (Photoshop Videotutorial)
2. Extract comic lineart
3. Vectorizing with Silhouette

Photoshop Tutorial: 3d logo

This is an advanced Photoshop tutorial , i’ll give more importance to the procedure here and i’m not going to explain the tools in thoroughness. If you have any difficulties to follow it, i recommend you to practice a bit with some simpler tutorials first… You could also take a look at Photoshop’s Help

We will start with a big canvas, 5000 x 5000px should be ok. Let’s create a text layer in Photoshop, write any text you want for the 3D logo. Rasterize the text (right click in the text layer, in the layers panel and choose “rasterize text”). You could save a copy without rasterize just in case you have to make future changes.

Ok, now we do a gradient from white to black, like the one you see in the picture below (I assume you know how to do selections and gradients).

Now duplicate the text layer and move it down or to the sides (if you do this you will have to make some adjustments to make everything connect) depending on the perspective you want for your logo. Change the color of this second layer to one that differentiates.

Here I used the Burn Tool in shadows range, to add some shadows in some zones where there is little light.

Now we use the Dodge Tool in highlights range to illuminate zones where there is more light.

Let’s select the first and the second layers and add a third one below the rest. After that make a black contour around the selection (Edit > Contour, choose center).

Make a selection around the first layer and then add a fourth layer on the top. Contour again the selection, but this time with white color.

Select all the text (select layer by layer so you don’t miss anything), create a fifth layer to put in the top, fill it with a light blue color and change the layer mode to color, that way we’ll get a metallic tone. You could also use some effect brush to give it an original touch… and that’s it

If you want to take a look at how the layers should be, here you have the file.

Related Post:

1. Drunken Monkey Photoshop tutorial
2. Sergio Ordoñez Interviewed by PSDTUTS
3. Advanced digital drawing (Photoshop Videotutorial)

Mascot design for websites

In this article we are going to see some general questions about mascot design for websites: composition, lines weight, file formats, styles and color schemes… You will notice that during the text there will be several links to other pages where every topic is explained in more detail.

If you have any doubts about this article, just ask and we will add it

Where are we going to use our mascot design?

This is the key question to start designing our character; it’s different to design one to include it in a website as a logo than to do it for a big scale printing.

Usually clients give us an area in the site where we have to make the character fit, so we have to leave some space for the rest of the modeling.

I suggest you to never start your character design without knowing where is it going to be put. If it’s possible, make a screenshot of the website and print it; use it to create the first sketches. Otherwise you may encounter some surprises.

Format, size and resolution

When we do mascot design for websites if I can choose I prefer to use bitmaps to vectors; it’s quicker and more comfortable if you have a Wacom. Generally I use bitmaps of less than 7000 x 7000px, depending on the computer you have you will be able to allow you to work with higher or lower sizes.

Bitmaps: the size matters. Sometimes, even though we design for websites, the use for printing isn’t discarded, for example merchandising. That’s why when you will deliver a design of 200 x 200px it’s better to do it in the biggest size possible, and then scale it to the final size for two reasons:

1. It’s more comfortable because you don’t have to pay much attention to little details. When you reduce the size, imperfections are deleted.
2. You can charge extra money for the high resolution file, or offer it as an extra service as we do here in Sosfactory.

This is the general rule for choosing the format:

1. Bitmaps: for presentation in monitor (web or multimedia) or printing up to 60 x 60cm at the maximum quality (300dpi) or 120 x 120cm at medium quality (150dpi).
2. Vectors: for maximum quality printing at more than 60 x 60cm.

For the resolution, use 72dpi for web or multimedia and 300dpi for maximum quality printing. If you use 150dpi, the print will have medium quality.

Concept

This is the more complex creative phase; we have to get the most information we possibly can about the company that hired us. To achieve this, the best thing we can do is to create a briefing or at least ask some questions like:

1. What does the company do?
2. Who are their competitors?
3. What do they want to communicate?
4. The audience to which is destined?

There are no formulas… you just have to study the company and wait for the magic to arise, after that it will be question of technique at the time of shaping the concept. Here you will find some techniques in order to encourage creativity.

Design proportions, character’s pose and silhouette

Proportions are very important when designing for a website. Imagine that in the header of that website we just have 100px height… If we design a very thin mascot, at that size it will hardly be visible and we’ll loose all the face details. And the face is the main part.

That’s why in Sosfactory we almost always use the cartoon style when we design for a website. A character with normal proportions will work for a Marvel cover, but it will hardly work at 100px height, at least in a normal pose… The pose is also very important, it has to adapt to the space they give us. Take a look at these two images we designed for Lootbunny

The first one is much more dynamic and interesting, but we used more space to the wide… to adjust to the space we had we changed the pose slightly, but it lost all the charm. In this case, the best thing to do is to cut the image; doing this we get to take advantage of the maximum possible space, and also the character looks bigger…

As you can see, it looks much more attractive.

Lines: weight, color and style

The lines weight is the thickness of the lines we use while drawing. We can use many different line weights in one design; the general rule is: use the thicker lines for the general areas; while you enter into details, start diminishing the weight.

Let’s see a couple of examples:

Example A: We have a thin line, without any weight differences. Also take a look at the colored line. the result is much more smooth, because it makes the color interior more important. I suggest doing this when you have to use the character at small scales.

Example B: The line is thicker, there are weight differences and also the line remains black. The result is more impressive. The problem when using this style at small scales is that the line “drowns” the volume; at more line weight, less color interior, this way you will hardly obtain a good volume.

There’s little too say about the line style, there are as many styles as drawers out there… it can be rounded, sharp, thin, thick, variable, monotone… whatever you choose, try it to be coherent in the whole design.

One thing you should never do is using pencil shading which is so typical in comics, mainly in the oldest ones (at the present time, the shading job is left more and more into the hands of the painter), doing this you will only get to ruin your image when you scale it.

If you want to learn more about this, visit the post about different line weights with Photoshop.

Color: schemes and style

Before deciding the color scheme, ask them to show you the backdrop where they are going to use it, also ask if they prefer any color scheme in particular… generally they will tell you to use their corporative colors.

If you are a novice, this color scheme selector can help you; even though you can always use some images you like and take samples to create your own, customized color library.

The same applies to styles; there are as many of them as artists or public to whom is destined. Think about the sensation that you want to transmit.

Example A: hard brushes, contrast between shades and lights, saturated colors give more sensation of aggressiveness… this would be great for a teenager public.

Example B: soft brushes, little contrast between shadows and lights, pastel colors; this gives a warmer sensation… this would be used for a childish public.

If you are an advanced Photoshop user you might already know how to change the color schemes of a finished design, if you don’t, it’s always useful to make a color sketch before the final design, that way if there are any corrections to do (there are always corrections to do), you will save a lot of time.

Final image optimization

There’s a quite simple rule: if they are smooth colors, it’s better to save for web in GIF format, if there are degraded colors the best thing to do would be use JPG format (60% of quality should be enough).

For further details, I recommend you to take a look at the post about website images optimization.

If you liked this article, please DIGG IT

Related Post:

1. Free mascot design (new mascot added)
2. Win a mascot at BloggingTips
3. Videotutorial: digital color with Photoshop