TikiJon.com

If you’re the type of Web Designer that doesn’t like to get your hands dirty with XHTML and CSS, SiteGrinder 2 could become your best friend. It’s a plugin for Photoshop that can turn a design into a fully functional website. This means you will no longer need to outsource the programming of your designs.

Enabling Photoshop to Do More

Out of the box, Photoshop is a robust graphics package with a powerful set of tools that enable designers to work their magic and create visually stunning web designs. In a typical web site creation workflow, when the design process is finished, so is Photoshop’s role. However, if you’re using SiteGrinder 2, Photoshop becomes a fully functional web page building solution. It’s a plugin that makes the transition from design to code seamless.

SiteGrinder 2 also ensures that the integrity of the design is maintained. This is so important for designers. Often times in a typical web site creation process, important aspects of a design have to be omitted because they require complex coding. SiteGrinder 2 makes sure that your design will look just as good in the browser as it does in Photoshop.

The main aspect of SiteGrinder 2 that designers will love the most is the fact that no coding knowledge is required. All of the code is generated by the plugin and it happens behind the scenes. And if you are the programming type, SiteGrinder 2 is going to be a huge time saver. There’s no longer a need to switch to Dreamweaver or TextMate after your design is finished. SiteGrinder 2 does all of the coding for you, leaving you more time to tweak your design.

So How Does it Work?

This explanation of how SiteGrinder 2 works is going to be short, because it’s such a simple process. It’s all about how you name your layers in Photoshop. The plugin requires special “hints” that tell it what each layer should be. For example, if you have a button in your design, just add “-button” to the end of its layer name, or “-rollover” to define its rollover state. Of course, for some designers this will mean actually being organized with their layer naming and overall PSD structure, but this is something that web designers should get in the habit of doing anyway. Plus the time saved by using this plugin makes it a non-issue. These hints are also used to create more complex web site elements, such as drop down menus, forms, multi-media content and more.

Basic or Pro

SiteGrinder 2 comes in two flavors: Basic and Pro. The right version for you will really depend on the functionality requirements of your sites. The Basic version gives you all the standard features, but does limit you to using solid color backgrounds. Going Pro will give you more options for background images and the added ability to easily create photo galleries, include Flash media, and add forms to your pages.

When products come along that claim to make difficult and complex tasks “push button” easy, it’s natural to be skeptical. However after using SiteGrinder 2, I’m convinced that this is a powerful plugin that can make a web designer’s job much easier.

Visit the official SitGrinder 2 site to learn more about this product.

Mike Beltzner, the director of Firefox, was in New York City today and dropped by my office to talk about Firefox 3.5, which is now officially being rolled out as a “preview” version (a very stable beta) to everyone using the current 3.5 beta. Firefox 3.5 is supposedly much faster than earlier versions, which is always a good thing. Honestly, the nanosecond speed differences between most of today’s latest browsers is becoming hard to detect. Three features of Firefox 3.5 which stand out for me are: 1) its embrace of open-source video standards, 2) its geo-location capabilities, and 3) support for downloadable fonts and other graphic tricks.

In the video above, Beltzner demos some of the new video and graphics capabilities of Firefox 3.5. Built into the browser is a video player based on the open-source video formats Ogg Vorbis and Theora. The video player supports HTML5, which means that links and other interactive elements can easily be placed inside videos. The demo page Beltzner shows in the video can be found here (but the effects only work if you are looking at it in Firefox 3.5). Being able to treat the content inside videos like Web pages opens up a whole new world of possibilities for Web video. Already, DailyMotion offers all of its videos in the Ogg Theora format. If this takes off, Flash video could be come history.

Look closely at what Beltzner is showing off in the video, because you can’t do any of that with Flash.

Update: There is a lot of great debate in the comments about whether or not you can do this stuff in Flash. Technically, you can, but the only examples I’ve seen are where the entire page is done in Flash or a proprietary overlay is being used. The videos in the demo all sit within regular Web pages and are written in HTML5. What is interesting in my mind about the Ogg Vorbis format is that it makes videos programmable. Videos today are still for the most part siloed off from the rest of the Web in their Flash players as a separate experience. It is time to break down those walls.

Crunch Network: CrunchBoard because it’s time for you to find a new Job2.0