Build a Powerful Design – End of the effects chapter. Catalin Costea Speaks.

I decided to make a common post for all the remaining effects because they work really great together and in order to achieve some great results you will have to mix them in different combinations. All effects work really good together, but for example one combination that will create some really great effects is the “Bevel” and “Satin” which combined can generate a realistic metal or chrome effects and are great when creating custom buttons.

Before you go on and use them I suggest you look up for some photoshop tutorials on the internet (you will find a lot of really good photoshop tutorials explaining what each effect dose and how to mix them in order to get really great effects).

I won’t go into any more details about effects since in order to use them at their full potential you need a full understanding of the way they work. I believe this is not the place to fully explain them since the internet is full with such tutorials and we went too deep into the details of using effects.

What I will do in the next posts is to show you how you can integrate into your design elements made with all the effects available in photoshop and how to combine them with the illustrations you can find here at jesterarts.

Till next time don’t forget to keep in touch via my personal site, facebook or twitter.

2010
05/05
POSTED BY
Catalin Costea
CATEGORY
Design Tips
TAGS









1 comment

Build a Powerful Design – Stroke. Catalin Costea Speaks.

As I said in my last post I am going to talk today about the “Stroke…” effect. Stroke is used to attract attention on the elements it is used on, that’s why this effect is mostly used on logos and on the block elements containing the text. Also it is almost always combined with glows and shadows.

In terms of options for this effect that is not much to choose from, but there is really no need to custom anything. The most important element is the color you are going to choose. Most of the times the color will be a light color suggesting brightness.

Also Stroke can be used on text to make it thicker or thinner. This is where the option “Inside” and “Outside” are really useful.

Combining inside with the same color as the background of the text will help you make you text thinner.

Combining outside with the color of the text will make your text thicker.

Now that we have also seen the stroke effect we will have a quick look at the other effects, but we will do this in the next post.

Till next time don’t forget to keep in touch via my personal site, facebook or twitter.

2010
04/18
POSTED BY
Catalin Costea
CATEGORY
Design Tips
TAGS








Write comment

JesterArts Bookmark Pack! Tutorial on Uploading Batch Bookmarks with Tags to Delicious.com and Firefox Auto Tagging

Uploading Bookmark Batches with Keyword Rich Tags on delicious.com.

This tutorial serves two purposes:

  1. Provide those who use JesterArts Illustrations and ClipArt with a way to quickly locate their desired illustrations via  Delicious.com bookmarking.
  2. Show general users how to upload batch quantities of  bookmarks with keyword rich tags to Delicious.com
  3. If you are just looking  for auto-tagging, see the bottom of this post.

If you would like to have quick access to JesterArts most popular illustrations through your delicious.com bookmarks, download this file here: JAIbookmarks. This will be the file you are uploading.

If you are looking at this tutorial strictly for uploading your own bookmarks, follow these steps (firefox users 3.6.3).

  1. Go to Bookmarks/Organize Bookmarks.
  2. Choose Import and Backup/Backup.
  3. It will prompt you to save it. Choose JSON file type, as it will suggest. (This saves it in a version that will retain your tags).

Uploading Firefox Tagged Bookmarks to Delicious.com

  1. Have ready either The JAIbookmarks file (for you fans) or your own bookmark file created from the above steps.
  2. Go to http://delicious.com/
  3. Go to settings. (See below screenshot, click to enlarge)
  4. Then go to Import/Upload Bookmarks. (See Screenshot)
  5. Then choose Manual Import, which is tucked away toward the bottom. (Screenshot)
  6. Then choose the file, either the JAIbookmarks file provided or the one you created in the above steps.
  7. Choose whether or not you want them public. If you choose to keep them public, the bookmark/keyword diversity will bring more people to your bookmark collection, if that is what you are after. (And the exposure certainly benefits us too!). If you keep them private, thats cool too.

Once your all done that, push the big green “IMPORT NOW” button, and your all set!

Auto Tagging, Firefox

