Flash Tutorials
& Resources
Dreamweaver
Tutorials
Fireworks Tutorials
& Resources
Photoshop
Tutorials
Web Design
Tutorials & Resources
CSS
Tutorials
CorelDraw
Tutorials
You are here : : Home > Free Resources > Fireworks Tutorials & Resources > Creating Website Screenshots & Thumbnails  

 

Featured Fireworks & Dreamweaver Template

Learning Template 6
Learning & Education
$39.95

Creating Website Screenshots & Thumbnails

A screenshot is basically a snap-shot capture of whatever is displayed on your computer screen. Screenshots are widely used in tutorials to guide the learner with images of the menus, pictures, etc. Follow these simple steps to make your own screenshots/thumbnails. Thumbnails are something like screenshots, they are the smaller versions of an image and you can click on it to view the actual image.

Step 1

Open a new page in Fireworks and set the canvas color to transparent.

Step 2

Open a web page, background or even any software which is open and press the Print Screen (Print Scr) key which is on the upper right of the keyboard, just next to F12 key.

Step 3

Now go to the Fireworks page and press Ctrl+v or right click the mouse and select Paste from the pop-up menu. Now you can see the screenshot image on your canvas, but the actual image is the size of your screen.

Step 4

The next step is to crop the necessary part of the image. Click on the image and drag it placing the portion which you want to crop in the center.

Step 5

With the image selected click on the crop tool on the tool bar and select the portion on the canvas that you want to crop.

You'll see a dotted line with handles (8 small black squares). Your can click on these handles to mark the portion to be cropped. Later if necessary you can also reduce the size by using the scale tool or give it a fixed height and width by clicking on Window>Info.

Step 5

After you've given the proper height and width or reduced the image to a particular size, press Enter key. Your screenshot is done!

In this tutorial, I am making a screenshot of entheos home page, so first I'll reduce the size of the screenshot using the scale tool, when the image fits the canvas I'll use the crop tool to crop the web page without the browser menu on the top and status bar at the bottom.

Here is the screenshot of the web page.


Now building a website is as easy as 1-2-3!

Please Like, Tweet, Share or Comment on this page if you found this tutorial/resource useful!

No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.


awesome website templates

EntheosWeb Design Blog

New Fireworks Tutorials

Learn How to Create a Smart 2D Button in Adobe Fireworks with Rollover Effect

Typography Art in Fireworks

Tracing & Drawing in Fireworks

Overlay Effect in Fireworks

Designing a Website Layout with Curves in Fireworks

Create a beautiful Slideshow Gallery in Fireworks CS4

stunning header collage