RocketMan on 24/3/2009 at 04:09
Hey all. Trying to make my first ever web site. I have no knowledge of html (though I've copied code from examples on the net to get by) and no experience making web pages. I watched some youtube tutorials, subscribed to a free domain and I'm off. Got 3 pages running and linked so far. My method has been to use ImageReady to design the page and using slice technique to make the clickable parts, etc. So far it's been working fine until now. Here's the issue:
I have an image with a certain level of transparency as the backdrop for the website. I intend to put text on top of this image. They way I'm doing it is to slice out a text area, select "no image" and put the HTML snippet in the box to allow the text to show up. There's an option in the slice window called BG for selecting the text background. The problem is that no matter what I pick, the text always has a background. WIth "no background" it still has a white area that totally covers up the graphic underneath. I need to figure out how to place the text belonging to the slice on top of the graphic beneath it, so that only the text iself is opaque and the rest of the text area is transparent. Anyone know how to do this with ImageReady/Photoshop? I don't have any supporting software for making web pages.
Thanks in advance.
jtr7 on 24/3/2009 at 05:13
Would creating an alpha channel for the image solve that? Search Photoshop's Help for instructions, unless someone has an even better solution.
Renzatic on 24/3/2009 at 05:44
There are tons of ways you can fake a transparency effect depending on what you're trying to do. But jtr7's advice is the best general way to approach transparencies.
To do it, take your text, rasterize it, paste it into the alpha channel as white, and make the rest of your button whatever shade of grey suits you best. Make the final product a gif or png file, I think they save with alpha transparencies. If you did it right, you should have opaque text with a nice see-thru background like you want.
RocketMan on 24/3/2009 at 06:42
Oh, I agree it should be relatively simple to make an image OF text that has transparent background but I'm restricted by the slice tool and the options it allows. I don't have the ability to select how the text appears. I wouldn't know how to do all that rasterization stuff when you're limited to a small window with a couple of options only. Maybe a picture will explain better:
Inline Image:
http://h1.ripway.com/RRRocketMan/system shock stuff/slice.JPGSo in this case, the image has already been applied to the web page layer, the slice is created on top of that and when this slice is created, the above window describes the slice's properties. This is where I enter the text and it would seem that these are the only properties that I can change for the text. I have no idea how to get rid of the opacity around the letters from this window.
Renzatic on 24/3/2009 at 14:34
I'm probably missing something vital here, but why not link to an image instead of inserting text? I think your effects options are pretty limited if you stick to straight up HTML code.
RocketMan on 24/3/2009 at 16:10
I know it sounds stupid but my reasons are:
1. you can attach an URL to text and I don't know how to do it otherwise
2. less load time for the site
3. the search engines can find a page with text in it but to my knowledge they can't if there isn't any text, only images
4. would be good to know how to do it.
RavynousHunter on 25/3/2009 at 16:03
If I got this right, you can simply add this to your HTML to add a background image: with the < and >, of course.
Code:
body background="/images/image_name.gif"
However, this isn't "recommended" by the W3C, so you can alternatively add it into a CSS like so:
Code:
body {
background: url("http://yoursite.com/images/image_name.gif") 50% 50% no-repeat;
}
If you want this to be part of only one page, just put it in between some style tags, and add it in after the head tag. Or at least, that's what (
http://www.quackit.com/html/codes/html_background_image_codes.cfm) this site says... :erg:
RocketMan on 26/3/2009 at 00:08
ugh...I wish i knew more about this stuff. Everybody else seems to be able to do this in their sleep. All these cool web pages we take for granted. What the hell am I doing?
RavynousHunter on 26/3/2009 at 21:11
Shit, I barely know what I'm doing half the time, I just guess. :cheeky: And if guessing fails, I just look shit up on stuff like Google, Wikipedia, MSDN, etc.
Al_B on 30/3/2009 at 21:32
Quote Posted by RocketMan
ugh...I wish i knew more about this stuff. Everybody else seems to be able to do this in their sleep. All these cool web pages we take for granted. What the hell am I doing?
Learning - nothing wrong with that.
What you
should be able to do is divide the pages (including the background) into the areas that you want and assign background images in the right places. However, it sounds like your tools are getting in the way of that but without being able to see your web page it's difficult to comment.
Post a link and don't worry about how bad it looks (it can't look worse than my first effort...)
