Creating Photoshop Website Templates
Note: This tutorial is written and designed to be comprehended by total beginners. This tutorial is a good start for beginners who have a little or no knowledge in Photoshop, have a great imagination and would like to expand or start learning to design websites. This tutorial will show you how to create a web site in photoshop.
Most professional website
A collection of interconnected webpages, usually including a homepage, generally located on the same server, and prepared and maintained as a collection of information by a person, group, or organization.’); return false”>website designers use Photoshop to design the graphics and user interface of websites. Photoshop is a very powerful tool to create stunning graphics and attractive navigational system for websites.
Starting from any image you can create a complete appealing website. This is especially true if you do not need complicated functionality and website features such as databases, form processing and other communication abilities that go beyond graphic design. If you need any of that, Photoshop will still be the tool to create the design and then use other programs such as Dreamweaver to accomplish other tasks.
If for example you want to design a personal website or a business website that shows graphics and information only, this tutorial will show you how to create the template for the website you need.
Get an image of high quality!
Whether you scan it or download it from your digital camera, better quality will give you more room when optimizing and blending. Now my first tip is to print the image and draw on your printout the website you want to end up with. Drawing a blueprint for your website will give you a target to achieve and less time to waste! After you have a semi-complete website, you can always add, modify and enhance your project.
Also, before starting to design, decide how you are going to distribute your website content
Generally, the information provided on a web page, as opposed to its design and layout. content can take the form of text, graphics, audio, video, or a searchable database. ‘); return false”>content, such as your graphics and information. Decide how many pages you are going to have, and how would you like to distribute the information over the pages. Even if you are sloppy when it comes to drawing on paper, this will help you much more than you expect.
After you have prepared your blueprint, open your Photoshop and start the fun part.
For the purpose of this tutorial, our blueprint consists of a picture of New York City at night. We want to have a two page website; the first is the home that contains some introduction, the link
An active connection to another web page, location in a web page, file, or other Internet resource. Selecting the link takes you to the new location or resource. ‘); return false”>link to the second page and one external link which is actually the link to this tutorial..
Open your image using Photoshop.
From your menu go to Image ==> Image Size
Set the image width to 780 pixels to 800 pixels since this is acceptable on most screen resolutions and your visitors will not have to scroll to see the complete website. Make sure to have the scale options checked to preserve the dimensional coordinates of the image.
Fig1.Set image size to appropriate screen size.
On the right side, from the layers panel, right-click your image and click Layer From Background, give it a name (background) and click OK.
Fig2. Create layer from background.
Now we will create the navigation buttons, namely our two pages from our blueprint: Home Page and Sub Page.
From your tools bar choose the Rounded Rectangle Tool, and set the Radius to 50 pixels and the color to a color that matches your image. If your image is a dark image, choose a bright color and vice versa. Also you can use the color picker to take this color from your image. For example, since our picture is a dark night picture with some bright lights, we used the color picker to take the color from the bright lights under the bridge.
Fig3. Creating a button using the rounded rectangle tool.
Place the curser where you want to draw the first button (The home page button). Draw the button by pressing the left button on the mouse and moving the mouse while pressing.
Fig4. Draw the button.
Now, if you look at your layers panel to the right you will see a new layer automatically created for you. Right click the layer and click the Blending options. A new window will open and here we will give the button all the looks we want.
Fig5. Blending and designing the button.
Feel free to play around with these tools until you are satisfied with the appearance of your buttons. If you know your way around photoshop, this should be a peace of cake.
For the purpose of this tutorial we did the following settings:
Fig6. Apply Outer Glow Effect
Fig7. Apply contour to bevel.
Fig8. Apply Gradient Overlay Effect.
Fig9. Apply Stroke Effect.
Now on the tool bar click the text tool (it is the button with the T) then press on the button that we have just created and blended. Write the name of your main page (Home). Make sure that you choose a color opposite to the color of your button so you can see the text typed. Like any other text tool, you can choose the appropriate font, font color, font size… etc
Now in the layers panel you will see the text layer, right click it and you can click the blending options and play around with the design the way you want. We only added contour.
After applying your favorite blending options to the text of your button, go back to your layers, right click the button layer (if you did not change the name, it will be shape Click Duplicate Layer.
A new layer will be created; this is going to be our sub-page layer. We do the duplicate layer, so we do not have to re-design the button and so we have an identical button.
Fig10. Duplicating Button Layer.
Now also duplicate the text layer so you have the same text design for the sub page button. In a similar way, move the text and place it above the new button.
Now double click the new text layer and you will be able to edit the text which is still a duplicate of the first button. We named it Sub Page.
Note that, if your text is bigger than the button, you can click on your button’s layer to select it, from your menus, choose the Edit menu ==> Free Transform and you will see that you are able to extend the button as much as you need. After being satisfied with the new size, click the Move tool, click apply, and there you go, all is ok.
Fig11. Creating a second navigational button identical in design to first button.
Now we want to create a place to put our website content. Let’s go back to the Rounded rectangle tool again.
Choose the rounded rectangle tool and draw a big rectangle that is enough to hold your content. Again do not forget to choose a bright color if your image is dark and vice versa.
Now right click the new rectangle’s layer and go to the blending options and give it some design factors. So the rectangle show nicely on our template, we are going to give it opacity of 30%. Also some other nice touches that is up to you. At this point we can say that our website template is ready. But since for the purpose of this tutorial we do not want to use any external html
HTML (or XHTML) is a coding language used to create Web pages. With HTML, you surround a block of text with tags that indicate how the text should appear or what purpose it has in a document.’); return false”>html editor, we can add our content from Photoshop. Whether your content is images or text you can add it here wherever you want. We are going to add some text to our content box and show you how to create the website.
Again we choose the text tools and place it inside our box and write whatever we want. We even can give it the design that we need by going through the blending options the same way we did for our buttons text. Keep playing with the text design until you see it beautiful and of course readable.
In the same manner, you can add a logo, a copy right notice, and whatever other contents that you drew on your blue print. This is our main page design:
Fig12. Creating a place to hold web page content.
Fig13. Adding content to web page.
I want my website to be at the middle of the page. I go to the first
Post a comment or any related helpful information