Website Design Mockup Tips

This tutorial will show you a few tips, tricks and techniques you can use when mocking up your next website. When mocking up a website design, there are a few design elements and styles that are really easy to create in code, but may not be as obvious when working in Photoshop.

Borders and Underlines

It’s incredibly easy to create dotted (and dashed) underlines and borders with some simple HTML and CSS. Let’s start with a dotted underline.

Dotted (and Dashed) Underlines
Create a new document 2-pixel wide by 1-pixel height. Make sure the background is set to [Transparent].

Zoom in as close as possible (1600%) by pressing [Ctrl + Alt + =]. Draw a 1-pixel dot, using whichever method you prefer.

Press [Ctrl + A] to select all and go to [Edit > Define Pattern] and give your new pattern a name.

Back to your website mockup, create a new Pattern Fill Layer [Layer > New Fill Layer > Pattern...] or use the icon at the bottom of the Layers palette [F7]. Choose your newly created 1-pixel pattern.

Press [D] to reset your colors and press [Ctrl + Backspace] to fill your new pattern layer mask with black.

Choose the Line Tool and in the Options Bar select the [Fill pixels] button.

Set your foreground color to white and draw a line wherever you want a dotted underline to appear.

NOTE: Our favorite web-browser Internet Explorer doesn’t do dotted underlines, they do dashed. To do a dashed underline, use the same technique but make a 6-pixel wide document with a 3-pixel wide line.

Dotted Borders
Create a new document 2-pixels by 2-pixels. Zoom in as close as possible and draw two dots on opposing corners.

Select all with [Ctrl + A] then go to [Edit > Define Pattern...] naming your pattern something you can remember.

Create a new [Pattern Fill Layer] and fill the layer mask with black.

Now you can draw your square-selection wherever you would like your border.

Go to [Edit > Stroke] and set the Width to [1px]. Press OK and you now have your dotted border.

Text and Fonts

Accurately simulating font behavior can be a tricky task. Differences are dependant on the user’s machine, browser and settings. One of the hardest feats is determining when a browser is going to apply anti-aliasing to a font on a website.

Luckily for you, I went ahead and created a quick page showing some of the more common fonts in various sizes, so you can see at what size they anti-alias.

Font Size Quick Guide .

My suggestion would be to view this page on a few different machines and browsers so you can accurately determine what settings you need in your mockup.

I like the way the 11pt Verdana looks, so that’s what I’ll use in my mockup. Create a text block by clicking-and-dragging the Text tool [T].

Open the Character Palette by going [Window > Character]. Here’s where all of the font settings are. I’ll plug-in my settings, making sure that the Anti-aliasing is set to [None].

Then I can paste in my text and get a fairly accurate representation of how it will look in living HTML.

Using my handy guide, I’ll go ahead and create some header text.

Managing Colors

Fill Layers and Clipping Masks are huge time-savers and some of my favorite features in Photoshop. Let’s put these features to use to manage the colors on our mockup.

Start by creating a Solid Color Fill Layer by going [Layer > New Fill Layer > Solid Color...] or using the button at the bottom of the Layers palette. Choose whatever color you want.

The trick to using Clipping Masks is that the color layer has to be above the layer you want to mask it to in the Layers palette. Like this:

With your color layer selected in the Layers palette press [Ctrl + Alt + G] or go [Layer > Create Clipping Mask]. Your color layer will now be shifted to the right with a tiny down arrow.

Now your color layer is only shown where the layer it is clipped to has content. Like so (the dotted lines in the nav):

The best part about this technique is how easily you can change the color of an element, just by double-clicking on your Color Fill layer and changing the color.

Image Masking

Another great thing about Clipping Masks is that you can use them for more than just text layers, you can use them on any layer really.

I’m going to add an image into that dotted square, but at this moment, I’m not exactly sure what image. So, I’ll create another Solid Color Fill layer and name it something like “Image Placeholder”.

Now I can drag any image onto a layer above my “Image Placeholder” layer and apply a clipping mask. You can even stack the “clipped” layers.

Hopefully these quick and easy techniques will assist you the next time you’re mocking up that next $200-million dollar, Google-buyout website. Of course, I’d appreciate any tiny percentage of that buyout if it happens

And once again…
MASTER FILE DOWNLOAD
I’ve decided to make my master .PSD file for these tutorials available for download.
Download the Website Design Mockup Tips Master PSD file (403kb ZIP).

* Images courtesy of stock.xchng

Lightbox 2.0 Web Photo Gallery

Start by duplicating the “Simple” preset folder (or the “Lightbox” folder if you created one already) in your [Presets > Web Photo Gallery] folder. Rename the duplicated folder to “Lightbox 2.0″ and create a folder within that called “images”. Visit the Lightbox JS v2.0 website and download the necessary files. Drag the supporting Lightbox 2.0 images, stylesheets and javascript files (from your download) into the “images” folder.

