Designing a Website in Photoshop
|A Photoshop Webdesign Tutorial
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.
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).
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.
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.
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.
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:
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.
- Company logo
- Graphic banner
- Links / buttons for the home, about, and contact page
- Content area for text on the page
- Pictures or graphics incorporated with the content
- Copyright Information
Steps to Follow:
1. Create a new PSD file 745 px x 600 px and save it as layout.psd
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.
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) 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:
8. Duplicate the green button layer by dragging it onto the new layer button or go to the Layer menu > Duplicate Layer.
- 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.
- Create a new layer
and drag it below the text you just created
- With the Rectangular Marquee Tool (M) select an area just around the larger navigation.
- Select the Paint Bucket Tool (G) and fill the selected area of the new empty layer with (#A6FF94) the green color.
- 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
- 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.
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.
Slicing Images in Photoshop for the Web
Now 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:
- 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.
- Slice the footer graphic starting and ending in the gray outside the layout. Let the snapping find the top of the layer for you.
- 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.
- 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.
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:
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.
- 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.
- Under the preset dropdown choose JPEG High for the quality and file type. (This is simply a preference.)
- Click the Optimized Menu arrow to open up the sub menu and click on Edit Output Settings...
- 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.
- Click OK and then Save. Make sure you are saving in a location you can locate easily.
- Choose Save as type: HTML and Images (*.html)
- Settings: Default Settings
- Slices: All Slices
- Click Save
|Related Articles / Tutorials:|
THE ADAPTIVE WIDE ANGLE COMMAND
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
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?