Jump to content

Clover Themes

Slice

By Slice,
in Clover

 Share
1,871 posts in this topic

Recommended Posts

chris1111
chris1111
Posted
Posted
Thank you guys!  It is gold! 

the block is 18K and as you see the other more yellow icon are 22K  :D  :hysterical: 

 

It Would Be a chalenge to make it animated do you help me a bit ;) please 

  • Like 1
Link to comment
Share on other sites
blackosx
blackosx
Posted
Posted

Animations...

 

Here’s a quick checklist :)
 
1 - Think of an idea.
2 - Draw/create a series of images all of equal size.
3 - Save each file as a PNG using the naming convention <filename>_nnn.png where nnn starts at 000 and increments by one for each frame.
 
For example:
my_anim_000.png
my_anim_001.png
my_anim_002.png
 
The Clover GUI will run a clock, starting from 000 and increment by one. It will match this clock to each frame number of your files. If you wish to add a pause to the animation, then you need to show this in the numbers of your files as the clock won't stop - it will still keep counting.
 
Example:
my_anim_000.png
my_anim_001.png
my_anim_002.png
my_anim_032.png
my_anim_033.png
my_anim_034.png
my_anim_035.png
 
In the above example:
Clock 000 matches to my_anim_000.png
Clock 001 matches to my_anim_001.png
Clock 002 matches to my_anim_002.png
Clock 003 matches to my_anim_002.png
Clock 004 matches to my_anim_002.png
...
Clock 031 matches to my_anim_002.png
Clock 032 matches to my_anim_032.png
Clock 033 matches to my_anim_033.png
Clock 034 matches to my_anim_034.png
 
4 - Put all files in to a directory and name the directory with the name of the anim, but without the _nnn. To continue the above example, the directory name would be my_anim.
5 - Save the directory to /EFI/CLOVER/themes/<YOUR_THEME_NAME>/
So if your theme is named GOLD, this is how it would look:
/EFI/CLOVER/themes/GOLD/my_anim
5 - Decide on which screen of the GUI you wish the animation to appear. Clover uses an ID number to identify each screen. For example, the main screen with the OS icons is ID 1, the help page is ID 3, the options page is ID 4 and so on.
6 - theme.plist : Add Anime array to the theme.plist, for an example, see post #4. 
7 - theme.plist : Set the ID to the number of the screen you wish to use.
8 - theme.plist : Set the Path to the directory name of the anim - this will be my_anim.
9 - theme.plist : Set the number of Frames. In the above example with the clock, this would be 35 (zero indexed).
10 - theme.plist : Set the FrameTime, which is the number of milliseconds between frames.
 
You can find more information at the Creating Themes page of the wiki. You can also look at some of the existing themes for examples.
 
I should let you know that I’m currently working on trying to improve the flexibility of the GUI and have made some recent changes which now allow the use of extra settings in the theme.plist. I have not yet added these to the wiki but I will soon. For an example of the latest settings check the theme.plist from my BGM v1.3 theme that’s currently in the repo. 
Link to comment
Share on other sites
blackosx
blackosx
Posted
Posted

I've added my new theme 'Shield' to the wiki database this morning. (Oh, and I've also sorted the wiki database alphabetically).

 

Here's a sample of the theme.

 

2rzv3es.jpg

 

Note: Created for Clover rev2504 and newer.

 

EDIT: Download link for v1.1 removed.

v1.2 can now be found in the Clover repo.

  • Like 3
Link to comment
Share on other sites
CosmosCJ
CosmosCJ
Posted
Posted

I've added my new theme 'Shield' to the wiki database this morning. (Oh, and I've also sorted the wiki database alphabetically).

 

Here's a sample of the theme.

 

2rzv3es.jpg

 

Note: Created for Clover rev2504 and newer.

 

Download Shield v1.1

wow，yet again another masterpiece! I wanna make another clover theme which has animation, but I am home now and my PC is in the school dormitory. :( Still having the Font issue in clover theme.@blackosx, i got your ai file for making font png, but when i change another font type, the letter will overlapping with the grid boundary.And i saw your new Shield theme, which using a pretty cool awesome font type, could you tell me the exact way to making the font? always appreciate your help.

Link to comment
Share on other sites
blackosx
blackosx
Posted
Posted

Still having the Font issue in clover theme.@blackosx, i got your ai file for making font png, but when i change another font type, the letter will overlapping with the grid boundary.

Then you need to adjust to grid to fit the wider typeface. See this screenshot of two of the fonts from the Clover_font_pack_1. The grids and characters are all positioned by hand.

 

post-331032-0-31057400-1390860673_thumb.png

 

And i saw your new Shield theme, which using a pretty cool awesome font type, could you tell me the exact way to making the font? always appreciate your help.

 

I'm using one main font file, BWRoB_PTMono_10W_A.png which uses PTMono from http://www.paratype.com/public/ . This is placed in to the Illustrator file as in the above screenshot, saved as a PNG with anti-aliasing. Then I imported in to Photoshop and applied a gradient to it to closely match the colours of the theme background.

 

For the animations, I used a font named Space Age from http://www.dafont.com/space-age.font . The text is created, broken apart and animated in Cinema4D. I then render out the files as PNG with alpha mask before optimising them and renaming/numbering the files to make the desired sequence for Clover.

Link to comment
Share on other sites
blackosx
blackosx
Posted
Posted

The shield theme has been updated to v1.2 and is now in the Clover repo. For best results using this theme please use Clover rev2534 and up.

 

It's also worth noting that recent updates to Clover bring some new theme settings to help give designers more freedom where they can position items, for example the banner and animations. Rev2535 now allows vertical arrangement of OS Icons down the right side of the screen.

 

I've updated the Clover wiki with details.

http://clover-wiki.zetam.org/Design

Link to comment
Share on other sites
CosmosCJ
CosmosCJ
Posted
Posted

Then you need to adjust to grid to fit the wider typeface. See this screenshot of two of the fonts from the Clover_font_pack_1. The grids and characters are all positioned by hand.

 

attachicon.gifIllustrator_Screenshot.png

 

 

I'm using one main font file, BWRoB_PTMono_10W_A.png which uses PTMono from http://www.paratype.com/public/ . This is placed in to the Illustrator file as in the above screenshot, saved as a PNG with anti-aliasing. Then I imported in to Photoshop and applied a gradient to it to closely match the colours of the theme background.

 

For the animations, I used a font named Space Age from http://www.dafont.com/space-age.font . The text is created, broken apart and animated in Cinema4D. I then render out the files as PNG with alpha mask before optimising them and renaming/numbering the files to make the desired sequence for Clover.

Thanks for the explanation and that's really helpful. BTW, I saw the two grids above, and the problem is that the width of the left grid is wider than right one, is there any problem when the width is changing? I mean the width of the png is different from the original one.I don't know if clover can recognize the wider png or narrow png.

I know Cinema4d, and have been studying it for about 2 year, which is a really powerful tool.

Link to comment
Share on other sites
blackosx
blackosx
Posted
Posted

Varying grids widths are fine. 

 

Once you've generated the final .PNG file, measure an individual character/grid item in pixels. In the Illustrator screenshot you can see the left filename is WoB_Juan_13W.ai and the right filename is WoB_CodenameCoder4F_8W.ai. The number (highlighted in green) is the character width of the final PNG file.

 

When using the font in Clover, you let it know how wide it is by entering the number in the theme.plist

<key>Font</key>
<dict>
<key>CharWidth</key>
<integer>13</integer>
<key>Path</key>
<string>WoB_Juan_13W.png</string>
<key>Type</key>
<string>Load</string>
</dict>

If you've been studying Cinema4D for 2 years then you will probably know it way more than me. So I guess we can look forward to seeing some nice animations in the future? ;)

 

Link to comment
Share on other sites
CosmosCJ
CosmosCJ
Posted
Posted

Varying grids widths are fine. 

 

Once you've generated the final .PNG file, measure an individual character/grid item in pixels. In the Illustrator screenshot you can see the left filename is WoB_Juan_13W.ai and the right filename is WoB_CodenameCoder4F_8W.ai. The number (highlighted in green) is the character width of the final PNG file.

 

When using the font in Clover, you let it know how wide it is by entering the number in the theme.plist

<key>Font</key>
<dict>
<key>CharWidth</key>
<integer>13</integer>
<key>Path</key>
<string>WoB_Juan_13W.png</string>
<key>Type</key>
<string>Load</string>
</dict>

If you've been studying Cinema4D for 2 years then you will probably know it way more than me. So I guess we can look forward to seeing some nice animations in the future? ;)

Almost forget the CharWidth parameter in clover :blush:  , now I know the trick to make font..Thanks, blackosx.

I just spent my spare time learning Cinema4d, which is not my major. Now I am at home and probably I will create some animation clover themes next semester which is the final term in my college. :D

Link to comment
Share on other sites
  • 3 weeks later...
CosmosCJ
CosmosCJ
Posted
Posted

Haha, got a new clover theme here, Universe. This theme is based on Universe stuff to create. Have no time to do the animation stuff and fonts, because I am going to make preparations for job hunting, wish me luck ! And i add it to ‘Theme database’, too. Hope you guys love it. By the way, @blackosx, can i ask for my clover theme to be bundled in installer? :blush: 2yn2xsp.png

 

2ibdt75.png

  • Like 7
Link to comment
Share on other sites
blackosx
blackosx
Posted
Posted

Haha, got a new clover theme here, Universe. This theme is based on Universe stuff to create. Have no time to do the animation stuff and fonts, because I am going to make preparations for job hunting, wish me luck ! And i add it to ‘Theme database’, too. Hope you guys love it. By the way, @blackosx, can i ask for my clover theme to be bundled in installer? :blush:

 

Nice job with the os icons CosmosDJ and those popular background images are always stunning. Shame you haven't had time to work on any animations, fonts etc.  but the overall impression is striking.

 

It's not my call to add themes to the package installer as it's up to Slice to decide. But in my opinion the theme should be optimised to keep the file size down. Here's a reduced version at 1.2MB, down from 2.7MB. Can you check it to make sure you're happy with it?

 

Universe_Optimised.zip

 

Good luck with the job hunting :)

My themes is now animed  :D  :thumbsup_anim:

 

Welcome to the world of animation! I know it's not easy and takes time to build a set of files.

I'll have a look when I get some time. :)

  • Like 1
Link to comment
Share on other sites
CosmosCJ
CosmosCJ
Posted
Posted

Nice job with the os icons CosmosDJ and those popular background images are always stunning. Shame you haven't had time to work on any animations, fonts etc.  but the overall impression is striking.

 

It's not my call to add themes to the package installer as it's up to Slice to decide. But in my opinion the theme should be optimised to keep the file size down. Here's a reduced version at 1.2MB, down from 2.7MB. Can you check it to make sure you're happy with it?

 

attachicon.gifUniverse_Optimised.zip

 

Good luck with the job hunting :)

 

Welcome to the world of animation! I know it's not easy and takes time to build a set of files.

I'll have a look when I get some time. :)

wow, that's impressive ! Can you show me how to do the compression? how can you keep that so small?I use xcode icons composser to convert png which is png24 and saved from Photoshop  to icons, which is rather big... :)

By the way，Is every os icons can be animated? Only those mentioned in clover wiki design can be animated ?

My themes is now animed  :D  :thumbsup_anim:

 

 

screen19.png

Pretty good theme!Shame I don't have time to do the animation, and keep going.

Link to comment
Share on other sites
blackosx
blackosx
Posted
Posted

wow, that's impressive ! Can you show me how to do the compression? how can you keep that so small?I use xcode icons composser to convert png which is png24 and saved from Photoshop  to icons, which is rather big... :)

 

See here for info, and also a script to help achieve it.

http://www.projectosx.com/forum/index.php?showtopic=3166

 

But essentially, no longer use .icns files but instead PNG with .icns file extension.

The PNG files then get compressed to 8-bit PNG's whilst retaining alpha mask. For most icons, you will not notice a difference in quality.

 

The background file was resaved manually from Photoshop using the Save for Web option and selection PNG-8, 256 colours and noise dither, rather than using the script.

 

By the way，Is every os icons can be animated? Only those mentioned in clover wiki design can be animated ?

 

The OS icons cannot currently be animated. They could originally but not now. I have asked about this at ProjectOSX but nobody has confirmed. So for now, all the files that can be animated can be seen in the Shield theme.

Link to comment
Share on other sites
CosmosCJ
CosmosCJ
Posted
Posted

See here for info, and also a script to help achieve it.

http://www.projectosx.com/forum/index.php?showtopic=3166

 

But essentially, no longer use .icns files but instead PNG with .icns file extension.

The PNG files then get compressed to 8-bit PNG's whilst retaining alpha mask. For most icons, you will not notice a difference in quality.

 

The background file was resaved manually from Photoshop using the Save for Web option and selection PNG-8, 256 colours and noise dither, rather than using the script.

 

 

 

The OS icons cannot currently be animated. They could originally but not now. I have asked about this at ProjectOSX but nobody has confirmed. So for now, all the files that can be animated can be seen in the Shield theme.

Oh, I see. You mean we can change the png extension to icns extension in order to keep small size?

If the OS icons can be animated, that will be much more funny.

Link to comment
Share on other sites
  • 2 weeks later...
 Share
Go to topic listing
×
×
  • Create New...