TPD3 and backgrounds

Damienb

Most likely a very simple question, but i am a novice when it comes to this. I have an Axcent3 controller with a VPT-CP panel. Using TPDesign3 software. I got my head around the placing of buttons, giving them a graphic etc. What i cant seem to find is a way to make the background of my pages an image.

Spent some time searching the forums but to no avail. Is it possible to have a *.bmp image as a page background? I can find the colour swatch to change the background colour, but cant find a way to use an image.

thanks

Damien

yuri

add a button -> make it as big as the panel -> set a .bmp to it ->

Damienb

hey yuri, thanks for the reply.

I ended up doing this. Wasnt sure if that was the "right" way.

Small downer so far, i made a very simple layout (like i said, im learning) it consisted of 3 pages, few buttons on each +the consistent background "button" as per Yuri's suggestion. In TPDesign, looks great. The simulation ran fine. I downloaded it to the panel and it looks like crap!!

*rubs chin* What i think has happened is the images i'm using are yes bitmap but the panel being older (VPN-CP) must only be able to display 256 colours. I didnt go overboard with graphics in TPDesign, just a nice rippled blue background and a Windows logo for PC, DVD icon etc. But they came up all distorted and in very washed out odd looking colours.

Back to the drawing board me thinks. Lucky this is for personal use and not a client!!

Damien

ericmedley

Damienb wrote: »

hey yuri, thanks for the reply.

I ended up doing this. Wasnt sure if that was the "right" way.

Small downer so far, i made a very simple layout (like i said, im learning) it consisted of 3 pages, few buttons on each +the consistent background "button" as per Yuri's suggestion. In TPDesign, looks great. The simulation ran fine. I downloaded it to the panel and it looks like crap!!

*rubs chin* What i think has happened is the images i'm using are yes bitmap but the panel being older (VPN-CP) must only be able to display 256 colours. I didnt go overboard with graphics in TPDesign, just a nice rippled blue background and a Windows logo for PC, DVD icon etc. But they came up all distorted and in very washed out odd looking colours.

Back to the drawing board me thinks. Lucky this is for personal use and not a client!!

Damien

There are a couple things to consider. First and formost: graphics on the G3 panels are not going to look as good as the G4 panels, period.


Second, there are some things to do that will help. First, if you're going to use pictures or images, choose images that have a lot of contrast and also have a lot of of primary color and are fairly monochromatic.

Photoshop has some great compression tools that I highly recommend. You can compress the image using the 'Save For Web' feature. It will compress the colors of the image down to a quite managable level.

Also, there is a similar feature in TPD3. If you open the resources page, you'll see optimize image. Click on the graphic and hit that button. Sometimes it helps with the end result and others not. experiment with it and see what you get.

Here's an image I've used that doesn't look too bad. I went through and manipulated the basic colors a bit by hand and then did the compression in photoshop.

Damienb

Hey eric,

Yeah i hit optimise and it still turned out like bollox. Here is the background i went to use:



Whilst it is a gif on the web i used photoshop to make it bigger and saved it as a bitmap. Then used TPDesign to import it then hit optimize.

Can the G3 panels display gradients? a blue gradient would be fine.

other images were



and



Think i might need to build on a foundation before creating the Louvre. lol Start with a plain button and add images until it craps out. then ill know my limit.

Damien

yuri

also, G3 panels tend to be alot slower when updating pages.
If you flip from one page to another you will see the background + buttons "flicker" while the page is rebuilt...

G4 panels FTW!!11!#%!

ericmedley

Damienb wrote: »

Hey eric,

Yeah i hit optimise and it still turned out like bollox. Here is the background i went to use:



Whilst it is a gif on the web i used photoshop to make it bigger and saved it as a bitmap. Then used TPDesign to import it then hit optimize.

Can the G3 panels display gradients? a blue gradient would be fine.

other images were



and



Think i might need to build on a foundation before creating the Louvre. lol Start with a plain button and add images until it craps out. then ill know my limit.

Damien

Well, there may be one of your problems. I will never enlarge an image from the web. They are already pretty low-res already. My basic rule of thumb is that I'll not resize any image from the web unless it's somewhere around 2-3 times larger than needed. This can be accomplished either by it being larger dimension-wise or the same size as needed but higher than web dpi. Most things you see on web pages are 72dpi. So, if the image needs to be something like 2" wide, I'll look for graphics that are 4-6 inches wide and then shrink them down in photoshop.

I don't know what your original background image was but I'd look for one that is (if 72 dpi) no smaller than 8" byu 6 inches.

the original image of my example was 300 dpi and 11 something inches wide.

VLCNCRZR

Image Scaling

ericmedley wrote: »

Well, there may be one of your problems. I will never enlarge an image from the web. They are already pretty low-res already.

My rule of thumb is to always start with large oversized images and
scale down as needed (regardless of the type of GUI).

Damienb

Duely noted! Off to find some graphics to shrink.

Thanks for the replies.

Damien

TurnipTruck

Look for a stock photography website. Many of them have good abstract images and other things that make nice backgrounds.

Damienb

i still need to aim for images that look good in 256 colours though dont i?

Damien

ericmedley

Damienb wrote: »

i still need to aim for images that look good in 256 colours though dont i?

Damien

I don't think so. I'd get good hi-res images and then work with them in Photoshop for reduction. It really does a great job in getting them down to size and still looking great.

It's really a matter of trial and error.

jweather

There's a commercial program named Damage Control that does a great job of reducing image color depth. I haven't used it personally, but have seen it referenced several times here and elsewhere: http://www.maptunes.org/

Damienb

cheers, ill check it out.

I put that beach scene on the panel and it doesnt look too bad. I then tried to use a reduced/properly edited picture (attached) and it looked grainy and average. Trial and error indeed!

Damien