You are currently watching my old blog - the new is located at: blog.theundersigned.net

The undersigned

Webdesign mockup using Photoshop

22/05-2006 | 14:28
71 comments

In addition to my webdesigning workflow articles , I was encouraged by pnts to show an example of how I handle the photoshopping steps.

Don’t read this article as a tutorial from idea to final product, but start by reading these two articles, and you will find out that the mockuping is only a phase in the designing process:
My web designing workflow
My web designing workflow - part 2

The technique used can differ a lot, especially between fluid and fixed designs. To show an example I have taken some screenshots from a project I am currently working on. I won’t write a lot of text, but focus on showing the process through pictures.


The final/current mockup
 

The site itself is targeted at users with a 1024+ screenresolution, and the content has a fixed centered width of 900px. I started out by creating a blank file in 1024×768px, white background, adding a bunch of rulers with the distances I decided on paper.


Rulers added - now I know my borders
 

I start out from the top - creating a layer group called header, where I in sub layers and sub layer groups create and place all the different elements.


Layer palette showing the header layer group
 


1024×768 document with header
 

Next step is the content - basically the same technique as before, creating a layer group with two sub layer groups - one for the content, and one for the sidebar.


Layer group containing the first post / main content. Some random words are highlighted to show the link color.
 


A duplicate of the layer group above makes it easy to create a view of »multiple« entries. Picture shown with rulers to clearly see the alignment.
 

The next step was the sidebar - again I create a new layer group inside the previously made sidebar layer group. This group is for the login box - duplicated and used for the search box as well. The form elements is snapped from Safari. A new layer group for the list-box is created and duplicated for the tag-cloud.


The sidebar is added, each sidebar box in its own layer group.
 


Last but not least, the background image is added as well.
 


Layer palette.
 

The smartest thing about creating lots of layers and layer groups is indeed to keep a structure in the file. It would be easy for me to change the order of the sidebar boxes now, and would be easy to hide any single element. Especially when it comes to making different page mockups in the same file, layer groups is a must.

See an example of the conversion to html/css here!

71 comments

pnts Says:

This was really helpful for someone like me who is new to mock-ups in Photoshop! Are there any fonts you favor more than others for this process?

22/05-2006 | 15:22

The undersigned Says:

Fonts, well, sticking to the websafe fonts would be a good idea. Otherwise I sometimes use others for headlines :)

http://en.wikipedia.org/wiki/Core_fonts_for_the_Web

22/05-2006 | 15:34

Lars SIlkjær Says:

When Windows Vista comes out it will contain six new fonts (which will be cross platform). So it’s exiting to see som new websafe fonts.

22/05-2006 | 16:00

Mike Yarmish Says:

Thx for the arcticle! It’s very helpful. I’m looking forward to see an article about conversion from mock-up to xhtml/css.

22/05-2006 | 20:51

The undersigned Says:

Lars> Yea, it’s really exciting to see how webdesigns will evolve after Vista - may take some time for all windows-user to upgrade though :)

Mike> I will write that on my TODO list :) Now i’ve basically covered everything from idea->sketches->mockup->missing link (xhtml/css)->wordpress :)

22/05-2006 | 21:19

Peter Müller Says:

Amazing.

I have been working with Photoshop for 7 years, and I never found the group/set option for layers.

This will save me a lot of pain.

Thanks Thomas

23/05-2006 | 10:43

john Says:

How do you take a photoshop mockup and turn it into a website/html?

Do I just publish as a webpage?

23/05-2006 | 11:06

The undersigned Says:

Peter> Nice to find the function the, surely will save you a lot of pain!

John> that would be the next article. If you read through this article you will find out, I make the mockup, partly to show the website to a client, and being able to quickly make changes, before I code the site. It can also be a part of the color-picking process :)

23/05-2006 | 11:16

RaverDK Says:

Hi..!

Nice to see how you are working.

Well how do you change it all in to html / CSS after making the design..?