Open the [Thumbnail.htm] file, located in the “Lightbox 2.0″ folder, in your favorite HTML or text editor. Set the anchor tag to:

• <a href="%IMAGEPAGE%" title="%CAPTIONTITLE%" rel="lightbox[gallery]">

Open the [lightbox.js] file, now located in the “images” folder. Find line (approximately) 331 where it says

• imageArray.push(new Array(imageLink.getAttribute(‘href’), imageLink.getAttribute(‘title’)));

And add/change that line to:

• imageLink.href = imageLink.getAttribute(‘href’);
• imageLink.href = imageLink.href.replace("/pages/","/images/");
• imageLink.href = imageLink.href.replace(".html",".jpg");
• imageLink.href = imageLink.href.replace(".htm",".jpg");
• imageArray.push(new Array(imageLink.href, imageLink.getAttribute(‘title’)));

Then find line (approximately) 343 where it says:

• if (anchor.getAttribute(‘href’) && (anchor.getAttribute(‘rel’) == imageLink.getAttribute(‘rel’))){
•  imageArray.push(new Array(anchor.getAttribute(‘href’), anchor.getAttribute(‘title’)));
• }

And add/change to:

• if (anchor.getAttribute(‘href’) && (anchor.getAttribute(‘rel’) == imageLink.getAttribute(‘rel’))){
•  anchor.href = anchor.getAttribute(‘href’);
•  anchor.href = anchor.href.replace("/pages/","/images/");
•   anchor.href = anchor.href.replace(".html",".jpg");
•  anchor.href = anchor.href.replace(".htm",".jpg");
•  imageArray.push(new Array(anchor.href, anchor.getAttribute(‘title’)));
• }

A little below that, you’ll want to find:

• while(imageArray[imageNum][0] != imageLink.getAttribute(‘href’)) { imageNum++;}

And change it to:

• while(imageArray[imageNum][0] != imageLink.href) { imageNum++;}

Save your edited [javascript.js] file. Run your new Web Photo Gallery through Photoshop.

Fun with Transparent PNG Images

Transparent PNG images have been always been a great tease to web designers. This tutorial will show you a few tricks to working with transparent PNG files.

Transparent PNG’s themselves are great, it’s their lack of support from the most used web browser in the world that makes them flawed. Thanks Microsoft! Until the new version is widely adopted, which I predict should be a few years little longer than most developers would like, we can resort to using a nice Javascript to cure our transparent-PNG-in-Internet-Explorer woes.

Another hassle, recently brought to my attention, is the gamma correction that some browsers like to apply to PNG images. Here are two very useful links on how to correct the gamma correction problem that plagues less “modern” web browsers.

The Script

Download the PNG examples, including the Javascript here

The PNG repair script for IE works by taking an image and replacing it with a span tag. It then takes the image source and sets it as the source for the AlphaImageLoader filter used by IE.

PNG Framing

The pngFrame function works by finding images with a class name “frame” and setting the background of the image the same as the source. It then sets the original image source as the PNG frame image. Let’s see it in action:

» Example 1
» Example 2
» Example 3

Pretty cool, huh? Let’s get Photoshop-ing…

Photoshop

The one downside to this whole thing is that it lacks some flexibility. Depending on the design, you might have to match the background color of the page that the images are on in the “frame”. This might become a hassle on patterned backgrounds. But, on the upside, it has a lot of great uses… only as extensible as your creativity.

Let’s first see how I made the Example 1 image.

Added a Solid Color Fill Layer [Layer > New Fill Layer > Solid Color]

Masked out the rounded corners.

Duplicated the layer with [Ctrl + J], then moved it slightly left and up.

Lowered the duplicated layer’s Opacity to 75%.

To create the PNG “frame”, I hid the Background layer by clicking on the Eye-icon in the Layers palette [F7]. Then I saved it for web as a PNG-24 with transparency [Ctrl + Alt + Shift + S].

How to Use

1) Download the png.js file (and supporting examples) here (.zip 49kb)

2) Upload to your web server and integrate into your website.

Put this code in your <head> tag, making sure the paths are correct:

• <head>
• <script type="text/javascript">
•  var png_overlay = ‘ripped_frame.png’;
•  var suffix = ‘_over’;
• </script>
• <script type="text/javascript" src="png.js"></script>
• </head>

Then add the “frame” class to ANY image you want to transform:

• <img src="images/my_image.jpg" alt="my image" class="frame" />

Rolling Over

Another cool feature of this script is the ability to easily add rollovers to your “frames”. All you have to do is give your image the additional class name of “rollover”:

