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

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

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.

Allowance to elaborateCreating 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

HTML and ImagesCreating 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

I don't get how to put it on my website. I use Piczo. How do I view the HTML code of the picture? Or just how do I get it on my site? I tried making an HTML code to view it by right-clicking and then checking the properties but it didn't work. The code  used: <img src="file:///C:/Users/Ruixin%20WANG.RuixinWANG-PC/Pictures/101/images/layout1_06.Gif"> Did I do it right? 

-reply by Jennifer

rollover photoshop csCreating A Webpage Using Photoshop

hallo there,

I have one question for you,please help.

I make a rollover in photoshop cs and I want to create to frontpage 2003 but doesnt work. How to resolve the problem please send your answer to my e-mail address.

Regards,

-reply by iwan

I want to add text in Dreamweaver on a slice graphic designed in photoshopCreating A Webpage Using Photoshop

I have designed everything in Photoshop and have done all my slices, but my main problem is that when I create no-image or table slices I can't add text in Dreamweaver when trying to edite the HTML file. Is there anyone who can help? Basically after designing my layout in Photoshop and save the HTML file and the GIF slices, I want to be able to edit the HTML file in Dreamweaver, I.E have slices that are reserved for text.

-reply by Noris Mdluli

 

Replying to (G)Noris MdluliCreating A Webpage Using Photoshop

Replying to (G)Noris Mdluli u need to select the cell where u want the text to go (or html/php code) in dream weaver, cut the graphic make it a div choose the image u cut as the background image give the size of the div u want (same as image) then u can type your text in there with the same picture as a background to the div tag (cell)Still stuck goto youtube and type in how to export from photo shop to dream weaver

-reply by Santa CLAWS