Free Photoshop Alternatives

March 26, 2009

When building sites and content for the web, having a graphics program available to you is an absolute must. Of course, the de facto, goto, application for cutting up site designs and manipulating photos is the infamous Adobe Photoshop; however, as a web developer you’re probably used to using free tools so it is not in your nature to want to drop $700 on this powerful program. Also, Photoshop contains a lot of features and functionality that you do not necessarily require on a day to day basis, so does it really make sense for that to be your goto program for lesser tasks?

As I’ve moved around from computer to computer through the years, sometimes I’ll find myself without a Photoshop license or not really needing the full fledge image utility. This has led me to find a number of free Photoshop alternatives that I use on a frequent basis to help me accomplish image manipulation and editing tasks for building websites and site content.

1. Paint.NET — Downloadable Windows application. http://www.getpaint.net/

Paint.NET is a great alternative to Photoshop in that it is a powerful downloadable program that you install to Windows. (Unfortunately it is a Windows only application so Mac users can feel free to jump to the next item in the list.) It is very lightweight and loads up very quickly; due to this, when I need to crop or resize an image quickly, I’ll opt for this even if I have Photoshop available.

The application features layers as well as a number of image adjustments (curves and levels) and professional effects (gaussian blur.) Paint.NET does have rulers, which can be set to display pixels, but does not provide the powerful guide functionality from Photoshop, forcing you to setup a separate guide layer and adjust the opacity or blending appropriately if you need to have a reference for horizontal or vertical rules when working with an image.

Lastly of great importance to website building is the ability to optimize images when saving. Paint.NET provides a slider for choosing quality when saving JPG’s or PNG’s and allows you to customize transparency settings of PNG’s to some extent as well.

paint_net

A powerful, downloadable application for Windows that provides commonly used Photoshop features.

2. pixlr.com — Flash based web application. For web guys on the go, pixlr.com is a very powerful tool. It is essentially Photoshop lite in the web browser.

Getting started with editing your image in pixlr.com is easy. Importing your image is especially painless, if it’s already on the web, using the handy “Open from url” option. Once you’re working with your image, Pixlr.com provides layers as well as a number of adjustments and filters for manipulation and tweaking. I found that the app’s shortcut keys are very similar to Photoshop, which is very handy for those of you who love to use the keyboard to speed up workflow. Pixlr.com has a Photoshop-style navigator for zooming and moving around the image. The colorpicker is also very easy to use and the eyedropper appears to be very accurate. Options for saving your images after you’re done editing are limited, but you will be able to choose your quality for your JPG and save off transparent PNGs with ease.

All in all, Photoshop veterans will feel at home using this application and will appreciate the convenience of being able to access it on any computer with a web browser.

Great tool for web guys on the guy. Provides lots of power as a web app in the browser.

Great tool for web guys on the go. Provides lots of power as a web app in the browser.

3. picnik.com — Flash based web application. Good for content images, integrates with many social sites.

picnik.com is a very intuitive and painless way to dress up photos you may have for use in your site’s content. Boasting easy ways to accomplish crops, red-eye removal and many other tasks you find yourself continually performing on photos. picnik.com takes it a level higher than a photoshop style application and provides macro’d image tools such as rounded corners and “HDR-ish.” It’s a powerful way to quickly stylize a photo that you wish to include on your site. Also of note are the curves and levels tools on this application.

A very nice feature of picnik.com is its integration with many sites on which you probably already have your images, such as flickr.com or Picasa. You can easily sync your picnik.com library up with these sites and have your images at your fingertips for quick editing and manipulation. When saving out your image after editing, you will be able to save it back to these sites or off to your computer with a number of file options.

Picnik makes it easy to accomplish those photo editing duties you find yourself doing everyday.

Picnik makes it easy to accomplish those photo editing duties you find yourself doing everyday.

4. Adobe Photoshop Express - Photoshop.com — Flash based web application with limited functionality, have to create an account.

Now this selection may not come as that much of a surprise but it’s definitely worth writing about. Photoshop.com is Adobe’s free, completely stripped down, online version of their photo application. This web application is pretty limited in the functionality it provides, but in some cases, it might be all you need.

Photoshop.com provides many useful tools for quick image editing and composition, such as cropping and text tools. It easily integrates with other photo sites such as flickr.com and Picasa, allowing you to quickly bring in existing photos for editing. The red eye removal tool and color manipulation tools prove to be useful, however as far as features go, the utility doesn’t provide much more. It appears that the audience they’re trying to attract with this tool is more for creating and sharing fun photos, which in some cases, might be what you’re looking to do when you add photos your website’s content.

