DesignBash » Photoshop

Make a Favicon for your Blog – An Easy How To…

admin — Wed, 17 Mar 2010 20:27:37 +0000

In the world of modern web design, Favicons are considered one of the most important aspects of your website. Although it may only be 16px by 16px, the importance of this icon should not be underestimated. This is the type of polish that puts your site in a whole new league.

But really, they are kinda nice and having one makes your site seem just a little more professional. So today the gloves come off and we’re going to make a sweet favicon for an application I’ve been working on.

But Where do I Start?

The first step I like to take when making a favicon is to create a 16px by 16px Photoshop document – which is the standard favicon size. For this quick tutorial I already have a nice little logo created – and I’ll be using that to make my favicon.

Keep it Simple, Stupid

Because there is so little space to work with, it’s important to keep your favicon as simple as possible. My starting logo is a bit too busy to make into a favicon, plus favicons need to be square – so what I’ll probably do is lose the text and use either just the envelope edges and the heart.

My Starting Logo, I'll be losing the text and keep just the envelope and heart.

Some Playing Around

After playing around for 10-minutes in Photoshop, I quickly realized that 16-pixels is just too small to preserve the definition of the actual envelope. What I’ve ended up doing instead is using just the edges (red and blue stripes) of my envelope with a heart in the middle. A couple things I noticed as I did this:

When transforming things down in size, blacks will sometimes become a little too gray and need to be darkened (using the Photoshop burn tool).
Whatever you end up with, run the sharpen tool over it a few times. It really helps clear up any blurry edges that resulted from such a dramatic size reduction.

The final result looks something like this:

Next Up, Turn that PNG into an ICO file…

Now comes the easy part. First, save your favicon as a PNG file. PNG is better than JPG because it is a lossless format, and with such a small image, you cannot afford to lose any quality. Next, head over to this sweet favicon generator – the best tool I’ve found for converting images to the ICO favicon format. To be honest, I tried a few different sites and they all gave me problems except for this one.

Making it Display on Your Blog or Site

Once you have the ICO file on your computer, you need to rename it “favicon.ico”, anything else and it simply won’t work. Next you need to upload the icon to your public_html directory (it won’t work anywhere else). Finally, you’ll also need to include this small snippet of code in the of your HTML files:

If everything is setup properly you should now see a favicon when you refresh your site. I should mention that I did have a problem with Firefox not displaying the icon, but I think it was a caching issue because I verified it with this seositecheckup tool and everything seemed good!

Here is what it looks like using Safari

Photoshop Offset Filter – Making Seamless Textures

admin — Wed, 20 Jan 2010 17:40:43 +0000

Today we will be working with the offset filter in Photoshop to help create a seamless textured pattern. If you ever find yourself trying to make repeatable patterns for the web, then you’ll definitely want to follow this quick tutorial. I’ll be using a random texture that I found somewhere on the internet, you can grab it here (click on the thumb for the full size):

Download Jute Texture

Step 1 – Setup Your Photoshop Document

Go ahead and create a new photoshop document that is 600px by 600px. Choosing a large tile size will make our background seem less tiled, but may require a little more work depending on the image your trying to make repeatable. Specifically, if your source image has a lot of color variation you might want to choose a smaller tile size to make things easier on yourself. The image we are using has a very consistent color scope, so our 600×600 tile size should be easy enough to work with.

Step 2 – Paste in the Jute Texture

Next you need to paste in the jute texture. I’ve oriented mine to the top left and scaled it down until it just fits the canvas. You’ll end up cutting off the right side of the image.

Step 3 – Using the Offset Filter

Now comes the fun part! With your texture layer selected, goto the top menu and choose Filter > Other > Offset. We want to offset our image horizontally and vertically by 300-pixels, allowing us to see where our pattern has its seams. After applying the filter you should see your texture now has 4 defined quadrants. In the next step we are going to clean those up and make our pattern seamless.

Step 4 – Smooth the Divisions

