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.”

Photoshop to mock a website

[ad#post-ad]

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…

]]> http://www.billbailey.co.nz/photoshop-to-mock-a-web-design-then-code-it/feed/ 0 http://www.billbailey.co.nz/logos-logotypes-and-typefaces/ http://www.billbailey.co.nz/logos-logotypes-and-typefaces/#comments Wed, 14 Mar 2007 00:40:26 +0000 http://euphorish.com/2007/03/logos-logotypes-and-typefaces/ Every start-up company and website must distinguish itself from the crowd aesthetically. The most important way of doing this is to accomplish the great feat of creating a unique logo for yourself. This is no small job and it’s importance is immense.

A logo is the key to setting you apart while keeping you from being lost in the torrents of new start-up companies. Your logo must be recognizable and distinguishable while memorable enough to a person that he or she will automatically associate that logo with your company or website. It should, more importantly, be associated with quality. You’re not just creating content, you are creating a brand. It makes no difference if your product is sports shoes or technology reviews, you are still a brand.

Let’s discuss the current trend of new internet companies and web apps today. It’s labeled as “Web 2.0″ which means many things (the “re-birth” of dotcoms, Ajax enables web apps etc. etc.), but one thing that all web 2.0 companies have in common is design. While they all are somewhat similar, each are unique in many ways. You can recognize their logo as being “web 2.0″ but you also recognize its unique real estate within the crowd of this emerging trend. We are going to take a note of these designs as we discuss techniques of creating unique logos, logotypes, and typefaces.

The Logo’s of Web 2.0

While you can’t exactly define the style of Web 2.0 there are certainly some similarities…

(Click to enlarge)

The New Age of Typefaces

Typefaces are the most important feature of a logo and website. They should collaborate with the visual presentation of your content. Note that we are using the term “typeface” in place of “font”… The distinction between font and typeface is a font’s status as a discrete commodity with legal restrictions, while typeface designates a visual appearance or style not immediately reducible to any one foundry’s production or proprietary control. [Wikipedia, “Logotypes”]. As for fonts, there are many readily available to download and use for your logo if you are not willing to go down the path of creating your own. Below are some examples for download-able web 2.0 style fonts:

Delicious

Fontin Sans

FF Clanâ„¢

NewMedia

Union

JustOldFashion

The typefaces of today are bigger, bolder, and are usually high contrast. With some added brightness in color, some detail you can create a very unique and outstanding logo. Try some gradient overlays and add some gloss.

Detail Detail Detail

What do all great logos have in common? Detail. You don’t have to go overboard… in fact this is more of a practice in minimalism. One single detail in position to your typeface can really make your logo stand out. Contrast is key. Take this logo for instance:

Vector?… Raster?… Resolution???

A common question in logo creation is whether to create you logo as a vector graphic, or a raster graphic. There are multiple answers to this question. It depends on where and how you are going to use the graphic. Creating a Vector based graphic in a program like Adobe Illustrator or InkScape will usually be the better choice as it can be resized and printed always with its quality intact and without having to worry about resolution. They are also a little more daunting to create for many people, and if you are only going to use this logo on the web then using a raster based program like Adobe Photoshop is perfectly fine.

When is vector not a good choice? When your graphic contains photograph like imagery. Vector images cannot display the detail as pixel-based or raster graphics can. For logos, this is usually not a problem since most logos do not have a photograph of a house in the background and so otherwise Vector is the right way to go. The best practice for any logo is to make a Vector “master” graphic (in case you need it resized for business cards, letterheads etc.) and just save them in web style (.png/.gif) for use on your website.

Still going with raster? What about resolution? Well if you are going to create a master logo in a raster/pixel based program like Photoshop and you still plan on printing and using this logo outside of the web then it’s resolution becomes a factor. When creating an image in Photoshop (and most raster based paint programs) the default setting is 72 ppi (pixels per inch), which is perfectly fine for display on a monitor… but not on paper. When opening a new document, make sure you set the resolution to somewhere between 225 – 300 ppi. All printers are different and referring to the manual is always a good way to find exactly what ppi setting to use. Also note that the higher the ppi/dpi, the larger the file and the more memory it takes just handling the file.

The Process of Logo Creation

Don’t get frustrated if you cannot create or even think of the perfect logo right away. This usually takes some time. The best process is to first use a pencil and paper (remember those???) and draw out some sketches or ideas. Start small, start with the font/typeface then work your way to adding an icon and then throw in some detail. Sign up for an account at LogoPond and upload your work-in-progress… you will get some help and constructive criticism. Most importantly, if you get “Designers Block”… get off your computer, go outside, take a drive… do anything away from your monitor and you will see how quickly it will come to you.

Good Luck, and i hope this article helped you get a better understanding of the daunting task of logo creation! Check some of the resources below for some ideas and inspiration…

More resources:
LogoPond – Identity Inspiration
Thinking With Type
Brand of the World
InkScape
Miš i Pile: Logo Design Portfolio

Works cited:

“Typeface.” Wikipedia, The Free Encyclopedia. 16 Mar 2007, 09:40 UTC. Wikimedia Foundation, Inc. 21 Mar 2007 <http://en.wikipedia.org/w/index.php?title=Typeface&oldid=115521101>.