Creating A Webpage Using Photoshop

I've read that this can be done with greater ease by using Ready Image, but since I'm more familiar with PS, I shall use PS as the guide.

This guide does make a few assumptions ::

1) You already knew how to use Photoshop.
2) You already knew how to write HTML codes
3) You knew both of the above but did not ralise that it can be done ..

Thus, I shall not touch on those 2 topics, as books a thousand pages thick have been written on them. So, I would wanna waste my time and yours and all the disksapce that could be used to host some useful stuff.

01:. Open the .PSD file which you have created the layout on.
Somethings to take note of::
You may wanna toggle the "Snap" function in the "View" in the menu bar
"Snap" will snap on to the nearest border. So if you are making very fine slices, you may wanna disable it.

02:. Create the slices
I'll usual hide all the other tools when working and this can be done hitting the "TAB" button on your keyboard.
I'll also like to start from outside the picture as it will snap automatically back to the border of the pic
* Do note that HTML creates tables in row-by-row manner .. so try to keep your slices in rows .. this will make your editing of the code a lot easier in the future

03:. Edit the slices by doin a right-click
* If there is no special formating or pict in the slice .. ie .. pure text or palin backgroud, it would be best to change it to non-image
* HTML can be included in the text box

04:. Save as HTML
Press "Ctrl" + "Alt" + "Shift" + "S" or goto File >> Save for Web
You will then be able to edit the pict quality of each slice..

05:. Do your own refinement of the Webpage with your preferred HTML-Editor

 

 

 

Comment/Reply (w/o sign-up)

These instructions don't work. I have Adobe Photoshop CS4 Extended, and that's what I searched for to find this page, but the instructions are probably ripped off from someone else without testing. I wonder if they might be for some other product. -

Comment/Reply (w/o sign-up)

It does work...
Creating A Webpage Using Photoshop

[Replying to (G)Author Name - e.G. John, Mike,4182,135530] No, this does work. You really do need to have been using photoshop for a while and know at least basic html. Alternativly use a program that lets you edit in a design view such as Microsoft Frontpage. I use Photoshop CS3 and Frontpage to create webpages with ease.

Comment/Reply (w/o sign-up)

Allowance to elaborate
Creating A Webpage Using Photoshop

I read over this and had to do some extra research to understand it. This isn't however a difficult thing to learn.

First you must understand the Slice tool. What it does? The Slice tool might be replaced with the crop tool, just right click the icon to select a new tool. When you are ready, set you guides as if you were drawing the tables of a HTML file. Then use the Slice tool to draw boxes within the guides. These boxes will become actual cells in a table. When you are happy with your boxes use the above mentioned method to save for web: ("Ctrl" + "Alt" + "Shift" + "S" or goto File >> Save for Web)

Next you will adjust your image qualities and other properties and hit save. That will bring up a new window. At the bottom (in CS4) There is a menu labled "Save as type" Select "HTML and images" Then BAM!! it saves an HTML file with all your images at web quality and filesize with a seperate image directory.

Hope that sheds light on this issue =)

-reply by Kevin Miller

 

 

 

Comment/Reply (w/o sign-up)

HTML and Images
Creating A Webpage Using Photoshop

Kevin - Your tip - "Save as type: HTML and Images (*.Html)" was like the holy grail.  I have been trying to figure out how to save a working HTML file using Photoshop for a couple of months - with no success.  Yours was the tip that made everything work.

Thanks a million.

-reply by Miles

Comment/Reply (w/o sign-up)