Script to Convert PSD Files to HTML Templates

For a while now I’ve been tinkering with this GIMP Plugin that converts PSD files to HTML templates. There’s been some recent interest in it, so I’ve decided to work on it some more and get a usable release out.

Download psd2html-gimp-plug-in

How do I install/use it?
The project page will have current installation and usage instructions.

What does it do?
The script detects which layers are on top of other layers and what their size and relative positions to each other are. This data is used to arrange the layers into a hierarchy, which can then be expressed as HTML nodes. Each layer is expressed as a <div> element with a unique id based on the layer name, and that id is used to specify the size and position of that element using CSS. Text layers are saved as text within the HTML file, and image layers are extracted to the <template_name>_files/ directory, relative to your PSD file.

Can you port this to Adobe Photoshop?
I think it would be possible to write a similar plugin for Photoshop, but for a large variety of reasons it’s not very practical. Reasons include: GIMP is FOSS and Photoshop is proprietary; GIMP plugins can be written in Python and I think Photoshop plugins have to be in written in C, C++, or Flash/Flex; based on what I’ve read on Adobe’s website I’d need to get their permission; and I don’t have Photoshop. Plus, Photoshop and the development tools I’d need only run on Mac and Windows, and I switched to Ubuntu almost 2 years ago.
I know lots of people prefer Photoshop and hate GIMP. If so you can always do your work in Photoshop and just use GIMP for PSD conversion.

Advertisement

Redirection WordPress Plugin

So when I first set up this blog I opted for the /archives/%post_id% permalink structure, which I liked because it was short, elegant, and used unique identifiers. I didn’t like the idea of date and slug based permalinks since they don’t use the hour, minute, and second you published your post; just the year, month, day, and title are used, none of which have to be unique. Although extremely unlikely, theoretically you could publish 2 posts with the same title on the same day and they would have the same URL, which doesn’t sit right with me.

As it turns out though, SEO calls for slug based permalinks since search engines strongly favor pages with keywords in the URL. I decided to switch to date and slug based permalinks, but what about all the numbered archive/%post_id% links that have been posted, linked, bookmarked, indexed, etc.? Well I found this great WordPress plugin called Redirection. It lets you specify URLs you want redirected and what HTTP response code (301, 302, 307, 404) to use. It also features a log of redirects and 404 errors, so you can look for common requested URLs that don’t exist and redirect them. It would be kind of hard to update a few hundred links to the new slug URLs, but for 5 posts it was very simple and just what I needed. Another great feature is, anytime you edit a post slug it automatically adds a redirection rule to the new URL.

WordPress Twitter Better Plugin

One great way I recently found to publicize new blog posts is with the Twitter Better WordPress Plugin. It serves 2 functions:

• Shows your latest Twitter posts
• Optionally updates your Twitter status when you save, publish, and/or edit a post, with a link to the post

It’s a really simple way to spread your URL around the internet, especially since Twitter is integrated with so many other web apps. For example, I have Twitter Better set to update my Twitter status when I publish a new post with the title and URL of the post. That new Twitter status is then used to automatically update my Facebook status with the title and URL of my new blog post, and the same can work for any other Twitter enabled web apps I use in the future.