[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

using Photoshop's save for web feature

Posted on 2005-05-03
3
Medium Priority
?
215 Views
Last Modified: 2010-04-03
Hello,

I am using Photoshop's save for web feature to slice up a .psd file of my home page. I have a paragraph of text that was actually placed on top of a image layer. When I slice it and make this paragraph as "Text" not image and save for web and open the generated html file in Front Page, the back ground image is no longer there. I want that image to be there and the text to be shown on top of it. How to fix this?
0
Comment
Question by:atifmanzoor
  • 2
3 Comments
 
LVL 5

Accepted Solution

by:
freeman118 earned 1000 total points
ID: 13919847
Hi atifmanzoor, there is no way to create text on top of an image for html in photoshop, when u set the slice to text only, u get the text, when u set it to image u get the image(which may include the text as part of the image). Really, you're tackling this problem from the wrong end; you should only use photoshop to create the layout of your page, not to create and add the content as well. You should use your html editor to add the text to the page layout u get from photoshop. Now there are two ways to do this; if u created your page using tables, you will have something like this:
<table id="Table_01" width="320" height="240" border="0" cellpadding="0" cellspacing="0">
      <tr>
            <td>
                  <img src="images/Untitled-1_01.png" width="320" height="67" alt=""></td> //take this image...
      </tr>
      <tr>
            <td width="320" height="93">rub</td>
      </tr>
      <tr>
            <td>
                  <img src="images/Untitled-1_03.png" width="320" height="80" alt=""></td>
      </tr>
</table>

now what u can do to place text on top of the image is set the image as a background on the table data <td> tag, like so:

<table id="Table_01" width="320" height="240" border="0" cellpadding="0" cellspacing="0">
      <tr>
            <td background="images/Untitled-1_01.png" width="320" height="67"> //...and put the it as a background here
                  hello mars</td> //then u can put your text in between the <td></td> tags and it should show up over the im
      </tr>
      <tr>
            <td width="320" height="93">rub</td>
      </tr>
      <tr>
            <td>
                  <img src="images/Untitled-1_03.png" width="320" height="80" alt=""></td>
      </tr>
</table>

I hope that didn't just confuse you.
0
 
LVL 5

Expert Comment

by:freeman118
ID: 13919915
If you used <DIV> tag layers when u exported your page from photoshop u can just place another <SPAN> or <DIV> layer above your image, using the CSS top: and left: attributes to position it above the image. If u need a better explanation just ask.
0
 

Author Comment

by:atifmanzoor
ID: 13919966
thanks freeman118, let me go ahead and try your fist comment. I will get back to you hopefuly with your reward points tomorrow the same time. Cheers.
0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

HOW TO CREATE A WEB 2.0 IMAGE WITH A REFLECTION I would like to start by saying I know Web 2.0 isn't a style. It is actually the practice of information sharing or  collaboration on the Web. It is also associated with the technology that is used …
This article outlines the struggles that Macs encounter in Windows-dominated workplace environments – and what Mac users can do to improve their network connectivity and remain productive.
In this tutorial viewers will learn how to correct colors in Photoshop using the Color Balance adjustment Open a photo for editing in Photoshop: Open a photo for editing in Photoshop: Select "OK" on the dialogue: The Color Balance adjustment works b…
In this tutorial viewers will learn how to correct colors in Photoshop using the Levels adjustment Open a photo for editing in Photoshop: Begin by creating a new adjustment layer by going to Layer > New Adjustment Layer > Levels: Select "OK" on the …
Suggested Courses

825 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question