Coud you maby make a guide to that to?

Over And Out - RaverDK

23/05-2006 | 12:04

JC Says:

Nice article, the only thing I would suggest is turning off aliasing on text in Photoshop, this would give the mockups a much more realistic look and would give you/the customer a better idea of how the text will look in the finished site.

23/05-2006 | 12:09

Jakob Persson Says:

I use Fireworks for all my my mockup work, the process is more or less the same but Fireworks is just so much easier to work with, and perfect for this kind of web design work.
I wouldn’t recommend Photoshop for anything but artistic work, print pre-flight photo cropping and color balancing incl photo editing. It’s actually rather awful to use Photoshop when it comes to web design.

23/05-2006 | 12:18

The undersigned Says:

RaverDK> I’ve already started on such an article. When that is covered, the »series« will be done, and the process from idea->sketches->mockup->html->wordpress will be covered.

JC> Thanks alot, I will keep that in mind!

Jakob Persson> please explain why you don’t see Photoshop useable in the webdesigning process - what is the lacks and the flaws?

23/05-2006 | 12:21

Fresh » lo faccio per i clienti… Says:

[…] nella speranza che un giorno ci si renda conto del lavoro che c’è dietro un sito. ognuno ha un proprio metodo e stile di lavoro ma resta il fatto che non si tratta mai di tirare due righe su un foglio, buttare un po’ di colori a caso in photoshop e frullare tutto in flash… Thomas Silkjær un designer danese ha postato sul proprio sito tre interessanti articoli sul workflow nella costruzione di un sito: prima parte (solo testo) seconda parte (testo + foto) terza parte (mano a photoshop!) […]

23/05-2006 | 12:27

xen ix Says:

I have to agree with Jakob Persson. I don’t use Fireworks, but Dreamweaver. Making a mockup in Dreamweaver you can easily publish the web site later if the client is happy with the design. The client can come with suggestion that you can try out right away.

Sure, it might look very pretty in Photoshop, but I think the client might get a more realistic feel if you first show him/her it in Dreamweaver and then load it in a browser.

It’s when you see the design in a browser you know how it will look, work and feel.

23/05-2006 | 12:53

Keith Says:

How much will this affect the Google page rank, as you know Googlebots and other robots crawls the websites for keywords and content?

23/05-2006 | 13:07

Webdesign mockup using Photoshop at innerangst.net Says:

[…] read more | digg story design photoshop web design webdesign workflow Filed under: design, web design, photoshop   |   Tags: design, photoshop, web design, webdesign, workflow. […]

23/05-2006 | 14:29

Ryan Says:

WOW! This is a great tutorial you’re making. This is very helpful but I cannot wait for the entire series. I have just started web design and I think I’m missing key points that I should really know and this will help me make sure I have everything covered. Thanks again!

23/05-2006 | 15:01

danceparty Says:

the designs here are so simple you don’t even need to use photoshop. but either way, you guys are lame and need help. it’s a given that you start the design process with photoshop/illustrator, etc. who the hell starts with dreamweaver? btw, you should learn how to build a site with just a text editor before you start using something like dreamweaver. this article, totally not worth a digg. i wish i could undigg this site to counter all the other diggs. boo!

23/05-2006 | 15:01

Anthony Says:

dude…been doing this for YEARS, anyone with Photoshop has, now tell us how you do the conversion to XHTML/CSS….

23/05-2006 | 15:05

ShawnA Says:

I use fireworks for my mockups as well as someone else mentioned above.

Fireworks retains complete editability and is alot more efficient for stuff like this i find.

23/05-2006 | 15:10

The undersigned Says:

Ryan> Thanks, when the last step is done i will create an eBook with it all i think.

