MallyMcGinnis MallyMcGinnis

New skin creator here.

New skin creator here.

Hello, all; I've been reading this forum for a while, and have been studying the excellent tutorial found here.  I'm on p. 5 at the part where the author talks about slicing the start menu for reassembly in SS.  My start menu isn't exactly square like the illustrated one is, so I'm not very sure about how to go about slicing it.  Is it safe to publish an image here of a work in progress, or is that not recommended for security reasons?

peace,

Mally

 

Edited to correct link

803,398 views 243 replies
Reply #151 Top

Quoting Vampothika, reply 147
you can use the all programs background (not the arrow) text tab and move it horizontally and squeeze the size down so that brown highlight dosent

cover your graphics , but when you do that, you will probably lose the default font that says 'all programs'

Actually, that worked with no loss of text size or quality. 

you can also do a 3 state arrow where you take a slice of the background where the arrow sits on. and use that for each state.

you also have to change the all programs background text to a minus number, normally its around between -90 to -95 , but every skin is different.

you will know its right when you mouse over it and it dosent move.

hope this helps.

Yes, of course; it all helps...thank you!  I have my all programs background text set so that when I mouse over it, it doesn't move; but the ones that aren't 0 are both positive integers.  I even tried to change them to negative numbers just to see the result, but then the all programs highlight flew out over my graphics again.  May have to revisit this someday, but for now, it works.

My separators are very thin now.  The start menu doesn't look so gangly anymore.  Thanks again!

peace,

Mally

Reply #152 Top

Quoting Xiandi, reply 148
1. It's very hard to see the spot you are talking about in the screenshot, which makes it hard to advise you as to what is happening.  Can you zoom in on the image and screenshot that?

Resizing the arrows image, or rearranging their order, fixed this issue.

2. What you need to do though is reverse the last 2 states you have in the image. Then the mouseover state will actually show on mouseover. The help section in SKS is wrong on this image. The states are normal, pressed, mouseover, in that order.

I did rearrange their order.  When I mouseover the arrow, it changes, the highlight bar appears, and the text changes color from pale yellow to white as it should.  The pressed image doesn't display, probably for the reasons both you and Vamps suggested.

3. The size of the mousover you see there is controlled by the text margins on the All Programs Background image. Think of text margins as 'content' margins. Doing this may move your arrow into a better position too.

It sure did.

4. Not really. I recommend a smaller arrow though, it will look a bit better in my opinion (and may fit better), but it's really up to you.

That did work a lot better.  Believe it or not, the original arrow was considerably longer than the one you saw.

5. The invisible text does not work on this part. Just set the text on the All Programs Background to whatever font you want, but you will not be able to add your own text to it. Besides, not everyone who uses your blind is going to want that text in English.

Cool; I hadn't thought about that.  WB will change the language by itself to the desired user language?

Note: Doing the arrow trick like Vamps is stating is possible, but it's very tricky to get it to work, and it does not work with all languages, because the text will vary in length depending on the language used.
 

I see.  Well, can I use the universal symbols placed where I want them?  For instance, from their default position here:

to here:

Thanks again for your indulgence!

peace,

Mally

Reply #153 Top

This thread is a tutorial all by itself. I've got it book marked for future reference. A step by step guide to plumbing a WB. Amazing!

Reply #154 Top

Quoting Uvah, reply 153
This thread is a tutorial all by itself. I've got it book marked for future reference. A step by step guide to plumbing a WB. Amazing!

I agree.  And framing, and wiring...thanks to everyone who has participated.    

Reply #155 Top

Quoting MallyMcGinnis, reply 150



Quoting Vampothika,
reply 147
all progs arrow only has two working states, normal and mouse over, pressed has never worked.


Thanks, Vampothika; that was bothering me.

In part 44 of your tutorial when talking about log off buttons, you said, "for now, it's best to design the buttons around the same height and width."  Does that mean it's possible to use other sized buttons, and to move them slightly from their current places, or no?  If so, by using my images above, can you give me a clue how to do it?  I'm also having trouble with moving from part 44 to 45.

peace,

Mally

Just saw your remark about the separators.  They've been torturing my mind's eye, too.  That's the kind of constructive criticism I want and need to hear.  Thanks!

where you put the log off buttons in post 152 is where i was going to suggest you put them actually,

and to move them, im assuming you already know that you use the bottom bar text to do so.

you can use other sized buttons, i just suggested the diamond template ones for beginners so they get a general idea of what is to be

done with a simple button that is not too complicated.

you can also not even use buttons and just use glyphs,  you can also use buttons and no glyphs.

my wulfin wb has just glyphs and no buttons, im sure there are wb's out there that have also used just buttons and no glyphs.

but thats getting rather techy, and you are just learning...so you do whatever is comfortable and not to hard for you to accomplish at this stage.

my main goal for you would be (concerning the log off buttons) would be to get the button and the log off font sitting in both of those squares,

if they wont sit in their perfectly, move them with the text, if you still cant get them sitting in there perfectly, you can always move those square graphics over to suite the buttons, (but it means reworking the bottom bar in photoshop, or what ever art program you made it in.)

again...hope this helps and answers your questions.

+1 Loading…
Reply #156 Top

What a great response, Vampothica; thank you!  I need to figure out via the software what glyphs vs. buttons mean yet, but I hope that won't be too difficult.  I'll check out Wulfin to learn what I can from that.  I also started sculpting the buttons and borders I'll be using in my per pixel titlebar and frames.  I'm not switching over to that mode entirely, it's just where your tutorial led, I had some ideas, and I was anxious to begin working them out.

peace,

Mally

Reply #157 Top

the button is obviously the bottom layer , like a blue square ect,

the glyph is like the "power" or "key" or "lock" logo that sits on top of the button.

make sense?

+1 Loading…
Reply #158 Top

Absolutely.  I was thinking along those lines, but hadn't sorted it out so clearly as you just wrote it, though.  Thanks!

peace,

Mally

Reply #159 Top

Questions about button creation.  I've been studying your buttons trying to figure out what makes them look the way they do, including the way they change states sometimes.  Xiandi, I'll start with you.

and

How did you make the areas immediately surrounding the buttons look like they were tailor made for the button rather than looking like the buttons were just pasted on top of it?  Also, many skinners use a technique to make the selection from a 3D image rather than a flat one, like this.  I haven't found where that image is called for in SKS?

To Vamps...In your Wulfin blind, I presume you've made your power buttons with glyphs?  In your paint program, are they treated any differently than any other sort of image...are they separate images?  Are these also glyphs?  You and RedNeckDude also use 3D images for your selections.  Any pointers on how that's done from either of you?

and

And to RedNeckDude; I'm sure you're still busy reading (and re-reading) all the accolades for your beautiful new skin, but if you happen to read this, in this image:

one sees a couple of pixels of wood when a button is pressed than one doesn't see when it's not.  Still, even when not pressed, the buttons look organic, like they fit into the wood rather than applied to it's surface.  How'd you do that, if you don't mind my asking?

peace,

Mally

Reply #160 Top

Quoting MallyMcGinnis, reply 159
How did you make the areas immediately surrounding the buttons look like they were tailor made for the button rather than looking like the buttons were just pasted on top of it?
That is simply an outside bevel done in Photoshop on the button image itself. Usually, the bevel is only one or two pixels wide, and is set to down rather than up. I this image you can see that I have the dark background, but that is only so you can see the effect. You would need to save the image without the background. Play around with the settings to get the look you want.

A 3D looking button is basically made the same way, but the bevel is on the inside, and usually up instead of down. All the buttons I have ever made were done in Photoshop.

 

+1 Loading…
Reply #161 Top

like wise, photoshop.

+1 Loading…
Reply #162 Top

Have to leave for a wee bit, maybe clear my head and grab some coffee with a friend.  I feel like this should be easy, but I'm struggling.  Here's the image I uploaded to SKS on the Edit Start Menu Logoff Images page.  It's on the base and only layer.

The mess I ended up with looks like this.

Can't figure what I've done wrong.  Any ideas from anyone will be welcome!

peace,

Mally

Reply #163 Top

It looks like you put the glyph images on your buttons. They should be separate images.

In the 'Button Icons' section, there is an image already in the Image tab, leave it there. It's a blank png and should only be changed if you want a separate background for your glyphs on top of the button.

Note: Check the Help tab in the Button Icons section to see what you need to do for the frame count on the glyph.

+1 Loading…
Reply #164 Top

To reply 160.....I have a question. Since I suck at making buttons I'd like to know what size you start out with. Also the glow effect. I tried duplicating it and messed it up really bad. Any pointers?

+1 Loading…
Reply #165 Top

Quoting Uvah, reply 164
what size you start out with
Whatever size you need. It's always best to make a button the exact size you need, that way it does not need to get stretched or squished. Some buttons are seen in various places and different sizes, like the regular button in SKS. In that case you really need to experiment to see what size works best.

The key to making a good button is to take your time, try different things, and if you don't think it's perfect for what you need....make a new one.

+1 Loading…
Reply #166 Top

Quoting Xiandi, reply 163
It looks like you put the glyph images on your buttons. They should be separate images.


Cool.  Knowing that trick made that step easier.

In the 'Button Icons' section, there is an image already in the Image tab, leave it there. It's a blank png and should only be changed if you want a separate background for your glyphs on top of the button.

Glad you mentioned this.  It was missing from mine.  I probably replaced it at some point with my buttons or something.  I was able to grab another copy of it from another blind and put it back.

Note: Check the Help tab in the Button Icons section to see what you need to do for the frame count on the glyph.

I confess that I don't frequently use the help sections of many pieces of software, and I hadn't at this stage on this one.  If I'd done so, I would have found the exact order the buttons were to appear on the buttons image.  But if I had wanted to know any more information, and I do, I'm met with a frustrating "There is currently no text in this page. You can search for this page title in other pages, or search the related logs". 

Wiki's can be wonderful things, but when the developer relies entirely on forum volunteers to handle newbie questions, failing to include more than the very most rudimentary data, they have the tendency to be counter productive.  This forum is also disappointing in that I can't subscribe to threads I want to read.  I have to keep a tab open in my browser for each.  Rant over.   

In this image are 2 attempts at making my buttons fit the text / glyphs.  A third attempted in different results, but I can't replicate them for the sake of illustration, and will do my best to describe them.

In top image, you can see the 3 ordered sets of all 3 buttons that comprise the total of 9 buttons.  The results are directly under that, and nothing I've found yet can set those in place correctly.

The only difference between the top two images and the bottom two is that I added 6px addition width to each button.  This is because in the examples I can't show you, I actually came close, except the outside ends of the 2 buttons were cut straight.

peace,

Dave

Reply #167 Top

Quoting Xiandi, reply 165

Quoting Uvah, reply 164what size you start out with Whatever size you need. It's always best to make a button the exact size you need, that way it does not need to get stretched or squished. Some buttons are seen in various places and different sizes, like the regular button in SKS. In that case you really need to experiment to see what size works best.

The key to making a good button is to take your time, try different things, and if you don't think it's perfect for what you need....make a new one.

There always seem to be certain points that come so easily to some people, they hardly seem noticeable, much less a potential stumbling block for someone else's learning.  We'll keep asking questions back and forth, and I bet there's be an Aha Moment just around the corner.

peace,

Dave

Reply #168 Top

try this:

Make one 3 state button, normal, pressed, mouseover. Put that in the button image tab.

You seem to have 3 buttons with 3 states on that image, that is not gonna work. compare your button image to mine in reply #163.

Your glyph looks right. ;)

Reply #169 Top

Now that that's done, I wonder how I could have missed it.  It didn't occur to me that I the buttons would stretch (at least to a degree) to fit the required spaces.  I thought I needed 2 or 3 different sized buttons.  This was made using 3 states of the smallest button.

Here's what the start menu looks like right now.  I'd sure love to hear any constructive criticism and other thoughts.

Have also been working on my Start Button.  I'd like for it to be slightly taller than the rest of the task bar so that it extends over the start menu in the bottom left corner.  Is this possible, or am I just better off resizing or re-designing the start button?

Thanks so much, all, wor working through this difficult part for me.  I really do appreciate your patience.

peace,

Dave

Edited to replace an image "no longer on Photobucket".

Reply #170 Top

Its okay to have the start button hang over the task bar Mally. There are a couple of blinds that do just that. BTW-that is one very busy start menu.

+1 Loading…
Reply #171 Top

Thanks, Uvah; kind of thought I could.  Seem to remember a tutorial that even explains it from the standpoint of an older version of SKS...just can't lay my hands on it at the moment.  Thanks for your compositional comment, too.  You may well be right, it may be too busy.  The background in that image isn't the one I'll be using.  But boy, that opens a whole other can of worms design wise, doesn't it?  One of the reasons I wanted to bring these leaves into the start menu composition is that I want to use them later in the file transfer animations.  I've noticed the Monarch as kind of iconic to many steampunkish still life images.  The leaves aren't, not so far as I know anyway.

peace,

Dave

Reply #172 Top

Hello, all;

Is there a quick way to copy a SKS image from SKS directly into my paint program?  The "edit image" button which seems by default to open MS Paint would be the perfect place if it's configurable.

peace,

Dave

Meh; found it.  It can be set under Tools --> Preferences --> Advanced Tab --> Editing Images --> Custom.   Very handy.

Reply #173 Top

Quoting 2of3, reply 36


Skinstudio is VERY daunting at first. We'll be here to help you along the way.

It has been very daunting.  This weekend, it has become a lot less so.  My horizontal taskbar is almost finished except for two questions about things I don't like yet.  First, in this image

the upper row shows the button I used in SKS (minus the 5px red margins, used here for illustration), while the bottom row shows that there is a joggle of a couple of pixels while changing states.  What is causing that?

Also, I'd like to use Xiani's trick for making text invisible in the power buttons, but I can't find a text tab to allow me to do that.  Is that unchangeable, or am I just missing something?

peace,

Dave

Reply #174 Top

The spaces between the buttons and the borders top and bottom must be equal.

Reply #175 Top

Quoting MallyMcGinnis, reply 173

Also, I'd like to use Xiani's trick for making text invisible in the power buttons
Not sure which buttons you are referring to....