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.

By now you have probably noticed a lot of “hand drawn” style web designs. It has become a very popular option for designers when a project calls for a fun and inviting theme. We’ve shown you where to get your hands on some really great hand drawn design elements, but if you are getting ready to start on a site design that requires this particular style, you will need some hand drawn fonts. Here are 21 of the best available.

Grutch Shaded

Pointy

Pee Pants Script

Fh Scribble

OPN Stun Filla Wenka

Mia’s Scribblings

Jamaistevie

Sketch Block

Tire Shop

Bearpaw

Barnes Erc

My Turtle

Against Myself

Fail

Karabine

McCoy – Hello Lori

Clementine Sketch

Oh Ashy

The Quiet Scream

3Dumb & 2Dumb

Rock Show Whiplash

Photography can either make or break a web design. This starts with the photographer and the camera, but more than likely, photos coming straight from the camera will require some type of adjustments or treatment in order to match the style of it’s surrounding design. Here are 13 Photoshop techniques that you should find useful for enhancing photos to be used in your web designs.

How to turn your photo into movie-like effect

Add A Realistic Rainbow To A Photo In Photoshop

How To Make Digital Photos Look Like Lomo Photography

Awesome Photorealistic Coloring Techniques

Add Dynamic Lighting to a Flat Photograph

Curvy Cross Processing in Photoshop CS3

Dramatic Gritty Effect

Photoshop vintage effect

Tilt Shift Photoshop Tutorial: How to Make Fake Miniature Scenes

Watercolor Effect

Coloring Effects

Split Toning Black and White Photos In Photoshop

Infrared Photo Effect In Photoshop