Creative COW SIGN IN :: SPONSORS :: ADVERTISING :: ABOUT US :: CONTACT US :: FAQ
Creative COW's LinkedIn GroupCreative COW's Facebook PageCreative COW on TwitterCreative COW's Google+ PageCreative COW on YouTube
LIBRARY:TutorialsVideo TutorialsReviewsInterviewsEditorialsFeaturesBusinessAuthorsRSS Feed

Designing a Website in Photoshop

COW Library : Adobe Photoshop Tutorials : Abraham Chaffin : Designing a Website in Photoshop
Share on Facebook
A Photoshop Webdesign Tutorial


Designing a Website in Photoshop

Designing a Website in Photoshop

This Adobe Photoshop tutorial will show and discuss how to use Photoshop to design a web site that will be exported as HTML and image slices. This can later be brought into an HTML editor program such as Adobe Dreamweaver. This is an Adobe Photoshop web design tutorial showing how to create an entire web page directly in Photoshop.


Abraham ChaffinAbraham Chaffin
CreativeCOW.net,
Cambria, California USA

©2008 CreativeCOW.net. All rights reserved.



There are many different ways to approach the design of a website. Some choose to design the whole thing in Dreamweaver, or make a quick sketch on paper and then build their site, while others prefer a graphical design approach and use Photoshop as the design tool. Creating your site as a Photoshop file first makes the creation of your site later much easier for various reasons.

The beginning of any design concept is to get a good inspiration from something that you can already see. Such as a painter gets inspiration from the world around them, a web designer will also get inspiration from what they see. Sometimes that is an existing site, site templates, or from a picture, graphic, or logo.

In addition to a good inspiration is recognizing your target audience and designing around what they are comfortable with. The layout and style should be in some conformity with what your audience is already use to. Screen resolution must also be considered when designing a website. The width of the page and the first fold of your page are important to the success of your site. (The fold is the area your viewer sees before they have to scroll down the page.) While accommodating only larger screen resolutions might make your job easier you are cutting out a portion of your audience. The majority of web users today use larger screen resolutions than ever before and in the future web sites built for small screen resolutions will become less of a factor but for now it still must be considered.

It is also possible for your site to have a flexible width so that it expands and contracts based on a users window size, this is optimal when attempting to create a site that will accommodate everyone. A site designed to accommodate a window size of at least 750 pixels wide is optimal. The minimum resolution used by most people today is 800 x 600.

The steps of creating your website using Photoshop are:

1. Use Photoshop to design the look and layout of the site you're wanting.

2. Slice the image up in Photoshop, exporting the sliced images or as an HTML. Understanding HTML formatting helps a lot for interpreting how to slice your image to go into the HTML.

3. Create the HTML template to match the Photoshop site design and drop the sliced images in or use Dreamweaver to adjust the HTML file that Photoshop created from your PSD slices.

The design of the site in this tutorial will be built from an image of Bessie in her pasture. This should be a happy site =o

Creating a Header Graphic

The first part of designing a website in Photoshop is creating a header graphic for your site. The header graphic is the main graphical part of your site that will be seen first and will be the center for the overall look and feel of your site. Get the finished header graphic here.

Steps to Follow:

1. Right click here to save the image. Save the image in a new folder.

2. Open the downloaded file in Photoshop.

3. Crop the image to 745 x 320 with the COW logo in the right side of the image. To do this select the Rectangular Marquee Tool (M), then under the Style dropdown choose Fixed Size. Put in 745 px for the width and 320 px for the height. Position your marquee to create your header and crop the image (Image menu > Crop).

Marquee Tool Photoshop Header Design 1

4. Create a small 10 pixel feather at the top of the image. Select the Gradient Tool (G), click on the gradient in the top gradient tool window, set the start and end colors to white, set the start opacity to 0% and the ending opacity to 100%. Make a new layer and drag and create the ramp at the top holding shift to make the ramp straight.

Gradient Tool

5. Lighten the graphic by creating another ramp over the while image starting at the bottom and lightening towards the top (hold shift to keep the ramp straight). The end point of the ramp should be about 300 pixels above the image to give a nice haze to the graphic. This gives the appearance of a brighter day in the COW farm.

Photoshop Header Design Graphic

