JJ.Ying's Skinning World
I like skinning!
View
Search

Day 2

Feb 3, 2009 2:14 PM by Discussion: Community

Today is about to extend the rough design to other parts.  Window borders and start panel play big role in a theme, so after the rough design of window borders is done, I choose to add the start panel in Atlas for this stage.

To keep functionality and simplicity, no textures are used here, but to make the plain panel more interesting, I added some highlight and a stripe in the top part of the panel.  And as I always do in the past, I use 2 different colors for the background of left/right hand side.  And for the log off/turn off area, a very dark blue is there to keep visually balance with the stripe in the top part of the panel.

Consistency should be considered at any time, and the whole panel has the same look & feel with the window, and for now, the basic tune is shown, the overall appearance has gradually been shown.

Great to get feedbacks from you guys, so if you have any problem to ask about the process, please be free to leave a comment and I will try to answer as possible as I can or we can discuss together [e digicons]:grin:[/e]

 

To see the post with all parts, please go the following post:

http://forums.wincustomize.com/338473

10 Replies Reply 3 Referrals

The whole process of making a windowblinds skin

Feb 2, 2009 3:48 PM by Discussion: Community

 

This post will be about the whole process of the building up the skin I called Atlas, the purpose is to show you the interesting and frustrating sides of windows theme design.  You can trace the progress and see many aspects of skin design being talked here as I will update frequently.

 

1. Concept

It's really hard to say where the inspiration comes from, sometimes it's 6 o'clock am on bed, sometimes it's when you see a certain texture and many other times, it's just an impulse.  For this example, my next skin Atlas, it is started from 3 keywords: Elegant, Functional and Bright.


Initially, I make a new PSD file and added a random background.  After that, drew the window borders and titlebar buttons, I always love to play around the borders and titlebar buttons before going deeper, so in the concept stage, no detailed elements will be added here.  The goal is to make myself want to touch the titlebar using my fingers, if failed, the concept will be dropped.  But here, I've done a simple window with only borders and titlebar buttons, a kinda good beginning for the project:

 

 

 

2. Start Panel

Today is about to extend the rough design to other parts.  Window borders and start panel play big role in a theme, so after the rough design of window borders is done, I choose to add the start panel in Atlas for this stage.

To keep functionality and simplicity, no textures are used here, but to make the plain panel more interesting, I added some highlight and a stripe in the top part of the panel.  And as I always do in the past, I use 2 different colors for the background of left/right hand side.  And for the log off/turn off area, a very dark blue is there to keep visually balance with the stripe in the top part of the panel.

Consistency should be considered at any time, and the whole panel has the same look & feel with the window, and for now, the basic tune is shown, the overall appearance has gradually been shown.

 

3. Taskbar

I've done the initial design of the window borders and start panel, what's next?  Sure it's taskbar.  Taskbar usually only takes less than 30 pixel height in the screen, but it has many parts to take care, and the taskbar buttons will have 6 different states (Normal, Hover, Pressed, Selected, Selected Hover an Flashing, see below for example).  We must carefully deal with these states, make them easy to reconginize and, of course, beautiful.

Taskbar Button in Slider XP by I.R. Brainiac

 

We have many ways to make each state looks different for others, colors, fonts, shapes and even animations.  Personally, as a user, I think the most important contrast should be applied between the normal and the selected state.  Talking about user, how can a skinner don't try more skins?  Use more, feel more and learn more, things always become different when seen in different views.  Go back to the taskbar, another one we should not forget is the flashing state.  In SkinStudio, it is saved as a single image, and doesn't have individual font settings.

The combination with light gray and dark blue has been applied as main tune in Atlas, so the taskbar I'm doing are still use this combination.  No detailed design for now so the start button is still temporary, and other parts like quick start buttons and tray arrows will be added later.

 

 

 

4. Mockup

So far the Atlas has already got her window borders, start panel and taskbar, very rough and only stay as a draft, but it's time to put it in action to see whether it's good.

To test it, I put them together like the real desktop, and added some text & icons to get the simulated desktop environment.  Also I made a set of push buttons, still not final one, just to confirm and overall color scheme, and initially decide which styles will be used for global hover state, pressed state, etc.

 

And one more important thing is to try different kinds of backgrounds for the skin.  Dark ones, light ones, simple ones and complicated ones, then adjust the skins, especially the edges, to make sure it look clear and standing out from all kinds of desktop wallpapers.  So, this is an critical stage to make the skin usable.  Shadows, edge colors and stroke width should be carefully re-touched and usually this needs pretty much patience cause we may have to try dozens of times.

 

 

