TUTORIAL GUIDE FOR XCIPTV BUTTON CREATION

G-man

Well-known member
Joined
Apr 16, 2021
Messages
1,937
Awards
4
Offline
Guide For XCIPTV button creation by G-Man
read and watch the video


Quite a few people here have requested how to make clean buttons for XCIPTV its not as hard as you may think
and you will only need a few basic tools some people use their phones to edit I take my hat off to them.
Also consider I have been using paint.net for years so know my way around it quite well the more you put in the better you will become. some people may feel more accustomed to using Gimp or Photoshop , the principles are the same.

ITEMS NEEDED

PC or Laptop
Paint.net (free)
memu android emulator (free)

A good imagination (free)

There may be other ways to do this but this is how i do it :)

we are going to modify the buttons for the well known app XCIPTV
reason for choosing this app is its the easiest of all apps to do because all buttons are the SAME SIZE ?
yes I know they all look different sizes , the reason for this is the app resizes them to fit.
Best way to explain this is imagine a box 500 x 500 pixels ? every button for XCIPTV is that size initially.
BUT!!!! you don't have to use the whole space for your buttons.

before we go any deeper lets get some glass buttons or backgrounds that can be used for buttons
if you google glass button transparent .png , you will get a ton of hits of decent images to use
I decided to use one I already had as i have used it before and know it works well.
OK so now we create a blank image that is 500 x 500 and we use the magic wand tool to select all the backgrounds
we then cut or delete the white background leaving the 500 x 500 square transparent.
now we are going to put our glass button into that 500 x 500 space , so copy and paste the image , take time to resize and position
if you make a mistake just undo and do again ,get this part right and it will save you a ton of work.
Because I don't want to use the whole space I position it in the lower half of the square and when satisfied i merge/flatten both layers so its now one image.
you can now use this image for your main buttons in the middle of the XCIPTV screen.
what you add to these buttons is up to you but for this demo i will just add a colored bar and text.


For the bar almost any image will do as you are going to copy and resize it on top of the glass button
once we have it positioned as we want we can either keep it on top of the glass or place it below by switching the layers around
i opted to put the strip below the glass for this and i will add text on top.
first off select the whole image and copy and paste four copies of the image.
we now have exact same buttons for the four middle icons
now we add the text , its up to you what color and font you are going to use i find its down to trial and error as to what works with what. I have selected a nice font and sized it to 80 .
do all four main buttons then save them out name them what you want
you will be surprised how clean these buttons look with very little effort.

you can jazz them up a bit by adding little light flashes etc.

Although it may seem quite a short video it did take quite a bit of time to put together as i am just not used to doing this type of thing so please bash like if you find it at all useful
 
Last edited:

Freddyiptv

Active member
Joined
Feb 21, 2022
Messages
77
Awards
3
Offline
Can you share the glass box png you used please. Can’t seem to find a decent one
 

SMedia

New member
Joined
Apr 28, 2021
Messages
12
Offline
Guide For XCIPTV button creation by G-Man
read and watch the video


Quite a few people here have requested how to make clean buttons for XCIPTV its not as hard as you may think
and you will only need a few basic tools some people use their phones to edit I take my hat off to them.
Also consider I have been using paint.net for years so know my way around it quite well the more you put in the better you will become. some people may feel more accustomed to using Gimp or Photoshop , the principles are the same.

ITEMS NEEDED

PC or Laptop
Paint.net (free)
memu android emulator (free)

A good imagination (free)

There may be other ways to do this but this is how i do it :)

we are going to modify the buttons for the well known app XCIPTV
reason for choosing this app is its the easiest of all apps to do because all buttons are the SAME SIZE ?
yes I know they all look different sizes , the reason for this is the app resizes them to fit.
Best way to explain this is imagine a box 500 x 500 pixels ? every button for XCIPTV is that size initially.
BUT!!!! you don't have to use the whole space for your buttons.