6. Finally we're going to lighten the header graphic even further by creating another vertical ramp in the opposite direction as the previous one. The start point should be even with the top of the COW logo and the bottom should be 1 pixel above the bottom of the graphic.

Photoshop Header Design Graphic 3

7. Save the header graphic into a folder where you are going to create your website using Save for web (Alt+Shift+Ctrl+S). Save as a JPG, optimized, at about 70 quality.


Your header graphic has now been created. The graphic can be used in different ways in a site template. Use it at it's full scale and wrap the navigation and body text around it, or reduced in size and set it into a more modern design template layout.

Designing a Website Layout in Photoshop

The design of your web site should have at least three distinct parts that include specific elements:

1. Header
  • Company logo
  • Graphic banner
  • Links / buttons for the home, about, and contact page
2. Body
  • Content area for text on the page
  • Pictures or graphics incorporated with the content
3. Footer
  • Copyright Information
  • Links to policy / terms of use, and back to top link
When creating the layout design in Photoshop be sure to leave room for additional navigation, text, and site expansion in the future or you might find yourself needing to completely redesign your site because you didn't leave room for links to more pages in your design. The following steps are used to create the layout for the Photoshop web site layout that can be download here.

Steps to Follow:

1. Create a new PSD file 745 px x 600 px and save it as layout.psd

2. Place the header graphic into the document. (Open the header file (g_header.jpg), select it (ctrl+a), copy (ctrl+c), activate the layout.psd window, paste (ctrl+v).)

3. Use the Move Tool (V) to move the header to the top of the layout holding shift to let it snap into place at the top.

4. Open the Company Logo, copy and paste it into your layout.

5. Transform the logo (ctrl+t) and move it into the top left corner of the site layout.

6. Using the Horizontal Type Tool (T) Photoshop Type Tool create some small text links in the sky between the two logos on top of the guide. Type the word "Home", 4 spaces, "Contact", another 4 spaces, and then "About". Text should be about 12 pt, Arial font, using the color #A6FF94 for a fun light green color.

7. Give the text a dropshadow (Layer > Layer Style > Dropshadow) with a distance of 2 and a size of 3.

8. Position the text using the move tool and the arrow keys appropriately next to the top left logo.

9. Below the smaller COW logo we'll create some larger navigation / image links:

