Creating a simple screenshot

On this page we'll teach you how to start with a very simple screenshot, and you'll see that it's quite easy in fact!

Step 1: Take the screenshot and crop it

The default screenshot size is 1280 x 720 pixels (the screen paragraph has a fixed size of 920 x 518, which means that your image will be scaled down in most cases).

Do the following to take a screenshot:

1. Go to the page on Morzino you'd like to take a screenshot of.

2. Go to the Resources menu and select the Screenshot tool. A new window will open, showing your page in a box that's exactly 1280x720 pixels:

In some cases you won't see the page you wanted to get, then you simply have to navigate back to it within the screenshot box. Please note that you may also enter a URL in the navigation bar on top of the screenshot box (this may even be a different website).

3. Take a screenshot (Win+PrtScr on Windows - Shift+Cmd+3 on MacOSX). Your OS should save an image file on your local computer.

4. Open the screenshot file and crop it, using the guidelines and cropmarks on the image. Most simple image tools offer a crop feature (Preview on MacOSX for example). You may also use a fully featured image manipulation program such as Adobe Photoshop of course.

5. Save your cropped image as a JPEG or PNG file (usually you don't have to worry about the file format or filename).

Your screenshot file is now ready. 

The resulting file dimensions should be exactly 1280x720 pixels - on some systems of screens the file could be a lot larger (on Apple Retina displays for example). Don't worry about this, the file dimensions will be automatically adjusted once the file will be online.

Step 2: Create a "screen" paragraph in your tutorial

Create a new wiki or go to your existing wiki project (this might be a tutorial wiki, but you may also add screenshots to any other wiki type).

Go to the page you'd like to add the screenshot to, click edit in the menu on top of your project and add a new screen paragraph. Your new paragraph should look as follows (a simple empty blue screen):

Step 3: Upload your screenhot

1. Click on the edit pencil to open your screen paragraph in editing mode.

2. Click on the image icon in the editor menu bar (the one that says "background" when you move your mouse pointer over it). A dark box will pop up, giving your some options.

3. Select your screenshot file on your computer (there should be a choose file button) and hit the green upload button.

As soon as your file has been uploaded it will appear as background on your screen paragraph. It may take a few moments if your file is very large, and it will also be resized and optimized on the server if necessary.

Your screen paragraph should now look like this:

Step 4: Add header and text

Adding the default header is very useful as it helps to make all screenshots look uniform. A further advantage is the fact that the generated header is multi-language will automatically adapt to language switches and other changes made to the main navigation tools.

You can select the header by clicking on the header icon on the screen paragraph editor menu bar (the one that says "header" when you move your mouse pointer over it). A dark box will pop up, allowing to select one of the available headers.

Click on the texts icon on the screen paragraph editor menu bar (the one that says "texts" when you move your mouse pointer over it) to add your first text box. Click on the green create/add button to add a first text object.

You can move your text box around using your mouse pointer and you can edit it after clicking on the edit pencil. Don't forget to click on the green save button at the bottom of the screen paragraph to save your changes!

This is what your header and text should look like now:

Sign up now, it's free!

Step 5: Turn your text into speech bubbles

You can turn your text object into a speech bubble by clicking on the setup icon in the upper right corner of the object. 

You'll get a certain number of options, including speech bubbles (left, right, top and bottom). You may also edit text and alter the exact position on the same page.

Press the green save button to save your changes.

Note that you may also change the bubble / text object width by clicking and holding the blue arrow icon. Again, don't forgot to press save to take over your changes.

This is what your speech bubble should look like now:

Sign up now, it's free!
Chapter 1