Maybe let you down, but for mockup, I only stopped here, I usually wont start coding before every details are done.  Take Atlas as example, tomorrow I'll directly go into SkinStudio because I think the best way to make a better skins is designing while testing, and it also helps a lot to save time because if every single elements are designed it self, I don't need to slice them and re-arrange all the states to become one image.  But of course, the weakness is obvious, we can't get the full look before the skin is finally coded and to keep consistency for all the elements, we must put the final look in our mind and build up a certain visual guidelines only in brain.

 

 

5. Getting Start with SkinStudio

Just as I said before, the next stage is using [b]SkinStudio[/b] to import the current graphics to our new skin.

Before that, we certainly need to create a new skin file.  But in most cases, I don't start a skin from scratch or the default skin, instead, I usually start by editing an existing skin.  Why?  Default skin has no latest features and if I choose a certain new skin as template, the time spent on setting up properties for new feature will be less.  Also, if I build the skin from my own old ones, I will have better control over the preset font/color settings since I'm familiar with them.

Looks like everything is ready for us, but it's only a very start for the skinning, especially the coding works.  There are more than one hundred bitmaps left to edit(even more for vista, lots more), so we can take a little break before really getting deeper in SkinStudio.

(To be continued...)

41 Replies Reply 8 Referrals

Coming soon

Jul 7, 2007 5:42 PM by Discussion: Suites

75% done.  Stay tuned!smile


Plan to release this on WinCustomize as a master suite, at price of around USD $8.  Sorry for not making it free, but I wanna let you guys know my free skins will also be soon to come, one free skin after a premium one~

Xaphire will include:
WindowBlinds 5 skin
Mini Icons set with at least 8 icons
CursorXP pack
Wallpaper pack

7 Replies Reply 32 Referrals

lypnjtu can't login in WC

Sep 23, 2006 4:06 AM by Discussion: WinCustomize Site Issues

Yesterday, my friend  was trying to update his profile, I mean changing his email from lypnjtu@126.com to  lypnjtu@163.com 

But after the profile update was failed, he could no more login in.  When he tried to login or send password, both 2 addresses and his id seem to be invalid.  

What should he do?  Thanks

 

0 Replies Reply 5 Referrals

Jun 25, 2006 6:15 AM by Discussion: WinCustomize Talk
Just read the post http://www.wincustomize.com/Articles.aspx?AID=121543&c=1#942950 at WC front page and noticed that the PowerArchiver skin contest was over and The FrostBite by Marc A. Foumberg won the 3rd place, I suddenly found it looks very very like my wb skin created last spring - EulB http://jjying.wincustomize.com/ViewSkin.aspx?SID=6552&SkinID=4867&LibID=1

I pointed out then, but he just said: I created the images my self. The colors are the same however

Also, I mentioned his anoter skin - Slate is perheps a RIP of KOL's Sustenance, Then , his answer is: As for Slate. Thats MS's design. Created from screenshots. Many people mimic different OS themes. I have no more claim to it than anyone else.

Is it a rip?



6 Replies Reply 9 Referrals

May 27, 2006 1:11 PM by Discussion: Suites
Yesterday I uploaded the new HALO wb with added shell icons, system animations and of course new HALO 3 logo.
Also, I created a new CursorXP theme for it. This is done in photoshop but not 3Ds MAX like the old one.

BTW, why can't I update the preview image? When updating, I submit the new shot but the old one is still there

Download link:
WindowBlinds: http://jjying.wincustomize.com/ViewSkin.aspx?SID=6552&SkinID=5554&LibID=1
CursorXP: http://jjying.wincustomize.com/ViewSkin.aspx?SkinID=1920&LibID=25&comments=1
Dock Icons: http://jjying.wincustomize.com/ViewSkin.aspx?SkinID=10363&LibID=29&comments=1



2 Replies Reply 34 Referrals

May 26, 2006 10:47 AM by Discussion: WinCustomize Talk
Today, I was planning to update my HALO wb, but when I upload the theme and new screenshot, I found that the new image does not correctly replace the formmer, the old shot is still there. What should I do?
8 Replies Reply 4 Referrals

JJYING.cn

Apr 29, 2006 5:19 AM by Discussion: WinCustomize Talk
After buying new domain name and web space, I finally re-launched my blog, welcom to JJYING.cn! http://www.jjying.cn/





1 Reply Reply 10 Referrals

Dexter was wondering...

Apr 23, 2006 2:36 AM by Discussion: New Releases
These days I've been working with Dexter.Ren on his new desktop theme -- ADONIA. http://www.3parallel.cn/adonia

But when he uploaded the windowblinds, iconpackager and windows media player skins, all the files are disapproved due to the guildline, he was wondering why, me too.
16 Replies Reply 8 Referrals
I found this at ChinaUI forum, this theme is done by a chinese designer called Fang

It was really amazing but there is no download link so far....

Original post:
http://forum.chinaui.com/topic.aspx?topicid=36884





3 Replies Reply 19 Referrals

 
Page 1 of 2