Photoshop Header Graphic

  1. Using the Horizontal Type Tool (T) type "HOME   PAGE 1   PAGE 2   PAGE 3   PAGE 4" using Arial, 17 pt font with black text. Put about 4 or 5 spaces between the words to give the buttons some space.

  2. Create a new layer New Layer Button and drag it below the text you just created

  3. With the Rectangular Marquee Tool (M) select an area just around the larger navigation.

  4. Select the Paint Bucket Tool (G) and fill the selected area of the new empty layer with (#A6FF94) the green color.

  5. Make this layer look like a button by going to the Layer menu > Layer Style > Bevel and Emboss. Use the default settings by pressing OK

  6. Using your Single Column Marquee Tool delete a column of pixels between each word in the solid green background layer you just created. This will break up the bevel and make each word look like a separate button. You may need to zoom in to get right in between the words.
8. Duplicate the green button layer by dragging it onto the new layer button New Layer Button or go to the Layer menu > Duplicate Layer.

9. Select the bottom green button layer and add a motion blur to the layer with a distance of about 150 pixels by going to the Filter Menu > Blur > Motion Blur.

10. Move the blurred layer down about 10 pixels and lower the opacity to 20%. This gives a subtle line under your buttons to help divide the top from the content.

11. At the bottom of the layout create text that says ©Copyright CreativeCow.net 2008.

12. Create a new layer behind the Copyright text that will become the background behind the footer text, make sure the layer is selected.

13. Use the Rectangular Marquee Tool (M) to select an area across the bottom of the page but just a little higher than the copyright text.

14. Use the Paint Bucket Tool (G) and fill the area with the bright green (#A6FF94).

15. Feather the outside edge by using the Inner glow layer style (Layer menu > Layer Style > Inner Glow) Set the blend mode to Normal, color to white (#ffffff) and the size to 10 pixels.

Photoshop Designed
We've now designed a simple, fun, website in Photoshop with a header and footer. The white space in between the header and the footer will be all the textual content and pictures that will fill in the actual web site.

Slicing Images in Photoshop for the Web

Slice ToolNow that we've designed a simple website with Photoshop we will slice it into pieces and export the pieces as an HTML file that can be later used and modified in Dreamweaver. When slicing your website design remember that each slice will become a separate cell of a table and image so try to keep the slices as few and as simple as possible. Make sure and start and end your slices outside of the design whenever possible so Photoshop doesn't mistake a single pixel you might have missed as a slice. Open the website design we made earlier, select the Slice Tool (K) and let's get started. (Turn on snapping for better results - View menu > Snap (Ctrl+Shift+;), make sure Snap to Layers is turned on.) Download the sliced PSD file here.

Steps to Follow:
  1. Create one slice around the entire graphic. Start outside the graphic and end outside the graphic. This will help tell Photoshop to not create single pixel graphics somewhere that we don't want.

  2. Slice the footer graphic starting and ending in the gray outside the layout. Let the snapping find the top of the layer for you.

  3. Slice the header all the way across the top starting above the graphic in the gray and ending just below the larger navigation. This should slice the COW in two ( oh no! ). You should now have 3 slices for your header portion, your content, and your footer.

  4. Slice out all the buttons, try to make sure you are snapping to the same position for each button so that the height of the buttons are the same. For the lower, larger buttons you can snap to the bottom of the surrounding slice.
Sliced Web Page in Photoshop

Your Photoshop web design should be sliced now and ready to save for the web.

Exporting / Saving Photoshop Slices as a Web Page

In earlier versions of Photoshop saving a sliced image for the web could only be done with ImageReady but now it's all built into Adobe Photoshop CS3. The following portion of the tutorial will show you how to save the sliced website design we made in Photoshop as an HTML file with associated images.

Steps to Follow:
  1. With your sliced graphic open choose File menu > Save for Web & Devices (Alt+Shift+Ctrl+S). This brings up the Save For Web & Devices window.

  2. Under the preset dropdown choose JPEG High for the quality and file type. (This is simply a preference.)


  3. Save for Web And Devices

  4. Click the Optimized Menu arrow to open up the sub menu and click on Edit Output Settings...


  5. Output HTML Settings

  6. We won't go into detail on the output settings here. Choose Default Settings from the Settings dropdown. Use Prev and Next to look at all the settings.

  7. Click OK and then Save. Make sure you are saving in a location you can locate easily.

  8. Choose Save as type: HTML and Images (*.html)

  9. Settings: Default Settings

  10. Slices: All Slices


  11. Save as HTML and Images

  12. Click Save
Congratulations you've now successfully designed a website with Photoshop, sliced it, and then successfully exported it as an HTML file! There are some simple modifications that need to be done however before the design can be fully used as a web page or website template but I'll leave that for another tutorial.



  View 7 Comment(s)

  Adobe Photoshop Tutorials   •   Adobe Photoshop Forum
Reply   Like  
+1
Share on Facebook
Comments

Re: Designing a Website in Photoshop
by Adeel Ahmad
i am a new with the web development,and dont have any background,but i found your tutorial very intresting and easy.....Thanks......
slowness
by Ramandeep Dhillon
yes,thats true. I designed my website in photoshop last year, but it was a pain to update it almost daily, and it rendered very slow, but i liked the design component with photoshop, it looks beautiful, but then i had to change the layout, learned basic css and dreamweaver, it is fast and i can update it within seconds, but it sure looks ugly now.
Slowness
by Abraham Chaffin
Yes - this method of designing web-pages doesn't render the fastest pages on the net but, for some people, it is a nice method when they are more Photoshop designers than web-monkeys.
i think it will be slow
by Ramandeep Dhillon
i think it will be slow as compared to design it with css, but a good tutorial though
Designing a Website in Photoshop
by Allen Palmer
Thank you so much. You have really helped me to gain some confidence in program which has been something of a barrier to me for a long while.
For me, as a newbie to PS it was very helpful to be taken through a number of processes in such a helpful way. So many PS tutorials assume that we already know the basics.
Many thanks
Allen
Designing a Website in Photoshop
by Scott Fien
Would greatly appreciate the rest! Kinda like building a nice looking car, but saying, "Hey folks! You're gonna need an engine if you actually want to drive this thing ... but we'll leave that for later."
Designing a Website in Photoshop
by Brian Findlay
Thanks! It's appreciated!
-Brian


Related Articles / Tutorials:
Adobe Photoshop
Going from Aperture to Lightroom? Put it in the Cloud!

Going from Aperture to Lightroom? Put it in the Cloud!

Why Wait for Apple Photos? Adventurer and editor Jigs Gaton takes us through some easy steps for migrating your photo library from Apple's Aperture and iPhoto into Adobe Lightroom.

Tutorial, Feature
Adobe Photoshop
THE BLUR LAB

THE BLUR LAB
  Play Video
Adobe Photoshop CS6 includes three new blurring filters. Rich Harrington will show you new ways to blur specific areas in a photo, as well as achieve tilt sheet and vignette effects.

Tutorial, Video Tutorial
Adobe Photoshop
THE ADAPTIVE WIDE ANGLE COMMAND

THE ADAPTIVE WIDE ANGLE COMMAND
  Play Video
Adobe Photoshop CS6 adds to an existing feature that you may not have even been using called Photomerge. Rich Harrington will show you the new Adaptive Wide Angle command to remove all of the lens and perspective distortion in merged photos. You will also learn how to use these exact techniques with video footage, too.

Tutorial, Video Tutorial
Adobe Photoshop
COACM: Plug In, Tune Out

COACM: Plug In, Tune Out

Adobe created quite a stir when it recently announced a public beta for the next major update to Photoshop. Is this the result of some very smart marketing, or perhaps an act of desperation, due to the harsh economic realities facing most creatives these days? What is the future of this critical production tool?

Editorial
Adobe Photoshop
Lite Bite: 10 Years Younger Using Gaussian Blur and a Mask

Lite Bite: 10 Years Younger Using Gaussian Blur and a Mask
  Play Video
In this "Lite Bite" tutorial Martin Ainsworth quickly demonstrates to ability to give someone a slightly younger appearance using a Gaussian Blur and a Mask to get some very effective and quick results.

Tutorial, Video Tutorial
Adobe Photoshop
Lite Bite: Using the High Pass Filter to Sharpen Images

Lite Bite: Using the High Pass Filter to Sharpen Images
  Play Video
In this very quick "Lite Bite" tutorial Martin Ainsworth demonstrates the effectiveness of the High Pass Filter to sharpen images and it's a lot quicker and easier that you might expect.

Tutorial, Video Tutorial
Adobe Photoshop
Lite Bite for Photoshop: Content Aware Fill vs Patch Tool

Lite Bite for Photoshop: Content Aware Fill vs Patch Tool
  Play Video
In this "Lite Bite" tutorial Martin Ainsworth gives a quick overview of when and why to use the Patch & Content Aware tool to aid Photographic editing.

Tutorial, Video Tutorial
Adobe Photoshop
Lite Bite for Photoshop: Using Droplets in Adobe Photoshop

Lite Bite for Photoshop: Using Droplets in Adobe Photoshop
  Play Video
This "Lite Bite Tutorial" will help you speed up and automate your work flow by using droplets created from actions in Photoshop. In a matter of minutes you will be up and running. The process is the same for both Mac & PC users.

Tutorial, Video Tutorial
Adobe Photoshop
Lite Bite for Photoshop: Using Masks on Groups

Lite Bite for Photoshop: Using Masks on Groups
  Play Video
Using masks to speed up web design can help you show multiple graphic ideas with the least amount of effort for best effect. In this tutorial, Martin Ainsworth willl show you how to add a mask to a folder and add content to it.

Tutorial, Video Tutorial
Adobe Photoshop
Lite Bite for Photoshop: Creating Custom Actions

Lite Bite for Photoshop: Creating Custom Actions
  Play Video
In this "Lite Bite" tutorial, quickly setup custom actions to speed up your photography workflow in Adobe Photoshop to rotate and add adjustment layers for 'Cross Processing' and 'Black & White.' This is a valuable time saving tutorial.

Tutorial, Video Tutorial
MORE


FORUMSTUTORIALSFEATURESVIDEOSPODCASTSEVENTSSERVICESNEWSLETTERNEWSBLOGS

Creative COW LinkedIn Group Creative COW Facebook Page Creative COW on Twitter
© 2014 CreativeCOW.net All rights are reserved. - Privacy Policy

[Top]