danceparty> making a photoshop file is imho essential, whenever you do a website for a client, simple or not. Making quick color changes, order around sidebar blocks, hiding stuff, making multiple ideas for some of the elements, a file where you quickly can hide and show things is a must. And if you believe it is given, that a design process starts with Illustrator or Photoshop, you might consider starting out with a pen and some paper, before even touching the computer. I do all my coding in Textmate, no use of wysiwyg editors whatsoever, and if I did, I only would to speed up the coding process.

Anthony> I am working on an article, with an example of the coding process :)

23/05-2006 | 15:28

SmR Says:

The thing that I’ve found works best is to do design revisions with a client in Photoshop where the design is easy to change. I let the client approve a .jpg of the design, and when they like what they have I pull that into Fireworks. Fireworks works really well for dicing and piece optimization. I make any CSS buttons at this step also. Then I pull the diced design into Dreamweaver and proceed to construct the base template for the website. CSS comes next and ‘voila you have a sweet template and the rest of the site is ready to build. Be sure to use includes for your navigation and main text links because these will save you tons of time later if you have to add or change a section. Includes do require you to use just a bit of scripting, but don’t be intimidated! -SmR

23/05-2006 | 15:54

Mikhail Esteves Says:

Interesting. Thanks!

23/05-2006 | 16:22

The undersigned » Blog Archive » Baaaad host Says:

[…] After getting this article dugg, the digg-effect of course was to happen. Quickly my site got 3000-4000 unique hits, and everything still worked fine. […]

23/05-2006 | 16:35

hunter Says:

There just tools…choosing one is preferance. Seperate opinion from facts please.

I have been doing this for 7 years professionally and have done over 100 sites. To the fanboys. Do you think I am going to change what gets me paid and makes my clients happy because you LIKE something better?

For the record, I use photoshop partially cause of sharing file accross mutiple agencies. I have an action that sets all my colored and named layers up the exact same way everytime i start a project. I hand cut my designs and put them into appropriate code via dreamweaver or even front page depending on the end client and how they will do upkeep. My designs look in code like they did in the mock jpg which is in a simulated ie browser window so my clients can see the site how over 80% of the world will. It is all a means to an end, what you use to get there is almost entirely irrelivant.

23/05-2006 | 17:03

Matt Ramos Says:

I find it fascinating that people think there is a “secret method” in Photoshop to create valid xhtml/css and make the site work. Sorry everyone, it doesn’t work that way. You have to know how to code to make it work. There are better ways to go about doing it, and that is probably what the next article will be on. Don’t get your hopes up for an easy way out of it, though. It’s not going to happen.

23/05-2006 | 18:06

CTL Blogs » Blog Archive » Webdesign in Photoshop Says:

[…] Webdesign mockup using Photoshop - Part 1Webdesign Workflow - Part 2 […]

23/05-2006 | 18:44

deesnuts Says:

honestly your website is broke as shit in FF with adblocker installed. I would like to follow your advice but since the initial presentation of your site is totally messed up, when I even hover on any nav bars the composition of the page changes, I’m just not willing to even read the article

23/05-2006 | 18:47

The undersigned Says:

deesnuts> I am working on a redesign, the problems you experience is because your browser window is too small for the design - 900px wide. I am aware of it :)

23/05-2006 | 18:52

Kilian Says:

That’s the way I design my websites too.

23/05-2006 | 18:55

Thoughts Of A Diseased Imagination » Photoshop Website Design Mock-ups Says:

[…] The other day I posted about how AprilZero started going about designing a website. I usually start on paper and go straight into dreamweaver and start making it. However I have realise how useful a photoshop mockup can be. So, from now on, its paper - photoshop - dreamweaver. If your starting web design, then head over to here and have a look http://theundersigned.net/2006/05/webdesign-mockup-using-photoshop/ […]

23/05-2006 | 19:04

Information Technology » Webdesign mockup using Photoshop Says:

[…] read more | digg story Make money with PaidSurveysOnline.com - #1 Survey Site. Earn $1,000 a day! with ForexEnterprise HomeTypers: Get Paid Typing Data! Make $5,000 Weekly Easily! Bookmark on del.icio.us […]