If you are doing this operation for your own tags, and you are not the best keyworder, try this auto-tagging add-on for firefox: Auto-Tagging 2.6. Go to the page you want bookmarked/tagged, push CTRL D or SHFT CTRL L (whichever works) and the bookmark dialogue will come up. The rest is explained in the autotagging page.

Please let me know if you found this tutorial helpful!  — Leo. JesterArtsIllustrations.com

2010
04/15
POSTED BY
leoblanchette
CATEGORY
Tutorial
Uncategorized
TAGS










Write comment

Build a Powerful Design – Glows. Catalin Costea Speaks.

I talked in my previous post about the Drop shadow effect and I said that I will explain now how to empower it. Well, to have shadows we also need to have a light and also glows. In Photoshop we have two different types of glows, inner and outer.

There are two differences between these effects, the first is where they are placed and exactly how the names tell us one is on the inside of the object and the other outside.

The second difference is that the inner glow has a special option called “Source” which changes the point of start of the effect.

The default option is “Edge”, this means the glow will start from the edge of the object and go towards the center.


The “Center” option dose the opposite spreading the effect from the center out.

Glows are really useful when you want to make an element stand out from the rest but also when you have a area of light in your design and you want to make the difference between that and the area with shadows.

Now that we have seen how to add glows we’ll see the “Stroke…” effect and how we can use it.

Till next time don’t forget to keep in touch via my personal site, facebook or twitter.

2010
04/10
POSTED BY
Catalin Costea
CATEGORY
Design Tips
TAGS











Write comment

Build a Powerful Design – Drop Shadow. Catalin Costea Speaks.

When we talk about web design and effects we have to start with the drop shadow effect. This is definitely the most often used effect by designers. It is really easy to use and it can empower almost any design by giving it a 3d look. This is often use when importing elements to your design like illustrations.

Even the designers who fallow the web2.0 design style still use shadows but they are more careful when using them. This is a good thing since many tend to use shadows too much and the whole design starts looking messy.

When using drop shadows we have a series of options like blend mode, angle, spread, size and quality. Except the angle about which we talked in our previous post I suggest you don’t change any of the options.

The only thing you might want to change is the color of the shadow, depending on the color of the background, the default black could be too dark or not a good match.

Now that we have seen the “Drop Shadow…” effect we’ll see how to empower its effect by adding glows, but we’ll do that in the next post.

Till next time don’t forget to keep in touch via my personal site, facebook or twitter.

2010
03/28
POSTED BY
Catalin Costea
CATEGORY
Design Tips
TAGS












Write comment

Build a Powerful Design – Angles. Catalin Costea Speaks.

We have seen how to add an effect and the difference between adding it to the layer or the illustration inside the smart object, now let’s see one important setting of the effects before we go into the details of each of them.

The first thing you have to do is to select or enter the smart object and after that go to “Layer” – “Layer Style” and you will have a full list of effects to choose from as I explained in the last post. Now let’s choose the “Drop Shadow…” again and take a look at one really important option which you will find in the other effects as well.

When adding effects such as this we have to take care about where the source of the light is on our site and direct the effects according to that. We can easily do that from the option window of each effect.

If the light is somewhere outside or to a corner of the site you can use the global light option since all the shadows will be in the same direction, but if the light is somewhere in the middle of the design you will have to set the angle to each illustration according to the position of the light and illustration.

This is really important when you want a realistic look for your site. I often think about this option at start of the design because it will help a lot in further development of the site. Now that we have seen how to set the angle of our effects let’s get into more detail with the first, and one of the most important effect, the “Drop Shadow…”, but we’ll do that in the next post.

Till next time don’t forget to keep in touch via my personal site, facebook or twitter.

2010
03/22
POSTED BY
Catalin Costea
CATEGORY
Design Tips
TAGS









Write comment

Build a Powerful Design – Adding effect to layers or smart objects. Catalin Costea Speaks.

