Web Hosting Forum | Lunarpages
News: July 14, 2008 - New Contest! - Submit Your WordPress Theme Designs, Win BIG!
August 5, 2008 - Time to Submit Your Links for the August 08 Site of the Month Award!
 
*
Welcome, Guest. Please login or register.
Did you miss your activation email?
August 20, 2008, 05:05:42 PM


Login with username, password and session length


Pages: [1]   Go Down
  Print  
Author Topic: Distortion Around Layer Edges  (Read 386 times)
fkramer
Trekkie
**
Offline Offline

Posts: 19


WWW
« on: April 11, 2006, 09:42:50 PM »

I've recently started using graphics with Paint Shop Pro X in an effort to improve my Web design.

I redesigned my main site with the help of some images and a Frontpage 2003 Dynamic Web Template that I purchased and tweaked (www.farrellkramer.com).  I'm happy with it now and want to upgrade the two Wordpress blogs I have, FKCBlog (www.farrellkramer.com/blog) and my podcast (www.talkingcommunications.com). 

I've customized both blog themes a bit and am generally happy -- except for the header, which is pretty much out of the box.

I tried to create a new one and it came out like this:



The problem is there's this distortion around the image of the microphone and the text where, I assume, the different layers overlap.  Is there some way to get around this?  I see it in other Web sites and it detracts from the quality of the graphics.

Does anyone know how to accomplish this?  I must be doing something wrong.

Lastly, now that the text is part of an image, do I lose the ability of search engines to pick up my podcast name and subhead?  On my blog, it renders the words as text on top of the image.  However, I was hoping to have a cleaner approach.  Any thoughts?  Thanks much.

Logged

philvis
Master Jedi
*****
Offline Offline

Posts: 1064


« Reply #1 on: April 12, 2006, 07:32:49 AM »

Your file size is pretty small (20k) now so maybe you can up the quality when you save it if the image quality is there to begin with.

I've never used PSPX but if the text and microphone don't overlap as they appear not to, try putting them on the same layer with the top one higher up in the stack if necessary.

Yea, you lose the ability for search engines to read the header text by using the image but I wouldn't worry about it on your sites as they are text heavy and search engine friendly.
Logged

fkramer
Trekkie
**
Offline Offline

Posts: 19


WWW
« Reply #2 on: April 13, 2006, 02:02:09 PM »

Thanks much, philvis.  Applause

I upped the file size to as close to 50K as I could get, which really resulted in minimal JPEG compression.  The artwork looks much better.

I went ahead and swapped out the ugly, stock WordPress headers for both my blogs with new ones for my company blog (www.farrellkramer.com/blog) and my podcast (www.talkingcommunications.com).

I feel like it's a big improvement.  Thanks again.
Logged

Rowan
hamburglar
Über Jedi
*****
Offline Offline

Posts: 1918


I used to be Human....2.0b


WWW
« Reply #3 on: April 15, 2006, 11:11:49 PM »

If I were you I would create 2 different images.
Make a background image which has the photo element and background colour in it, save it as a jpg.

Then create a transparent gif which contains the text.

the code to use it should look similar to this:
Code:
<div style="background: url(background-picture.jpg) no-repeat;">
<img src="background-text.gif"/>
</div>

Doing it this way will remove all the distortion around the text and constant colours

i do a similar thing on my site http://row1.info
« Last Edit: April 15, 2006, 11:13:28 PM by human2.0b » Logged

Pages: [1]   Go Up
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.3 | SMF © 2006-2007, Simple Machines LLC
Seo4Smf v0.2 © Webmaster's Talks


Valid XHTML 1.0! Valid CSS! Dilber MC Theme by HarzeM