23/05-2006 | 21:37

Reviews & Rants » Blog Archive » Webdesign Example mockup using Photoshop Says:

[…] Through images and a small amount of text, an example is shown of how to make webdesign mockups in Photoshop. Yet another addition to the webdesign workflow articles.rnread more | digg story […]

24/05-2006 | 5:01

Perpetually Thinking » links for 2006-05-25 Says:

[…] Webdesign mockup using Photoshop (tags: design tutorial howto photoshop unread) […]

25/05-2006 | 5:23

asdasdasd Says:

asdasd

26/05-2006 | 16:03

Basic Thinking Blog » Landeseiten für Weblogs Says:

[…] so sieht das Beispiel in der Praxis aus, wenn man via Google über einen Suchbegriff reinkommt: […]

22/06-2006 | 13:39

Jesper Rønn-Jensen Says:

Any numbers of how much time you spent from start of mockup to the end where you have the actual HTML?

I’m interested in productivity and rapid prototyping where you end up with actual HTML that can be used for usability testing.

I’ve written some articles on how to use Ruby on Rails as a ptototyping tool:
http://justaddwater.dk/2006/04/12/rails-prototyping/

I wrote a section on Henrik Olsen’s classic article from GUUUI about satisfaction with prototyping tools (photoshop being one of them)

28/06-2006 | 12:11

The undersigned Says:

Jesper: It’s really different from design to design. If everything goes smoothly it might take 2 hours from mockup to HTML - if cross-browser bugs appears, an extra hour or two on fixing those etc. :)

The time it takes to do the mockup depends on the quality of the previous made sketches, and if a client is involved. But from good sketches a mockup can be made in an hour..

So from sketches->mockup->final HTML might be around 3-6 hours. The time it takes to do the sketching and CMS integration is really hard to tell :)

28/06-2006 | 13:28

propeller man karllson Says:

Could you please tell us how did you make that single stripe between login and tag cloud and posted news with dates?

To make it clear by single stripe I mean that grey long 1px wide line.

03/07-2006 | 18:09

propeller man karllson Says:

Sorry, I meant in HTML document (not in photoshop).
How did you make that stripe in HTML document with CSS?

03/07-2006 | 18:10

Wes’s Life » Blog Archive » Links for July-18-2006 Says:

[…] Webdesign mockup using Photoshop | The undersigned In addition to my webdesigning workflow articles , I was encouraged by pnts to show an example of how I handle the photoshopping steps. Tags: […]

20/07-2006 | 20:47

saad Says:

hey!

i just wanted to ask how u would put text into the html website?
now im not talking about the simple text…im refering to treh text i did in photoshop which has blend options tweaked.
I know theres one way: use layer slice and put it in html and hyper link taht slice…..but is there an wasy and quicker method to do this?

tahnks! :D

26/07-2006 | 16:50

chaosfilter » Blog Archive » links for 2006-08-10 Says:

[…] Webdesign mockup using Photoshop | The undersigned webdesign workflow for creating mockups in Photoshop (tags: design photoshop webdesign webdev) […]

10/08-2006 | 5:16

gentle indifference » Blog Archive » decry.org Says:

[…] Taking advantage of the weeklong summer vacation that just passed, I decided to don my pimp suit and get to work on decry.org. This post outlines the steps I went through, exporting from MovableType to WordPress, sketching concept ideas, building mock-ups in Photoshop, and finally creating a WordPress theme in XHTML 1.0 strict. Which is to say, this post is more for me than for you. Kind of like my tattoos… […]

20/08-2006 | 17:35

Photoshop Weblog » Webdesign Workflow Says:

[…] Photoshop wird natürlich auch im Webdesign verwendet. Jeder hat dabei seinen eigenen Weg. Eine Vorgehensweise zeigen die Artikel »My web designing workflow« Teil 1 und Teil 2 sowie der Beitrag Webdesign-Mockup auf theundersigned.net. Schreibe einen Kommentar! […]

