Learn Photoshop Now .. Web Site Creation Tutorial With Photoshop Web Template
- Date: 2008-06-22 - Word Count: 1302
Share This!
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.
Start off by creating a banner and place it in the top row of a table that will contain 5rows and 1 column. The next row of the table will hold the text for your site along with photos you would like to incorporate into your site. Row 3 will hold a separator, row 4 will contain text links plus a copyright notice, ending with row 5 being a second separator.
I'm going to name this site My Stuff. 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, 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.
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 choose White and click OK. Create a new layer by going Layer> New> Layer with this document open. Next go to Edit> Fill and select Contents, Use: Foreground Color. This process will fill your document with the color you just sampled. The trick here is to reduce the opacity using the slider and adjust it until you find an appealing shade. After selecting your shade, flatten the image by going Layer> Flatten Image. Use the eyedropper tool again, only now to change the foreground color square in your toolbox to match your newly created color. Click on the color square and the color picker will appear, and you can make note of the numbers of your new color.
Scroll through your fonts to find one that appeals to you. Once you come across the one that you feel is right, play around with it a little. Adjust the tracking, the leading and the scale, or even a combination of these. Small adjustments can go a long way in making it much more personal and ensuring your site will stand out among others.
Go Window> Character in Photoshop to choose a font. You will see a list of your installed fonts in the palette. To fine tune the settings, pull up the Paragraph palette by going Window> Paragraph.
If it's new fonts you're looking for, I've included a list of just a few free font resources you can use at the end of this tutorial.
For our example, create a new document that is 600 x 300 pixels. You can adjust this size according to your own design when you choose your own stock photo and plan the layout.
Next create a new layer, Layer> New Layer. We'll call ours "Web Artist" here. I will place the illustration on this layer and shrink it to fit. 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. Once you have it to your liking, click Enter.
Next we want a tinted background. I'm going to go with the light pink.
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 soft background shade and with the graphic placed on the left. It's starting to look like a web page.
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 serves to balance out the design, so you have the option to be as creative as you would like with your own ideas.
Let's place the names of the major sections directly on the banner. These will be the website links. We will be using image maps since it will be only one graphic.
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.
Now create a new document with a width of 600 pixels, and a height of 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. Save this as a GIF file.
With 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. Place your elements into the individual rows of the table and that's 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 template from Template Monster that you can use as a base to create web pages in Photoshop.
The first page of Template Monster will have a pulldown menu where you can select features and then perform a search for a template. The templates are not only affordable, but pretty simple to manage in GoLive or Dreamweaver. In the past I've bought a template just for the color scheme and the images. With certain projects this has proven to be less expensive than buying stock photos. Check out Template Monster to see the large variety of website templates that they have.
I hope this tutorial will help you create something nice, and I wish your new website a thousand years of good luck!
Start off by creating a banner and place it in the top row of a table that will contain 5rows and 1 column. The next row of the table will hold the text for your site along with photos you would like to incorporate into your site. Row 3 will hold a separator, row 4 will contain text links plus a copyright notice, ending with row 5 being a second separator.
I'm going to name this site My Stuff. 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, 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.
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 choose White and click OK. Create a new layer by going Layer> New> Layer with this document open. Next go to Edit> Fill and select Contents, Use: Foreground Color. This process will fill your document with the color you just sampled. The trick here is to reduce the opacity using the slider and adjust it until you find an appealing shade. After selecting your shade, flatten the image by going Layer> Flatten Image. Use the eyedropper tool again, only now to change the foreground color square in your toolbox to match your newly created color. Click on the color square and the color picker will appear, and you can make note of the numbers of your new color.
Scroll through your fonts to find one that appeals to you. Once you come across the one that you feel is right, play around with it a little. Adjust the tracking, the leading and the scale, or even a combination of these. Small adjustments can go a long way in making it much more personal and ensuring your site will stand out among others.
Go Window> Character in Photoshop to choose a font. You will see a list of your installed fonts in the palette. To fine tune the settings, pull up the Paragraph palette by going Window> Paragraph.
If it's new fonts you're looking for, I've included a list of just a few free font resources you can use at the end of this tutorial.
For our example, create a new document that is 600 x 300 pixels. You can adjust this size according to your own design when you choose your own stock photo and plan the layout.
Next create a new layer, Layer> New Layer. We'll call ours "Web Artist" here. I will place the illustration on this layer and shrink it to fit. 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. Once you have it to your liking, click Enter.
Next we want a tinted background. I'm going to go with the light pink.
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 soft background shade and with the graphic placed on the left. It's starting to look like a web page.
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 serves to balance out the design, so you have the option to be as creative as you would like with your own ideas.
Let's place the names of the major sections directly on the banner. These will be the website links. We will be using image maps since it will be only one graphic.
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.
Now create a new document with a width of 600 pixels, and a height of 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. Save this as a GIF file.
With 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. Place your elements into the individual rows of the table and that's 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 template from Template Monster that you can use as a base to create web pages in Photoshop.
The first page of Template Monster will have a pulldown menu where you can select features and then perform a search for a template. The templates are not only affordable, but pretty simple to manage in GoLive or Dreamweaver. In the past I've bought a template just for the color scheme and the images. With certain projects this has proven to be less expensive than buying stock photos. Check out Template Monster to see the large variety of website templates that they have.
I hope this tutorial will help you create something nice, and I wish your new website a thousand years of good luck!
Related Tags: internet, photoshop, learning photoshop, software help, learn photoshop now, photoshop guide, get photoshop, editing photos using photoshop, photogrpahy, hobbi
Did you like this article? Interested in learning photoshop fast? Well now you can by getting this free Guide...what are you waiting for? Your Article Search Directory : Find in Articles
Recent articles in this category:
- A Subject And His Personality
The challenge to all portrait painters is pleasing the beholder as well as having the ability to fix - A Review Of The 28 Page Free Report "shoot Digital Pics Like The Pros"
There are a lot of fine, relatively recent products coming available to buy daily. A few of these ar - Night Vision Scope- Explore The Beauty Of Nature In Night Also
Going out for a camp in forests??? Or somewhere?? Not possible to see far of objects or things in th - Commercial Photography - Photography As A Business
Photography- I guess this won't be a strange word to hear for most of you but commercial photography - Night Vision Camera Ensuring Your Safety
No one can see anything in darkness. But imagine you are capable enough to do so then what would you - Looking For A Wedding Photographer In Edinburg?
You've spent sleepless nights to ensure that your wedding day is picture perfect and goes smoothly w - Cost Effective Wedding Photography
It's the most special day of your life and you've dreamed about this day, since you were a child. Yo - Hiring A Budget Wedding Photographer?
Wedding Photography accounts for almost 10 % of the entire budget of the wedding. Does this mean tha - Image Editing:a Must For Advertising Agencies And Publications
When you see any attractive image in any online publication or in print, have you ever thought who t - How To Guide For Properly Storing Photographs
Photographs are more than just pieces of paper, they are reminders of a life once lived, and cherish
Most viewed articles in this category:
- Matting Fine Art Photographs
Picking the right mat when framing fine art photographs and other pieces of art can enhance the visu - What Are Giclee and Digital Prints?
Digital images are created from photographs taken with a digital camera or from scanned images. Fine - 32 Bit Images-Stunning New Style Of Photography
The new version of Photoshop which came out last year offers a whole new feature which allows photog - Ten Tips For Working With Macro Digital Photography
Macro photography is a fun way to get close up shots look stunning. If you want to get technical, th - Buying Limited and Open Edition Prints
When you're buying fine art photographs, lithographs and other printed art, you'll notice that they - Merging Two or More Images in Photoshop
Have you ever noticed how magazines, newspapers and some web designers are able to combine multiple - Do You Have A Passion For People Photography?
Well, I'm sure you have a passion for photography and that's why you are reading this article.If you - What to Look for When Shopping for a Digital Camera
Shopping for digital camera for the first time can be a confusing and daunting experience. With so - Hong Kong Photographer Stock Photography Royatly Free vs. Licensed
There are two types of licenses for the reproduction of photographs. One is called Traditional Licen - Stock Photograhy Lesson - Quality Requirements for Online Stock Photograph Sales
Most online stock agencies require that your images be submitted in TIFF or JPEG format at resolutio