Po' Smedley's Life And Brain Drippings
Putting It Together : Start Menu
Published on February 3, 2012 By PoSmedley In 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


Comments (Page 17)
24 PagesFirst 15 16 17 18 19  Last
on Feb 12, 2012

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.

 

on Feb 12, 2012

That is beautiful, Po!

on Feb 13, 2012

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.

on Feb 13, 2012

Getting more awesomness.

Back to lurking.

on Feb 13, 2012

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:

on Feb 13, 2012

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

on Feb 13, 2012

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

on Feb 13, 2012

Good morning!

on Feb 13, 2012

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.

on Feb 13, 2012

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. 
on Feb 13, 2012

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.

 

 

on Feb 13, 2012

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.

on Feb 13, 2012

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. 

on Feb 14, 2012

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.

 

on Feb 14, 2012

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.)

 

24 PagesFirst 15 16 17 18 19  Last