Design a Website In Photoshop Article

There are a number of different ways to create Websites. While some may choose to hand draw a concept and then start coding HTML, others may want to take a more graphical approach to the design and layout.

This graphical approach is what I’m here to show you.

So today, I’ll explain the design process I go through when a new customer hires me. Being very visual, I find it easier to start with an image when I design a Website, and these are the basic steps I follow:

  1. First, using Photoshop, create an image that mimics the general layout you’d like to use for your site.
  2. Once you’re happy with the image you’ll need to “slice” it up for use in your Website template. In this process, it helps to have a working knowledge of HTML. You must know how tables work, so that you can slice your image in a way that will work with tables.
  3. Then it’s time to create an HTML document that’s comprised of those slices. This will become the template you’ll use to create all the pages of your Website.

To make it easier to follow along with the directions, here’s a downloadable Photoshop image that is yours to use, alter or demolish as you choose!

Note: if you publish this image, all I ask for is a link back to my site

Let’s get started!

Interface Image Creation

Interface Design

This is the most critical part of the whole design process. The design of your interface is very important for usability. You’ve probably heard it a thousand times, but the old saying is true: if your visitors can’t find all your content, or they’re confused by your layout, they really are only one click away from leaving your site.

Planning Ahead

With any new design, you must plan ahead. This will enable you to adapt to any changes that arise quickly and easily. For example, imagine you wanted to add another section to your Website. Does the navigation of your site allow for this, or will it entail a complete redesign? If you’re in the latter category, expect to waste time and money — resources that can easily be saved if you design your site layout well the first time.

It’s important to imagine where you’d like to be in the future. Websites are like any other business: you must change with the times.


We’re going to start with an image that is 740×460 pixels in size. In this space, we need to include the header, navigation and content areas.

Below, you can see a layout image that I created in Photoshop. The dark blue bars at the top and bottom of the page represent where our navigation will be — this kind of layout is very effective if, for example, you have a lot of content and you like fast loading pages.

After you’ve created your image in Photoshop, it’s time to prepare each section so you can use them in an HTML document. Let’s slice it up!

Slicing Your Image

Although you can use any graphics software to create your image, I recommend Photoshop. Packaged with this program is ImageReady, which you can use to save images for the Web, create gif animations, and slice up Photoshop images.

Now, “slicing” means that we’ll take your original page layout image, and make smaller individual images out of it, which you can then insert into an HTML table.

You could just use the large image as a page on your Website, and make image maps over the areas that you want to be links. The problem with this solution is that it will take forever to download — your users won’t be impressed!

As you’ll see in this example, when you slice up a large image, you have the ability to optimize each section individually to make the total file size smaller. Also, as in this example, some slices are duplicated, so you need to only use one of them, which will in turn make the total file size even smaller. The example image I created for this is only 26.1k. What this means to you is that this page will only take 9 seconds for a person on a 28.8k modem to download. Are you starting to see the benefits?

Here we have our image in Photoshop, prepared for slicing:

Design a Website In Photoshop Article

As you can see, blue lines cross the image. These are guidelines that Photoshop allows you to simply drag out of the ruler area — they mark where we are going to slice the image.

Go to page: 1 | 2 | 3 | 4


Category: software Time: 2002-09-20 Views: 2

Related post

  • What browser width should I use to design a website? 2012-05-24

    I am working on graphics part of the website and been asked to design a website in Photoshop. I wonder what are an average dimensions and browser widths for a website so i can create my mockup with those dimensions. --------------Solutions-----------

  • Shall I use Photoshop to design my websites? 2011-02-23

    I'm in the process of learning how to design my website. I've been reading a lot of design theory but now that I'm about to start learning how to use the tools, I'm stuck! What tool shall I use? There are so many! Photoshop? InDesign? Illustrator? Ca

  • How to prepare Photoshop to design a Website 2014-12-29

    I'm having some trouble finding out how to prepare Photoshop to design a Website. When i try to program what i draw, the measurements are never correct. Always bigger. Is there a way for me to design the website in "real" values? Like, 10px in P

  • When designing a website, how do you usually start? 2011-05-16

    In the past I've done some HTML, CSS and PHP coding, but I've only ever worked on things that were already "finished" and I've never started a website from scratch. However, I recently purchased a domain and some hosting for cheap, and I'm hopin

  • Build a Professional Design Agency Layout in Photoshop 2012-09-24

    If you're a skilled designer with a long list of clients and a full schedule, you'll rarely have time to work on your own website. Despite the importance of your flagship website (and the chance to show off your skills and creativity), nobody will pa

  • How to design a websites using thin fonts that will look good in a web browser? 2013-02-04

    I recently quite repetitively encounter the same problem - the fonts in photoshop don't look even close to the fonts embedded onto the websites. Obviously - it's mostly about external, 3rd party fonts, because for Helvetica, Arial, etc. I get quite g

  • Design Organized Websites Rapidly with 960 Grid 2013-05-14

    In this article, I will discuss the power of 960 and show you how to create a 12-column layout (or other size if you want) so you can hit the ground running with grid systems. I have a fully functional CSS and HTML example below, and you can download

  • Web design what to use Photoshop or Illustrator? 2014-09-12

    What should i use to design photoshop or illustrator ? There's a correct software or its more a personal choise ? --------------Solutions------------- photoshop or illustrator ? Yes. And also likely paper pencils wireframing tools javascript html css

  • Designing a website in Phases - allowing for future content 2011-04-12

    I am in the process of designing a website which will be produced in at least 2 phases. The first release will include the majority of the site sections but in phase 2 we will be producing additional functionality. This means that some sections of th

  • How do I design a website without relying on images and photographs, but still be eyecatching? 2012-02-26

    I've recently been charged with my first professional gig as a web designer. I've made a few pages before, very basic pages, that were for student groups or nonprofit organizations. Those were free and the client were more than satisfied with a produ

  • Table/grid design for website when a rows column has multiple values 2013-08-22

    I am designing a website in which users will input data into textboxes of a table, similar to this excel spreadsheet (but imagine textboxes and drop downs instead of table cells) The highlighted row is the row they are currently adding/modifying. The

  • How to Use a Template to Design Your Website 2013-08-31

    Initially, designing a website is one of the most difficult parts of launching your online business. You can hire someone to do it for you, but that can get expensive quickly, and if you're running a startup, you might not have the money for it. Anot

  • Designing a website mockup in Illustrator 2016-02-19

    I am designing a website in Illustrator and then handing the PDF off to the web developer. What size in inches should my mock up be? --------------Solutions------------- You should be setting up Illustrator in pixels not inches and this only depends

  • Design a Website Favicon in Photoshop 2010-12-18

    Favicons (short for favorites icons) are those tiny little icons left of your web browser's address bar, and are a part of your overall site branding. They show up in your web browser, but also in news feeds, so it's important that you include one wi

  • What are the steps in designing a website? 2014-08-04

    Calling all Web Designers :) I am starting to make a website for a small business in my hometown and it will be my first proper project. I have made sites in the past, which I have done for leisure. I am fluent in HTML and CSS. I have got the clients

  • Designing for the Mobile Web Article 2008-03-12

    The number of users browsing the Web from a mobile device continues to rise, yet most mobile websites are still sub-par. The thing is, creating a great web experience for users of mobile devices is much easier than you might think. In this article I'

  • Web design software alternatives of Photoshop? not looking for photo-editing 2010-10-06

    I've been looking over the net for Photoshop alternatives, but all I have been getting is "photo-editing" software alternatives - Gimp, and Photoshop Elements are basically the two I keep getting, unfortunately they are not what I'm looking for.

  • When designing a website for mobile should I still use the mobile's interface button graphics 2012-08-17

    I am designing a site that will, at the moment, only have a mobile version. I was wondering if I should use the ux buttons and styles from a particular phone or just design with mobile design requirements in mind. If you have any good pointers for mo

  • Logo Design for Website 2013-09-11

    This question already has an answer here: Are there any Ubuntu-based equivalents of Corel Draw, PageMaker, PhotoShop and Quark Express 4 answers Can anyone please recommend a tool, preferably free, for designing a logo for a website? The ones I've tr

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development


Front-end development


development tools

Open Platform

Javascript development

.NET development

cloud computing


Copyright (C), All Rights Reserved.

processed in 0.800 (s). 13 q(s)