|
|
| Author |
Message |
riptorn
Joined: 23 Aug 2009
Posts: 9
Location: Australia
PS Version: Adobe Photoshop CS4
OS: Windows Vista Ultimate 32 Bit
|
 Posted: Sun Jan 17, 2010 1:14 am Post subject: PSD To HTML |
 |
|
Hi, I am using Photoshop CS4. I am still new at using it. I was wondering please if anybody can help me on how to convert my psd file to a html for a webpage? Thanks
_________________
Riptorn |
|
|
|
|
 |
darklite
Joined: 19 Dec 2009
Posts: 277
Location: Oregon, U.S.
PS Version: cs
OS: windows 7
|
| Posted: Sun Jan 17, 2010 10:28 am Post subject: |
|
|
Hi, I don't have CS4, I only have CS, but what I do is go under 'file', 'save for web', and in mine, I can go to a side-out menu as shown in my screenshot, and choose 'edit settings' in the drop-down menu. From there you'll have a choice of converting to html. There's also an option box for outputting to xhtml. If it's a big file, you might want to think about using slices.
I don't know if you're familiar with slices or not, but the slice tool is on the toolbar. You can section off large pieces in smaller sections and apply html code and links to each piece if you want. It's a great way to create image maps.
[img][/img]
_________________
Jeff
http://www.autumnwindstudios.com |
|
|
|
|
|
riptorn
Joined: 23 Aug 2009
Posts: 9
Location: Australia
PS Version: Adobe Photoshop CS4
OS: Windows Vista Ultimate 32 Bit
|
| Posted: Sun Jan 17, 2010 3:14 pm Post subject: PSD To HTML |
|
|
| darklite wrote: | Hi, I don't have CS4, I only have CS, but what I do is go under 'file', 'save for web', and in mine, I can go to a side-out menu as shown in my screenshot, and choose 'edit settings' in the drop-down menu. From there you'll have a choice of converting to html. There's also an option box for outputting to xhtml. If it's a big file, you might want to think about using slices.
I don't know if you're familiar with slices or not, but the slice tool is on the toolbar. You can section off large pieces in smaller sections and apply html code and links to each piece if you want. It's a great way to create image maps.
[img][/img] |
Thanks, I managed to save for web, but I cannot see the edit settings anywhere? I only have eyedropper and zoom?where could it be? I do not know slices? I have dreamweaver will that help me?
_________________
Riptorn |
|
|
|
|
|
darklite
Joined: 19 Dec 2009
Posts: 277
Location: Oregon, U.S.
PS Version: cs
OS: windows 7
|
| Posted: Sun Jan 17, 2010 7:02 pm Post subject: |
|
|
In the screenshot I posted you'll see a line to the far right pointing to 2 arrows >> . If you click there it should open a drop down menu. Select 'Edit Output Settings'. This will give you the option of editing the html.
Easier method:
If you just want the html info added into the image, you can do that in the 'save for web' dialogue box also. Click on 'save'. Under the 'file name' you'll see a field called 'save as type'. Select HTML and images (html). This converts the jpg to a 'web ready' html file.
_________________
Jeff
http://www.autumnwindstudios.com |
|
|
|
|
|
riptorn
Joined: 23 Aug 2009
Posts: 9
Location: Australia
PS Version: Adobe Photoshop CS4
OS: Windows Vista Ultimate 32 Bit
|
| Posted: Sun Jan 17, 2010 7:29 pm Post subject: PSD To HTML |
|
|
| darklite wrote: | In the screenshot I posted you'll see a line to the far right pointing to 2 arrows >> . If you click there it should open a drop down menu. Select 'Edit Output Settings'. This will give you the option of editing the html.
Easier method:
If you just want the html info added into the image, you can do that in the 'save for web' dialogue box also. Click on 'save'. Under the 'file name' you'll see a field called 'save as type'. Select HTML and images (html). This converts the jpg to a 'web ready' html file. |
Ok, I think I did it? I saved it as html with images. It opens up in internet explorer, is that ok?
_________________
Riptorn |
|
|
|
|
|
darklite
Joined: 19 Dec 2009
Posts: 277
Location: Oregon, U.S.
PS Version: cs
OS: windows 7
|
| Posted: Sun Jan 17, 2010 8:34 pm Post subject: |
|
|
|
|
|
|
|
|
riptorn
Joined: 23 Aug 2009
Posts: 9
Location: Australia
PS Version: Adobe Photoshop CS4
OS: Windows Vista Ultimate 32 Bit
|
| Posted: Sun Jan 17, 2010 8:38 pm Post subject: |
|
|
| darklite wrote: | | That's it exactly. Good job. |
Oh?? I thought it was suppose to look like code or something? It looks identical... but in html..you sure it is ok?
_________________
Riptorn |
|
|
|
|
|
darklite
Joined: 19 Dec 2009
Posts: 277
Location: Oregon, U.S.
PS Version: cs
OS: windows 7
|
| Posted: Sun Jan 17, 2010 10:09 pm Post subject: |
|
|
Let's say your image is called "sample" and it's 100 x 100 pixels and you did a 'save for web' as a jpeg.
The actual html code for inserting an image into a web page is:
<img src="sample.jpg" width="100" height="100" alt="description of the image" />
So, open the image in your web browser, go to the 'view' menu and select 'page source'. You'll see code similar to this:
<html>
<head>
<title>sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (sample.jpg) -->
<img src="images/trayart.png" width="474" height="285" alt="">
<!-- End ImageReady Slices -->
</body>
</html>
I hope this helps. It sounds like you have a photoshop image that you're trying to put into an html document. If this is the case, essentially all you need to do is 'save for web' and your dreamweaver program should do the rest for you.
_________________
Jeff
http://www.autumnwindstudios.com |
|
|
|
|
|
riptorn
Joined: 23 Aug 2009
Posts: 9
Location: Australia
PS Version: Adobe Photoshop CS4
OS: Windows Vista Ultimate 32 Bit
|
| Posted: Sun Jan 17, 2010 10:17 pm Post subject: |
|
|
| darklite wrote: | Let's say your image is called "sample" and it's 100 x 100 pixels and you did a 'save for web' as a jpeg.
The actual html code for inserting an image into a web page is:
<img src="sample.jpg" width="100" height="100" alt="description of the image" />
So, open the image in your web browser, go to the 'view' menu and select 'page source'. You'll see code similar to this:
<html>
<head>
<title>sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (sample.jpg) -->
<img src="images/trayart.png" width="474" height="285" alt="">
<!-- End ImageReady Slices -->
</body>
</html>
I hope this helps. It sounds like you have a photoshop image that you're trying to put into an html document. If this is the case, essentially all you need to do is 'save for web' and your dreamweaver program should do the rest for you. |
Thanks, yes the sorce shows like you said. A friend wanted me to convert a psd file to html, so he could add to his web page? I hope I did it right?..Yes I do have dreamweaver, but new to that also..lol..anyway thanks so much for your time.
_________________
Riptorn |
|
|
|
|
|
darklite
Joined: 19 Dec 2009
Posts: 277
Location: Oregon, U.S.
PS Version: cs
OS: windows 7
|
| Posted: Sun Jan 17, 2010 10:37 pm Post subject: |
|
|
|
|
|
|
|
|
|