06/09-2006 | 8:56

Aarron Walter » Blog Archive Says:

[…] Web Design Mockups with Photoshop […]

08/10-2006 | 20:20

Workflow Blogger Says:

As someone just looking at photoshop for the first time this is very helpful.

03/11-2006 | 4:30

Skarjune Says:

I’m with Matt when he debunks the myth that there is some “secret method” to squeeze an actual Web site design out of a Photoshop mockup. This article is about as useful as a Photoshop web design–that is, it’s just a mockup–next you need an actual web developer…

10/01-2007 | 17:00

From Mockups to CSS/XHTML (PSD/Fireworks to CSS/XHTML) | AVINASH 2.0 Says:

[…] Webdesign Mockup Using Photoshop, The Undersigned. […]

31/03-2007 | 15:54

prabhu Says:

oh very bad

14/05-2007 | 8:51

Marcus Says:

Is this plugin working with WP 2.1 or 2.2?

27/05-2007 | 4:23

Photoshop Guy Says:

Hey, thanks for the quick tips, i appreciate it.

15/06-2007 | 20:29

Mauro Says:

Your layout is screwed up. Left nav is above what should be the center area.

23/06-2007 | 6:15

A great resource of other Photoshop blogs! | Photoshop Tutorials Says:

[…] Webdesign mockup using Photoshop | The undersigned […]

23/07-2007 | 13:37

A great resource of other Photoshop blogs! at 500bucksamonth.com Says:

[…] Webdesign mockup using Photoshop | The undersigned […]

23/07-2007 | 15:51

A great resource of other Photoshop blogs! : The Best Book Reviews on the Web Says:

[…] Webdesign mockup using Photoshop | The undersigned […]

11/08-2007 | 10:16

Śmieszne filmy Says:

Good work! thank you.

08/09-2007 | 12:23

Webspin Says:

For those who do want some “magic” way of getting html/css out of a layered photoshop mockup, there is a plugin, SiteGrinder 2. Its not the holy grail or anything, but it can make a big dent in your production time.

http://www.medialab.com/sitegrinder/

12/09-2007 | 7:05

A great resource of other Photoshop blogs! | msicoach.com Says:

[…] Webdesign mockup using Photoshop | The undersigned […]

02/10-2007 | 22:31

retro Says:

I do love the classics.

01/11-2007 | 16:17

Muckz Says:

I’ve been doing web layouts in Illustrator for a long time now and have found it extremely easier for myself: I have direct access to the transform box for exact measurements, I can rasterize objects, and I can get pixel previews for accuracy viewing.

One of my biggest problems is handing off my design build files to other designers and developers who complain that I’m not getting items down to the pixel, but this doesn’t seem true as Illustrator provides the tools to be accurate. I’m wondering how other web designers perceive the use of Illustrator to assemble web layouts?

16/11-2007 | 1:22

Metropolis Says:

[…] Webdesign mockup using Photoshop - Diccionario de términos gráficos - 25 malos hábitos de los diseñadores - Web Design Tools - […]

26/11-2007 | 13:19

Panda Says:

This is fantastic - thankyou. I noticed you requested for readers to let you know if they want tips on Wordpress - I would love that if you’ve got the time!

keep up the good work!

08/01-2008 | 0:18

Part One: How to make your business startup idea a reality | CHEAPRENEUR Says:

[…] about as it gives them a complete grasp of its layout, functions and design. Here’s another great resource that explains how to create an excellent Photoshop mockup of your website […]

16/05-2008 | 4:30

decry.org Says:

[…] the steps I went through, exporting from MovableType to WordPress, sketching concept ideas, building mock-ups in Photoshop, and finally creating a WordPress theme in XHTML 1.0 strict. Which is to say, this post is more for […]

20/05-2008 | 11:22

Leave a Reply