Author Topic: Button and transparency tip (for photoshop)  (Read 8164 times)

Offline bluemeanietsi

  • Freebox Lifetime Supporter
  • Full Member
  • ********
  • Posts: 238
  • Fu: +0/-0
Button and transparency tip (for photoshop)
« on: November 18, 2008, 04:24:31 PM »
If you're having problems getting odd shaped buttons to work right without pulling your hair out here's a little tip.

In photoshop just before you compress all your layers change the background layer to a color that is not used in your button (if you're freebox skin has a light background choose a light color, if it's dark choose a dark color this will help out those little straggler pixels) and paint the background that color. 

Right click your button layer and go to blending options, select stroke, choose 3pxl and the color of your background in freebox.  This will outline the button for you. 

now you can compress all your layers and load the button.  I find that button style (left) of 7 and (right) of 5 works the best for preserving the look of the buttons.

If this is confusing I'll add screenshots later when I get to work.
« Last Edit: November 19, 2008, 01:57:06 AM by Barcrest »

Offline d78

  • Freebox Lifetime Supporter
  • Full Member
  • ********
  • Posts: 192
  • Fu: +0/-0
    • dt78.deviantart.com
Re: Button and transparency tip (for photoshop)
« Reply #1 on: November 19, 2008, 01:30:03 AM »
Sticky this! :beer

Offline Barcrest

  • Developer and Head Honcho.
  • Administrator
  • Hero Member
  • *****
  • Posts: 13400
  • Fu: +92/-5
  • Grooooooooovy!
Re: Button and transparency tip (for photoshop)
« Reply #2 on: November 19, 2008, 01:57:17 AM »
Stickied.
Keep on Rocking in the Free World \m/ ;D\m/



Jukebox Stats...

Offline ScAtMaN

  • Commercial Operator
  • Sr. Member
  • **********
  • Posts: 343
  • Fu: +2/-0
    • The Portland Arms
Re: Button and transparency tip (for photoshop)
« Reply #3 on: November 20, 2008, 05:36:48 PM »
Good tip, could someone try it out on the quick jump letter button on the BnB and BnR skins  ;)

Offline its-smee

  • Freebox Lifetime Supporter
  • Full Member
  • ********
  • Posts: 104
  • Fu: +0/-0
Re: Button and transparency tip (for photoshop)
« Reply #4 on: April 16, 2009, 07:40:00 PM »
I have recently started to have a go at making a skin, and found for odd shaped buttons (i have some in shape of hands) to use adobe 7 and when creating an image, select tranparent background . then do your funny shaped button and use the "export transparent image" command. you find it under the help drop down menu.  make sure you have a transparent background .  you can then save a copy of your image as a jpg........In Adobe CS3 you can only save as a gif, and I have not found the " export transparent image"
command. maybe it was removed.  I then rename the copy and use in image folder.  when you run freebox you only see the shape you have made with whatever background you have on main page behind it. one advantage of this is you can keep the layers and do not have to "flatten" the image.

Offline Barcrest

  • Developer and Head Honcho.
  • Administrator
  • Hero Member
  • *****
  • Posts: 13400
  • Fu: +92/-5
  • Grooooooooovy!
Re: Button and transparency tip (for photoshop)
« Reply #5 on: April 17, 2009, 12:05:36 AM »
was hoping the BnB and BnR buttons would be altered to take avantage of this...
Keep on Rocking in the Free World \m/ ;D\m/



Jukebox Stats...

Offline its-smee

  • Freebox Lifetime Supporter
  • Full Member
  • ********
  • Posts: 104
  • Fu: +0/-0
Re: Button and transparency tip (for photoshop)
« Reply #6 on: April 17, 2009, 06:07:18 AM »
I take it you mean the up down arrows on main page?   I have put pointing fingers on "arrow up, arrow down and back arrow" and turned the options icon to a can of "duff beer".  you have to change the "null"  page and main page backgrounds or you  will have the default colour (black) of these pages showing as background. that is fine if you want black, I am trying to make a "simpsons" background and have various pictures as backgrounds. the "pointing fingers " work fine on all pages they are used.   It is trial and error to see what images are used on what page, any chance of putting a listing somewhere so we can see what is what.  :beer

Offline eist1

  • Moderator
  • Hero Member
  • *****
  • Posts: 1409
  • Fu: +11/-0
Re: Button and transparency tip (for photoshop)
« Reply #7 on: April 17, 2009, 02:17:02 PM »
Barry,

Sorry, I've had no time to update the BnB or BnR buttons, and the hard drive on my laptop that I had Photoshop installed on blew up so I need to get a re-install. If someone wants the psd's to change the images let me know and I can send them out. Hopefully can look at that in the week or so.

Offline its-smee

  • Freebox Lifetime Supporter
  • Full Member
  • ********
  • Posts: 104
  • Fu: +0/-0
Re: Button and transparency tip (for photoshop)
« Reply #8 on: April 19, 2009, 06:49:46 PM »
The method I mentioned above works fine for all jpeg's, but not for bitmap images. The slider buttons (bmp) end up with white box around them. The group of  images in bottom left of screen (4 off) all appear to be sat on top of a bitmap image called "player" and if you delete or change the size of "player" you end up with a grey box. I had to make that background image match my main background so I could then add image's with transparency on that part of screen  Anyone know why we have the odd bitmap? is it part of the VB system

Offline Barcrest

  • Developer and Head Honcho.
  • Administrator
  • Hero Member
  • *****
  • Posts: 13400
  • Fu: +92/-5
  • Grooooooooovy!
Re: Button and transparency tip (for photoshop)
« Reply #9 on: April 20, 2009, 09:21:25 AM »
The method I mentioned above works fine for all jpeg's, but not for bitmap images. The slider buttons (bmp) end up with white box around them. The group of  images in bottom left of screen (4 off) all appear to be sat on top of a bitmap image called "player" and if you delete or change the size of "player" you end up with a grey box. I had to make that background image match my main background so I could then add image's with transparency on that part of screen  Anyone know why we have the odd bitmap? is it part of the VB system

In the skintool there is a button to grab what ever is behind that and the menu and save out those bitmap files. You do not need to do it manually unless you want an image that isn't behind the player.
Keep on Rocking in the Free World \m/ ;D\m/



Jukebox Stats...