Hi - I am trying to create new button icons/graphics for my new TSU9600.

Does anybody know the techniques to modify a PNG image to add the halo/drop shadow/pressed effects seen on the stock PEP3 default icon images?

Thanks!

Alan

Use a Photo Editor or download .PNG images from icon or button websites.

Also Check Here.
[Link: files.remotecentral.com]

Hi, alpha -

I already have GIMP. I'm trying to figure out how you would take a .PNG image (say, for Chromecast) and how that image should be modified (with halos, drop shadows, etc.) so that it has the same look & feel as the other PEP3 Default Activity icons.

I don't want my new icons to look weird on the screen compared to other items.

Trial and Error.

I used PaintShop Pro 8 a while back and came close but could never get them exactly as you have to do both the pressed and unpressed image.

Hi, Lyndel ... Some trial, lots of errors so far.

I am getting closer, though. Enough that the action icons don't look too weird anymore.

Here are some of my notes. All images and adjustments are done with PNG files to support transparency. The sizes are rough, and can change a bit based on your source dimensions:

Scale the icon image size/canvas to roughly: 122 x 122
Final image offset (on the transparent background): 6 over x 6 down
Final Size (roughly): 170 x 170

For the "Released" image:

1) "Select" the image

2) Create a drop Shadow Gray:
Color: 21252a
Offset X: 10
Offset Y: 10
Radius: 15
Opacity: 70
Allow resizing

3) Create a Drop Shadow Blue: (Repeat this step 3 or more times)
Color: b2cbe7
Offset X: 0
Offset Y: 0
Blur Radius: 10
Opacity: 100
Allow resizing

4) Export as PNG (xxx_R.png)

For the Pressed image:

Scale the icon image size/canvas to roughly: 122 x 122
Final image offset (on the transparent background): 6 over x 6 down
Final Size (roughly): 170 x 170

1) Select the image

2) Change the Layer Opacity to 15%

3) Create a drop Shadow Gray:
Color: 21252a
Offset X: 5
Offset Y: 5
Radius: 20
Opacity: 50
Allow resizing


4) Create a Drop Shadow Yellow: (Repeat this step 3 or more times)
Color: ffae01
Offset X: 0
Offset Y: 0
Blur Radius: 10
Opacity: 100
Allow resizing

5) Export as PNG (xxx_P.png)

Let me know how this works for you ...

Now I have to figure out how to blend a blank channel button with channel logos in GIMP to get the 3D button look.

I'm a total amateur with image manipulation and GIMP. Just enough to be dangerous.

Cheers,

Alan

Alan,

Your instructions are about as good as they come. :-) even down to the blue shading on the outline.

For the 3D channel icons, people typically use a standard image under a shaded PNG button with fairly high transparent center (99%) (alpha channel) such that the channel icon shows through.

Under the stock gallery, select Images, there's a Channel Icon Overlay Category with image that is 94x59 that you can use to create your own channel icons if you like the Philips look or are building an activity out of their templated psychadelic colours (Pink Floyd Reference).


Lyndel

Thanks, Lyndel - I'll try your suggestions on the channel icons. I found a channel icon download from the Files section that got me a lot of my city's channels. I converted one of those channel icons (with a bunch of black & dark blue letters) to a blank button, since their style was slightly different from the Philips default. I'll make it transparent via the alpha channel, and let y'all know the results.

The channel icons turned out pretty easy, once I found the right spot.

First, I did a PEP3 "Import Gallery >> Merge" to bring in the US Channel Icons from here: [Link: files.remotecentral.com]

After that, I navigated to the "%ProgramData%\Philips\ProntoEdit Professional 3\Gallery\Images\Channel Icon overlay" directory.

There is a "Icons overlay.png" file there. Copy it to a different directory of your choice, so that you don't accidentally overwrite it.

Do a "Google Image" search for your channel logo, doing something like this: "Animal Planet" logo png

That will bring up a ton of logo images. Find your favorite, and download it.

First, we'll create the "Pressed" channel icon:

1) You'll want to rescale the logo image down to fit a 94 (W) x 59 (H) resolution. In GIMP, do a "Image >> Scale Image ...". I usually select "Sinc" interpolation. If you put 94 in the "Width" field and the "Height" value changes to a value larger than 59, put 59 in the Height field (The Width field should now be less than 94).

2) "Image >> Flatten Image" to get a white background.

3) "File >> Export As ... >>" and name your file something like: Animal_Planet_P.png (The "_P.png" is important, and indicates the "pressed" image).

Now you'll create the "Released" channel icon:

1) Using your already open "Pressed" icon, do a "File >> Open as Layers ..."

Navigate to where you copied the "Icons overlay.png" image. This will merge the two images.

2) "File >> Export As ... >>" and name your file something like: Animal_Planet_R.png (The "_R.png" is important, and indicates the "released" image).

Almost done ...

Lastly, move (or copy) the two new channel icon images the US City folder of interest. For example, you could copy them to: "%ProgramData%\Philips\ProntoEdit Professional 3\Gallery\Channel Icons\TV Icons Denver"

Your new channel icons will appear the next time you open PEP3 (Note: You will need to close an open PEP3 program and restart before any new channel icons become visible).

Cheers!

Alan