before we go any deeper lets get some glass buttons or backgrounds that can be used for buttons
if you google glass button transparent .png , you will get a ton of hits of decent images to use
I decided to use one I already had as i have used it before and know it works well.
OK so now we create a blank image that is 500 x 500 and we use the magic wand tool to select all the backgrounds
we then cut or delete the white background leaving the 500 x 500 square transparent.
now we are going to put our glass button into that 500 x 500 space , so copy and paste the image , take time to resize and position
if you make a mistake just undo and do again ,get this part right and it will save you a ton of work.
Because I don't want to use the whole space I position it in the lower half of the square and when satisfied i merge/flatten both layers so its now one image.
you can now use this image for your main buttons in the middle of the XCIPTV screen.
what you add to these buttons is up to you but for this demo i will just add a colored bar and text.


For the bar almost any image will do as you are going to copy and resize it on top of the glass button
once we have it positioned as we want we can either keep it on top of the glass or place it below by switching the layers around
i opted to put the strip below the glass for this and i will add text on top.
first off select the whole image and copy and paste four copies of the image.
we now have exact same buttons for the four middle icons
now we add the text , its up to you what color and font you are going to use i find its down to trial and error as to what works with what. I have selected a nice font and sized it to 80 .
do all four main buttons then save them out name them what you want
you will be surprised how clean these buttons look with very little effort.

you can jazz them up a bit by adding little light flashes etc.

Although it may seem quite a short video it did take quite a bit of time to put together as i am just not used to doing this type of thing so please bash like if you find it at all useful
Thank u for this share
 

Tayluur82

Active member
Joined
Dec 11, 2021
Messages
182
Awards
2
Offline
Guide For XCIPTV button creation by G-Man
read and watch the video


Quite a few people here have requested how to make clean buttons for XCIPTV its not as hard as you may think
and you will only need a few basic tools some people use their phones to edit I take my hat off to them.
Also consider I have been using paint.net for years so know my way around it quite well the more you put in the better you will become. some people may feel more accustomed to using Gimp or Photoshop , the principles are the same.

ITEMS NEEDED

PC or Laptop
Paint.net (free)
memu android emulator (free)

A good imagination (free)

There may be other ways to do this but this is how i do it :)

we are going to modify the buttons for the well known app XCIPTV
reason for choosing this app is its the easiest of all apps to do because all buttons are the SAME SIZE ?
yes I know they all look different sizes , the reason for this is the app resizes them to fit.
Best way to explain this is imagine a box 500 x 500 pixels ? every button for XCIPTV is that size initially.
BUT!!!! you don't have to use the whole space for your buttons.

before we go any deeper lets get some glass buttons or backgrounds that can be used for buttons
if you google glass button transparent .png , you will get a ton of hits of decent images to use
I decided to use one I already had as i have used it before and know it works well.
OK so now we create a blank image that is 500 x 500 and we use the magic wand tool to select all the backgrounds
we then cut or delete the white background leaving the 500 x 500 square transparent.
now we are going to put our glass button into that 500 x 500 space , so copy and paste the image , take time to resize and position
if you make a mistake just undo and do again ,get this part right and it will save you a ton of work.
Because I don't want to use the whole space I position it in the lower half of the square and when satisfied i merge/flatten both layers so its now one image.
you can now use this image for your main buttons in the middle of the XCIPTV screen.
what you add to these buttons is up to you but for this demo i will just add a colored bar and text.


For the bar almost any image will do as you are going to copy and resize it on top of the glass button
once we have it positioned as we want we can either keep it on top of the glass or place it below by switching the layers around
i opted to put the strip below the glass for this and i will add text on top.
first off select the whole image and copy and paste four copies of the image.
we now have exact same buttons for the four middle icons
now we add the text , its up to you what color and font you are going to use i find its down to trial and error as to what works with what. I have selected a nice font and sized it to 80 .
do all four main buttons then save them out name them what you want
you will be surprised how clean these buttons look with very little effort.

you can jazz them up a bit by adding little light flashes etc.

Although it may seem quite a short video it did take quite a bit of time to put together as i am just not used to doing this type of thing so please bash like if you find it at all useful
Afternoon mate

Found you on YouTube and watched a few videos. Some cracking stuff you've made. I tried to replicate the glass button look but whenever I used the wand and tried to drag over the button, it seemed to carry over some of the border. As though it wasn't pure transparent to start with. Tried with at least ten images and same thing happened
 
Top