Quick and dirty tool for accomplishing the simpliest yet most common of photo editing tasks.

Quick and dirty tool for accomplishing the simpliest yet most common of photo editing tasks.

Categories: Uncategorized

Multi-line Strings in JavaScript

March 12, 2009

When diving into JavaScript, a frustration coders will run into is the apparent lack of support for multi-line string literals in Javascript. What does this mean? Well, say you have a lot of text that you wish to define as a string in JavaScript. Often, for code readability, you would like to set the value of the string using characters across multiple lines.

Unfortunately, you can’t just assign a string like:

var string = 'this is my
very long string';

There are, however, a couple of great ways to get around this. My favorite methods, personally, are the following.

Heredoc Method

var string = (<r><![CDATA[

   The text string goes here.  Since this is a XML CDATA section,
   stuff like <> work fine too, even if definitely invalid XML. 

]]></r>).toString();

The major advantage of using the heredoc method is it preserves whitespace, which is super userful! As you can imagine, it’s very easy to define tabs and other whitespace by actually entering that whitespace into your string. No need for “\t.”Backslash MethodAnother method includes using a backslashes to denote end of the line in the source. This will translate to a continuous line in JS.

Backslash Method

var string = "another long \
test string";

In this technique, the backslash acts as a line terminator, representing to the JavaScript engine that the string’s definition will continue on the next line. Note: after doing some research, this technique is apparently not in compliance with browser standards; however, it works out fine when tested across all major browsers.

Concatenate Method

Of course, the traditional technique is to concatenate multiple strings together on multiple lines using the “+” operator:

var string = "really long string"+
"another even longer string";
Categories: Uncategorized

MySQL Filesort Debunked

March 6, 2009

Baron Schwartz over on the MySQL Performance blog has written a great post about exactly what a filesort in MySQL means.  He mentions that he commonly asks the question in interviews and the interviewee rarely knows the answer:

The usual answer is something like “rows are being placed into a temporary table which is too big to fit in memory, so it gets sorted on disk.” Unfortunately, this is not the same thing. First of all, this is Using temporary. Secondly, temporary tables may go to disk if they are too big, but EXPLAIN doesn’t show that. (If I interview you, I might ask you what “too big” means, or I might ask you the other reason temporary tables go to disk!)

The truth is, filesort is badly named. Anytime a sort can’t be performed from an index, it’s a filesort. It has nothing to do with files. Filesort should be called “sort.” It is quicksort at heart.

There you have it.  Filesort actually uses the quicksort algorithm since the database is not properly indexed for the queries you’re performing! Make sure you’re setting indexes correctly to optimize performance!

I’ve commonly seen this indicated when EXPLAIN’ing queries, so it’s nice to see what the correct answer is.

Categories: Uncategorized

Delayed Redirect in PHP

March 6, 2009

I’ve seen a number of different ways discussed on how to achieve the “wait and redirect” effect entirely in PHP. This type of functionality could easily be achieved in JavaScript using a setTimeout coupled with an anonymous function to send the user on their way to the next location; however, in PHP it gets a little tricky.

Here’s how to accomplish this in JavaScript.

var new_location = 'http://www.seanasullivan.com';
setTimeout(function(){window.location = new_location},2000);

In PHP, you have to deal with the limitation that you cannot output anything to the page before the headers. And since setting headers is the way by which we need to redirect the user, we need to find the appropriate valeus to set so we can also display a friendly message to the user, such as “Currently Redirecting” or “Thank You for Logging in! We are now redirecting you to your account.”

If you didn’t need to output anything to the screen, there’s a sleep() function available in PHP which will delay your code from being executed for the amount of time specified. You could use this, quickly followed by the header() function to send the user off. In my opinion, this is not a desireable implementation

The “refresh” header, is the correct way to accomplish this effect. By setting the pages header to refresh, you gain the ability to define a delay, in seconds, followed by the url in which the user should be sent after the delay.

header("Refresh: 3; http://www.seanasullivan.com");

This results in a header that looks like this in HTML form:

<meta http-equiv="Refresh" content="0; url=http://www.seanasullivan.com/">

One caveat with this issue is that it does “break” the back button on the browser. In some ways, it may not be a big deal; however, as clicking back after being redirected simply takes the user back to the page before the one they were redirect from. In my most recent implementation this isn’t an issue because I was using the redirect after the user logged into a site. So the flow looked like:

Login Form -> Succesful Logs in Message (trigger redirect) -> Account Page

In this case, once the user lands on the Account Page, clicking back on the browser takes them to the Login Form. Like I said, not an issue in this case, but beware, you may encounter circumstances that you need to be sensitive to this.

Categories: Uncategorized