Converting a Photoshop File to a WordPress Theme

This post has been in draft mode for 3 years.  What is really funny is that post is still relevant today.  Standards have changed, things have gotten better, but it is always a fun challenge to try to make a site look just like the Photoshop (PSD) file.  This shows you how we work

We stick with WordPress standards

• We have run into clients that expect WordPress to function in an odd way because they usually purchase themes from places like ThemeForest that do not stick with the WP standards. There is no regulation committee that makes sure the themes stick with standards, and so developers bake in too much functionality into the theme.
• We think a theme is a theme, the theme should only be a theme, even if the client thinks a theme should be more than a theme and contain functionality. If a person changes themes, the functionality of a site shouldn’t change.  Yes, there probably be some styling issues, but things shouldn’t break because of the theme switch.
• Plugins are for functionality. If a user changes a theme they shouldn’t lose functionality, that is why functionality belongs in a plugin. We do our best to keep functionality in the plugins. Normally when we develop a theme, there is a plugin that goes along with the theme that contains the functionality that the client requests.
• Themes should not contain SEO features.  This is kind of related to the previous point, but none-the-less… we have run into people that have asked us to help them select or setup a theme that they like.  When they do, sometimes they lose all of the SEO “info” that they spent time working on.  That is because the theme author that it would be good for the users to not have to install a plugin to do SEO, but that really screws people over if they want to change themes.

The Designer’s Artwork

• We build a custom theme based on the artwork that has been submitted.  If the width is 1341px wide, we will build the site based on a 1341px width.
• We do not assume that the artwork we receive is not guidelines, we will build it with the placement of the elements just like the comp.
• If the artwork has three social media icons in the artwork, we develop the site with these three icons.  Yes, we have plugin that has a fallback just in case they add, for example, an Instagram icon, but if the comp doesn’t have an Instagram icon designed, we don’t build it in.

Fonts

• The web is not print.  It is not as flexible as print.  If you want text wrapping around a circle it will have to be an image.  Yes, the web is getting much more flexible than it was, but we can’t have text follow a path as you could in Illustrator.
• The web does not use “points” for measurements.  Why is that?  I’m not sure.  Probably because the people that set web standards aren’t designers.  When I designer gives us “20 point” for a font size, we basically have to guess what that mean.  It is best to give a developer a pixel size instead.
• It is nearly impossible for a font to look 100% like it does in Photoshop.  You have settings like “smooth” and “crisp” for the font in Photoshop and those aren’t actual fonts, they are “morphed” versions of a font.  The web doesn’t have that ability.
• Every browser renders fonts slightly differently.
• Photoshop allows kerning, web does not.
• Google Fonts is the best route to go if you need custom fonts.  Browsers support them.

Font Services

• Some font services cost money, TypeKit and FontDeck are two examples.
• Google Fonts are free and Open Source.  As of this post, there are over 800 fonts to choose from.  For a designer, I know that is not a lot.  For the rest of the world, they can’t tell the difference between Georgia and Times New Roman.  I’m just sayin’.

After all of that is said, we LOVE to work with other designers and design firms, but I just think it is good for these firms to understand where we are coming from.  I did my first web site in 1996, I have seen standards come and go, but the web has limitations.