Member Avatar for dlannetts

Hello, l have a website template done in photoshop cs4, now l have made the template but l want to make it blend to a 0 transparency at the bottom for different page lengths and stuff, does anyone know how this can be done? Thanks :)

  • 4 Contributors
  • 8 Replies
  • 105 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by dlannetts
Member Avatar for rajarajan2017

I) Edit the layer that you have the background
2) Create linear gradient fill on a shape (up towards down)
3) While giving gradient filll you look into the slider you have
4) click one of the slider that has the color of bottom part and give transparency (opacity) to 0.

Hope this helps!

Member Avatar for dlannetts

I) Edit the layer that you have the background
2) Create linear gradient fill on a shape (up towards down)
3) While giving gradient filll you look into the slider you have
4) click one of the slider that has the color of bottom part and give transparency (opacity) to 0.

Hope this helps!

mmm, this doesn't work to well because l have border and shadows that still appear, instead, sorry about this, how would l make it that the more text l have on my page the longer the page is, so it extends on how much text there is?

Thank you to raja for your quick, easy and straight to the point response, it is much appreciated....

Edited by dlannetts because: n/a
Member Avatar for rajarajan2017

Are you asking in photoshop (or) about extending text in webpage (HTML)?

Edited by rajarajan2017 because: n/a
Member Avatar for dlannetts

Are you asking in photoshop (or) about extending text in webpage (HTML)?

well, what l was after is how to make the image right in photoshop so l can latter implement the html, why? how can l do it?

Member Avatar for Veneficae

If you were wanting the bottom of the image to always fade to a transparent, what might be easier is to get your background colour and have it fade to that. Unless your background colour changes, it'll always appear to fade into the colour in all browsers. Do the same in Photoshop. Get the background colour you want, and make that colour the last one (far right) in the gradient you've made. It should now always end with that colour at the bottom. Then you've free to save that portion of the image for the HTML.

To make it extend the longer the page is in HTML, you'll need to have the fading portion of the image in a div, and put it underneath where your content is.

For example:

<div id="content">
<p>
Within this div is the main page content.
</p>
</div>
<div id="footer_img">
<img src="images/filename.jpg" alt="filedesc" />
</div>

There are more elegant ways to do it, but that will work if it's a fixed-width container. I can provide a more detailed solution if you wish.

Edited by Veneficae because: n/a
commented: very helpful... +1
Member Avatar for dlannetts

ehmm, is it me or does this seem almost completely un related, oh and thanks for the help raja and Veneficae +rep for both yous, l am marking this as solved now

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.