One Piece At A Time : Windowblind Tutorial Part IV

Putting It Together : Start Menu

Friday, February 3, 2012 by PoSmedley | Discussion: WindowBlinds Tutorials

 

We're going to take a break from One Piece At A Time : Windowblind Tutorial Part III for just a moment and get into the assembling of the windowblind in SKS. There are a few reasons for this that you may have picked up on if you have been following along.

 

  • We've been making sections of the blind without putting them into SkinStudio as we go along. A majority of skinners will go back and forth between their graphics program (Photoshop, Paint, etc.) and SKS as they go along. That method hasn't worked for me in the past and I wanted to go through the actual design of several areas without the added confusion of SKS.

 

  • There comes a point, once you get past the Start Menu and Window Frames and start getting into the Edit Controls, buttons, etc., that you need to see what they are going to look like and if they will work they way they should. I tried to just keep making the graphics without going into SKS but it's just too much detail and in this particular case, with a lot of the areas we'll be getting into, 'size does matter'.

 

One of the main reasons that I may have not mentioned for doing the Start Menu and Task Bar areas first is also to assist visually in determining how the overall windowblind will look (per Tim's suggestion). This will actually help a great deal when you get into the buttons, header bars, and other details and you're trying to determine the best colors and other design details.

The way in which I am approaching this is something I came up with some help from 2of3(aka Tim). As I said, not all skinners do it this way and the opinions I offer are just that  (my opinions) and by no means written in stone (or sand, Lucite, chalk, crayola, etc.) It if it helps anyone, let me know.

We'll be going back and forth between this thread and Part III. There will also, more than likely, be another thread where we can go over testing the skin and putting on the finishing touches. In this thread we'll be going over the assembling of the Start Menu.

IF YOU HAVE ANY QUESTIONS as to why something is done this way and not that or anything pertaining to the Start Menu ask them here. We will try to explain as we go along and may miss some things that you consider important or problematic.

 

If you're looking for Part I, II, III 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


 

One Piece At A Time : Windowblind Tutorial Part II

Design: Edit Controls

 

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 Start Panel UPDATED

ROAN WB Start Panel Search Mode

First Previous Page 13 of 18 Next Last
PoSmedley
Reply #241 Sunday, February 12, 2012 10:24 PM

At this point, your Search Mode panel will still be 'off' but you should be able to see your windowbitmap at work instead of the white background.

What we need to do now is edit the text margins to fix this.

In SKS -  Edit Start Menu and Taskbar > Search Mode Top > Text Margins tab

Set your margins as follows : 

This will  center and blend your bitmap in with the Search Mode layers you just added.

 

NOW, (I hope) we are done with the Start Menu. The mouseovers for search mode will be skinned in another section.

 

Xiandi
Reply #242 Sunday, February 12, 2012 11:00 PM

That is beautiful, Po!

PoSmedley
Reply #243 Monday, February 13, 2012 12:13 AM

Xiandi
That is beautiful, Po!

I have to give credit to Tim for the whole search mode section. Not that I would have known how to skin it, but I missed it completely when I was pre-making all the parts for the menu.

Uvah
Reply #244 Monday, February 13, 2012 5:15 AM

Getting more awesomness.

Back to lurking.

2of3
Reply #245 Monday, February 13, 2012 5:32 AM

Looks great!

 

You forgot to mention adjusting the painting margins for the searchmode top. You don't have to fix the middle (all prog) searchmode because that will never expand in any way, but the top will expand up for users that have a lot of content to their SP.

 

Search mode top > painting tab. I chose these settings:

Uvah
Reply #246 Monday, February 13, 2012 5:37 AM

I have a question. The colors next to the text. Are they the colors used or do they just denote the margins?

2of3
Reply #247 Monday, February 13, 2012 5:59 AM

I have a question. The colors next to the text. Are they the colors used or do they just denote the margins?

They represent the margins, yes. To the right of that section, you'll see a preview of the image you are adjusting. There is a checkbox above that that if checked off will show the diff margins in those colors.

 

You'll see this shown in reply #241

PoSmedley
Reply #248 Monday, February 13, 2012 9:41 AM

Good morning!

willistuder
Reply #249 Monday, February 13, 2012 10:00 AM

Excuse me for interrupting. It's great to see that you are determined to finish this one, Po'. What would Skinhit think? I hope that you'll consider finishing up some of your other great skins as well. Thanks to Tim and Vampothika and that Neone guy as well.

PoSmedley
Reply #250 Monday, February 13, 2012 10:11 AM

willistuder
Excuse me for interrupting. It's great to see that you are determined to finish this one, Po'. What would Skinhit think? I hope that you'll consider finishing up some of your other great skins as well. Thanks to Tim and Vampothika and that Neone guy as well.

  • Interrupt anytime.
  • Thank you.
  • WHO?
  • I'm looking them over as I go through this one to see what's do-able and stuff.
  • All three should get medals. 
PoSmedley
Reply #251 Monday, February 13, 2012 3:34 PM

FYI - We are working in the background. Next up is the taskbar but we hit a bit of a snag with the texture. It may possibly have be fixed but needs some tweaking. I'm trying textures for the first time and kind of learning as I go.

 

 

PoSmedley
Reply #252 Monday, February 13, 2012 11:05 PM

I have the taskbar texture issue worked out. What I have to do is tweak the images in PS to get the colors to match the original taskbar. (See image in #251)

The stitching...geesh.

This is the base layer for the taskbar.

I've tried several different approaches in applying the stitching.

  • One single stitch tiled across ~ It runs right up to the edge no matter how I change the margin or add spacing to the png file in PS
  • Two Images of single stitch stacked at 50 px, 100 px, 200 px apart. Same as above.
  • Like a noob idiot I thought, why not make thew stitching like the base layer? Which is the base layer with stitching then hide the base layer in PS and save. This ALMOST works.

The issue (as was with ALL of the above) is that the stitching will not apply to the TB if you put it at the top of the screen. I can understand that with the first two attempts, but my noob thinking says if it works with the base layer (the images mirror correctly when applied at top or bottom) it should work with the stitching. Bu no. NO. No. No.

 

 

And I forgot one other thing. My Taskbar height isn't showing when applied. It should be 50 px and it is stuck at 35 or 40.

Leo the Lion
Reply #253 Monday, February 13, 2012 11:17 PM

Po, just popped by to offer encouragement and to say fantastic looking graphics and the whole thread is an interesting read.........especially for someone like me who is more an 'admirer' than an artist. 

Xiandi
Reply #254 Tuesday, February 14, 2012 12:00 AM

Are you making the taskbar one frame or two? If you make it two, you can get the stitching on the top of the bottom one (first frame) and the bottom of the top one (second frame). Of course, then all your layers will have to be 2 frames.

Your taskbar height is going to change according to what your text margins are set to on the taskbar buttons. The bigger your text margins on the buttons, the taller the taskbar gets. The whole setup is going to take tweaking as you go as far as the painting margins and text margins go.

What I would do in this situation is just get the taskbar in there, and then get the buttons in there. Once the buttons look right, then mess with the painting margins on the taskbar.

 

PoSmedley
Reply #255 Tuesday, February 14, 2012 12:43 AM

Xiandi
Are you making the taskbar one frame or two?

2

Xiandi
If you make it two, you can get the stitching on the top of the bottom one (first frame) and the bottom of the top one (second frame). Of course, then all your layers will have to be 2 frames

Right. You would think. I did the stitching in two frames just like the task bar, same size, etc. Inverted the frames, just like the taskbar etc. I tried it with the stitching as it is overlayed on the taskbar in the psd then hid the base and saved the png showing just the stitching. I tried it with just one stitch in each frame (frames inverted like the task bar). No matter what I try, the stitching never comes out right on the top task bar.

These are all the different methods I tried. The gray is just so you can see the actual size of the png file and how I had the stitch layed out (for the attempts at tiling just a single stitch.)

 

Xiandi
Reply #256 Tuesday, February 14, 2012 1:18 AM

I'm not sure if I'm reading that image right.

What I'm thinking is this:

I think this may be what you have posted in the 4th one, but not sure.

 

PoSmedley
Reply #257 Tuesday, February 14, 2012 7:30 AM

Xiandi
I think this may be what you have posted in the 4th one, but not sure.

Yeah.  The image with the gray in it is the same as the transparent image. The gray is for this thread only, so you can see the dimensions and layout.

I didn't use the gray, just the png with the stitches on a transparent background.

Going across, those are the 5 attempts, the 6th being the stitching image at the bottom, which is two frames, just like the base layer below it.

*** If I go with tiling the stitches across the top, I solved the issue of them running to the edge. I found the settings in Extra Settings to tell it how far from the left and right to begin and it looks much better.

Uvah
Reply #258 Tuesday, February 14, 2012 7:50 AM

Looking very awesome Po. Going to be a challenge with the graphics though.

PoSmedley
Reply #259 Tuesday, February 14, 2012 7:57 AM

Looking very awesome Po. Going to be a challenge with the graphics though.

Yeah. I'm tweaking stuff that I don't really know how to or where to start with. It's interesting. I have to walk away from it alot to clear my head.

I did get the buttons in which I really had to tweak and as you can see, am not quite done with.

 

PoSmedley
Reply #260 Tuesday, February 14, 2012 8:15 AM

Xiandi
Of course, then all your layers will have to be 2 frames.

OOPS.

fixed it. 

Forgot to set the first two texture layers to '2 frames'.

Please login to comment and/or vote for this skin.

Welcome Guest! Please take the time to register with us.
There are many great features available to you once you register, including:

  • Richer content, access to many features that are disabled for guests like commenting on the forums and downloading skins.
  • Access to a great community, with a massive database of many, many areas of interest.
  • Access to contests & subscription offers like exclusive emails.
  • It's simple, and FREE!



web-wc01