Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

How To Theme Fedora


Published on

Published in: Self Improvement
  • Be the first to comment

How To Theme Fedora

  1. 1. How to Theme Fedora <ul><ul><li>Máirín Duffy </li></ul></ul><ul><ul><li>Interaction Designer, Red Hat, Inc. </li></ul></ul><ul><ul><li><> </li></ul></ul>
  2. 2. What We'll Talk About <ul><li>Which parts of Fedora are themeable? </li></ul><ul><ul><li>(GNOME-focused, sorry!) </li></ul></ul><ul><li>What are good design principles and approaches to follow in creating a overall theme and each component? </li></ul><ul><li>What tools are involved? </li></ul><ul><li>What file formats, file locations, and package names are involved in applying new artwork? </li></ul><ul><li>Where to seek help? </li></ul>
  3. 3. Why Theme Fedora? <ul><li>Help define 'upstream' Fedora's look! </li></ul><ul><li>Create a unique look for your Fedora spin. </li></ul><ul><li>Rebrand a non-Fedora derivative distro. </li></ul><ul><li>Bling up and personalize your system. </li></ul>
  4. 4. General Design Principles <ul><li>Consider having a common thematic thread to unify the graphics (start => finish) </li></ul><ul><li>Put more care into the design of those graphics which will be seen most often </li></ul><ul><li>Accommodate as many screen resolutions and aspect ratios as possible (including dual) </li></ul><ul><li>Don't distract or disrupt your audience. </li></ul><ul><li>Consider space for translated text. </li></ul><ul><li>Get feedback early and often! </li></ul>
  5. 5. More Tips <ul><li>Try not to consume too much disk space with graphics files </li></ul><ul><li>Make the licensing of your graphics clear and the source artwork available. </li></ul><ul><li>Test the graphics! Use them yourself over time. </li></ul><ul><li>If you have a great idea that doesn't seem implementable – suggest it! Let folks know! </li></ul><ul><li>Try remixing already available themes (,, etc.) </li></ul>
  6. 6. What's Typically Themed? <ul><li>Install-time graphics boot media splash, installer, first boot configuration </li></ul><ul><li>Boot-up graphics kernel/os selection menu, graphical boot, login screen, desktop splash </li></ul><ul><li>Ubiquitous graphics wallpaper, icons, window manager, widgets, cursors, screensaver dialog </li></ul>
  7. 7. Install-time graphics
  8. 8. Boot Media Splash
  9. 10. Boot Media Splash <ul><li>Seen when booting from Fedora media. </li></ul><ul><li>File format: PNG or JPG </li></ul><ul><li>Package: fedora-logos, anaconda/syslinux-vesa-splash.jpg </li></ul><ul><li>File path: /isolinux/splash.jpg </li></ul><ul><li>Specification: 16-bit color per channel, 640x480, 65,536-color image. (This is a real weird one!) </li></ul><ul><li>Workflow: Inkscape > Gimp > ImageMagick </li></ul>
  10. 11. Boot Media Splash <ul><li>How to test: </li></ul><ul><ul><li>Create a boot cd or usb stick and put the image in the isolinux directory of the cd as 'splash.jpg', boot it up </li></ul></ul>
  11. 12. Installer
  12. 14. Installer Banner <ul><li>Seen throughout the install process. </li></ul><ul><li>File format: PNG </li></ul><ul><li>Package: fedora-logos, anaconda/anaconda_header.png </li></ul><ul><li>File path: /usr/share/anaconda/pixmaps/anaconda_header.png </li></ul><ul><li>Specification: 800x88px full-color + alpha PNG </li></ul><ul><li>Workflow: Inkscape > Gimp </li></ul>
  13. 15. Installer Splash <ul><li>Seen at the beginning and installation phases of install process. </li></ul><ul><li>File format: PNG </li></ul><ul><li>Package: fedora-logos; anaconda/splash.png & anaconda/progress_first.png, anaconda/progress_first-lowres.png </li></ul><ul><li>File path: /usr/share/anaconda/pixmaps/* </li></ul><ul><li>Specification: 500x325px / 320x225px full-color + alpha PNG </li></ul><ul><li>Workflow: Inkscape > Gimp </li></ul>
  14. 16. Installer <ul><li>How to test: </li></ul><ul><ul><li>Pop into #anaconda on and ask for help – it can be involved. </li></ul></ul><ul><li>How to take screenshots: </li></ul><ul><ul><li>Press Shift+PrtSc or PrtSc </li></ul></ul><ul><ul><li>Shots wll be saved to /tmp/ramfs/anaconda-screenshots </li></ul></ul><ul><li>Tip: </li></ul><ul><ul><li>Other anaconda graphics to consider: about-to-install.png, done.png; icons: upgrade.png, install.png </li></ul></ul>
  15. 17. Firstboot
  16. 19. Firstboot Banner <ul><li>Seen throughout the first boot process. </li></ul><ul><li>File format: PNG </li></ul><ul><li>Package: fedora-logos, firstboot/firstboot-left.png </li></ul><ul><li>File path: /usr/share/firstboot/pixmaps/firstboot-left.png </li></ul><ul><li>Specification: 160x600px full-color + alpha PNG </li></ul><ul><li>Workflow: Inkscape > Gimp </li></ul>
  17. 20. Firstboot Splash <ul><li>Seen at the beginning of the first boot process. </li></ul><ul><li>File format: PNG </li></ul><ul><li>Package: fedora-logos, firstboot/splash-small.png </li></ul><ul><li>File path: /usr/share/firstboot/pixmaps/splash-small.png </li></ul><ul><li>Specification: variable size... but you'll probably want to keep it under 500x325px. full-color + alpha PNG file. </li></ul><ul><li>Workflow: Inkscape > Gimp </li></ul>
  18. 21. First Boot <ul><li>How to test: </li></ul><ul><ul><li>Run '/usr/sbin/firstboot –debug' as root (make sure firstboot's gui is installed!) </li></ul></ul><ul><li>How to take screenshots: </li></ul><ul><ul><li>Press Shift+PrtSc or PrtSc </li></ul></ul><ul><ul><li>Shots wll be saved to /root/firstboot-screenshots </li></ul></ul><ul><li>Tip: </li></ul><ul><ul><li>The icons displayed for each screen in firstboot are in the same directory as the banner and splash. </li></ul></ul>
  19. 22. Boot-up graphics
  20. 23. OS Selection Menu
  21. 25. OS Selection Menu <ul><li>Shown after BIOS when a system is booted. </li></ul><ul><li>File format: xpm.gz </li></ul><ul><li>Package: fedora-logos, bootloader/grub-splash.xpm.gz </li></ul><ul><li>File path: /boot/grub/splash.xpm.gz </li></ul><ul><li>Specification: 640x480px PNG file with 16-color indexed palette. 2 of the 16 colors are required, so you've got only 14 to play with. The required colors (and slot #s in the color map) are: 0 = #000000 (black), 1 = #ffffff (white)) </li></ul><ul><li>Workflow: Inkscape > Gimp </li></ul>
  22. 26. OS Selection Menu <ul><li>How to test: </li></ul><ul><ul><li>Create xpm.gz using Gimp </li></ul></ul><ul><ul><li>Replace ' /boot/grub/splash.xpm.gz ' on your system with new artwork </li></ul></ul><ul><ul><li>Reboot! </li></ul></ul><ul><li>How to take screenshots: </li></ul><ul><ul><li>The easiest way is to run a virtualized copy of Fedora with your artwork replaced in it, and then take a screenshot of the VM window. </li></ul></ul>
  23. 27. Graphical Boot
  24. 29. Graphical Boot Graphic <ul><li>Shown in the center while system starts up. </li></ul><ul><li>File format: PNG </li></ul><ul><li>Package: fedora-logos, /usr/share/rhgb/main-logo.png </li></ul><ul><li>File path: /usr/share/rhgb/main-logo.png </li></ul><ul><li>Specification: variable, might want to keep it within 500x350px, full-color + alpha PNG file. </li></ul><ul><li>Workflow: Inkscape > Gimp </li></ul>
  25. 30. Graphical Boot Colors These colors are compiled into RHGB's code! :(
  26. 31. Graphical Boot <ul><li>How to test: </li></ul><ul><ul><li>Type 'rhgb -u $DISPLAY -i', then press Ctrl + Alt + D (Press Ctrl + Alt + D to get out of debug mode) </li></ul></ul><ul><li>How to take screenshots: </li></ul><ul><ul><li>Go into debug mode and take a screenshot. </li></ul></ul><ul><li>Tips: </li></ul><ul><ul><li>Other graphic possibilities exist: progress.png and system-logo.png </li></ul></ul>
  27. 32. Login Screen
  28. 33. Login Screen
  29. 34. Login Screen <ul><li>Login screen. </li></ul><ul><li>File format: XML </li></ul><ul><li>Package: fedorainfinity-gdm-theme </li></ul><ul><li>File paths: </li></ul><ul><ul><li>/usr/share/gdm/themes/$NAME/$NAME.xml </li></ul></ul><ul><ul><li>/usr/share/gdm/themes/$NAME/GdmGreeterTheme.desktop </li></ul></ul><ul><li>Specification: See GDM Manual </li></ul><ul><li>Workflow: Inkscape, Gimp, text editor </li></ul>
  30. 35. Login Screen <ul><li>How to test: </li></ul><ul><ul><li>'export DOING_GDM_DEVELOPMENT = 1' </li></ul></ul><ul><ul><li>'Xnest -ac -geometry 1680x525 :123 &' </li></ul></ul><ul><ul><li>'DISPLAY=:123 /usr/bin/gdmgreeter' </li></ul></ul><ul><li>Tips: </li></ul><ul><ul><li>Consider using a theme from or as a basis. </li></ul></ul><ul><ul><li>Doesn't have to have face browser. </li></ul></ul><ul><ul><li>There is a lot of 'hidden' text you need – incorrect password, pam message, caps lock warning ... </li></ul></ul>
  31. 36. Desktop Splash
  32. 38. Desktop Splash <ul><li>Shown in the center during login process. </li></ul><ul><li>File format: PNG </li></ul><ul><li>Package: fedora-logos </li></ul><ul><li>File path: /usr/share/pixmaps/splash/gnome-splash.png (GNOME) </li></ul><ul><li>Specification: variable, might want to keep it around 500x420px, full-color + alpha PNG file. </li></ul><ul><li>Workflow: Inkscape > Gimp </li></ul>
  33. 39. Ubiquitous Graphics
  34. 40. Wallpaper
  35. 42. Basic Wallpaper <ul><li>Color is very important: </li></ul><ul><ul><li>Symbolically: Any time you use a color other than blue BE PREPARED TO JUSTIFY IT! :) </li></ul></ul><ul><ul><li>Usability: too bright and you'll hurt people's eyes. Too dark and you will depress them. </li></ul></ul><ul><li>Avoid wallpaper artwork that will interfere with icon visibility – or look clickable. </li></ul><ul><li>Depth is good. Simplicity is good. </li></ul><ul><li>Have three basic sizes: Regular screen ratio, widescreen ratio, dual screen ratio. </li></ul>
  36. 43. Basic Wallpaper <ul><li>File format: PNG </li></ul><ul><li>Package: desktop-backgrounds-basic </li></ul><ul><li>File path: /usr/share/backgrounds/$NAME/$NAME.png </li></ul><ul><li>Specification: </li></ul><ul><ul><li>Normal: 1600x1200 </li></ul></ul><ul><ul><li>Wide: 2560 x 1600 </li></ul></ul><ul><ul><li>Dual: 5200 x 3200 </li></ul></ul>
  37. 44. Wallpaper Set <ul><li>A set of wallpapers shown in the background chooser. </li></ul><ul><li>File format: XML </li></ul><ul><li>Package: desktop-backgrounds-basic </li></ul><ul><li>File path: /usr/share/gnome-background-properties/desktop-backgrounds-$NAME.xml (default set is named desktop-backgrounds-basic.xml) </li></ul><ul><li>Specification: Uses the gnome wallpaper format, see /usr/share/gnome-background-properties for examples. </li></ul>
  38. 45. Animated Wallpaper <ul><li>The animation is not noticeable – it is very gradual over time. If it moves too quickly it's distracting and wastes CPU. </li></ul><ul><li>Can use to bring natural things to the desktop – movement of the sun and moon, growth cycle of plants, emotions of a character </li></ul><ul><li>Be extra careful to watch your disk space usage! </li></ul>
  39. 46. Animated Wallpaper <ul><li>File format: XML </li></ul><ul><li>Package: desktop-backgrounds-basic </li></ul><ul><li>File path: /usr/share/backgrounds/$NAME/$NAME.xml </li></ul><ul><li>Specification: Uses XML format to reference image files and specify transitions and timing. Please refer to /usr/share/backgrounds/infinity/infinity.xml for a commented example of the format. </li></ul>
  40. 47. Icons
  41. 48. Icon Theme <ul><li>File format: .theme (ini-style file) </li></ul><ul><li>Package: desktop-backgrounds-basic </li></ul><ul><li>File path: /usr/share/icons/$NAME/index.theme </li></ul><ul><li>Specification: </li></ul><ul><li>Tip: You can modify the icons used by specific applications by modifying their .desktop files in /usr/share/applications. See: </li></ul>
  42. 49. Window Manager
  43. 50. Window Manager <ul><li>File format: XML </li></ul><ul><li>Package: nodoka-theme-gnome </li></ul><ul><li>File path: /usr/share/themes/$NAME/metacity-1/metacity-theme-1.xml </li></ul><ul><li>Specification: </li></ul><ul><ul><li> </li></ul></ul>
  44. 51. Widgets
  45. 52. Widgets <ul><li>File format: gtkrc </li></ul><ul><li>Package: nodoka-theme-gnome </li></ul><ul><li>File path: /usr/share/themes/$NAME/gtk-2.0/gtkrc </li></ul><ul><li>Tools: the widget factory is a great tool for developing and testing GTK themes. (yum install thewidgetfactory) </li></ul><ul><li>Specification: </li></ul>
  46. 53. Cursors
  47. 54. Cursors <ul><li>File format: X cursor format. </li></ul><ul><li>Package: redhat-artwork </li></ul><ul><li>File path: /usr/share/icons/Bluecurve/cursors </li></ul><ul><li>Specification: Generate PNGs for each cursor and use xcursorgen to create cursors. See:!!!?content=11428 </li></ul>
  48. 55. Screensaver Dialog
  49. 56. Screensaver Dialog <ul><li>File format: XML </li></ul><ul><li>Package: fedora-logos </li></ul><ul><li>File path: /usr/share/gnome-screensaver/lock-dialog-system.png (image), /usr/share/gnome-screensaver/lock-dialog-system.gtk (colors / style) </li></ul><ul><li>Specification: No real restrictions on image size but you'll want it to be big enough to hold login information. Use the gtkrc format to modify colors of the widgets in the dialog. </li></ul>
  50. 57. Resources
  51. 58. Where To Go For Help <ul><li>The Fedora Art list: </li></ul><ul><ul><li>[email_address] </li></ul></ul><ul><li>Fedora Art Team IRC: </li></ul><ul><ul><li>#fedora-art on </li></ul></ul>