PoSmedley PoSmedley

One Piece At A Time : Windowblind Tutorial Part III

One Piece At A Time : Windowblind Tutorial Part III

Design: Edit Controls

 

Welcome to Part III of the 'One Piece At A Time' tutorial. This thread will be concentrating on the design of the 'Edit Controls' for the Roan Windowblind. Several skinners are helping me through these threads in an effort to understand and learn how to build Windowblinds. (And they would be Vampothika, neone6, and 2of3) Along with a lot of other talented skinners, artists, etc, who have participated with this so far, we're hoping these threads will also help other would be or existing skinners as well. We also have gmc2 sorting through all of the info posted for hte Wincustomize Wiki.

For these first few parts, we'll be working on the design of the Roan Windowblinds elements and then bringing them all together and exploring SKS (Skin Studio) where we'll take everything and put it together.

If you're looking for Part I and II, you can find them here:

One Piece At A Time : Windowblind Tutorial Part I

Design : Start Menu and Taskbar

 

One Piece At A Time : Windowblind Tutorial Part II

Design: Title Bars & Window Frames

 

PLEASE :

  • I am open to suggestions but may not use any of them. Please, don't be offended if I don't use yours.
  • Keep the image posting to the skin(s)
  • If you want to make a skin to go with this, PM me for the files. My PSD's tend to be a mess, but I save everything and will be happy to     share. I am uploading the actual files to the Graphics Gallery here on Wincustomize.
  • We'll be skinning for Windows7, maybe Vista. If someone wants to do XP, PM me and I will get you what you need.
  • Any files you request will come as I complete them. I won't be jumping ahead. Please be patient.
  • ;)

-----------------------------------------------------------------------------------------------------------------------------------------

The PSD files for the  previous threads are in the Graphics Gallery.

Roan WB Title Bars and Window Frames  

  Roan WB Taskbar Buttons

Roan WB Title Bars and Window Frames  

  Roan WB Taskbar Buttons

74,353 views 118 replies
Reply #26 Top

"derp"?

Reply #27 Top

Reply #28 Top

Quoting PoSmedley, reply 25



Quoting BoXXi,
reply 24
What is annoying you about that?


That 'dark line' in the red circle.

I go through this every time on the buttons. I have the worst time with the pngs for the buttons. It's my spacing, I know.

check your painting margins...

maybe its your graphics?

as for the combo button, its always bigger than the box.... dont ask why, i hve noo idea..

Reply #29 Top

Quoting PoSmedley, reply 25



Quoting BoXXi,
reply 24
What is annoying you about that?


That 'dark line' in the red circle.

I go through this every time on the buttons. I have the worst time with the pngs for the buttons. It's my spacing, I know.
Spacing is crucial ! 1 pixel wrong and it can get totally f´d up. If you for instance have 1 pixel on sides, gotta have 2 in between buttons. XO :sun:

Reply #30 Top

Quoting neone6, reply 29
If you for instance have 1 pixel on sides, gotta have 2 in between buttons

This is exactly where I get screwed up. I see what you've written but I can't get my head around it.

I re-did the button without the texture and it's better.(** I take that back. They are still doing the same thing) Then I wanted to add the little indent/rivet. I can't make it part of the button png because it won't place/stretch/tile correctly...so I tried a glyph- two different ways...I don't understand why it centers the way it does when the image is the same frame and size as the button. (The magic pink is only so you can see the indents)

 

Then, on the 'radial buttons' - They look different in SKS than they do in use. ???

 

 

Quoting Vampothika, reply 28
as for the combo button, its always bigger than the box.... dont ask why, i hve noo idea..

I have to look at this. The skin I am using now (Ultimo iFlat) the button isn't oversized on mouseover or mousedown. Unless the button is transparent?

Reply #31 Top

I know Kitty and I differ on this, but why not use the frame builder for the different images so you don't risk being a pixel off between images?  I use the frame builder--I make all the different states of the button on the same PSD, save the separate images as png, then import them in the frame builder.  My math sucks, even with a calculator (and my depth perception isn't the best either -- frickin' presbyopia). 


As for your radio buttons, the image has to be 13x13 or it's not going to fit correctly.  I like to keep a buffer of 1 pixel around that, too, so my image is actually 11x11 with a 1 pixel free edge.

Reply #32 Top

Quoting k10w3, reply 31
but why not use the frame builder

I've seen it. Like, actually laid my eyes on it. I know it's there. I've even wondered often what it does. Cause, ya' know, I seen it.

Quoting k10w3, reply 31
As for your radio buttons, the image has to be 13x13 or it's not going to fit correctly.

That's kind of an important little tid-bit that should be made note of. Thank you.

Reply #33 Top

Quoting PoSmedley, reply 32
I've seen it. Like, actually laid my eyes on it. I know it's there. I've even wondered often what it does. Cause, ya' know, I seen it.

Reply #34 Top

It brings up this frame builder thing, and then I click the "Import into all frames" radio box, pull in my first .png, which fills in all the spaces for buttons with an equal distance between them when I save, then click the "Import into selected frames" and fill them in with the correct ones for each button state, then click the "Save file as" button to save the whole works in the .wba file, and I don't have to worry about being a pixel off somewhere.

 

Reply #35 Top

Quoting k10w3, reply 34
It brings up this frame builder thing, and then I click the "Import into all frames" radio box, pull in my first .png, which fills in all the spaces for buttons with an equal distance between them when I save, then click the "Import into selected frames" and fill them in with the correct ones for each button state, then click the "Save file as" button to save the whole works in the .wba file, and I don't have to worry about being a pixel off somewhere.
That's rather cool.  I didn't nkow it was there.

Reply #36 Top

I'll give it a shot. ;)

Quoting k10w3, reply 34
frame builder thing

All these 'technical' terms and names are hard to follow.

Quoting Zubaz, reply 35
I didn't nkow it was there.

What you don't 'nkow' could fill a library.

Reply #37 Top

Quoting Zubaz, reply 35
That's rather cool.

It really is!  It's been a real time saver for me.  I don't know if I would have ever been able to finish a blind if it weren't for frame builder.

Reply #38 Top

Quoting PoSmedley, reply 36
All these 'technical' terms and names are hard to follow.

My first thought was to call it a frame builder thingy -- I drop the "y", so as not to sound too idiotic, and risk receiving the Derp-O-Graphic.

Reply #39 Top

I don't like either version of my buttons. I am not sure if it is because I can't see how they will look or where they will be when it is all done or because I am trying them out in a different skin.

I see how they 'pop-up' in FF and Explorer and can see (especially in a browser) where the wrong design can look awful.

Reply #40 Top

Quoting k10w3, reply 38
I drop the "y", so as not to sound too idiotic, and risk receiving the Derp-O-Graphic.

Ah. The 'y'.

I interviewed a woman for a supervisor position at a huge job site I am over. We do industrial and grade-A office cleaning. I asked about her experience (already having a pretty good idea she had none as she sat there in her lace-up sandals and silk blouse opened to her navel). She said she had extensive experience and had even done 'water and fire restoration'. I asked her what kind of equipment she had used and she informed me she knew how to run the 'water-sucky-uppy-thingy'. I smiled and sarcastically asked if she was familiar with running a 'carpet thingy' to which she replied 'It depends on the carpet.'

I don't give out 'Derps' for using the 'y'. That would be almost redundant.

I don't give out supervisor positions either.

Reply #41 Top

You can see them (the buttons) in CCleaner - (the Scan for Issues button).

Reply #42 Top

Quoting k10w3, reply 41
You can see them (the buttons) in CCleaner - (the Scan for Issues button).

Cool. I was going to ask what you all use to see how they look in different apps and stuff.

***And they look like crap. sigh.

Reply #43 Top

This tutorial is a stitch.  Brings back nightmares of SKS 5: Huh?  What?  You're kidding?  Oh, it's supposed to do that?

I have yet to really dive in to SKS 7 so this is invaluable info, Po - thanks for 'taking it for the team', as it were.  You and Captain Kirk have my undying gratitude (Boldly Going....).  XD

 

And I love the skin - should be awesome when it's done.

Reply #44 Top

Quoting Daiwa, reply 43
Po - thanks for 'taking it for the team', as it were.

Thank the other skinners helping me. They're the ones giving up valuable time to walk me through this. ;) :thumbsup:

Reply #45 Top

thankgod karen stepped in and helped with those radio buttons....im so full of lamington cake right now, i cant even think straight..... :blush:

po, start using templates and stick to the original sizes, once you start changing sizes, stuff will go wrong and you wont know why since you still a NOOB....  dont create problems for yourself.... okay?

ah.. and i forgot one thing too, forget those glyphs on the push buttons, they just dont work, i tried them myself on another skin and had the same issues as you and couldnt make it work either.....

Reply #46 Top

Quoting k10w3, reply 34
It brings up this frame builder thing, and then I click the "Import into all frames" radio box, pull in my first .png, which fills in all the spaces for buttons with an equal distance between them when I save, then click the "Import into selected frames" and fill them in with the correct ones for each button state, then click the "Save file as" button to save the whole works in the .wba file, and I don't have to worry about being a pixel off somewhere.

The 'Import Into All Frames' first is important. I mis-read that and you can imagine my frustration. Hope your ears weren't burning to bad.

Reply #47 Top

I hope, when you quit, that someone with more strentgh will be able to put together the mess you leave and finish this skkn.  It's a beaut.

Reply #48 Top

Quoting Vampothika, reply 45
po, start using templates and stick to the original sizes, once you start changing sizes, stuff will go wrong and you wont know why since you still a NOOB.... dont create problems for yourself.... okay?

ABOUT USING TEMPLATES : I know what a big deal it is for you guys to share your psd files and all with me or anyone. Hell, it was weird for me posting the psd files from these to WC.  So, I will put this question to ALL the skinners stopping by here. I want to ask this without stirring up a lot of shit.

I know there have been issues in the past with skins being pulled from the gallery because certain or a lot of the graphics in it matched graphics in size in other skins to the pixel. SO...how do you follow anyones template? (I have been following the templates that 2of3 sent me but have purposely gone out of my way to change the sizes of the png's. From the height of the taskbar to the window frames, etc., etc.)

Reply #49 Top

Quoting Zubaz, reply 47
I hope, when you quit, that someone with more strentgh will be able to put together the mess you leave and finish this

Wait for it....

Wait....

 'That's what she said!'

barump-bump*

Thank you. Thank you, very much. I'm here all week and please tell your friends to stop by for the midnight show on Friday.

Reply #50 Top

|-O

{yawn}