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,005 views 349 replies
Reply #101 Top

<---------. Lurching

Reply #102 Top

<------------------ Larching   

The Larch

 

Reply #103 Top

I may have sliced the panel wrong with respect to the stitching layers.......working to see if I can fix it.

Reply #104 Top

Quoting 2of3, reply 103
I may have sliced the panel wrong with respect to the stitching layers.......working to see if I can fix it.
End of 2of3's quote

 

:omg:

Reply #105 Top

I have a very unconventional idea that works in my head. I want to avoid changing what we've done at all cost!

 

Stay tuned :w00t:

Reply #107 Top

 

 

                                     <--------------- Lurking too.

Reply #108 Top

/me drums his fingers on the desk...........

Reply #109 Top

Quoting BoXXi, reply 108
BoXXi drums his fingers on the desk...........
End of BoXXi's quote

I can name that tune in 7 notes

Reply #110 Top

The problem was with the spacing of the stitches. Whenever you're ready, we can continue!

Reply #111 Top

Ok...we're ready for the next part.

 

 

 

Stitches layer.

Reply #112 Top

***Here. Following in messenger and will just post questions if I have them as you go along.

msn = PoSmedley63 if anyone wants to join

Reply #113 Top

I spent several hours trying to make the tiling on this section to work and finally came up with an unusual solution.

 

We're going to make the next layer as an animation in the sks animation builder! There are several advantages to doing it this way:

Instead of making a new layer for each of the 5 sections, we do one single image that covers the entire panel.

The "animation" will also show up in search mode, saving us the trouble of creating multiple layers for that section.

Reply #114 Top

Firstly, I realized that I would have to adjust the graphics a tad. I grabbed the stitches layer and sliced up a section. I realized that in order for this to work, I needed a tiny bit more room between the vertical stitches.

 

This is the image, I came up with:

Reply #115 Top

Alright. Open your skin in sks and select Start menu animation builder from the tools menu.

Reply #116 Top

Import the image into the builder.

These are the settings that you'll need:

 

Reply #117 Top

Let me explain the settings a bit.

 

Animation canvas margins: That moves the canvas of your image (fine adjust) You will see a representation of this to your left.......I had to adjust the bottom value to -2.

For this one, you want fill entire area selected (it's just under the box showing your image) there are several other options in the dropdown.

 

Frame count is 1 here because it's a static image. If it were a true animation, you would want more frames.

 

I checked off the do not loop box.....I'm not sure that's necessary here....but it won't hurt.

Reply #118 Top

The top slider is for adjusting the frame rate...which we don't need here.

Reply #119 Top

Now for the painting margins.

 

Click on that and set it to these settings:

Reply #120 Top

Q - Why use animation instead of Additional Layers?

Reply #121 Top

Now close the margins window, and the the animation builder. Select apply skin from the file menu (click yes when prompted to save)

Reply #122 Top

Quoting PoSmedley, reply 120
Q - Why use animation instead of Additional Layers?
End of PoSmedley's quote

 

 

Quoting 2of3, reply 113
There are several advantages to doing it this way:

Instead of making a new layer for each of the 5 sections, we do one single image that covers the entire panel.

The "animation" will also show up in search mode, saving us the trouble of creating multiple layers for that section.
End of 2of3's quote

Reply #123 Top

Quoting PoSmedley, reply 120
Q - Why use animation instead of Additional Layers?
End of PoSmedley's quote

also, using one image to span the entire panel is good because I don't have to worry about fitting and tiling the stitches into the confines of each small section....it lays over the entire panel and expands as needed.

Reply #124 Top

Ignore the log-off button. I was testing the graphic and had made it too big

Reply #125 Top

Before showing your work, we need to jump back to the startpanel section itself.

 

Go to the startpanel left hand side section and move you left text margin in (I settled on 22)

Likewise, you'll have to move your right text margin on the right hand side section in (22 again)