PoSmedley PoSmedley

One Piece At A Time : Windowblind Tutorial Part IV

One Piece At A Time : Windowblind Tutorial Part IV

Putting It Together : Start Menu

 

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

160,034 views 349 replies
Reply #251 Top

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.

 

 

Reply #252 Top

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.

Reply #253 Top

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

Reply #254 Top

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.

 

Reply #255 Top

Quoting Xiandi, reply 254
Are you making the taskbar one frame or two?
End of Xiandi's quote

2

Quoting Xiandi, reply 254
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
End of Xiandi's quote

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

 

Reply #256 Top

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.

 

Reply #257 Top

Quoting Xiandi, reply 256
I think this may be what you have posted in the 4th one, but not sure.
End of Xiandi's quote

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.

Reply #258 Top

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

Reply #259 Top

Quoting Uvah, reply 258
Looking very awesome Po. Going to be a challenge with the graphics though.
End of Uvah's quote

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.

 

Reply #260 Top

Quoting Xiandi, reply 254
Of course, then all your layers will have to be 2 frames.
End of Xiandi's quote

OOPS.

fixed it.  :blush:

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

Reply #261 Top

MWAHAHAHAHAHAHAHAHAHAAAAAAA *gak

 

Reply #262 Top

Nicely done.

Wanker.

Reply #263 Top

Cool!

Reply #264 Top

Quoting Zubaz, reply 262
Nicely done.
End of Zubaz's quote

Tim will probably find 50 things wrong with it, but for now it works.

The image and margins for the side stitching is ridiculous and more or less a 'WTF' when you look at it in SKS.

Kinda like the guy in the wallpaper.

Reply #265 Top

Quoting PoSmedley, reply 264
Tim will probably find 50 things wrong with it, but for now it works.
End of PoSmedley's quote
I'm sure that Tim and company are correcting most of your mistakes or just doing the work for you.  

I mean, I've seen most of your walls.  I'm sure it's real hard to find brushes  people have made and source images other people have made and put them together.

Reply #266 Top

Quoting Zubaz, reply 265
I'm sure it's real hard to find brushes people have made and source images other people have made and put them together.
End of Zubaz's quote

It's finding just the right ones and it's really not all that hard. Some folks just make it down right easy.

 

Reply #269 Top

:w00t:

Reply #270 Top

-sigh-

Reply #271 Top

Some subtle tweaking on the margins for the stitching and I think you are ready to start the new thread section.

Somtimes you actually have to move the graphics inside the canvas if you can't get the margins to work for you......it may take just nudging it up/down a pixel or 2. It may seem "wrong" logically, but it's how it applies that matters.

Make sure to test it with small icons as well before declaring it finished. In some cases yo may have to do a seperate subby for small icons.

Reply #272 Top

I can only assume that, because of the lack of updates to this thread, that Po' has fufilled his destiny and quit. (Again.)

I'd tell you I was surprised . . But I'm not.  (Again.)

Reply #273 Top

Lets not count out the Smedley just yet Zu.

Reply #274 Top

I'm working on it .

I spent a good part of Thursday being heavily medicated on an IV drip and Friday still feeling the effects as well as a massive headache from it. Just trying to get the cobwebs out of my head today.

The good news is that as of Thursday all the BS I've had to go through for the past four months is over. I have my first Dr. appt. for Monday and hope to have the surgery scheduled for my back and brachial plexus within the next few weeks. 

I haven't given up on anything. Thanks to some of the coolest folks I know, I have gotten further than I ever have before and am to close to completing this to even think of stopping.

Reply #275 Top

WTG Po. :thumbsup: