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!

Digital cameras are so inexpensive now that there is no reason to not be taking photos at high resolutions. But what good is having these large photos when you need to make them tiny anyway to put them online?

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.