Now that we have the color we want let’s make another step in our design and give a special touch to our illustrations by empowering the 3d look of the illustrations by adding effects.

First thing we have to take into consideration before we add effects to a smart object is where we are going to add the effect. We have two options, either to add the effect to the layer containing the smart object or we can add it to the illustration inside the smart object. To make this decision we have to know how this decision will affect the display of our effect and our design. But before we can do this we’ll have to see how we can add effects to our layers and smart objects.

First we’ll see how to add an effect to the layer containing the smart object. All you have to do is select the layer you want to add the effect to and then go to “Layer” – “Layer Style” and you will have a full list of effects to choose from, I won’t go into the details of each effect right now since we’ll cover each of them in future posts, so just select the “Drop Shadow…” effect. You will have a new window with a lot of different options and setting, but for now let’s just go with the default but only change the color to see the difference better. Click “Ok” and you will see the effect added.

Now to add the effect to the illustration inside the smart object all you have to do is enter the smart object layer and do the same thing as we did when adding the effect to the layer, but choose a different color.

Now the difference between the two approaches is that the effect added inside the smart object and directly to the illustration is considered as part of the initial illustration and will overlap any other effect added to the layer. So if you add an effect to the illustration and after that one to the layer of the smart object you will see that the one added to the layer is behind the one added to the illustration and what is great about this is that this will allow you to add two different effects of the same kind to the same object.

Now that we know how to add the effects and the difference between adding the effect to the layer of the smart object and to the illustration in the smart object we’ll head on and see some basic tips before getting into the specifics of each effects, but we’ll do that in the next post.

Till next time don’t forget to keep in touch via my personal site, facebook or twitter.

2010
03/04
POSTED BY
Catalin Costea
CATEGORY
Design Tips
TAGS













Write comment

Build a Powerful Design – Changing the colors with smart objects. Catalin Costea Speaks

Leo explained in a previous post and I quoted him about changing the color of the illustrations you are going to use, but he explained how to do it in illustrator. The only inconvenience with this method is that you will need not only photoshop, but also illustrator or some similar software. The way to avoid this problem and also to save some money is to use the powerful feature of smart objects.

After you converted the illustration you want to use into a smart object the first thing I suggest you do is change the size and place it in your design. Now it’s time to change the color of the illustration. This is a really simple thing to do when using smart objects. All you have to do is access the smart object you want to change the color of and then go to “Layer” – “New Adjustment Layer” – “Hue/Saturation”.

In the new tab you will have to name your layer, change the mode, color and opacity. I suggest you just press ok and go to the next step. Here you will see 3 bars, the first will allow you to change the color, and this is the only useful option in my opinion, the second and third will allow you to change the intensity of the color and the luminosity.

After you did this you can see the numbers next to the color bars and keep them in mind. By doing this you will be able to have the same color for all the illustrations you want only by using this numbers. Another advantage is that you can change the color of each smart object, thus you can have each illustration of a different color, but also you can make all of them the same without affecting the color of the other elements or the theme.

Now that the color is not a problem anymore let’s go to the next step and see how we can add shadows and glows to our illustrations, but we’ll do that in the next post.

Till next time don’t forget to keep in touch via my personal site, facebook or twitter.

2010
02/24
POSTED BY
Catalin Costea
CATEGORY
Design Tips
TAGS












Write comment

Build a Powerful Design – Changing the size, position and orientation with smart objects. Catalin Costea Speaks.

Now that we have our smart object let’s take care of the first steps we have to do. If you did as I suggested your illustration is going to be way too big for your design, in the wrong position and maybe heading the wrong way. Let’s take care of these 3 things really fast so that we can go on with our design.

For the first of these changes what you have to do is access your smart object containing your illustration. Now that we are into the smart object the first thing we want to do is set the size. All we have to do is change the size of the smart object as we change the size of any document in photoshop by going to “Image” – “Image size”. When you change the size it would be a good idea to keep the proportions of the initial image by selecting the option “Constrain Proportions” and you might also check the “Scale Styles” option.  If you are looking right after you changed the size into the psd of your design you we’ll see nothing happened and that’s because you didn’t save the changes. A very important thing you have to keep in mind each time you want to make changes into a smart object these won’t take place until you save your smart object (save it as you save any other document in photoshop).

