Using Photoshop To Mock A Web Design… then code it!

The .PSD file is the greatest tool and resource to any web designer. Sure, you could create a design from scratch, coding by hand with no help from The trusted and handy photoshop… and that’s even how I started… but I bet once you get the chance to learn the tips and tricks that I will point out

In this article, you will wonder how NOT using .PSD’s for your design is even possible.

Here is the sample design we are going to make:

You can download the Website Layout psd: Download psd Weblayout

First things first. Open your version of photoshop (I’m using CS3 here but CS2 is perfectly fine). Now to begin, lets first do something of personal Preference. This isn’t necessary but it may help you with the layout and arrangement of photoshops tools and menus… by changing your “Workspace.”

You can download the Website Layout psd: Download psd Weblayout

To do this, go to : Window -> Workspace and select “Web Design.” Now you see the Adobe Teams idea of a Photoshop workspace for Web Designers. It highlights Important menu items and arranges the tools that most web designers will use.

Now lets begin to create a layout, in which later you will code into CSS and XHTML.

In CS3 (and CS2 I believe) you can select resolution presets for the web. So hit CTRL + N to open a new document. Under “preset” select “Web.”

Now select “1024 x 768.” I choose that over 800 x 600 because the majority of visitors will be seeing your webpage in that resolution- you can

Code it to shrink to an 800 width later on.

Now with your document open in 1024 x 768, we are going to begin the creative process. We will start from the top down. So begin with the header.

Start a new layer (ctrl + shift + N). Select your marquee tool (M) and draw a region from the top left to the top right with the height of about 85px… or whatever You think looks nice.

Now fill in that layer with any color you prefer. To make this look more modern and trendy you can fill it in with a gradient. Try one of the “Web 2.0 Gradients”

On this website. To do this, right clik the layer and select ‘Blending Options’ then on the left side menu select ‘Gradient.’ You can choose which gradient You feel works for a header. Sample them all.

Once the header block is complete, create a new layer again (ctrl + shift + N) and, just under the header block, use your marquee tool (M) to create a new block For your navigation. Try a height around 30 – 35px. Then, repeat the steps above- filling in the color and selecting a gradient.

Now this is a good time to mention organization of .PSD files. In photoshop you have the option of creating folders for sets of layers or elements. To do this, find the small folder icon under the layers palette at the bottom right of of the photoshop window. Name these folders (and color code them if desired) with

a description of the type of elements they will contain, such as “header” or “navigation.” Then drag those layers into the corresponding folders.

This will keep you from having to scroll through the entire layer pallete to find that one layer that needs adjustments. It is also good for moving entire blocks Of layers and for hiding them temporarily.

Moving on with the design we are now going to draw a simple css box with an image. In the .PSD or screenshot above you will see this used as an “intro box.” Most websites or blogs use these to introduce the readers to their website or to update readers with important news and info.

So create a new layer (and folder if you are an organization freak like I am) and draw using your marquee tool the selected width/height and position Of the intro box. Now fill it in with your desired color. Once complete, right click the layer and go to ‘Blending Options.’ Find and click the ‘Stroke’ Option. Turn down the size of the stroke to 1px and change the color to something in the same color range as the background of this box- darker works Better.

For the image its just a matter of copy + paste into the right position.

Do the same for the sidebar. This is called “blocking out a design.” This will help you when coding the design. Also fill in a headline and mock up post under that.

This is just a sample and of course you can adjust and optimize this more and more… the real reason for this article is to go over those basics above and more importantly, Show you how to take a design and turn it into a working webpage with CSS and XHTML… WITHOUT “slicing.” I’m not a fan of slicing- and it’s pretty obvious why… simply Using your marquee tool with the layers makes much more sense.

Now go onto your webserver and set up a directory to test this out. I use the backend of wordpress to code almost everything since it is so versatile but You can use notepad/textpad or any text editor you feel comfortable with (if you’re really hardcore use ‘vi’).

Now how do we code this? Simple really. Like I said, all you need is your marquee tool and every element in its own layer in photoshop. So now with your

Text editor open lets make the header you mocked up above.