This is the hardest part of making seamless textures. We need to smooth out the dividing lines using photoshop’s many helpful tools. I’ve found two different ways to do this, but the method you use ultimately depends on the texture you’re working with. Some textures are really easy to turn into a pattern, other textures are almost impossible. This jute texture is relatively easy thanks to the consistent color, but there are a few tricks I used to get things just right.

Method #1 – (I found this works better for this texture)

Copy areas of the texture that have no seam and paste them (in a new layer) on top of the seams. Adding some feathering to your selection (around 5px) will make things a little smoother.
Use the eraser tool (using a soft & small setting) and erase the edges of your new layer.
You’ll find that the edges of your new layer look a little blurred and don’t really fit in… to fix this use the sharpen tool along the edge.

Method #2

Use the clone tool to remove the seams
If you find things are blurry use the sharpen tool to make things fit properly.

TIP: When you have a relativity seamless pattern you can use the burn and darken tools to make the lighting more standard…

It definitely takes a little time to get things perfect, but it’s worth it in the end. It took me around 20-minutes before I had a semi-perfect seamless texture. Below you’ll find the final image:

Download Seamless Jute Texture

Halftone Tutorial Photoshop – Quickie

admin — Fri, 08 Jan 2010 18:50:16 +0000

Here is a quick way to produce a neat halftone effect in Photoshop that can be used to give your compositions a little more complexity.

Step One – Setup the Document

Start off by creating a new document with the dimensions of 800px by 800px.

Step Two – Black to White Gradient

Create a new layer and fill it with a blank-to-white gradient. Try and make the gradient fairly even across the entire document.

Step Three – Apply the Halftone Filter

Select the entire gradient layer and goto Filter > Pixelate > Color Halftone… and fill it in with the settings below.

Step Four – Rotate the Halftone Layer

Next we can rotate the halftone layer by around 45 degrees counter clockwise.

Step Five – Crop it Down

Next make a selection near the centre of the halftone and crop it – I ended up cropping a section of ~ 615px by 300px.

Step Six – Apply a Pleasing Gradient

Choose a nice two color gradient (I choose blue). You now have two options. The first is to create a new gradient layer above your halftone layer and then reduce the gradient layer’s opacity to a suitable level. Or, the second option is to put a gradient layer below the halftone layer, set the halftone layer’s blending option to “Darken“, and reduce the halftone layer’s opacity until you find a good level. Either way the effect will be similar!

And there you have it – a quick and easy halftone effect that you can use to make neat backgrounds!

Animated GIF – How to Make a Loading Bar

admin — Fri, 08 Jan 2010 18:02:22 +0000

Todays topic will deal with the wonderfully painful world of animated GIFs. Specifically, how to make animated GIFs inside of Photoshop. For this tutorial I’ll be using Photoshop CS3 on a Mac, but I suspect that CS4 probably uses almost the same process. Alright, lets get started!

Our Final Product

First off, I know that it’s easy to find semi-customizable GIF makers around the web. This being said, I think it’s important to understand how to make these yourself, as it allows for a degree of customizability that would otherwise be impossible with the online tools such as AjaxLoad (a great tool to make little AJAX loaders).

A Word of Warning

I love Photoshop with all my heart, but to be honest, creating animated GIFs can be painful and annoying. Things just don’t work the way you would expect, and if you mess things up bad enough, it means sometimes redoing the entire animation (aka make sure your history settings are set to longer than normal). What makes this worse is that changing small details can be really annoying because it seems like you need to do it across ALL your frames of animation. If anyone out there has any insight into this please let me know and I’ll update this post. Thanks

Step One: Create a Nifty Looking Loader Bar

First we’ll create a new Photoshop document with the following settings:

Next we need to create the background for the loading bar. When creating basic elements I generally try to use vector shapes whenever possible. This allows me to scale my work without losing quality and ends up saving me tons of time if I ever need to resize my document. Go ahead and create a vector rectangle shape (U key). Make sure that you’re making a shape, not a path. Your top toolbar should look like this:

Now, using the info panel for precision, make the rectangle shape exactly 260px by 30px and centre it on in the document. Another thing that’s nice about vector shapes is how easy it is to change their color. All you need to do is double click the color swatch located on the left side of the layer (in the layer panel). For this example I choose a light grey #d2d2d2. Your basic outline should look something like this (click to enlarge):

