Evolution of a skin

Cyber Shadow

Saturday, May 8, 2021 by 2of3 | Discussion: Skinning

Skinning is a process filled with creative moments, frustration, and compromise.

A lot of things have to come together before the skin is fully realized and uploaded to the community. The design fase may be the most important and lengthy part of what goes into building a cohesive Windowblind.

Today I thought I'd share som images giving a bit of insight into my process. I like to document my progress through screenshots as I go. Not all skins go through a huge amount of changes along the way, but I like to capture the moment if and when something significant is altered.

Cyber Shadow started out with this image:

It was part of my previous skin which explains the gradient and texture applied. This image, for various reasons never seemed to fit in so I dropped it from the design.

I still wanted to use the image, but so as not to repeat myself I changed the globe to yellow. I felt that using a central image and building the design around it would be pretty cool. This was the first part of the design:

At this point it could have been either the top or the bottom of a start panel.

Next, you can see that I have started on the start panel by expanding the frame upwards. I felt that the globe image with the bars jutting out on each side would do nicely for the shutdown and searchbar area. Also notice that I have rounded off the corners compared to the image above. I've also nixed the drop shadow :

Below shows the start of a taskbar design taking place. I drew a smaller version of the "eye" for a start button which fits in nicely. Some changes on the start panel have happened as well. I changed the round "dots" that separate the 2 sides to a squared dotted line, but repurposed them as state indicators on the taskbar buttons. Also a subtle but important change overall was that I switched the lighting from 120 degrees (top left) to 90 degrees (top lit):

Now we're getting somewhere! First draft on the window frames in progress. It was at this point I felt that I actually had a skin and I should start thinking of a name. The only notable change to other areas was to square off the corners of the startpanel mouseover image:

Next, it was time to start building the skin. Up to this point, I hadn't even opened SkinStudio. I don't like to start building before I actually have a skin name. Here you can see that I added the "cutout" in the tray area to make room for the expander button. Also added a dot and cutout area to the startbutton to better mirror the window titlebar buttons. I dropped the indicator dots on the taskbar buttons due to limited space. Decided as well to go with a solid line rather than dotted line in the start panel. I could have made it work, but realized that it was out of place seeing as I didn't have a dotted line anywhere else. Also notice that I made the bars for the shutdown and search area larger just to give myself a more room to play with:


Finally, I had the skin finished. Changes done for the final version were to make the "dots" bigger on the whole skin, and finally settle on a taskbar button that I both liked and fit in with the rest of the theme:

Lastly, 2 lighter substyles for maximum usability!

Hopefully some of you found this even remotely interesting. I just wanted to share with you all how a design can evolve from a single image or even just a color combo into a full fledged skin.

LightStar
Reply #1 Saturday, May 8, 2021 9:42 AM

Great post Tim! We get inspired in different ways, but I also get inspired by looking at a single image, even the color combo thing too!    

neone6
Reply #2 Saturday, May 8, 2021 3:20 PM

2of3
Reply #3 Saturday, May 8, 2021 4:08 PM

LightStar

Great post Tim! We get inspired in different ways, but I also get inspired by looking at a single image, even the color combo thing too!

Thanks, Tom! Yes, inspiration can come from many places and what ends up on "paper" may differ quite a lot from what you had in mind. I have started skins with a particular look in mind and ended up with something unrecognizable compared with the first draft. Cyber Shadow was not an extreme example of evolution, but it was fresh in my mind and fairly well documented. 

don5318
Reply #4 Saturday, May 8, 2021 8:14 PM

Very nice write up on the thought process of designing a skin, and yes, things don't always turn out at first, and yes, it's an evolution in process, thanks for sharing your process.     

Dcrew57
Reply #5 Wednesday, June 2, 2021 8:06 PM

Thanks for sharing. The design process for each other is different. but we all get to the same goal. I try to design the overall window concept and buttons then move on to other parts.  As i move i add things and find myself reverse designing a lot.  

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