954,598 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article

Adding Photoshop Content Box and Background

Hey all,

I am a newbie to this forum and web-design and hope this has not been asked a hundred times.

I have created a content box in Photoshop CS2. I have made it a transparent png. I am curious to see if I can add text to it in CSS or do I need to do it in photoshop? Also, I would like to add images to this content box, is this possible?

I added this as an image as an attachment.

Finally, should I add this as an image in my html file or css?

Best,
Erek

Attachments box.png 6.22KB
Erek4
Light Poster
34 posts since Feb 2009
Reputation Points: 10
Solved Threads: 0
 

addin Png in html causes white background sometimes. and also png takes more space then all other images. if u want to add some content over an image @ html. use the image as background.
i used 3 gif images as my background on my site. i could use png also. but for keep speed flow most of the designers use gif and jpeg.

rockbd
Light Poster
29 posts since Mar 2007
Reputation Points: 10
Solved Threads: 0
 

Rockbd,

Thanks for your reply.

Erek

Erek4
Light Poster
34 posts since Feb 2009
Reputation Points: 10
Solved Threads: 0
 

Hi Erek4,

First things first. Read up on the link below, it will explain how to create rounded corners (too lazy to type it out for you)
Click here .

You can use PNG or Gif, only older browsers don't support png transparency, but if you really wanted to use them, you could use a pngFIX. but GIFs usually do the trick. Take a look at yet another link below to get an idea of what file formats do what:
http://www.corda.com/docsource/CenterView2/builder/comparison_of_image_format_features.htm

macneato
Posting Pro in Training
421 posts since Jun 2007
Reputation Points: 46
Solved Threads: 48
 

Thanks for the input. I was curious, can I save the image as a gif in photoshop. In photoshop, I thought I was limited to what format I could save an image to. Also, when I added text to the image I was unable to save it in any format except: .psd

I will check this out again.

Thanks for the links and the comparison chart.

Best,

Erek

Erek4
Light Poster
34 posts since Feb 2009
Reputation Points: 10
Solved Threads: 0
 

Photoshop allows you to save as specific web formats. Not sure what version you are using, but to save for web do the following:

FILE > Save for web and devices
or alternatively use the shortcut;
ctrl+alt+shift+s

macneato
Posting Pro in Training
421 posts since Jun 2007
Reputation Points: 46
Solved Threads: 48
 

WELLL!! macneato. i thinkg he do know how to save!!! [no offence] :)

rockbd
Light Poster
29 posts since Mar 2007
Reputation Points: 10
Solved Threads: 0
 
In photoshop, I thought I was limited to what format I could save an image to. Also, when I added text to the image I was unable to save it in any format except: .psd

Read the post probably... then re-think what you just said to me.

macneato
Posting Pro in Training
421 posts since Jun 2007
Reputation Points: 46
Solved Threads: 48
 

sry!! i didnt saw that!! :(

rockbd
Light Poster
29 posts since Mar 2007
Reputation Points: 10
Solved Threads: 0
 

Macneato,

Thanks, I am new to Photoshop (CS2) and wanted to make sure I was doing it right.

Erek

Erek4
Light Poster
34 posts since Feb 2009
Reputation Points: 10
Solved Threads: 0
 

make sure that when you want to save your image in PS as a gif, that your bit rate is set to 8 and rgb. rastarize all your layers before saving, that would prevent the text from changing in some instances. you can put your image in a pop up div in dreamweaver that works wonders.

p.s. when you do save an image for .gif, just make sure that your background is transparent and your checkbox for transparent is selected.

MJ Pieterse
Junior Poster
145 posts since Mar 2009
Reputation Points: 13
Solved Threads: 18
 

This article has been dead for over three months

Post: Markdown Syntax: Formatting Help
You
View similar articles that have also been tagged: