In Photoshop, create a new layer and name it Stainless. Select this layer and fill with a gray color. I used RGB #bebdbd

With the Stainless layer still selected, select Filter > Noise > Add Noise

Use the following settings:
Amount:15%
Distribtion: Gaussian
Monochromatic

With the Stainless layer still selected, select Filter > Blur > Motion Blur

Use the following settings:
Angle: 0
Distance: 30 pixels

At this point you should have a pretty realistic looking stainless steel layer for your design. I wanted to go one step further. I created a new layer called Gradient. In this layer I made a gradient using white.

I changed the layer blend mode to Soft Light, and I called it a day!

Below are a few examples of what can be created using this technique by simply choosing a different color at the beginning to fill the layer with.

Well forget that, now we can make custom icons, so when somebody bookmarks your website, the icon is one that you actually created! As a designer I might be a little bit TOO excited about this, but hey, this is the stuff I live for. You can see in the above image the two icons I’ve created for my websites, WebDesignAndSuch and BeantownDesign. So now the icons match the favicons of my websites, and I can just touch them to launch my websites on my iPhone.

Keep reading to see how to create your own iPhone icons.

So the process is actually ridiculously easy. First, create your icon at the size of 57×57 pixels. Don’t create any gloss or rounded edges, the iPhone actually creates both of those for you. You can see in the image below what one of my icons looked like before it was added to the iPhone.

Next, save your icon as a .png in your website’s images folder. Then you need to link your website to the icon so the iPhone can do it’s magic when someone hits “Add Bookmark” on their phone.

Glossy Icon

This first code is if you want the gloss to appear over your icon. Put this in the head of your website, and of course make sure you set the path to your icon.

Non-Glossy Icon

If you don’t want the gloss for whatever reason you can use this code.

There you go, have fun! If you want to test this out, pop open WebDesignAndSuch on your iPhone in Safari, and hit “Add Bookmark“!

Well if you’re still here after that, here’s the deal. I was reading an interesting tutorial about creating a button similar to the one found on the Campaign Monitor website. I actually went ahead and created the button, I always love seeing the approach other designers take at creating things in Photoshop.

Well after I created it I figured I may as well put the PSD file up here for anyone that wants to use it. I’ll give the CSS code to add it to your website as a CSS sprite also. Now I need to give credit where credit is due. The CSS code, and the tutorial of how to make the button are from Jacob Gube over at Six Revisions. Check out that link if you want the step by step of how to make this button.

I’m really putting it up here so I’ll have easy access to the PSD file in the future so I can download it no-matter where I am, make a few color adjustments, copy the CSS code, and have a new button for whatever I’m working on that day. Check out the demo to see the button in action, and feel free to download the PSD file of my version of the button. Keep reading for the CSS code.

View Demo

Download PSD File

Below is the CSS code for your button and the rollover effect.

Below is the XHTML code to put the button on your page.

If you need to know how to add a regular favicon to your post or WordPress blog, I covered this in a previous post. Check it out here, there is also a link to the Photoshop plugin that you need to create the ico file.

The topic I’m going to cover today is slightly different however, I’m going to show you how to make an animated favicon.. niiiice! Here’s an example of an animated favicon, this is the favicon I used on a previous version of BeantownDesign.com

Create a new document in Photoshop with a different layer for each state that you want in your animation. I’ll show you the process of creating the current animated favicon on BeantownDesign.com; which is a rather simple favicon with only two states, one black and one blue.

You’ll see I have one layer for the black state and one for the blue state. Next step is to open the animation controls in Photoshop (located under Window in the menu). I’m not going to go into depth the process of creating an animated gif, it’s rather simple. Just create a new frame for each layer, choose the speed and you’re done.

The important thing here is how you save the file. I should probably mention again that your file size needs to be 16×16 pixels. Design it larger and then drop it down to this size.

So when you save this file, you are saving it as two things. First you save it as a .ico format, which is the regular favicon file format. Again, if you need the Photoshop plugin to create this file format, check out this previous post. Next you need to save it a gif. This is how we get the animation. So why save it as two versions you ask? Because like all things that are worth doing on the web, not all browsers support animated favicons **coughInternetExplorercough**.

Now lets move to the head of your html document. Here is how you call your favicon in. We link both the regular version of the favicon for non-compliant browsers, and then the animated version for people that are worthy. If the browser supports the animated version it ignores the regular version. So that’s it..you’re done!

Something to keep in mind. My example uses a very simple animation, but let your creativity really flow. You can make a banner effect by having a long image and moving it slowly frame by frame.. or a zoom in, zoom out effect..the possiblities are endless.

So it’s easy enough to create a dotted line with CSS for the web, but how do you create a dotted line in Photoshop for your mockups? It’s actually rather simple; (as anything is when you know how I suppose).

