Before you dig in to this tutorial I must remind you that this is the second installment of the tutorial that I made last week, and in order to follow this tutorial the way you should I feel obligated to point you to the first one again. I really hope that you already got your grasp on Total Commander and have set Notepad++ as your default editor. Good news is that our buddy and one of Aston2 masterminds Dimpal (Dmitry Cashev) has compiled a great Skinning Manual that contains almost all technical details that you need to know in skin making process. If there is something that you don’t understand it is most likely that it is explained there.
I hope this video will help you get started and give you an idea of how it can make the whole process a bit easier. I apologize if my spoken English is not that good, if it is hard for you t o follow me I’ll “write” it next time.
First installment of skinning A2 my way. It is the way I do it and I’ll show you some tools and tricks of the trade. Skinning Aston2 is still very hard at first but later is getting … well … not so hard.. I mean it is getting easier. First I’ll show you what tools I use and how to set them up for maximum productivity.
Notepad++ – Or some other text editor that supports syntax highlighting. You can use Windows built-in Notepad but Notepad++ has some great features and it is absolutely free.
Total Commander – download, install it and set it up like in video below. Watch it on youtube directly for better quality.
What features are important that makes TC (Total Commander) ideal for skinning?
I know some people tend to underestimate the knowledge of skinning and question its usability in other fields but I personally find the knowledge from my skinning background pretty applicable. I’ll show one example just to illustrate it.
CSS sprites, really cool way to achieve nice rollover effects, button states, look at the css code below from planetaston.com
#menu ul li a {
display: block;
float: left;
line-height: 34px;
width:100px;
height: 34px;
text-align: center;
color: #ffffff;
text-decoration:none;
background:url(‘images/butts.png’) no-repeat top left;
}
#menu ul li a:hover, #menu ul li.current_page_item a {
color:#1D1D1D;
text-align: center;
background-position: -100px 0;
}
#menu ul li a:focus, #menu ul li.current_page_item a {
color:#FFFFFF;
text-align: center;
background-position: -200px 0;
}
#menu ul li a:active, #menu ul li.current_page_item a {
color:#FFFFFF;
text-align: center;
background-position: -200px 0;
}
And the image butts.png is below
Most underestimated graphics editor in my opinion is FireWorks . I think it is great and I’ll make several tutorials on achieving great things using Fireworks. I made one video tutorial and placed some nice music in the background since it will suit you better than my Niko Belic like accent 
See how easy it is to make nice reflection using Adobe FireWorks.
Skinning Aston2 Menu is not for the faint-hearted, it is hard, it takes a lot of time but that is something that you already know and it is time to finally give you some useful info on how to make the whole process smoother . Ok buckle down here we go.
What will I present you here is two “anatomy maps” or “cheat sheets” and the way to use them. Easiest way to make a skin for Aston2 Menu is to find a skin that has the layout that you like, analyze it and make your skin on top of it.
Step1
Go to the skin location (in my case on Vista 64 – C:\Users\krsta A2\AppData\Roaming\Aston2\Skins\Menu\) and copy skin to location where you want to work with it (E:\NewSkin\…or something), I’ll use my Chillounge skin so I’ll copy Chillounge.a2menu. Normaly I would use Total Commander but I’ll write special tutorial on using TC for skinning. Now extract Chillounge.a2menu by using any zip application (I recommend 7-zip ) and unpack it to for instance to E:\NewSkin\Chillounge\ you’ll see this files
Sunburst backgrounds became very popular across the web (and off the web just as well). Cannot tell if it is due to its hypnotic effect or something else but I like them and many people find them neat and very posh. Since we cannot argue and sunburst will be fashionable for quite some time in the near future let me show you how easy it it is to make one.
I believe the same principle can be applied with other main stream applications but I will show you how to do it using Adobe Illustrator.
more…
While waiting for WYSIWYG skin editor to be developed I know many skinners are eager to try their luck in skinning Aston2 (Aston2 Menu or Aston2 Panels) . So while waiting why not give it a try. Some other time I’ll get into skinning itself but for now let’s see what we need.
- Solid knowledge of file operations such as copying, working with archives etc. Also help of some file manager can be useful too. There are several really good shareware file managers such as Total Commander or Directory Opus , also there is quite a number of pretty solid free managers such as FreeCommander or SE-Explorer. File managers can save lot of time and effort so I suggest you should use one.
more…
In this very simple tutorial I am using Adobe Illustrator (CS3) to show you how easy it is to get a nice gloss using the opacity mask. Start by creating a new 400 x 400px rgb document. I will use popular star (badge) shape that you can see a lot around telling you that something is new or so.
Step 1
Select the star tool and click on the blank canvas, for start use the following settings from the dialog.
Gloss effect is very popular weapon in the arsenal of web 2.0 designers. You can create it using any main stream app but I will show you how to do it in Adobe Illustrator CS3 (any version will do I guess except maybe some ancient one ) . This is I believe the easiest way yet and gloss effect can come handy for many things if you are Aston (or any other app) skinner. You can use it for instance for glossy balls like in Vista glossy orb start button, icons or whatever. Ok launch your Illustrator and create any size basic rbg document (use rbg document for all that does not need to be printed on paper – that is the fastest explanation I can give). Size of the document or of the objects is not important since we are dealing with vectors here and we can always resize it at any time without any fear of quality loss. In order to have something to apply gloss effect to I’ll show you by the way how to create nice blended object which is neat alternative for gradient fills and can lead to some pretty cool results.
Step1
Let’s quickly draw two circles by using the elipse tool, set the color of the larger circle to darker color than the one inside and set the stroke to none.
Short tutorial on my method for creating a faded smeary reflection using Photoshop CS3. Same method should work for earlier versions of Photoshop. This technique contrasts with “Apple-style” reflections, which are sharp and crisp, instead creating a short simple reflection that’s not as distracting.
