An Infosources site

A review of Pixelsight
Go to Pixelsight



An interactive web site where a person can design and create icons for her web page sounds too good to be true, but it is available to anyone with enough time and patience to give it a try.

I created the graphical text at the top and bottom of this page, the button at the bottom, titles and buttons on this site, and the titles I have used in my personal web pages interactively on the Web, at Pixelsight. To see the evolution of these titles, visit this page

It is a most compelling site, with bells and whistles for creating icons, titles, and buttons for web pages. The designs are limited only by your imagination and the software, which has been a project of Keith Ohlfs for about ten years.

Ohlfs, the designer of the graphical user interface ("gui") for the late, lamented NeXT computer, is still coming up with marvelous creations, and Pixelsight is one accessible to anyone who has access to the Web. Another of his recent projects has been the interface for WebTV.

A friend of mine who is a graphics expert says that several good software packages can approximate the titles and other graphics created at Pixelsight, but my response to him has been that I don't own the software, it wouldn't be nearly as much fun, and Pixelsight doesn't take up my valuable hard drive space.

For those who like to tinker and who fancy themselves artistically inclined, Pixelsight can provide an opportunity to express themselves in their graphics. From creating almost everything from simple 3D text to buttons or icons, Pixelsight is a versatile tool.

This is the official description of Pixelsight:

Pixelsight is an interactive tool for generating custom bitmap graphics for your web pages, or multimedia titles. Using the library of clip icons, textures, symbols, fonts, and backgrounds you can modify any image and tailor the results to your liking.

And here is the technology behind the scenes at Pixelsight:

The Pixelsight server runs on a NEXTSTEP based Pentium PC. The site combines a powerful server application that handles all the graphics creation, with CGI scripts. Distributed Objects are used to communicate between the CGI programs and the server. The server is programmed in Objective-C and NEXTSTEP.
The graphics effects are created using the Display Postscript that comes native with NEXTSTEP. The images are rendered in full 24 bit color, with 8 bits - 256 levels of transparency.
The original graphic images were rendered in Pixelist, a custom image editing application. The symbols were rendered in Adobe Illustrator or generated from dingbat fonts. The suite of effects available within Pixelsite will grow over time. The resulting full-color images are converting to transparent GIFs for your convenience.

First you get the good news. I will lead you by the hand through the first steps in creating a 3D title for your web page. Although I use MSIE3.0 almost exclusively, I find that Netscape works better for me at Pixelsight. Your results might be different from mine, because of the ways our systems are set up.

  1. Either open a new browser window or copy this list for reference.
  2. Go to Pixelsight by clicking on the graphic at the top of the page.
  3. Let the first page load, watch the gears turn, and then press the rock labeled "Register."
  4. Fill in all the blanks, tell Keith that I sent you, and submit the form.
  5. After you have done this, look for more rocks near the bottom of the page, and select "Manglers."
  6. Read this page carefully. You might want to bookmark it for reference.
  7. Near the middle of the page, in the text, you will find what appears to be a sack, labeled "examples." Click on it.
  8. You will go to a screen with several labeled tabs on it. Choose the one labeled "Text."
  9. Click on the image "Inset text."
  10. Enter your login ID and your password and proceed to the next page.
  11. Read and select the options presented. The red + signs indicate that help is available for that topic, but not all of the help topics have been completed yet.
  12. Option number 6 (six) is very important. To keep your graphic looking its best by giving it a transparent background, click on the solid patch of grey so that you can choose your background color.
  13. You will be transported to the color picker, where you enter the hex code for your background. Mine is "#fffae6". It seems that you must use lower-case letters for the code.
  14. Under the form for the hex code you will find a button labeled "Apply." Press this button.
  15. Near the center of the page a block the color of your background should appear. If it does, click on the button labeled "Done!" If it doesn't, return to entering your hex code and make certain that it is right, especially that you have any zeroes and the letter "O" entered correctly. Then follow the steps again.
  16. After clicking "Done!", you will return to the page you were on in step 11, but instead of a grey rectangle for a background, you will find one of your background color.
  17. Now for the fun! Across the top of your browser window is a row of icons. Select the first one by clicking on it, to go to the Text Mangler.
  18. In the form box, type in the text you choose.
  19. Underneath that box, type in the size font you wish to use.
  20. The next step is to select a font which will go with the tone of your page and with the message you hope to convey. Click on the word "Mega" on the right side of your browser window to select the font.
  21. The Mega Font Picker takes awhile to load, so be patient. Select your font by clicking on it.
  22. You will be transported back to the text mangler page, where you can see the results of your labors. If you like it, you may quit at this point, after saving the image to your hard drive.
  23. If you are like me, though, that isn't enough. Let's add color by clicking on the second icon in the top row, the one with the letter "T" and a paintbrush.
  24. On this page, change only one thing, the color of your image. Do this by clicking on the patch under the numeral "2." Go through the procedure as you did in steps 13 through 15.
  25. Now, let's add a 3D effect. Select the third icon at the top of the page do this.
  26. Leave the defaults alone until you get to step 5, and check the box which says "Show a shadow." You may play with the direction of the shadow if you wish.
  27. At the top of the page, select the icon on the far right, the Mangler.
  28. Depending on how much traffic is at Pixelsight at the time, you will have your graphic soon. Don't lose heart when you see it...it does not look its best on the grey background upon which it first appears. Quick! Click on your graphic!
  29. Here it is, in all its radiant glory, on your background color. Give yourself a pat on the back and copy it to your hard drive!
Whoopee!

Now for the bad news. Pixelsight can hardly be called "intuitive," even for the fairly seasoned user. It is an extremely busy site, so be prepared for frustrations and long waits. Because Ohlfs does this as a hobby and apparently tweaks the site during his spare time, you might find that you are unable to access Pixelsight when it would be easiest for you to do so. My suggestion is to try again, usually in the wee hours of the morning. Being an insomniac is a definite advantage here.

This review of Pixelsight was written November 21, 1996, and revised November 22, 1996, by Sally Wallace, for SVU 821, Infosources study group. Pixelsight is not working, as of July1, 1997, but will be back online soon as a subscription-based service. Check back here for updates! The steps are not quite the same at the new place. To create text without a button, you first choose an example button with text to edit. Then find the menu for "more" to get the Advanced Editor sidebar on the left which has three little toggle on/off buttons under the Renderer near the top. Toggle the third one on the right to have text without a button.

Go to INFOSOURCES GROUP homepage


This page hosted by Geocities logo Get your own Free Home Page