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
 |
|
Page 7 of 18 | |
|
|---|
Reply #122 Saturday, February 4, 2012 3:47 PM
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 #123 Saturday, February 4, 2012 3:51 PM
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 Saturday, February 4, 2012 3:56 PM
Ignore the log-off button. I was testing the graphic and had made it too big
Reply #125 Saturday, February 4, 2012 3:59 PM
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)
Reply #128 Saturday, February 4, 2012 4:09 PM
Oh! One more thing:
For this to look right in expanded mode, I had to change the recent items expand mode value to 45. (startmenu top part.....extra settings tab)
Reply #129 Saturday, February 4, 2012 4:10 PM
The expanded panel looks great as well. The stitching moves right out with it very well.
Reply #130 Saturday, February 4, 2012 5:29 PM
We are ready for the Highlight layers.
We'll be doing these the traditional overlay layers method here because it pretty straight forward stretching.
Reply #131 Saturday, February 4, 2012 5:33 PM
Firstly we'll need to change the blend mode of the images in Photoshop. Po has them in overlay blend mode which is fine for an image that never gets separated, but it won't copy merged correctly when you subtract the layers under it. Change both layers to normal blend mode.
Reply #134 Saturday, February 4, 2012 5:45 PM
Now. This is a bit complex.
Start with the top part
With both base layers (the brown ones) showing as well as the highlight layers, repeat your slicing of the section just like we did for the base layer (copy merged).
Now, hide the base layers in PS (only the 2 highlight layers are showing) and copy merged again and paste the image on top of the one you just created. You will have to nudge the top layer to make it line up in most cases. The only reason, I do this is to preserve the canvas size and spacing of the overlay image.
You can now hide the bottom layer and save it as a png. I usually call it f.ex sp_top2.png
Reply #136 Saturday, February 4, 2012 6:04 PM
Okay. It took me a minute after you explained it Messenger.
- Open SP with both brown layers showing and both highlights showing.
- Using the guides and the Rectangular Marquee Tool, make selection of the top part of the panel - copy merged - and paste into new file.
- Go back to SP and hide the two base layers and copy merge just the highlights and paste them in the new file you pasted the first copy merge.
- Hide the bottom layer in your new file and you are left with just the highlights for the top part of the SP and save as png.
You want to make sure your paste of just the highlights align with the first layer before you hide the first layer.
Is that right?
Reply #138 Saturday, February 4, 2012 6:15 PM
Now we can import the images into sks.
Open the start panel section and select the top part. Create a new layer by clicking on the little + button
You'll see that you now have a selection in the dropdown list
Reply #139 Saturday, February 4, 2012 6:18 PM
Select additional layer 1 from the dropdown and make sure the box "this image uses transparency" is checked (in the image tab)
Now import your highlight image.
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!
|
|
Page 7 of 18 | |
|
|---|
Reply #121 Saturday, February 4, 2012 3:46 PM
Now close the margins window, and the the animation builder. Select apply skin from the file menu (click yes when prompted to save)