create an elegant Desktop with low resources

[MU]

full size: http://dotpups.de/dotpups/Internet/MU-t ... egant2.jpg


Puppys Desktop has a concept: "form follows function"

I think it looks a bit "rough". It is a real workhorse, small and fast, but how can we modify it to look more elegant?

Lets start with the background.
As the windowmanager JWM does not support pixmap-themes, that would allow to create round borders, it looks a bit "blocky".

To reduce this effect a bit, I chose a background with 3 "stripes", black on top and at bottom, blue in the middle.
The area in the middle attracts the eye, so that it will pay less attention to the window-borders.

http://dotpups.de/pics/backgrounds/sea3b.jpg

We also will need the black parts for an optical trick concerning the icons.

But the black looks somewhat "sad", so we will have to modify JWMs colors to some pastell colours.
Save this file as /root/.jwm/themes/jwm-elegant:

Code: Select all

<JWM>
	<!-- 
	TITLE:		Narnia
	AUTHOR:		thoughtjourney
	Created:	01/08/2005
	Version:	0.1.0
	Updates:	none: first release.
	JWM ver:	0.23.0
 Hacked BK Feb 2006 for JWM 1.4
	-->

	<!-- WINDOW BORDER PROPERTIES -->

	<BorderStyle>
               <Font>-adobe-helvetica-bold-r-*-*-14-*-*-*-*-*-*-*</Font>
               <Width>5</Width>
               <Height>20</Height>
               <Foreground>#000000</Foreground>
               <Background>#f3f3f3</Background>
               <ActiveForeground>#FFFFFF</ActiveForeground>
              <!--   <ActiveBackground>#4B82B4</ActiveBackground> -->

              <ActiveBackground>#9999ee</ActiveBackground>
        </BorderStyle>


	<!-- TRAY PROPERTIES -->

	<TrayStyle>
               <Font>-adobe-helvetica-bold-r-*-*-*-120-*-*-*-*-*-*</Font>
               <Foreground>#000000</Foreground>
               <Background>#f3f3f3</Background>
        </TrayStyle>

	<!-- PAGER PROPERTIES -->

        <PagerStyle>
               <Outline>#4b82b4</Outline>
               <Foreground>#aaaaaa</Foreground>
               <Background>#f3f3f3</Background>
               <ActiveForeground>#bbbbff</ActiveForeground>
               <ActiveBackground>#ddddff</ActiveBackground>
        </PagerStyle>

	<!-- SYSTEM LOAD MODULE PROPERTIES -->


	<!-- POPUP PROPERTIES -->

	<PopupStyle>
               <Font>-adobe-helvetica-medium-r-*-*-*-140-*-*-*-*-*-*</Font>
               <Outline>black</Outline>
               <Foreground>black</Foreground>
               <Background>lightyellow</Background>
        </PopupStyle>

	<!-- MENU PROPERTIES -->
   
        <MenuStyle>
               <Font>-adobe-helvetica-medium-r-*-*-*-140-*-*-*-*-*-*</Font>
               <Foreground>#000000</Foreground>
               <Background>#eeeeee</Background>
               <ActiveForeground>#FFFFFF</ActiveForeground>
               <ActiveBackground>#9999ee</ActiveBackground>
        </MenuStyle>

	<!-- BACKGROUND KEY BINDING -->

</JWM>

Now add a new line to /root/.jwm/themes/themeslist:

Code: Select all

jwm-elegant JWM_elegant

You now can select this theme in the control-panel -> JWM configuration.


Icons:
The desktop-icons are created using "rox-filer".
It uses 256 colours, what is the reason for "staircase"-like borders, if you use icons not optimized for it.



It is a very hard work, to modify icons to look good.
So we will use a trick.
Download a nice icontheme like exquisite, and extract it.
http://www.kde-look.org/content/show.php?content=14788

Open one from the 128x128 -folder in Gimp.
Create a new layer with black color, and move it in the background.
Reduce the size to 48x48 (linear), and save it under a new name.

Now click with the right mousebutton on a desktop-icon -> set icon.
Drag your new picture on the dialog that opens.
Now move your icon to the black top or bottom of our background-picture.
Ready is the perfect illusion:



I will try to create a script, that can convert all icons at once like this.
Mark

[Sage]

Would be nice if you could make it 'elegant' in the mathematical as well as artistic sense. How many bytes can you save?!

[MU]

Full size view:
http://dotpups.de/dotpups/Desktop-Tools ... rounds.jpg


I finished my "Icon-generator" now.
It has no grafical interface (yet), but is easy to use.

Imagine, you have two icons and combine them:

+ =

My script does it for complete folders, so you run it, and have dozends of new icons

Install this dotpup, it is 5 MB, because I already added many icons:
http://dotpups.de/dotpups/Desktop-Tools ... rounds.pup

Off course you can delete all folders you don't want.

Now to create own icons, edit:
/usr/local/Iconbackgrounds/iconborders.sh

There you can set the folder, with your icons:

Code: Select all

#########################
# these icons are used

iconsourcefolder=/usr/local/Iconbackgrounds/128x128/

Edit it to your needs, and run it:
cd /usr/local/Iconbackgrounds
./iconborders.sh

After 1 minute you have a new folder "output" with your new icons.
The script has comments, so that you easily can customize it with other backgrounds.

Mark

[MU]

these icons even look good without black background, though the round ones should be placed on very dark or very light areas.

Screenshot:



The backgroundpicture (83 kb):
http://dotpups.de/pics/backgrounds/NATU ... 24x768.jpg

Larger size:
http://art.gnome.org/backgrounds/nature/2069

Mark