When a die hard Photoshop user tries new things: Part 3 - Sumo Paint

Today after much aggravation from Shockwave Flash issues I was determined to finish what I started in Sumopaint. I had a good start in it yesterday when the Flash plugin quit on me. This has happened several times but interesting enough, only in the Sumopaint editor. No other editor that I was in killed my Flash. But then, it seems as though none of the other editors are as powerful or come anywhere close to matching up with Adobe Photoshop as Sumopaint did. (Note, its still NOT Photoshop!)

As an added test, I opened it up in Firefox and was able to continue my editing without any crashes or hiccups. It seems to save and respond to edits a lot quicker in Firefox than in Chrome - at least on a Mac. I'm not sure why I didn't think of this earlier. It probably would have saved me a lot of aggravation and Shockwave Flash crashes to my browser. (It crashed 6 times on me in Chrome and I still was not able to save the final version as a .jpg to my computer from Chrome. Thankfully, my trusty Firefox came through.)

I've been introduced to Sumopaint before at other workshops in school, so I've had the delight of playing with it before but its been a while since I've used it. It wasn't even one of my first picks, but I've read some really good reviews about this editor that I decided I should at least give it a shot. I know now, though, the next time I use it, to open it in Firefox and not Chrome.

Upon opening Sumopaint from the app, the interface and workspace area has a layout similar to Adobe Photoshop, toolbar with icons down the left side; color, swatches, and layers palettes down the right side, (That's right, I said layers!) and workspace in the middle. Just like in Photoshop, you can open an image to edit or you can create a new one. There is also a top menu much like the one in Photoshop, with File, Edit, Image, Select, Layer, Adjustments, Filters, View, and Help. (The Help menu is actually quite helpful with links to video tutorials in YouTube, information about the graphic editor, and a link to the Sumo Community which is like a forum with a gallery for "Sumopaint artists" to showcase their work. I even noticed a list of different themed contests in the Sumo Community board.

The icons in the toolbar on the left are much like the ones in Photoshop, or even Paint Shop Pro, for that matter, but are all laid out, nothing hidden under the icons that you have to go search for, like in PS. That being said, I noticed some of my favorite tools were missing, like the healing tool, dodge and burn, and the pen tool for drawing your own paths. There also does not appear to be a Red Eye Removal tool that many of the other free photo editors I used did have. (Fortunately, I did not need to fix red eyes in this photo. But I'm sure with all of the tools that were available to me, I would have been able to fix the red eyes by other means in Sumopaint should I have needed to.) Most of the tools had options and modes at the top for further fine tuning like in Photoshop. Also, some of the same keyboard short cuts I use in Photoshop worked in Sumopaint, such as using the alt key to select an area to clone from or for the color dropper selector tool while using the paint brush, and the cmd + i or d for invert or deselect on the selection tool. The one tool that did not have any available options on, which surprised me, was the cropping tool. Not even a "Constrain Proportions" check box. I would have thought with all of the flexibility and tools available in this editor that the cropping tool would have had standard image sizes or an option to constrain proportions. One thing that surprised me in a good way was the selection of brushes available. Much more than the usual round and round blurred brushes. (Incidentally, be prepared to switch tools when you first open up Sumopaint as the default opening tool is a 30 pixel dry brush set on black at 100% opacity.)

The clone tool brush took a little getting used to, but after redoing my edits on the image six times after its continuous crashes, I got a pretty good feel for using the tool. (I still like the clone brush in Photoshop MUCH better, but its good to know this editor has a clone tool.) The selection tools give you the type options of rectangle, round/elliptical, lasso (and polygon lasso), and magic wand with options for straight selection, added selection and subtract from selection modes. You also have the ability to change the border color (or even hide the border) and smooth the border. Right clicking the mouse or going up to the Selection Menu presented options to Expand, Contract, Feather, change the Border size, Inverse, and Deselect. Although plentiful in choices, Sumopaint's selection tools and advanced modes lack the Smart Radius and Edge Refinement capability found in Adobe Photoshop CS5 (and now CS6), as well as PS's Content Aware fill. However, in a lot of ways, Sumopaint reminds me of the Photoshop's early days, back to version 5. (I still remember my excitement to see how much the selection technology had advanced when version 7 came out.)

Sumopaint does have a limited assortment of filters like Photoshop's prepackage filters, but the free version of Sumopaint is limited even further with teasers left in the menu only to show you that its available in the pro version. (But at $19 for the Pro Plus version which allows you to install the editor on your own computer, its only a small teaser.)

I love the layers palette. Anyone who knows me knows I work in layers, lots of layers. (Always have multiple browser windows open with multiple upon multiple application windows open and running in the background, all the time. And the layers of paper stacks on my desk... well, that's another blog article!) I did not notice a mask layer ability, but there are layer blending options (I think they call them layer effects or fx, which is really what they are.) such as drop shadow, inner shadow, bevels, gradients, stroke, and overlay. And Sumopaint does have  the ability to Save in Layers, which is a BIG plus in my craft book! (.sumo extension which opens only in Sumopaint and does NOT save your layer style settings, like multiply, darken, lighten, overlay, screen, hard light, linear dodge, and invert. This I discovered in one of my many redos while opening the .sumo file.)

Although I did not use it in my image editing with this photo, I did take a look a the Text Tool and perused through the different fonts. I was pleasantly surprised to see that although it was a web based editor, it used the fonts I had installed in my computer in the font list. I was also pleased to see that there was the ability to rasterize and transform the text. (Although, it lacks Photoshop's robust vector processor as the  transformed text becomes pixelated and blurry very quickly. Yes, I took the liberty to play around with the Text Tool to see what it was capable of. :)

Other noticeable features missing included an HDR (High Dynamic Range) preset or filter, Photo Filter under Adjustments, Highlight/Shadows or Details adjustment options, and the ability to adjust the dpi (Dots Per Inch), or change from pixels to inches. I like being able to set photos I know I will be printing to 300 dpi and adjusting the image print out size in inches. One thing I did notice was that my resized image was automatically compressed to 72 dpi from the 300 dpi image that was uploaded. I wonder if the pro plus version when installed on the computer would allow you to adjust these settings.

All in all, not a bad little editor for a free version. It's quite powerful in its own right, as far as the free and inexpensive editors go. (Take a gander through the little intro videos on the Sumopaint home page to see some of its capabilities. Its quite inspiring, really.) However, like Photoshop, I do not recommend this editor for beginners. Its many, many options and tools (with icon images rather than text) can make it confusing for newbies. Below is the (reduced) image I edited in Sumopaint. (In Firefox. )

Pros:
An actual color palette with the ability to draw/select colors right from my photo, ability to create your own image from scratch, LOTS of drawing and shape tools, the layers palette and the ability to save in layers, a wide range of selection types and modes for fine tuning your selection (like selecting hair), blending options and layer effects, uses installed fonts from own computer in the Text Tool, nice assortment of preset gradients with the ability to adjust them and create new ones as needed, inexpensive pricing on pro versions ($9 for the Pro with extended tool and filter palettes, and $19 for the Pro Plus version with a desktop application and the ability to work offline)

Cons:
Can be confusing and difficult for beginners and newbies to photo editing, heavy Flash based interface does not like to cooperate with Google Chrome on Mac, missing the healing tool, pen/paths tool, dodge and burn tools, and content aware fill, cropping tool does not have any adjustment options or constrain proportions, does not have the ability to change the dpi or print measurement settings (inches or cm)

Are your pages search friendly?

A few days ago a colleague and I were having a discussion about web systems and teacher pages along with a certain nameless Content Management System (CMS) when she mentioned that it was just as easy to create a page in Publisher or Word. I chose to remain quiet about the whole thing and just let it slide deciding to put that debate for another time or another conversation. Now, I've known for some time that Publisher or Word, both being desktop print publishing software was not the best choice for web design. But having spent the better part of the summer redoing websites that have been done with one of these two programs, I can truly say that I now know exactly why they are not the best choice to use for web design.

Here in the Tona-Roberts household, we use Dreamweaver for our web pages, and while some may argue that may not be the best for web design, either, we have learned to keep it on a short leash. Most of our time in Dreamweaver is spent in code view, anyway. One of the things I like about Dreamweaver is its ability to help remind you of tags or finish filling them in for you, if you forget them. Another feature I like about Dreamweaver is its time saving ability to clean up code, rather than rewriting it from scratch, which some may argue might be the best thing to do, and best done in notepad. Dreamweaver has some different options for cleaning up bad html or code, such as one command that can clean up Word html. I've spent a lot of time using this command this week while stripping code for my resident webdev guru.

One of the things about Word or Publisher that makes it such a poor choice is the fact that its code is horrible redundant when it is not necessary. Word has this incredible knack for taking 20-30 lines of code and stretching it to 200+ lines of code which ends up stuff the file size more than it needs to be. For one thing, Word, or Publisher likes to put everything in tables when it doesn't need to be. Tables are for eating off of, or at the most, organizing your data on a spread sheet, not for layout and design. They only add to your file size. For example, I've taken pages that were 106kb and stripped the code down while maintaining the same look of the page so that the end result is about 25kb, or about a quarter of the file size.

But we are talking kilobytes, here. Where's the harm in that? Well, I'll tell you. Every time you go to a website, you are actually bringing the website to you. Your computer or your browser is downloading everything that is on that page into your computer's temp files. Heavier file sizes means slower load times. And for someone on an older computer with an older browser, more kilobytes could mean several minutes worth of page load times. Think dial up internet slow... This could make the difference in whether they decide to keep browsing through your site or not, or if they would revisit your site again.

Another unfriendly MS habit found in these programs, and the main reason for the title of this blog, is their file naming system. When you create and save a file, you want to name it something that means something so it is easily remembered. However, a file name like index_Page_2721.html tells neither you the creator of the page or your visitor anything about what that page is about. When you go back to edit or update your site, how are you to know which page you need to edit while looking down a long list of files all beginning with "index_Page" and a series of numbers. And if you can't tell your pages apart, how is a visitor or a search engine spider supposed to be able to tell what is on your page from the name? (I apologize to some who may be reading this blog. This blog is in no way meant to single any one particular person out, but meant as a help to all. We are all learning, and as you can tell from the rest of my blog posts, I've made my share of mistakes and have learned from them. I write so that all who read them may benefit from what I have learned.)

Pictures are another item on pages that often take away from the user-friendliness of your pages or site. I've seen sites where the whole thing, each page, was a big image, or made up of a lot of little images pieced together to make a large image. Placing text in an image without having it repeated in the text on your page may not be the best for repeated business, especially when it is contact information like your name, address, and phone number. Some text included in an image such as a logo or in a banner is alright; however your entire page content should not be in an image. While they do have some search engine spiders that are capable of searching images for text now, there use and availability is still few and far between. Also, think accessibility - what if someone was using a screen reader, or a computer that did not have the ability to view images. They would then be unable to get any information from your image such as your contact information unless you had it in text somewhere else on your page. Using the alt tag is a way of adding important information about your image on your webpage in a way that can be viewed by everyone. A what tag, you ask? An alt tag, or really the alt attribute of the image tag. Now, I'm not expecting everyone who reads this to be able to understand or fluently read code enough to add this attribute into your page code, most software or applications designed for web development such as Dreamweaver or InDesign provide a place for you to enter alternate text in for an image that would appear if for some reason the image did not appear. Even my email client requests that I enter alternative text for an image when I go to insert an image in my email. This is why it asks for alternative text. Desktop publishing software such as Word and Publisher do not have a place for you to enter alternative image text. And, if you use MS clip art that is available with the software, the image file names will not give any information about what the image is if the image is missing. Their image names are a series of numbers and letters that doesn't make sense to the image, only their file system in their database. This brings me to my next thought.

Just as in naming your page file names something that make sense to you and your visitors, it is equally important to name your images something that make sense. To, again, borrow MS file naming system, for example, index_image5439.jpg does not give you or your visitors a clue what the picture is. Fortunately, we are able, most of the time, to preview the images in our explorer windows before we open an image so we know which image we are looking for and do not always have to rely on the file name. However, a person using a screen reader can not make heads or tails of what index_image5439.jpg could be. Neither can they tell what a picture is about if left with the standard digital camera names like DSC231.jpg. So, again, I say, give your images a proper sensible file name or rename your images from your digital camera before putting them in your web pages, and remember proper file naming conventions. Some people are still on older computers that have problems with spaces and funny characters other than dashes and underscores in the file names, or incredibly long file names. If you keep it limited to 30 characters or less, you will be keeping your file names within acceptable limits for everyone, even those on older systems. And, really, 30 characters is more than plenty to give your image a sensible name. If you need to add more information, use the alt attribute. I mean, would you name your kid something with longer than 30 characters? If you did, I bet you would shorten it to a nickname when you had to call their name or write it all the time.

Hyperlinks are yet another place on webpages where more information is sometimes needed. Have your link text make sense. Don't always just go with the URL of the link. Those may not alway be user friendly. Instead of placing the long address in your link text for all to see, why not give information about what they can expect to see on the page, such as Children's Books on Dinosaurs. Some of the URL include long database query strings that may take up several lines of text. This information is only useful to your browser window to locate that page, but not friendly enough for us humans that run on more than ones and zeroes to remember. If you need to add more information, use what is called a "title tag" or more correctly a title attribute. Again, for those that are not fluent in code, most user interfaces provide space for title text of a link in the application.

A word about some CMS applications such as the one used by my school district, there is a place you can enter alt and title attributes in there but they are not always called "alt" and "title". It may have another text box for you to fill in such as "screen tip". This is where you would add extra information about an image or a link. Desktop publishing software such as Word and Publisher do not provide a space for alt and title attributes, and yet another complaint against them for web design. Where on the page does the alt or title attribute show up? When you hover over an image with alternative text information or a link or button with title text, it shows up in a little block under your cursor. This is how that information gets on the page. This also gives the search engine spiders more keyword friendly information about your page and helps you in the rankings - but that is for a different blog...

One last word about making your pages search friendly for any educators to think about is this - Did you know we are required by law to make our webpages accessible to those with disabilities? Section 508 of the Americans with Disabilities Act requires any electronic information produced by government agencies or those receiving funding from government agencies to be accessible to those with disabilities. This means, if the person needed to use a screen reader to see our pages, they would not see any images and would need to have the information as alternative text. Not that I'm trying to be "big brother" or anything. Just something to chew on while you are updating and changing your sites for the coming school year...

If you would like more information on the searchability of images, try Spider Market SEO's image search tips. For more information about 508 compliance for web sites, The US Government has a whole site dedicated to Section 508 Compliance.

New take on an old trick

I was helping a friend decorate her classroom today, or rather, the wall in the hallway outside her classroom, when I was shown a new trick (Thanks, Adriane!). Actually, its not really a new trick, but more of a new take on an old trick. For years teachers have been creating wonderful decorations for their wall or bulletin board by projecting an image on the wall and tracing it. The old way that I remember of doing this, and have used for years, has been to sort through books or coloring books for a picture you like and use an opaque projector, or an overhead projector. If using an overhead projector, you had to make a transparency of the picture you wanted to use. This took some time, not only in the actual creation of the decoration, but also in the prep work. Time was spent rifling through books and copying the image first onto a piece of acetate.

I was sort of expecting my friend to show me a file that had some cute images already copied onto transparency film, or books to use, when she instead opened up her Internet browser and Googled for cow clip art. I thought of printing the image out and using the ELMO (or other document camera), but she told me that wasn't necessary. All we needed to do was to hook the computer (ibook) up to the projector and voila! No printer was necessary! (Why waste more paper, right?)

After doing a "web search" on Google, we then decided to look through AppleWorks clip art instead and found just the cow we were looking for. She was using her laptop at the time, so I opened up AppleWorks on another ibook and found the same image. We made the image to fit a full standard size sheet of paper, hooked up the projector and I was in business. I also did another Google search, this time using the "image search" and found a perfect mate for the other cow. I had a blank page open in AppleWorks in the window right behind my browser window, so I just dragged the image onto my AW document and I was set to create the other cow.

For those that have never done this before, I taped a piece of brown bulletin board paper to the whiteboard which I was using as my drawing surface. It's hard and extremely smooth so it makes for a good tracing surface rather than a bumpy painted wall. I used brown because it was my base color. Once I had the outline of the cow, or bull, traced with a black marker (I chose to use a regular Crayola marker rather than a Sharpie so it didn't bleed through the thin paper and mark up her white board), I taped, or in some cases, held up pieces of other colors for the spots, nose, horns, and eyes and traced the details. Afterwards, I cut out those pieces and glued them in place while I still had the projected image up. (Glue sticks are such a marvelous invention! No mess or wrinkles in the paper. Now if only we can come up with an easier method for cutting these large figures out!)

Tomorrow I'm making pigs for her using the same method, and adding more grass around the cows that I hung in the hallway. I'll have to take some pictures of the completed scene and post them in here.