Designing a realistic stainless steel background in Photoshop for use in print or web design is a rather painless process. In this tutorial I’ll show you how to make your own stainless steel effect in a few simple steps.

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.

Here’s a quick way to further enhance the branding of your website. If you don’t have an iPhone go get one. Then try bookmarking your website; (go to a website in your iPhone Safari browser, hit the + symbol, and hit “Add Bookmark“). What this does is take a small screenshot of the webpage and add it to your iPhone, right next to the other icons you have.

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“!

Using an unordered list is a simple and easy to style method of creating a navigation bar. Now with CSS3 and round corners created by the browser, it’s even easier to make a nice and clean nav. I introduced CSS3’s border-radius in a previous post, located here.

Check out the example I created, and then keep reading to find out how to create the above nav with nothing more than some CSS.

View Demo

First create your unordered list in your XHTML.

The first thing to do with your CSS is to make your unordered list display on the same line, and with no bullet points.

The next step is to style the links. We’ll add some padding around the links to space them out, and to give the background color the width and height we want. On the hover state of the links I made the border appear as you roll over the link.

You’ll see I made an “active” state for the current page you are on. I set the cursor for the active state to be the “default” cursor. This is so when you roll over the link of the current page you are on the pointer cursor will turn into the arrow, giving the illusion that it isn’t a link (even though it really is).

So there it is, with this basic foundation and your imagination you can make a variety of looks for your navigation. Enjoy!

So you know what a favicon is..right? At least pretend you know what it is.. it’s the little picture that shows up in your browser bar right next to the domain name of the website you’re on. In this example you can see how the WebDesign&Such favicon appears in the browser bar and in the Firefox tab. You can also see the Smashing Magazine favicon (free shout for those guys).

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.

On my portfolio website I have an About page, where I explain… who I am of course! So I have a picture of myself in the sidebar, but got the idea that it’d be nice to have the picture change randomly on page load. I looked around at a few different options. Some were Javascript, some were PHP. It wasn’t worth turning the page into a PHP page just for this effect, so I went with Javascript. There are a lot of different options, but here’s the one I went with.

I made a div to surround the image, with the class of “me-box”. I gave this div a border, so the images will all appear to have a border when they are loaded. Next comes the Javascript code. This is where you give the src to your images. This code is put right in the body of your page where you want the images to appear, not in he head tag. A quick little piece of code that got the job done exactly like I wanted!

See the random image loading in action.

Here’s an interesting way to add a CSS stylesheet switcher to your website. I’ve used stylesheet switchers in the past, but this one is different. In the past I had a button to press, which in turn switched the stylesheet of the page. This one switches the sheet at a certain time of day, which I think is pretty cool. My website uses clouds in the header, so it was just begging for me to make a “night” version of the header which would automatically switch on at night.

The first thing to get is the Dreamweaver plugin from the guys over at Kaosweaver. Here’s the link to the plugin. Once you download and install that, open up Dreamweaver and the page you want to apply the style switcher to. Under Commands, you’ll see Style Switcher Lite.

Click on that and this little box pops up.

This is where you set your day and night stylesheets, and set what time of day you want the sweets to switch. What you do in the stylesheets is up to you. You can change colors, background-images, the options are endless. For the effect I wanted, I changed the background images of two things.. the clouds and the buildings (Boston skyline), which floats in front of the clouds.

So there you have it, here are the two versions that you’ll see at BeantownDesign.com, depending on what time you’re looking at the website.

Here’s a problem I came across for the first time the other day. If you code CSS / XHTML, you most likely are familiar with the Superscript  and Subscript  tags. While coding a site I used the Superscript tag, but I noticed a problem when viewing the page in browsers. The problem was that by pushing the text above the line (Superscript), the spacing in between the lines (line-height) was uneven; the Superscript characters were pushing the line of text it was in further away from the line above it.

Example:

To fix this problem, set the line-height of the Superscript (or Subscript) to zero in your CSS. Here is the code you need.

sup, sub {line-height:0px}

If you’re a webdesigner you most likely use Photoshop to create mockups of webpage designs for your clients. One technique I use in a lot of my website designs is dotted borders. They add a lot more visual interest than a regular underline, and work great to break-up sections of content.

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!

The other day I was cutting and coding a website for a bank. One feature that was in the header was the current date, which would update daily (duh). I know in a previous project I had done this with Javascipt, so I back-tracked and got the code I used before. Here is the code, which will print the date on your web page in the following format:
July 18, 2009

The first step is to link your XHTML page to the external Javascript page, which has the code which will make it all happen. Paste the code below in the Head of your page.

Link to external Javascript File

<script type="text/javascript" src="js/date.js"></script>

Next up is the make this Javascript page that you just linked to. Paste the following code inside a new javascipt page, and save it as “date.js” inside your “js” folder. You can of course use different names, just make sure you link them up correctly.

Here is the code for your Javascript File

// JavaScript Document

//--------------- LOCALIZEABLE GLOBALS ---------------
var d=new Date();
var monthname=new Array("January","February","March","April","May",
"June","July","August","September","October","November",
"December");
//Ensure correct for language. English is "January 1, 2004"
var TODAY = monthname[d.getMonth()] + " " + d.getDate() + ", "
+ d.getFullYear();
//---------------   END LOCALIZEABLE   ---------------

The last step is the put the following code in your XHTML file where you want the date to be written. The id="date" that you see is for the CSS styling of this text. You can rename or remove it if you are styling it differently.

Paste this inside your XHTML file

 <p id="date">
<script language="JavaScript" type="text/javascript" >
document.write(TODAY);</script></p>

So there it is.
You can view a live example here.

I also packed this up into a zip so you can download and have all the files; including the XHTML, CSS, and JS.
Download the zip here.

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!