• <img src="images/s60r01.jpg" alt="S60R framed" class="frame rollover" />

Then just create an image for your rollover state with the suffix you set in the Javascript (above). EG. normal = “roll.png”, rollover = “roll_over.png”.

Check it out in action in Example 3.

There are a ton of uses I can imagine for this, patterned overlays, dynamic cropping, watermarking, etc… Hopefully you can find a couple good uses for it yourself!

Top 7 Photoshop Keyboard Shortcuts for Productivity

This is a list of my top 7 (or so) favorite and most used Photoshop keyboard shortcuts. Some might be obvious to you, some you might already know, and some might be new to you. Feel free to add your own below.

There’s nothing more damaging to your productivity than having to wrestle with the program you are using to get it to do what you want. Searching for tools or buttons is a task that can easily be bypassed with some quick memorization of shortcuts.

Undo, Multiple Times

[Ctrl + Alt + Z]

Most programs allow you to press [Ctrl + Z] multiple times to perform multiple Undo’s, but Photoshop requires [Alt], otherwise you’ll just keep undoing then re-doing then undoing then re-doing then undoing then re-doing.

Hand/Move Tool

[Spacebar]

Holding the spacebar will turn your cursor into the hand in almost any situation… when using different tools, with dialog boxes open, etc… allowing you to quickly navigate your document no matter what you’re doing.

Switch Document Windows

[Ctrl + Tab]

Your Photoshop workspace can become a mess when working on multiple files, especially when you hate minimizing, like I do, so being able to switch windows quickly is a must.

New Layer

[Ctrl + Shift + N] – with dialog
[Ctrl + Shift + Alt + N] – without dialog

Layers are the greatest thing(s) ever invented in any (design) program and being able to manage your layers properly is important. I’m Errorphobic, which makes me a layer junky, which also makes this a favorite shortcut of mine.

Duplicate Layer

[Ctrl + J] – without dialog
[Ctrl + Alt + J] – with dialog

You can duplicate an entire layer, or, if you have a selection, the selection will be duplicated to it’s own layer. This is great when trying different techniques or effects without having to worry about errors (Errorphobic, remember?).

Zoom In/ Zoom Out / Fit to Window

[Ctrl + =] – zoom in
[Ctrl + -] – zoom out
[Ctrl + 0] – fit to window

When you’re slightly obsessive and need to get that 1-perfect pixel zooming in and out quickly is a necessity to achieving that perfection.

Re-run Filter/ Fade Filter

[Ctrl + F] – run filter again
[Ctrl + Alt + F] – run filter again, with dialog
[Ctrl + Shift + F] – fade filter

Even though Photoshop provides preview windows in the dialog box for most filters, there’s still no true way of telling whether you’ve achieved your desired effect until you see the full image. If something goes wrong, you can quickly undo, then go back to your filter and try again without having to go through the hassle of moving your cursor. Or, if your filter effect is too intense, you can quickly fade it down without having to re-adjust the filter settings.

Making Your Own Shortcuts

These shortcuts may not be on the top of everybody’s list, but that all depends on your project and workflow. Luckily, Photoshop allows you to custom tailor your own Keyboard shortcuts to suit your needs. Just press [Ctrl + Alt + Shift + K] or go to [Edit > Keyboard Shortcuts].

The Elegant Studio Shot

