《Establishing a theme screen shot》 【本字幕由ACELY 整理&转码】 Time to add the cherry on top of our theme: a screenshot to help identify it in WordPress.
【如果喜欢该教程，请购买正版！】 If we go into the Theme section of the Dashboard now, you can easily add that to
【----ACELY STUDIO----】 【作品只能交流学习，不得用于任何盈利用途！】 make your theme more complete and easier to activate.
WordPress needs a graphic in web-ready format--
PNG, GIF, or JPEG that is--ideally, 300 pixels wide by 225 pixels tall.
If you don't have a comp available, I'll show you how you can quickly create one
using Dreamweaver's Live view and a graphics editor, such as Adobe Fireworks.
Let's switch back to Dreamweaver where I have opened my index.php set into Live view.
Now, this design is 960 pixels wide.
To match the proportions of a 300 x 225 screenshot, it would need to be 720 pixels tall.
In this situation, my screen is only 540 pixels tall, for recording purposes, as
you can see by looking at the window size indicator on the status bar.
So what I'm going to do is to grab this screen and then adjust the image in
Fireworks to the proper height before I reduce it to the correct dimensions.
Now it's time to fire up your screen grabber.
On the Mac, you can just press Command+Shift+4;
on Windows, the built-in screen grabber is called the Snipping Tool.
So I'm going to go over to the Start Menu and start to type in snip. There is my
Snipping tool I can click on.
And I want to choose a new rectangular snip here.
And there you see my crosshairs, so I'm going to grab just the top-left here,
and then go down as far as I can right below the border, above the footer, and
then release, and there is my screen grab.
And now I will go to Edit > Copy.
Now, let's head over to Fireworks so we can manipulate our screen capture.
So I'm going to create a new Fireworks document and that will automatically pick
up the dimensions of the image on my clipboard, which you can see is a little
bit more than 960 pixels, but that's fine.
So we will click on OK.
And now I am going to paste that in, Ctrl+V. Let me reduce this so you can see everything.
I will choose View > Fit All. And here you can see that it's off a little bit to
the side, so I will bring it into the center, and let's actually move it all the
way over to the left.
If you look down at your Property Inspector, your X and Y should both be at 0.
Now, let's go ahead and adjust the canvas size.
I will click outside of my selection, make sure that the Canvas Color is set to
White, and then click on Canvas Size.
I'm going to set the eidth to 960 pixels and the height to 720.
The next critical thing you want to do is change the Anchor. Rather than
anchoring it from the center, which is the default, anchor from the top-left corner.
This will make sure that the 960 pixels start all the way on the left and
all the way on the top. Click OK.
Now, my canvas is the right size, but it needs a little cleanup, so I'm going to
go ahead and first select the image, and then I'm going to choose Edit > Crop
Selected Bitmap, and I'm going to move it up a little bit, right under the
borderline. That will get rid of that gray area down at the bottom.
So then the next section to fit is the left-hand side, where I have a little
bit of gray added here.
So I'm going to go ahead and select the Marquee tool and then drag out a
rectangle, and release it while I am overlapping the bottom of the image.
I'll switch to my Paint Bucket tool, click Fill selection, and change the
fill color to white.
Place my cursor over the marqueed element, click, and now if we go up to
Select > Deselect, my image is complete.
There is further cleanup that you can do, and you can add in other images if you
like, but it's pretty much done.
So now I'm going to select my Pointer tool and then click outside of the image,
and let's resize it by clicking on Image Size.
We want this to be proportional, so I am going to resize the image to 300 pixels wide.
And when I do, the height is automatically adjusted to 225 pixels. Click OK and
there's our thumbnail.
So all we have to do now is export it, and I'm going to export it as a flattened PNG.
So in the Optimize panel, I'll choose PNG 8 and then choose File > Export.
And we want to save this in our theme, so I am going to navigate to my site,
which is within the C drive, and because I'm using WAMP, within the wamp folder,
the www folder, there is my DW_WP_Themes folder.
I will dive into that.
And now go into wp-content/themes/ custom. And we want to give this a specific
title of screenshot.png.
So I'll save it. All done. Let's switch over to WordPress.
And if I hit Refresh, there is my screenshot.
Naturally, if you have a comp of the completed design, you create your
【本字幕由 ACELY.CN 独家制作发布】 -----欢迎加入群号：214645753----- screenshot graphic from that, but this technique provides an alternative method
【更多字幕，请访问唯一发布站ACELY.CN】 for those who build their sites directly in Dreamweaver, and it works well for
our bare-bones custom theme.