Your Universal Remote Control Center
RemoteCentral.com
Philips Pronto Professional Forum - View Post
Previous section Next section Up level
Up level
The following page was printed from RemoteCentral.com:

Login:
Pass:
 
 

Topic:
Pronto Pro Buttons - Halo / Shadow?
This thread has 7 replies. Displaying all posts.
Post 1 made on Sunday June 11, 2017 at 18:18
Alan D.
Long Time Member
Joined:
Posts:
July 2003
29
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

Last edited by Alan D. on June 12, 2017 03:02.
Post 2 made on Tuesday June 13, 2017 at 01:58
alpha
Long Time Member
Joined:
Posts:
September 2003
254
Use a Photo Editor or download .PNG images from icon or button websites.

Also Check Here.
[Link: files.remotecentral.com]
Project Boredom 2 is here. [Link: mediafire.com]
------------------------
Check Version 1 & 2 out in the files section.
OP | Post 3 made on Wednesday June 14, 2017 at 22:01
Alan D.
Long Time Member
Joined:
Posts:
July 2003
29
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.
Post 4 made on Wednesday June 14, 2017 at 23:43
Lyndel McGee
RC Moderator
Joined:
Posts:
August 2001
12,156
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.
Lyndel McGee
Philips Pronto Addict/Beta Tester
OP | Post 5 made on Thursday June 15, 2017 at 03:06
Alan D.
Long Time Member
Joined:
Posts:
July 2003
29
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
Post 6 made on Thursday June 15, 2017 at 23:07
Lyndel McGee
RC Moderator
Joined:
Posts:
August 2001
12,156
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

Last edited by Lyndel McGee on June 15, 2017 23:19.
Lyndel McGee
Philips Pronto Addict/Beta Tester
OP | Post 7 made on Friday June 16, 2017 at 02:20
Alan D.
Long Time Member
Joined:
Posts:
July 2003
29
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.
OP | Post 8 made on Thursday July 6, 2017 at 13:33
Alan D.
Long Time Member
Joined:
Posts:
July 2003
29
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

Last edited by Alan D. on July 9, 2017 08:58.


Jump to


Protected Feature Before you can reply to a message...
You must first register for a Remote Central user account - it's fast and free! Or, if you already have an account, please login now.

Please read the following: Unsolicited commercial advertisements are absolutely not permitted on this forum. Other private buy & sell messages should be posted to our Marketplace. For information on how to advertise your service or product click here. Remote Central reserves the right to remove or modify any post that is deemed inappropriate.

Hosting Services by ipHouse