This tutorial shows a quick way to take your normal, boring product shot and make it look more professional and elegant. This isn’t a new trick, but it’s a really quick process with Photoshop.
Open your image. I started with this photo of a banana (PhotoSpin #0250025). I masked out the banana and slightly rotated it.

Behind my banana layer, I added a Gradient Adjustment Layer. Adjust the colors to something yellowish, or whatever color you want, and fading to black.


Set the Gradient Adjustment Layer to Style: Radial. I increased the scale to fit my banana better.


Make a rectangular selection on the lower 1/3 of your image. Add a new Solid Color Adjustment Layer under the banana layer and above the Gradient layer. Fill it with black.

Select your banana layer and press [Ctrl + J] to duplicate it. Select your lower, original banana layer and press [Ctrl + T] to bring up the free-transform. Right-click on your bounding box, and choose “Flip Vertical”.

Drag your new, flipped layer down, so that the bottom of the top layer, matches the top of the bottom layer. Confused? Picture:

Click on the Add Layer Mask button on your Layers Palette or go [Layer > Add Layer Mask > Reveal All]. Select the Gradient Fill Tool [G] and select your default colors [D]. With your Layer Mask selected, drag your Gradient from top to bottom until you get a nice reflective effect.

And that’s pretty much it. I explained it out in this tutorial, but it’s a few quick steps for a nice effect.

Creating Sunsets with Silhouettes

This tutorial will show you how to take your regular beach day photo and turn it into a beautiful sunset silhouette. Oh, and this is my 30th tutorial.
I started with this photo from BigStockPhoto.com (Couple by Dimitrii). It’s a perfect photo, since the couple is in the foreground and there are no distracting objects.

Start by selecting the people in the foreground. This doesn’t have to be an exact selection… but the closer the better. It’s also better to have a little outside of the lines than in. I made my selection by using the Quick Mask [Q] and, using the Brush Tool [B], painting away the red.

With your selection made, create a new Hue/Saturation Adjustment Layer [Layer > New Adjustement Layer > Hue/Saturation]. Drag the Lightness all the way down to -100. (NOTE: You don’t HAVE to go to -100. Leaving it a little higher will allow your objects to show more.)


You should end up with something like this:

Beneath your Hue/Saturation Layer… you’re going to create another Hue/Saturation Adjustment Layer [Layer > New Adjustement Layer > Hue/Saturation] with the same setting of Lightness: -100.
Your image will be black. Select the Gradient Tool [G] and press [D] to set your colors to default. Choose the default Black-to-White gradient.

Make sure your layer mask is selected on your new Hue/Saturation Adjustment layer.

Now, drag the gradient from bottom to top. Do this until you get the effect you like.

Below these two layers, create a Solid Color Adjustment layer [Layer > New Fill Layer > Solid Color]. Set the color to a dark orange color. I used #f78733.
Set the Layer Mode to Color Burn.

If the color is too dark or too light, just open the Solid Color Adjustment Layer and mess with the colors til you get something you like.
Now, to create the glow of the sun. Make a circle selection with the center near the horizon.

Create a new Solid Color Adjustment Layer and select a yellow color. I used #f4bc12.

Run a high Gaussian Blur of around 25-pixels or so. [Filter > Blur > Gaussian Blur]. Make it enough of a blur so you can’t see a hard edge in your circle. Set the Layer Mode to Lighten.

Make a trapezoid shaped selection, with the small end being at your horizon.

Create a new Solid Color Adjustment Layer below the orange-color layer. Fill it with the same yellow you used for the sun. Again, I used #f4bc12.

Run a Gaussian Blur [Filter > Blur > Gaussian Blur] (or [Ctrl + Alt + F]) of about half the amount you used earlier. I used 15.
Set the Layer Mode to Linear Light and reduce the Layer Opacity to around 50%.

In case you got confused on the Layer order, here’s a shot of my Layers Palette.

So there’s a relatively quick way to turn any photo into a Hallmark sunset photo.

Make Your Amateur Photos More Professional

With everyone and their grandmother having a digital camera you can make almost anybody look like a professional photographer, well, better-than-amateur at least. You can use this simple process on almost any photo you take.
Let’s start with our regular, old, point-and-shoot photo. This one was taken with a little higher-end camera, but it can still use a lot of work.

First, we’re going to sharpen our image a bit using the Unsharp Mask [Filter > Sharpen > Unsharp Mask]. We don’t want anything too drastic, so I used some low settings. Amount: 40%; Radius: 0.9 pixels; Threshold: 1 level. You basically want enough to make a difference, but you don’t want any glowing or hard edges.


Now we’re going to add a Levels Adjustment layer [Layer > New Adjustment Layer > Levels]. When the Levels dialog opens, just click on Auto. A lot of people frown on the Auto Levels, but if you don’t know what you’re doing, they’re a lifesaver.

Next step is to add a Brightness/Contrast Adjustment layer [Layer > New Adjustment Layer > Brightness/Contrast]. Increase the Contrast a little bit, 10 is usually a good standard amount. Too much and it looks fake.

One more adjustment layer… the Hue/Saturation Adjustment layer [Layer > New Adjustment Layer > Hue/Saturation]. Increase the Saturation very slightly. I usually never use more than 5-6.

Now you can probably already see how much of a difference these few steps make. One of the features of Photoshop CS is the Photo Filter Adjustment layer. I went ahead and added a Photo Filter Adjustment layer [Layer > New Adjustment Layer > Photo Filter], with the default Warming(85) setting.

It’s a subtle change, but it usually makes the photo look nicer.

You can stop now and still end up with a nice photo, or you can continue on to add a little bit of background blur.
I’m going to start by duplicating my Background Layer [Ctrl + J]. Then go to [Filter > Blur > Lens Blur]. I left the settings default, and just lowered the Radius down until I get a decent, but not too drastic blur.

Now add a Layer Mask to your blurred layer [Layer > Add Layer Mask > Reveal All] and paint the focal areas black to hide the blur. Once you’re done, you can even alter the opacity of the blurred layer to reduce the amount of the blur.
Here’s a comparison to the original:

Original:

Retouched: