How to create web page in photoshop : photoshop tutorial
How to create web page in photoshop ? You can create beautiful web pages in photoshop.
I am not talking about designing webpage graphics in photoshop. Well, that too can be done and almost 90% of all the web page graphics are being designed in photoshop nowadays. But what I am talking here is to design a complete “.html” web page in photoshop.
To create web page in photoshop follow the below steps:
- Decide the size of the webpage i.e. how much pixel by width and height? You can set any size. My suggestion is to limit it in between 800 x 600 to 1500 x 900. Below 800 x 600, the site will look like too miniature. Above 1500 x 900, the site will look very large and visitors will also need to sidewise and people really don’t like sidewise scrolling. My suggestion: consider 1000 x 800.
- Once we have decided the size of the web page, the second thing is to open a white background image of the same size i.e. 1000px x 800px with 72 pixels/inch resolution.
- Imagine the different sections of the web page i.e. header, sidebar, menu, content area etc. this layout will very from person to person. It depends on your requirement and taste. Now once you have decided your layout, write your contents and links in different images to fit in the demarcated area. For example, see the picture below.
Page layout
Here, the different areas such as Header, Sidebar, Menu and content areas should contain the content that you want to upload. The different pictures should be of that specific size which will fit in to the original background image of 1000 x 800 size.
4. Open all images in photoshop. Copy and paste on the original picture.
5. Now in the drop down menu, go to -> Layer -> “Flatten Image”. This will merge all layers to produce one layer image.
5. Now use slice tool and cut out different portions. This will reduce page size and help in loading the web page in slow connections. Sliced image
6. Now go to file – > “save for web” (in old photoshop versions). In newer versions such as CS5 etc. go to file -> “save for web and devices”. A popup window will appear. Click “ok”(old versions) or “save”(newer versions).
7. Save the file selecting Save as type “HTML and Images”. Save as type
8. Go to the location where you have saved the web page. You should see a “.html” file and a folder named “images”. Open the folder; you should see the sliced portions of the original image.
Now open the “.html” file in browser. Your web page is ready.
You may also like to read:
Why edit photos with photo editing software
