Hi, the site’s been hammered lately with hotlinking and comment spam. I’m trying to clean it up but we might exceed our bandwidth for the month, which might blank out the site. I’m doing my best, but just a quick note to let you know.
Maybe I can get Diana to update in the meantime as well. =)
I’d like to thank everyone for their submissions to the User Image Request. We received 67 submissions. Along with the images we already had and those from the User Pictures Project, this gave us a total of 223 images from which to choose. Needless to say, it was difficult to narrow these down to 24 default images, but here they are.
Keep in mind that these are only the defaults. All 223 images will be packaged along with the release, but they can be found now at: set of 24 and extras. I would encourage everyone to explore the others and find the one that works best for him/her. In addition, I hope that these will serve as inspiration for other submissions in the future. Thanks again to everyone for participating in this project.
Contributors:
Ben Arnold
John Baer
Kay Bergemann
Thomas Canniot
Diana Fong
Mark Gaiser
Steven Garrity
Dimitris Glezos
Mike Langlie
Jim Lawrence
Garrett LeSage
John W. Lockhart
Maren Lockhart
Jiri Jakub Masek
Andreas Nilsson
Jef Spaleta
Jakub Steiner
If I have missed anyone, I apologize. All the submissions and their contributor information can be found at GNOME-look.org (Content:Clipart, Name: UserImage - [name of submission]) and User Picture Project. All images are licensed as GPL. The above DHTML image display is courtesy of Joe Tan’s Flickr DHTML Badge
The user submissions, which were originally to be uploaded to OpenClipArt, are now being relocated to GNOME-look.org. Please note the change in location and upload information. I’ve updated my previous post with the relevant information, so please reread and resubmit. If you’ve emailed me directly, then I’ll just repost your submission. My apologies for any inconvenience and thank you again for your patience and participation.
Highlighted change includes:
License: The license no longer needs to be Public Domain, but for consistency please select GPL so that it may be used by open source distros.
Upload info:
1) Include ‘UserImage -’ in the name of your submission, so that it will be easier to identify when I collect the images.
2) select “Clipart” for the ‘Type’ field
3) select “GPL” for the ‘License’
4) GNOME-look allows for multiple uploads in an entry, so upload your original large square version AND a 96×96 version.
As I described in the previous post, the face-browsing login will be included in Fedora 7, and a good set of User Images will add polish to the login experience. It is obvious that some of the existing User Images (located at /user/share/pixmaps/faces) would benefit from an update. Thus, if you are interested in submitting images, or suggestions of what you would like to see, for one of the 24 default images, please contribute by:
- posting as a comment,
- (preferably) posting your submission(s) to GNOME-Look.org and
file under Type: ‘Clipart’
entry name include ‘UserImage -’ in the title
select License: ‘GPL’.
If you’re new to GNOME-Look, here’s how to upload.
- emailing me directly at dfong@redhat.com and I will upload to GNOME-Look for you.
ALL submitted images WILL have a home unless it has inappropriate content. While it seems like 24 is a good amount for the default set to choose from, there could be far more great pictures created as a result of this submission request. All images, even the ones replaced from the current set will be packaged and included to provide more choices to Users. In addition, the bigger goal is to create an online repository of User Images for viewing and downloading. Therefore, after the deadline, all images, including that of the User Pictures Project, will be pushed upstream to GNOME so that they can benefit an even wider audience.
Deadline for submissions will be March 15 to make it in time for Fedora 7 Feature Freeze. After that, on March 16th, the 24 default images will be determined by myself and Visual Designers from Red Hat and from other distros. The decisions will be based on the following criterion:
1) Visual Quality: Very simply, is it a good image for its intended use?
2) Resize Quality: It is important to remember that the selected User Images will appear in other related places such as the panel menu. Thus, how good it looks at various sizes will also be taken into consideration.
3) Contrast and Color: Keep in mind that images with higher contrast will have better definition when resized.
4) Appeal: How popular might this image be? Is it interesting to users?
5) Uniqueness: How unique is your image? Unfortunately, if most of the submissions are flowers, your flower submission will have a lower chance of being selected. At most one or two flower images will be selected for the set. However, do not take this to mean that you should submit something totally obscure because that will not appeal to most users and so would hurt the chances of it being part of the default set as well.
In general, the existing 24 images set the bar if you will, and submissions should be an improvement on these.
Specifications:
Sizes: Please submit TWO (2) versions, one square image in the largest size you can, and the other at 96×96. 96×96 matches the size of the existing images, but the images will be resized via code to fit the various use conditions. So you should test that the image will also work at the smaller sizes of 48×48 and 24×24. In addition, post Fedora 7 releases will aim for a login that looks more like this, where the image size will be much larger. Thus submitting a larger size will ensure that your image is available when that version of the login is implemented. If the image you submit is not large enough, then it may be that it will not work in the new design, and either you’ll be asked to redesign it, or a new image will replace yours. In addition, there are other use cases not covered here where larger images will be useful.
Format: .svg for vector submissions and .png or .jpg for all others. The image can include semitransparency.
License: For consistency please select Garrett LeSage has granted permission to use the images in the User Pictures Project. You can also take a look at the User Pictures Project Write-Up for additional context and ideas.
Here is my own example of generating a User Image based on a photo:
My brother recently gave me this rubber duck and I’ve wanted to use it as my User Image ever since I learned about the face-browsing option.
Starting out with various shots of the rubber duck, I choose one which:
1. Shows that it is a rubber duck. Due to its unique color and features, it is even more important for me to pick the right shot to show that it is a rubber duck. Therefore, images 1 and 4 can be eliminated.
2. Will resize well. Can I and others still tell it’s a rubber duck at the smaller sizes? Image 5 is eliminated.
With the remaining two, I will try a few different colored backgrounds and also resize them to see which works better.
So here’s the 96×96 version which will be my submission, as well as my tests to make sure that it will work at the smaller sizes. Also, here’s my larger version (2211×2211) for use in the future gdm setup. This might even satisfy Bug 54404, but probably not. 
Directions to uploading your submission to GNOME-look.org:
1. Create an account.
2. Log in > click on ‘Add Content’ > upload the TWO (2) versions of your image (one large square original and one 96×96) and fill in the relevant information
Notice the following…
a) Include ‘UserImage -’ in the name of your submission, so that it will be easier to identify when I collect the images.
b) select “Clipart” for the ‘Type’ field
c) GNOME-look allows for multiple uploads in an entry, so upload your original large square version AND a 96×96 version.
d) select “GPL” for the ‘License’
This was even more simple than Open Clip Art. It should look like this when you’re done.
Thanks for reading. I’m looking forward to some creative User Images.
Since the inclusion of Face-Browsing in Login was new, specifications on how it should function and look were not yet established. Using the initially available information from Ubuntu’s FaceBrowserLogin wiki, I wrote up a very general specification as part of the ReleaseGraphics wiki and created my first Gnome Display Manager (GDM) mockups.
While these designs made many assumptions based on limited information, it provided a good starting point to get people interested and for developer David Zeuthen (davidz) to start thinking about its visual implementation. It is good at times like this to try and push the envelope but also to keep in mind the known restrictions. One must be flexible and adapt the design to accomodate technical feedback and offer creative solutions when implementation takes place.
The initial design received positive feedbacks via IRC, email, and comments to my previous post. Valuable suggestions were also made, such as David Nielson’s recommendation to incorporate the scrollbar as part of the mockup to illustrate how multiple users would be represented. As I was preparing to make modifications, davidz had already started work on implementations and informed me of additional technical specifications. For example, the User List area of the face-browsing version is a solid color, while other portions of the login area can be semi-transparent. Additionally, the line I had separating each User entry would require writing a dedicated GTK+ theme engine.
With a screenshot of these early implementation bits, I then integrated these comments into a modified mockup and visually determined the color of the scrollbar (#414E65), and the color of the selected User entry (base[select]= #274985 and base[active]= #234073). The login window itself was even changed to have a thinner outer border, and a fade from semitransparent to opaque on the dark gray area at davidz’s suggestion. This provided a smoother transition to the User List area which, as mentioned before, could not be semi-transparent as in the original design. I also had to coordinate with davidz in slicing and supplying the appropriate pieces of the login window to accomodate the code.
However, it is a give and take process. After davidz had implemented the login window, I had an idea of creating a slight reflection. This would echo one of the repeating visual elements since reflection is used with the Fedora Logo as well as during other points in this series. Additionally, it gives some extra sleek polish to the graphics. Not knowing the technical difficulty, I quickly created a mockup to propose this idea. This allowed me to demonstrate the visual value to davidz, so that he might be willing to put in the additional work it would take to make this modification.
I also changed the background. I had wanted it to be simpler. However, at smaller screen resolutions I found that most of the cloud was not actually visible.
Thus I explored yet another composition change for the background. I moved the balloons further to the left to lessen login window overlap on smaller screen resolutions. I also used a simplified version of the wallpaper horizon to support the reflection of the login box and also to provide a feeling of vastness and more visibility for the clouds.
The Voodoo That I Do (post 5) is a presentation of my vision for the Flying High theme concept proposed by John Baer back in December. My earlier posts, which showed my progress along the way, didn’t raise any objections to the visual style. Now, completing the whole set, I can provide a better sense of how the look carries through from installation to final desktop. There are still places for modifications and polish, but by presenting the set now, it gives the programmers a chance to think of how the final, polished graphics will look. Having them use these as placeholders will generate the technical feedback I need. The useable pieces from what was shown in post 5 can be adopted while those that still need work will be modified and fine tuned in the coming days.
Some constructive comments have already been posted, such as David Nielsen’s comment about taking into consideration the presence of a scroll-bar to accommodate more users in facebrowsing mode. I will wait a few more days to gather additional comments and considerations before making the next round of modifications. At the end of this time, I will compile and address these issues. Taking a break for a couple of days will also help me to view the artwork with fresh eyes and to reassess it for visual improvements. Meanwhile, I will resume work on the Echo Icons.
Now that I’ve settled on the colors, POV, and time of day that I want to use, I need to begin populating the graphics. As I mentioned before, I’m going to begin with the wallpaper, login, firstboot-left, and anaconda_header. The wallpaper is important because it will set the tone for the overall look and feel of the graphics. The firstboot and anaconda pieces are important because of the relative proportions. Thhe choices I made in my earlier evaluation phases may not work well with a tall, narrow or short, wide image. I need to make sure that I can create images that will match the choices I’ve made, yet still meet the proportions of these two graphics.
Once I’ve satisfied myself that all three images work well visually and thematically, it is time to fully populate the graphics set. I typically just proceed down the list described in ReleaseGraphics Wiki. Each piece poses its own unique challenges. The syslinux-splash uses 16 colors, and with 5 colors already reserved, the total flexible colors is only 11. In addition to 16 color limitation the GRUB requires lighter colors so as to allow the black selection bar to be visible. For each piece, I must meet the constraints described while still matching the theme. Since I have followed the design process, kept sight of my requirements and goals, and made good visual choices in each evaluation phase, I now have a complete graphics set that is both useful and aesthetically pleasing. I feel that it captures the spirit of the Flying High theme and meets the goals that I had set for myself.
The complete set, with full size images, can be viewed here.
Hopefully these posts have helped to give some insight into the process I use in creating graphics. As an artist, I should never be afraid to explore new ideas, but having a careful design process keeps my ideas focused on my goals. The various graphics software packages provide great creative potential, but without careful consideration of design requirements, its easy to get carried away. I find it important to stay on track and my process is what helps me to do that.
Next Step…
Graphics are then sent to the engineers. From here, there are typically 2 major causes for image modifications…technical and visual improvement. Upon passing on the images to their respective package maintainers, technical issues might arise requiring changes to the mockup. Designs are then reworked in collaboration with the various maintainers to achieve the best visual and functional product. In Fedora 7, the introduction of Face Browsing will require additional time and flexibility from the designer and programmer to determine the usability as well as the visual approach and set standards on which to build. Changes to mockups and images created thus far can also come from user feedback for visual improvement. During FC6, reports that the images were too dark when viewed on various monitors were extremely important. They determined the modifications that resulted in the the final version.
PHOTO CREDIT
The following is to acknowledge the people who generously allowed me to use their photographs in the creation of graphics for this release. GPL
Gabriel Fernandes (Brasil), Sunrise Panorama
Jean-Christophe Froidevaux, balloon
Lynne “Wolfie” Lancaster, Night Sky 1
Angela Sevin, Up up and away ( cc-by 2.0)
colinedwards99, Northampton Balloon festival 2006 (cc-by 2.0)
photo by: me & my Canon SD550
 |
1280 x 1024 1680 x 1050 mac 16:10 2048 x 1536* 2560 x 960** dual 2560 x 1240 dual *also for: 800×600, 1024×768, 1152×864, 1280×960, 1600×1200 |
Sketches are good for quickly trying out ideas. They have a faster generation/evaluation phase and so allowed me to explore many ideas in a short amount of time. Moving on to initial digital mock-up generation will tell me how well the layout ideas from the sketches translate within the confines of the screen proportions.
Each successive phase of generation and evaluation adds more and more detail while further focusing the final look and feel of the graphic. It is important that I narrow down the number of ideas in each phase, since I will need to invest more time and attention towards fine tuning the details of those that remain in the following phase.
These mock-ups explore the two different points of view (land…left/sky…right) and the three different times of day (night/dusk/dawn) that I had discussed previously.
The most obvious difference between the images is the changes in color between the three times of day. Not only is the sky different, but the color of the balloon also changes. For example, the flame, which is barely discernible in the dusk, is a warm glow in the dawn, and a bright beacon at night.
Another point to make is that the balloon colors do not work equally well for all times of the day. The balloon in the foreground of the sky mock-ups (right column) would probably need to be adjusted to create the best balance between it and the colors of the sky. In the dawn/sky image (bottom right), the balloon looks too bright, whereas it works better in the dusk (center right). In the night/sky picture (top right), I darkened the foreground balloon somewhat to compensate, but depending on the final choice, the colors will need to be changed.
In the evaluation of my sketches of the POV, there seemed to be more points in favor of the land POV. However, the digital mock-ups clearly illustrate the better visual effect of the sky scenes (right). All three create a sense of vastness and serenity. They really seem to capture the potential of the Flying High theme. This is why it is important to perform each design phase. The sketches are good for making a listing of the pros and cons, but only by creating a digital color version was I able to judge the relative weight of the various points. I also find it useful to actually set the image as my background so that I can get a more accurate feel for the visual effect. This allows me to check all of the elements of my design in context with its final use. Not only can I see the overall visual effect, but its important that I not forget about practical points such as whether the colors of my image conflict with those of the icons. Also, details from the image may be confusing parts of the desktop, such as the moon does in the night mock-ups.
Comparing the sky colors with the icons of the Bluecurve, Echo, and Tango sets will not only allow me to fine-tune the colors of the background but also serves as one of the factors in determining which time of day to select. While there is no strong adversity in any particular time of day, the brighter, warmer colors of dusk are not as ideal as the other two. When I set dusk as my wallpaper, the amount of brightness was particularly drastic when compared to the FC5 and 6 graphics. This would probably not be as smooth a transition as the other two choices, and so I will eliminate dusk from the running at this point. The stars in night may also be something to reconsider.
This iteration explored the 2 POVs and 3 times of days, and served as the initial crucial step to seeing whether the idea would translate from sketches on paper to color images on the screen. The ideas were narrowed to the Sky POV, and either Night or Dawn for time of day. Next, I’ll apply these choices to the three pieces of GDM login, anaconda_header, and firstboot-left to further test the feasibility of the design and I will continue to fine tune the results from this phase.
I’d like to describe my own approach to the FC7 theming, and in doing so, illustrate the design process I described in my earlier posts. I’ve already discussed my design goals and requirements, so I’ll move straight to concept generation.
Theme Concept Generation and Evaluation
In the first iteration, Theme ideas were generated, resulting in 7 concepts. Ideally, I wanted to narrow these down to 1 or 2 selected concepts which will serve as the basis for creating visual mock-ups.
As I discussed earlier, I settled on John Baer’s Flying High Theme which I chose for its sense of adventure, and the way it implied taking off and meeting new challenges, as well as for its visual potential. With these ideas in mind, I’m beginning the first round of visual concept generation to explore the chosen theme.
Visual Concept Generation and Evaluation
To explore my thoughts on concept implementation:
1. Shape of the object.
Having only seen a hot air balloon once or twice in my life, I’d like to first start off by looking at the overall shape of the hot-air balloon itself. What pieces and characteristics make up a hot air balloon? By understanding the object, I hope to better utilize its natural attributes in generating ideas as well as furthering the goals I had set previously.
Howstuffworks: How Hot Air Balloons Work, provides a great introduction to hot air balloons. In addition to a video of “How Hot Air Balloons Work,” information of the hot air balloon’s structure, photos depicting the various phases of inflation, and the balloon’s various components were very useful. Surprisingly, in my initial search, I also learned that hot air balloons come in a vast array of shapes…
A Fedora shaped balloon?…probably not.
I’d like to explore the shapes of the hot air balloon at various stages and the benefits of each one. Above are a few sketches of the general shape a hot air balloon takes on while being inflated. The overall form includes not only the distorted balloon, but also the angle at which the basket and balloon tilt or lay in relation to the ground. When being inflated the balloon provides an indication of motion and progress. It has brighter translucent colors that convey the lightness and quality of the material.
As depicted above, one interesting comination I found during my search is the combination of silhouette against the light fabric of an inflating balloon. I’d like to explore this possibility for a moment. The simplicity of the shapes and vibrancy of the colors would make for elegant graphics and a very usable wallpaper. The silhouette adds a “human factor” which till now has only existed in Ubuntu graphics. But should a person(s) be included? If so, should the person be male, female or a combination, and what should they be doing? Does the presence of the person(s) contribute anything to the design? Other than an interesting silhouette, or two, there’s not much added by the figure that justifies only utilizing the fabric of the balloon and not the whole of the balloon as well as its flight attribute. This combination could also resemble a possible Apple ad campaign. With these pros and cons, I’ll not further pursue this approach.
A fully inflated balloon can be examined from various angles, and at various times of the day. Changing the angle changes the shape of the object and changing the time of the day changes the colors. Which combination best supports the three goals I have for FC7? Clearly, various ideas can be explored through mockups.
2. Positioning of the subject
In addition, if the balloons were off in the distance, would their smaller size create confusion with the icons? Perhaps this issue could be solved through blurring or less vibrant colors? Again, these issues are explored in the mock-ups.
3. Point of View (POV)
Placing the subject on the right is all well and good, but what point of view should the scene take. Building on the exploration of the overall shape of the hot air balloon, described earlier, I now look at it’s relation to the environment. The nature of the subject requires it to exist in a large open area, including land from which to take off and sky in which to float. There could also be water over which it is floating, but I don’t think I’ll explore this possibility as the color of water may confuse that of the sky. In addition, land will offer a better way of incorporating more “natural colors” than water, and this is one of the goals I had set earlier for this task.
Working with land and sky, the scene can be viewed from two obvious positions. 1) Looking from a point in the air, somewhat at eye level, possibly as an observer from another balloon. 2) Looking as an observer located on the ground, at an upward angle. Point 1, comprised mostly of sky, clouds, and possible peeks of the ground, provides a more serene feeling of floating in the vastness of the open sky. It could also imply participation in the journey. Point 2, composed of more visible land mass, provides a more dynamic POV in terms of composition as well as a sense of process and taking flight. A view from the ground could also allow for the inclusion of a balloon in the process of being inflated. Looking up from below could imply a sense of awe, although it might also be intimidating. Both ideas should be explored further for visual value.
4. Color
This theme will involve some combination of landscape and skyscape, each with its appropriate colors. Changing the time of day will drastically alter the colors of the landscape as well as the relative color of the hot air balloon. This is an opportunity to incorporate more natural colors as previously stated in my goals.
I’d like to take a step back at this point and address what I understand to be natural colors and why I feel it is important enough to incorporate as a goal. Natural colors, descriptively termed, are simply colors found in nature…primarily that of the earth, sea, and sky. When most people think of natural colors, they think of beige, brown, tan, and other muted variants of saturated colors. But natural colors actually encompass a wide array of bright and lively colors as well. Note the vibrant colors of a sunrise/sunset, the red of a ripe tomato, and even the green of a well watered lawn.
But which colors should be used in this theme? Black, white, and blue, colors used in the FC6 graphics, are found in nature in various shades, but I feel that part of Fedora’s goals is to appeal to new users. To this end, it would be better to introduce a slight touch of warmer colors. These kinds of natural colors will bring a gentler, warmer, more welcoming feel to the more sterile blue and white. However, I don’t want to move too far in this direction, but merely use color to add a friendly feel, much as FC5 used playful shapes to the same end. I’d like to add some warmth while still keeping a primarily blue background, thus maintaining the color we’ve come to accociate with Fedora. By adding small touches, I hope to appeal to new users without shocking current users with a drastic change.
Since the sky will account for a large portion (potentially 2/3) of the image, I’d like to now look at the different colors that may be used to form the backdrop for the hot air balloons. This is how I view the color breakdown of the various times of the day.
“Night” would clearly continue the darker look and feel of FC6 but leaves little opportunity for more natural colors. However, the colors of the balloon, and the rendering of the flames could provide the color I’m looking for, so it’s worth exploring. On the other end of the spectrum, “noon” would provide plenty of opportunity for vibrant natural colors, but little room for the darker colors. It seems that choosing the middle ground of dawn or dusk will allow for more blue while introducing warmer colors to the piece.
I mentioned earlier the vibrant, light colors of an inflating hot air balloon. In comparison, an inflated balloon in flight, has a less transparent look and more solid colors. As shown in the photos above, an inflated balloon against a strong light source would yield a very dark, almost black, shape. In a night setting, the balloon takes on a different kind of brightness.
With these considerations in mind I am ready to move from paper sketches to digital mockups. I have three potential times of the day (night, dusk, and dawn), some rough positioning, and my other considerations as described above. In my experience, Wallpaper (and by association GDM login), anaconda_header, and firstboot-left, in that order, are the best places to start when exploring the feasibility of a design. However, given the nature of the theme, and the path of my design idea, the limited palette of the syslinux-splash and GRUB might prove to be a challenge. I will need to keep in mind a design that can be simplified to carry a consistent look with limited colors.
