Home Blog Website Design Services How to Design a Website in Photoshop
How to Design a Website in Photoshop
- 11 May / 2009
- 2,490 views
Previously FrontPage or Dreamweaver was used widely for creating the basic structure of a website. However, the concept of website design has changed rapidly because of the unprecedented development in this domain. Photoshop has been evolved for smoothening website designing process and for generating a rich graphical interface. If a modern look is all you want in your website, you have to design the basic layout of your website in Photoshop which will make your website visually appealing and aesthetically pleasing.
Here in this article we will discuss entire stage right from the beginning in a step-by-step way:
Step1. Open a new photoshop file by selecting “New” option from the File menu. Fix the width to 800px and the height to 600px and the resolution to 72px. The background should be transparent. Click Ok after putting these values.
Step2. In the next stage navigation and the header of your website should be designed. Navigation buttons, banner ad areas, logo should be included in that designing process. Create buttons with 30px and a header section with a height of 15px. The banner graphics and the logo should be placed in the remaining area. Text should be placed in the placeholder section.
Step3. You can either create a logo yourself or you can use an image from any free image providing website. Just download an image and open that image in the Photoshop. The image can be resized by selecting Edit>Transform>Scale. You can resize the image by holding the shift key and then maintaining the proportion.
Step4. In the next stage, you have to create some cool buttons for web navigation purpose. Select the text box and type different names for different buttons for example contact us, home, services etc.
Step5. The layout of the body area, where the content will be placed, has to be designed in this stage. If you want to add additional links in your website, you can utilize the left panel for this purpose. Just copy and paste some dummy text in the content area of your website, which you can replace later.
Step6. Add footer content with copyright text, footer links and company logo if possible.
Step7. In the right panel of your website, you can add press release summary, ads, announcements, latest news etc.
Step8. Place all the images that you have selected in the appropriate place of your website. You can slice the images with Slice tool.
Step10. If you think that you have ultimately managed to create a basic structure of your website in Photoshop, you can save the file by choosing save for web option. Select HTML and Image option while saving the file.
Step11. Open the HTML file for checking your website in a web browser.
By following these simple steps, you will definitely be able to design a website in photoshop. However, if you are unable to design a website in Photoshop, you can opt for professional assistance from any reputed website development company.
9 comments
Leave a Reply
-
1000+
Happy
Clients -
25+
Countries
Served -
19+
Years of
Trust
I need help with...
your post is really very informative.
I have to say that this tutorial is a bit vague, but on the other hand it is a good way to get people going in the right direction. Making a good design in PS is bit more intricate, but this will give them an idea of where they should be heading so it is indeed useful. Thanx.
I was searching for website traffic related blogs. I have read some of your posts and they are good. Thanks for providing some good information about this topic.
This is the first time I’ve commented here and I must say you give genuine, and quality information for bloggers! Great job.
p.s. You have an awesome template for your blog. Is it a free template or did you have it designed especially for you, I’d love to talk to your designer !?
Howdy, cheers for the brilliant tutorial. The tutorial helped me improving my skills greatly. It’s always gorgeous to get some formidable inspiration and I hope to find more of such posts here in future because nobody will ever stop learning new things. Cheers
I’ve been researching the web for my research on this theme. I’m so thankful what you shared adds a new dimension to the data I’m compiling. I truly appreciate the way which you look at this subject field, it offer me a unique means of seeing at it now. Thanks for the share.
This is by far one of the best composed articles on this subject field. I was researching on the exact same subject and your position entirely took me off with the way you expound on this subject field. I compliment your insight but do leave me to come back to comment further as I’m currently broadening my research on this content further. I will be back to join in this discussion as I’ve bookmarked and tag this very page.
Great article, you must have done a fair amount of research for it eh? Well done on it, really.
Photoshop is one of my favourite program to create web layouts.