Buy Viagra Professional Online, Indian Viagra 100mg

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.

Introduction
Most professional 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.

Tutorial
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, 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 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 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.

Step 4:
Creating the website template:
The slice tool is our key tool for this step. The slice tool is the tool that looks like a mini-knife on the tool bar. Choose the slice tool


Fig 14:Photoshop Slice Tool.

With the slice tool selected, go and draw two rectangles around the buttons that you created. Also draw rectangles around all the places that you want to act as links later. This could be links to the home page, sub-page, and the link to copy right and terms…etc.
Make sure your slices exactly surround the buttons and links, eliminate empty spaces as much as possible.


Fig15. Slicing Image

When you are done slicing, choose a slice (button), right click it and click the Edit Slice Options. A new window will open. This window will include the link information:
For our home page, we use index.html. This is because, when you point the browser to the directory containing your website, the main page will open. Two important inputs are the URL, which is the link to the page, and the Image Alt which is the text that will light up when the mouse goes over the link.
Do not forget to add an ".html" extension to the links! The alt can be any text.


Fig16. Applying URL Properties in Slice Options

Do the same with all your link slices.

Now you have created the home page. Save the psd file as home.psd Now go to file ==> save for web and devices. When the save window opens, click the save button.
Make sure to choose html and images in the save as type. Also if this is your main page, do not forget to save it as index.html


Fig17. Save html and images to create a web page.

If you cannot wait, you can go to the directory where you have just saved the images and the html of your website, click the index.html (or home.html) file and open it.
At this point you might not like the background or the alignment of the page. These two little options are very easy to adjust using any text editor such as notepad.
Open notepad, open the index.html file using notepad.
Go to the line that contains: <body bgcolor="#FFFFFF"
The body line is the line that controls the layout of your website body! ( #FFFFFF) is the code for white in html. Because my image is night, and I need the background to be black, which is (#000000) in html, I replace the bgcolor to black (#000000).
I want my website to be at the middle of the page. I go to the first <table tag that Photoshop created for me and add the following: align="center" inside the options. The table tag will then look like this:
<table align="center" id="Table_01" width="504" height="357" border="0" cellpadding="0" cellspacing="0">
Save the file and re-open (or refresh if you still have it open), and everything should look perfect. At this point we can create all our sub pages from our website template. If you still have the home.psd file open in Photoshop, go to file and save as sub-page.psd. Modify only the content part with the sub page content. Again, go to file ==> save for web page and devices, do the background color and alignment if you do not like it and you have a sub page. Of course, when saving, remember to give your sub-page the same name that you have put in the URL section when you edited the slice options of your button. In our case here it is sub-page.html
Do the previous step for all your content pages. After you are done, upload all the files to the same directory on your hosting server. Go to the index.html page from your browser and enjoy the looks of the website that you have just created.


Fig18. Final web page created with photoshop.

You can click here for a working demo of the website template that we have just created, also you can download the psd files attached to this tutorial.

Conclusion:
With the use of the right tools such as Photoshop, creating website and website templates is easier than expect. The best way to learn and perfect your work is to actually apply what you learn by trying, trying and trying again. Subjects such as website design or development in general are not learnt by just reading. I hope this tutorial has been useful to someone.

Feel free to use the information included in this tutorial for both personal and commercial website designs. However the tutorial itself is a copyright of zeronese.net and it is illegal to copy and/or redistribute it in whole or in part without a written notice from zeronese.net.

The attachement of this tutorial contains the psd files that was used in creating the template.

View Zeronese Collection of Professional Photoshop Website Templates