Now that our illustration has the right size let’s make sure it’s in the right spot. Even if it is a smart object in the psd of your design you can treat the illustration as any element placed on a regular layer. Just use the move tool and drag it where you want to place it or use your keyboard arrows. With each touch of your arrow keys you will move the illustration 1 pixel but if you want to do this faster you can use shift and the arrow keys, this will move the illustration 5 pixels.

Now that it’s in the right spot we have one more element to take care of, the orientation of the illustration. To do this we’ll have to access the smart object again. Now that we are in the smart object we can flip it horizontally or vertically. To do this you will have to go to “Image” – “Rotate Canvas” and flip it. You can flip it horizontally or vertically but you can also flip it at different angles, depending on your needs.

Now that we have resized, moved and turned the illustration as we want we’ll see how to change the color of you illustrations in a really easy way with the help of smart objects, but we’ll do that in the next post.

Till next time don’t forget to keep in touch via my personal site, facebook or twitter.

2010
02/17
POSTED BY
Catalin Costea
CATEGORY
Design Tips
TAGS













2 comments

Build a Powerful Design — Smart is the way to go. Catalin Costea Speaks.

Let’s get out hands dirty.

There are so many ways in which you can learn things. I always loved a more interactive way of learning things by mixing the theory with practical exercises thus I suggest you try doing what I explain as I go. I think this is the best thing you can do since in this way after you finish learning you will have the knowledge but also some skills which will allow you to apply the newly gathered knowledge. So for these tutorials I will use as example one design I made for a personal website. I decided to use the illustrations from jesterarts for this design and bring an interesting touch. One of the important problems is how to implement the illustrations to the design since the software I use is Photoshop CS3; software used by most of the web designers even if the version might be different. The solution I apply is using one of the most powerful features of the latest versions of Photoshop and I am talking about smart objects.  Now let’s stop with all this talk and get our hands dirty and see how to bring an illustration to your design.

First the background.

Make a new .psd file in your Photoshop. There are different sizes you can give the file, but be careful since you will have users will small screens and resolutions, but in most cases the width of the design is about 960 – 980 pixels.  Think about the color you want your background to be and make a new layer with that color. Gradients are often used since they bring a nice touch to the design.

Getting the illustration.

When you feel ready to get the illustrations to your .psd file select the layer you wish your image to be placed above. Now just drag and drop your illustration, from the directory you have it in, into Photoshop. Do not change its size we will take care of this later on, for now, the bigger it is, the better. You will see it is in a new file and not in the files you have been working until now. No problem, from here you can simply drag and drop it to your other file with the “Move tool”. Now your image is above the layer you had selected before.

Let’s make it smart.

You will see a big image into your design depending on the size of the illustration but don’t worry, in this case bigger is better since when you reduce the size of an image its quality won’t have to suffer, but if you wish to enlarge a really small image it you will lose quality. But before you do anything to the layer you must transform it into a smart object. The simplest way is to right click on the layer in your layer tab and after that select “convert into smart object”.

Now you will see in the bottom left of the layer a small sign showing you that layer is a smart object but this is also your way of accessing the layer by double clicking on it. Now that you have converted the image to a smart object and accessed it you can change its size, modify different elements of the image, add different effects and one of the best things you can do is change the color of each illustration without ever needing to open illustrator or any other similar program in your life and all with just a few clicks, but this is another aspect we will discuss in the next part.

Till next time don’t forget to keep in touch via my personal site, facebook or twitter.

2010
02/10
POSTED BY
Catalin Costea
CATEGORY
Design Tips
TAGS












1 comment

ClipArtIllustration Feed

http://www.clipartillustration.com/feed/