Buy. Download. Create. Get Adobe Photoshop now at the Adobe Store.
Find Photoshop CS4 tutorials and videos on our Photoshop CS4 Tutorials Page.
Try before you buy. Download any Adobe product for a free 30 day trial.
Photoshop Web Template — Web Site Design Tutorial
Many people new to web design are confused by slices and Javascript rollovers and end up abandoning their projects out of frustration. The point of this Photoshop web tutorial is to keep things simple by creating a web page that uses only 2 graphics.
Website Plan
We'll create a banner and place it in a table that will contain 5 rows and 1 column. The banner will be placed in the top row. The next row will contain the text for your site and any photos you may wish to include. Row 3 will hold a separator, row 4 will be for your text links and a copyright notice, and row 5 will hold a second separator.
Let's Get Going
I'm going to name this site Designer Girlz Network. The next step is to find a graphic for the banner. You might find a good image at one of the free stock photo sites (I've listed some below), but I was looking for something a little more professional, so I tried the iStockPhoto galleries and found an illustration by Vinaya Prashanth that cost only $3. Sweet. That's a reduced version of it on the right.
Choose A Website Color Scheme
The colors of the banner and the website will be taken from the various pinks used in the image. There are 3 pinks I want to use — a dark pink, a middle pink, and a lighter pink that I made myself from a shade of the darker pink.
I find that by using the opacity slider on a sampled color you can create a nice variation. Open a new document and copy and paste the main graphic you've chosen into it. Now from the toolbox select the eyedropper tool and sample a color by clicking on it in your graphic. This will change the foreground color square in your toolbox.
Now open another new document and in the Background Contents select White. Click OK. With this document open, create a new layer by going Layer> New> Layer. Then go Edit> Fill and select Contents, Use: Foreground Color. This will fill your document with the color you just sampled. The trick here is to lower the opacity using the slider and to keep playing around with it until you find a nice shade. When you settle on one, flatten the image by going Layer> Flatten Image. Use the eyedropper tool again, this time to change the foreground color square in your toolbox so it is the same as your newly created color. Now click on the color square and the color picker will come up, and you can write down the numbers of your new color.
Choose A Font
I went through my fonts and settled on Onyx regular. When you find a font that works for you, try playing with the tracking, the leading, and the scale — or a combination. It makes it more personal and unique when you include some tweaks.
To select a font in Photoshop go Window> Character. In the palette you'll see a list of your installed fonts. To tweak the settings you'll need to bring up the Paragraph palette. You can do this by going Window> Paragraph.
Looking for new fonts? At the end of this tutorial you'll find a list to some free font resources.
Designing A Website Banner
Create a new document that is 600 x 300 pixels. You can change this size to suit your own design when you pick your own stock photo and plan the layout accordingly.
Now I'll create a new layer, Layer> New Layer and I'll call it Designer Girl. I'll place the illustration on this layer and shrink it to fit. You shrink your graphic by choosing Edit> Transform> Scale. The bounding box will have handles. Use the Shift Key to constrain proportions, and shrink your image by selecting the top left handle and pulling towards the bottom right. To move the graphic, drag inside the bounding box. Click enter when you're happy with the results.
Next we want a tinted background. I'm going to go with the light pink.
Adding A Background Color
I select the background layer, Layer 1, and I fill it with the light pink by going Select> All, then Edit> Fill, and in the dialog box in Contents, I select Use: Color and in the Color Picker I enter FBE0EC.
The result is a 600 x 300 banner with a gentle background color and with the art placed on the left. We're getting there.
Apply A Thick Stroke To Create A Border
I decided to apply a thick stroke to the background layer to make the design more interesting. First make sure the background layer, Layer 1, is active, and create a copy by going Layer> New> Layer Via Copy. Next double-click next to the layer name. This will bring up the Blending Options in the Layers Style dialog box.
Select and then click on the word Stroke in the Styles options on the left side. I changed the settings to Size: 7px, Position: Inside, Blend Mode: Normal, Opacity: 100%, Fill Type: Color, and I clicked the color swatch and entered D04E8C in the color picker. Click OK.
The border is just to balance out the design, so by all means make changes and get creative with your own ideas.
Website Name & Section Titles
We're going to put the names of the major sections right on the banner. These will be the links. Since it will be just one single graphic we will be using image maps.
Create a new layer for your words. Use the type tool to create the section names and then use the move tool to position them exactly to where you want on the banner. Remember to pick a color for your text that is darker than your background color to avoid finding yourself screaming obscenities and suffering major hair loss! Do this by going Window> Character. In the Character palette you'll find a color square. Click on it to change colors.
You'll need an HTML editor like GoLive or Dreamweaver to automate this process. It's really very simple. You make little "maps" over each word and then enter the link destination. If you don't have an HTML editor you'll need to do a Google search on image maps to find a tutorial, or buy a book like Elizabeth Castro's HTML Quickstart Guide to help you out.
Plan B
You don't have an HTML editor, you don't want to search for a tutorial, and you don't want to buy Elizabeth Castro's book? That's ok. We'll go to Plan B - using regular text links right inside the web page itself. That means we have some empty space on the banner now, right below the website name. Use this space to add a descriptive phrase about what the user will find on your site.
The Separator
Create a new document. The width should be 600 pixels, and the height should be about 12 pixels. Fill this with your background color. Then, using the text tool and a dark color, type some periods, like this:........... and place them in the file, centering them. Change the size and the spacing until it looks perfect. Now save this as a GIF file.
Build A Simple Table
In your HTML editor of choice build a simple table that contains 5 rows and 1 column. If you're going to use text link navigation below the banner instead of image maps on the banner, create an extra row so you end up with 6 rows in your table. Now place your elements into the individual rows of the table and you're done.
The Final Result
It's time to have a look! Here is the final website page design.
Plan Bb — Let Someone Else Do It
If you are on deadline and can't cope with learning any more Photoshop techniques or HTML, here's another solution. You can buy a ready-made templatethat you can use as a base to create web pages in Photoshop.
On the front page of Template Monster you'll find a pulldown menu where you can select options and then carry out a search for a template. The templates are reasonably priced and pretty easy to manage in GoLive or Dreamweaver. In the past I've purchased a template solely for the color scheme and the images. On certain projects I found this was less expensive than buying stock photos. Visit Template Monster to see the wide variety of website templates that they offer.
Below are some free website design resources that can help you out. Whatever you do have fun with it. And good luck with your web pages!
Free Website Design Resources
FREE FONTS
DaFont.com — You'll find a huge collection of great free fonts here.
04 — This site also has a nice collection of free fonts.
Wanted Fonts — Lots of free fonts. On left side navigation you'll see categories.
HighFonts.com — Another nice assortment of fonts you can download for free.
For a full list of websites that offer free fonts visit our Free Fonts page.
FREE PHOTOS
Stock.XCHNG — A great source of quality photos that are free of charge.
Pixel Perfect — Offers a growing collection of free stock photos and illustrations.
StockVault.net — This stock photo resource offers free images.
For a full list of websites that offer free photos visit our Free Stock Photos page.
FREE PATTERNS
CitrusMoon offers a wide assortment of pretty tiles and backgrounds.
SquidFingers has a big selection of beautiful patterns.
For more free patterns and textures visit our Free Backgrounds page.
FREE COLOR SCHEMES
WellStyled.com offers a very easy to use color scheme generator.
ColorMatch 5k is a utility that will help you select a matching 6-color palette for your blog. Define a single color that you like. Matching colors will be calculated.
ColorBlender is a free online tool for color matching and palette design.
How To Create A Favicon In Photoshop
A Favicon is a little custom icon that appears next to a website's URL in the address bar of a web browser. And when I say little, I mean 16 pixels by 16 pixels. So if you like a good design challenge try your hand at this one.
Pixel Fonts To The Rescue — How To Use Them & Where To Get Them
Graphic designers working on web projects often complain that when typefaces designed for print are set to lower sizes that they become harder to read and unattractive to the eye. Even using anti-aliasing (the smooth option in the Character Palette) is not enough to help these fonts look better on screen. The solution when this happens is to abandon the printer fonts altogether and to try using a Pixel font, which will produce a crisp, clean image at very small sizes.
Blog Templates & Blog Design Tips
This Photoshop tutorial offers tips on how to improve blog templates by adding your own design elements. Includes a list of free blog resources, and a martini recipe.
Photoshop CS4 & Photoshop CS4 Extended - Best Deals From Adobe
Photoshop CS4 and Photoshop CS4 Extended feature a newly refined, tab-based interface in a single, integrated window, with self-adjusting panels arranged in docked groups. Automatically keeping tools well organized and away from your work area means you get greater efficiency, less clutter, and better results, faster than before.
Delivering all the features of Adobe Photoshop CS4 software, including the new Adjustments and Masks panels, Adobe Photoshop CS4 Extended also provides breakthrough 3D editing and compositing power to paint directly on 3D models, create 3D animations, convert 2D images to 3D objects, and more; richer motion graphics editing; and more powerful and flexible image analysis and tracking. Learn more on our Photoshop CS4 Tutorials Page. To download the free trial, see details on our Photoshop CS4 Free Trial Download Page.
Find upgrade options and package deals at the Adobe USA Store. Teachers and students get special pricing at the Adobe Education Store.
Photoshop Masking Plugin Fluid Mask 3 - Price Drop And Exclusive $20 Instant Discount - Now Only $129
The 4 1/2 out of 5 star review of Fluid Mask 3 at MacWorld begins by saying that this "Photoshop plug-in takes the pain out of extracting backgrounds," and goes on to recommend the latest version, stating that "Fluid Mask 3.0.2 is a very effective tool for separating objects from their backgrounds. It offers a variety of useful features for tackling almost any difficult image, from wispy hair to complex foliage. Online video tutorials and live training sessions help ease the learning curve."
Our friends at Vertus, the makers of Fluid Mask 3 Photoshop Plugin, have set up a special exclusive discount for PhotoshopSupport.com. Buy now for only $129. Just follow this discount link and instantly get $20 off your purchase of Fluid Mask 3.
Fluid Mask 3 is designed for photographers, image editors, graphic designers and all those who take digital image editing seriously. In a streamlined interface and workflow, Fluid Mask 3 instantly shows key edges in the image and provides comprehensive easy to use tools that work with difficult-to-see edges and tricky areas like trees & lattices. Fluid Mask will also preserve all-important edge information for a professional quality cut out. Simply follow this discount link and pay only $129 for Fluid Mask 3.
Exclusive onOne Software 20% Instant Discount Coupon
Enter our exclusive discount coupon code - PSSPPT06 - during the checkout process at onOne Software for an instant 20% discount on any onOne product. This includes Genuine Fractals and their amazing Photoshop Plug-In Suite.
onOne Software's Plug-In Suite combines full versions of six essential software tools — Genuine Fractals Print Pro, PhotoTools Pro, PhotoFrame Pro, Mask Pro, PhotoTune and FocalPoint — an affordable combination that includes everything a photographer needs to make their images look their best.
Why do you need plugins? Photoshop is an amazing image editing application that has forever changed graphic design and digital photographic editing, but like any tool, if you don't have time to fully learn it, you can't get the most out of it.
Plugins for Photoshop allow you to either do something that you cannot do with the features included in Photoshop or they allow you to do something easier, faster or better than you could do in Photoshop without the plug-in. Whether it is color correction, resizing, masking or creating an effect, you can find a Photoshop plug-in that can help you be more efficient with your time.
Nik Software 15% Instant Discount - Exclusive 15% Coupon
Enter our exclusive discount coupon code - NIKPSS - during the checkout process at Nik Software for an instant 15% discount on any Nik Software product. This exclusive discount coupon code can be applied to all the latest Nik Software Photoshop plugins, including Silver Efex Pro, Color Efex Pro, Viveza, Sharpener Pro, and Dfine.
Color Efex Pro 3.0
52 photographic filters with over 250 effects for professional quality images.
Completely Original. Completely Indispensable.
Nik Software Color Efex Pro 3.0 filters are the leading photographic filters for digital photography. The award-winning Color Efex Pro 3.0 filters are widely used by many of today's professional photographers around the world to save time and get professional level results. Whether you choose the Complete Edition, Select Edition, or Standard Edition, you’ll get traditional and stylizing filters that offer virtually endless possibilities to enhance and transform images quickly and easily.
Patented U Point technology provides the ultimate control to selectively apply enhancements without the need for any complicated masks, layers or selections. Control color, light and tonality in your images and create unique enhancements with professional results. With 52 filters and over 250 effects found in Color Efex Pro 3.0, you can perform high quality retouching, color correction, and endless creative enhancements to your photographs. Download a free Trial version.
Viveza
The most powerful tool to selectively control color and light in photographic images without the need for complicated selections or layer masks.
Two of the most important factors in creating great photography are color and light. Mastering the art of selectively correcting or enhancing each of these is now possible for every photographer without the need for complicated masks or selections, or expert-level knowledge of Photoshop. Integrating award-winning U Point technology, Viveza is the most powerful and precise tool available to control light and color in photographic images.
U Point powered Color Control Points, placed directly on colors or objects in an image (such as sky, skin, grass, etc.), reveal easy-to-use controls that photographers can use to quickly adjust brightness, contrast or color in a fraction of the time needed by other tools. With Viveza you’ll spend more time shooting photographs and save hours of image editing. Download a free Trial version.
Silver Efex Pro
Complete power and control to create professional quality black and white images in one convenient tool.
Silver Efex Pro from Nik Software is the most powerful tool for creating professional quality black and white images from your photographs. For the first time, all the advanced power and control required for professional results have been brought together in one convenient tool.
Featuring Nik Software’s patented U Point technology to selectively control the tonality and contrast of the image, Silver Efex Pro includes advanced imaging algorithms to protect against unwanted artifacts, a comprehensive collection of emulated black and white film types, a variable toning selector for adding traditional toning techniques, over 20 one-click preset styles, and a state-of-the-art grain reproduction engine that help produce the highest quality black and white images possible from your color images while providing more freedom to experiment. Download a free Trial version to use Silver Efex Pro.
Enter our exclusive discount coupon code - NIKPSS - during the checkout process at Nik Software for an instant 15% discount. This exclusive discount coupon code can be applied to all the latest Nik Software Photoshop plugins, including Silver Efex Pro, Color Efex Pro, Viveza, Sharpener Pro, and Dfine.
Adobe Photoshop Lightroom Available At The Adobe Store
Adobe Photoshop Lightroom software is the photographer's essential toolbox for managing, adjusting and presenting large volumes of digital photographs. With new enhancements such as dual-monitor support, radical advances in non-destructive localized image correction, and streamlined search capabilities, Photoshop Lightroom is a compelling upgrade that simplifies photography from shoot to finish. Visit the Adobe site to download a free 30 day Photoshop Lightroom trial free download.
As Adobe’s first application to support 64-bit for Mac OS X 10.5 Macintosh computers with Intel processors and Microsoft Windows Vista 64-bit operating systems, Lightroom also provides improved memory performance for dealing with large scale images. Find the latest Lightroom 2 tutorials on our Photoshop Lightroom 2 Tutorials page.
Photoshop CS4 Book - Photoshop CS4 Essential Skills - By Mark Galer And Philip Andrews
Brimming with beautiful pictures, Photoshop CS4 Essential Skills guides you through a project-based, progressive curriculum so that you can build all the essential skills to enhance photographs creatively and professionally with Photoshop CS4. If you are an aspiring professional or a student learning photography, digital imaging, or design graphics, you'll be amazed at the stunning results you can achieve. A DVD is included free.
The Essential Skills Photography Series from Focal Press uniquely offers a structured learning experience for photographers of all ages, with both the underlying theory and loads of invaluable 'how to' and real-life practice projects - all from the most talented photography practitioners/educators in the world.
Read 2 free sample chapters:
Skin Retouching Tips In Photoshop CS4
Transforming Smart Objects In Photoshop CS4
Find more Photoshop CS4 tutorials on our Photoshop CS4 Tutorials Page.
Read 2 free sample chapters from the Adobe Photoshop CS3 version:
Adjusting Exposure in Adobe Camera Raw CS3
Photoshop CS3 Tutorial High Dynamic Range
Find More Adobe Photoshop Books at Amazon.com
Find all the latest bestselling Photoshop books at discount prices at Amazon.com.
Exclusive 20% Discount On Select Total Training Products & Bundles
To redeem our exclusive discount coupon, use promotion code save20pss in your shopping cart. You could save hundreds of dollars. Use this special link to see the full offer.
Total Training for Adobe Photoshop
Learn Adobe Photoshop with 21 hours of interactive Adobe Photoshop tutorials. This is training for real-world situations and includes additional tips and techniques used by the pros.
View Sample Photoshop, Dreamweaver and Flash Pro Video Tutorials
Free Adobe Photoshop CS3 video tutorials
Free Adobe Photoshop CS2 video tutorials
Free Adobe Dreamweaver video tutorials
Free Adobe Flash Pro video tutorials
On the front page of Template Monster you'll find a pulldown menu where you can select options and then carry out a search for a template. The templates are reasonably priced and pretty easy to manage in GoLive or Dreamweaver. In the past I've purchased a template solely for the color scheme and the images. On certain projects I found this was less expensive than buying stock photos. Visit Template Monster to see the wide variety of website templates that they offer.
