Difference between revisions of "Modern Skin: Simple Skin Tutorial"

From Winamp Developer Wiki
Jump to: navigation, search
m
(removing spam and restoring content from [http://dev.winamp.com/w/index.php?title=Modern_Skin:_Simple_Skin_Tutorial&oldid=949 previous revision] by Tarik)
Line 1: Line 1:
<img src="http://photos2.hi5.com/0106/470/509/SS3jkz470509-02.jpg" >'''vali'''
+
Creating a Modern Skin --> [[Modern Skin: Intro|Intro]] --> [[Modern Skin: Winamp 2 to W3+|Winamp 2 to Winamp 3+]] --> [[Modern Skin: Simple Skin Tutorial|Simple Skin Tutorial]] --> [[Modern Skin: XML Intro|XML Intro]] --> [[Modern Skin: Simple Skin Tutorial (Continued)|Simple Skin Tutorial (Continued)]] --> [[Modern Skin: Container| Container]] --> [[Modern Skin: Group|Group]] --> [[Modern Skin: Relative Positioning| Relative Positioning]] --> [[Modern Skin: Complex Skin|Complex Skin]] --> [[Modern Skin: Non-Rect Player| Non-Rect Player]] --> [[Modern Skin: Layer Composition| Layer Composition]] --> [[Modern Skin: Alpha Channels| Alpha Channels]] --> [[Modern Skin: Animatedlayer|Animatedlayer]] --> [[Modern Skin: Snap Points|Snap Points]] --> [[Modern Skin: Drawers|Drawers]] --> [[Modern Skin: Skin Scripting| Skin Scripting]] --> [[Modern Skin: Drawer Scripting| Drawer Scripting]] --> [[Modern Skin: Animating a Skin|Animating a Skin]] --> [[Modern Skin: Maki Overview| Maki Overview]] --> [[Main_Page#Glossary_of_Terms|Glossary]]
 +
 
 +
 
 +
In the next section, we will show how to make a simple skin and teach you the basic modern skinning terminologies.
 +
 
 +
Before you start, you will need these items.
 +
 
 +
==Simple Tutorial Skin File==
 +
 
 +
We're going to show you how to make a simaple skin like the one shown below.  Download the [http://media.winamp.com/5541/main/downloads/development/skinsmodern/SimpleTutorial.wal "Simple Tutorial Skin" example].
 +
 
 +
 
 +
[[Image:Simpleskin_blue.png]]
 +
 
 +
 
 +
When you save the file, make sure that the type of the file is selected to "All Type" and NOT "Winzip" filetype. You should save the file into your skin subdirectory in your Winamp 5 directory. for most people, that path is "C:\Program Files\Winamp\Skins".
 +
 
 +
 
 +
[[Image:Simpletutsave.png]]
 +
 
 +
==Text Editing Programs==
 +
You can use any text editing program to write XML and MAKI script files.
 +
 
 +
1) The plain Windows Notepad will do. It is under "Start Menu" => "Programs => "Accessories => "Notepad". Here's what it looks like.
 +
 
 +
 
 +
[[Image:Notepad.png]]
 +
 
 +
 
 +
2) However, if you intend to do alot of coding rather a quick editing, we recommed you to use something like [http://www.editplus.com/ EditPlus]. EditPlus will automatically color your HTML and XML code. The coloring makes it easier for you to see your code and find missing closing tags. Here's what it looks like.
 +
 
 +
 
 +
[[Image:Editplus.png]]
 +
 
 +
 
 +
You can select the type of coloring by going to "Document" menu => "Change File Type..."
 +
 
 +
 
 +
[[Image:Editplus_changetype.png]]
 +
 
 +
==A Graphics program==
 +
We recommend [http://www.adobe.com/ Adobe Photoshop] or [http://www.corel.com/servlet/Satellite/us/en/Product/1184951547051#tabview=tab0 Paintshop Pro]. Here're some [http://forums.winamp.com/showthread.php?s=&threadid=93803 graphic design tutorials] if you're new to graphics.
 +
 
 +
[[Image:Adobe.png]]
 +
 
 +
[[Image:Psp.png]]

Revision as of 02:06, 3 October 2009

Creating a Modern Skin --> Intro --> Winamp 2 to Winamp 3+ --> Simple Skin Tutorial --> XML Intro --> Simple Skin Tutorial (Continued) --> Container --> Group --> Relative Positioning --> Complex Skin --> Non-Rect Player --> Layer Composition --> Alpha Channels --> Animatedlayer --> Snap Points --> Drawers --> Skin Scripting --> Drawer Scripting --> Animating a Skin --> Maki Overview --> Glossary


In the next section, we will show how to make a simple skin and teach you the basic modern skinning terminologies.

Before you start, you will need these items.

Simple Tutorial Skin File

We're going to show you how to make a simaple skin like the one shown below. Download the "Simple Tutorial Skin" example.


File:Simpleskin blue.png


When you save the file, make sure that the type of the file is selected to "All Type" and NOT "Winzip" filetype. You should save the file into your skin subdirectory in your Winamp 5 directory. for most people, that path is "C:\Program Files\Winamp\Skins".


File:Simpletutsave.png

Text Editing Programs

You can use any text editing program to write XML and MAKI script files.

1) The plain Windows Notepad will do. It is under "Start Menu" => "Programs => "Accessories => "Notepad". Here's what it looks like.


File:Notepad.png


2) However, if you intend to do alot of coding rather a quick editing, we recommed you to use something like EditPlus. EditPlus will automatically color your HTML and XML code. The coloring makes it easier for you to see your code and find missing closing tags. Here's what it looks like.


File:Editplus.png


You can select the type of coloring by going to "Document" menu => "Change File Type..."


File:Editplus changetype.png

A Graphics program

We recommend Adobe Photoshop or Paintshop Pro. Here're some graphic design tutorials if you're new to graphics.

File:Adobe.png

File:Psp.png