Build Your Own Business Website header image

How to Convert a Flash Site to WordPress & Thesis 2.1 – Part 2 – Collect All of the Assets

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to - ,

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Now that we’ve taken an inventory of the existing flash site that we are going to convert to Thesis 2.1, we need to collect all of our assets.

The Site Assets

The owner of the website gave me files with most of the assets which are files with images for the gallery, with images for use on the site, with the pdf documents that we need to link to, text files for various pages and then the images for our top banners so we have most of our assets collected here.

The one thing we don’t have collected you’ll see if we look at other images and look at these logos here. These logos here actually don’t really match the logo shown here because the logo shown here has their font, Wasabi and Restaurant and Bar.

Use Screen Capture to Get Logo

So what I’m going to do is take another screen capture of this and I’m going to make this from under Restaurant and Bar all the way to the top. I’m going to make that actually the logo image rather than using the one the client supplied because we don’t have one that has this text.

So I’m going to take another screenshot and right now I’m just going to over cut it here and save that as wasabi-logo. I suppose while we are gathering our assets we may as well just open up those assets in Photoshop so that we are ready to use them.

Manipulate Screen Captured Logo in Photoshop

The ones I just opened are actually in Documents and Snagit. So this is our main image or this is the big layout. We know this is 900 pixels wide so I’m going to drag those grids there and just zoom in on it just to make sure we’re actually 900 pixels. So that’s 340 plus 900 would be 1240.

To get the width of this column then what we’re going to do is…although we’re going to zoom in on it. Well, I think we can call that 590 really. Each one of those things is a pixel so if we call that 590, 340 from 590 is 250 pixels and so that’s how wide it will be. I thought that it would be a little wider than that but it’s not. So our one column is going to be 250 pixels wide and our other column is going to be 650 pixels wide.

Our Wasabi image here will be 250 pixels but it’s centered about that line right there, so in fact, we may as well just do that right now. We may as well look for the center and try to autosnap the center of the image. It’s an interesting one, the background image is exactly the same…yeah that looks like that’s essentially right on the middle. With that right on the middle we want one of them to be 125 pixels on one side and 125 pixels on the other.

The math on that is 153 minus 125 is 28 and actually, we probably don’t want this image to be 250 pixels wide, we’re going to make it that at the moment and then we’ll adjust it if we need to so 153 and 125 is 278.

It is adjusting itself here, I’m just going to take it to that. Then I’ll go to image, canvas size and we’ll take it to 250, hold it there. Now, we’ll just save it and I think actually, PNG-24 is probably fine, it’s only 8.7k. So we’ll save that as wasabi-logo.png.

And that sums up pretty much all of our assets. That takes us on to the next thing we want to do which is to set up WordPress in the development subdomain.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one