Select the height of your header to the exact pixel with your marquee tool. Select edit and “Copy Merged.” Now hit ctrl + n for a new image. Paste the background

Of the header that should be in your clipboard right now. Most likely your pasted image is a bit too wide. Lets select the entire image (ctrl + click the layer) and zoom In a couple times. Now using your arrow keys, hit left as many times until you cant see the blinking outline of the marquee tool- then hit your right arrow once.

Now you should just barely see it. Crop it. What you just did is select only 1px width of the hearder background image. You wont need any more then this- css Will do the rest.

Now save and/or upload this image to your webserver (you can do this locally first). Go back to your text editor.

The blank text document in your editor will be the .css sheet so lets save it as “style.css”. Open it back up and lets start the coding. Oh and by the way- keep That header background image open in photoshop.

Now first your going to want to do the basics of your css file like body { background:#FFF; } or anything else you may want to do- for this example it’s not necessary So lets skip it.

Create a css element called “#header” like so:

#header {

}

Now maximize photoshop again, and with that head background image open, select “Image” and then “Image Size” – take note of the height.

Use that height in the #header css element like so:

#header {

Width:100%; height:115px;

}

Also set the width to 100%. Now lets put in that background image and repeat it across the width of the page:

#header {

Width:100%; height:115px;

Background:url(img/header_bg.gif) repeat-x;

}

Save that and open another text document for our .html page. Save it as index.html when you are finished. In the index.html file set up your basic html tags:

<html>

<head><title>My Design</title></head>

<body>

Now add this division tag under that:

<div id=”header”>

</div>

Save and open index.html in your web browser to view the changes.

Notice you have the header…. Why that was easy wasn’t it?

Do the same for the nav… put the division (i.e.: <div id=”nav”></div>) right under the header nav. Repeat these steps until each box is on your webpage… And really you could close this article right now as you’ve learned how simple it is to make a web page using photoshop and css xhtml by just repeating these steps.

Next you’re going to want to learn about margins and padding, positions, floats and so on. Don’t worry- its not at all difficult. Practice this for awhile.

Try to create the .PSD you downloaded into a whole web-page… can you do it? Show us! Post it in the comments if you think you have the right skills… If not, don’t worry- repeat these steps with each element and you’ll get it sooner or later.

Next time we will go even further…

Download .PNG Files

Download .PSD (Photoshop) Files

How To Incorporate Into Wordpress

To incorporate this into your current wordpress theme you are going to have to do a slight bit of image editing and css as well as xhtml… but don’t worry, we’ve done most of it for you!

Editing In Photoshop (if needed)

First download and unzip the archive. Then pick out your favorite color and open it in photoshop. You will now “save as…” the file into a .gif to be titled “dateicon.gif”…. why are we doing this? Because your visitors using the unholy Internet Explorer 5 or 6 cannot view semi-transparent .png’s.

When you save the gif a dialog will appear. Select the dropdown box next to “Palette” and select “Local (Selective)”. Make sure the check box next to “Transparency” is ticked (checked). Now select the “Matte” drop box and select “White.” and click OK. Now you have a IE friendly transparent .gif. Upload it into your wp-themes/YOURTHEMEHERE/images directory.

Adding the CSS/XHTML To Wordpress

Log into your Wordpress Admin Panel and go to “Presentation.” Now click on “Theme Editor” and select “style.css” on the right side (this is usually brought up automatically).

Add this code:

.the_date {
display:block;
text-align: center;
float:left;
font-family: Arial, Helvetica, sans-serif;
background: url(/images/dateicons/dateicon.) no-repeat;
width:60px;
}

.date_m {
display:block;
font-size: .9em;
margin:0;
padding:0;
font-weight: bold;
text-align:center;
}

.date_d {
display:block;
font-size:1.4em;
margin:0;
padding:0.7em 0 1.3em 0;
text-align: center;
}

(thanks david!).

Also note your images directory might be named something other then “images” and your path will differ so keep that in mind.

After you’ve added the code above, click on “Main Index Template” in your theme editor and find a line containing the following partial code:

<a href=”<?php the_permalink() ?>

You are going to add this above or before that line:

<div class=”the_date”>
<div class=”date_m”><?php the_time(’F') ?></div>
<div class=”date_d”><?php the_time(’jS’) ?></div>
</div>

Now view your page and configure any changes you see fit.

And thats as far as i can take you! Enjoy. Some resources below if you are stuck…

Create a ‘Calendar style’ Wordpress date format
WP Date Image Hack

Gradients may very well be the most abundant and apparent feature used in web 2.0 websites, graphics, and logos. Here is my pack of Web 2.0 Gradients. I’ve had these to myself for sometime but it never occured to me to release them for public use until i saw this resource. Which is also a very good pack of web 2.0 gradients as well. I thought i’d go ahead and share mine. So enjoy, and hopefully they will come in handy and maybe save some of you some time!

Click to download…
To install:

• Simply save file into your photoshop/presets/gradients folder
• Open preset manager in Photoshop (EDIT -> PRESET MANAGER)
• Select Gradients from the dropdown list
• Select “Load” and load: euphorish_WEB20_gradients.grd

And your done!

other resources:
Some Nice Colour Gradients
Web 2.0 Gradient Download

Part 1: The “Easy” way

This technique is pretty straight forward and will give us a sort-of convincing “glossy” look to our buttons. Lets begin by opening up photoshop. Create a new image, any size you’d like… i tend to give myself a lot of room to work with then end up cropping my final outcome at the end. Then…

• Click the “Rounded Rectangle” icon (or press the “U” key)
• Create a rectangle about the size of the button you want (i used 223 x 63)
• Highlight the button/shape by Ctrl + Clicking the layer
• Right click the layer and go to “Blending Options” (or: Layer > Layer Style > Blending options)
• Select “Gradient Overlay”

And inside the gradient overlay options, click on the gradient to create a gradient similar to the one shown below (click here to learn how to make a gradient):

Part 2: A little more convincing…

Now with what we have from above, we are going to edit and add a little to make this look a little better. Do this by going back to the gradient overlay options (layer > layer style > gradient overlay) with the buttons layer highlighted (ctrl + click the layer). We are going to change the gradient to a more conventional pattern (very easy!) by clicking back on the gradient in the ‘gradient overlay’ options menu (just like before) and we are going to spread out “stops” on opposite ends like so…

Part 3: Now thats what I’m talking about…

Ok, we’ve done it a couple different ways and it looks alright, but we really want this to look “glossy” not just duo-toned… i mean people can’t be fooled that easy. Well for this last step we don’t have to do much… it’s really easy.

• CTRL + Right Click your “Gloss Layer.”
• With it selected, hit your “Delete” key to remove the white
• Select your Gradient tool

Now… Double click on the gradient on the upper left side of your program:

Lets start by showing you what grunge is typically used for in graphic design:

Before:After:Note: Click to enlarge

• Mayang’s Free Texture Library
• TextureKing
• Texture Library
• Texture Warehouse

Pick one with a lot of dirt or corrosion. Now we are going to have to adjust the image most likely to get rid of some color and bring out the “grunge” in it. Follow these steps….

Open up the image photoshop:

• Go to Edit > Preset Manager
• Highlight Brushes in the drop down menu
• Hit Ctrl + A to select all
• Select ‘Delete’ (This WILL NOT permanently delete any brushes!)
• Close the Preset Manager

Now we have a blank slate to add our brushes and make them into a set. Now with your grunge selected, go to Edit > Define Brush Preset. Now name it whatever you like and click ok. Thats it! You have your first grunge brush. Repeat this as many times with different selections to create a whole set. When your done however, make sure you open up your brushes and save them to their own .ABR file. You can do this by going back to the preset manager (Edit > Preset Manager) and highlighting them all and clicking ‘Save Set…’

Easy enough huh? Now open up your favorite piece (or make a new one) and start adding grunge. You can either go around the edges or add it everywhere to your photo. But wait! Theres a lot more you can do with it!

Heres a couple ways grunge can be used other then dirtying up that picture of your cat.

One cool effect of grunge is to add a sense of ‘decay’ to a picture or more specifically a picture of a persons face. This is accomplished by either finding a photo online (search for “dry dirt”) and simply “overlaying” it on top of the photo. This is done by by opening up the original photo, then pasting the texture on top of that layer and selecting the “overlay” option on the layer. Then using the eraser tool to go around the persons face… chances are you have something eerie. Just tweak it over and over till you have it right… thats all you have to do, you should get something like this.

Another thing is to single out one part of an image with surrounding grunge and effects. Similar to this.

There are a lot of cool things you can do with grunge… my best advice is to just practice.

Note: for this tutorial we will be using the “Gradient Tool” located on photoshop’s Tools menu, or by pressing the “G” key as a shortcut. There are however, many other ways to access and create Gradients, such as through Layer > New Fill Layer. Layer > Layer Style, and Layer > New Adjustment Layer… but using the Gradient Tool (G) allows for more control over your gradient placement(s) and plus its right there and easier to use!

Making Gradual Two Toned Gradients

A two colored gradient is the simplest gradient to create but is also, in my opinion, the best looking as it doesn’t add too much noise to a picture or background. They allow for easy contrast between the background and the foreground of an image, allowing you to “show off” the main part of your creation, whether it be a graphic or web page.

Remember in this article we are learning how to make better gradients. So we are going to set up some “rules” here and maybe explain a little more about how to pick the colors for gradients. I’ve seen some horrible looking gradient patterns… just look at some of the default photoshop presets and you should see my point. Any color can be made into a slick looking gradient but you have to pick a color close enough to the original to make the transition between the two colors work. Picking a bright red color to transform into a bright blue will always look bad but picking a dark colored blue to transform into a slightly lighter colored blue (see above) will always work and look nice. This is even easy to do so lets begin…

Making A Better Gradient

Well thats the basics on creating a two color gradient but like i said before, we are here to discuss making better gradients. There are so many ways to make gradients its too much to cover everything here so we’re going to stick to a certain path by going over different techniques and try and cover the grounds that way. So lets begin already.

Lets talk about color tones and ways to choose them. Lets start with an experiment. Open up the gradient editor and double click your first stop. Now select a random color, any color and copy its hexadecimal code. Now close it and click the next stop (note: make sure they are far left to far right for this), now paste its hexadecimal code to have to same exact color selected. Now click one of the textboxes labeled “H S B” “R G B” “L A B” and “C M Y K”… for example, select ‘B’ in the HSB. Now hold down shift, and press your up key about 2 – 4 times (try this with other directions and selections). Chances are you have a perfectly good looking gradient. Easy, yes, fun? not really but you get the point. Stay close to the original color while making the different tones obvious. Now that we got that out of the way lets have a little more fun with gradients.

Techniques

There is all the hype going around about “Web 2.0.” It’s definition, which used to be pretty obvious is now getting a little more blurred as it grows on but we are going to use the term to describe what a lot of people call “Web 2.0 Colors.” They make for nice looking webpages and graphics that really stand out. Fortunately for us, this is a very basic concept and easy to re-create.

Lets start by using gradients in a slightly different manner. We’ll do it by creating a simple logo for a webpage. Follow these basic steps to begin…

• Start a new image (file > image > new).
• Select the size to be something around 380 x 170. (to give you room)
• Select the Text Tool (T).
• Press the “D” key to default the colors.

Now lets write a name for our logo. Call it whatever you please, i used the name of this site. Now choose a font. Almost any will do but i suggest something somewhat simple. Once this is done, rasterize your type layer by going to Layer > Rasterize.

Now we are going to make a gradient for our colors to use on our logo. Start by opening up the gradient editor. Click the first stop and choose your color, use something bright . I’m using a blue (# 0071b5) for the first color and using a darker blue (# 0284d1) for the second color.

Now place both stops in the center of the gradient (both at about 50%), see image below:

Description: Introducing “Vector Storm” a small brush pack for Photoshop 7+. Includes clouds, lightning, rain drops and lines, rainbow etc. etc.

Terms of Use: None required but a comment or link back would very well appreciated.

Installation: Download File to your ‘…photoshop/presets/brushes’ folder and load from the brush menu in PS.

Enjoy!

(Note: Click download link on left menu)