Learn Photoshop in Web Design


Even today, many web designs begin as Photoshop designs. This is becoming more and more complex and needs to be converted to HTML and CSS in the final project phases. No wonder the PSD-to-HTML conversion services still lack commands. Many developers have created a overflow of plugins to make it easier to convert PSD to HTML. I have unearthed five that I believe are among the best.

Fast grid with guide

In the beginning, you probably want to organize a grid of columns and-probably-rows so that you can organize the content properly. This can be easily achieved with the help of the Photoshop guides function. Nevertheless, the guideguide plugin has an even simpler approach. You feed the plugin with the basic values and the plugin creates the necessary instructions for you.

All you need to specify the number of columns, as well as their width or margins. The guides can also be placed where the grid should end. You can save and retrieve the grid structures for future use.

GuideGuide works in Photoshop from CS5.

Simply export slices with Cut & Slice me

Exporting images of a finished design means a lot of manual work. Photoshop of course offers its own slice tool, which is able to export predefined slices of images as individual files. But it does not care about the different states of the same image, for example, if it is used in a menu hover.

Cut & Slice me will help you especially if you are used to the syntax. The plugin exports based on layers and based on special suffixes, such as _BTN, which would tell the tool that a button with more than one status is defined from there. Additional suffixes normal, hover, clicked, etc. you define the different States and are exported as separate images.

Cut & Slice me is only available for the recent CS6 version of Photoshop.

Create favicons with plugins from Telegraphics and Sibcode

Favicons are mandatory. Look around and find me a website that goes without these little pictures. Favicons are stored in ico format and of course there are many plugins to help you create a favicon. While Sibcode’s ico plugin allows more than one icon to be stored in a file, the Telegraphics plugin does not. The Telegraphic plugin has the advantage that it is available for 64-bit Photoshop, while Sibcode is not.

Fonts in layouts: try to integrate

You may not have a font that could possibly fit your next possible client installed on your local hard drive. Fortunately, there are foundries that help you get out of this possible misery by providing plugins that allow access to non-installed fonts.

I especially recommend using the plugin from WebINK for the reason that in addition to accessing its own font library, allows the integration of Google Fonts into your design workflow. The fontshop plugin is also noteworthy because it allows you to buy fonts directly if you decide to keep them in the final version of your layout.

Smaller PNG with SuperPNG

PNG bat GIF in a variety of ways. PNG is in color and has an alpha transparency. On the other hand, you have to admit that PNG is much larger in file weight. SuperPNG takes care of this problem and reduces the size of your PNG without giving you the opportunity to see the difference.

Leave a Reply

Your email address will not be published. Required fields are marked *