Step 1
Choose the brush from your tool bar.

Step 2
Open up your brushes (under Window > Brushes). Uncheck all options on the left, and move the “spacing” up to 250% (more or less for different spacing obviously. You’ll see the dots separate in the preview.

Step 3
Draw a line with your brush on your canvas, and your line will be dotted. Hold shift for a straight line.

There it is.. How to create dotted lines in Photoshop!

ilz out!

In a previous post I went through the process of how you can make amazing panoramas in Photoshop. It’s a simple process, using “Photomerge” to put the photos together, and “Zoomify” to make them viewable on the web at a large size.

A friend of mine just got back from a trip to Arizona, and had a couple Panoramas he wanted me to make. So here they all, for all to see.

GREAT BASIN PANORAMA
OBSERVATION POINT PANORAMA

Next up? Fenway Park panorama!

Apple is known for their clean designs, both in their products, and the way they display these products. One of the effects they have used a lot is displaying their images with a reflection of the product below it. When used correctly, this is a very simple, clean way to display products.

I’m sure there are plenty of ways to create this, but I’ll show you the way I do it.

First, you will need an image of course.. I chose to use the exact Apple cinema display that I am staring at right now. I prefer to put the objects on a black background as I think this makes them really pop. You can use whatever color you want for yours.

Double the height of your canvas, so you will have room for the reflection image

Next, click on the layer with the image, and choose Duplicate Layer. This will be the reflection image/ layer. In fact, I called this layer “reflection”, so I wouldn’t get the two confused.

We need to flip this image, so while clicked on the reflection layer, go to
Edit > Transform > Flip Vertical

Slide the upside down image to the exact point where the two meet.

Now we need to make this reflection layer darker.
Go to Image > Adjustments > Levels

There is no exact number here, it depends on what you think looks good, and what image you are using. Use the slider to darken the image.

Finally, we are almost ready to create the gradient to fade out the reflection image. While clicked on the reflection layer, click on the Add vector mask icon at the bottom of your layers palette.

Next click on the gradient tool in your tool panel. You need your gradient to be the color of your background (in my case black) to transparent

Now with the gradient tool selected, click about halfway up the image, and shift drag up to the point where the two meet. Again, this is not an exact science. Try different start and end points until you get a reflection the color and height that you want.

So there you have it, your own apple reflection image!

I’ll show you a method of taking a collection of large photos and turning them into a panorama. Once you have a large panorama put together, there is still the problem of being able to put it online for others to use. You don’t want to have to make it 900px wide.. because obviously you will lose all the quality. Uploading it as a huge image file and having a scroll bar is no good, who is going to wait for that to load? I’ll show you the perfect solution to this problem.

Step 1 – Take Photos

Well you’re going to need photos to make a panorama! You can use a tripod with a camera, and take multiple photos as you turn the camera around until you reach the original position. Make sure to overlap the photos as you take them so there will be somewhere to blend. If you don’t care about them being perfect, or you don’t have a tripod on you, just hold it as still as you can, and turn in a circle as you take pictures. That’s the method I used when I took all these photos in St. Maarten last year. I actually like the effect it gives not having the top and bottom edges lined up, (you’ll see what I mean soon).

Step 2 – Creating the Panorama

Photoshop has a great build in tool to create the panorama with. It’s called Photomerge, and it’s under File > Automate > Photomerge.

Choose the folder that you have the photos in, and watch as Photoshop does it’s magic of combining and blending all the photos.

When the process is complete, you will have a file with the panorama, and a bunch of layers like this:

In this case I’m happy with the outcome, except for one area, my sister. Photoshop thought I wouldn’t notice if they blended half of her head in, but that’s sooo not cool. No big deal, 10 minutes of a little blending of my own and I fixed the problem. I then filled in a black page background and blended the edges a little.

Step 3 – Putting the Panorama on the web

So we have the panorama now, and we need to put it online. We will use another tool built into Photoshop, called Zoomify. This is located under File > Export > Zoomify.

The idea behind this tool is to take your large image, slice it into a ton of tiny photos, and put them in a viewer. When complete you will have a viewer for you webpage that lets you scroll around the picture, zoom in and out, all while not losing any of the quality of your photo. It loads the small slices as you go, so you aren’t waiting for one huge photo to load.

The tool lets you pick the color, size, etc.

Once it’s done this is what’s created, a folder with a .swf, .xml, and a bunch of image folders. Those folders hold the slices. It also creates a .html file, this is where you can view the Zoomify viewer.

As you use the viewer, you will see that as you drag the photo around, it loads the slices as you go. Pretty neat trick to make this work.
Click here to check out the finished product.

Check out Zoomify.com for more info about the tool. Hope you enjoyed the tutorial!

Update: Since this post I have created a couple more Panoramas using this process, they can be seen here.