Part 1 – Break Down the PSD File
In this session we discuss how to “convert” a Photoshop PSD File to a working WordPress and Thesis theme site. “Converting a PSD” is just a phrase used in the marketplace but what’s really happening is the PSD file is a guide for the website design. This is only possible with a layered psd file. Here discuss how we’ll use those individual layers, each with its own image, for the new website.
Well, good morning everybody and welcome to this Wednesday morning edition of our live call-in Question and Answer session. We have a bunch of questions that sprang up this morning that we’re going to address. But before I do that, I’m going to talk a little bit about how to convert a PSD file into a website. Now you know, that’s actually a crummy way of saying it. You see, people advertise you know, PSD conversions, right? They take a PSD file… no, converting your website for $50 or whatever. And in the context of WordPress and the Thesis theme, that’s not really how it works. And the way it really works is you use a PSD file as the… as your guide and as a resource for graphic elements and that’s what we’re going to do here in the first part of the session. We’re going to use Photoshop and the PSD file as the guide to create a web page. And we may not get all the way through it today. We may you know, after I’ve been going for about a half hour or so, I’ll probably stop and take questions instead.
Now it has become apparent to me that there are people that come to these things that know quite a bit more in Photoshop than I do. And so to the extent that you notice… you’re one of those people and you notice that there might be something that I could share that would be different or that might be easier than the way I do it, please feel free to raise your hand and chime in. And I’ll try to keep my eyes open here.
So anyway, as I work my way through this, if you have a Photoshop trick that you want to… or tip that you want to share, please feel free to do so. I’m a long ways away from a Photoshop expert although I can do what I need to do in it. And I know that there are bound to be easier ways to do things. So anyway, that’s… having said that.
How to take this PSD file and covert it into a website. What this is the sort of under construction page for a site that I’m working and this PSD file is a file that the web designer gave to me. I’m… inspite of the fact that I was an architect and I did make aesthetic decisions, it was a whole different kind of aesthetic decision than a graphic decision. And so I don’t do any design work on my own like this. I always rely on graphic designers to do this work for me and I never work on a site where the concept is blank and somebody wants me to come up with an idea and all that kind of stuff. I’m more of a web developer than a web designer and so I do what I’m told and that’s what we’re doing here. This web designer has hired me to help her build this site and the first stage of the site is to create this page. And so we’re going to go through the process of using this PSD file for… and my plugins and Thesis and WordPress to create this page.
So when you start off with the PSD file, if you’re working with a real designer, you’ll have gotten a layered PSD file where you can you know, turn layers on and off. That is, you can hide layers and each graphic element is on its own layer. That’s really the way you have to do it yourself. It doesn’t do you any good to have a for example, a jpeg of this would do me no good because what I really need to be able to do is separate out each of the individual layers to use as I see fit. And so I can’t really… so the layered PSD file is absolutely necessary.
Now this designer has a 900 and or 24 column grid that she uses to design with and she has this little grid as a background image that she drops on there. I’m hiding that now. This 906… this 24-column grid actually produces a 950-pixel wide page essentially, from this edge to this edge is 950 pixels wide.
And when you look at this graphic, you have to ask yourself, what parts of this graphic are going to go where? And so the… and so you have to start off by knowing something about Thesis and WordPress and how these pages go together. And it’s probably fairly obvious to those of you looking at this that this is a Full Width Framework style of page. You’ve got a graphic element that’s going to span from browser window to browser window. It does not stop at the edge of the page as if the edge of the page were right here. And we’ve got a clean demarcation of graphic elements, that is, you’ve got this header appearing area and then content appearing area and then something that could be construed as a footer. And so you’ve got this horizontal layout header area, content area, footer area.
So that’s the first thing to think about is you know, which of the… what are the big pieces of a Thesis page does this fit into? So right off the bat, this is the header area and the header is the thing that’s inside this. Now this, the right person the first time, sounds very much like a tagline. So in fact, it may make the most sense and this is how we are going to do it, to say that the header actually ends at the other side of this yellow bar. So when we’re finished with this, we’re going to have contact information up in the upper right hand corner, a centered logo image and the tagline below that centered in the spac.e
So that’s kind of the header area thing. In terms of the body, obviously we’ve got 2 columns here and it worked fairly easily for us to make this right hand side the content column with Azymuth Consulting being the page title and the left hand column being a regular column with a text widget. I mean, it seems to me like that would work fairly well in this situation so we’ve got a 2-column layout. And then we would simply put this footer content inside the footer area in the right hand corner.
And then we have the one thing we haven’t talked about yet is this graphic, this watermark graphic that underlies the entire thing. This watermark graphic, if we turn off everything for just a moment, turn off all of our layers. You know, we’re left with this green background and if we turn off our green background, there is our infinity symbol as a graphic. And in fact, if we turn off our background white, you can see this is actually a transparent image. And really, that’s what we’re going to start off with. This really works as the body image and it’s already aligned the way she wants it relative to the top of the page so really, the very first thing we’re going to do is take this image and save it as a transparent png 24 and use it as the background on our page.
Then for our content area, we are going to take this transparent image and we’re going to take a 20-pixel wide slice out of it and this will be the background for our content area. And then we can turn that off and then come up to our tagline. And our tagline is going to be the… this is really going to be the background for the header area. We’ll go ahead and put a logo in there as well but the only thing we only need here is just this yellow line. Now you notice that once you built this, she’s got a little bit of drop shadow hanging off of this. So in fact, what we’re really going to do when we create… we’re not going to leave that drop shadow on the yellow because that drop shadow has to overlap this green in order for it to really look proper. We’re going to, in fact, take the drop shadow out of this section and we’re going to put it in the content section. So really, we’re going to start off with those 3 things.