Next up we will add a subtle gradient overlay to give our loader background a little more depth. Make sure that foreground color is set to white (#ffffff) and double click on the layer (again, in the layer panel) to pop open the layer styles dialog. In the Gradient Overlay section click on the Gradient dropdown to see all our possible gradients. In this instance we want to have a white to transparent gradient, which will probably be your second gradient swatch (you did choose a white foreground, didn’t you?). We will also be adding a small inner shadow:

If everything is working out, your image should look something like this:

OK, now let’s make the actual loader. I like the glossy candy-striped look, but you can really choose anything you want. Start by duplicating the layer we’ve been working on, and make sure that it is sitting on top of our background layer. Right-click on the new layer and choose “remove layer styles” to clear out our old styles and rename the layer to something like “loading bar.” I want to have a nice viberent red loading bar, so I choose #ff2f2f as my base color. Now we are going to add some layer styles that will give our loading bar that glossy look. Just like before, make sure that you have pure white selected as your foreground color. We are adding 4 different styles: an inner shadow, an inner glow, a gradient overlay, and a pattern overlay. If you want to use the same pattern that I’m using, I’ll attach it to this tutorial at the end.

Whew, I know it’s a lot of styles, but it creates a really nice effect! At this point you should have something that looks kinda like this:

Finally, you should reselect the background layer (the grey one) and transform the shape so that it sticks out 1px by on each side. This will give our loader a little border.

Step Two – Animating the GIF in Photoshop

With our loader in vector format, we can now start the process of animation. There are quite a few ways of doing this and tons of little tricks and tips, but if you’ve never animated a GIF before I’ll try and keep this easy (there is probably a faster/more complicated way to do this).

First things first, transform your loading bar until it is only a few pixels wide:

Now comes the annoying part. First you need to open up the animation window.

By default, your animation window is probably on the wrong setting (timeline mode) and we want to do this animation frame by frame. Adobe has hidden a huge menu in the animation window, it’s located in the top right corner, just below the close button. Click on it and select “convert to frame animation“. If you’ve done this right your animation window should now look something like this:

Now we need to put in some guides so that we can animate our loading bar with precision. The number of slices you put in will correspond with the smoothness of your loading bar. The more guides you place, the more frames you’ll need, and the smoother the animation will be. It doesn’t need to be exact, but try to keep it relatively uniform. Take a look at my example:

With our guides in place we can start the actual animation process. In the animation panel you can add new frames by clicking the new frame button (bottom of the animation window, just left of the trash icon). While clicked on the second frame, duplicate the loading bar, and horizontally transform it – moving the right side up by one “notch.”

Photoshop allows you to hide and show layers within the animation timeline, and that’s really the magic that will make our loading bar move. Click back on the first frame of animation and hide the duplicated layer we just created. Now when you click between the first and second frame, you should see the loading bar get bigger and smaller. It’s good practice to name your layers after their corresponding frames, so the first (smallest) loading bar layer should be named “1st”.

Hopefully you’re getting the idea by now. Go ahead and finishing incrementing the loader until you’ve filled up the entire thing. It can be hassle to do all the frames, and you’ll find that Photoshop can be a little annoying. What seemed to work for me was to 1. add new frame, 2. hide the current loader step, 3. duplicate the hidden loader step, 4. unhide and transform the duplicated loader step… repeat, repeat, repeat… (If you do it in this order you won’t need to go back and re-hide the duplicated loader step in each animation frame). My animation took a total of 26 frames, yikes!

You can tweak the timing in the animation window – in my project each frame is set to take 0.07 seconds:

When you’re ready to export make sure you save it as a GIF and the animation should work just fine. The finished product looks quite nice: (for this example I’ve set the gif to automatically repeat, although you probably only want it to play once)

So thats it! As I mentioned before, there is probably a much easier and efficient method of doing this, but for simple animations this technique will work fine.

Feel free to download the source PSD and have a look for yourself!